trident-git 0.2.0

package/src/app/workspace/custom-scripts/page.tsx

@@ -0,0 +1,247 @@
+'use client';
+
+import { Suspense, useMemo, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { useWorkspaceTitle } from '@/hooks/use-workspace-title';
+import { useRepositories, useRepository, useUpdateRepository } from '@/hooks/use-git';
+import { RepositoryCustomScript, RepositoryCustomScriptAction, RepositoryCustomScriptTarget } from '@/lib/types';
+
+type ScriptDraft = {
+  name: string;
+  target: RepositoryCustomScriptTarget;
+  action: RepositoryCustomScriptAction;
+  content: string;
+};
+
+const EMPTY_DRAFT: ScriptDraft = {
+  name: '',
+  target: 'branch',
+  action: 'run-bash-script',
+  content: '',
+};
+
+function generateScriptId(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  return `script-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+function WorkspaceCustomScriptsContent() {
+  const searchParams = useSearchParams();
+  const repoPath = searchParams.get('path');
+
+  useWorkspaceTitle(repoPath, 'Custom scripts');
+
+  const { isLoading: isReposLoading } = useRepositories();
+  const repository = useRepository(repoPath);
+  const updateRepository = useUpdateRepository();
+
+  const scripts = useMemo(() => repository?.customScripts ?? [], [repository?.customScripts]);
+  const [editingScriptId, setEditingScriptId] = useState<string | null>(null);
+  const [draft, setDraft] = useState<ScriptDraft>(EMPTY_DRAFT);
+  const [formError, setFormError] = useState<string | null>(null);
+
+  if (isReposLoading) {
+    return <div className="flex items-center justify-center h-full"><span className="loading loading-spinner"></span></div>;
+  }
+
+  if (!repoPath || !repository) {
+    return <div className="p-8">Repository not found.</div>;
+  }
+
+  const resetForm = () => {
+    setDraft(EMPTY_DRAFT);
+    setEditingScriptId(null);
+    setFormError(null);
+  };
+
+  const saveScripts = (nextScripts: RepositoryCustomScript[]) => {
+    updateRepository.mutate({
+      path: repoPath,
+      updates: {
+        customScripts: nextScripts,
+      },
+    });
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const name = draft.name.trim();
+    const content = draft.content;
+
+    if (!name) {
+      setFormError('Script name is required.');
+      return;
+    }
+
+    if (!content.trim()) {
+      setFormError('Script content is required.');
+      return;
+    }
+
+    const nextScript: RepositoryCustomScript = {
+      id: editingScriptId || generateScriptId(),
+      name,
+      target: draft.target,
+      action: draft.action,
+      content,
+    };
+
+    const nextScripts = editingScriptId
+      ? scripts.map((script) => (script.id === editingScriptId ? nextScript : script))
+      : [...scripts, nextScript];
+
+    saveScripts(nextScripts);
+    resetForm();
+  };
+
+  const handleEdit = (script: RepositoryCustomScript) => {
+    setEditingScriptId(script.id);
+    setDraft({
+      name: script.name,
+      target: script.target,
+      action: script.action,
+      content: script.content,
+    });
+    setFormError(null);
+  };
+
+  const handleDelete = (scriptId: string) => {
+    const nextScripts = scripts.filter((script) => script.id !== scriptId);
+    saveScripts(nextScripts);
+    if (editingScriptId === scriptId) {
+      resetForm();
+    }
+  };
+
+  return (
+    <div className="p-8 max-w-4xl mx-auto space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold">Custom Scripts</h1>
+        <p className="text-sm opacity-70 mt-2">
+          Manage custom bash scripts for this repository. Scripts appear in branch context menus.
+        </p>
+      </div>
+
+      <div className="card bg-base-100 shadow-xl border border-base-200">
+        <div className="card-body">
+          <h2 className="card-title">{editingScriptId ? 'Edit Script' : 'New Script'}</h2>
+          <form className="space-y-4" onSubmit={handleSubmit}>
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text">Name</span>
+              </label>
+              <input
+                type="text"
+                className="input input-bordered w-full"
+                value={draft.name}
+                onChange={(e) => setDraft((prev) => ({ ...prev, name: e.target.value }))}
+                placeholder="Example: Run tests"
+              />
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="form-control">
+                <label className="label">
+                  <span className="label-text">Target</span>
+                </label>
+                <select
+                  className="select select-bordered w-full"
+                  value={draft.target}
+                  onChange={(e) => setDraft((prev) => ({ ...prev, target: e.target.value as RepositoryCustomScriptTarget }))}
+                >
+                  <option value="branch">Branch</option>
+                </select>
+              </div>
+
+              <div className="form-control">
+                <label className="label">
+                  <span className="label-text">Action</span>
+                </label>
+                <select
+                  className="select select-bordered w-full"
+                  value={draft.action}
+                  onChange={(e) => setDraft((prev) => ({ ...prev, action: e.target.value as RepositoryCustomScriptAction }))}
+                >
+                  <option value="run-bash-script">Run bash script</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text">Script Content</span>
+              </label>
+              <textarea
+                className="textarea textarea-bordered w-full h-56 font-mono text-sm"
+                value={draft.content}
+                onChange={(e) => setDraft((prev) => ({ ...prev, content: e.target.value }))}
+                placeholder={'#!/usr/bin/env bash\nset -euo pipefail\n\necho "Hello from custom script"'}
+              />
+            </div>
+
+            {formError && (
+              <div className="alert alert-error py-2">
+                <span>{formError}</span>
+              </div>
+            )}
+
+            <div className="flex items-center gap-2">
+              <button type="submit" className="btn btn-primary btn-sm" disabled={updateRepository.isPending}>
+                {editingScriptId ? 'Update Script' : 'Add Script'}
+              </button>
+              {editingScriptId && (
+                <button type="button" className="btn btn-ghost btn-sm" onClick={resetForm} disabled={updateRepository.isPending}>
+                  Cancel Edit
+                </button>
+              )}
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div className="card bg-base-100 shadow-xl border border-base-200">
+        <div className="card-body">
+          <h2 className="card-title">Saved Scripts</h2>
+          {scripts.length === 0 ? (
+            <p className="text-sm opacity-60">No custom scripts yet.</p>
+          ) : (
+            <div className="space-y-3">
+              {scripts.map((script) => (
+                <div key={script.id} className="border border-base-300 rounded-lg p-4 bg-base-100">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <div className="font-medium truncate">{script.name}</div>
+                      <div className="text-xs opacity-60 mt-1">
+                        Target: Branch | Action: Run bash script
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2 shrink-0">
+                      <button className="btn btn-ghost btn-xs" onClick={() => handleEdit(script)} disabled={updateRepository.isPending}>
+                        Edit
+                      </button>
+                      <button className="btn btn-ghost btn-xs text-error" onClick={() => handleDelete(script.id)} disabled={updateRepository.isPending}>
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                  <pre className="mt-3 text-xs font-mono bg-base-200 rounded p-3 overflow-auto max-h-36 whitespace-pre-wrap break-words">{script.content}</pre>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function WorkspaceCustomScriptsPage() {
+  return (
+    <Suspense fallback={<div className="flex items-center justify-center h-full"><span className="loading loading-spinner"></span></div>}>
+      <WorkspaceCustomScriptsContent />
+    </Suspense>
+  );
+}

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

@@ -0,0 +1,27 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import { HistoryView } from '@/components/git/history-view';
+import { Suspense } from 'react';
+import { useWorkspaceTitle } from '@/hooks/use-workspace-title';
+
+function WorkspaceHistoryContent() {
+    const searchParams = useSearchParams();
+    const repoPath = searchParams.get('path');
+
+    useWorkspaceTitle(repoPath, 'History');
+
+    if (!repoPath) {
+        return <div className="p-8">No repository path specified.</div>;
+    }
+
+    return <HistoryView repoPath={repoPath} />;
+}
+
+export default function WorkspaceHistoryPage() {
+    return (
+        <Suspense fallback={<div className="flex items-center justify-center h-full"><span className="loading loading-spinner"></span></div>}>
+            <WorkspaceHistoryContent />
+        </Suspense>
+    );
+}

package/src/app/workspace/layout.tsx

@@ -0,0 +1,26 @@
+import { Sidebar } from '@/components/layout/sidebar';
+import { Suspense } from 'react';
+import { WorkspaceRepoOpenTracker } from '@/components/workspace-repo-open-tracker';
+import { getSettings } from '@/lib/store';
+
+export default function WorkspaceLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    const sidebarCollapsed = getSettings().sidebarCollapsed ?? false;
+
+    return (
+        <div className="flex min-h-screen max-h-screen bg-base-100">
+            <Suspense fallback={null}>
+                <WorkspaceRepoOpenTracker />
+            </Suspense>
+            <Suspense fallback={<div className={`${sidebarCollapsed ? 'w-16' : 'w-64'} border-r border-base-300 min-h-screen bg-base-200/30 flex items-center justify-center`}><span className="loading loading-spinner"></span></div>}>
+                <Sidebar initialCollapsed={sidebarCollapsed} />
+            </Suspense>
+            <main className="flex-1 overflow-auto">
+                {children}
+            </main>
+        </div>
+    );
+}

package/src/app/workspace/page.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import { HistoryView } from '@/components/git/history-view';
+import { Suspense } from 'react';
+import { useWorkspaceTitle } from '@/hooks/use-workspace-title';
+
+function WorkspaceHistoryContent() {
+  const searchParams = useSearchParams();
+  const repoPath = searchParams.get('path');
+
+  useWorkspaceTitle(repoPath, 'History');
+
+  if (!repoPath) {
+    return <div className="p-8">No repository path specified.</div>;
+  }
+
+  return <HistoryView repoPath={repoPath} />;
+}
+
+export default function WorkspacePage() {
+  return (
+    <Suspense fallback={<div className="flex items-center justify-center h-full"><span className="loading loading-spinner"></span></div>}>
+      <WorkspaceHistoryContent />
+    </Suspense>
+  );
+}

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

@@ -0,0 +1,233 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import { Suspense, useMemo, useState } from 'react';
+import { useWorkspaceTitle } from '@/hooks/use-workspace-title';
+import { useRepositories, useUpdateRepository, useGitBranches } from '@/hooks/use-git';
+import { useCredentials } from '@/hooks/use-credentials';
+import { getRepoFolderName, getRepositoryDisplayName } from '@/lib/utils';
+
+function getHostname(url: string): string | null {
+  try {
+    // Handle git@github.com:user/repo.git format
+    if (url.startsWith('git@')) {
+      const match = url.match(/git@([^:]+):/);
+      return match ? match[1] : null;
+    }
+    // Handle https://github.com/user/repo.git format
+    return new URL(url).hostname;
+  } catch {
+    return null;
+  }
+}
+
+function WorkspaceSettingsContent() {
+    const searchParams = useSearchParams();
+    const repoPath = searchParams.get('path');
+
+    useWorkspaceTitle(repoPath, 'Settings');
+
+    const { data: repos, isLoading: isLoadingRepos } = useRepositories();
+    const { data: credentials, isLoading: isLoadingCreds } = useCredentials();
+    const { data: gitData, isLoading: isLoadingGit } = useGitBranches(repoPath);
+    const updateRepo = useUpdateRepository();
+
+    const currentRepo = useMemo(() => 
+        repos?.find(r => r.path === repoPath), 
+    [repos, repoPath]);
+    const [displayNameDraftState, setDisplayNameDraftState] = useState<{
+        path: string | null;
+        value: string;
+        isDirty: boolean;
+    }>({
+        path: null,
+        value: '',
+        isDirty: false,
+    });
+
+    const matchingCredentials = useMemo(() => {
+        if (!credentials || !gitData?.remoteUrls) return [];
+
+        // specific remote URLs
+        const urls = Object.values(gitData.remoteUrls);
+        const remoteHosts = new Set(urls.map(getHostname).filter(Boolean) as string[]);
+
+        return credentials.filter(cred => {
+            if (cred.type === 'github') {
+                return remoteHosts.has('github.com');
+            }
+            if (cred.type === 'gitlab' && cred.serverUrl) {
+                const credHost = getHostname(cred.serverUrl);
+                return credHost && remoteHosts.has(credHost);
+            }
+            return false;
+        });
+    }, [credentials, gitData]);
+
+    const isLoading = isLoadingRepos || isLoadingCreds || isLoadingGit;
+
+    if (isLoading) {
+        return <div className="flex items-center justify-center h-full"><span className="loading loading-spinner"></span></div>;
+    }
+
+    if (!repoPath || !currentRepo) {
+        return <div className="p-8">Repository not found.</div>;
+    }
+
+    const displayNameDraft = displayNameDraftState.path === repoPath && displayNameDraftState.isDirty
+        ? displayNameDraftState.value
+        : (currentRepo.displayName ?? '');
+    const normalizedSavedDisplayName = currentRepo.displayName?.trim() ?? '';
+    const normalizedDraftDisplayName = displayNameDraft.trim();
+    const isDisplayNameDirty = normalizedDraftDisplayName !== normalizedSavedDisplayName;
+    const previewName = getRepositoryDisplayName({
+        path: currentRepo.path,
+        name: currentRepo.name,
+        displayName: displayNameDraft,
+    });
+    const fallbackFolderName = getRepoFolderName(currentRepo.path);
+
+    const handleDisplayNameSave = () => {
+        setDisplayNameDraftState({
+            path: repoPath,
+            value: displayNameDraft,
+            isDirty: false,
+        });
+        updateRepo.mutate({
+            path: repoPath,
+            updates: { displayName: displayNameDraft }
+        });
+    };
+
+    const handleDisplayNameReset = () => {
+        setDisplayNameDraftState({
+            path: repoPath,
+            value: '',
+            isDirty: false,
+        });
+        updateRepo.mutate({
+            path: repoPath,
+            updates: { displayName: null }
+        });
+    };
+
+    const handleCredentialChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const credentialId = e.target.value;
+        updateRepo.mutate({
+            path: repoPath,
+            updates: { credentialId: credentialId === 'none' ? null : credentialId }
+        });
+    };
+
+    return (
+        <div className="p-8 max-w-2xl mx-auto">
+            <h1 className="text-2xl font-bold mb-6">Workspace Settings</h1>
+
+            <div className="space-y-6">
+                <div className="card bg-base-100 shadow-xl border border-base-200">
+                    <div className="card-body">
+                        <h2 className="card-title">Repository Display Name</h2>
+                        <p className="text-sm opacity-70">
+                            Set a custom name for this repository in the workspace UI.
+                        </p>
+
+                        <div className="form-control w-full mt-4">
+                            <label className="label">
+                                <span className="label-text">Display Name</span>
+                            </label>
+                            <input
+                                type="text"
+                                className="input input-bordered w-full"
+                                placeholder={fallbackFolderName}
+                                value={displayNameDraft}
+                                onChange={(e) => {
+                                    setDisplayNameDraftState({
+                                        path: repoPath,
+                                        value: e.target.value,
+                                        isDirty: true,
+                                    });
+                                }}
+                                onKeyDown={(e) => {
+                                    if (e.key === 'Enter' && isDisplayNameDirty && !updateRepo.isPending) {
+                                        e.preventDefault();
+                                        handleDisplayNameSave();
+                                    }
+                                }}
+                            />
+                            <label className="label">
+                                <span className="label-text-alt opacity-70">
+                                    Preview: <span className="font-medium">{previewName}</span>
+                                </span>
+                            </label>
+                        </div>
+
+                        <div className="flex items-center gap-2 mt-2">
+                            <button
+                                type="button"
+                                className="btn btn-primary btn-sm"
+                                onClick={handleDisplayNameSave}
+                                disabled={!isDisplayNameDirty || updateRepo.isPending}
+                            >
+                                Save Name
+                            </button>
+                            <button
+                                type="button"
+                                className="btn btn-ghost btn-sm"
+                                onClick={handleDisplayNameReset}
+                                disabled={(!normalizedDraftDisplayName && !currentRepo.displayName) || updateRepo.isPending}
+                            >
+                                Reset
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="card bg-base-100 shadow-xl border border-base-200">
+                    <div className="card-body">
+                        <h2 className="card-title">Repository Credentials</h2>
+                        <p className="text-sm opacity-70">
+                            Associate a credential with this repository to authenticate with remote servers.
+                        </p>
+
+                        <div className="form-control w-full mt-4">
+                            <label className="label">
+                                <span className="label-text">Associated Credential</span>
+                            </label>
+                            <select
+                                className="select select-bordered w-full"
+                                value={currentRepo.credentialId || 'none'}
+                                onChange={handleCredentialChange}
+                            >
+                                <option value="none">None</option>
+                                {matchingCredentials.map((cred) => (
+                                    <option key={cred.id} value={cred.id}>
+                                        {cred.type === 'github' ? 'GitHub' : 'GitLab'}
+                                        {cred.type === 'gitlab' && ` (${new URL(cred.serverUrl!).hostname})`}
+                                        {' - '}
+                                        {cred.type === 'github' ? 'Account' : 'Token'}
+                                    </option>
+                                ))}
+                            </select>
+                            {matchingCredentials.length === 0 && (
+                                <label className="label">
+                                    <span className="label-text-alt opacity-70">
+                                        No matching credentials found for this repository&apos;s remotes.
+                                        Add credentials in the Credentials page.
+                                    </span>
+                                </label>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default function WorkspaceSettingsPage() {
+    return (
+        <Suspense fallback={<div className="flex items-center justify-center h-full"><span className="loading loading-spinner"></span></div>}>
+            <WorkspaceSettingsContent />
+        </Suspense>
+    );
+}