@allbluecn/web-app 0.17.2 → 0.18.1

package/src/components/design/editor/pages-tree/design-tree-page-tab.tsx

@@ -0,0 +1,545 @@
+// 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, { useState, useCallback, useEffect, useRef, useMemo, useReducer } from "react";
+import { Folder, File, FolderPlus, Plus, Search, ChevronRight } from "lucide-react";
+import {
+  editReducer,
+  createReducer,
+  dragReducer,
+  initialEditState,
+  initialCreateState,
+  initialDragState,
+} from "./design-tree-reducer";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@allbluecn/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { Input } from "@allbluecn/ui/input";
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+} from "@/components/ui/context-menu";
+import { ConfirmDialog } from "@allbluecn/ui/components/confirm-dialog";
+import { buildTree, TreeNode, DesignPage } from "@/lib/design-tree-utils";
+import { listDesignPagesFn, createDesignPageFn, updateDesignPageFn, deleteDesignPageFn } from "@/server/serverFns/design/pages";
+import { m } from "@/paraglide/messages.js";
+
+interface DesignPageTabProps {
+  designId: string;
+  activePageId: string | null;
+  onPageSelect: (pageId: string) => void;
+}
+
+export function DesignPageTab({ designId, activePageId, onPageSelect }: DesignPageTabProps) {
+  const [pages, setPages] = useState<DesignPage[]>([]);
+  const [tree, setTree] = useState<TreeNode[]>([]);
+  const [editState, editDispatch] = useReducer(editReducer, initialEditState);
+  const homeCreated = useRef(false);
+  const dragNodeIdRef = useRef<string | null>(null);
+
+  const [dragState, dragDispatch] = useReducer(dragReducer, initialDragState);
+
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+
+  const [createState, createDispatch] = useReducer(createReducer, initialCreateState);
+  const creatingRef = useRef<HTMLInputElement>(null);
+  const editingRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (editState.editingId) {
+      requestAnimationFrame(() => {
+        editingRef.current?.focus();
+        editingRef.current?.select();
+      });
+    }
+  }, [editState.editingId]);
+
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+
+  const toggleNode = useCallback((id: string) => {
+    setExpandedNodes(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  useEffect(() => {
+    const nodeIdsWithChildren = new Set<string>();
+    const walk = (nodes: TreeNode[]) => {
+      for (const node of nodes) {
+        if (node.children.length > 0) nodeIdsWithChildren.add(node.id);
+        walk(node.children);
+      }
+    };
+    walk(tree);
+    setExpandedNodes(prev => {
+      let hasNew = false;
+      for (const id of nodeIdsWithChildren) { if (!prev.has(id)) { hasNew = true; break; } }
+      if (!hasNew) return prev;
+      const next = new Set(prev);
+      for (const id of nodeIdsWithChildren) next.add(id);
+      return next;
+    });
+  }, [tree]);
+
+  const filteredTree = useMemo(() => {
+    if (!searchQuery.trim()) return tree;
+    const q = searchQuery.toLowerCase();
+    const filterNodes = (nodes: TreeNode[]): TreeNode[] =>
+      nodes
+        .map(n => {
+          const children = n.children ? filterNodes(n.children) : [];
+          const match = n.name.toLowerCase().includes(q) || children.length > 0;
+          return match ? { ...n, children } : null;
+        })
+        .filter(Boolean) as TreeNode[];
+    return filterNodes(tree);
+  }, [tree, searchQuery]);
+
+  const refreshPages = useCallback(() => {
+    listDesignPagesFn({ data: { designId } })
+      .then((data) => {
+        const pages = data as DesignPage[];
+        if (pages.length === 0 && !homeCreated.current) {
+          homeCreated.current = true;
+          createDesignPageFn({ data: { designId, name: m.prd_treePage_homeName(), type: "page" } }).then(() => refreshPages());
+          return;
+        }
+        setPages(pages);
+        setTree(buildTree(data as DesignPage[]));
+      });
+  }, [designId]);
+
+  useEffect(() => { refreshPages(); }, [refreshPages]);
+
+  useEffect(() => {
+    if (!activePageId && pages.length > 0) {
+      onPageSelect(pages[0].id);
+    }
+  }, [activePageId, pages, onPageSelect]);
+
+  const confirmEdit = useCallback(async (id: string, name: string) => {
+    if (!name.trim()) return;
+    await updateDesignPageFn({ data: { pageId: id, name: name.trim() } });
+    editDispatch({ type: "CANCEL_EDIT" });
+    refreshPages();
+  }, [refreshPages]);
+
+  const deleteNode = useCallback(async (id: string) => {
+    await deleteDesignPageFn({ data: { pageId: id } });
+    refreshPages();
+    setDeleteConfirmId(null);
+  }, [refreshPages]);
+
+  const duplicateNode = useCallback(async (node: TreeNode) => {
+    await createDesignPageFn({ data: { designId, name: node.name + m.prd_treePage_duplicateSuffix(), type: node.type, parentId: node.parentId } });
+    refreshPages();
+  }, [designId, refreshPages]);
+
+  const isDescendantOf = useCallback((id: string, ancestorId: string): boolean => {
+    const parentMap = new Map<string, string | null>();
+    pages.forEach(p => parentMap.set(p.id, p.parentId));
+    let current = parentMap.get(id);
+    while (current !== undefined) {
+      if (current === ancestorId) return true;
+      current = current ? parentMap.get(current) : undefined;
+    }
+    return false;
+  }, [pages]);
+
+  const getDepth = useCallback((nodeId: string): number => {
+    const parentMap = new Map<string, string | null>();
+    pages.forEach(p => parentMap.set(p.id, p.parentId));
+    let depth = 0;
+    let current = parentMap.get(nodeId);
+    while (current !== undefined && current !== null) {
+      depth++;
+      current = parentMap.get(current);
+    }
+    return depth;
+  }, [pages]);
+
+  const calcInsertOrder = (siblings: DesignPage[], position: "above" | "below", targetIndex: number): number => {
+    const spacing = 1000;
+    if (siblings.length === 0) return spacing;
+    if (position === "above") {
+      if (targetIndex <= 0) return (siblings[0].order ?? 0) - spacing;
+      return Math.floor(((siblings[targetIndex - 1].order ?? 0) + (siblings[targetIndex].order ?? 0)) / 2);
+    } else {
+      if (targetIndex >= siblings.length - 1) return (siblings[siblings.length - 1].order ?? 0) + spacing;
+      return Math.floor(((siblings[targetIndex].order ?? 0) + (siblings[targetIndex + 1].order ?? 0)) / 2);
+    }
+  };
+
+  const moveNode = useCallback(async (id: string, parentId: string | null, order: number) => {
+    await updateDesignPageFn({ data: { pageId: id, parentId, order } });
+  }, []);
+
+  const handleStartCreate = useCallback((type: "folder" | "page") => {
+    createDispatch({ type: "START_CREATE", creatingType: type });
+  }, []);
+
+  const handleCreateConfirm = useCallback(async () => {
+    if (!createState.creatingType) return;
+    const name = createState.creatingName.trim() || (createState.creatingType === "folder" ? m.prd_treePage_unnamedFolder() : m.prd_treePage_unnamed());
+    try {
+      await createDesignPageFn({ data: { designId, name, type: createState.creatingType } });
+      refreshPages();
+    } catch (err) {
+      console.error("Create failed:", err);
+    }
+    createDispatch({ type: "FINISH_CREATE" });
+  }, [createState.creatingType, createState.creatingName, designId, refreshPages]);
+
+  const handleCreateCancel = useCallback(() => {
+    createDispatch({ type: "CANCEL_CREATE" });
+  }, []);
+
+  useEffect(() => {
+    if (createState.creatingType && creatingRef.current) {
+      creatingRef.current.focus();
+      creatingRef.current.select();
+    }
+  }, [createState.creatingType]);
+
+  const handleDragStart = (e: React.DragEvent, nodeId: string) => {
+    e.dataTransfer.setData("text/plain", nodeId);
+    e.dataTransfer.effectAllowed = "move";
+    dragNodeIdRef.current = nodeId;
+  };
+
+  const handleDragEnd = () => {
+    dragNodeIdRef.current = null;
+    dragDispatch({ type: "CLEAR_DRAG_OVER" });
+  };
+
+  const handleDragOverNode = (e: React.DragEvent, node: TreeNode) => {
+    const draggedId = dragNodeIdRef.current;
+    if (!draggedId || draggedId === node.id || isDescendantOf(node.id, draggedId)) return;
+
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const y = e.clientY - rect.top;
+    const height = rect.height;
+
+    if (y < height * 0.25) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      dragDispatch({ type: "SET_DRAG_OVER", nodeId: node.id, position: "above" });
+     } else if (y < height * 0.75) {
+       const draggedId = dragNodeIdRef.current;
+       const targetDepth = getDepth(node.id);
+       let canDropInside = targetDepth <= 1;
+       if (node.type === "folder" && targetDepth === 1 && draggedId && pages.some(p => p.parentId === draggedId)) {
+         canDropInside = false;
+       }
+       if (canDropInside) {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        dragDispatch({ type: "SET_DRAG_OVER", nodeId: node.id, position: "inside" });
+      } else {
+        dragDispatch({ type: "CLEAR_DRAG_OVER" });
+      }
+    } else {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      dragDispatch({ type: "SET_DRAG_OVER", nodeId: node.id, position: "below" });
+    }
+  };
+
+  const handleDragLeaveNode = () => {
+    dragDispatch({ type: "CLEAR_DRAG_OVER" });
+  };
+
+  const handleDropOnNode = async (e: React.DragEvent, targetNode: TreeNode) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const draggedId = dragNodeIdRef.current;
+    if (!draggedId || draggedId === targetNode.id || isDescendantOf(targetNode.id, draggedId)) {
+      handleDragEnd();
+      return;
+    }
+
+    if (dragState.dragPosition === "inside") {
+      const targetChildren = pages.filter(p => p.parentId === targetNode.id);
+      const order = targetChildren.length > 0 ? Math.max(...targetChildren.map(c => c.order ?? 0)) + 1000 : 1000;
+
+      try {
+        await moveNode(draggedId, targetNode.id, order);
+
+        const draggedChildren = pages.filter(p => p.parentId === draggedId)
+          .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+        if (targetNode.type === "folder") {
+          for (let i = 0; i < draggedChildren.length; i++) {
+            await moveNode(draggedChildren[i].id, draggedId, (i + 1) * 1000);
+          }
+        } else {
+          for (let i = 0; i < draggedChildren.length; i++) {
+            await moveNode(draggedChildren[i].id, targetNode.id, order + (i + 1) * 1000);
+          }
+        }
+        refreshPages();
+      } catch (err) {
+        console.error("Move failed:", err);
+      }
+    } else {
+      const newParentId = targetNode.parentId;
+      const siblings = pages.filter(p => p.parentId === targetNode.parentId)
+        .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+      const targetIndex = siblings.findIndex(s => s.id === targetNode.id);
+      const newOrder = calcInsertOrder(siblings, dragState.dragPosition!, targetIndex);
+
+      try {
+        await moveNode(draggedId, newParentId, newOrder);
+        refreshPages();
+      } catch (err) {
+        console.error("Move failed:", err);
+      }
+    }
+    handleDragEnd();
+  };
+
+  const handleDropEmpty = async (e: React.DragEvent) => {
+    e.preventDefault();
+    const draggedId = dragNodeIdRef.current;
+    if (!draggedId) { handleDragEnd(); return; }
+
+    const rootSiblings = pages.filter(p => p.parentId === null)
+      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    const newOrder = rootSiblings.length > 0 ? Math.max(...rootSiblings.map(c => c.order ?? 0)) + 1000 : 1000;
+
+    try {
+      await moveNode(draggedId, null, newOrder);
+      refreshPages();
+    } catch (err) {
+      console.error("Move failed:", err);
+    }
+    handleDragEnd();
+  };
+
+  const isDragOver = (nodeId: string) => dragState.dragOverNodeId === nodeId;
+
+   const renderNode = (node: TreeNode, depth: number = 0) => {
+      const hovering = isDragOver(node.id);
+      const actualExpanded = searchQuery.trim() ? true : expandedNodes.has(node.id);
+      const hasChildren = node.children.length > 0;
+
+      return (
+        <div key={node.id}>
+          <ContextMenu>
+            <ContextMenuTrigger render={<div draggable
+                onDragStart={(e) => handleDragStart(e, node.id)}
+                onDragEnd={handleDragEnd}
+                onDragOver={(e) => handleDragOverNode(e, node)}
+                onDragLeave={handleDragLeaveNode}
+                onDrop={(e) => handleDropOnNode(e, node)}
+                className={cn(
+                  "relative flex items-center gap-1 px-2 py-1.5 rounded cursor-pointer text-xs group hover:bg-muted/50 transition-colors",
+                  activePageId === node.id && "bg-muted font-medium",
+                  hovering && dragState.dragPosition === "inside" && "bg-accent/50 ring-1 ring-primary/30",
+                )}
+                style={{ paddingLeft: `${12 + depth * 16}px` }}
+               onClick={(e) => {
+                 const target = e.target as HTMLElement;
+                 const isChevronClick = target.closest('[data-chevron]');
+                 
+                 if (isChevronClick) {
+                   if (hasChildren) {
+                     e.stopPropagation();
+                     toggleNode(node.id);
+                   }
+                 } else {
+                   if (node.type === "page") {
+                     onPageSelect(node.id);
+                   } else if (node.type === "folder") {
+                     if (hasChildren) toggleNode(node.id);
+                   }
+                 }
+               }} />}>
+                {hovering && dragState.dragPosition === "above" && (
+                  <div className="absolute left-2 right-2 top-0 h-0.5 rounded-full bg-primary pointer-events-none" />
+                )}
+                {hovering && dragState.dragPosition === "below" && (
+                 <div className="absolute left-2 right-2 bottom-0 h-0.5 rounded-full bg-primary pointer-events-none" />
+               )}
+               {hasChildren ? (
+                 <button
+                   data-chevron
+                   type="button"
+                   onClick={(e) => {
+                     e.stopPropagation();
+                     toggleNode(node.id);
+                   }}
+                   className="shrink-0 hover:bg-muted rounded p-0.5 -m-0.5 z-10"
+                 >
+                   <ChevronRight className={cn("size-3.5 shrink-0 text-muted-foreground/60 transition-transform duration-150", actualExpanded && "rotate-90")} />
+                 </button>
+               ) : (
+                 <span className="size-3.5 shrink-0" />
+               )}
+               {node.type === "folder" ? (
+                 <Folder className="size-3.5 shrink-0 text-muted-foreground" />
+               ) : (
+                 <File className="size-3.5 shrink-0 text-muted-foreground" />
+               )}
+
+               {editState.editingId === node.id ? (
+                 <input
+                   ref={editingRef}
+                   className="h-7 w-full rounded-md border border-input bg-transparent px-1.5 py-0 text-xs outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 placeholder:text-muted-foreground/40"
+                   value={editState.editValue}
+                   aria-label={m.treePage_pageName()}
+                   onChange={e => editDispatch({ type: "SET_EDIT_VALUE", value: e.target.value })}
+                   onKeyDown={e => {
+                     if (e.key === "Enter") confirmEdit(node.id, editState.editValue);
+                     if (e.key === "Escape") editDispatch({ type: "CANCEL_EDIT" });
+                   }}
+                   onBlur={() => confirmEdit(node.id, editState.editValue)}
+                  placeholder={node.type === "folder" ? m.treePage_folderName() : m.treePage_pageName()}
+                />
+              ) : (
+                <span className="flex-1 truncate text-xs">{node.name || m.prd_treePage_unnamed()}</span>
+              )}
+            </ContextMenuTrigger>
+          <ContextMenuContent className="min-w-36 space-y-1.5">
+            <ContextMenuItem onClick={() => editDispatch({ type: "START_EDIT", id: node.id, name: node.name })}>
+              {m.treePage_rename()}
+              {/* <ContextMenuShortcut className="text-xs">Ctrl+Shift+R</ContextMenuShortcut> */}
+            </ContextMenuItem>
+            <ContextMenuItem onClick={() => duplicateNode(node)}>
+              {m.treePage_duplicate()}
+            </ContextMenuItem>
+            {/* <ContextMenuItem onClick={() => {
+              const targetName = window.prompt("输入目标页面/文件夹名称");
+              if (targetName) {
+                const targetNode = pages.find(p => p.name === targetName);
+                if (targetNode && getDepth(targetNode.id) <= 1) {
+                  fetch(`/api/prd/pages/${node.id}`, {
+                    method: "PUT",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ parentId: targetNode.id }),
+                  }).then(() => refreshPages());
+                }
+              }
+            }}>
+              移动到...
+            </ContextMenuItem> */}
+            <ContextMenuSeparator />
+            <ContextMenuItem onClick={() => setDeleteConfirmId(node.id)} className="text-destructive">
+              {m.treePage_delete()}
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenu>
+{actualExpanded && node.children.length > 0 && (
+          <div>{node.children.map(child => renderNode(child, depth + 1))}</div>
+        )}
+      </div>
+    );
+  };
+
+  const deleteTarget = deleteConfirmId ? pages.find(p => p.id === deleteConfirmId) : null;
+
+  return (
+    <>
+      <ConfirmDialog
+        open={!!deleteConfirmId}
+        onOpenChange={(v) => { if (!v) setDeleteConfirmId(null); }}
+        contentClassName="border border-border"
+        title={m.treePage_confirmDelete()}
+        description={m.treePage_deleteConfirmDesc({ name: deleteTarget?.name || m.prd_treePage_unnamed() })}
+        cancelLabel={m.common_button_cancel()}
+        confirmLabel={m.treePage_delete()}
+        confirmVariant="destructive"
+        onConfirm={() => deleteConfirmId && deleteNode(deleteConfirmId)}
+      />
+
+      <div className="flex flex-col h-full">
+        <div className="shrink-0 flex items-center gap-1 h-8 px-2 border-b">
+          <div className="relative flex-1">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 size-3 text-muted-foreground/40" />
+            <Input
+              className="h-6 pl-6 pr-2 text-xs md:text-xs placeholder:text-xs placeholder:text-muted-foreground/30"
+              placeholder={m.treePage_searchPlaceholder()}
+              value={searchQuery}
+              onChange={e => setSearchQuery(e.target.value)}
+            />
+          </div>
+          <Tooltip>
+            <TooltipTrigger render={<button onClick={() => handleStartCreate("folder")}
+                className="size-6 shrink-0 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-muted-foreground" />}>
+                <FolderPlus className="size-3.5" />
+              </TooltipTrigger>
+            <TooltipContent>
+              <p>{m.treePage_newFolder()}</p>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger render={<button onClick={() => handleStartCreate("page")}
+                className="size-6 shrink-0 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-muted-foreground" />}>
+                <Plus className="size-3.5" />
+              </TooltipTrigger>
+            <TooltipContent>
+              <p>{m.treePage_newPage()}</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+        <div
+          className="flex-1 overflow-y-auto py-1"
+          onDragOver={(e) => { if (dragNodeIdRef.current) e.preventDefault(); }}
+          onDrop={handleDropEmpty}
+        >
+          {filteredTree.map(node => renderNode(node))}
+          {createState.creatingType && (
+            <div
+              className="flex items-center gap-1.5 px-2 py-1.5 rounded text-xs"
+              style={{ paddingLeft: `${12}px` }}
+            >
+              {createState.creatingType === "folder" ? (
+                <Folder className="size-3.5 shrink-0 text-muted-foreground" />
+              ) : (
+                <File className="size-3.5 shrink-0 text-muted-foreground" />
+              )}
+              <input
+                ref={creatingRef}
+                className="h-7 w-full rounded-md border border-input bg-transparent px-1.5 py-0 text-xs outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 placeholder:text-muted-foreground/40"
+                value={createState.creatingName}
+                aria-label={m.treePage_pageName()}
+                onChange={e => createDispatch({ type: "SET_CREATING_NAME", value: e.target.value })}
+                onKeyDown={e => {
+                  if (e.key === "Enter") handleCreateConfirm();
+                  if (e.key === "Escape") handleCreateCancel();
+                }}
+                onBlur={handleCreateConfirm}
+                placeholder={createState.creatingType === "folder" ? m.treePage_folderName() : m.treePage_pageName()}
+              />
+            </div>
+          )}
+          {filteredTree.length === 0 && !createState.creatingType && (
+            <div className="px-3 py-4 text-xs text-muted-foreground text-center">
+              {searchQuery ? m.treePage_noMatch() : m.treePage_noPages()}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/design/editor/share/design-share-client.tsx

@@ -0,0 +1,116 @@
+// 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, useMemo, useCallback } from "react";
+import { m } from '@/paraglide/messages.js'
+import { SharePasswordGate } from "./share-password-gate";
+import { ShareLayout } from "./share-layout";
+import { ShareSSEListener } from "./share-sse-listener";
+import { AlertCircle } from "lucide-react";
+import { AuthLayout, AuthLayoutLeft, AuthLayoutRight } from "@/components/shared-kit/auth/auth-layout";
+
+interface SharePageClientProps {
+  designId: string;
+  share: any;
+  hasPassword: boolean;
+  isActive?: boolean;
+  versionLabel?: string | null;
+  shareNotFound?: boolean;
+}
+
+export function SharePageClient({ designId, share, hasPassword: initialHasPassword, isActive: initialIsActive = true, versionLabel, shareNotFound }: SharePageClientProps) {
+  const sessionKey = useMemo(() => `share_pwd_${designId}_${versionLabel || 'main'}`, [designId, versionLabel]);
+  const [hasPassword, setHasPassword] = useState(initialHasPassword);
+  const [active, setActive] = useState(initialIsActive);
+  const [verified, setVerified] = useState(
+    !hasPassword || (typeof window !== "undefined" && !!sessionStorage.getItem(sessionKey))
+  );
+
+  const handlePasswordChange = useCallback((newHasPassword: boolean) => {
+    sessionStorage.removeItem(sessionKey);
+    setHasPassword(newHasPassword);
+    if (newHasPassword) {
+      setVerified(false);
+    } else {
+      setVerified(true);
+    }
+  }, [sessionKey]);
+
+  const handleShareDisabled = useCallback(() => {
+    setActive(false);
+  }, []);
+
+  const handleShareEnabled = useCallback(() => {
+    setActive(true);
+  }, []);
+
+  return (
+    <>
+      <ShareSSEListener designId={designId} shareId={share?.id || ''} versionLabel={versionLabel} onPasswordChange={handlePasswordChange} onShareDisabled={handleShareDisabled} onShareEnabled={handleShareEnabled} />
+      {shareNotFound ? (
+        <AuthLayout>
+          <AuthLayoutLeft>
+            <div className="flex flex-col gap-6 w-full max-w-xs">
+              <div className="space-y-2">
+                <AlertCircle className="size-10 text-muted-foreground" />
+                <h1 className="text-2xl font-bold">{m.shareClient_notFoundTitle()}</h1>
+                <p className="text-muted-foreground text-sm">
+                  {versionLabel ? m.shareClient_versionUnavailable({ version: versionLabel }) : m.shareClient_linkUnavailable()}
+                </p>
+              </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">{m.share_brandTagline()}</p>
+            </div>
+          </AuthLayoutRight>
+        </AuthLayout>
+      ) : !active ? (
+        <AuthLayout>
+          <AuthLayoutLeft>
+            <div className="flex flex-col gap-6 w-full max-w-xs">
+              <div className="space-y-2">
+                <AlertCircle className="size-10 text-muted-foreground" />
+                <h1 className="text-2xl font-bold">{m.shareClient_inactiveTitle()}</h1>
+                <p className="text-muted-foreground text-sm">
+                  {versionLabel ? m.shareClient_versionUnavailable({ version: versionLabel }) : m.shareClient_linkUnavailable()}
+                </p>
+              </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">{m.share_brandTagline()}</p>
+            </div>
+          </AuthLayoutRight>
+        </AuthLayout>
+      ) : !verified ? (
+        <SharePasswordGate
+          designId={designId}
+          shareName={share.design.name}
+          onVerified={() => setVerified(true)}
+          designver={versionLabel}
+        />
+      ) : (
+        <ShareLayout designId={designId} share={share} versionLabel={versionLabel} />
+      )}
+    </>
+  );
+}