@allbluecn/web-app 0.9.5 → 0.10.2

package/src/components/workspace/workspace-activity-card.tsx

@@ -0,0 +1,60 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { Activity as ActivityIcon, MoreHorizontal } from "lucide-react";
+import { Link } from "@tanstack/react-router";
+import { ProjectActivityList } from "@/components/project/project-activity-list";
+import { m } from "@/paraglide/messages.js";
+
+interface WorkspaceActivity {
+  id: string;
+  projectId: string;
+  userId: string;
+  action: string;
+  targetType: string | null;
+  targetId: string | null;
+  metadata: unknown;
+  createdAt: Date;
+  user?: { id: string; username: string; email: string; avatarConfig?: unknown; bgShape?: string | null; bgColor?: string | null };
+  project?: { id: string; name: string };
+}
+
+interface WorkspaceActivityCardProps {
+  activities: WorkspaceActivity[];
+  workspaceId: string;
+}
+
+export function WorkspaceActivityCard({ activities, workspaceId }: WorkspaceActivityCardProps) {
+  return (
+    <div className="rounded-lg border bg-card p-4">
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <ActivityIcon className="size-4 text-muted-foreground" />
+          <h2 className="text-base font-semibold">{m.workspace_home_recentActivity()}</h2>
+        </div>
+        <Link
+          to="/workspaces/$workspaceId/activities"
+          params={{ workspaceId }}
+          className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
+        >
+          {m.workspace_home_allActivities()}
+        </Link>
+      </div>
+      <ProjectActivityList activities={activities} />
+    </div>
+  );
+}

package/src/components/workspace/workspace-contribution-card.tsx

@@ -0,0 +1,37 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { Activity as ActivityIcon } from "lucide-react";
+import { ContributionGraphWithTooltip } from "@/components/shared-kit/data-viz/contribution-graph-tooltip";
+import { m } from "@/paraglide/messages.js";
+
+interface WorkspaceContributionCardProps {
+  data: { date: string; count: number; level: number }[];
+}
+
+export function WorkspaceContributionCard({ data }: WorkspaceContributionCardProps) {
+  return (
+    <div className="rounded-lg border bg-card p-4">
+      <ContributionGraphWithTooltip
+        data={data}
+        className="w-full"
+        title={m.workspace_home_activity()}
+        icon={<ActivityIcon className="size-4 text-muted-foreground" />}
+      />
+    </div>
+  );
+}

package/src/components/workspace/workspace-header.tsx

@@ -0,0 +1,100 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { Link } from "@tanstack/react-router";
+import { Settings, FolderKanban, Pencil, Trash2, ArrowLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Separator,
+} from '@/components/ui/separator';
+import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
+import { m } from "@/paraglide/messages.js";
+
+interface WorkspaceHeaderProps {
+  workspace: {
+    id: string;
+    name: string;
+    description: string | null;
+    icon: string;
+    _count: { projects: number };
+  };
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+export function WorkspaceHeader({ workspace, onEdit, onDelete }: WorkspaceHeaderProps) {
+  return (
+    <>
+      <div className="mb-4 flex items-center justify-between">
+        <Button variant="ghost" size="sm" asChild>
+          <Link to="/workspaces" params={{ workspaceId: workspace.id }}>
+            <ArrowLeft className="size-4" />
+            {m.workspace_detail_back()}
+          </Link>
+        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" aria-label={m.workspace_settings_title()}>
+              <Settings className="size-4" />
+            </Button>
+          </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="min-w-[180px]">
+            <DropdownMenuItem asChild>
+              <Link to="/workspaces/$workspaceId/settings" params={{ workspaceId: workspace.id }}>
+                <Settings className="mr-2 size-4" />
+                {m.workspace_settings_title()}
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={onEdit}>
+              <Pencil className="mr-2 size-4" />
+              {m.workspace_settings_edit()}
+            </DropdownMenuItem>
+            <Separator className="my-1"/>
+            <DropdownMenuItem
+              className="text-destructive focus:text-destructive"
+              onClick={onDelete}
+            >
+              <Trash2 className="mr-2 size-4" />
+              {m.workspace_settings_delete()}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="flex flex-col items-center text-center py-10 mb-8">
+        <div className="flex size-16 items-center justify-center rounded-xl bg-primary/10 mb-4">
+          <LucideIconByName name={workspace.icon} size={32} className="text-primary" />
+        </div>
+        <h1 className="text-2xl font-semibold">{workspace.name}</h1>
+        <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
+          {workspace.description || m.workspace_detail_noDescription()}
+        </p>
+        <div className="mt-4 flex items-center gap-6 text-sm text-muted-foreground">
+          <span className="flex items-center gap-1.5">
+            <FolderKanban className="size-4" />
+            {workspace._count.projects} {m.workspace_detail_projects()}
+          </span>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/workspace/workspace-kb-card.tsx

@@ -0,0 +1,31 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { LayoutGrid } from "lucide-react";
+import { m } from "@/paraglide/messages.js";
+
+export function WorkspaceKbCard() {
+  return (
+    <div className="mb-6 rounded-lg border bg-card p-4">
+      <div className="mb-3 flex items-center gap-2">
+        <LayoutGrid className="size-4 text-muted-foreground" />
+        <h2 className="text-base font-semibold">{m.workspace_home_kbTitle()}</h2>
+      </div>
+      <p className="py-4 text-center text-sm text-muted-foreground">{m.workspace_home_kbPlaceholder()}</p>
+    </div>
+  );
+}

package/src/components/workspace/workspace-member-item.tsx

@@ -0,0 +1,80 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { X } from "lucide-react";
+import { UserAvatar } from "@/components/shared-kit";
+import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
+import { m } from "@/paraglide/messages.js";
+
+interface WorkspaceMember {
+  id: string;
+  userId: string;
+  role: string;
+  status: string;
+  joinedAt: Date;
+  user?: { id: string; username: string; email: string; avatarConfig?: unknown; bgShape?: string | null; bgColor?: string | null };
+}
+
+interface WorkspaceMemberCardProps {
+  member: WorkspaceMember;
+  workspaceOwnerId: string;
+  onRemove: (userId: string, username: string) => void;
+}
+
+const ROLE_LABELS: Record<string, () => string> = {
+  owner: () => m.workspace_home_role_owner(),
+  admin: () => m.workspace_home_role_admin(),
+  member: () => m.workspace_home_role_member(),
+  viewer: () => m.workspace_home_role_viewer(),
+};
+
+export function WorkspaceMemberItem({ member, workspaceOwnerId, onRemove }: WorkspaceMemberCardProps) {
+  const isOwner = member.userId === workspaceOwnerId;
+  const roleLabel = ROLE_LABELS[member.role ?? "member"]?.() ?? m.workspace_home_role_member();
+
+  return (
+    <div className="flex items-center gap-3 py-2">
+      <UserAvatar
+        name={member.user?.username}
+        avatarConfig={member.user?.avatarConfig as AvatarConfig | undefined}
+        bgShape={member.user?.bgShape as ShapeType | undefined}
+        bgColor={member.user?.bgColor ?? undefined}
+        size="sm"
+      />
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium truncate">{member.user?.username}</p>
+        <p className="text-xs text-muted-foreground truncate">{member.user?.email}</p>
+      </div>
+      <div className="flex items-center gap-1 shrink-0">
+        {isOwner && (
+          <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+            {m.workspace_home_role_owner()}
+          </span>
+        )}
+        {!isOwner && (
+          <button
+            onClick={() => onRemove(member.userId, member.user?.username ?? "")}
+            className="rounded p-1 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
+            aria-label={m.workspace_home_removeMemberConfirm()}
+          >
+            <X className="size-3.5" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/workspace/workspace-members-manager.tsx

@@ -0,0 +1,291 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useState, useEffect } from "react";
+import { UserPlus, Loader2, Search, X, Check, Users } from "lucide-react";
+import { toast } from "@/components/ui/sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { UserAvatar } from "@/components/shared-kit";
+import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
+import { NameConfirmDialog } from "@/components/shared-kit/dialogs/name-confirm-dialog";
+import {
+  addWorkspaceMemberFn,
+  listWorkspaceMembersFn,
+  removeWorkspaceMemberFn,
+} from "@/server/serverFns/workspace";
+import { listTeamUsersFn } from "@/server/serverFns/team";
+import { WorkspaceMemberItem } from "./workspace-member-item";
+import { m } from "@/paraglide/messages.js";
+
+interface WorkspaceMember {
+  id: string;
+  userId: string;
+  role: string;
+  status: string;
+  joinedAt: Date;
+  user?: { id: string; username: string; email: string; avatarConfig?: unknown; bgShape?: string | null; bgColor?: string | null };
+}
+
+type TeamUser = {
+  id: string;
+  username: string;
+  email: string;
+  avatarConfig?: unknown;
+  bgShape?: string | null;
+  bgColor?: string | null;
+  seatType: string;
+};
+
+interface WorkspaceMembersCardProps {
+  workspaceId: string;
+  workspaceOwnerId: string;
+  members: WorkspaceMember[];
+  onMembersUpdated: () => void;
+}
+
+export function WorkspaceMembersManager({ workspaceId, workspaceOwnerId, members, onMembersUpdated }: WorkspaceMembersCardProps) {
+  const [memberDialogOpen, setMemberDialogOpen] = useState(false);
+  const [teamUsers, setTeamUsers] = useState<TeamUser[]>([]);
+  const [teamUsersLoading, setTeamUsersLoading] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedUserId, setSelectedUserId] = useState("");
+  const [memberRole, setMemberRole] = useState<"admin" | "member" | "viewer">("member");
+  const [addingMember, setAddingMember] = useState(false);
+  const [removeDialogOpen, setRemoveDialogOpen] = useState(false);
+  const [pendingRemoveUserId, setPendingRemoveUserId] = useState<string | null>(null);
+  const [pendingRemoveUserName, setPendingRemoveUserName] = useState("");
+
+  useEffect(() => {
+    if (memberDialogOpen) {
+      setTeamUsersLoading(true);
+      listTeamUsersFn()
+        .then((data) => setTeamUsers(data as TeamUser[]))
+        .catch(() => {})
+        .finally(() => setTeamUsersLoading(false));
+    }
+  }, [memberDialogOpen]);
+
+  const filteredTeamUsers = teamUsers.filter(
+    (u) =>
+      u.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      u.email?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const openAddMember = () => {
+    setSelectedUserId("");
+    setSearchQuery("");
+    setMemberRole("member");
+    setMemberDialogOpen(true);
+  };
+
+  const handleAddMember = async () => {
+    if (!selectedUserId) {
+      toast.error(m.project_invite_selectMember());
+      return;
+    }
+    setAddingMember(true);
+    try {
+      await addWorkspaceMemberFn({
+        data: { workspaceId, userId: selectedUserId, role: memberRole },
+      });
+      toast.success(m.workspace_home_memberRemoved());
+      setMemberDialogOpen(false);
+      setSelectedUserId("");
+      onMembersUpdated();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : m.workspace_home_addMemberFailed());
+    } finally {
+      setAddingMember(false);
+    }
+  };
+
+  const openRemoveDialog = (userId: string, username: string) => {
+    setPendingRemoveUserId(userId);
+    setPendingRemoveUserName(username);
+    setRemoveDialogOpen(true);
+  };
+
+  const handleRemoveMember = async () => {
+    if (!pendingRemoveUserId) return;
+    try {
+      await removeWorkspaceMemberFn({
+        data: { workspaceId, userId: pendingRemoveUserId },
+      });
+      toast.success(m.workspace_home_memberRemoved());
+      setRemoveDialogOpen(false);
+      setPendingRemoveUserId(null);
+      onMembersUpdated();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : m.workspace_home_addMemberFailed());
+    } finally {
+      setPendingRemoveUserId(null);
+    }
+  };
+
+  return (
+    <>
+      <div className="rounded-lg border bg-card p-4">
+        <div className="mb-4 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Users className="size-4 text-muted-foreground" />
+            <h2 className="text-base font-semibold">{m.workspace_home_members()}</h2>
+          </div>
+          <TooltipProvider delayDuration={0}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="icon" onClick={openAddMember} aria-label={m.workspace_home_addMember()}>
+                  <UserPlus className="size-3.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{m.workspace_home_addMember()}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+        {members.length === 0 ? (
+          <p className="py-6 text-center text-sm text-muted-foreground">{m.workspace_home_membersPlaceholder()}</p>
+        ) : (
+          <div className="space-y-1">
+            {members.map((member) => (
+              <WorkspaceMemberItem
+                key={member.id}
+                member={member}
+                workspaceOwnerId={workspaceOwnerId}
+                onRemove={openRemoveDialog}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* 添加成员弹窗 */}
+      <Dialog open={memberDialogOpen} onOpenChange={setMemberDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{m.workspace_home_addMember()}</DialogTitle>
+            <DialogDescription>{m.workspace_home_selectMember()}</DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-2">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
+              <Input
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder={m.workspace_home_searchMember()}
+                className="pl-9"
+              />
+            </div>
+            <div className="max-h-48 overflow-y-auto border rounded-md">
+              {teamUsersLoading ? (
+                <div className="flex items-center justify-center py-6">
+                  <Loader2 className="size-4 animate-spin text-muted-foreground" />
+                </div>
+              ) : filteredTeamUsers.length === 0 ? (
+                <div className="py-6 text-center text-sm text-muted-foreground">
+                  {m.workspace_home_noMembers()}
+                </div>
+              ) : (
+                filteredTeamUsers.map((user) => (
+                  <label
+                    key={user.id}
+                    className={`flex items-center gap-3 px-3 py-2.5 cursor-pointer transition-colors ${
+                      selectedUserId === user.id ? "bg-primary/10" : "hover:bg-accent"
+                    }`}
+                  >
+                    <input
+                      type="radio"
+                      name="workspace-member"
+                      value={user.id}
+                      checked={selectedUserId === user.id}
+                      onChange={() => setSelectedUserId(user.id)}
+                      className="accent-primary"
+                    />
+                    <UserAvatar
+                      name={user.username}
+                      avatarConfig={user.avatarConfig as AvatarConfig | undefined}
+                      bgShape={user.bgShape as ShapeType | undefined}
+                      bgColor={user.bgColor ?? undefined}
+                      size="sm"
+                    />
+                    <span className="text-sm font-medium">{user.username}</span>
+                    <span className="text-xs text-muted-foreground ml-auto">{user.email}</span>
+                  </label>
+                ))
+              )}
+            </div>
+            <div className="grid gap-2">
+              <label className="text-sm font-medium">{m.workspace_home_roleLabel()}</label>
+              <Select value={memberRole} onValueChange={(v) => setMemberRole(v as "admin" | "member" | "viewer")}>
+                <SelectTrigger className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="admin">{m.workspace_home_role_admin()}</SelectItem>
+                  <SelectItem value="member">{m.workspace_home_role_member()}</SelectItem>
+                  <SelectItem value="viewer">{m.workspace_home_role_viewer()}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setMemberDialogOpen(false)}>
+              {m.common_button_cancel()}
+            </Button>
+            <Button onClick={handleAddMember} disabled={addingMember || !selectedUserId}>
+              {addingMember ? <Loader2 className="size-4 animate-spin" /> : <Check className="size-4 mr-1.5" />}
+              {m.projects_project_invite_sendInvite()}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 移除确认弹窗 */}
+      <NameConfirmDialog
+        open={removeDialogOpen}
+        onOpenChange={setRemoveDialogOpen}
+        title={m.workspace_home_removeMemberConfirm()}
+        description={m.workspace_home_removeMemberDesc({ name: pendingRemoveUserName })}
+        confirmText={m.workspace_settings_confirmRemove()}
+        expectedName={pendingRemoveUserName}
+        onConfirm={handleRemoveMember}
+      />
+    </>
+  );
+}