@hienlh/ppm 0.23.13 → 0.23.15

package/src/web/components/design/comments/use-design-comments.ts

@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import {
-  createDesignComment, deleteDesignComment, listDesignComments, updateDesignComment, type CommentPatch,
+  addDesignCommentReply, createDesignComment, deleteDesignComment, deleteDesignCommentReply, deleteShareLinkThreads,
+  listDesignComments, updateDesignComment, updateDesignCommentReply, type CommentPatch,
 } from "@/lib/design/api-design-comments";
-import { isOpenComment, type CommentAnchor, type DesignComment } from "../../../../shared/design-comment-types";
+import { isOpenComment, type CommentAnchor } from "../../../../shared/design-comment-types";
+import type { DesignCommentOwnerView } from "../../../../shared/design-comment-thread-types";
 
 /**
  * One design's comments, kept in step with the server.
@@ -10,27 +12,35 @@ import { isOpenComment, type CommentAnchor, type DesignComment } from "../../../
  * `.design/` is not watched, so the list refreshes on `design:comments_changed` — which also
  * covers another device commenting on the same design. Every change this client makes is
  * applied locally at once from the server's answer; the event that follows only confirms it.
- * Refetches are debounced, because marking N comments sent is N events.
+ * Refetches are debounced, because marking N comments sent is N events. A deleted reply or a
+ * link's threads come back with no body to apply, so those are dropped locally the same way.
  */
 
 export const COMMENTS_CHANGED_EVENT = "design:comments_changed";
 
+type Thread = DesignCommentOwnerView;
+
 export interface DesignCommentsState {
-  comments: DesignComment[] | null;
+  comments: Thread[] | null;
   /** Open comments in the order they were made; a pin's number is its index here plus one. */
-  open: DesignComment[];
-  resolved: DesignComment[];
+  open: Thread[];
+  resolved: Thread[];
   error: string | null;
   reload: () => void;
-  add: (anchor: CommentAnchor, body: string) => Promise<DesignComment>;
-  update: (id: string, patch: CommentPatch) => Promise<DesignComment>;
+  add: (anchor: CommentAnchor, body: string) => Promise<Thread>;
+  update: (id: string, patch: CommentPatch) => Promise<Thread>;
   remove: (id: string) => Promise<void>;
+  reply: (id: string, body: string) => Promise<Thread>;
+  editReply: (id: string, replyId: string, body: string) => Promise<Thread>;
+  removeReply: (id: string, replyId: string) => Promise<void>;
+  /** Every thread reviewers on one share link started. */
+  removeLinkThreads: (linkId: string) => Promise<void>;
 }
 
-const byCreated = (a: DesignComment, b: DesignComment) => (a.createdAt < b.createdAt ? -1 : a.createdAt > b.createdAt ? 1 : 0);
+const byCreated = (a: Thread, b: Thread) => (a.createdAt < b.createdAt ? -1 : a.createdAt > b.createdAt ? 1 : 0);
 
 export function useDesignComments(projectName: string, slug: string): DesignCommentsState {
-  const [comments, setComments] = useState<DesignComment[] | null>(null);
+  const [comments, setComments] = useState<Thread[] | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   const reload = useCallback(() => {
@@ -56,7 +66,7 @@ export function useDesignComments(projectName: string, slug: string): DesignComm
     };
   }, [projectName, slug, reload]);
 
-  const replace = useCallback((next: DesignComment) => {
+  const replace = useCallback((next: Thread) => {
     setComments((list) => {
       const rest = (list ?? []).filter((c) => c.id !== next.id);
       return [...rest, next].sort(byCreated);
@@ -80,10 +90,32 @@ export function useDesignComments(projectName: string, slug: string): DesignComm
     setComments((list) => (list ?? []).filter((c) => c.id !== id));
   }, [projectName, slug]);
 
+  const reply = useCallback(async (id: string, body: string) => {
+    const thread = await addDesignCommentReply(projectName, slug, id, body);
+    replace(thread);
+    return thread;
+  }, [projectName, slug, replace]);
+
+  const editReply = useCallback(async (id: string, replyId: string, body: string) => {
+    const thread = await updateDesignCommentReply(projectName, slug, id, replyId, body);
+    replace(thread);
+    return thread;
+  }, [projectName, slug, replace]);
+
+  const removeReply = useCallback(async (id: string, replyId: string) => {
+    await deleteDesignCommentReply(projectName, slug, id, replyId);
+    setComments((list) => (list ?? []).map((c) => (c.id === id ? { ...c, replies: c.replies.filter((r) => r.id !== replyId) } : c)));
+  }, [projectName, slug]);
+
+  const removeLinkThreads = useCallback(async (linkId: string) => {
+    await deleteShareLinkThreads(projectName, slug, linkId);
+    setComments((list) => (list ?? []).filter((c) => !(c.author.kind === "guest" && c.author.linkId === linkId)));
+  }, [projectName, slug]);
+
   const { open, resolved } = useMemo(() => {
     const sorted = [...(comments ?? [])].sort(byCreated);
     return { open: sorted.filter(isOpenComment), resolved: sorted.filter((c) => !isOpenComment(c)) };
   }, [comments]);
 
-  return { comments, open, resolved, error, reload, add, update, remove };
+  return { comments, open, resolved, error, reload, add, update, remove, reply, editReply, removeReply, removeLinkThreads };
 }

package/src/web/components/design/design-split-layout.tsx

@@ -1,8 +1,11 @@
-import { useCallback, useEffect, useRef, useState, type ReactNode, type RefObject } from "react";
+import {
+  useCallback, useEffect, useRef, useState, type CSSProperties, type PointerEvent as ReactPointerEvent, type ReactNode, type RefObject,
+} from "react";
 import { Group, Panel, Separator, type Layout } from "react-resizable-panels";
 import { cn } from "@/lib/utils";
 import {
-  clampChatPercent, loadDesignViewPrefs, saveDesignViewPrefs, withChatPercent,
+  clampChatPercent, clampWindowChatWidth, loadDesignViewPrefs, saveDesignViewPrefs, withChatPercent, withWindowChatWidth,
+  MAX_WINDOW_CHAT_WIDTH, MIN_WINDOW_CHAT_WIDTH,
 } from "@/lib/design/design-view-prefs";
 import type { DesignLayoutControls } from "./design-tab-context";
 import { DesignChatPaneHeader } from "./design-layout-controls";
@@ -10,6 +13,21 @@ import { DesignMobilePaneBar } from "./design-mobile-layout";
 
 const CHAT_PANEL_ID = "design-chat";
 
+/**
+ * In a floating window the chat is a column after the canvas, `--design-chat-w` wide and
+ * never more than half the window. The panels keep their DOM order (moving the iframe would
+ * reload the design), so the order and sizes are set on the library's panel wrappers by
+ * descendant rules, `!important` to beat its inline flex.
+ */
+const WINDOW_COLUMNS = [
+  "[&_[data-design-pane=canvas]]:order-1! [&_[data-design-pane=canvas]]:grow! [&_[data-design-pane=canvas]]:basis-0!",
+  "[&_[data-design-pane=chat]]:order-3! [&_[data-design-pane=chat]]:grow-0! [&_[data-design-pane=chat]]:shrink-0!",
+  "[&_[data-design-pane=chat]]:basis-[min(var(--design-chat-w),50%)]!",
+].join(" ");
+
+/** Arrow-key step for the window chat column's handle. */
+const WIDTH_STEP = 20;
+
 /**
  * The design tab's one layout tree, for every width: chat and canvas side by side in a
  * resizable group, or one of them alone, with the phone's bar under it on a phone.
@@ -33,11 +51,13 @@ export function DesignTabLayout({ rootRef, layout, chat, canvas }: {
   canvas: (more: { open: boolean; onClose: () => void }) => ReactNode;
 }) {
   const [chatPercent] = useState(() => loadDesignViewPrefs().chatPercent);
+  const [windowChatWidth, setWindowChatWidth] = useState(() => loadDesignViewPrefs().windowChatWidth);
   const [resizing, setResizing] = useState(false);
   const [moreOpen, setMoreOpen] = useState(false);
-  // Read by the layout callback, which must not record a share while a pane is hidden.
-  const splitRef = useRef(layout.split);
-  splitRef.current = layout.split;
+  // Read by the layout callback, which must not record a share while a pane is hidden, nor
+  // while a window's fixed chat column stands in for the split.
+  const splitRef = useRef(layout.split && !layout.windowed);
+  splitRef.current = layout.split && !layout.windowed;
 
   useEffect(() => {
     if (!resizing) return;
@@ -59,32 +79,49 @@ export function DesignTabLayout({ rootRef, layout, chat, canvas }: {
     if (splitRef.current && typeof pct === "number") saveDesignViewPrefs(withChatPercent(loadDesignViewPrefs(), pct));
   }, []);
 
-  const { split, pane } = layout;
+  const { split, pane, windowed } = layout;
+  // A window's split is not the user's to drag: the chat is a fixed column on the right.
+  const draggable = split && !windowed;
   // One pane shows no separator, so the library's hold on touch gestures (`pan-y` for a
   // horizontal group) would only stop a design from scrolling sideways under a finger.
   const panelTouch = split ? undefined : "touch-auto!";
+
+  // The window column's width: written straight to the root while dragging (no re-render per
+  // pointermove), committed to state and the device's prefs when the drag or key press ends.
+  const commitWidth = useCallback((width: number) => {
+    const next = clampWindowChatWidth(width);
+    rootRef.current?.style.setProperty("--design-chat-w", `${next}px`);
+    setWindowChatWidth(next);
+    saveDesignViewPrefs(withWindowChatWidth(loadDesignViewPrefs(), next));
+  }, [rootRef]);
+
   return (
     <div ref={rootRef}
+      style={windowed ? ({ "--design-chat-w": `${windowChatWidth}px` } as CSSProperties) : undefined}
       className={cn(
         "flex h-full min-h-0 flex-col",
         !split && pane === "canvas" && "[&_[data-design-pane=chat]]:hidden!",
         !split && pane === "chat" && "[&_[data-design-pane=canvas]]:hidden!",
+        windowed && split && WINDOW_COLUMNS,
       )}
       data-design-view={split ? "split" : pane}
       data-design-resizing={resizing ? "" : undefined}
       onPointerDownCapture={onPointerDownCapture}>
       <div className="min-h-0 flex-1">
-        <Group orientation="horizontal" disabled={!split} onLayoutChanged={onLayoutChanged} style={{ height: "100%" }}>
+        <Group orientation="horizontal" disabled={!draggable} onLayoutChanged={onLayoutChanged} style={{ height: "100%" }}>
           {/* Sizes are percentage strings: bare numbers mean pixels in this library. */}
           <Panel id={CHAT_PANEL_ID} data-design-pane="chat" className={panelTouch}
             defaultSize={`${clampChatPercent(chatPercent)}%`} minSize="20%" maxSize="70%">
-            <div className={cn("flex h-full min-w-0 flex-col", split && "border-r border-border")}>
+            <div className={cn("relative flex h-full min-w-0 flex-col", split && (windowed ? "border-l border-border-soft" : "border-r border-border"))}>
+              {windowed && split && (
+                <WindowChatHandle width={windowChatWidth} rootRef={rootRef} onResizing={setResizing} onCommit={commitWidth} />
+              )}
               {layout.switcher === "toolbar" && <DesignChatPaneHeader layout={layout} />}
               <div className="min-h-0 flex-1" data-design-chat-slot="">{chat}</div>
             </div>
           </Panel>
-          <Separator disabled={!split}
-            className={cn("w-1 cursor-col-resize bg-border/30 transition-colors hover:bg-primary/30 active:bg-primary/50", !split && "hidden")} />
+          <Separator disabled={!draggable}
+            className={cn("w-1 cursor-col-resize bg-border/30 transition-colors hover:bg-primary/30 active:bg-primary/50", !draggable && "hidden")} />
           <Panel data-design-pane="canvas" className={panelTouch} minSize="25%">
             {canvas({ open: moreOpen, onClose: () => setMoreOpen(false) })}
           </Panel>
@@ -97,3 +134,62 @@ export function DesignTabLayout({ rootRef, layout, chat, canvas }: {
     </div>
   );
 }
+
+/**
+ * The window chat column's left edge, dragged to widen or narrow the chat (or moved with the
+ * arrow keys). Raises `onResizing` for the drag so the canvas iframe stops swallowing the
+ * pointer, the same guard the tab's split uses.
+ */
+function WindowChatHandle({ width, rootRef, onResizing, onCommit }: {
+  width: number;
+  rootRef: RefObject<HTMLDivElement | null>;
+  onResizing: (resizing: boolean) => void;
+  onCommit: (width: number) => void;
+}) {
+  const drag = useRef<{ x: number; width: number; last: number } | null>(null);
+
+  const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    const start = e.currentTarget.parentElement?.getBoundingClientRect().width ?? width;
+    drag.current = { x: e.clientX, width: start, last: start };
+    onResizing(true);
+  };
+  const onPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {
+    const d = drag.current;
+    if (!d) return;
+    // The column sits on the right, so dragging left widens it.
+    d.last = clampWindowChatWidth(d.width + (d.x - e.clientX));
+    rootRef.current?.style.setProperty("--design-chat-w", `${d.last}px`);
+  };
+  const end = () => {
+    const d = drag.current;
+    if (!d) return;
+    drag.current = null;
+    onResizing(false);
+    onCommit(d.last);
+  };
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Chat width"
+      aria-valuenow={width}
+      aria-valuemin={MIN_WINDOW_CHAT_WIDTH}
+      aria-valuemax={MAX_WINDOW_CHAT_WIDTH}
+      tabIndex={0}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={end}
+      onPointerCancel={end}
+      onKeyDown={(e) => {
+        if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+        e.preventDefault();
+        onCommit(width + (e.key === "ArrowLeft" ? WIDTH_STEP : -WIDTH_STEP));
+      }}
+      className="absolute inset-y-0 -left-1 z-10 w-2 cursor-col-resize touch-none outline-none transition-colors hover:bg-primary/30 focus-visible:bg-primary/40 active:bg-primary/50"
+    />
+  );
+}

package/src/web/components/design/design-tab-context.ts

@@ -9,6 +9,8 @@ export interface DesignLayoutControls extends DesignLayout {
   /** Which pane a single-pane layout shows; not remembered. */
   setPane: (pane: DesignPane) => void;
   setExpanded: (expanded: boolean) => void;
+  /** In a floating window: open or close the chat column. */
+  setWindowChat: (open: boolean) => void;
 }
 
 /**

package/src/web/components/design/design-tab.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo } from "react";
 import { Loader2, Palette } from "@/lib/icons";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { usePanelStore } from "@/stores/panel-store";
+import { isWindowPanelId } from "@/stores/panel-utils";
 import { useStreamingStore } from "@/stores/streaming-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useDesignSessionState } from "@/hooks/use-design-session-state";
@@ -49,7 +50,10 @@ function DesignTabBody({ tabId, metadata, design, refreshDesign }: {
   const isMobile = useIsMobile();
   const session = useDesignSessionState(tabId, metadata);
   const isActive = usePanelStore((s) => Object.values(s.panels).some((p) => p.activeTabId === tabId));
-  const { rootRef, layout, showChat } = useDesignLayout({ isPhone: isMobile, isActive });
+  // A design in a floating window lays itself out as one: canvas first, chat on the right.
+  const windowed = usePanelStore((s) =>
+    Object.values(s.panels).some((p) => isWindowPanelId(p.id) && p.tabs.some((t) => t.id === tabId)));
+  const { rootRef, layout, showChat } = useDesignLayout({ isPhone: isMobile, isActive, windowed });
   const isStreaming = useStreamingStore((s) => (session.sessionId ? s.sessions.has(session.sessionId) : false));
   const projectName = String(metadata.projectName);
 

package/src/web/components/design/design-toolbar.tsx

@@ -1,7 +1,7 @@
 import type { ElementType, ReactNode } from "react";
 import {
-  Columns2, Download, History, Maximize2, MessageSquarePlus, Monitor, MoreHorizontal, MousePointerClick, Move,
-  Presentation, RefreshCw, Send, SlidersHorizontal, Smartphone, Sparkles, Tablet, Undo2,
+  Columns2, Download, History, Maximize2, MessageSquare, MessageSquarePlus, Monitor, MoreHorizontal, MousePointerClick, Move,
+  Presentation, RefreshCw, Send, Share2, SlidersHorizontal, Smartphone, Sparkles, Tablet, Undo2,
 } from "@/lib/icons";
 import { toast } from "sonner";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
@@ -20,6 +20,7 @@ import { DesignLayoutMenu, DesignPaneSwitch } from "./design-layout-controls";
 import type { DesignVariantsFeature } from "./variants/use-design-variants";
 import { DesignVariantMenu } from "./variants/design-variant-controls";
 import { ToolbarBadge } from "./design-toolbar-badge";
+import type { DesignShareFeature } from "./share/design-share-dialog";
 
 /**
  * The canvas toolbar and its registry.
@@ -43,6 +44,7 @@ export interface DesignToolbarContext extends DesignTabContextValue {
   undo: DesignUndoFeature;
   exports: DesignExportFeature;
   variants: DesignVariantsFeature;
+  share: DesignShareFeature;
 }
 
 export interface DesignToolbarItem {
@@ -89,6 +91,11 @@ export const DESIGN_TOOLBAR_ITEMS: DesignToolbarItem[] = [
     badge: (ctx) => ctx.comments.openCount || null,
     run: (ctx) => ctx.comments.togglePanel(),
   },
+  {
+    // Opens the Share dialog; with PPM sign-in off it explains why nothing can be shared.
+    id: "share", label: "Share for review", icon: Share2, placement: "bar",
+    isActive: (ctx) => ctx.share.open, run: (ctx) => ctx.share.setOpen(true),
+  },
   {
     // Offered whenever design.json parses; with no tweaks declared the panel asks the AI for some.
     id: "tweaks", label: "Tweaks", icon: SlidersHorizontal, placement: "bar",
@@ -133,10 +140,21 @@ export const DESIGN_TOOLBAR_ITEMS: DesignToolbarItem[] = [
     // Desktop only, as a menu of its own: a phone always shows one pane. Hidden while the
     // canvas is expanded, where hiding the canvas pane would take the expanded view with it.
     id: "layout", label: "Layout", icon: Columns2, placement: "bar",
-    isHidden: (ctx) => ctx.isMobile || ctx.layout.expanded,
+    isHidden: (ctx) => ctx.isMobile || ctx.layout.expanded || ctx.layout.windowed,
     renderBar: (ctx, className) => <DesignLayoutMenu key="layout" layout={ctx.layout} className={className} />,
     run: (ctx) => ctx.layout.setOverride("auto"),
   },
+  {
+    // In a floating window the chat is a column on the right; this shows or hides it. Last in
+    // the bar so it sits next to the column it controls.
+    id: "chat", label: "Chat", icon: MessageSquare, placement: "bar",
+    isHidden: (ctx) => !ctx.layout.windowed,
+    isActive: (ctx) => ctx.layout.windowChat,
+    run: (ctx) => {
+      if (ctx.layout.expanded) ctx.layout.setExpanded(false);
+      ctx.layout.setWindowChat(!ctx.layout.windowChat);
+    },
+  },
 ];
 
 export const visibleItems = (ctx: DesignToolbarContext) => DESIGN_TOOLBAR_ITEMS.filter((i) => !i.isHidden?.(ctx));
@@ -176,7 +194,9 @@ export function DesignToolbar({ ctx }: { ctx: DesignToolbarContext }) {
           disabled={item.isDisabled?.(ctx)} onClick={() => item.run(ctx)}
           className={cn(iconBtn, "relative", item.isActive?.(ctx) && "bg-surface-elevated text-foreground")}>
           <item.icon className="size-4" />
-          <ToolbarBadge count={item.badge?.(ctx)} className="absolute -right-1 -top-1" />
+          {/* Inside the button's top edge: the toolbar is only 2px taller than its buttons and a
+              window or split clips anything above it, so a badge raised past the edge is cut off. */}
+          <ToolbarBadge count={item.badge?.(ctx)} className="absolute -right-1.5 top-0" />
         </button>
       ))}
       {more.length > 0 && (

package/src/web/components/design/share/design-share-dialog.tsx

@@ -0,0 +1,81 @@
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { Loader2 } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { shareBlockedReason } from "@/lib/design/design-share-address-state";
+import { SHARE_LIMITS } from "../../../../shared/design-share-types";
+import { DesignResponsiveDialog } from "../dialogs/design-responsive-dialog";
+import { useDesignTab } from "../design-tab-context";
+import { ShareAddressBlock } from "./share-address-block";
+import { NewShareLinkFields, useNewShareLinkForm } from "./new-share-link-form";
+import { SharedLinksList } from "./shared-links-list";
+import { useShareAddress } from "./use-share-address";
+import { useShareLinks } from "./use-share-links";
+
+/**
+ * Share for review: where links open, a new link (label, expiry, version), and the design's
+ * existing links with their actions. A dialog on desktop, a bottom sheet on a phone, with
+ * Create in the footer. While PPM sign-in is off nothing can be created and existing links
+ * read as paused, because the server opens none of them.
+ */
+
+export interface DesignShareFeature {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export function useDesignShare(): DesignShareFeature {
+  const [open, setOpen] = useState(false);
+  return useMemo(() => ({ open, setOpen }), [open]);
+}
+
+export function DesignShareDialog({ feature }: { feature: DesignShareFeature }) {
+  const { projectName, slug } = useDesignTab();
+  const address = useShareAddress(feature.open);
+  const links = useShareLinks(projectName, slug, feature.open);
+  const form = useNewShareLinkForm(links);
+  const blocked = shareBlockedReason(address.address, links.links?.length ?? 0, SHARE_LIMITS.maxLinksPerDesign);
+  const signinOff = address.view.kind === "signin-off";
+
+  const create = async () => {
+    if (blocked) return;
+    const link = await form.submit();
+    if (!link) return;
+    // No Copy action on the toast: a modal dialog blocks clicks outside itself, so the row's
+    // own Copy button is the one that works. On a phone the list sits below the form.
+    toast.success("Link created");
+    requestAnimationFrame(() => {
+      document.querySelector(`[data-link-id="${CSS.escape(link.id)}"]`)?.scrollIntoView({ block: "nearest" });
+    });
+  };
+
+  return (
+    <DesignResponsiveDialog
+      open={feature.open}
+      onClose={() => feature.setOpen(false)}
+      title="Share for review"
+      description="Reviewers open a saved version of this design and pin comments on it. They never see the live copy."
+      className="sm:max-w-lg"
+      footer={<>
+        <Button variant="outline" onClick={() => feature.setOpen(false)}>Close</Button>
+        <Button onClick={() => void create()} disabled={!!blocked || form.creating} data-testid="share-create"
+          title={blocked ?? undefined}>
+          {form.creating && <Loader2 className="size-4 animate-spin" />}
+          {signinOff ? blocked : "Create link"}
+        </Button>
+      </>}
+    >
+      <div className="flex flex-col gap-4" data-testid="share-dialog">
+        <ShareAddressBlock view={address.view} onStart={() => void address.startTemporary()} onRetryLoad={() => void address.refresh()} />
+        {!signinOff && (
+          <section className="flex flex-col gap-2">
+            <h3 className="text-xs font-semibold uppercase tracking-wide text-text-subtle">New link</h3>
+            <NewShareLinkFields form={form} projectName={projectName} slug={slug} />
+            {blocked && !form.error && address.address && <p className="text-xs text-text-subtle">{blocked}</p>}
+          </section>
+        )}
+        <SharedLinksList links={links} address={address.address} />
+      </div>
+    </DesignResponsiveDialog>
+  );
+}

package/src/web/components/design/share/new-share-link-form.tsx

@@ -0,0 +1,85 @@
+import { useCallback, useState } from "react";
+import {
+  DEFAULT_SHARE_EXPIRY, expiryFromChoice, toDateInputValue, type ShareExpiryChoice,
+} from "@/lib/design/design-share-expiry";
+import { SHARE_LIMITS, type DesignShareLink } from "../../../../shared/design-share-types";
+import { ShareExpiryPicker } from "./share-expiry-picker";
+import { CURRENT_VERSION, ShareVersionPicker } from "./share-version-picker";
+import type { ShareLinksFeature } from "./use-share-links";
+
+/**
+ * The New link part of the Share dialog: label, expiry and version. The Create button lives
+ * in the dialog's footer (the thumb zone on a phone), so the form's state is a hook the
+ * dialog holds and hands to both.
+ */
+
+export interface NewShareLinkForm {
+  label: string;
+  setLabel: (label: string) => void;
+  expiry: ShareExpiryChoice;
+  setExpiry: (choice: ShareExpiryChoice) => void;
+  version: string;
+  setVersion: (version: string) => void;
+  error: string | null;
+  creating: boolean;
+  submit: () => Promise<DesignShareLink | null>;
+}
+
+const message = (e: unknown) => (e instanceof Error ? e.message : String(e));
+
+export function useNewShareLinkForm(links: ShareLinksFeature): NewShareLinkForm {
+  const [label, setLabel] = useState("");
+  const [expiry, setExpiry] = useState<ShareExpiryChoice>(() => ({
+    preset: DEFAULT_SHARE_EXPIRY, customDate: toDateInputValue(Date.now() + 14 * 24 * 60 * 60 * 1000),
+  }));
+  const [version, setVersion] = useState(CURRENT_VERSION);
+  const [error, setError] = useState<string | null>(null);
+  const [creating, setCreating] = useState(false);
+
+  const submit = useCallback(async () => {
+    const expiresAt = expiryFromChoice(expiry, Date.now());
+    if (!expiresAt.ok) { setError(expiresAt.error); return null; }
+    setCreating(true);
+    setError(null);
+    try {
+      const link = await links.create({ label: label.trim() || undefined, expiresAt: expiresAt.expiresAt, version });
+      setLabel("");
+      setVersion(CURRENT_VERSION);
+      return link;
+    } catch (e) {
+      setError(message(e) || "Could not create the link");
+      return null;
+    } finally {
+      setCreating(false);
+    }
+  }, [expiry, label, version, links]);
+
+  const setExpiryAndClear = useCallback((choice: ShareExpiryChoice) => { setExpiry(choice); setError(null); }, []);
+  return { label, setLabel, expiry, setExpiry: setExpiryAndClear, version, setVersion, error, creating, submit };
+}
+
+const field = "flex flex-col gap-1.5";
+const caption = "text-xs font-medium text-text-subtle";
+
+export function NewShareLinkFields({ form, projectName, slug }: { form: NewShareLinkForm; projectName: string; slug: string }) {
+  return (
+    <form className="flex flex-col gap-3" onSubmit={(e) => { e.preventDefault(); void form.submit(); }} data-testid="share-new-link">
+      <div className={field}>
+        <label htmlFor="share-new-label" className={caption}>Label (optional)</label>
+        <input id="share-new-label" value={form.label} maxLength={SHARE_LIMITS.maxLabelChars}
+          placeholder="For example: Client review" onChange={(e) => form.setLabel(e.target.value)}
+          className="min-h-11 w-full rounded-md border border-border bg-background px-3 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary md:min-h-9" />
+      </div>
+      <div className={field}>
+        <span className={caption}>Expires after</span>
+        <ShareExpiryPicker idPrefix="share-new" value={form.expiry} onChange={form.setExpiry} />
+      </div>
+      <div className={field}>
+        <label htmlFor="share-new-version" className={caption}>Version reviewers see</label>
+        <ShareVersionPicker id="share-new-version" projectName={projectName} slug={slug}
+          value={form.version} onChange={form.setVersion} />
+      </div>
+      {form.error && <p className="text-xs text-destructive" role="alert" data-testid="share-new-error">{form.error}</p>}
+    </form>
+  );
+}

package/src/web/components/design/share/share-address-block.tsx

@@ -0,0 +1,101 @@
+import type { ReactNode } from "react";
+import { Globe, Loader2, Lock, TriangleAlert } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { openSettings } from "@/components/settings/open-settings";
+import { openRemoteAccess } from "@/components/settings/remote-access/remote-access-tab-store";
+import { QUICK_ADDRESS_WARNING, SIGNIN_OFF_REASON, type ShareAddressView } from "@/lib/design/design-share-address-state";
+
+/**
+ * Where share links open: the stable address, the temporary one with its warning, or no
+ * public address with the two ways to get one. With PPM sign-in off it says only that
+ * sharing waits for sign-in, because a link would otherwise open all of PPM.
+ */
+
+const btn = "min-h-11 cursor-pointer md:min-h-9";
+
+function Box({ tone = "plain", icon, children, testId }: {
+  tone?: "plain" | "warn"; icon: ReactNode; children: ReactNode; testId: string;
+}) {
+  return (
+    <div data-testid={testId}
+      className={cn("flex gap-3 rounded-lg border p-3 text-sm leading-relaxed",
+        tone === "warn" ? "border-warning/40 bg-warning/10" : "border-border bg-surface-elevated/40")}>
+      <span className="mt-0.5 shrink-0 text-text-subtle">{icon}</span>
+      <div className="flex min-w-0 flex-1 flex-col gap-2">{children}</div>
+    </div>
+  );
+}
+
+const SetUpPermanent = () => (
+  <Button variant="outline" className={btn} onClick={() => openRemoteAccess("public-link")}>Set up a permanent address</Button>
+);
+
+export function ShareAddressBlock({ view, onStart, onRetryLoad }: {
+  view: ShareAddressView;
+  onStart: () => void;
+  onRetryLoad: () => void;
+}) {
+  switch (view.kind) {
+    case "loading":
+      return <Box testId="share-address-loading" icon={<Loader2 className="size-4 animate-spin" />}>Reading the public address…</Box>;
+    case "error":
+      return (
+        <Box testId="share-address-error" tone="warn" icon={<TriangleAlert className="size-4" />}>
+          <p>Could not read the public address: {view.message}</p>
+          <div><Button variant="outline" className={btn} onClick={onRetryLoad}>Try again</Button></div>
+        </Box>
+      );
+    case "signin-off":
+      return (
+        <Box testId="share-address-signin-off" tone="warn" icon={<Lock className="size-4" />}>
+          <p className="font-medium">{SIGNIN_OFF_REASON}</p>
+          <p className="text-text-2">
+            A share link reaches PPM itself, so with sign-in off anyone holding one could open all of PPM.
+            Existing links are paused until sign-in is back on.
+          </p>
+          <div><Button variant="outline" className={btn} onClick={() => openSettings("general")}>Open General</Button></div>
+        </Box>
+      );
+    case "named":
+    case "quick":
+      return (
+        <Box testId={`share-address-${view.kind}`} tone={view.kind === "quick" || view.warning ? "warn" : "plain"}
+          icon={view.kind === "quick" ? <TriangleAlert className="size-4" /> : <Globe className="size-4" />}>
+          <p>Links open at <span className="break-all font-medium text-foreground">{view.url}</span></p>
+          {view.warning && <p className="text-text-2">{view.warning}</p>}
+          {view.kind === "quick" && <>
+            <p className="text-text-2">{QUICK_ADDRESS_WARNING}</p>
+            <div><SetUpPermanent /></div>
+          </>}
+        </Box>
+      );
+    case "starting":
+      return (
+        <Box testId="share-address-starting" icon={<Loader2 className="size-4 animate-spin" />}>
+          Starting a temporary public address… This usually takes a few seconds.
+        </Box>
+      );
+    case "failed":
+    case "none": {
+      const failed = view.kind === "failed";
+      const darkTunnel = view.kind === "none" && view.enabled;
+      return (
+        <Box testId={failed ? "share-address-failed" : "share-address-none"} tone={failed || darkTunnel ? "warn" : "plain"}
+          icon={<TriangleAlert className="size-4" />}>
+          {failed ? <p>{view.message}</p> : <>
+            <p>{darkTunnel ? "The public address is switched on but not connected right now." : "There is no public address yet."}</p>
+            {view.warning && <p className="text-text-2">{view.warning}</p>}
+            <p className="text-text-2">Until there is one, links open only where this PPM is reachable from.</p>
+          </>}
+          <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap">
+            <Button className={btn} onClick={onStart}>
+              {failed ? "Try again" : darkTunnel ? "Reconnect the public address" : "Start a temporary public address"}
+            </Button>
+            <SetUpPermanent />
+          </div>
+        </Box>
+      );
+    }
+  }
+}