@atercates/claude-deck 0.2.1

package/components/FileExplorer/FileTabs.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useRef, useEffect } from "react";
+import { X, File } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { OpenFile } from "@/hooks/useFileEditor";
+
+interface FileTabsProps {
+  files: OpenFile[];
+  activeFilePath: string | null;
+  onSelect: (path: string) => void;
+  onClose: (path: string) => void;
+  isDirty: (path: string) => boolean;
+}
+
+export function FileTabs({
+  files,
+  activeFilePath,
+  onSelect,
+  onClose,
+  isDirty,
+}: FileTabsProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const activeTabRef = useRef<HTMLDivElement>(null);
+
+  // Scroll active tab into view
+  useEffect(() => {
+    if (activeTabRef.current && scrollRef.current) {
+      activeTabRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+    }
+  }, [activeFilePath]);
+
+  if (files.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={scrollRef}
+      className="bg-muted/30 scrollbar-none flex items-center gap-0.5 overflow-x-auto px-1"
+    >
+      {files.map((file) => {
+        const isActive = file.path === activeFilePath;
+        const dirty = isDirty(file.path);
+        const fileName = file.path.split("/").pop() || file.path;
+        const ext = fileName.split(".").pop()?.toLowerCase() || "";
+
+        return (
+          <div
+            key={file.path}
+            ref={isActive ? activeTabRef : null}
+            role="button"
+            tabIndex={0}
+            onClick={() => onSelect(file.path)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onSelect(file.path);
+              }
+            }}
+            className={cn(
+              "flex cursor-pointer items-center gap-1.5 px-3 py-2 text-sm whitespace-nowrap transition-colors",
+              "min-h-[40px] md:min-h-[36px]",
+              "hover:bg-accent/50",
+              isActive
+                ? "bg-background text-foreground"
+                : "text-muted-foreground"
+            )}
+          >
+            <FileIcon extension={ext} />
+            <span className="max-w-[120px] truncate">{fileName}</span>
+            {dirty && (
+              <span className="bg-primary h-2 w-2 flex-shrink-0 rounded-full" />
+            )}
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onClose(file.path);
+              }}
+              className={cn(
+                "hover:bg-accent ml-1 flex-shrink-0 rounded p-0.5",
+                "opacity-0 group-hover:opacity-100",
+                isActive && "opacity-100"
+              )}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function FileIcon({ extension }: { extension: string }) {
+  const colorMap: Record<string, string> = {
+    js: "text-yellow-400",
+    jsx: "text-yellow-400",
+    ts: "text-blue-400",
+    tsx: "text-blue-400",
+    css: "text-pink-400",
+    scss: "text-pink-400",
+    html: "text-orange-400",
+    xml: "text-orange-400",
+    json: "text-green-400",
+    yaml: "text-purple-400",
+    yml: "text-purple-400",
+    md: "text-blue-300",
+    py: "text-green-500",
+  };
+
+  const color = colorMap[extension] || "text-muted-foreground";
+  return <File className={cn("h-3.5 w-3.5 flex-shrink-0", color)} />;
+}

package/components/FileExplorer/FileTree.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import {
+  ChevronRight,
+  ChevronDown,
+  File,
+  Folder,
+  FolderOpen,
+  Loader2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { FileNode } from "@/lib/file-utils";
+
+interface FileTreeProps {
+  nodes: FileNode[];
+  basePath: string;
+  onFileClick: (path: string) => void;
+  depth?: number;
+}
+
+/**
+ * Recursive file tree component
+ * Mobile-optimized with larger touch targets
+ * Lazily loads directory contents when expanded
+ */
+export function FileTree({
+  nodes,
+  basePath,
+  onFileClick,
+  depth = 0,
+}: FileTreeProps) {
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const [loadedChildren, setLoadedChildren] = useState<Map<string, FileNode[]>>(
+    new Map()
+  );
+  const [loadingDirs, setLoadingDirs] = useState<Set<string>>(new Set());
+
+  const fetchChildren = useCallback(
+    async (dirPath: string) => {
+      if (loadedChildren.has(dirPath)) return;
+
+      setLoadingDirs((prev) => new Set(prev).add(dirPath));
+      try {
+        const res = await fetch(
+          `/api/files?path=${encodeURIComponent(dirPath)}`
+        );
+        const data = await res.json();
+        if (data.files) {
+          setLoadedChildren((prev) => new Map(prev).set(dirPath, data.files));
+        }
+      } catch (err) {
+        console.error("Failed to load directory:", err);
+      } finally {
+        setLoadingDirs((prev) => {
+          const next = new Set(prev);
+          next.delete(dirPath);
+          return next;
+        });
+      }
+    },
+    [loadedChildren]
+  );
+
+  const toggleExpand = useCallback(
+    async (path: string) => {
+      const isCurrentlyExpanded = expanded.has(path);
+
+      setExpanded((prev) => {
+        const next = new Set(prev);
+        if (next.has(path)) {
+          next.delete(path);
+        } else {
+          next.add(path);
+        }
+        return next;
+      });
+
+      // Fetch children if expanding and not already loaded
+      if (!isCurrentlyExpanded && !loadedChildren.has(path)) {
+        await fetchChildren(path);
+      }
+    },
+    [expanded, loadedChildren, fetchChildren]
+  );
+
+  return (
+    <div className="w-full">
+      {nodes.map((node) => {
+        const isExpanded = expanded.has(node.path);
+        const isDirectory = node.type === "directory";
+        const isLoading = loadingDirs.has(node.path);
+        const children = loadedChildren.get(node.path) || node.children;
+
+        return (
+          <div key={node.path}>
+            {/* File/Directory item */}
+            <button
+              onClick={() => {
+                if (isDirectory) {
+                  toggleExpand(node.path);
+                } else {
+                  onFileClick(node.path);
+                }
+              }}
+              className={cn(
+                "hover:bg-accent flex w-full items-center gap-2 px-2 py-2 text-left transition-colors",
+                "min-h-[40px] md:min-h-[32px]", // Touch target
+                "text-sm"
+              )}
+              style={{ paddingLeft: `${depth * 12 + 8}px` }}
+            >
+              {/* Expand/collapse icon */}
+              {isDirectory && (
+                <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
+                  {isLoading ? (
+                    <Loader2 className="text-muted-foreground h-3 w-3 animate-spin" />
+                  ) : isExpanded ? (
+                    <ChevronDown className="text-muted-foreground h-4 w-4" />
+                  ) : (
+                    <ChevronRight className="text-muted-foreground h-4 w-4" />
+                  )}
+                </span>
+              )}
+
+              {/* Icon */}
+              <span className="flex-shrink-0">
+                {isDirectory ? (
+                  isExpanded ? (
+                    <FolderOpen className="h-4 w-4 text-blue-400" />
+                  ) : (
+                    <Folder className="h-4 w-4 text-blue-400" />
+                  )
+                ) : (
+                  <FileIcon extension={node.extension || ""} />
+                )}
+              </span>
+
+              {/* Name */}
+              <span
+                className={cn(
+                  "flex-1 truncate",
+                  isDirectory ? "font-medium" : "text-muted-foreground"
+                )}
+              >
+                {node.name}
+              </span>
+
+              {/* Size (files only, on desktop) */}
+              {!isDirectory && node.size !== undefined && (
+                <span className="text-muted-foreground hidden flex-shrink-0 text-xs md:block">
+                  {formatFileSize(node.size)}
+                </span>
+              )}
+            </button>
+
+            {/* Children (if expanded) */}
+            {isDirectory && isExpanded && children && children.length > 0 && (
+              <FileTree
+                nodes={children}
+                basePath={basePath}
+                onFileClick={onFileClick}
+                depth={depth + 1}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * File icon based on extension
+ */
+function FileIcon({ extension }: { extension: string }) {
+  const ext = extension.toLowerCase();
+
+  // Color coding by file type
+  const colorMap: Record<string, string> = {
+    // JavaScript/TypeScript
+    js: "text-yellow-400",
+    jsx: "text-yellow-400",
+    ts: "text-blue-400",
+    tsx: "text-blue-400",
+    // Styles
+    css: "text-pink-400",
+    scss: "text-pink-400",
+    // Markup
+    html: "text-orange-400",
+    xml: "text-orange-400",
+    // Data
+    json: "text-green-400",
+    yaml: "text-purple-400",
+    yml: "text-purple-400",
+    // Config
+    md: "text-blue-300",
+    toml: "text-gray-400",
+    env: "text-yellow-300",
+  };
+
+  const color = colorMap[ext] || "text-muted-foreground";
+
+  return <File className={cn("h-4 w-4", color)} />;
+}
+
+/**
+ * Format file size for display
+ */
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)}MB`;
+}

package/components/FileExplorer/HtmlRenderer.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+interface HtmlRendererProps {
+  content: string;
+}
+
+export function HtmlRenderer({ content }: HtmlRendererProps) {
+  return (
+    <iframe
+      srcDoc={content}
+      sandbox=""
+      className="h-full w-full border-0 bg-white"
+      title="HTML Preview"
+    />
+  );
+}

package/components/FileExplorer/MarkdownRenderer.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+interface MarkdownRendererProps {
+  content: string;
+}
+
+export function MarkdownRenderer({ content }: MarkdownRendererProps) {
+  return (
+    <div className="h-full overflow-y-auto px-6 py-4">
+      <article className="prose prose-sm dark:prose-invert max-w-none">
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+      </article>
+    </div>
+  );
+}