@allbluecn/web-app 0.6.3 → 0.7.0

package/src/plugins/core/prd/components/share/share-layout.tsx

@@ -0,0 +1,171 @@
+// 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 { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ShareNavBar } from "./share-nav-bar";
+import { ShareDirectoryTree } from "./share-directory-tree";
+import { SharePrototypeView } from "./share-prototype-view";
+import { ShareReviewPanel } from "./share-review-panel";
+import { ShareCommentPanel } from "./share-comment-panel";
+import { ShareDocView } from "./share-doc-view";
+import { ShareAnnotationOverlay } from "./share-annotation-overlay";
+import { ElementContext } from "@/plugins/core/prd/components/element-context";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui-shared/resizable";
+import { getShareVersionsFn, getShareVersionDataFn } from "../../serverFns/share/versions";
+
+interface ShareLayoutProps {
+  prdId: string;
+  share: any;
+  versionLabel?: string | null;
+}
+
+export function ShareLayout({ prdId, share, versionLabel }: ShareLayoutProps) {
+  const { t } = useTranslation("prd");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [versions, setVersions] = useState<any[]>([]);
+  const [activeVersionId, setActiveVersionId] = useState<string | null>(null);
+  const [versionData, setVersionData] = useState<any>(null);
+  const [selectedPageId, setSelectedPageId] = useState<string | null>(null);
+  const [selectedComponentId, setSelectedComponentId] = useState<string | null>(null);
+  const [showAllConnections, setShowAllConnections] = useState(false);
+
+  useEffect(() => {
+    const ids = share.versionIds;
+    if (!ids?.length) return;
+    getShareVersionsFn({ data: { prdId, versionIds: ids } })
+      .then((data) => {
+        const v = (data.versions || []).sort((a, b) => {
+          const va = (a.versionLabel || "").match(/\d+/g)?.map(Number) || [0];
+          const vb = (b.versionLabel || "").match(/\d+/g)?.map(Number) || [0];
+          for (let i = 0; i < Math.max(va.length, vb.length); i++) {
+            const diff = (vb[i] || 0) - (va[i] || 0);
+            if (diff !== 0) return diff;
+          }
+          return 0;
+        });
+        setVersions(v);
+        if (v.length > 0) setActiveVersionId(v[0].id);
+      })
+      .catch(() => {});
+  }, [prdId, share.versionIds]);
+
+  useEffect(() => {
+    if (!activeVersionId) return;
+    setSelectedPageId(null);
+    setSelectedComponentId(null);
+    getShareVersionDataFn({ data: { prdId, versionId: activeVersionId } })
+      .then((data) => {
+        if (!data) return;
+        setVersionData(data);
+        const version = (data as { version?: { pageVersions: any[] } }).version;
+        const pages = version?.pageVersions || [];
+        if (pages.length > 0) {
+          setSelectedPageId(pages[0].pageId);
+        }
+      })
+      .catch(() => {});
+  }, [activeVersionId, prdId]);
+
+  useEffect(() => {
+    setSelectedComponentId(null);
+  }, [selectedPageId]);
+
+  const handleContainerClick = (e: React.MouseEvent) => {
+    const target = e.target as HTMLElement;
+    if (!target) return;
+    if (target.closest("[data-element-id]")) return;
+    if (target.closest("[data-component-id]")) return;
+    setSelectedComponentId(null);
+  };
+
+  const pages = versionData?.version?.pageVersions || [];
+  const currentPage = pages.find((p: any) => p.pageId === selectedPageId) || pages[0];
+  const currentElements = currentPage?.canvas?.elements || [];
+  const currentContent = currentPage?.content || null;
+
+  const selectedIds = useMemo(() => {
+    if (showAllConnections) return currentElements.map((e: any) => e.id);
+    return selectedComponentId ? [selectedComponentId] : [];
+  }, [showAllConnections, selectedComponentId, currentElements]);
+
+  const elementContextValue = useMemo(() => {
+    const map: Record<string, Record<string, any>> = {};
+    for (const e of currentElements) {
+      map[e.id] = (e.overrides ?? e.props) ?? {};
+    }
+    return { overrides: map, onSelectComponent: setSelectedComponentId };
+  }, [currentElements]);
+
+  return (
+    <ElementContext.Provider value={elementContextValue}>
+    <div className="flex flex-col h-screen bg-background">
+      <ShareNavBar
+        name={share.prd.name}
+        icon={share.prd.icon}
+        showAllConnections={showAllConnections}
+        onToggleAllConnections={() => setShowAllConnections((v) => !v)}
+      />
+      <div className="flex-1 flex overflow-hidden">
+        <div className="w-56 border-r bg-muted/10 flex flex-col overflow-hidden shrink-0">
+          <ShareDirectoryTree
+            versions={versions}
+            activeVersionId={activeVersionId}
+            onSelectVersion={setActiveVersionId}
+            pages={pages}
+            selectedPageId={selectedPageId}
+            onSelectPage={setSelectedPageId}
+          />
+        </div>
+
+        <div ref={containerRef} className="flex-1 flex overflow-hidden relative" onClick={handleContainerClick}>
+          <ResizablePanelGroup orientation="horizontal" className="h-full">
+            <ResizablePanel defaultSize={60} minSize={20} className="overflow-auto p-4">
+              <div className="text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wider">{t("shareLayout.prototype")}</div>
+              <SharePrototypeView
+                elements={currentElements}
+                selectedComponentId={selectedComponentId}
+                onSelect={setSelectedComponentId}
+              />
+            </ResizablePanel>
+            <ResizableHandle withHandle />
+            <ResizablePanel defaultSize={40} minSize={20} className="overflow-auto p-4">
+              <div className="text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wider">{t("shareLayout.doc")}</div>
+              <ShareDocView
+                content={currentContent}
+                selectedComponentId={selectedComponentId}
+                onSelectComponent={setSelectedComponentId}
+              />
+            </ResizablePanel>
+          </ResizablePanelGroup>
+          <ShareAnnotationOverlay containerRef={containerRef} selectedIds={selectedIds} />
+        </div>
+
+        <div className="w-72 border-l flex flex-col overflow-hidden shrink-0">
+          <div className="overflow-auto border-b" style={{ maxHeight: "40%" }}>
+            <ShareReviewPanel prdId={prdId} versionId={activeVersionId || ""} />
+          </div>
+          <div className="flex-1 overflow-auto">
+            <ShareCommentPanel prdId={prdId} />
+          </div>
+        </div>
+      </div>
+    </div>
+    </ElementContext.Provider>
+  );
+}

package/src/plugins/core/prd/components/share/share-nav-bar.tsx

@@ -0,0 +1,72 @@
+// 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 { FileText, Spline, SplinePointer } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Badge } from "@/components/ui-shared/badge";
+import { Button } from "@/components/ui-shared/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui-shared/tooltip";
+import { ShareThemeToggle } from './share-theme-toggle'
+import { cn } from "@/components/ui-shared/utils";
+
+const ICON_MAP: Record<string, any> = { file: FileText };
+
+interface ShareNavBarProps {
+  name: string;
+  icon?: string;
+  showAllConnections?: boolean;
+  onToggleAllConnections?: () => void;
+}
+
+export function ShareNavBar({ name, icon, showAllConnections = false, onToggleAllConnections }: ShareNavBarProps) {
+  const { t } = useTranslation("prd");
+  const Icon = icon ? ICON_MAP[icon] || FileText : FileText;
+  return (
+    <div className="flex items-center justify-between h-11 px-4 border-b bg-background rounded-t-xl">
+      <div className="flex items-center gap-2">
+        <Icon className="size-5" />
+        <span className="text-sm font-medium">{name}</span>
+        <Badge variant="outline" className="text-[10px] h-5">{t("shareNav.preview")}</Badge>
+      </div>
+      <div className="flex items-center gap-3">
+        {onToggleAllConnections && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onToggleAllConnections}
+                className={cn(
+                  "h-7 gap-1 px-2 text-xs",
+                  showAllConnections && "bg-primary/10 text-primary hover:bg-primary/15"
+                )}
+              >
+                <SplinePointer className="size-3.5" />
+                {/* {showAllConnections ? "隐藏连线" : "全部连线"} */}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{showAllConnections ? t("shareNav.hideConnections") : t("shareNav.showConnections")}</p>
+            </TooltipContent>
+          </Tooltip>
+        )}
+        <ShareThemeToggle className="size-4" />
+      </div>
+    </div>
+  );
+}

package/src/plugins/core/prd/components/share/share-password-gate.tsx

@@ -0,0 +1,90 @@
+// 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 } from "react";
+import { useTranslation } from "react-i18next";
+import { AuthLayout, AuthLayoutLeft, AuthLayoutRight } from "@/components/ui-shared/auth-layout";
+import { Input } from "@/components/ui-shared/input";
+import { Button } from "@/components/ui-shared/button";
+import { toast } from '@/components/ui-shared/sonner';
+import { verifySharePasswordFn } from "../../serverFns/share/verify-password";
+
+interface SharePasswordGateProps {
+  prdId: string;
+  shareName: string;
+  onVerified: () => void;
+  prdver?: string | null;
+}
+
+export function SharePasswordGate({ prdId, shareName, onVerified, prdver }: SharePasswordGateProps) {
+  const { t } = useTranslation("prd");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleVerify = async () => {
+    setLoading(true);
+    try {
+      const result = await verifySharePasswordFn({ data: { prdId, password, prdver: prdver ?? undefined } });
+      if (!result.valid) throw new Error(t("sharePassword.wrongPassword"));
+      sessionStorage.setItem(`share_pwd_${prdId}_${prdver || 'main'}`, password);
+      onVerified();
+    } catch {
+      toast.error(t("sharePassword.wrongPasswordRetry"));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <AuthLayout>
+      <AuthLayoutLeft>
+        <div className="flex flex-col gap-6 w-full max-w-xs">
+          <div className="space-y-2">
+            <h1 className="text-2xl font-bold">{t("sharePassword.encryptedTitle")}</h1>
+            <p className="text-muted-foreground text-sm">
+              {t("sharePassword.enterPassword", { name: shareName })}
+            </p>
+          </div>
+          <div className="space-y-3">
+            <Input
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              maxLength={4}
+              placeholder={t("sharePassword.passwordPlaceholder")}
+              className="h-11 text-lg font-mono tracking-widest text-center"
+              type="text"
+              onKeyDown={(e) => e.key === "Enter" && handleVerify()}
+            />
+            <Button
+              className="w-full h-11"
+              onClick={handleVerify}
+              disabled={loading || password.length !== 4}
+            >
+              {loading ? t("sharePassword.verifying") : t("sharePassword.viewShare")}
+            </Button>
+          </div>
+        </div>
+      </AuthLayoutLeft>
+      <AuthLayoutRight>
+        <div className="space-y-4">
+          <h1 className="text-4xl font-bold tracking-tight">AllBlue</h1>
+          <p className="text-lg text-muted-foreground">{t("share.brandTagline")}</p>
+        </div>
+      </AuthLayoutRight>
+    </AuthLayout>
+  );
+}

package/src/plugins/core/prd/components/share/share-prototype-view.tsx

@@ -0,0 +1,92 @@
+// 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 React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { getComponent } from "@/lib/prototype-registry";
+import { registerComponents } from "@/lib/prototype-registry";
+import { BUILTIN_COMPONENTS } from "@/plugins/core/prd/components/prototype";
+import { cn } from "@/components/ui-shared/utils";
+
+interface SharePrototypeViewProps {
+  elements: any[];
+  selectedComponentId?: string | null;
+  onSelect?: (id: string | null) => void;
+}
+
+export function SharePrototypeView({ elements, selectedComponentId, onSelect }: SharePrototypeViewProps) {
+  const { t } = useTranslation("prd");
+  useEffect(() => {
+    registerComponents(BUILTIN_COMPONENTS);
+  }, []);
+
+  if (elements.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-64 text-muted-foreground text-sm">
+        {t("sharePrototype.noElements")}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="relative w-full"
+      style={{ minHeight: 600, background: "var(--background)", borderRadius: 8 }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onSelect?.(null);
+      }}
+    >
+      {elements.map((el: any) => {
+        const config = getComponent(el.type);
+        const Component = config?.component;
+        if (!Component) return null;
+        const isSelected = selectedComponentId === el.id;
+
+        return (
+          <div
+            key={el.id}
+            data-element-id={el.id}
+            onClick={(e) => {
+              e.stopPropagation();
+              onSelect?.(el.id);
+            }}
+            style={{
+              position: "absolute",
+              left: el.x,
+              top: el.y,
+              width: el.width,
+              height: el.height,
+              zIndex: el.zIndex,
+              cursor: onSelect ? "pointer" : "default",
+              outline: isSelected ? "2px dashed var(--primary)" : "none",
+              outlineOffset: 2,
+            }}
+            className={cn("transition-shadow", isSelected && "ring-2 ring-primary/40")}
+          >
+            <Component props={{ ...config.defaultProps, ...(el.overrides ?? el.props ?? {}) }} style={el.style} />
+            {isSelected && (
+              <div className="absolute -top-6 left-0 px-1.5 py-0.5 bg-muted text-[10px] text-muted-foreground font-mono rounded max-w-60 truncate z-20 pointer-events-none">
+                {t("element.componentId", { id: el.id })}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/plugins/core/prd/components/share/share-review-panel.tsx

@@ -0,0 +1,93 @@
+// 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, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui-shared/button";
+import { Badge } from "@/components/ui-shared/badge";
+import { toast } from '@/components/ui-shared/sonner';
+import { useSession } from "@/components/ui-shared/auth-client";
+import { Textarea } from "@/components/ui-shared/textarea";
+import { upsertReviewFn } from "../../serverFns/reviews";
+
+interface ShareReviewPanelProps {
+  prdId: string;
+  versionId: string;
+}
+
+const STATUS_MAP: Record<string, { variant: "outline" | "secondary" | "default" | "destructive" }> = {
+  pending: { variant: "outline" },
+  reviewing: { variant: "secondary" },
+  approved: { variant: "default" },
+  rejected: { variant: "destructive" },
+};
+
+export function ShareReviewPanel({ prdId, versionId }: ShareReviewPanelProps) {
+  const { t } = useTranslation("share");
+  const { data: session } = useSession();
+  const [status, setStatus] = useState("pending");
+  const [notes, setNotes] = useState("");
+
+  const handleTransition = useCallback(async (newStatus: string) => {
+    try {
+      await upsertReviewFn({ data: { prdId, versionId, status: newStatus.toUpperCase() as "PENDING" | "APPROVED" | "REJECTED", notes } });
+      setStatus(newStatus);
+      toast.success(t("review.status-updated"));
+      setNotes("");
+    } catch {
+      toast.error(t("review.update-failed"));
+    }
+  }, [prdId, versionId, notes]);
+
+  if (!session) {
+    return (
+      <div className="p-3">
+        <p className="text-xs text-muted-foreground">{t("review.login-required")}</p>
+      </div>
+    );
+  }
+
+  const current = STATUS_MAP[status] || STATUS_MAP.pending;
+
+  return (
+    <div className="p-3 space-y-3">
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium text-muted-foreground">{t("review.status-label")}</span>
+        <Badge variant={current.variant} className="text-[10px] h-5">
+          {t(`review.${status}`)}
+        </Badge>
+      </div>
+
+      <Textarea
+        value={notes}
+        onChange={(e) => setNotes(e.target.value)}
+        placeholder={t("review.notes-placeholder")}
+        className="h-20 text-xs resize-none"
+      />
+
+      <div className="flex gap-2">
+        <Button size="sm" variant="default" className="flex-1 h-7 text-xs" onClick={() => handleTransition("approved")}>
+          {t("review.approve")}
+        </Button>
+        <Button size="sm" variant="destructive" className="flex-1 h-7 text-xs" onClick={() => handleTransition("rejected")}>
+          {t("review.reject")}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/plugins/core/prd/components/share/share-sse-listener.tsx

@@ -0,0 +1,76 @@
+// 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 { useEffect } from "react";
+
+interface ShareSSEListenerProps {
+  prdId: string;
+  shareId: string;
+  versionLabel?: string | null;
+  onPasswordChange: (hasPassword: boolean) => void;
+  onShareDisabled?: () => void;
+  onShareEnabled?: () => void;
+}
+
+export function ShareSSEListener({ prdId, shareId, versionLabel, onPasswordChange, onShareDisabled, onShareEnabled }: ShareSSEListenerProps) {
+  useEffect(() => {
+    const eventSource = new EventSource(`/api/share/prd/${prdId}/events`);
+
+    const isForThisShare = (e: MessageEvent): boolean => {
+      let data: any = {};
+      try { data = JSON.parse(e.data); } catch {}
+      // payload 带 versionLabel → 单分享事件,只在 versionLabel 匹配的页面响应
+      if (typeof data.versionLabel === "string") {
+        return data.versionLabel === versionLabel;
+      }
+      // payload 只带 shareId(无 versionLabel)→ 主分享密码事件,
+      // 只在主分享页面(versionLabel 为空)响应,避免影响 ?prdver=X 页面
+      if (typeof data.shareId === "string") {
+        return !versionLabel;
+      }
+      // payload 都没有 → 主分享启停事件,全广播
+      return true;
+    };
+
+    eventSource.addEventListener("password_changed", (e) => {
+      if (!isForThisShare(e as MessageEvent)) return;
+      let hasPassword = true;
+      try {
+        const data = JSON.parse((e as MessageEvent).data);
+        if (typeof data.hasPassword === "boolean") hasPassword = data.hasPassword;
+      } catch {}
+      const sessionKey = `share_pwd_${prdId}_${versionLabel || 'main'}`;
+      sessionStorage.removeItem(sessionKey);
+      onPasswordChange(hasPassword);
+    });
+
+    eventSource.addEventListener("share_disabled", (e) => {
+      if (!isForThisShare(e as MessageEvent)) return;
+      onShareDisabled?.();
+    });
+
+    eventSource.addEventListener("share_enabled", (e) => {
+      if (!isForThisShare(e as MessageEvent)) return;
+      onShareEnabled?.();
+    });
+
+    return () => eventSource.close();
+  }, [prdId, shareId, versionLabel, onPasswordChange, onShareDisabled, onShareEnabled]);
+
+  return null;
+}

package/src/plugins/core/prd/components/share/share-theme-toggle.tsx

@@ -0,0 +1,57 @@
+// 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 { useCallback, useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { cn } from "@/components/ui-shared/utils";
+
+const TRANSITION_CLASS = "theme-transitioning";
+const TRANSITION_MS = 300;
+
+export function ShareThemeToggle({ className }: { className?: string }) {
+  const { theme, setTheme } = useTheme();
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    setIsDark(theme === "dark");
+  }, [theme]);
+
+  const toggle = useCallback(() => {
+    const next = !isDark;
+    const root = document.documentElement;
+
+    root.classList.add(TRANSITION_CLASS);
+    setTheme(next ? "dark" : "light");
+
+    window.setTimeout(() => {
+      root.classList.remove(TRANSITION_CLASS);
+    }, TRANSITION_MS);
+  }, [isDark, setTheme]);
+
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      className={cn(className)}
+      aria-label="Toggle theme"
+    >
+      {isDark ? <Sun className={cn("size-5", className)} /> : <Moon className={cn("size-5", className)} />}
+      <span className="sr-only">Toggle theme</span>
+    </button>
+  );
+}