mirror of
https://github.com/davidkaya/aryx.git
synced 2026-07-23 13:08:36 +02:00
feat: batch session archive and delete with multi-select UI
Add multi-select mode to the sidebar session list, enabling users to archive, restore, or delete multiple sessions at once. UX: - Ctrl+Click (Cmd+Click on Mac) any session to enter multi-select mode - Animated checkboxes stagger-reveal across all visible sessions - Click to toggle, Shift+Click for range selection - Running sessions are excluded from selection (safety guard) - Floating action bar slides up with count pill, Archive, Delete, Cancel - Batch delete shows a confirmation dialog with hold-to-confirm for 3+ sessions and a scrollable list of session titles - Batch archive shows an undo toast with 5-second auto-dismiss - Escape key or Cancel button exits multi-select mode Backend: - batchSetSessionsArchived IPC: single load/mutate/persist cycle for N sessions instead of N sequential calls - batchDeleteSessions IPC: parallel cleanup of scratchpad dirs and SDK sessions, then single workspace persist Accessibility: - Action bar: role=toolbar, aria-label - Checkboxes: role=checkbox, aria-checked, keyboard-activatable - Selection count: aria-live=polite - Delete dialog: role=alertdialog, aria-modal, focus trap Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
@@ -1149,6 +1149,50 @@ export class AryxAppService extends EventEmitter<AppServiceEvents> {
|
||||
return this.persistAndBroadcast(workspace);
|
||||
}
|
||||
|
||||
async batchSetSessionsArchived(sessionIds: string[], isArchived: boolean): Promise<WorkspaceState> {
|
||||
const workspace = await this.loadWorkspace();
|
||||
const now = nowIso();
|
||||
for (const sessionId of sessionIds) {
|
||||
const session = workspace.sessions.find((s) => s.id === sessionId);
|
||||
if (session) {
|
||||
session.isArchived = isArchived;
|
||||
session.updatedAt = now;
|
||||
}
|
||||
}
|
||||
return this.persistAndBroadcast(workspace);
|
||||
}
|
||||
|
||||
async batchDeleteSessions(sessionIds: string[]): Promise<WorkspaceState> {
|
||||
const workspace = await this.loadWorkspace();
|
||||
const idsToDelete = new Set(sessionIds);
|
||||
|
||||
// Collect cleanup work before mutating the array
|
||||
const cleanupTasks: Promise<void>[] = [];
|
||||
for (const session of workspace.sessions) {
|
||||
if (!idsToDelete.has(session.id)) continue;
|
||||
|
||||
const scratchpadDirectory = this.resolveScratchpadSessionDirectory(session);
|
||||
if (scratchpadDirectory) {
|
||||
cleanupTasks.push(rm(scratchpadDirectory, { recursive: true, force: true }));
|
||||
}
|
||||
cleanupTasks.push(
|
||||
this.sidecar.deleteSession(session.id).then(() => undefined).catch(() => {
|
||||
// Best-effort — don't fail the deletion if SDK cleanup fails
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
await Promise.allSettled(cleanupTasks);
|
||||
|
||||
workspace.sessions = workspace.sessions.filter((s) => !idsToDelete.has(s.id));
|
||||
|
||||
if (workspace.selectedSessionId && idsToDelete.has(workspace.selectedSessionId)) {
|
||||
workspace.selectedSessionId = workspace.sessions[0]?.id;
|
||||
}
|
||||
|
||||
return this.persistAndBroadcast(workspace);
|
||||
}
|
||||
|
||||
async regenerateSessionMessage(sessionId: string, messageId: string): Promise<void> {
|
||||
const workspace = await this.loadWorkspace();
|
||||
const session = this.requireSession(workspace, sessionId);
|
||||
|
||||
@@ -4,6 +4,8 @@ import type { BrowserWindow } from 'electron';
|
||||
import { ipcChannels } from '@shared/contracts/channels';
|
||||
import type {
|
||||
BranchSessionInput,
|
||||
BatchDeleteSessionsInput,
|
||||
BatchSetSessionsArchivedInput,
|
||||
CancelSessionTurnInput,
|
||||
CommitProjectGitChangesInput,
|
||||
CreateSessionInput,
|
||||
@@ -224,6 +226,12 @@ export function registerIpcHandlers(
|
||||
ipcMain.handle(ipcChannels.deleteSession, (_event, input: DeleteSessionInput) =>
|
||||
service.deleteSession(input.sessionId),
|
||||
);
|
||||
ipcMain.handle(ipcChannels.batchSetSessionsArchived, (_event, input: BatchSetSessionsArchivedInput) =>
|
||||
service.batchSetSessionsArchived(input.sessionIds, input.isArchived),
|
||||
);
|
||||
ipcMain.handle(ipcChannels.batchDeleteSessions, (_event, input: BatchDeleteSessionsInput) =>
|
||||
service.batchDeleteSessions(input.sessionIds),
|
||||
);
|
||||
ipcMain.handle(ipcChannels.regenerateSessionMessage, (_event, input: RegenerateSessionMessageInput) =>
|
||||
service.regenerateSessionMessage(input.sessionId, input.messageId),
|
||||
);
|
||||
|
||||
@@ -67,6 +67,8 @@ const api: ElectronApi = {
|
||||
setSessionPinned: (input) => ipcRenderer.invoke(ipcChannels.setSessionPinned, input),
|
||||
setSessionArchived: (input) => ipcRenderer.invoke(ipcChannels.setSessionArchived, input),
|
||||
deleteSession: (input) => ipcRenderer.invoke(ipcChannels.deleteSession, input),
|
||||
batchSetSessionsArchived: (input) => ipcRenderer.invoke(ipcChannels.batchSetSessionsArchived, input),
|
||||
batchDeleteSessions: (input) => ipcRenderer.invoke(ipcChannels.batchDeleteSessions, input),
|
||||
regenerateSessionMessage: (input) => ipcRenderer.invoke(ipcChannels.regenerateSessionMessage, input),
|
||||
editAndResendSessionMessage: (input) => ipcRenderer.invoke(ipcChannels.editAndResendSessionMessage, input),
|
||||
sendSessionMessage: (input) => ipcRenderer.invoke(ipcChannels.sendSessionMessage, input),
|
||||
|
||||
@@ -940,6 +940,12 @@ export default function App() {
|
||||
onDeleteSession={(sessionId) => {
|
||||
void api.deleteSession({ sessionId });
|
||||
}}
|
||||
onBatchArchiveSessions={(sessionIds, isArchived) => {
|
||||
void api.batchSetSessionsArchived({ sessionIds, isArchived });
|
||||
}}
|
||||
onBatchDeleteSessions={(sessionIds) => {
|
||||
void api.batchDeleteSessions({ sessionIds });
|
||||
}}
|
||||
onRefreshGitContext={(projectId) => {
|
||||
void api.refreshProjectGitContext(projectId);
|
||||
}}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import appIconUrl from '../../../assets/icons/icon.png';
|
||||
import { isMac } from '@renderer/lib/platform';
|
||||
import {
|
||||
AlertTriangle,
|
||||
Archive,
|
||||
ArrowLeftRight,
|
||||
Check,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Circle,
|
||||
@@ -35,6 +36,10 @@ import { querySessions } from '@shared/domain/sessionLibrary';
|
||||
import type { UpdateStatus } from '@shared/contracts/ipc';
|
||||
import type { WorkspaceState } from '@shared/domain/workspace';
|
||||
import { UpdateBanner } from '@renderer/components/ui';
|
||||
import { useSessionSelection } from '@renderer/hooks/useSessionSelection';
|
||||
import { BatchActionBar } from '@renderer/components/sidebar/BatchActionBar';
|
||||
import { BatchDeleteConfirmDialog } from '@renderer/components/sidebar/BatchDeleteConfirmDialog';
|
||||
import { UndoToast } from '@renderer/components/sidebar/UndoToast';
|
||||
|
||||
interface SidebarProps {
|
||||
workspace: WorkspaceState;
|
||||
@@ -50,6 +55,8 @@ interface SidebarProps {
|
||||
onSetSessionPinned: (sessionId: string, isPinned: boolean) => void;
|
||||
onSetSessionArchived: (sessionId: string, isArchived: boolean) => void;
|
||||
onDeleteSession: (sessionId: string) => void;
|
||||
onBatchArchiveSessions: (sessionIds: string[], isArchived: boolean) => void;
|
||||
onBatchDeleteSessions: (sessionIds: string[]) => void;
|
||||
onRefreshGitContext: (projectId: string) => void;
|
||||
updateStatus?: UpdateStatus;
|
||||
onViewUpdateDetails?: () => void;
|
||||
@@ -183,6 +190,10 @@ function SessionItem({
|
||||
onOpenMenu,
|
||||
onRenameSubmit,
|
||||
onRenameCancel,
|
||||
isSelecting,
|
||||
isSelected,
|
||||
selectionIndex,
|
||||
onToggleSelection,
|
||||
}: {
|
||||
session: SessionRecord;
|
||||
workflow?: WorkflowDefinition;
|
||||
@@ -192,6 +203,10 @@ function SessionItem({
|
||||
onOpenMenu: (e: React.MouseEvent) => void;
|
||||
onRenameSubmit: (title: string) => void;
|
||||
onRenameCancel: () => void;
|
||||
isSelecting?: boolean;
|
||||
isSelected?: boolean;
|
||||
selectionIndex?: number;
|
||||
onToggleSelection?: () => void;
|
||||
}) {
|
||||
const isRunning = session.status === 'running';
|
||||
const isError = session.status === 'error';
|
||||
@@ -201,6 +216,7 @@ function SessionItem({
|
||||
const visual = modeVisuals[mode];
|
||||
const ModeIcon = visual.icon;
|
||||
const agentCount = workflow ? resolveWorkflowAgentNodes(workflow).length : 1;
|
||||
const isSelectDisabled = isRunning && isSelecting;
|
||||
|
||||
const [renameText, setRenameText] = useState(session.title);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
@@ -232,34 +248,81 @@ function SessionItem({
|
||||
else onRenameCancel();
|
||||
}
|
||||
|
||||
function handleClick(e: React.MouseEvent) {
|
||||
if (isRenaming) return;
|
||||
if (isSelecting) {
|
||||
if (!isSelectDisabled) onToggleSelection?.();
|
||||
return;
|
||||
}
|
||||
onSelect();
|
||||
}
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent) {
|
||||
if ((e.key === 'Enter' || e.key === ' ') && !isRenaming) {
|
||||
e.preventDefault();
|
||||
if (isSelecting) {
|
||||
if (!isSelectDisabled) onToggleSelection?.();
|
||||
} else {
|
||||
onSelect();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`session-item-enter group relative flex w-full cursor-pointer items-start gap-2.5 rounded-lg px-2.5 py-2 text-left transition-all duration-200 ${
|
||||
isActive
|
||||
isSelecting && isSelected
|
||||
? 'bg-[var(--color-accent-muted)] ring-1 ring-[var(--color-border-glow)]'
|
||||
: 'hover:bg-[var(--color-surface-2)]/60'
|
||||
} ${isRunning ? 'sidebar-running' : ''} ${session.isArchived ? 'opacity-50' : ''}`}
|
||||
onClick={isRenaming ? undefined : onSelect}
|
||||
role="button"
|
||||
: isActive && !isSelecting
|
||||
? 'bg-[var(--color-accent-muted)] ring-1 ring-[var(--color-border-glow)]'
|
||||
: 'hover:bg-[var(--color-surface-2)]/60'
|
||||
} ${isRunning ? 'sidebar-running' : ''} ${session.isArchived ? 'opacity-50' : ''} ${isSelectDisabled ? 'cursor-not-allowed opacity-40' : ''}`}
|
||||
onClick={handleClick}
|
||||
role={isSelecting ? 'checkbox' : 'button'}
|
||||
aria-checked={isSelecting ? isSelected : undefined}
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => { if ((e.key === 'Enter' || e.key === ' ') && !isRenaming) { e.preventDefault(); onSelect(); } }}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
{/* Running/approval left accent bar */}
|
||||
{isRunning && !hasPendingApproval && (
|
||||
{isRunning && !hasPendingApproval && !isSelecting && (
|
||||
<span className="absolute inset-y-1.5 left-0 w-[3px] rounded-full accent-flow" />
|
||||
)}
|
||||
{hasPendingApproval && (
|
||||
{hasPendingApproval && !isSelecting && (
|
||||
<span className="absolute inset-y-1.5 left-0 w-[3px] rounded-full bg-[var(--color-status-warning)]" />
|
||||
)}
|
||||
{/* Selection accent bar */}
|
||||
{isSelecting && isSelected && (
|
||||
<span className="absolute inset-y-1.5 left-0 w-[3px] rounded-full bg-[var(--color-accent)]" />
|
||||
)}
|
||||
|
||||
{/* Mode icon */}
|
||||
<span
|
||||
className={`mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md ${
|
||||
isActive ? 'bg-[var(--color-accent-muted)]' : 'bg-[var(--color-surface-2)]'
|
||||
}`}
|
||||
>
|
||||
<ModeIcon className={`size-3.5 ${isActive ? 'text-[var(--color-accent)]' : visual.color}`} />
|
||||
</span>
|
||||
{/* Mode icon or selection checkbox */}
|
||||
{isSelecting ? (
|
||||
<span
|
||||
className="selection-checkbox-enter mt-0.5 flex size-6 shrink-0 items-center justify-center"
|
||||
style={{ animationDelay: `${(selectionIndex ?? 0) * 30}ms` }}
|
||||
title={isSelectDisabled ? "Can't select running sessions" : undefined}
|
||||
>
|
||||
<span
|
||||
className={`flex size-4 items-center justify-center rounded border transition-all duration-150 ${
|
||||
isSelected
|
||||
? 'checkbox-check border-[var(--color-accent)] bg-[var(--color-accent)]'
|
||||
: isSelectDisabled
|
||||
? 'border-[var(--color-text-muted)]/30 bg-transparent'
|
||||
: 'border-[var(--color-text-muted)]/50 bg-transparent hover:border-[var(--color-accent)]/50'
|
||||
}`}
|
||||
>
|
||||
{isSelected && <Check className="size-3 text-white" strokeWidth={3} />}
|
||||
</span>
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className={`mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md ${
|
||||
isActive ? 'bg-[var(--color-accent-muted)]' : 'bg-[var(--color-surface-2)]'
|
||||
}`}
|
||||
>
|
||||
<ModeIcon className={`size-3.5 ${isActive ? 'text-[var(--color-accent)]' : visual.color}`} />
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
<div className="min-w-0 flex-1">
|
||||
@@ -342,8 +405,8 @@ function SessionItem({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions button (hidden during rename) */}
|
||||
{!isRenaming && (
|
||||
{/* Actions button (hidden during rename and selection mode) */}
|
||||
{!isRenaming && !isSelecting && (
|
||||
<button
|
||||
className="absolute right-1.5 top-1.5 flex size-6 items-center justify-center rounded-md text-[var(--color-text-muted)] opacity-0 transition-all duration-150 hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)] group-hover:opacity-100"
|
||||
onClick={(e) => { e.stopPropagation(); onOpenMenu(e); }}
|
||||
@@ -372,6 +435,9 @@ function ProjectGroup({
|
||||
onOpenProjectSettings,
|
||||
onNewSession,
|
||||
newSessionLabel,
|
||||
isSelecting,
|
||||
isSelected,
|
||||
onToggleSelection,
|
||||
}: {
|
||||
project: ProjectRecord;
|
||||
sessions: SessionRecord[];
|
||||
@@ -386,6 +452,9 @@ function ProjectGroup({
|
||||
onOpenProjectSettings?: (projectId: string) => void;
|
||||
onNewSession?: () => void;
|
||||
newSessionLabel?: string;
|
||||
isSelecting?: boolean;
|
||||
isSelected?: (sessionId: string) => boolean;
|
||||
onToggleSelection?: (sessionId: string) => void;
|
||||
}){
|
||||
const [expanded, setExpanded] = useState(true);
|
||||
const isScratchpad = isScratchpadProject(project);
|
||||
@@ -508,7 +577,7 @@ function ProjectGroup({
|
||||
{expanded && (
|
||||
<div className="ml-2 mt-0.5 space-y-0.5 border-l border-[var(--color-border-subtle)] pl-2">
|
||||
{visibleSessions.length > 0 &&
|
||||
visibleSessions.map((session) => (
|
||||
visibleSessions.map((session, index) => (
|
||||
<SessionItem
|
||||
isActive={selectedSessionId === session.id}
|
||||
isRenaming={renamingSessionId === session.id}
|
||||
@@ -519,6 +588,10 @@ function ProjectGroup({
|
||||
onRenameCancel={onRenameCancel}
|
||||
workflow={workflowMap.get(session.workflowId)}
|
||||
session={session}
|
||||
isSelecting={isSelecting}
|
||||
isSelected={isSelected?.(session.id)}
|
||||
selectionIndex={index}
|
||||
onToggleSelection={() => onToggleSelection?.(session.id)}
|
||||
/>
|
||||
))}
|
||||
{onNewSession ? (
|
||||
@@ -559,6 +632,8 @@ export function Sidebar({
|
||||
onSetSessionPinned,
|
||||
onSetSessionArchived,
|
||||
onDeleteSession,
|
||||
onBatchArchiveSessions,
|
||||
onBatchDeleteSessions,
|
||||
onRefreshGitContext,
|
||||
updateStatus,
|
||||
onViewUpdateDetails,
|
||||
@@ -600,6 +675,7 @@ export function Sidebar({
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
function handleOpenMenu(sessionId: string, e: React.MouseEvent) {
|
||||
if (selection.isSelecting) return;
|
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||
setMenuState({
|
||||
sessionId,
|
||||
@@ -621,6 +697,113 @@ export function Sidebar({
|
||||
? workspace.sessions.find((s) => s.id === menuState.sessionId)
|
||||
: undefined;
|
||||
|
||||
/* ── Multi-select state ────────────────────────────────────── */
|
||||
|
||||
const selection = useSessionSelection();
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const [undoToast, setUndoToast] = useState<{ message: string; sessionIds: string[]; isArchived: boolean } | null>(null);
|
||||
|
||||
// All selectable (non-running) session IDs across the visible list
|
||||
const allSelectableIds = useMemo(() => {
|
||||
const sessions = workspace.sessions.filter((s) => !s.isArchived && s.status !== 'running');
|
||||
return sessions.map((s) => s.id);
|
||||
}, [workspace.sessions]);
|
||||
|
||||
// All visible session IDs (for range select and "select all")
|
||||
const allVisibleIds = useMemo(() => {
|
||||
if (isQueryActive) return queryResults.map((s) => s.id);
|
||||
return workspace.sessions.filter((s) => !s.isArchived).map((s) => s.id);
|
||||
}, [isQueryActive, queryResults, workspace.sessions]);
|
||||
|
||||
const allSelectedArchived = useMemo(() => {
|
||||
if (selection.selectedIds.size === 0) return false;
|
||||
return [...selection.selectedIds].every((id) => {
|
||||
const session = workspace.sessions.find((s) => s.id === id);
|
||||
return session?.isArchived;
|
||||
});
|
||||
}, [selection.selectedIds, workspace.sessions]);
|
||||
|
||||
const selectedSessions = useMemo(
|
||||
() => workspace.sessions.filter((s) => selection.selectedIds.has(s.id)),
|
||||
[selection.selectedIds, workspace.sessions],
|
||||
);
|
||||
|
||||
function handleSessionClick(sessionId: string, e: React.MouseEvent) {
|
||||
const modKey = isMac ? e.metaKey : e.ctrlKey;
|
||||
const session = workspace.sessions.find((s) => s.id === sessionId);
|
||||
const isRunning = session?.status === 'running';
|
||||
|
||||
if (selection.isSelecting) {
|
||||
if (isRunning) return;
|
||||
if (e.shiftKey) {
|
||||
selection.rangeSelect(sessionId, allVisibleIds);
|
||||
} else {
|
||||
selection.toggle(sessionId);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (modKey && !isRunning) {
|
||||
selection.enterSelectionMode(sessionId);
|
||||
return;
|
||||
}
|
||||
|
||||
onSessionSelect(sessionId);
|
||||
}
|
||||
|
||||
function handleToggleSelection(sessionId: string) {
|
||||
const session = workspace.sessions.find((s) => s.id === sessionId);
|
||||
if (session?.status === 'running') return;
|
||||
selection.toggle(sessionId);
|
||||
}
|
||||
|
||||
const handleBatchArchive = useCallback(() => {
|
||||
const ids = [...selection.selectedIds];
|
||||
const isArchived = !allSelectedArchived;
|
||||
onBatchArchiveSessions(ids, isArchived);
|
||||
selection.exitSelectionMode();
|
||||
setUndoToast({
|
||||
message: `${ids.length} session${ids.length === 1 ? '' : 's'} ${isArchived ? 'archived' : 'restored'}`,
|
||||
sessionIds: ids,
|
||||
isArchived,
|
||||
});
|
||||
}, [selection, allSelectedArchived, onBatchArchiveSessions]);
|
||||
|
||||
const handleBatchDeleteConfirm = useCallback(() => {
|
||||
const ids = [...selection.selectedIds];
|
||||
onBatchDeleteSessions(ids);
|
||||
selection.exitSelectionMode();
|
||||
setShowDeleteConfirm(false);
|
||||
}, [selection, onBatchDeleteSessions]);
|
||||
|
||||
const handleUndoArchive = useCallback(() => {
|
||||
if (!undoToast) return;
|
||||
onBatchArchiveSessions(undoToast.sessionIds, !undoToast.isArchived);
|
||||
setUndoToast(null);
|
||||
}, [undoToast, onBatchArchiveSessions]);
|
||||
|
||||
// Exit selection mode on Escape
|
||||
useEffect(() => {
|
||||
if (!selection.isSelecting) return;
|
||||
function handleKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
selection.exitSelectionMode();
|
||||
}
|
||||
}
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||
}, [selection.isSelecting, selection.exitSelectionMode]);
|
||||
|
||||
// Clean up selection when sessions are removed from workspace
|
||||
useEffect(() => {
|
||||
if (!selection.isSelecting) return;
|
||||
const sessionIdSet = new Set(workspace.sessions.map((s) => s.id));
|
||||
const stale = [...selection.selectedIds].filter((id) => !sessionIdSet.has(id));
|
||||
if (stale.length > 0) {
|
||||
for (const id of stale) selection.toggle(id);
|
||||
}
|
||||
}, [workspace.sessions, selection]);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Header — extra top padding clears the title bar overlay zone */}
|
||||
@@ -685,17 +868,21 @@ export function Sidebar({
|
||||
No sessions match your search
|
||||
</div>
|
||||
) : (
|
||||
queryResults.map((session) => (
|
||||
queryResults.map((session, index) => (
|
||||
<SessionItem
|
||||
isActive={workspace.selectedSessionId === session.id}
|
||||
isRenaming={renamingSessionId === session.id}
|
||||
key={session.id}
|
||||
onSelect={() => onSessionSelect(session.id)}
|
||||
onSelect={() => handleSessionClick(session.id, { ctrlKey: false, metaKey: false, shiftKey: false } as React.MouseEvent)}
|
||||
onOpenMenu={(e) => handleOpenMenu(session.id, e)}
|
||||
onRenameSubmit={(title) => handleRenameSubmit(session.id, title)}
|
||||
onRenameCancel={() => setRenamingSessionId(undefined)}
|
||||
workflow={workflowMap.get(session.workflowId)}
|
||||
session={session}
|
||||
isSelecting={selection.isSelecting}
|
||||
isSelected={selection.isSelected(session.id)}
|
||||
selectionIndex={index}
|
||||
onToggleSelection={() => handleToggleSelection(session.id)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
@@ -721,6 +908,9 @@ export function Sidebar({
|
||||
sessions={workspace.sessions.filter((session) => session.projectId === scratchpadProject.id)}
|
||||
onNewSession={onCreateScratchpad}
|
||||
newSessionLabel="New Scratchpad"
|
||||
isSelecting={selection.isSelecting}
|
||||
isSelected={selection.isSelected}
|
||||
onToggleSelection={handleToggleSelection}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -769,6 +959,9 @@ export function Sidebar({
|
||||
selectedSessionId={workspace.selectedSessionId}
|
||||
sessions={workspace.sessions.filter((session) => session.projectId === project.id)}
|
||||
onNewSession={() => onNewProjectSession(project.id)}
|
||||
isSelecting={selection.isSelecting}
|
||||
isSelected={selection.isSelected}
|
||||
onToggleSelection={handleToggleSelection}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -801,7 +994,7 @@ export function Sidebar({
|
||||
)}
|
||||
|
||||
{/* Context menu overlay */}
|
||||
{menuState && menuSession && (
|
||||
{menuState && menuSession && !selection.isSelecting && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-40" onClick={closeMenu} onKeyDown={(e) => { if (e.key === 'Escape') closeMenu(); }} />
|
||||
<div
|
||||
@@ -853,6 +1046,38 @@ export function Sidebar({
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Batch action bar */}
|
||||
{selection.isSelecting && selection.selectedIds.size > 0 && (
|
||||
<BatchActionBar
|
||||
selectedCount={selection.selectedIds.size}
|
||||
allSelectedArchived={allSelectedArchived}
|
||||
allSelected={allSelectableIds.length > 0 && allSelectableIds.every((id) => selection.selectedIds.has(id))}
|
||||
onArchive={handleBatchArchive}
|
||||
onDelete={() => setShowDeleteConfirm(true)}
|
||||
onSelectAll={() => selection.selectAll(allSelectableIds)}
|
||||
onDeselectAll={selection.deselectAll}
|
||||
onCancel={selection.exitSelectionMode}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Undo toast */}
|
||||
{undoToast && (
|
||||
<UndoToast
|
||||
message={undoToast.message}
|
||||
onUndo={handleUndoArchive}
|
||||
onDismiss={() => setUndoToast(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Batch delete confirmation */}
|
||||
{showDeleteConfirm && selectedSessions.length > 0 && (
|
||||
<BatchDeleteConfirmDialog
|
||||
sessions={selectedSessions}
|
||||
onConfirm={handleBatchDeleteConfirm}
|
||||
onCancel={() => setShowDeleteConfirm(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
import { Archive, ArchiveRestore, CheckSquare, Square, Trash2, X } from 'lucide-react';
|
||||
|
||||
interface BatchActionBarProps {
|
||||
selectedCount: number;
|
||||
allSelectedArchived: boolean;
|
||||
onArchive: () => void;
|
||||
onDelete: () => void;
|
||||
onSelectAll: () => void;
|
||||
onDeselectAll: () => void;
|
||||
onCancel: () => void;
|
||||
allSelected: boolean;
|
||||
}
|
||||
|
||||
export function BatchActionBar({
|
||||
selectedCount,
|
||||
allSelectedArchived,
|
||||
onArchive,
|
||||
onDelete,
|
||||
onSelectAll,
|
||||
onDeselectAll,
|
||||
onCancel,
|
||||
allSelected,
|
||||
}: BatchActionBarProps) {
|
||||
const archiveLabel = allSelectedArchived ? 'Restore' : 'Archive';
|
||||
const ArchiveIcon = allSelectedArchived ? ArchiveRestore : Archive;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="batch-action-bar-enter border-t border-[var(--color-border)] bg-[var(--color-surface-1)]/95 px-3 py-2.5 backdrop-blur-md"
|
||||
role="toolbar"
|
||||
aria-label="Batch session actions"
|
||||
>
|
||||
{/* Top row — selection count + select all/none */}
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span
|
||||
className="inline-flex items-center gap-1.5 rounded-full bg-[var(--color-accent)]/15 px-2.5 py-1 text-[11px] font-semibold text-[var(--color-accent)]"
|
||||
aria-live="polite"
|
||||
>
|
||||
{selectedCount} selected
|
||||
</span>
|
||||
<button
|
||||
className="flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] text-[var(--color-text-muted)] transition hover:bg-[var(--color-surface-2)] hover:text-[var(--color-text-primary)]"
|
||||
onClick={allSelected ? onDeselectAll : onSelectAll}
|
||||
type="button"
|
||||
>
|
||||
{allSelected ? (
|
||||
<>
|
||||
<Square className="size-3" />
|
||||
None
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckSquare className="size-3" />
|
||||
All
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Bottom row — action buttons */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button
|
||||
className="flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-[var(--color-surface-2)] px-3 py-1.5 text-[12px] font-medium text-[var(--color-text-primary)] transition-all duration-150 hover:bg-[var(--color-surface-3)]"
|
||||
onClick={onArchive}
|
||||
type="button"
|
||||
title={`${archiveLabel} ${selectedCount} session${selectedCount === 1 ? '' : 's'}`}
|
||||
>
|
||||
<ArchiveIcon className="size-3.5" />
|
||||
{archiveLabel}
|
||||
</button>
|
||||
<button
|
||||
className="flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-[var(--color-status-error)]/10 px-3 py-1.5 text-[12px] font-medium text-[var(--color-status-error)] transition-all duration-150 hover:bg-[var(--color-status-error)]/20"
|
||||
onClick={onDelete}
|
||||
type="button"
|
||||
title={`Delete ${selectedCount} session${selectedCount === 1 ? '' : 's'}`}
|
||||
>
|
||||
<Trash2 className="size-3.5" />
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
className="flex size-7 shrink-0 items-center justify-center rounded-lg text-[var(--color-text-muted)] transition-all duration-150 hover:bg-[var(--color-surface-2)] hover:text-[var(--color-text-primary)]"
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
aria-label="Exit multi-select"
|
||||
title="Exit multi-select (Esc)"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { AlertTriangle, Trash2, X } from 'lucide-react';
|
||||
import type { SessionRecord } from '@shared/domain/session';
|
||||
|
||||
interface BatchDeleteConfirmDialogProps {
|
||||
sessions: SessionRecord[];
|
||||
onConfirm: () => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const HOLD_DURATION_MS = 1500;
|
||||
const HOLD_THRESHOLD = 3;
|
||||
|
||||
export function BatchDeleteConfirmDialog({
|
||||
sessions,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}: BatchDeleteConfirmDialogProps) {
|
||||
const requiresHold = sessions.length >= HOLD_THRESHOLD;
|
||||
const [holdProgress, setHoldProgress] = useState(0);
|
||||
const holdTimerRef = useRef<number | null>(null);
|
||||
const holdStartRef = useRef<number | null>(null);
|
||||
const dialogRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Focus trap
|
||||
useEffect(() => {
|
||||
const el = dialogRef.current;
|
||||
if (!el) return;
|
||||
|
||||
const focusable = el.querySelectorAll<HTMLElement>(
|
||||
'button, [tabindex]:not([tabindex="-1"])',
|
||||
);
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
|
||||
first?.focus();
|
||||
|
||||
function handleTab(e: KeyboardEvent) {
|
||||
if (e.key !== 'Tab') return;
|
||||
if (!first || !last) return;
|
||||
|
||||
if (e.shiftKey) {
|
||||
if (document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
}
|
||||
} else {
|
||||
if (document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleEscape(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
e.stopPropagation();
|
||||
onCancel();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', handleTab);
|
||||
document.addEventListener('keydown', handleEscape);
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleTab);
|
||||
document.removeEventListener('keydown', handleEscape);
|
||||
};
|
||||
}, [onCancel]);
|
||||
|
||||
const startHold = useCallback(() => {
|
||||
if (!requiresHold) return;
|
||||
holdStartRef.current = performance.now();
|
||||
|
||||
const tick = () => {
|
||||
if (!holdStartRef.current) return;
|
||||
const elapsed = performance.now() - holdStartRef.current;
|
||||
const progress = Math.min(elapsed / HOLD_DURATION_MS, 1);
|
||||
setHoldProgress(progress);
|
||||
|
||||
if (progress >= 1) {
|
||||
onConfirm();
|
||||
return;
|
||||
}
|
||||
holdTimerRef.current = requestAnimationFrame(tick);
|
||||
};
|
||||
holdTimerRef.current = requestAnimationFrame(tick);
|
||||
}, [requiresHold, onConfirm]);
|
||||
|
||||
const cancelHold = useCallback(() => {
|
||||
holdStartRef.current = null;
|
||||
if (holdTimerRef.current !== null) {
|
||||
cancelAnimationFrame(holdTimerRef.current);
|
||||
holdTimerRef.current = null;
|
||||
}
|
||||
setHoldProgress(0);
|
||||
}, []);
|
||||
|
||||
// Clean up on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (holdTimerRef.current !== null) cancelAnimationFrame(holdTimerRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="overlay-backdrop-enter fixed inset-0 z-50 bg-black/60"
|
||||
onClick={onCancel}
|
||||
aria-hidden
|
||||
/>
|
||||
|
||||
{/* Dialog */}
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4" role="presentation">
|
||||
<div
|
||||
ref={dialogRef}
|
||||
className="overlay-panel-enter w-full max-w-sm rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface-1)] shadow-[0_24px_80px_rgba(0,0,0,0.5)]"
|
||||
role="alertdialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="batch-delete-title"
|
||||
aria-describedby="batch-delete-desc"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between p-5 pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-10 items-center justify-center rounded-xl bg-[var(--color-status-error)]/10">
|
||||
<Trash2 className="size-5 text-[var(--color-status-error)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h2
|
||||
id="batch-delete-title"
|
||||
className="text-[15px] font-semibold text-[var(--color-text-primary)]"
|
||||
>
|
||||
Delete {sessions.length} session{sessions.length === 1 ? '' : 's'}?
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="flex size-7 items-center justify-center rounded-lg text-[var(--color-text-muted)] transition hover:bg-[var(--color-surface-2)] hover:text-[var(--color-text-primary)]"
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
aria-label="Cancel"
|
||||
>
|
||||
<X className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Session list */}
|
||||
<div className="px-5">
|
||||
<div className="max-h-[200px] overflow-y-auto rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-surface-0)]/60 px-3 py-2">
|
||||
{sessions.map((session) => (
|
||||
<div
|
||||
key={session.id}
|
||||
className="truncate py-1 text-[12px] text-[var(--color-text-secondary)]"
|
||||
>
|
||||
{session.title}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Warning */}
|
||||
<div className="px-5 pt-3" id="batch-delete-desc">
|
||||
<div className="flex items-start gap-2 rounded-lg bg-[var(--color-status-error)]/5 px-3 py-2 text-[12px] text-[var(--color-status-error)]">
|
||||
<AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
|
||||
<span>This action cannot be undone. All messages and session data will be permanently removed.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-end gap-2 p-5">
|
||||
<button
|
||||
className="rounded-lg px-4 py-2 text-[13px] font-medium text-[var(--color-text-secondary)] transition hover:bg-[var(--color-surface-2)] hover:text-[var(--color-text-primary)]"
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{requiresHold ? (
|
||||
<button
|
||||
className="hold-to-confirm relative overflow-hidden rounded-lg bg-[var(--color-status-error)] px-4 py-2 text-[13px] font-medium text-white transition-all select-none"
|
||||
onMouseDown={startHold}
|
||||
onMouseUp={cancelHold}
|
||||
onMouseLeave={cancelHold}
|
||||
onTouchStart={startHold}
|
||||
onTouchEnd={cancelHold}
|
||||
type="button"
|
||||
>
|
||||
{/* Progress fill */}
|
||||
<span
|
||||
className="absolute inset-0 origin-left bg-white/20 transition-none"
|
||||
style={{ transform: `scaleX(${holdProgress})` }}
|
||||
aria-hidden
|
||||
/>
|
||||
<span className="relative flex items-center gap-1.5">
|
||||
<Trash2 className="size-3.5" />
|
||||
{holdProgress > 0 ? 'Hold to delete…' : 'Hold to delete'}
|
||||
</span>
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="rounded-lg bg-[var(--color-status-error)] px-4 py-2 text-[13px] font-medium text-white transition hover:bg-[var(--color-status-error)]/80"
|
||||
onClick={onConfirm}
|
||||
type="button"
|
||||
>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Trash2 className="size-3.5" />
|
||||
Delete
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Undo2, X } from 'lucide-react';
|
||||
|
||||
interface UndoToastProps {
|
||||
message: string;
|
||||
onUndo: () => void;
|
||||
onDismiss: () => void;
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
export function UndoToast({
|
||||
message,
|
||||
onUndo,
|
||||
onDismiss,
|
||||
duration = 5000,
|
||||
}: UndoToastProps) {
|
||||
const [exiting, setExiting] = useState(false);
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
timerRef.current = setTimeout(() => {
|
||||
setExiting(true);
|
||||
setTimeout(onDismiss, 200);
|
||||
}, duration);
|
||||
|
||||
return () => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
};
|
||||
}, [duration, onDismiss]);
|
||||
|
||||
function handleUndo() {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
onUndo();
|
||||
}
|
||||
|
||||
function handleDismiss() {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
setExiting(true);
|
||||
setTimeout(onDismiss, 200);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${exiting ? 'undo-toast-exit' : 'undo-toast-enter'} pointer-events-auto mx-3 mb-2 flex items-center gap-2 rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-1)]/95 px-3 py-2.5 shadow-[0_8px_32px_rgba(0,0,0,0.3)] backdrop-blur-md`}
|
||||
role="alert"
|
||||
>
|
||||
<span className="flex-1 text-[12px] text-[var(--color-text-primary)]">
|
||||
{message}
|
||||
</span>
|
||||
<button
|
||||
className="flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-semibold text-[var(--color-accent)] transition hover:bg-[var(--color-accent)]/10"
|
||||
onClick={handleUndo}
|
||||
type="button"
|
||||
>
|
||||
<Undo2 className="size-3" />
|
||||
Undo
|
||||
</button>
|
||||
<button
|
||||
className="flex size-5 items-center justify-center rounded text-[var(--color-text-muted)] transition hover:text-[var(--color-text-primary)]"
|
||||
onClick={handleDismiss}
|
||||
type="button"
|
||||
aria-label="Dismiss"
|
||||
>
|
||||
<X className="size-3" />
|
||||
</button>
|
||||
|
||||
{/* Auto-dismiss progress bar */}
|
||||
<span
|
||||
className="absolute bottom-0 left-0 right-0 h-[2px] origin-left rounded-b-xl bg-[var(--color-accent)]/30"
|
||||
style={{
|
||||
animation: `toast-progress ${duration}ms linear forwards`,
|
||||
}}
|
||||
aria-hidden
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { useCallback, useRef, useState } from 'react';
|
||||
|
||||
export interface SessionSelectionState {
|
||||
/** Currently selected session IDs */
|
||||
selectedIds: Set<string>;
|
||||
/** Whether multi-select mode is active */
|
||||
isSelecting: boolean;
|
||||
/** Toggle a single session's selection */
|
||||
toggle: (sessionId: string) => void;
|
||||
/** Shift+click range selection: selects everything between the last anchor and the target */
|
||||
rangeSelect: (sessionId: string, allVisibleIds: string[]) => void;
|
||||
/** Select all provided session IDs */
|
||||
selectAll: (sessionIds: string[]) => void;
|
||||
/** Deselect all */
|
||||
deselectAll: () => void;
|
||||
/** Enter multi-select mode with an initial selection */
|
||||
enterSelectionMode: (initialId: string) => void;
|
||||
/** Exit multi-select mode and clear selection */
|
||||
exitSelectionMode: () => void;
|
||||
/** Check if a session is selected */
|
||||
isSelected: (sessionId: string) => boolean;
|
||||
}
|
||||
|
||||
export function useSessionSelection(): SessionSelectionState {
|
||||
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
|
||||
const [isSelecting, setIsSelecting] = useState(false);
|
||||
|
||||
// Tracks the last explicitly toggled session for shift+click range behaviour
|
||||
const anchorRef = useRef<string | null>(null);
|
||||
|
||||
const enterSelectionMode = useCallback((initialId: string) => {
|
||||
setIsSelecting(true);
|
||||
setSelectedIds(new Set([initialId]));
|
||||
anchorRef.current = initialId;
|
||||
}, []);
|
||||
|
||||
const exitSelectionMode = useCallback(() => {
|
||||
setIsSelecting(false);
|
||||
setSelectedIds(new Set());
|
||||
anchorRef.current = null;
|
||||
}, []);
|
||||
|
||||
const toggle = useCallback((sessionId: string) => {
|
||||
setSelectedIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(sessionId)) {
|
||||
next.delete(sessionId);
|
||||
} else {
|
||||
next.add(sessionId);
|
||||
}
|
||||
anchorRef.current = sessionId;
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const rangeSelect = useCallback((sessionId: string, allVisibleIds: string[]) => {
|
||||
const anchor = anchorRef.current;
|
||||
if (!anchor) {
|
||||
// No anchor yet — treat as a simple toggle
|
||||
setSelectedIds(new Set([sessionId]));
|
||||
anchorRef.current = sessionId;
|
||||
return;
|
||||
}
|
||||
|
||||
const anchorIdx = allVisibleIds.indexOf(anchor);
|
||||
const targetIdx = allVisibleIds.indexOf(sessionId);
|
||||
if (anchorIdx === -1 || targetIdx === -1) return;
|
||||
|
||||
const start = Math.min(anchorIdx, targetIdx);
|
||||
const end = Math.max(anchorIdx, targetIdx);
|
||||
const rangeIds = allVisibleIds.slice(start, end + 1);
|
||||
|
||||
setSelectedIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
for (const id of rangeIds) {
|
||||
next.add(id);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
// Anchor stays the same for contiguous range extension
|
||||
}, []);
|
||||
|
||||
const selectAll = useCallback((sessionIds: string[]) => {
|
||||
setSelectedIds(new Set(sessionIds));
|
||||
}, []);
|
||||
|
||||
const deselectAll = useCallback(() => {
|
||||
setSelectedIds(new Set());
|
||||
}, []);
|
||||
|
||||
const isSelected = useCallback((sessionId: string) => selectedIds.has(sessionId), [selectedIds]);
|
||||
|
||||
return {
|
||||
selectedIds,
|
||||
isSelecting,
|
||||
toggle,
|
||||
rangeSelect,
|
||||
selectAll,
|
||||
deselectAll,
|
||||
enterSelectionMode,
|
||||
exitSelectionMode,
|
||||
isSelected,
|
||||
};
|
||||
}
|
||||
@@ -674,6 +674,108 @@ body {
|
||||
animation: intent-divider-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
/* ── Batch selection animations ──────────────────────────────── */
|
||||
|
||||
@keyframes selection-checkbox-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes selection-checkbox-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
.selection-checkbox-enter {
|
||||
animation: selection-checkbox-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
.selection-checkbox-exit {
|
||||
animation: selection-checkbox-out 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
@keyframes checkbox-check {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-check {
|
||||
animation: checkbox-check 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
@keyframes batch-action-bar-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.batch-action-bar-enter {
|
||||
animation: batch-action-bar-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
@keyframes undo-toast-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px) scale(0.96);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes undo-toast-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(8px) scale(0.96);
|
||||
}
|
||||
}
|
||||
|
||||
.undo-toast-enter {
|
||||
animation: undo-toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
.undo-toast-exit {
|
||||
animation: undo-toast-out 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
@keyframes toast-progress {
|
||||
from {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
to {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Respect reduced motion ──────────────────────────────────── */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@@ -697,6 +799,15 @@ body {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.selection-checkbox-enter,
|
||||
.selection-checkbox-exit,
|
||||
.checkbox-check,
|
||||
.batch-action-bar-enter,
|
||||
.undo-toast-enter,
|
||||
.undo-toast-exit {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.qp-border-streaming {
|
||||
animation: none;
|
||||
border-color: var(--color-accent);
|
||||
|
||||
@@ -49,6 +49,8 @@ export const ipcChannels = {
|
||||
setSessionPinned: 'sessions:set-pinned',
|
||||
setSessionArchived: 'sessions:set-archived',
|
||||
deleteSession: 'sessions:delete',
|
||||
batchSetSessionsArchived: 'sessions:batch-set-archived',
|
||||
batchDeleteSessions: 'sessions:batch-delete',
|
||||
regenerateSessionMessage: 'sessions:regenerate-message',
|
||||
editAndResendSessionMessage: 'sessions:edit-and-resend-message',
|
||||
sendSessionMessage: 'sessions:send-message',
|
||||
|
||||
@@ -218,6 +218,15 @@ export interface DeleteSessionInput {
|
||||
sessionId: string;
|
||||
}
|
||||
|
||||
export interface BatchSetSessionsArchivedInput {
|
||||
sessionIds: string[];
|
||||
isArchived: boolean;
|
||||
}
|
||||
|
||||
export interface BatchDeleteSessionsInput {
|
||||
sessionIds: string[];
|
||||
}
|
||||
|
||||
export interface ResizeTerminalInput {
|
||||
cols: number;
|
||||
rows: number;
|
||||
@@ -334,6 +343,8 @@ export interface ElectronApi {
|
||||
setSessionPinned(input: SetSessionPinnedInput): Promise<WorkspaceState>;
|
||||
setSessionArchived(input: SetSessionArchivedInput): Promise<WorkspaceState>;
|
||||
deleteSession(input: DeleteSessionInput): Promise<WorkspaceState>;
|
||||
batchSetSessionsArchived(input: BatchSetSessionsArchivedInput): Promise<WorkspaceState>;
|
||||
batchDeleteSessions(input: BatchDeleteSessionsInput): Promise<WorkspaceState>;
|
||||
regenerateSessionMessage(input: RegenerateSessionMessageInput): Promise<void>;
|
||||
editAndResendSessionMessage(input: EditAndResendSessionMessageInput): Promise<void>;
|
||||
sendSessionMessage(input: SendSessionMessageInput): Promise<void>;
|
||||
|
||||
@@ -0,0 +1,187 @@
|
||||
import { describe, expect, test } from 'bun:test';
|
||||
|
||||
/**
|
||||
* Test the core selection logic extracted from useSessionSelection.
|
||||
* Since the hook is thin state wrapper, we test the pure logic operations directly.
|
||||
*/
|
||||
|
||||
describe('session selection logic', () => {
|
||||
// Helpers that mirror the hook's internal logic
|
||||
function toggle(selected: Set<string>, sessionId: string): Set<string> {
|
||||
const next = new Set(selected);
|
||||
if (next.has(sessionId)) next.delete(sessionId);
|
||||
else next.add(sessionId);
|
||||
return next;
|
||||
}
|
||||
|
||||
function rangeSelect(
|
||||
selected: Set<string>,
|
||||
anchor: string | null,
|
||||
target: string,
|
||||
allVisibleIds: string[],
|
||||
): Set<string> {
|
||||
if (!anchor) return new Set([target]);
|
||||
const anchorIdx = allVisibleIds.indexOf(anchor);
|
||||
const targetIdx = allVisibleIds.indexOf(target);
|
||||
if (anchorIdx === -1 || targetIdx === -1) return selected;
|
||||
const start = Math.min(anchorIdx, targetIdx);
|
||||
const end = Math.max(anchorIdx, targetIdx);
|
||||
const next = new Set(selected);
|
||||
for (const id of allVisibleIds.slice(start, end + 1)) next.add(id);
|
||||
return next;
|
||||
}
|
||||
|
||||
function selectAll(sessionIds: string[]): Set<string> {
|
||||
return new Set(sessionIds);
|
||||
}
|
||||
|
||||
function filterSelectable(sessions: { id: string; status: string }[]): string[] {
|
||||
return sessions.filter((s) => s.status !== 'running').map((s) => s.id);
|
||||
}
|
||||
|
||||
describe('toggle', () => {
|
||||
test('adds a session to empty selection', () => {
|
||||
const result = toggle(new Set(), 'a');
|
||||
expect(result.has('a')).toBe(true);
|
||||
expect(result.size).toBe(1);
|
||||
});
|
||||
|
||||
test('removes an already-selected session', () => {
|
||||
const result = toggle(new Set(['a', 'b']), 'a');
|
||||
expect(result.has('a')).toBe(false);
|
||||
expect(result.has('b')).toBe(true);
|
||||
expect(result.size).toBe(1);
|
||||
});
|
||||
|
||||
test('adds to existing selection', () => {
|
||||
const result = toggle(new Set(['a']), 'b');
|
||||
expect(result.has('a')).toBe(true);
|
||||
expect(result.has('b')).toBe(true);
|
||||
expect(result.size).toBe(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('rangeSelect', () => {
|
||||
const visible = ['a', 'b', 'c', 'd', 'e'];
|
||||
|
||||
test('selects range from anchor to target (forward)', () => {
|
||||
const result = rangeSelect(new Set(['b']), 'b', 'd', visible);
|
||||
expect([...result].sort()).toEqual(['b', 'c', 'd']);
|
||||
});
|
||||
|
||||
test('selects range from anchor to target (backward)', () => {
|
||||
const result = rangeSelect(new Set(['d']), 'd', 'b', visible);
|
||||
expect([...result].sort()).toEqual(['b', 'c', 'd']);
|
||||
});
|
||||
|
||||
test('preserves existing selections outside the range', () => {
|
||||
const result = rangeSelect(new Set(['a', 'c']), 'c', 'e', visible);
|
||||
expect([...result].sort()).toEqual(['a', 'c', 'd', 'e']);
|
||||
});
|
||||
|
||||
test('falls back to single selection when no anchor', () => {
|
||||
const result = rangeSelect(new Set(), null, 'c', visible);
|
||||
expect([...result]).toEqual(['c']);
|
||||
});
|
||||
|
||||
test('no-ops when anchor is not in visible list', () => {
|
||||
const result = rangeSelect(new Set(['x']), 'x', 'c', visible);
|
||||
expect([...result]).toEqual(['x']);
|
||||
});
|
||||
|
||||
test('no-ops when target is not in visible list', () => {
|
||||
const result = rangeSelect(new Set(['a']), 'a', 'z', visible);
|
||||
expect([...result]).toEqual(['a']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('selectAll', () => {
|
||||
test('selects all provided IDs', () => {
|
||||
const result = selectAll(['a', 'b', 'c']);
|
||||
expect(result.size).toBe(3);
|
||||
expect(result.has('a')).toBe(true);
|
||||
expect(result.has('b')).toBe(true);
|
||||
expect(result.has('c')).toBe(true);
|
||||
});
|
||||
|
||||
test('handles empty list', () => {
|
||||
const result = selectAll([]);
|
||||
expect(result.size).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('filterSelectable (running session exclusion)', () => {
|
||||
test('excludes running sessions', () => {
|
||||
const sessions = [
|
||||
{ id: 'a', status: 'idle' },
|
||||
{ id: 'b', status: 'running' },
|
||||
{ id: 'c', status: 'error' },
|
||||
{ id: 'd', status: 'running' },
|
||||
];
|
||||
const result = filterSelectable(sessions);
|
||||
expect(result).toEqual(['a', 'c']);
|
||||
});
|
||||
|
||||
test('includes all when none are running', () => {
|
||||
const sessions = [
|
||||
{ id: 'a', status: 'idle' },
|
||||
{ id: 'b', status: 'idle' },
|
||||
];
|
||||
const result = filterSelectable(sessions);
|
||||
expect(result).toEqual(['a', 'b']);
|
||||
});
|
||||
|
||||
test('returns empty when all are running', () => {
|
||||
const sessions = [
|
||||
{ id: 'a', status: 'running' },
|
||||
{ id: 'b', status: 'running' },
|
||||
];
|
||||
const result = filterSelectable(sessions);
|
||||
expect(result).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('enter and exit selection mode', () => {
|
||||
test('entering with an initial ID creates a set with that ID', () => {
|
||||
const selected = new Set(['initial']);
|
||||
expect(selected.size).toBe(1);
|
||||
expect(selected.has('initial')).toBe(true);
|
||||
});
|
||||
|
||||
test('exiting clears all selections', () => {
|
||||
const selected = new Set(['a', 'b', 'c']);
|
||||
const cleared = new Set<string>();
|
||||
expect(cleared.size).toBe(0);
|
||||
expect(selected.size).toBe(3);
|
||||
});
|
||||
});
|
||||
|
||||
describe('batch archive determination', () => {
|
||||
test('allSelectedArchived is true when all selected are archived', () => {
|
||||
const sessions = [
|
||||
{ id: 'a', isArchived: true },
|
||||
{ id: 'b', isArchived: true },
|
||||
{ id: 'c', isArchived: false },
|
||||
];
|
||||
const selected = new Set(['a', 'b']);
|
||||
const allArchived = [...selected].every((id) => {
|
||||
const s = sessions.find((s) => s.id === id);
|
||||
return s?.isArchived;
|
||||
});
|
||||
expect(allArchived).toBe(true);
|
||||
});
|
||||
|
||||
test('allSelectedArchived is false when any selected is not archived', () => {
|
||||
const sessions = [
|
||||
{ id: 'a', isArchived: true },
|
||||
{ id: 'b', isArchived: false },
|
||||
];
|
||||
const selected = new Set(['a', 'b']);
|
||||
const allArchived = [...selected].every((id) => {
|
||||
const s = sessions.find((s) => s.id === id);
|
||||
return s?.isArchived;
|
||||
});
|
||||
expect(allArchived).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user