mirror of
https://github.com/davidkaya/aryx.git
synced 2026-08-03 18:38:35 +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
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user