Merge pull request #321 from multica-ai/agent/yushen-claude/1fe82e4b

feat(web): extract Repositories into standalone settings tab
2026-04-02 12:26:14 +08:00 · 2026-04-02 12:26:14 +08:00 · b88c7f1afa
commit b88c7f1afa
parent ac06e7f4a3 bf713d3ad5
3 changed files with 134 additions and 81 deletions
--- a/apps/web/app/(dashboard)/settings/_components/repositories-tab.tsx
+++ b/apps/web/app/(dashboard)/settings/_components/repositories-tab.tsx
@ -0,0 +1,129 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Save, Plus, Trash2 } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { toast } from "sonner";
+import { useAuthStore } from "@/features/auth";
+import { useWorkspaceStore } from "@/features/workspace";
+import { api } from "@/shared/api";
+import type { WorkspaceRepo } from "@/shared/types";
+
+export function RepositoriesTab() {
+  const user = useAuthStore((s) => s.user);
+  const workspace = useWorkspaceStore((s) => s.workspace);
+  const members = useWorkspaceStore((s) => s.members);
+  const updateWorkspace = useWorkspaceStore((s) => s.updateWorkspace);
+
+  const [repos, setRepos] = useState<WorkspaceRepo[]>(workspace?.repos ?? []);
+  const [saving, setSaving] = useState(false);
+
+  const currentMember = members.find((m) => m.user_id === user?.id) ?? null;
+  const canManageWorkspace = currentMember?.role === "owner" || currentMember?.role === "admin";
+
+  useEffect(() => {
+    setRepos(workspace?.repos ?? []);
+  }, [workspace]);
+
+  const handleSave = async () => {
+    if (!workspace) return;
+    setSaving(true);
+    try {
+      const updated = await api.updateWorkspace(workspace.id, { repos });
+      updateWorkspace(updated);
+      toast.success("Repositories saved");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed to save repositories");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleAddRepo = () => {
+    setRepos([...repos, { url: "", description: "" }]);
+  };
+
+  const handleRemoveRepo = (index: number) => {
+    setRepos(repos.filter((_, i) => i !== index));
+  };
+
+  const handleRepoChange = (index: number, field: keyof WorkspaceRepo, value: string) => {
+    setRepos(repos.map((r, i) => (i === index ? { ...r, [field]: value } : r)));
+  };
+
+  if (!workspace) return null;
+
+  return (
+    <div className="space-y-8">
+      <section className="space-y-4">
+        <h2 className="text-sm font-semibold">Repositories</h2>
+
+        <Card>
+          <CardContent className="space-y-3">
+            <p className="text-xs text-muted-foreground">
+              GitHub repositories associated with this workspace. Agents use these to clone and work on code.
+            </p>
+
+            {repos.map((repo, index) => (
+              <div key={index} className="flex gap-2">
+                <div className="flex-1 space-y-1.5">
+                  <Input
+                    type="url"
+                    value={repo.url}
+                    onChange={(e) => handleRepoChange(index, "url", e.target.value)}
+                    disabled={!canManageWorkspace}
+                    placeholder="https://github.com/org/repo"
+                    className="text-sm"
+                  />
+                  <Input
+                    type="text"
+                    value={repo.description}
+                    onChange={(e) => handleRepoChange(index, "description", e.target.value)}
+                    disabled={!canManageWorkspace}
+                    placeholder="Description (e.g. Go backend + Next.js frontend)"
+                    className="text-sm"
+                  />
+                </div>
+                {canManageWorkspace && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="mt-0.5 shrink-0 text-muted-foreground hover:text-destructive"
+                    onClick={() => handleRemoveRepo(index)}
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </Button>
+                )}
+              </div>
+            ))}
+
+            {canManageWorkspace && (
+              <div className="flex items-center justify-between pt-1">
+                <Button variant="outline" size="sm" onClick={handleAddRepo}>
+                  <Plus className="h-3 w-3" />
+                  Add repository
+                </Button>
+                <Button
+                  size="sm"
+                  onClick={handleSave}
+                  disabled={saving}
+                >
+                  <Save className="h-3 w-3" />
+                  {saving ? "Saving..." : "Save"}
+                </Button>
+              </div>
+            )}
+
+            {!canManageWorkspace && (
+              <p className="text-xs text-muted-foreground">
+                Only admins and owners can manage repositories.
+              </p>
+            )}
+          </CardContent>
+        </Card>
+      </section>
+    </div>
+  );
+}
--- a/apps/web/app/(dashboard)/settings/_components/workspace-tab.tsx
+++ b/apps/web/app/(dashboard)/settings/_components/workspace-tab.tsx
@ -1,7 +1,7 @@
 "use client";

 import { useEffect, useState } from "react";
-import { Save, LogOut, Plus, Trash2 } from "lucide-react";
+import { Save, LogOut } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
@ -21,7 +21,6 @@ import { toast } from "sonner";
 import { useAuthStore } from "@/features/auth";
 import { useWorkspaceStore } from "@/features/workspace";
 import { api } from "@/shared/api";
-import type { WorkspaceRepo } from "@/shared/types";

 export function WorkspaceTab() {
  const user = useAuthStore((s) => s.user);
@ -34,7 +33,6 @@ export function WorkspaceTab() {
  const [name, setName] = useState(workspace?.name ?? "");
  const [description, setDescription] = useState(workspace?.description ?? "");
  const [context, setContext] = useState(workspace?.context ?? "");
-  const [repos, setRepos] = useState<WorkspaceRepo[]>(workspace?.repos ?? []);
  const [saving, setSaving] = useState(false);
  const [actionId, setActionId] = useState<string | null>(null);
  const [confirmAction, setConfirmAction] = useState<{
@ -52,7 +50,6 @@ export function WorkspaceTab() {
    setName(workspace?.name ?? "");
    setDescription(workspace?.description ?? "");
    setContext(workspace?.context ?? "");
-    setRepos(workspace?.repos ?? []);
  }, [workspace]);

  const handleSave = async () => {
@ -63,7 +60,6 @@ export function WorkspaceTab() {
        name,
        description,
        context,
-        repos,
      });
      updateWorkspace(updated);
      toast.success("Workspace settings saved");
@ -74,18 +70,6 @@ export function WorkspaceTab() {
    }
  };

-  const handleAddRepo = () => {
-    setRepos([...repos, { url: "", description: "" }]);
-  };
-
-  const handleRemoveRepo = (index: number) => {
-    setRepos(repos.filter((_, i) => i !== index));
-  };
-
-  const handleRepoChange = (index: number, field: keyof WorkspaceRepo, value: string) => {
-    setRepos(repos.map((r, i) => (i === index ? { ...r, [field]: value } : r)));
-  };
-
  const handleLeaveWorkspace = () => {
    if (!workspace) return;
    setConfirmAction({
@ -191,69 +175,6 @@ export function WorkspaceTab() {
        </Card>
      </section>

-      {/* Repositories */}
-      <section className="space-y-4">
-        <h2 className="text-sm font-semibold">Repositories</h2>
-
-        <Card>
-          <CardContent className="space-y-3">
-            <p className="text-xs text-muted-foreground">
-              GitHub repositories associated with this workspace. Agents use these to clone and work on code.
-            </p>
-
-            {repos.map((repo, index) => (
-              <div key={index} className="flex gap-2">
-                <div className="flex-1 space-y-1.5">
-                  <Input
-                    type="url"
-                    value={repo.url}
-                    onChange={(e) => handleRepoChange(index, "url", e.target.value)}
-                    disabled={!canManageWorkspace}
-                    placeholder="https://github.com/org/repo"
-                    className="text-sm"
-                  />
-                  <Input
-                    type="text"
-                    value={repo.description}
-                    onChange={(e) => handleRepoChange(index, "description", e.target.value)}
-                    disabled={!canManageWorkspace}
-                    placeholder="Description (e.g. Go backend + Next.js frontend)"
-                    className="text-sm"
-                  />
-                </div>
-                {canManageWorkspace && (
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="mt-0.5 shrink-0 text-muted-foreground hover:text-destructive"
-                    onClick={() => handleRemoveRepo(index)}
-                  >
-                    <Trash2 className="h-3.5 w-3.5" />
-                  </Button>
-                )}
-              </div>
-            ))}
-
-            {canManageWorkspace && (
-              <div className="flex items-center justify-between pt-1">
-                <Button variant="outline" size="sm" onClick={handleAddRepo}>
-                  <Plus className="h-3 w-3" />
-                  Add repository
-                </Button>
-                <Button
-                  size="sm"
-                  onClick={handleSave}
-                  disabled={saving || !name.trim() || !canManageWorkspace}
-                >
-                  <Save className="h-3 w-3" />
-                  {saving ? "Saving..." : "Save"}
-                </Button>
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      </section>
-
      {/* Danger Zone */}
      <section className="space-y-4">
        <div className="flex items-center gap-2">
--- a/apps/web/app/(dashboard)/settings/page.tsx
+++ b/apps/web/app/(dashboard)/settings/page.tsx
@ -1,6 +1,6 @@
 "use client";

-import { User, Palette, Key, Settings, Users } from "lucide-react";
+import { User, Palette, Key, Settings, Users, FolderGit2 } from "lucide-react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { useWorkspaceStore } from "@/features/workspace";
 import { AccountTab } from "./_components/account-tab";
@ -8,6 +8,7 @@ import { AppearanceTab } from "./_components/general-tab";
 import { TokensTab } from "./_components/tokens-tab";
 import { WorkspaceTab } from "./_components/workspace-tab";
 import { MembersTab } from "./_components/members-tab";
+import { RepositoriesTab } from "./_components/repositories-tab";

 const accountTabs = [
  { value: "profile", label: "Profile", icon: User },
@ -17,6 +18,7 @@ const accountTabs = [

 const workspaceTabs = [
  { value: "workspace", label: "General", icon: Settings },
+  { value: "repositories", label: "Repositories", icon: FolderGit2 },
  { value: "members", label: "Members", icon: Users },
 ];

@ -60,6 +62,7 @@ export default function SettingsPage() {
          <TabsContent value="appearance"><AppearanceTab /></TabsContent>
          <TabsContent value="tokens"><TokensTab /></TabsContent>
          <TabsContent value="workspace"><WorkspaceTab /></TabsContent>
+          <TabsContent value="repositories"><RepositoriesTab /></TabsContent>
          <TabsContent value="members"><MembersTab /></TabsContent>
        </div>
      </div>