@atercates/claude-deck 0.2.1

package/components/views/DesktopView.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import { SessionList } from "@/components/SessionList";
+import { NewSessionDialog } from "@/components/NewSessionDialog";
+import { NotificationSettings } from "@/components/NotificationSettings";
+import { StartServerDialog } from "@/components/DevServers/StartServerDialog";
+import { SidebarFooter } from "@/components/SidebarFooter";
+import { Button } from "@/components/ui/button";
+import {
+  PanelLeftClose,
+  PanelLeft,
+  Plus,
+  Copy,
+  Check,
+  Command,
+} from "lucide-react";
+import { PaneLayout } from "@/components/PaneLayout";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { QuickSwitcher } from "@/components/QuickSwitcher";
+import type { ViewProps } from "./types";
+import { fileOpenActions } from "@/stores/fileOpen";
+
+export function DesktopView({
+  sessions,
+  projects,
+  sessionStatuses,
+  sidebarOpen,
+  setSidebarOpen,
+  activeSession,
+  focusedActiveTab,
+  copiedSessionId,
+  setCopiedSessionId,
+  showNewSessionDialog,
+  setShowNewSessionDialog,
+  newSessionProjectId,
+  showNotificationSettings,
+  setShowNotificationSettings,
+  showQuickSwitcher,
+  setShowQuickSwitcher,
+  notificationSettings,
+  permissionGranted,
+  updateSettings,
+  requestPermission,
+  attachToSession,
+  openSessionInNewTab,
+  handleNewSessionInProject,
+  handleOpenTerminal,
+  handleSessionCreated,
+  handleCreateProject,
+  handleStartDevServer,
+  handleCreateDevServer,
+  startDevServerProject,
+  setStartDevServerProjectId,
+  newClaudeSession,
+  resumeClaudeSession,
+  renderPane,
+}: ViewProps) {
+  return (
+    <div className="bg-background flex h-screen overflow-hidden">
+      {/* Desktop Sidebar */}
+      <div
+        className={` ${sidebarOpen ? "w-72" : "w-0"} bg-sidebar-background flex-shrink-0 overflow-hidden shadow-xl shadow-black/10 transition-all duration-200 dark:shadow-black/30`}
+      >
+        <div className="flex h-full flex-col">
+          {/* Session list */}
+          <div className="min-h-0 flex-1 overflow-hidden">
+            <SessionList
+              activeSessionId={focusedActiveTab?.sessionId || undefined}
+              sessionStatuses={sessionStatuses}
+              onSelect={(id) => {
+                const session = sessions.find((s) => s.id === id);
+                if (session) attachToSession(session);
+              }}
+              onOpenInTab={(id) => {
+                const session = sessions.find((s) => s.id === id);
+                if (session) openSessionInNewTab(session);
+              }}
+              onNewSessionInProject={handleNewSessionInProject}
+              onOpenTerminal={handleOpenTerminal}
+              onStartDevServer={handleStartDevServer}
+              onCreateDevServer={handleCreateDevServer}
+              onResumeClaudeSession={resumeClaudeSession}
+              onNewSession={newClaudeSession}
+            />
+          </div>
+
+          <SidebarFooter />
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div className="flex min-w-0 flex-1 flex-col">
+        {/* Header */}
+        <header className="flex items-center justify-between px-4 py-2">
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={() => setSidebarOpen(!sidebarOpen)}
+            >
+              {sidebarOpen ? (
+                <PanelLeftClose className="h-4 w-4" />
+              ) : (
+                <PanelLeft className="h-4 w-4" />
+              )}
+            </Button>
+
+            {activeSession && (
+              <div className="flex items-center gap-2">
+                <span className="font-medium">{activeSession.name}</span>
+                {activeSession.tmux_name && (
+                  <span className="text-muted-foreground text-xs">
+                    {activeSession.tmux_name}
+                  </span>
+                )}
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      className="h-6 w-6"
+                      onClick={async () => {
+                        try {
+                          if (navigator.clipboard) {
+                            await navigator.clipboard.writeText(
+                              activeSession.id
+                            );
+                          } else {
+                            // Fallback for non-HTTPS contexts
+                            const textarea = document.createElement("textarea");
+                            textarea.value = activeSession.id;
+                            textarea.style.position = "fixed";
+                            textarea.style.opacity = "0";
+                            document.body.appendChild(textarea);
+                            textarea.select();
+                            document.execCommand("copy");
+                            document.body.removeChild(textarea);
+                          }
+                          setCopiedSessionId(true);
+                          setTimeout(() => setCopiedSessionId(false), 2000);
+                        } catch {
+                          console.error("Failed to copy to clipboard");
+                        }
+                      }}
+                    >
+                      {copiedSessionId ? (
+                        <Check className="h-3 w-3 text-green-500" />
+                      ) : (
+                        <Copy className="h-3 w-3" />
+                      )}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Copy session ID for orchestration</p>
+                    <p className="text-muted-foreground font-mono text-xs">
+                      {activeSession.id.slice(0, 8)}...
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  onClick={() => setShowQuickSwitcher(true)}
+                >
+                  <Command className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Quick switch</p>
+                <p className="text-muted-foreground text-xs">⌘K</p>
+              </TooltipContent>
+            </Tooltip>
+            <NotificationSettings
+              open={showNotificationSettings}
+              onOpenChange={setShowNotificationSettings}
+              settings={notificationSettings}
+              permissionGranted={permissionGranted}
+              waitingSessions={sessions
+                .filter((s) => sessionStatuses[s.id]?.status === "waiting")
+                .map((s) => ({ id: s.id, name: s.name }))}
+              onUpdateSettings={updateSettings}
+              onRequestPermission={requestPermission}
+              onSelectSession={(id) => {
+                const session = sessions.find((s) => s.id === id);
+                if (session) attachToSession(session);
+              }}
+            />
+            <Button size="sm" onClick={() => newClaudeSession()}>
+              <Plus className="mr-1 h-4 w-4" />
+              New Session
+            </Button>
+          </div>
+        </header>
+
+        {/* Pane Layout - full height */}
+        <div className="min-h-0 flex-1">
+          <PaneLayout renderPane={renderPane} />
+        </div>
+      </div>
+
+      {/* Dialogs */}
+      <NewSessionDialog
+        open={showNewSessionDialog}
+        projects={projects}
+        selectedProjectId={newSessionProjectId ?? undefined}
+        onClose={() => setShowNewSessionDialog(false)}
+        onCreated={handleSessionCreated}
+        onCreateProject={handleCreateProject}
+      />
+      <QuickSwitcher
+        open={showQuickSwitcher}
+        onOpenChange={setShowQuickSwitcher}
+        currentSessionId={focusedActiveTab?.sessionId ?? undefined}
+        activeSessionWorkingDir={activeSession?.working_directory ?? undefined}
+        onResumeClaudeSession={resumeClaudeSession}
+        onSelectFile={(file, line) => {
+          const absolutePath = activeSession?.working_directory
+            ? `${activeSession.working_directory}/${file.replace(/^\.\//, "")}`
+            : file;
+          fileOpenActions.requestOpen(absolutePath, line);
+        }}
+      />
+      {startDevServerProject && (
+        <StartServerDialog
+          project={startDevServerProject}
+          projectDevServers={startDevServerProject.devServers}
+          onStart={handleCreateDevServer}
+          onClose={() => setStartDevServerProjectId(null)}
+        />
+      )}
+    </div>
+  );
+}

package/components/views/MobileView.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { SessionList } from "@/components/SessionList";
+import { NewSessionDialog } from "@/components/NewSessionDialog";
+import { StartServerDialog } from "@/components/DevServers/StartServerDialog";
+import { SidebarFooter } from "@/components/SidebarFooter";
+import { PaneLayout } from "@/components/PaneLayout";
+import { SwipeSidebar } from "@/components/mobile/SwipeSidebar";
+import { QuickSwitcher } from "@/components/QuickSwitcher";
+import type { ViewProps } from "./types";
+import { fileOpenActions } from "@/stores/fileOpen";
+
+export function MobileView({
+  sessions,
+  projects,
+  sessionStatuses,
+  sidebarOpen,
+  setSidebarOpen,
+  activeSession,
+  focusedActiveTab,
+  showNewSessionDialog,
+  setShowNewSessionDialog,
+  newSessionProjectId,
+  showQuickSwitcher,
+  setShowQuickSwitcher,
+  attachToSession,
+  openSessionInNewTab,
+  handleNewSessionInProject,
+  handleOpenTerminal,
+  handleSessionCreated,
+  handleCreateProject,
+  handleStartDevServer,
+  handleCreateDevServer,
+  startDevServerProject,
+  setStartDevServerProjectId,
+  newClaudeSession,
+  resumeClaudeSession,
+  renderPane,
+}: ViewProps) {
+  return (
+    <main className="h-app bg-background flex flex-col overflow-hidden">
+      {/* Swipe sidebar */}
+      <SwipeSidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)}>
+        <div className="flex h-full flex-col">
+          {/* Session list */}
+          <div className="min-h-0 flex-1 overflow-hidden">
+            <SessionList
+              activeSessionId={focusedActiveTab?.sessionId || undefined}
+              sessionStatuses={sessionStatuses}
+              onSelect={(id) => {
+                const session = sessions.find((s) => s.id === id);
+                if (session) attachToSession(session);
+                setSidebarOpen(false);
+              }}
+              onOpenInTab={(id) => {
+                const session = sessions.find((s) => s.id === id);
+                if (session) openSessionInNewTab(session);
+                setSidebarOpen(false);
+              }}
+              onNewSessionInProject={handleNewSessionInProject}
+              onOpenTerminal={handleOpenTerminal}
+              onStartDevServer={handleStartDevServer}
+              onCreateDevServer={handleCreateDevServer}
+              onResumeClaudeSession={resumeClaudeSession}
+              onNewSession={newClaudeSession}
+            />
+          </div>
+
+          <SidebarFooter />
+        </div>
+      </SwipeSidebar>
+
+      {/* Terminal fills the screen */}
+      <div className="min-h-0 w-full flex-1">
+        <PaneLayout renderPane={renderPane} />
+      </div>
+
+      {/* Dialogs */}
+      <NewSessionDialog
+        open={showNewSessionDialog}
+        projects={projects}
+        selectedProjectId={newSessionProjectId ?? undefined}
+        onClose={() => setShowNewSessionDialog(false)}
+        onCreated={handleSessionCreated}
+        onCreateProject={handleCreateProject}
+      />
+      <QuickSwitcher
+        open={showQuickSwitcher}
+        onOpenChange={setShowQuickSwitcher}
+        currentSessionId={focusedActiveTab?.sessionId ?? undefined}
+        activeSessionWorkingDir={activeSession?.working_directory ?? undefined}
+        onResumeClaudeSession={resumeClaudeSession}
+        onSelectFile={(file, line) => {
+          const absolutePath = activeSession?.working_directory
+            ? `${activeSession.working_directory}/${file.replace(/^\.\//, "")}`
+            : file;
+          fileOpenActions.requestOpen(absolutePath, line);
+        }}
+      />
+      {startDevServerProject && (
+        <StartServerDialog
+          project={startDevServerProject}
+          projectDevServers={startDevServerProject.devServers}
+          onStart={handleCreateDevServer}
+          onClose={() => setStartDevServerProjectId(null)}
+        />
+      )}
+    </main>
+  );
+}

package/components/views/types.ts

@@ -0,0 +1,75 @@
+import type { Session } from "@/lib/db";
+import type { ProjectWithDevServers } from "@/lib/projects";
+import type { NotificationSettings } from "@/lib/notifications";
+import type { TabData } from "@/lib/panes";
+
+export interface SessionStatus {
+  sessionName: string;
+  status: "idle" | "running" | "waiting" | "error" | "dead";
+  lastLine?: string;
+  claudeSessionId?: string | null;
+}
+
+export interface ViewProps {
+  sessions: Session[];
+  projects: ProjectWithDevServers[];
+  sessionStatuses: Record<string, SessionStatus>;
+  sidebarOpen: boolean;
+  setSidebarOpen: (open: boolean) => void;
+  activeSession: Session | undefined;
+  focusedActiveTab: TabData | null;
+  copiedSessionId: boolean;
+  setCopiedSessionId: (copied: boolean) => void;
+
+  // Dialogs
+  showNewSessionDialog: boolean;
+  setShowNewSessionDialog: (show: boolean) => void;
+  newSessionProjectId: string | null;
+  showNotificationSettings: boolean;
+  setShowNotificationSettings: (show: boolean) => void;
+  showQuickSwitcher: boolean;
+  setShowQuickSwitcher: (show: boolean) => void;
+
+  // Notification settings
+  notificationSettings: NotificationSettings;
+  permissionGranted: boolean;
+  updateSettings: (settings: Partial<NotificationSettings>) => void;
+  requestPermission: () => Promise<boolean>;
+
+  // Handlers
+  attachToSession: (session: Session) => void;
+  openSessionInNewTab: (session: Session) => void;
+  handleNewSessionInProject: (projectId: string) => void;
+  handleOpenTerminal: (projectId: string) => void;
+  handleSessionCreated: (sessionId: string) => Promise<void>;
+  handleCreateProject: (
+    name: string,
+    workingDirectory: string,
+    agentType?: string
+  ) => Promise<string | null>;
+
+  // Dev server (for StartServerDialog)
+  handleStartDevServer: (projectId: string) => void;
+  handleCreateDevServer: (opts: {
+    projectId: string;
+    type: "node" | "docker";
+    name: string;
+    command: string;
+    workingDirectory: string;
+    ports?: number[];
+  }) => Promise<void>;
+  startDevServerProject: ProjectWithDevServers | null;
+  setStartDevServerProjectId: (id: string | null) => void;
+
+  // Claude sessions
+  newClaudeSession: (cwd?: string, projectName?: string) => void;
+  resumeClaudeSession: (
+    claudeSessionId: string,
+    cwd: string,
+    summary?: string,
+    projectName?: string
+  ) => void;
+
+  // Pane
+  renderPane: (paneId: string) => React.ReactNode;
+}