trident-git 0.2.0

package/src/components/home-settings-modal.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useTheme } from 'next-themes';
+import { FileSystemBrowser } from './fs-browser';
+import { useEscapeDismiss } from '@/hooks/use-escape-dismiss';
+
+interface Settings {
+  defaultRootFolder: string | null;
+  resolvedDefaultFolder: string;
+}
+
+interface HomeSettingsModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSettingsChange?: (settings: Settings) => void;
+}
+
+export function HomeSettingsModal({ open, onOpenChange, onSettingsChange }: HomeSettingsModalProps) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const [settings, setSettings] = useState<Settings | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [folderBrowserOpen, setFolderBrowserOpen] = useState(false);
+  const [localDefaultFolder, setLocalDefaultFolder] = useState<string>('');
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const loadSettings = async () => {
+    setIsLoading(true);
+    try {
+      const res = await fetch('/api/settings');
+      if (res.ok) {
+        const data = await res.json();
+        setSettings(data);
+        setLocalDefaultFolder(data.defaultRootFolder || '');
+      }
+    } catch (e) {
+      console.error('Failed to load settings:', e);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      loadSettings();
+    }
+  }, [open]);
+
+  useEscapeDismiss(open, () => onOpenChange(false));
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const res = await fetch('/api/settings', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          defaultRootFolder: localDefaultFolder.trim() || null,
+        }),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setSettings(data);
+        onSettingsChange?.(data);
+        onOpenChange(false);
+      }
+    } catch (e) {
+      console.error('Failed to save settings:', e);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleFolderSelect = (path: string) => {
+    setLocalDefaultFolder(path);
+  };
+
+  const handleReset = () => {
+    setLocalDefaultFolder('');
+  };
+
+  if (!open) return null;
+
+  return (
+    <>
+      <dialog className="modal modal-open">
+        <div className="modal-box">
+          <h3 className="font-bold text-lg">Settings</h3>
+          <p className="py-4 opacity-70">Configure your application preferences.</p>
+
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <span className="loading loading-spinner loading-md"></span>
+            </div>
+          ) : (
+            <div className="space-y-6">
+              {/* Theme Selection */}
+              <div className="form-control w-full">
+                <label className="label">
+                  <span className="label-text">Color Theme</span>
+                </label>
+                <div className="text-xs opacity-70 mb-2">
+                  Choose your preferred color theme for the application.
+                </div>
+                <div className="flex gap-2">
+                  <button
+                    className={`btn flex-1 ${theme === 'system' ? 'btn-primary' : ''}`}
+                    onClick={() => setTheme('system')}
+                    disabled={!mounted}
+                  >
+                    <i className="iconoir-computer text-[20px] mr-2" aria-hidden="true" />
+                    System
+                  </button>
+                  <button
+                    className={`btn flex-1 ${theme === 'light' ? 'btn-primary' : ''}`}
+                    onClick={() => setTheme('light')}
+                    disabled={!mounted}
+                  >
+                    <i className="iconoir-sun-light text-[20px] mr-2" aria-hidden="true" />
+                    Light
+                  </button>
+                  <button
+                    className={`btn flex-1 ${theme === 'dark' ? 'btn-primary' : ''}`}
+                    onClick={() => setTheme('dark')}
+                    disabled={!mounted}
+                  >
+                    <i className="iconoir-moon-sat text-[20px] mr-2" aria-hidden="true" />
+                    Dark
+                  </button>
+                </div>
+              </div>
+
+              {/* Default Root Folder */}
+              <div className="form-control w-full">
+                <label className="label">
+                  <span className="label-text">Default Root Folder</span>
+                </label>
+                <div className="text-xs opacity-70 mb-2">
+                  The starting folder when browsing for new repositories. Leave empty to use your home folder.
+                </div>
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    placeholder={settings?.resolvedDefaultFolder || 'User home folder'}
+                    className="input input-bordered w-full font-mono text-sm"
+                    value={localDefaultFolder}
+                    onChange={(e) => setLocalDefaultFolder(e.target.value)}
+                    autoFocus
+                  />
+                  <button className="btn btn-square" onClick={() => setFolderBrowserOpen(true)} title="Browse folders">
+                    <i className="iconoir-folder text-[20px]" aria-hidden="true" />
+                  </button>
+                </div>
+                {localDefaultFolder && (
+                  <div className="mt-2">
+                    <button type="button" className="link link-hover text-primary text-xs" onClick={handleReset}>
+                      Reset to default (home folder)
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          <div className="modal-action">
+             <button className="btn" onClick={() => onOpenChange(false)}>Close</button>
+             <button className="btn btn-primary" onClick={handleSave} disabled={isSaving || isLoading}>
+               {isSaving && <span className="loading loading-spinner loading-xs"></span>}
+               Save Folder Settings
+             </button>
+          </div>
+        </div>
+        <form method="dialog" className="modal-backdrop">
+            <button onClick={() => onOpenChange(false)}>close</button>
+        </form>
+      </dialog>
+
+      <FileSystemBrowser
+        open={folderBrowserOpen}
+        onOpenChange={setFolderBrowserOpen}
+        onSelect={handleFolderSelect}
+        initialPath={localDefaultFolder || settings?.resolvedDefaultFolder}
+        title="Select default root folder"
+      />
+    </>
+  );
+}

package/src/components/layout/sidebar.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import { cn, getRepoFolderName, getRepositoryDisplayName } from '@/lib/utils';
+import Link from 'next/link';
+import { HomeSettingsModal } from '@/components/home-settings-modal';
+import { usePathname, useSearchParams, useRouter } from 'next/navigation';
+import { useState, useEffect, useCallback } from 'react';
+import { useGitStatus, useRepository, useUpdateSettings } from '@/hooks/use-git';
+
+const SIDEBAR_COLLAPSED_KEY = 'workspace-sidebar-collapsed';
+const SIDEBAR_WIDTH_EXPANDED = 256; // w-64
+const SIDEBAR_WIDTH_COLLAPSED = 64; // w-16
+
+type SidebarProps = React.HTMLAttributes<HTMLDivElement>;
+type SidebarPropsWithInitialState = SidebarProps & {
+  initialCollapsed?: boolean;
+};
+
+export function Sidebar({ className, initialCollapsed = false }: SidebarPropsWithInitialState) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const repoPath = searchParams.get('path') || '';
+  const repository = useRepository(repoPath || null);
+  const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
+  const [enableTransition, setEnableTransition] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+
+  const updateSettings = useUpdateSettings();
+  
+  // Fetch git status to get uncommitted changes count
+  const { data: gitStatus } = useGitStatus(repoPath || null);
+  const changesCount = gitStatus?.files?.length ?? 0;
+  const repoDisplayName = repository
+    ? getRepositoryDisplayName(repository)
+    : (repoPath ? getRepoFolderName(repoPath) : '');
+
+  // Enable transitions only after initial paint to avoid first-load animation.
+  useEffect(() => {
+    let frame2: number | null = null;
+    const frame1 = requestAnimationFrame(() => {
+      frame2 = requestAnimationFrame(() => {
+        setEnableTransition(true);
+      });
+    });
+
+    return () => {
+      cancelAnimationFrame(frame1);
+      if (frame2 !== null) {
+        cancelAnimationFrame(frame2);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(isCollapsed));
+  }, [isCollapsed]);
+
+  // Save collapsed state to global settings and localStorage
+  const toggleCollapsed = useCallback(() => {
+    const newValue = !isCollapsed;
+    setIsCollapsed(newValue);
+    
+    updateSettings.mutate({ sidebarCollapsed: newValue });
+  }, [isCollapsed, updateSettings]);
+
+  const getHref = (subPath: string = '') => {
+    const p = new URLSearchParams(searchParams.toString());
+    // Clean up tab if it exists from previous version, though we are moving away from it.
+    p.delete('tab');
+    return `/workspace${subPath}?${p.toString()}`;
+  };
+
+  const isActive = (view: 'status' | 'history' | 'custom-scripts' | 'settings' | 'stashes') => {
+    if (view === 'status') return pathname === '/workspace/changes';
+    if (view === 'history') return pathname === '/workspace' || pathname.startsWith('/workspace/history');
+    if (view === 'custom-scripts') return pathname.startsWith('/workspace/custom-scripts');
+    if (view === 'settings') return pathname.startsWith('/workspace/settings');
+    if (view === 'stashes') return pathname.startsWith('/workspace/stashes');
+    return false;
+  };
+
+  // Calculate width
+  const sidebarWidth = isCollapsed ? SIDEBAR_WIDTH_COLLAPSED : SIDEBAR_WIDTH_EXPANDED;
+
+  return (
+    <div 
+      style={{ 
+        width: sidebarWidth
+      }}
+      className={cn(
+        "pb-12 border-r border-base-300 min-h-screen bg-base-100 relative",
+        enableTransition && "transition-all duration-300",
+        className
+      )}
+    >
+      <div className="space-y-4 py-4">
+        <div className={cn("px-3 py-2", isCollapsed && "px-2")}>
+          <div className={cn("mb-6 flex items-center", isCollapsed ? "flex-col gap-2 px-0" : "justify-between px-4")}>
+            {!isCollapsed && (
+              <a
+                href="/"
+                onClick={(e) => {
+                  if (e.metaKey || e.ctrlKey) {
+                    // Cmd/Ctrl+click: open in new tab (default behavior)
+                    return;
+                  }
+                  e.preventDefault();
+                  router.push('/');
+                }}
+                className="flex items-center gap-2 hover:opacity-80 transition-opacity cursor-pointer text-base-content overflow-hidden"
+                title={repoDisplayName ? `${repoDisplayName} - Go to Home` : "Go to Home"}
+              >
+                <img src="/icon.png" alt="Trident" className="h-5 w-5 flex-shrink-0" />
+                <h2 className="text-lg font-bold tracking-tight truncate">
+                  {repoDisplayName || "Trident"}
+                </h2>
+              </a>
+            )}
+            {isCollapsed && (
+              <a
+                href="/"
+                onClick={(e) => {
+                  if (e.metaKey || e.ctrlKey) {
+                    // Cmd/Ctrl+click: open in new tab (default behavior)
+                    return;
+                  }
+                  e.preventDefault();
+                  router.push('/');
+                }}
+                className="flex items-center justify-center h-8 w-8 hover:opacity-80 transition-opacity cursor-pointer"
+                title={repoDisplayName ? `${repoDisplayName} - Go to Home` : "Go to Home"}
+              >
+                <img src="/icon.png" alt={repoDisplayName || "Trident"} className="h-5 w-5" />
+              </a>
+            )}
+            <div className={cn("flex items-center gap-1", isCollapsed && "flex-col")}>
+              <button
+                className="btn btn-ghost btn-sm btn-square"
+                onClick={toggleCollapsed} 
+                title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"} 
+              >
+                {isCollapsed ? <i className="iconoir-fast-arrow-right text-[16px]" aria-hidden="true" /> : <i className="iconoir-fast-arrow-left text-[16px]" aria-hidden="true" />}
+              </button>
+            </div>
+          </div>
+
+          {!isCollapsed && repoPath && (
+            <div className="px-4 mb-6">
+              <p className="text-[10px] font-mono opacity-60 break-all border border-base-300 rounded p-2 bg-base-200/30" title={repoPath}>
+                {repoPath}
+              </p>
+            </div>
+          )}
+
+          <div className="space-y-1">
+            <Link
+              href={getHref()}
+              className={cn(
+                "btn btn-ghost w-full justify-start font-normal",
+                isCollapsed ? "px-0 justify-center" : "",
+                isActive('history') && "btn-active font-medium"
+              )}
+              title={isCollapsed ? "History" : undefined}
+            >
+              <i className={cn("iconoir-git-fork text-[20px]", !isCollapsed && "mr-2")} aria-hidden="true" />
+              {!isCollapsed && "History"}
+            </Link>
+
+            <Link
+              href={getHref('/changes')}
+              className={cn(
+                "btn btn-ghost w-full justify-start font-normal",
+                isCollapsed ? "px-0 justify-center" : "",
+                isActive('status') && "btn-active font-medium"
+              )}
+              title={isCollapsed ? `Changes${changesCount > 0 ? ` (${changesCount})` : ''}` : undefined}
+            >
+              <div className={cn("relative flex items-center", !isCollapsed && "mr-2")}>
+                  <i className="iconoir-clock text-[20px]" aria-hidden="true" />
+                  {isCollapsed && changesCount > 0 && (
+                    <span className="absolute -top-1 -right-1 badge badge-primary badge-xs scale-75">
+                      {changesCount > 99 ? '99+' : changesCount}
+                    </span>
+                  )}
+              </div>
+              {!isCollapsed && (
+                  <span className="flex-1 flex justify-between items-center">
+                      Changes
+                      {changesCount > 0 && <span className="badge badge-sm">{changesCount}</span>}
+                  </span>
+              )}
+            </Link>
+
+            <Link
+              href={getHref('/stashes')}
+              className={cn(
+                "btn btn-ghost w-full justify-start font-normal",
+                isCollapsed ? "px-0 justify-center" : "",
+                isActive('stashes') && "btn-active font-medium"
+              )}
+              title={isCollapsed ? "Stashes" : undefined}
+            >
+              <i className={cn("iconoir-download-square text-[20px]", !isCollapsed && "mr-2")} aria-hidden="true" />
+              {!isCollapsed && "Stashes"}
+            </Link>
+
+            <Link
+              href={getHref('/custom-scripts')}
+              className={cn(
+                "btn btn-ghost w-full justify-start font-normal",
+                isCollapsed ? "px-0 justify-center" : "",
+                isActive('custom-scripts') && "btn-active font-medium"
+              )}
+              title={isCollapsed ? "Custom scripts" : undefined}
+            >
+              <i className={cn("iconoir-terminal text-[20px]", !isCollapsed && "mr-2")} aria-hidden="true" />
+              {!isCollapsed && "Custom scripts"}
+            </Link>
+
+            <Link
+              href={getHref('/settings')}
+              className={cn(
+                "btn btn-ghost w-full justify-start font-normal",
+                isCollapsed ? "px-0 justify-center" : "",
+                isActive('settings') && "btn-active font-medium"
+              )}
+              title={isCollapsed ? "Settings" : undefined}
+            >
+              <i className={cn("iconoir-settings text-[20px]", !isCollapsed && "mr-2")} aria-hidden="true" />
+              {!isCollapsed && "Settings"}
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <div className={cn("absolute bottom-4 left-0 w-full", isCollapsed ? "px-2" : "px-6")}>
+        <div className={cn("flex items-center", isCollapsed ? "justify-center" : "gap-2")}>
+          <button
+            className="btn btn-ghost btn-sm btn-square"
+            onClick={() => setSettingsOpen(true)}
+            title={isCollapsed ? "Preferences" : undefined}
+          >
+            <i className="iconoir-ios-settings text-[20px]" aria-hidden="true" />
+          </button>
+          {!isCollapsed && <span className="text-xs opacity-70">Preferences</span>}
+        </div>
+      </div>
+
+      <HomeSettingsModal
+        open={settingsOpen}
+        onOpenChange={setSettingsOpen}
+      />
+    </div>
+  );
+}

package/src/components/repo-list.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useRepositories, useAddRepository, useDeleteRepository } from '@/hooks/use-git';
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { FileSystemBrowser } from './fs-browser';
+import { toast } from '@/hooks/use-toast';
+import { HomeSettingsModal } from './home-settings-modal';
+import { getRepositoryDisplayName } from '@/lib/utils';
+import { useEscapeDismiss } from '@/hooks/use-escape-dismiss';
+
+export function RepoList() {
+    const { data: repos, isLoading } = useRepositories();
+    const addRepo = useAddRepository();
+    const deleteRepo = useDeleteRepository();
+    const [browserOpen, setBrowserOpen] = useState(false);
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [repoToDelete, setRepoToDelete] = useState<{ path: string; displayName: string } | null>(null);
+    const [settingsOpen, setSettingsOpen] = useState(false);
+    const [defaultRootFolder, setDefaultRootFolder] = useState<string | undefined>(undefined);
+    const router = useRouter();
+    useEscapeDismiss(deleteDialogOpen, () => setDeleteDialogOpen(false));
+
+    // Load settings on mount
+    useEffect(() => {
+        const loadSettings = async () => {
+            try {
+                const res = await fetch('/api/settings');
+                if (res.ok) {
+                    const data = await res.json();
+                    setDefaultRootFolder(data.resolvedDefaultFolder);
+                }
+            } catch (e) {
+                console.error('Failed to load settings:', e);
+            }
+        };
+        loadSettings();
+    }, []);
+
+    const handleAdd = async (path: string) => {
+        if (!path) return;
+        try {
+            await addRepo.mutateAsync({ path });
+            // Navigate to workspace page after successfully adding repository
+            router.push(`/workspace?path=${encodeURIComponent(path)}`);
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            
+            if (errorMessage.includes('already exists')) {
+                toast({
+                    type: 'warning',
+                    title: 'Repository already added',
+                    description: 'This repository is already in your list. Select it from the list to open it.',
+                });
+            } else {
+                toast({
+                    type: 'error',
+                    title: 'Failed to add repository',
+                    description: errorMessage,
+                });
+            }
+        }
+    };
+
+    const handleDeleteClick = (e: React.MouseEvent, repo: { path: string; displayName: string }) => {
+        e.stopPropagation();
+        setRepoToDelete(repo);
+        setDeleteDialogOpen(true);
+    };
+
+    const handleDeleteConfirm = async () => {
+        if (!repoToDelete) return;
+        try {
+            await deleteRepo.mutateAsync({ path: repoToDelete.path });
+            setDeleteDialogOpen(false);
+            setRepoToDelete(null);
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            toast({
+                type: 'error',
+                title: 'Failed to delete repository',
+                description: errorMessage,
+            });
+        }
+    };
+
+    if (isLoading) return <div className="p-12 text-center opacity-70">Loading repositories...</div>;
+
+    return (
+        <div className="container mx-auto max-w-5xl py-12 px-6">
+            <div className="flex items-center justify-between mb-8">
+                <div>
+                    <h1 className="text-2xl font-bold tracking-tight">Repositories</h1>
+                    <p className="text-sm opacity-70 mt-1">Manage your git repositories.</p>
+                </div>
+                <div className="flex items-center gap-2">
+                    <button className="btn btn-square btn-ghost" onClick={() => setSettingsOpen(true)} title="Settings">
+                        <i className="iconoir-ios-settings text-[20px]" aria-hidden="true" />
+                    </button>
+                    <Link href="/credentials" className="btn gap-2">
+                        <i className="iconoir-key text-[20px]" aria-hidden="true" />
+                        Credentials
+                    </Link>
+                    <button onClick={() => setBrowserOpen(true)} className="btn btn-accent gap-2">
+                        <i className="iconoir-plus-circle text-[20px]" aria-hidden="true" />
+                        Add Repository
+                    </button>
+                </div>
+            </div>
+
+            <div className="overflow-x-auto border border-base-300 rounded-lg bg-base-100">
+                <table className="table w-full">
+                    <thead className="bg-base-200/50">
+                        <tr>
+                            <th>Name</th>
+                            <th>Path</th>
+                            <th className="text-right">Action</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {repos?.length === 0 && (
+                            <tr>
+                                <td colSpan={3} className="text-center py-12 text-muted-foreground">
+                                    <div className="flex flex-col items-center gap-2">
+                                        <p>No repositories found.</p>
+                                        <button className="btn btn-link" onClick={() => setBrowserOpen(true)}>Add your first repository</button>
+                                    </div>
+                                </td>
+                            </tr>
+                        )}
+                        {repos?.map((repo) => {
+                            const repoDisplayName = getRepositoryDisplayName(repo);
+                            return (
+                            <tr
+                                key={repo.path}
+                                className="hover:bg-base-200/30 cursor-pointer group"
+                                onClick={() => router.push(`/workspace?path=${encodeURIComponent(repo.path)}`)}
+                            >
+                                <td>
+                                    <div className="flex items-center gap-3">
+                                        <i className="iconoir-bookmark text-[20px] opacity-70 group-hover:text-primary transition-colors" aria-hidden="true" />
+                                        <span className="font-bold text-sm">{repoDisplayName}</span>
+                                    </div>
+                                </td>
+                                <td className="text-sm opacity-70 font-mono truncate max-w-xs" title={repo.path}>
+                                    {repo.path}
+                                </td>
+                                <td className="text-right">
+                                    <div className="flex items-center justify-end gap-1">
+                                        <Link
+                                            href={`/workspace?path=${encodeURIComponent(repo.path)}`}
+                                            className="btn btn-ghost btn-sm btn-square"
+                                            onClick={(e) => e.stopPropagation()}
+                                        >
+                                            <i className="iconoir-arrow-right text-[16px]" aria-hidden="true" />
+                                        </Link>
+                                        <button
+                                            className="btn btn-ghost btn-sm btn-square text-error hover:bg-error/10"
+                                            onClick={(e) => handleDeleteClick(e, { path: repo.path, displayName: repoDisplayName })}
+                                        >
+                                            <i className="iconoir-trash text-[16px]" aria-hidden="true" />
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                            );
+                        })}
+                    </tbody>
+                </table>
+            </div>
+
+            <FileSystemBrowser
+                open={browserOpen}
+                onOpenChange={setBrowserOpen}
+                onSelect={(path) => handleAdd(path)}
+                initialPath={defaultRootFolder}
+            />
+
+            <HomeSettingsModal
+                open={settingsOpen}
+                onOpenChange={setSettingsOpen}
+                onSettingsChange={(settings) => setDefaultRootFolder(settings.resolvedDefaultFolder)}
+            />
+
+            {deleteDialogOpen && (
+                <dialog className="modal modal-open">
+                    <div className="modal-box">
+                        <h3 className="font-bold text-lg">Delete Repository</h3>
+                        <p className="py-4 break-words">
+                            Are you sure you want to remove <strong className="break-all">{repoToDelete?.displayName}</strong> from the list? 
+                            This will only remove it from your repository list, not delete the files from your file system.
+                        </p>
+                        <div className="modal-action">
+                            <button className="btn" onClick={() => setDeleteDialogOpen(false)}>Cancel</button>
+                            <button className="btn btn-error" onClick={handleDeleteConfirm}>Delete</button>
+                        </div>
+                    </div>
+                    <form method="dialog" className="modal-backdrop">
+                        <button onClick={() => setDeleteDialogOpen(false)}>close</button>
+                    </form>
+                </dialog>
+            )}
+        </div>
+    );
+}