trident-git 0.2.0 → 0.2.1

package/src/app/workspace/stashes/page.tsx

@@ -1,395 +0,0 @@
-'use client';
-
-import { useSearchParams } from 'next/navigation';
-import { Suspense, useState, useEffect } from 'react';
-import { useWorkspaceTitle } from '@/hooks/use-workspace-title';
-import { useGitStashes, useGitAction, useStashFiles, useStashFileDiff } from '@/hooks/use-git';
-import { cn, getChangedLineCountFromDiff, isFileBinary, isImageFile } from '@/lib/utils';
-import { useTheme } from 'next-themes';
-import { GroupedDiffViewer } from '@/components/git/grouped-diff-viewer';
-import { ImageDiffView } from '@/components/git/image-diff-view';
-
-function StashDiffView({ repoPath, stashIndex, filePath }: { repoPath: string; stashIndex: number; filePath: string }) {
-    const { data, isLoading } = useStashFileDiff(repoPath, stashIndex, filePath);
-    const { resolvedTheme } = useTheme();
-    const storageKey = 'git-web:diff-view-split';
-
-    const [splitView, setSplitView] = useState(() => {
-        if (typeof window === 'undefined') return true;
-        try {
-            const stored = localStorage.getItem(storageKey);
-            return stored !== null ? JSON.parse(stored) : true;
-        } catch {
-            return true;
-        }
-    });
-
-    const [renderAnyway, setRenderAnyway] = useState(false);
-
-    // Reset renderAnyway when file or stash changes
-    useEffect(() => {
-        setRenderAnyway(false);
-    }, [filePath, stashIndex]);
-
-    if (isLoading) {
-        return <div className="flex items-center justify-center p-8 h-full"><span className="loading loading-spinner text-base-content/50"></span></div>;
-    }
-
-    if (!data) {
-        return (
-            <div className="flex items-center justify-center h-full opacity-50">
-                No diff available
-            </div>
-        );
-    }
-
-    if (isImageFile(filePath)) {
-        return (
-            <div className="flex flex-col h-full bg-base-100">
-                <div className="flex items-center justify-between px-4 h-[57px] border-b border-base-300 shrink-0 bg-base-100">
-                    <span className="text-sm font-mono truncate max-w-[70%]" title={filePath}>{filePath}</span>
-                </div>
-                <div className="flex-1 overflow-auto">
-                    <ImageDiffView filePath={filePath} imageDiff={data.imageDiff} />
-                </div>
-            </div>
-        );
-    }
-
-    const isBinary = isFileBinary(filePath, data.left, data.right);
-
-    if (isBinary) {
-        return (
-            <div className="flex flex-col h-full bg-base-100">
-                <div className="flex items-center justify-between px-4 h-[57px] border-b border-base-300 shrink-0 bg-base-100">
-                    <span className="text-sm font-mono truncate max-w-[70%]" title={filePath}>{filePath}</span>
-                </div>
-                <div className="flex-1 flex items-center justify-center opacity-50">
-                    Binary file - diff not available
-                </div>
-            </div>
-        );
-    }
-
-    // Large file protection
-    const MAX_DIFF_SIZE = 100 * 1024; // 100KB
-    const MAX_DIFF_LINES = 3000;
-
-    const diffContent = data.diff || '';
-    const contentSize = diffContent.length;
-    const lineCount = getChangedLineCountFromDiff(diffContent);
-
-    const isLargeDiff = (contentSize > MAX_DIFF_SIZE || lineCount > MAX_DIFF_LINES);
-
-    return (
-        <div className="flex flex-col h-full bg-base-100">
-            <div className="flex items-center justify-between px-4 h-[57px] border-b border-base-300 shrink-0 bg-base-100">
-                <span className="text-sm font-mono truncate max-w-[70%]" title={filePath}>{filePath}</span>
-                <div className="flex items-center gap-2">
-                    <label htmlFor="split-view-stash" className="text-[10px] uppercase tracking-wider font-bold cursor-pointer opacity-70">Split View</label>
-                    <input
-                        type="checkbox"
-                        id="split-view-stash"
-                        checked={splitView}
-                        onChange={(e) => {
-                            setSplitView(e.target.checked);
-                            try {
-                                localStorage.setItem(storageKey, JSON.stringify(e.target.checked));
-                            } catch { }
-                        }}
-                        className="toggle toggle-xs toggle-primary"
-                    />
-                </div>
-            </div>
-            <div className="flex-1 overflow-auto diff-viewer-wrapper">
-                {isLargeDiff && !renderAnyway ? (
-                    <div className="flex flex-col items-center justify-center h-full gap-4 text-center p-4">
-                        <i className="iconoir-warning-triangle text-[32px] text-warning" aria-hidden="true" />
-                        <div className="space-y-2">
-                            <h3 className="font-bold text-lg">Large Diff Detected</h3>
-                            <p className="opacity-70">
-                                This diff is large ({Math.round(contentSize / 1024)}KB, ~{lineCount} changed lines) and may freeze your browser if rendered.
-                            </p>
-                        </div>
-                        <button className="btn btn-outline" onClick={() => setRenderAnyway(true)}>
-                            Show Diff Anyway
-                        </button>
-                    </div>
-                ) : (
-                    <GroupedDiffViewer
-                        oldValue={data.left || ''}
-                        newValue={data.right || ''}
-                        splitView={splitView}
-                        useDarkTheme={resolvedTheme === 'dark'}
-                    />
-                )}
-            </div>
-        </div>
-    );
-}
-
-function StashesContent() {
-    const searchParams = useSearchParams();
-    const repoPath = searchParams.get('path');
-    const { data: stashes, isLoading, isError, error, refetch } = useGitStashes(repoPath);
-    const action = useGitAction();
-    const [selectedStashIndex, setSelectedStashIndex] = useState<number | null>(null);
-    const [selectedFile, setSelectedFile] = useState<string | null>(null);
-    const [expandedStashes, setExpandedStashes] = useState<Set<number>>(new Set());
-
-    const { data: stashFiles, isLoading: filesLoading } = useStashFiles(repoPath, selectedStashIndex);
-
-    useWorkspaceTitle(repoPath, 'Stashes');
-
-    if (!repoPath) {
-        return <div className="p-8">No repository path specified.</div>;
-    }
-
-    if (isLoading) {
-        return (
-            <div className="flex items-center justify-center h-64">
-                <span className="loading loading-spinner text-base-content/50"></span>
-            </div>
-        );
-    }
-
-    if (isError) {
-        return (
-            <div className="flex items-center justify-center h-64 flex-col gap-4">
-                <p className="text-error font-medium">Error Loading Stashes</p>
-                <p className="text-sm opacity-70">{(error as Error)?.message || 'An unknown error occurred'}</p>
-                <button onClick={() => refetch()} className="btn btn-outline btn-sm">
-                    <i className="iconoir-refresh-circle text-[16px] mr-1" aria-hidden="true" />
-                    Try Again
-                </button>
-            </div>
-        );
-    }
-
-    const handleApply = async (index: number) => {
-        await action.mutateAsync({ repoPath, action: 'stash-apply', data: { index } });
-        refetch();
-    };
-
-    const handlePop = async (index: number) => {
-        await action.mutateAsync({ repoPath, action: 'stash-pop', data: { index } });
-        setSelectedStashIndex(null);
-        setSelectedFile(null);
-        refetch();
-    };
-
-    const handleDrop = async (index: number) => {
-        await action.mutateAsync({ repoPath, action: 'stash-drop', data: { index } });
-        if (selectedStashIndex === index) {
-            setSelectedStashIndex(null);
-            setSelectedFile(null);
-        }
-        refetch();
-    };
-
-    const toggleStashExpanded = (index: number) => {
-        const newExpanded = new Set(expandedStashes);
-        if (newExpanded.has(index)) {
-            newExpanded.delete(index);
-        } else {
-            newExpanded.add(index);
-        }
-        setExpandedStashes(newExpanded);
-        setSelectedStashIndex(index);
-        setSelectedFile(null);
-    };
-
-    const formatDate = (dateString: string) => {
-        try {
-            const date = new Date(dateString);
-            const now = new Date();
-            const diffMs = now.getTime() - date.getTime();
-            const diffMins = Math.floor(diffMs / 60000);
-            const diffHours = Math.floor(diffMs / 3600000);
-            const diffDays = Math.floor(diffMs / 86400000);
-
-            if (diffMins < 1) return 'just now';
-            if (diffMins < 60) return `${diffMins} minute${diffMins === 1 ? '' : 's'} ago`;
-            if (diffHours < 24) return `${diffHours} hour${diffHours === 1 ? '' : 's'} ago`;
-            if (diffDays < 30) return `${diffDays} day${diffDays === 1 ? '' : 's'} ago`;
-            return date.toLocaleDateString();
-        } catch {
-            return dateString;
-        }
-    };
-
-    const getStatusColor = (status: string) => {
-        switch (status) {
-            case 'A': return 'text-success';
-            case 'D': return 'text-error';
-            case 'M': return 'text-warning';
-            default: return 'opacity-50';
-        }
-    };
-
-    const getStatusLabel = (status: string) => {
-        switch (status) {
-            case 'A': return 'Added';
-            case 'D': return 'Deleted';
-            case 'M': return 'Modified';
-            default: return status;
-        }
-    };
-
-    return (
-        <div className="flex h-full overflow-hidden">
-            {/* Left Panel: Stash List */}
-            <div className="w-64 border-r border-base-300 flex flex-col bg-base-200/30">
-                <div className="h-[57px] px-4 border-b border-base-300 flex items-center justify-between bg-base-100">
-                    <h1 className="font-bold text-lg">Stashes</h1>
-                    <button className="btn btn-ghost btn-sm btn-square" onClick={() => refetch()} disabled={action.isPending} title="Refresh">
-                        {action.isPending ? <span className="loading loading-spinner loading-xs"></span> : <i className="iconoir-refresh-circle text-[16px]" aria-hidden="true" />}
-                    </button>
-                </div>
-
-                <div className="flex-1 overflow-y-auto overflow-x-hidden">
-                    {!stashes || stashes.length === 0 ? (
-                        <div className="flex-1 flex flex-col items-center justify-center opacity-50 h-64">
-                            <div className="p-8 rounded-full bg-base-200 mb-4 text-4xl">
-                                📦
-                            </div>
-                            <p className="text-sm font-bold">No stashes</p>
-                            <p className="text-xs mt-1">Stash changes from the Changes page</p>
-                        </div>
-                    ) : (
-                        <div className="p-2">
-                            {stashes.map((stash) => {
-                                const isExpanded = expandedStashes.has(stash.index);
-                                const isSelected = selectedStashIndex === stash.index;
-
-                                return (
-                                    <div key={stash.hash} className="mb-1">
-                                        <div
-                                            className={cn(
-                                                "p-2 rounded-md cursor-pointer transition-colors",
-                                                isSelected ? "bg-base-200" : "hover:bg-base-200/50"
-                                            )}
-                                            onClick={() => toggleStashExpanded(stash.index)}
-                                        >
-                                            <div className="flex flex-col gap-1">
-                                                {/* Row 1: ID and Buttons */}
-                                                <div className="flex items-center justify-between">
-                                                    <div className="flex items-center gap-2">
-                                                        <div className="opacity-50 text-[10px]">
-                                                            {isExpanded ? '▼' : '▶'}
-                                                        </div>
-                                                        <span className="text-[10px] font-mono bg-base-300 px-1 py-0.5 rounded opacity-70">
-                                                            stash@{'{' + stash.index + '}'}
-                                                        </span>
-                                                    </div>
-                                                    <div className="flex items-center gap-1 shrink-0">
-                                                        <div className="tooltip tooltip-left before:whitespace-normal before:max-w-[120px]" data-tip="Apply stash (keep)">
-                                                            <button
-                                                                className="btn btn-ghost btn-xs btn-square"
-                                                                onClick={(e) => { e.stopPropagation(); handleApply(stash.index); }}
-                                                                disabled={action.isPending}
-                                                            >
-                                                                <i className="iconoir-play text-[16px]" aria-hidden="true" />
-                                                            </button>
-                                                        </div>
-                                                        <div className="tooltip tooltip-left before:whitespace-normal before:max-w-[120px]" data-tip="Pop stash (apply and delete)">
-                                                            <button
-                                                                className="btn btn-ghost btn-xs btn-square"
-                                                                onClick={(e) => { e.stopPropagation(); handlePop(stash.index); }}
-                                                                disabled={action.isPending}
-                                                            >
-                                                                <i className="iconoir-u-turn-arrow-left text-[16px]" aria-hidden="true" />
-                                                            </button>
-                                                        </div>
-                                                        <div className="tooltip tooltip-left before:whitespace-normal before:max-w-[120px]" data-tip="Delete stash">
-                                                            <button
-                                                                className="btn btn-ghost btn-xs btn-square text-error hover:bg-error/10"
-                                                                onClick={(e) => { e.stopPropagation(); handleDrop(stash.index); }}
-                                                                disabled={action.isPending}
-                                                            >
-                                                                <i className="iconoir-trash text-[16px]" aria-hidden="true" />
-                                                            </button>
-                                                        </div>
-                                                    </div>
-                                                </div>
-
-                                                {/* Row 2: Message */}
-                                                <div className="tooltip tooltip-bottom before:whitespace-normal before:max-w-[200px] w-full block text-left" data-tip={stash.message}>
-                                                    <p className="text-xs font-bold truncate opacity-90 w-full">
-                                                        {stash.message}
-                                                    </p>
-                                                </div>
-
-                                                {/* Row 3: Metadata */}
-                                                <div className="text-[10px] opacity-50">
-                                                    {formatDate(stash.date)}
-                                                </div>
-                                            </div>
-                                        </div>
-
-                                        {/* Files list when expanded */}
-                                        {isExpanded && isSelected && (
-                                            <div className="ml-6 mt-1 space-y-0.5">
-                                                {filesLoading ? (
-                                                    <div className="flex items-center gap-2 px-2 py-1 text-xs opacity-50">
-                                                        <span className="loading loading-spinner loading-xs"></span>
-                                                        Loading files...
-                                                    </div>
-                                                ) : stashFiles && stashFiles.length > 0 ? (
-                                                    stashFiles.map((file) => (
-                                                        <div
-                                                            key={file.path}
-                                                            className={cn(
-                                                                "flex items-center gap-2 px-2 py-1 rounded cursor-pointer transition-colors text-xs",
-                                                                selectedFile === file.path ? "bg-primary/10 text-primary font-bold" : "hover:bg-base-200/50"
-                                                            )}
-                                                            onClick={(e) => { e.stopPropagation(); setSelectedFile(file.path); }}
-                                                        >
-                                                            <i className="iconoir-page text-[14px] opacity-50" aria-hidden="true" />
-                                                            <span className="font-mono truncate flex-1" title={file.path}>{file.path}</span>
-                                                            <span className={cn("text-[10px] uppercase font-bold", getStatusColor(file.status))} title={getStatusLabel(file.status)}>
-                                                                {file.status}
-                                                            </span>
-                                                        </div>
-                                                    ))
-                                                ) : (
-                                                    <div className="px-2 py-1 text-xs opacity-50 italic">
-                                                        No files in stash
-                                                    </div>
-                                                )}
-                                            </div>
-                                        )}
-                                    </div>
-                                );
-                            })}
-                        </div>
-                    )}
-                </div>
-            </div>
-
-            {/* Right Panel: Diff View */}
-            <div className="flex-1 flex flex-col bg-base-100 overflow-hidden">
-                {selectedStashIndex !== null && selectedFile ? (
-                    <StashDiffView repoPath={repoPath} stashIndex={selectedStashIndex} filePath={selectedFile} />
-                ) : (
-                    <div className="flex-1 flex flex-col items-center justify-center opacity-50">
-                        <div className="p-8 rounded-full bg-base-200 mb-4 text-4xl">
-                            📦
-                        </div>
-                        <p className="text-sm font-bold">
-                            {selectedStashIndex !== null ? 'Select a file to view changes' : 'Select a stash to view files'}
-                        </p>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}
-
-export default function WorkspaceStashesPage() {
-    return (
-        <Suspense fallback={<div className="flex items-center justify-center h-full"><span className="loading loading-spinner"></span></div>}>
-            <StashesContent />
-        </Suspense>
-    );
-}

package/src/components/command-palette.tsx

@@ -1,178 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Repository } from '@/lib/types';
-import { useRepositories } from '@/hooks/use-git';
-import { cn, getRepositoryDisplayName } from '@/lib/utils';
-import { useEscapeDismiss } from '@/hooks/use-escape-dismiss';
-
-function sortByLastOpenedDesc(a: Repository, b: Repository) {
-  return new Date(b.lastOpenedAt || 0).getTime() - new Date(a.lastOpenedAt || 0).getTime();
-}
-
-export function CommandPalette() {
-  const router = useRouter();
-  const { data: repositories } = useRepositories();
-  const [isOpen, setIsOpen] = useState(false);
-  const [query, setQuery] = useState('');
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const recentRepositories = useMemo(
-    () =>
-      (repositories || [])
-        .filter((repo) => Boolean(repo.lastOpenedAt))
-        .sort(sortByLastOpenedDesc)
-        .slice(0, 5),
-    [repositories]
-  );
-
-  const filteredRepositories = useMemo(() => {
-    const keyword = query.trim().toLowerCase();
-    if (!keyword) return recentRepositories;
-
-    return recentRepositories.filter((repo) => {
-      const name = getRepositoryDisplayName(repo).toLowerCase();
-      const repoPath = repo.path.toLowerCase();
-      return name.includes(keyword) || repoPath.includes(keyword);
-    });
-  }, [query, recentRepositories]);
-
-  const closePalette = useCallback(() => {
-    setIsOpen(false);
-    setQuery('');
-    setSelectedIndex(0);
-  }, []);
-
-  const activeIndex =
-    filteredRepositories.length === 0
-      ? -1
-      : Math.min(selectedIndex, filteredRepositories.length - 1);
-
-  const openRepository = useCallback(
-    (repoPath: string) => {
-      closePalette();
-      router.push(`/workspace?path=${encodeURIComponent(repoPath)}`);
-    },
-    [closePalette, router]
-  );
-
-  useEffect(() => {
-    const onGlobalKeyDown = (event: KeyboardEvent) => {
-      const isCommandOpenShortcut = (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k';
-      if (isCommandOpenShortcut) {
-        event.preventDefault();
-        setIsOpen(true);
-      }
-    };
-
-    window.addEventListener('keydown', onGlobalKeyDown);
-    return () => window.removeEventListener('keydown', onGlobalKeyDown);
-  }, []);
-
-  useEscapeDismiss(isOpen, closePalette);
-
-  useEffect(() => {
-    if (!isOpen) return;
-    requestAnimationFrame(() => inputRef.current?.focus());
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
-  return (
-    <div
-      className="fixed inset-0 z-50 bg-black/40 px-4 py-16"
-      onMouseDown={closePalette}
-      role="dialog"
-      aria-modal="true"
-      aria-label="Command palette"
-    >
-      <div
-        className="mx-auto w-full max-w-2xl overflow-hidden rounded-xl border border-base-300 bg-base-100 shadow-2xl"
-        onMouseDown={(event) => event.stopPropagation()}
-      >
-        <div className="border-b border-base-300 p-3">
-          <input
-            ref={inputRef}
-            type="text"
-            value={query}
-            onChange={(event) => {
-              setQuery(event.target.value);
-              setSelectedIndex(0);
-            }}
-            onKeyDown={(event) => {
-              if (event.key === 'ArrowDown') {
-                event.preventDefault();
-                if (filteredRepositories.length > 0) {
-                  setSelectedIndex((current) => (current + 1) % filteredRepositories.length);
-                }
-                return;
-              }
-
-              if (event.key === 'ArrowUp') {
-                event.preventDefault();
-                if (filteredRepositories.length > 0) {
-                  setSelectedIndex((current) =>
-                    current <= 0 ? filteredRepositories.length - 1 : current - 1
-                  );
-                }
-                return;
-              }
-
-              if (event.key === 'Enter') {
-                event.preventDefault();
-                const selectedRepo = activeIndex >= 0 ? filteredRepositories[activeIndex] : null;
-                if (selectedRepo) {
-                  openRepository(selectedRepo.path);
-                }
-              }
-            }}
-            placeholder="Type a command..."
-            className="input input-ghost w-full text-base focus:outline-none"
-          />
-        </div>
-
-        <div className="max-h-80 overflow-y-auto py-2">
-          <div className="px-4 pb-2 text-xs font-semibold uppercase tracking-wider opacity-60">
-            Recent repositories
-          </div>
-
-          {recentRepositories.length === 0 && (
-            <div className="px-4 py-6 text-sm opacity-60">No recently opened repositories yet.</div>
-          )}
-
-          {recentRepositories.length > 0 && filteredRepositories.length === 0 && (
-            <div className="px-4 py-6 text-sm opacity-60">No matching repositories.</div>
-          )}
-
-          {filteredRepositories.map((repo, index) => {
-            const repoDisplayName = getRepositoryDisplayName(repo);
-            return (
-            <button
-              key={repo.path}
-              type="button"
-              className={cn(
-                'flex w-full items-center justify-between gap-4 px-4 py-3 text-left',
-                activeIndex === index ? 'bg-base-200' : 'hover:bg-base-200/70'
-              )}
-              onMouseEnter={() => setSelectedIndex(index)}
-              onClick={() => openRepository(repo.path)}
-            >
-              <div className="min-w-0">
-                <div className="truncate text-sm font-medium">{repoDisplayName}</div>
-                <div className="truncate text-xs opacity-65">{repo.path}</div>
-              </div>
-              <span className="text-xs opacity-60">Open</span>
-            </button>
-            );
-          })}
-        </div>
-
-        <div className="border-t border-base-300 px-4 py-2 text-xs opacity-60">
-          Use ↑ ↓ to navigate, Enter to open, Esc to close.
-        </div>
-      </div>
-    </div>
-  );
-}