@atercates/claude-deck 0.2.1

package/components/DirectoryPicker.tsx

@@ -0,0 +1,355 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "./ui/dialog";
+import { Button } from "./ui/button";
+import {
+  ChevronRight,
+  ChevronDown,
+  Folder,
+  FolderOpen,
+  Home,
+  ChevronUp,
+  Loader2,
+  FolderInput,
+  HardDrive,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { FileNode } from "@/lib/file-utils";
+
+interface DirectoryPickerProps {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (path: string) => void;
+  initialPath?: string;
+}
+
+export function DirectoryPicker({
+  open,
+  onClose,
+  onSelect,
+  initialPath = "~",
+}: DirectoryPickerProps) {
+  const [currentPath, setCurrentPath] = useState(initialPath);
+  const [selectedPath, setSelectedPath] = useState<string | null>(null);
+  const [directories, setDirectories] = useState<FileNode[]>([]);
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Track home directory path from API
+  const [homePath, setHomePath] = useState<string | null>(null);
+
+  // Fetch directory contents
+  const fetchDirectory = useCallback(async (path: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/files?path=${encodeURIComponent(path)}`);
+      const data = await res.json();
+      if (data.error) {
+        setError(data.error);
+        return { dirs: [], expandedPath: path };
+      }
+      // Store the home path if we're at ~
+      if (path === "~" && data.path) {
+        setHomePath(data.path);
+      }
+      // Filter to only directories
+      const dirs = (data.files || []).filter(
+        (f: FileNode) => f.type === "directory"
+      );
+      return { dirs, expandedPath: data.path };
+    } catch {
+      setError("Failed to load directory");
+      return { dirs: [], expandedPath: path };
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Load initial directory
+  useEffect(() => {
+    if (open) {
+      fetchDirectory(currentPath).then(({ dirs }) => setDirectories(dirs));
+      setSelectedPath(null);
+    }
+  }, [open, currentPath, fetchDirectory]);
+
+  // Navigate up to parent
+  const goUp = () => {
+    // Can't go above root
+    if (currentPath === "/") {
+      return;
+    }
+
+    // From ~ or homePath, go to parent of home directory
+    if (currentPath === "~" || (homePath && currentPath === homePath)) {
+      if (homePath) {
+        const homeParent = homePath.split("/").slice(0, -1).join("/") || "/";
+        setCurrentPath(homeParent);
+        setExpanded(new Set());
+      }
+      return;
+    }
+
+    const parts = currentPath.split("/").filter(Boolean);
+    parts.pop();
+    const newPath = currentPath.startsWith("~")
+      ? "~/" + parts.slice(1).join("/") || "~"
+      : "/" + parts.join("/") || "/";
+    setCurrentPath(newPath);
+    setExpanded(new Set());
+  };
+
+  // Go to root
+  const goRoot = () => {
+    setCurrentPath("/");
+    setExpanded(new Set());
+  };
+
+  // Go to home
+  const goHome = () => {
+    setCurrentPath("~");
+    setExpanded(new Set());
+  };
+
+  // Toggle directory expansion and fetch children
+  const toggleExpand = async (node: FileNode) => {
+    const newExpanded = new Set(expanded);
+    if (newExpanded.has(node.path)) {
+      newExpanded.delete(node.path);
+    } else {
+      newExpanded.add(node.path);
+      // Fetch children if not already loaded
+      if (!node.children || node.children.length === 0) {
+        const { dirs } = await fetchDirectory(node.path);
+        // Update the node with children
+        setDirectories((prev) => updateNodeChildren(prev, node.path, dirs));
+      }
+    }
+    setExpanded(newExpanded);
+  };
+
+  // Select a directory
+  const handleSelect = (path: string) => {
+    setSelectedPath(path);
+  };
+
+  // Confirm selection
+  const handleConfirm = () => {
+    if (selectedPath) {
+      // Convert absolute path back to ~ format if it's in home directory
+      let finalPath = selectedPath;
+      if (homePath && selectedPath.startsWith(homePath)) {
+        finalPath = "~" + selectedPath.slice(homePath.length);
+      }
+      onSelect(finalPath);
+      onClose();
+    }
+  };
+
+  // Select current directory
+  const selectCurrentDirectory = () => {
+    // Convert to ~ format if in home directory
+    let finalPath = currentPath;
+    if (homePath && currentPath.startsWith(homePath)) {
+      finalPath = "~" + currentPath.slice(homePath.length);
+    }
+    onSelect(finalPath);
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className="flex max-h-[80vh] max-w-md flex-col">
+        <DialogHeader>
+          <DialogTitle>Select Directory</DialogTitle>
+        </DialogHeader>
+
+        {/* Navigation bar */}
+        <div className="flex items-center gap-2 border-b pb-2">
+          <Button variant="ghost" size="icon-sm" onClick={goRoot} title="Root">
+            <HardDrive className="h-4 w-4" />
+          </Button>
+          <Button variant="ghost" size="icon-sm" onClick={goHome} title="Home">
+            <Home className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={goUp}
+            disabled={currentPath === "/"}
+            title="Go up"
+          >
+            <ChevronUp className="h-4 w-4" />
+          </Button>
+          <span className="text-muted-foreground flex-1 truncate font-mono text-sm">
+            {currentPath}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={selectCurrentDirectory}
+            title="Select this directory"
+          >
+            <FolderInput className="mr-1 h-4 w-4" />
+            Use This
+          </Button>
+        </div>
+
+        {/* Directory listing */}
+        <div className="max-h-[400px] min-h-[200px] flex-1 overflow-y-auto">
+          {loading && directories.length === 0 ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
+            </div>
+          ) : error ? (
+            <div className="py-8 text-center text-sm text-red-500">{error}</div>
+          ) : directories.length === 0 ? (
+            <div className="text-muted-foreground py-8 text-center text-sm">
+              No subdirectories
+            </div>
+          ) : (
+            <DirectoryTree
+              nodes={directories}
+              expanded={expanded}
+              selectedPath={selectedPath}
+              onToggle={toggleExpand}
+              onSelect={handleSelect}
+              onDoubleClick={(path) => {
+                setCurrentPath(path);
+                setExpanded(new Set());
+              }}
+            />
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleConfirm} disabled={!selectedPath}>
+            Select
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface DirectoryTreeProps {
+  nodes: FileNode[];
+  expanded: Set<string>;
+  selectedPath: string | null;
+  onToggle: (node: FileNode) => void;
+  onSelect: (path: string) => void;
+  onDoubleClick: (path: string) => void;
+  depth?: number;
+}
+
+function DirectoryTree({
+  nodes,
+  expanded,
+  selectedPath,
+  onToggle,
+  onSelect,
+  onDoubleClick,
+  depth = 0,
+}: DirectoryTreeProps) {
+  return (
+    <div>
+      {nodes.map((node) => {
+        const isExpanded = expanded.has(node.path);
+        const isSelected = selectedPath === node.path;
+
+        return (
+          <div key={node.path}>
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={() => onSelect(node.path)}
+              onDoubleClick={() => onDoubleClick(node.path)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onSelect(node.path);
+                }
+              }}
+              className={cn(
+                "flex w-full cursor-pointer items-center gap-2 px-2 py-2 text-left transition-colors",
+                "min-h-[40px] text-sm md:min-h-[32px]",
+                isSelected ? "bg-primary/20 text-primary" : "hover:bg-accent"
+              )}
+              style={{ paddingLeft: `${depth * 16 + 8}px` }}
+            >
+              {/* Expand/collapse */}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onToggle(node);
+                }}
+                className="hover:bg-muted flex h-5 w-5 flex-shrink-0 items-center justify-center rounded"
+              >
+                {isExpanded ? (
+                  <ChevronDown className="text-muted-foreground h-4 w-4" />
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </button>
+
+              {/* Icon */}
+              {isExpanded ? (
+                <FolderOpen className="h-4 w-4 flex-shrink-0 text-blue-400" />
+              ) : (
+                <Folder className="h-4 w-4 flex-shrink-0 text-blue-400" />
+              )}
+
+              {/* Name */}
+              <span className="flex-1 truncate font-medium">{node.name}</span>
+            </div>
+
+            {/* Children */}
+            {isExpanded && node.children && node.children.length > 0 && (
+              <DirectoryTree
+                nodes={node.children}
+                expanded={expanded}
+                selectedPath={selectedPath}
+                onToggle={onToggle}
+                onSelect={onSelect}
+                onDoubleClick={onDoubleClick}
+                depth={depth + 1}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// Helper to update node children in tree
+function updateNodeChildren(
+  nodes: FileNode[],
+  targetPath: string,
+  children: FileNode[]
+): FileNode[] {
+  return nodes.map((node) => {
+    if (node.path === targetPath) {
+      return { ...node, children };
+    }
+    if (node.children) {
+      return {
+        ...node,
+        children: updateNodeChildren(node.children, targetPath, children),
+      };
+    }
+    return node;
+  });
+}

package/components/FileExplorer/FileEditor.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import CodeMirror from "@uiw/react-codemirror";
+import { EditorView, keymap } from "@codemirror/view";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags as t } from "@lezer/highlight";
+import { javascript } from "@codemirror/lang-javascript";
+import { python } from "@codemirror/lang-python";
+import { json } from "@codemirror/lang-json";
+import { css } from "@codemirror/lang-css";
+import { html } from "@codemirror/lang-html";
+import { markdown } from "@codemirror/lang-markdown";
+import type { Extension } from "@codemirror/state";
+import { FileCode, Eye, Code2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { MarkdownRenderer } from "./MarkdownRenderer";
+import { HtmlRenderer } from "./HtmlRenderer";
+
+interface FileEditorProps {
+  content: string;
+  language: string;
+  isBinary: boolean;
+  readOnly?: boolean;
+  onChange: (content: string) => void;
+  onSave?: () => void;
+}
+
+// Theme that uses CSS variables from the app
+const editorTheme = EditorView.theme({
+  "&": {
+    fontSize: "13px",
+    height: "100%",
+    backgroundColor: "hsl(var(--background))",
+    color: "hsl(var(--foreground))",
+  },
+  ".cm-content": {
+    fontFamily: "var(--font-geist-mono), ui-monospace, monospace",
+    padding: "8px 0",
+    caretColor: "hsl(var(--primary))",
+  },
+  ".cm-gutters": {
+    backgroundColor: "hsl(var(--background))",
+    borderRight: "none",
+    color: "hsl(var(--muted-foreground))",
+  },
+  ".cm-lineNumbers .cm-gutterElement": {
+    padding: "0 8px 0 16px",
+  },
+  ".cm-activeLineGutter": {
+    backgroundColor: "hsl(var(--accent))",
+  },
+  ".cm-activeLine": {
+    backgroundColor: "hsl(var(--accent) / 0.5)",
+  },
+  "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+    {
+      backgroundColor: "hsl(var(--primary) / 0.3) !important",
+    },
+  "&.cm-focused .cm-cursor": {
+    borderLeftColor: "hsl(var(--primary))",
+    borderLeftWidth: "2px",
+  },
+  ".cm-scroller": {
+    overflow: "auto",
+  },
+  ".cm-foldGutter": {
+    color: "hsl(var(--muted-foreground))",
+  },
+  ".cm-tooltip": {
+    backgroundColor: "hsl(var(--popover))",
+    boxShadow: "0 4px 12px hsl(var(--foreground) / 0.15)",
+    color: "hsl(var(--popover-foreground))",
+  },
+  ".cm-tooltip-autocomplete": {
+    "& > ul > li[aria-selected]": {
+      backgroundColor: "hsl(var(--accent))",
+      color: "hsl(var(--accent-foreground))",
+    },
+  },
+  ".cm-panels": {
+    backgroundColor: "hsl(var(--muted))",
+  },
+  ".cm-searchMatch": {
+    backgroundColor: "hsl(var(--primary) / 0.2)",
+    outline: "1px solid hsl(var(--primary) / 0.4)",
+  },
+  ".cm-searchMatch.cm-searchMatch-selected": {
+    backgroundColor: "hsl(var(--primary) / 0.4)",
+  },
+});
+
+// Syntax highlighting that adapts to both light and dark themes
+const highlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: "hsl(var(--primary))" },
+  {
+    tag: [t.name, t.deleted, t.character, t.macroName],
+    color: "hsl(var(--foreground))",
+  },
+  { tag: [t.propertyName], color: "#7dd3fc" }, // sky-300
+  { tag: [t.function(t.variableName), t.labelName], color: "#c4b5fd" }, // violet-300
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: "#fcd34d" }, // amber-300
+  { tag: [t.definition(t.name), t.separator], color: "hsl(var(--foreground))" },
+  {
+    tag: [
+      t.typeName,
+      t.className,
+      t.number,
+      t.changed,
+      t.annotation,
+      t.modifier,
+      t.self,
+      t.namespace,
+    ],
+    color: "#f9a8d4", // pink-300
+  },
+  {
+    tag: [
+      t.operator,
+      t.operatorKeyword,
+      t.url,
+      t.escape,
+      t.regexp,
+      t.special(t.string),
+    ],
+    color: "#67e8f9", // cyan-300
+  },
+  {
+    tag: [t.meta, t.comment],
+    color: "hsl(var(--muted-foreground))",
+    fontStyle: "italic",
+  },
+  { tag: t.strong, fontWeight: "bold" },
+  { tag: t.emphasis, fontStyle: "italic" },
+  { tag: t.strikethrough, textDecoration: "line-through" },
+  { tag: t.link, color: "#67e8f9", textDecoration: "underline" },
+  { tag: t.heading, fontWeight: "bold", color: "hsl(var(--primary))" },
+  { tag: [t.atom, t.bool], color: "#f9a8d4" }, // pink-300
+  { tag: [t.processingInstruction, t.string, t.inserted], color: "#86efac" }, // green-300
+  { tag: t.invalid, color: "#fca5a5" }, // red-300
+]);
+
+function getLanguageExtension(language: string): Extension | null {
+  switch (language) {
+    case "javascript":
+      return javascript({ jsx: true });
+    case "typescript":
+      return javascript({ jsx: true, typescript: true });
+    case "python":
+      return python();
+    case "json":
+      return json();
+    case "css":
+    case "scss":
+      return css();
+    case "html":
+    case "xml":
+      return html();
+    case "markdown":
+      return markdown();
+    default:
+      return null;
+  }
+}
+
+export function FileEditor({
+  content,
+  language,
+  isBinary,
+  readOnly = false,
+  onChange,
+  onSave,
+}: FileEditorProps) {
+  const [extensions, setExtensions] = useState<Extension[]>([]);
+  const [previewMode, setPreviewMode] = useState(false);
+  const isMarkdown = language === "markdown";
+  const isHtml = language === "html";
+  const hasPreview = isMarkdown || isHtml;
+
+  useEffect(() => {
+    const langExt = getLanguageExtension(language);
+    const baseExtensions: Extension[] = [
+      editorTheme,
+      syntaxHighlighting(highlightStyle),
+      EditorView.lineWrapping,
+    ];
+
+    if (onSave) {
+      baseExtensions.push(
+        keymap.of([
+          {
+            key: "Mod-s",
+            run: () => {
+              onSave();
+              return true;
+            },
+          },
+        ])
+      );
+    }
+
+    if (langExt) {
+      baseExtensions.push(langExt);
+    }
+
+    setExtensions(baseExtensions);
+  }, [language, onSave]);
+
+  useEffect(() => {
+    if (!hasPreview) setPreviewMode(false);
+  }, [hasPreview]);
+
+  if (isBinary) {
+    return (
+      <div className="text-muted-foreground flex h-full flex-col items-center justify-center p-8">
+        <FileCode className="mb-4 h-12 w-12 opacity-50" />
+        <p className="text-center text-sm">Binary file cannot be displayed</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-background flex h-full w-full flex-col overflow-hidden">
+      {hasPreview && (
+        <div className="bg-muted/30 flex items-center justify-end px-2 py-1 shadow-sm">
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={() => setPreviewMode(!previewMode)}
+            title={previewMode ? "Show source" : "Preview"}
+          >
+            {previewMode ? (
+              <Code2 className="h-4 w-4" />
+            ) : (
+              <Eye className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+      )}
+
+      <div className="min-h-0 flex-1 overflow-hidden">
+        {previewMode && isMarkdown ? (
+          <MarkdownRenderer content={content} />
+        ) : previewMode && isHtml ? (
+          <HtmlRenderer content={content} />
+        ) : (
+          <CodeMirror
+            value={content}
+            height="100%"
+            theme="none"
+            extensions={extensions}
+            onChange={onChange}
+            readOnly={readOnly}
+            basicSetup={{
+              lineNumbers: true,
+              highlightActiveLineGutter: true,
+              highlightActiveLine: true,
+              foldGutter: true,
+              dropCursor: true,
+              allowMultipleSelections: true,
+              indentOnInput: true,
+              bracketMatching: true,
+              closeBrackets: true,
+              autocompletion: true,
+              rectangularSelection: true,
+              crosshairCursor: false,
+              highlightSelectionMatches: true,
+              searchKeymap: true,
+            }}
+            className="h-full [&_.cm-editor]:h-full [&_.cm-scroller]:!overflow-auto"
+          />
+        )}
+      </div>
+    </div>
+  );
+}