@atercates/claude-deck 0.2.1

package/components/SessionList/SelectionToolbar.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { useEffect, useCallback, useState } from "react";
+import { useSnapshot } from "valtio";
+import { Button } from "@/components/ui/button";
+import { Trash2, X } from "lucide-react";
+import { selectionStore, selectionActions } from "@/stores/sessionSelection";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+interface SelectionToolbarProps {
+  allSessionIds: string[];
+  onDeleteSessions: (sessionIds: string[]) => Promise<void>;
+}
+
+export function SelectionToolbar({
+  allSessionIds,
+  onDeleteSessions,
+}: SelectionToolbarProps) {
+  const { selectedIds } = useSnapshot(selectionStore);
+  const selectedCount = selectedIds.size;
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleSelectAll = useCallback(() => {
+    selectionActions.selectAll(allSessionIds);
+  }, [allSessionIds]);
+
+  const handleDelete = useCallback(async () => {
+    const ids = selectionActions.getSelectedIds();
+    if (ids.length === 0) return;
+
+    setIsDeleting(true);
+    try {
+      await onDeleteSessions(ids);
+      selectionActions.clear();
+    } finally {
+      setIsDeleting(false);
+      setShowDeleteDialog(false);
+    }
+  }, [onDeleteSessions]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    if (selectedCount === 0) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Delete key - show delete confirmation
+      if (e.key === "Delete" || e.key === "Backspace") {
+        // Don't trigger if typing in an input
+        if (
+          e.target instanceof HTMLInputElement ||
+          e.target instanceof HTMLTextAreaElement
+        ) {
+          return;
+        }
+        e.preventDefault();
+        setShowDeleteDialog(true);
+      }
+
+      // Escape - clear selection
+      if (e.key === "Escape") {
+        e.preventDefault();
+        selectionActions.clear();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [selectedCount]);
+
+  if (selectedCount === 0) return null;
+
+  const allSelected = selectedCount === allSessionIds.length;
+
+  return (
+    <>
+      <div className="bg-primary/10 border-primary/20 flex items-center gap-2 border-b px-3 py-2">
+        <span className="text-sm font-medium whitespace-nowrap">
+          {selectedCount} selected
+        </span>
+        <div className="ml-auto flex items-center gap-1">
+          {!allSelected && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              onClick={handleSelectAll}
+            >
+              Select all
+            </Button>
+          )}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className="text-destructive hover:text-destructive hover:bg-destructive/10 h-6 w-6"
+                onClick={() => setShowDeleteDialog(true)}
+              >
+                <Trash2 className="h-3 w-3" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Delete selected</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className="h-6 w-6"
+                onClick={selectionActions.clear}
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Clear selection</TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+
+      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <DialogContent showCloseButton={false}>
+          <DialogHeader>
+            <DialogTitle>
+              Delete {selectedCount} session{selectedCount > 1 ? "s" : ""}?
+            </DialogTitle>
+            <DialogDescription>
+              This will permanently delete the selected sessions and their tmux
+              sessions. This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setShowDeleteDialog(false)}
+              disabled={isDeleting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={isDeleting}
+            >
+              {isDeleting ? "Deleting..." : "Delete"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/components/SessionList/SessionList.types.ts

@@ -0,0 +1,37 @@
+import type { Session, Group } from "@/lib/db";
+
+export interface SessionStatus {
+  sessionName: string;
+  status: "idle" | "running" | "waiting" | "error" | "dead";
+  lastLine?: string;
+}
+
+export interface SessionListProps {
+  activeSessionId?: string;
+  sessionStatuses?: Record<string, SessionStatus>;
+  onSelect: (sessionId: string) => void;
+  onOpenInTab?: (sessionId: string) => void;
+  onNewSessionInProject?: (projectId: string) => void;
+  onOpenTerminal?: (projectId: string) => void;
+  onStartDevServer?: (projectId: string) => void;
+  onResumeClaudeSession?: (
+    claudeSessionId: string,
+    cwd: string,
+    summary?: string,
+    projectName?: string
+  ) => void;
+  onNewSession?: (cwd?: string, projectName?: string) => void;
+  onCreateDevServer?: (opts: {
+    projectId: string;
+    type: "node" | "docker";
+    name: string;
+    command: string;
+    workingDirectory: string;
+    ports?: number[];
+  }) => Promise<void>;
+}
+
+export interface SessionHoverHandlers {
+  onHoverStart: (session: Session, rect: DOMRect) => void;
+  onHoverEnd: () => void;
+}

package/components/SessionList/SessionListHeader.tsx

@@ -0,0 +1,71 @@
+import { ADropdownMenu, menuItem } from "@/components/a/ADropdownMenu";
+import {
+  Plus,
+  FolderPlus,
+  FolderOpen,
+  GitBranch,
+  MoreHorizontal,
+  Trash2,
+} from "lucide-react";
+
+interface SessionListHeaderProps {
+  onNewProject: () => void;
+  onOpenProject: () => void;
+  onCloneFromGithub: () => void;
+  onKillAll: () => void;
+}
+
+export function SessionListHeader({
+  onNewProject,
+  onOpenProject,
+  onCloneFromGithub,
+  onKillAll,
+}: SessionListHeaderProps) {
+  return (
+    <div className="flex items-center justify-between px-3 py-2">
+      <div className="flex items-center gap-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          className="h-5 w-5"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+        >
+          <path d="M12 8V4H8" />
+          <rect width="16" height="12" x="4" y="8" rx="2" />
+          <path d="M2 14h2" />
+          <path d="M20 14h2" />
+          <path d="M15 13v2" />
+          <path d="M9 13v2" />
+        </svg>
+        <h2 className="font-semibold">ClaudeDeck</h2>
+      </div>
+      <div className="flex gap-1">
+        <ADropdownMenu
+          icon={Plus}
+          tooltip="New project"
+          items={[
+            menuItem("New Project", onNewProject, { icon: FolderPlus }),
+            menuItem("Open Project", onOpenProject, { icon: FolderOpen }),
+            menuItem("Clone from GitHub", onCloneFromGithub, {
+              icon: GitBranch,
+            }),
+          ]}
+        />
+        <ADropdownMenu
+          icon={MoreHorizontal}
+          tooltip="More options"
+          items={[
+            menuItem("Kill all sessions", onKillAll, {
+              icon: Trash2,
+              variant: "destructive",
+            }),
+          ]}
+        />
+      </div>
+    </div>
+  );
+}

package/components/SessionList/hooks/useSessionListMutations.ts

@@ -0,0 +1,269 @@
+import { useCallback } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import {
+  useDeleteSession,
+  useRenameSession,
+  useForkSession,
+  useSummarizeSession,
+  useMoveSessionToProject,
+} from "@/data/sessions";
+import {
+  useToggleProject,
+  useDeleteProject,
+  useRenameProject,
+} from "@/data/projects";
+import { useToggleGroup, useCreateGroup, useDeleteGroup } from "@/data/groups";
+import {
+  useStopDevServer,
+  useRestartDevServer,
+  useRemoveDevServer,
+} from "@/data/dev-servers";
+import { sessionKeys } from "@/data/sessions/keys";
+
+interface UseSessionListMutationsOptions {
+  onSelectSession: (sessionId: string) => void;
+}
+
+export function useSessionListMutations({
+  onSelectSession,
+}: UseSessionListMutationsOptions) {
+  const queryClient = useQueryClient();
+
+  // Session mutations
+  const deleteSessionMutation = useDeleteSession();
+  const renameSessionMutation = useRenameSession();
+  const forkSessionMutation = useForkSession();
+  const summarizeSessionMutation = useSummarizeSession();
+  const moveSessionToProjectMutation = useMoveSessionToProject();
+
+  // Project mutations
+  const toggleProjectMutation = useToggleProject();
+  const deleteProjectMutation = useDeleteProject();
+  const renameProjectMutation = useRenameProject();
+
+  // Group mutations
+  const toggleGroupMutation = useToggleGroup();
+  const createGroupMutation = useCreateGroup();
+  const deleteGroupMutation = useDeleteGroup();
+
+  // Dev server mutations
+  const stopDevServerMutation = useStopDevServer();
+  const restartDevServerMutation = useRestartDevServer();
+  const removeDevServerMutation = useRemoveDevServer();
+
+  // Derived state
+  const summarizingSessionId = summarizeSessionMutation.isPending
+    ? (summarizeSessionMutation.variables as string)
+    : null;
+
+  // Session handlers
+  const handleDeleteSession = useCallback(
+    async (sessionId: string) => {
+      if (!confirm("Delete this session? This cannot be undone.")) return;
+      await deleteSessionMutation.mutateAsync(sessionId);
+    },
+    [deleteSessionMutation]
+  );
+
+  const handleRenameSession = useCallback(
+    async (sessionId: string, newName: string) => {
+      await renameSessionMutation.mutateAsync({ sessionId, newName });
+    },
+    [renameSessionMutation]
+  );
+
+  const handleForkSession = useCallback(
+    async (sessionId: string) => {
+      const forkedSession = await forkSessionMutation.mutateAsync(sessionId);
+      if (forkedSession) onSelectSession(forkedSession.id);
+    },
+    [forkSessionMutation, onSelectSession]
+  );
+
+  const handleSummarize = useCallback(
+    async (sessionId: string) => {
+      const newSession = await summarizeSessionMutation.mutateAsync(sessionId);
+      if (newSession) onSelectSession(newSession.id);
+    },
+    [summarizeSessionMutation, onSelectSession]
+  );
+
+  const handleMoveSessionToProject = useCallback(
+    async (sessionId: string, projectId: string) => {
+      await moveSessionToProjectMutation.mutateAsync({ sessionId, projectId });
+    },
+    [moveSessionToProjectMutation]
+  );
+
+  // Project handlers
+  const handleToggleProject = useCallback(
+    async (projectId: string, expanded: boolean) => {
+      await toggleProjectMutation.mutateAsync({ projectId, expanded });
+    },
+    [toggleProjectMutation]
+  );
+
+  const handleDeleteProject = useCallback(
+    async (projectId: string) => {
+      if (
+        !confirm(
+          "Delete this project? Sessions will be moved to Uncategorized."
+        )
+      )
+        return;
+      await deleteProjectMutation.mutateAsync(projectId);
+    },
+    [deleteProjectMutation]
+  );
+
+  const handleRenameProject = useCallback(
+    async (projectId: string, newName: string) => {
+      await renameProjectMutation.mutateAsync({ projectId, newName });
+    },
+    [renameProjectMutation]
+  );
+
+  // Group handlers
+  const handleToggleGroup = useCallback(
+    async (path: string, expanded: boolean) => {
+      await toggleGroupMutation.mutateAsync({ path, expanded });
+    },
+    [toggleGroupMutation]
+  );
+
+  const handleCreateGroup = useCallback(
+    async (name: string, parentPath?: string) => {
+      await createGroupMutation.mutateAsync({ name, parentPath });
+    },
+    [createGroupMutation]
+  );
+
+  const handleDeleteGroup = useCallback(
+    async (path: string) => {
+      if (!confirm("Delete this group? Sessions will be moved to parent."))
+        return;
+      await deleteGroupMutation.mutateAsync(path);
+    },
+    [deleteGroupMutation]
+  );
+
+  // Dev server handlers
+  const handleStopDevServer = useCallback(
+    async (serverId: string) => {
+      await stopDevServerMutation.mutateAsync(serverId);
+    },
+    [stopDevServerMutation]
+  );
+
+  const handleRestartDevServer = useCallback(
+    async (serverId: string) => {
+      await restartDevServerMutation.mutateAsync(serverId);
+    },
+    [restartDevServerMutation]
+  );
+
+  const handleRemoveDevServer = useCallback(
+    async (serverId: string) => {
+      await removeDevServerMutation.mutateAsync(serverId);
+    },
+    [removeDevServerMutation]
+  );
+
+  // Bulk delete handler
+  const handleBulkDelete = useCallback(
+    async (sessionIds: string[]) => {
+      const count = sessionIds.length;
+      const hasWorktrees = sessionIds.length > 0; // Assume some might have worktrees
+
+      // Show toast with progress
+      const toastId = toast.loading(
+        hasWorktrees
+          ? `Deleting ${count} session${count > 1 ? "s" : ""}... cleaning up worktrees in background`
+          : `Deleting ${count} session${count > 1 ? "s" : ""}...`
+      );
+
+      let succeeded = 0;
+      let failed = 0;
+
+      // Delete all sessions in parallel for speed
+      await Promise.allSettled(
+        sessionIds.map(async (sessionId) => {
+          try {
+            const response = await fetch(`/api/sessions/${sessionId}`, {
+              method: "DELETE",
+            });
+            if (response.ok) {
+              succeeded++;
+            } else {
+              failed++;
+            }
+          } catch (error) {
+            console.error(`Failed to delete session ${sessionId}:`, error);
+            failed++;
+          }
+        })
+      );
+
+      // Invalidate cache to refresh UI
+      queryClient.invalidateQueries({ queryKey: sessionKeys.list() });
+
+      // Update toast based on results
+      if (failed === 0) {
+        toast.success(
+          `Deleted ${succeeded} session${succeeded > 1 ? "s" : ""}`,
+          { id: toastId }
+        );
+      } else if (succeeded === 0) {
+        toast.error(
+          `Failed to delete ${failed} session${failed > 1 ? "s" : ""}`,
+          {
+            id: toastId,
+          }
+        );
+      } else {
+        toast.warning(
+          `Deleted ${succeeded}, failed ${failed} session${failed > 1 ? "s" : ""}`,
+          { id: toastId }
+        );
+      }
+    },
+    [queryClient]
+  );
+
+  // Refresh handler
+  const handleRefresh = useCallback(async () => {
+    await queryClient.invalidateQueries({ queryKey: sessionKeys.list() });
+  }, [queryClient]);
+
+  return {
+    // Derived state
+    summarizingSessionId,
+
+    // Session handlers
+    handleDeleteSession,
+    handleRenameSession,
+    handleForkSession,
+    handleSummarize,
+    handleMoveSessionToProject,
+
+    // Project handlers
+    handleToggleProject,
+    handleDeleteProject,
+    handleRenameProject,
+
+    // Group handlers
+    handleToggleGroup,
+    handleCreateGroup,
+    handleDeleteGroup,
+
+    // Dev server handlers
+    handleStopDevServer,
+    handleRestartDevServer,
+    handleRemoveDevServer,
+
+    // Bulk operations
+    handleBulkDelete,
+    handleRefresh,
+  };
+}