@atercates/claude-deck 0.2.1

package/components/NewSessionDialog/index.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useNewSessionForm } from "./hooks/useNewSessionForm";
+import { AgentSelector } from "./AgentSelector";
+import { CreatingOverlay } from "./CreatingOverlay";
+import type { NewSessionDialogProps } from "./NewSessionDialog.types";
+
+export function NewSessionDialog({
+  open,
+  projects,
+  selectedProjectId,
+  onClose,
+  onCreated,
+  onCreateProject,
+}: NewSessionDialogProps) {
+  const form = useNewSessionForm({
+    open,
+    projects,
+    selectedProjectId,
+    onCreated,
+    onClose,
+    onCreateProject,
+  });
+
+  return (
+    <>
+      <Dialog
+        open={open}
+        onOpenChange={(o) => !o && !form.isLoading && form.handleClose()}
+      >
+        <DialogContent
+          className="max-h-[85vh] overflow-y-auto"
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && e.shiftKey && !form.isLoading) {
+              e.preventDefault();
+              form.handleSubmit(e as unknown as React.FormEvent);
+            }
+          }}
+        >
+          {form.isLoading && (
+            <CreatingOverlay
+              isWorktree={form.useWorktree}
+              step={form.creationStep}
+            />
+          )}
+          <DialogHeader>
+            <DialogTitle>New Session</DialogTitle>
+          </DialogHeader>
+          <form onSubmit={form.handleSubmit} className="space-y-4">
+            <AgentSelector
+              value={form.agentType}
+              onChange={form.handleAgentTypeChange}
+            />
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                Name{" "}
+                <span className="text-muted-foreground font-normal">
+                  (optional)
+                </span>
+              </label>
+              <Input
+                value={form.name}
+                onChange={(e) => form.setName(e.target.value)}
+                placeholder="Auto-generated if empty"
+                autoFocus
+              />
+            </div>
+
+            {form.error && <p className="text-sm text-red-500">{form.error}</p>}
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={form.handleClose}
+                disabled={form.isLoading}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={
+                  form.isLoading ||
+                  (form.useWorktree && !form.featureName.trim())
+                }
+              >
+                {form.isLoading ? "Creating..." : "Create"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+    </>
+  );
+}

package/components/NotificationSettings.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { Bell, Volume2, VolumeX, AlertCircle } from "lucide-react";
+import { Button } from "./ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import type { NotificationSettings as NotificationSettingsType } from "@/lib/notifications";
+
+interface WaitingSession {
+  id: string;
+  name: string;
+}
+
+interface NotificationSettingsProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  settings: NotificationSettingsType;
+  permissionGranted: boolean;
+  waitingSessions?: WaitingSession[];
+  onUpdateSettings: (settings: Partial<NotificationSettingsType>) => void;
+  onRequestPermission: () => Promise<boolean>;
+  onSelectSession?: (id: string) => void;
+}
+
+export function NotificationSettings({
+  open,
+  onOpenChange,
+  settings,
+  permissionGranted,
+  waitingSessions = [],
+  onUpdateSettings,
+  onRequestPermission,
+  onSelectSession,
+}: NotificationSettingsProps) {
+  const waitingCount = waitingSessions.length;
+
+  return (
+    <DropdownMenu open={open} onOpenChange={onOpenChange}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon-sm" className="relative">
+          <Bell
+            className={cn(
+              "h-4 w-4",
+              !settings.sound && "text-muted-foreground"
+            )}
+          />
+          {waitingCount > 0 && (
+            <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-yellow-500 text-[10px] font-bold text-yellow-950">
+              {waitingCount}
+            </span>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-48">
+        {/* Waiting sessions section */}
+        {waitingCount > 0 && (
+          <>
+            <DropdownMenuLabel className="flex items-center gap-2 text-xs text-yellow-500">
+              <AlertCircle className="h-3 w-3" />
+              Waiting for input
+            </DropdownMenuLabel>
+            {waitingSessions.map((session) => (
+              <DropdownMenuItem
+                key={session.id}
+                onClick={() => {
+                  onSelectSession?.(session.id);
+                  onOpenChange(false);
+                }}
+                className="text-sm"
+              >
+                {session.name}
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+          </>
+        )}
+
+        {/* Sound toggle */}
+        <DropdownMenuItem
+          onClick={() => onUpdateSettings({ sound: !settings.sound })}
+          className="flex items-center justify-between"
+        >
+          <span className="flex items-center gap-2">
+            {settings.sound ? (
+              <Volume2 className="h-3 w-3" />
+            ) : (
+              <VolumeX className="text-muted-foreground h-3 w-3" />
+            )}
+            Sound
+          </span>
+          <span
+            className={cn(
+              "relative h-4 w-8 rounded-full transition-colors",
+              settings.sound ? "bg-primary" : "bg-muted"
+            )}
+          >
+            <span
+              className={cn(
+                "bg-background absolute top-0.5 h-3 w-3 rounded-full transition-transform",
+                settings.sound ? "translate-x-4" : "translate-x-0.5"
+              )}
+            />
+          </span>
+        </DropdownMenuItem>
+
+        {/* Browser notifications - only show if not granted */}
+        {!permissionGranted && (
+          <DropdownMenuItem
+            onClick={async () => {
+              await onRequestPermission();
+            }}
+          >
+            <Bell className="mr-2 h-3 w-3" />
+            <span className="text-xs">Enable browser alerts</span>
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/components/PRCreationModal.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  X,
+  GitPullRequest,
+  Loader2,
+  ExternalLink,
+  GitBranch,
+  ChevronLeft,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface PRData {
+  branch: string;
+  baseBranch: string;
+  existingPR: {
+    number: number;
+    url: string;
+    state: string;
+    title: string;
+  } | null;
+  commits: { hash: string; subject: string }[];
+  suggestedTitle: string;
+  suggestedBody: string;
+}
+
+interface PRCreationModalProps {
+  workingDirectory: string;
+  onClose: () => void;
+  onSuccess?: (prUrl: string) => void;
+}
+
+export function PRCreationModal({
+  workingDirectory,
+  onClose,
+  onSuccess,
+}: PRCreationModalProps) {
+  const [loading, setLoading] = useState(true);
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [prData, setPrData] = useState<PRData | null>(null);
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+
+  // Fetch PR data on mount
+  useEffect(() => {
+    const fetchPRData = async () => {
+      try {
+        const res = await fetch(
+          `/api/git/pr?path=${encodeURIComponent(workingDirectory)}`
+        );
+        const data = await res.json();
+
+        if (data.error) {
+          setError(data.error);
+        } else {
+          setPrData(data);
+          setTitle(data.suggestedTitle);
+          setBody(data.suggestedBody);
+        }
+      } catch {
+        setError("Failed to fetch PR data");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPRData();
+  }, [workingDirectory]);
+
+  const handleCreate = async () => {
+    if (!title.trim()) {
+      setError("Title is required");
+      return;
+    }
+
+    setCreating(true);
+    setError(null);
+
+    try {
+      const res = await fetch("/api/git/pr", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          path: workingDirectory,
+          title: title.trim(),
+          description: body,
+          baseBranch: prData?.baseBranch,
+        }),
+      });
+
+      const data = await res.json();
+
+      if (data.error) {
+        setError(data.error);
+        return;
+      }
+
+      if (data.pr?.url) {
+        onSuccess?.(data.pr.url);
+        // Open PR in new tab
+        window.open(data.pr.url, "_blank");
+        onClose();
+      }
+    } catch {
+      setError("Failed to create PR");
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  // Show existing PR
+  if (prData?.existingPR) {
+    return (
+      <div className="bg-background fixed inset-0 z-50 flex flex-col">
+        <Header onClose={onClose} />
+
+        <div className="flex flex-1 flex-col items-center justify-center p-4">
+          <GitPullRequest className="text-primary mb-4 h-12 w-12" />
+          <h2 className="mb-2 text-lg font-medium">PR Already Exists</h2>
+          <p className="text-muted-foreground mb-4 text-center text-sm">
+            #{prData.existingPR.number} - {prData.existingPR.title}
+          </p>
+          <Button
+            variant="default"
+            onClick={() => window.open(prData.existingPR!.url, "_blank")}
+            className="min-h-[44px]"
+          >
+            <ExternalLink className="mr-2 h-4 w-4" />
+            View Pull Request
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-background fixed inset-0 z-50 flex flex-col">
+      <Header onClose={onClose} />
+
+      {loading ? (
+        <div className="flex flex-1 items-center justify-center">
+          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+        </div>
+      ) : error && !prData ? (
+        <div className="flex flex-1 flex-col items-center justify-center p-4">
+          <p className="mb-4 text-sm text-red-500">{error}</p>
+          <Button variant="outline" onClick={onClose}>
+            Close
+          </Button>
+        </div>
+      ) : (
+        <>
+          <div className="flex-1 space-y-4 overflow-y-auto p-4">
+            {/* Branch info */}
+            <div className="text-muted-foreground flex items-center gap-2 text-sm">
+              <GitBranch className="h-4 w-4" />
+              <span>{prData?.branch}</span>
+              <span>→</span>
+              <span>{prData?.baseBranch}</span>
+            </div>
+
+            {/* Title input */}
+            <div className="space-y-1.5">
+              <label className="text-sm font-medium">Title</label>
+              <input
+                type="text"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="PR title..."
+                className={cn(
+                  "w-full rounded-md px-3 py-2 text-sm",
+                  "bg-muted/50 border-border border",
+                  "focus:ring-primary/50 focus:ring-2 focus:outline-none",
+                  "min-h-[44px]"
+                )}
+              />
+            </div>
+
+            {/* Body textarea */}
+            <div className="space-y-1.5">
+              <label className="text-sm font-medium">Description</label>
+              <textarea
+                value={body}
+                onChange={(e) => setBody(e.target.value)}
+                placeholder="Describe your changes..."
+                rows={12}
+                className={cn(
+                  "w-full resize-none rounded-md px-3 py-2 font-mono text-sm",
+                  "bg-muted/50 border-border border",
+                  "focus:ring-primary/50 focus:ring-2 focus:outline-none"
+                )}
+              />
+            </div>
+
+            {/* Commits list */}
+            {prData && prData.commits.length > 0 && (
+              <div className="space-y-1.5">
+                <label className="text-muted-foreground text-sm font-medium">
+                  Commits ({prData.commits.length})
+                </label>
+                <div className="text-muted-foreground space-y-1 text-xs">
+                  {prData.commits.slice(0, 10).map((commit) => (
+                    <div key={commit.hash} className="truncate">
+                      <code className="text-primary/70">
+                        {commit.hash.slice(0, 7)}
+                      </code>{" "}
+                      {commit.subject}
+                    </div>
+                  ))}
+                  {prData.commits.length > 10 && (
+                    <div className="text-muted-foreground/50">
+                      +{prData.commits.length - 10} more commits
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Error message */}
+            {error && <p className="text-sm text-red-500">{error}</p>}
+          </div>
+
+          {/* Footer */}
+          <div className="border-border safe-area-bottom border-t p-4">
+            <Button
+              variant="default"
+              onClick={handleCreate}
+              disabled={creating || !title.trim()}
+              className="min-h-[44px] w-full"
+            >
+              {creating ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <GitPullRequest className="mr-2 h-4 w-4" />
+              )}
+              Create Pull Request
+            </Button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function Header({ onClose }: { onClose: () => void }) {
+  return (
+    <div className="border-border flex items-center gap-2 border-b p-3">
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        onClick={onClose}
+        className="h-9 w-9"
+      >
+        <ChevronLeft className="h-5 w-5" />
+      </Button>
+      <div className="flex-1">
+        <h2 className="text-sm font-medium">Create Pull Request</h2>
+      </div>
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        onClick={onClose}
+        className="h-9 w-9 md:hidden"
+      >
+        <X className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}