@tribe-nest/forge 3.36.0 → 3.38.0

package/src/ui/styled/MembershipTierCallout.tsx

@@ -0,0 +1,91 @@
+import type { CSSProperties } from "react";
+import { useGetMembershipTiers } from "../../data/queries/useMembership";
+import { useForgeT } from "../../i18n";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { membershipPriceLabel } from "../format/membershipPriceLabel";
+
+export interface MembershipTierCalloutProps {
+  /** The tier the visitor is on their way to join. Nothing is drawn without it. */
+  membershipTierId?: string;
+  /** How many benefits to list before summarising the rest. Default 3. */
+  maxBenefits?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * "Join {tier}", with its price and a few of its benefits.
+ *
+ * Drawn above the login and signup forms when a visitor was sent there from a
+ * membership checkout. Without it the fan clicks Join, gets an unexplained
+ * sign-in wall, and has to remember which tier they picked and trust that the
+ * site remembers too. The client app has always shown this; code websites did
+ * not, so this is the same reassurance in a Forge component.
+ *
+ * Renders NOTHING when there is no tier id, when the tiers have not loaded, or
+ * when the id matches nothing the artist sells. A form that pushes itself down
+ * the page a beat after it appeared is worse than one that never moved, and an
+ * id from a stale link must not print an empty box.
+ */
+export function MembershipTierCallout({
+  membershipTierId,
+  maxBenefits = 3,
+  className,
+  style,
+}: MembershipTierCalloutProps) {
+  const t = useForgeT();
+  const tokens = useThemeTokens();
+  const fmt = useAmountFormatter();
+  // The tier list is one cached query per profile, so this shares the fetch the
+  // membership page and the checkout already make rather than adding a request.
+  const { data: tiers } = useGetMembershipTiers();
+  const tier = membershipTierId ? tiers?.find((candidate) => candidate.id === membershipTierId) : undefined;
+
+  if (!tier) return null;
+
+  const benefits = tier.benefits ?? [];
+  const shown = benefits.slice(0, maxBenefits);
+  const remaining = benefits.length - shown.length;
+
+  return (
+    <div
+      className={className}
+      style={{
+        // No width and no outer margin: this is placed INSIDE the host's card
+        // (the login and signup forms put it above their heading), so it must
+        // not carry a column of its own that fights the one around it.
+        marginBottom: 24,
+        padding: 16,
+        borderRadius: tokens.cornerRadius,
+        background: `${tokens.primary}1a`,
+        color: tokens.text,
+        fontFamily: tokens.fontFamily,
+        ...style,
+      }}
+    >
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 8, fontFamily: tokens.headingFontFamily }}>
+        {t("forge.membership_tier_callout.join_title", { tier_name: tier.name })}
+      </h2>
+      <p style={{ fontSize: 14, marginBottom: shown.length ? 12 : 0 }}>{membershipPriceLabel(tier, t, fmt)}</p>
+      {!!shown.length && (
+        <div style={{ fontSize: 14 }}>
+          <p style={{ fontWeight: 500, marginBottom: 4 }}>{t("forge.membership_tier_callout.benefits_label")}</p>
+          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 4 }}>
+            {shown.map((benefit) => (
+              <li key={benefit.id} style={{ display: "flex", gap: 8 }}>
+                <span style={{ color: tokens.primary }}>✓</span>
+                {benefit.title}
+              </li>
+            ))}
+            {remaining > 0 && (
+              <li style={{ fontSize: 12, opacity: 0.75 }}>
+                {t("forge.membership_tier_callout.more_benefits", { count: remaining })}
+              </li>
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/styled/MembershipTiers.tsx

@@ -5,7 +5,7 @@ import { useAmountFormatter } from "../format/useFormatCurrency";
 import { priceTaxCaption } from "../format/PriceDisplay";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { useForgeT } from "../../i18n";
-import { cycleFloor, offeredCycles } from "../format/membershipPwyw";
+import { membershipPriceLabel } from "../format/membershipPriceLabel";
 import { Button } from "./Button";
 import { Loading } from "./Loading";
 
@@ -53,20 +53,10 @@ export function MembershipTiers({
   if (isLoading) return <Loading fullPage />;
   if (!tiers?.length) return <p style={{ color: tokens.text }}>{t("forge.membership_tiers.empty_title")}</p>;
 
-  // A tier priced on ONE cycle must be advertised on that cycle. Reading the
-  // monthly minimum unconditionally printed "Pay what you want from $0/mo" on a
-  // yearly-only tier, which reads as free and is the opposite of the truth.
-  const priceLabel = (tier: MembershipTier) => {
-    const cycles = offeredCycles(tier);
-    if (tier.payWhatYouWant) {
-      return cycles.month
-        ? t("forge.membership_tiers.price_pwyw", { amount: fmt(cycleFloor(tier, "month")) })
-        : t("forge.membership_tiers.price_pwyw_yearly", { amount: fmt(cycleFloor(tier, "year")) });
-    }
-    if (cycles.month) return t("forge.membership_tiers.price_monthly", { amount: fmt(cycleFloor(tier, "month")) });
-    if (cycles.year) return t("forge.membership_tiers.price_yearly", { amount: fmt(cycleFloor(tier, "year")) });
-    return freeLabel;
-  };
+  // A tier priced on ONE cycle must be advertised on that cycle. The rule lives
+  // in `membershipPriceLabel` so the login and signup callout prices a tier with
+  // the same sentence this page does.
+  const priceLabel = (tier: MembershipTier) => membershipPriceLabel(tier, t, fmt);
 
   const select = (tier: MembershipTier) => {
     if (onSelect) return onSelect(tier);

package/src/ui/styled/SignupForm.tsx

@@ -1,12 +1,19 @@
 import { useSignupForm } from "../headless/auth/useSignupForm";
 import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { MembershipTierCallout } from "./MembershipTierCallout";
 
 export interface SignupFormProps {
   /** Called after a successful signup. The shell typically redirects here. */
   onSuccess?: (smartLinkPath?: string) => void;
   /** Href for the "Login" link. */
   loginHref: string;
+  /**
+   * The tier this visitor is on their way to join. Shown above the form, so a
+   * fan who pressed Join and landed on a signup wall can see which tier they
+   * picked and that the wall is part of joining it. It also rides along on the
+   * create-account request, where a coupon can turn it into a membership.
+   */
   membershipTierId?: string;
   couponCode?: string;
 }
@@ -64,6 +71,9 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, couponCode
 
   return (
     <div style={card}>
+      {/* What the fan was doing when they hit this wall, kept in view through
+          the emailed-code step as well. Nothing is drawn without a tier. */}
+      <MembershipTierCallout membershipTierId={membershipTierId} />
       <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>
         {form.awaitingCode ? t("forge.signup_form.verify_title") : t("forge.signup_form.title")}
       </h1>

package/src/ui/styled/_tests/AccountDashboardCommunity.spec.tsx

@@ -8,21 +8,20 @@ import { communityKeys, type CommunitySpace } from "../../../data/queries/useCom
 import { AccountDashboard } from "../AccountDashboard";
 
 /**
- * The account page's way into the members corner.
+ * The account page's way into the member area.
  *
  * Before this, a signed-in member landed on the membership card and the only
  * doors on it led back to billing: change the plan, cancel it, fix the card.
- * The community they were paying for was reachable only by typing the URL.
+ * The member area they were paying for was reachable only by typing the URL.
  *
- * The gate is the server's own answer. `/public/community/spaces` returns the
- * open spaces PLUS the ones gated to a tier the caller holds, so the list being
- * empty is the server saying "there is nothing here you can open". Drawing the
- * link anyway would walk a member into a bounce, which is why the empty case is
- * asserted as hard as the happy one.
+ * The first version gated the link on `/public/community/spaces` returning a
+ * space the caller could open, which hid it from precisely the fans who had not
+ * joined yet. Being signed in is now the whole gate: the member home shows the
+ * locked posts and the way to buy access, so it is never a dead end.
  *
  * Rendered through `react-dom/server`: no DOM, no effects, so the spaces query
- * is SEEDED into the react-query cache rather than mocked. That keeps the real
- * `useCommunitySpaces` in the path, and a rename of its query key fails here.
+ * is SEEDED into the react-query cache rather than mocked, which keeps the real
+ * data path in place for the rest of the card.
  */
 
 const PROFILE_ID = "profile-1";
@@ -65,21 +64,29 @@ const member = {
   },
 };
 
+/** The same signed-in fan, with no membership of any kind. */
+const nonMember = { ...member, membership: undefined };
+
 /**
  * The membership tab as a Forge code website draws it.
  *
- * `spaces === null` stands for the query never having answered (the member has
- * no accessible spaces cached), which is the state a non-member sits in.
+ * `spaces === null` stands for the query never having answered, which is the
+ * state every first paint sits in.
  */
-function render(opts: { spaces: CommunitySpace[] | null; onNavigateCommunity?: () => void }): string {
+function render(opts: {
+  spaces: CommunitySpace[] | null;
+  user?: typeof member | typeof nonMember | null;
+  onNavigateCommunity?: () => void;
+}): string {
   const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
   if (opts.spaces) queryClient.setQueryData(communityKeys.spaces(PROFILE_ID), opts.spaces);
+  const user = opts.user === undefined ? member : opts.user;
 
   return renderToStaticMarkup(
     <QueryClientProvider client={queryClient}>
       <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
         <PublicAuthContext.Provider
-          value={{ user: member, currencies: null, userSelectedCurrency: "USD", logout: () => {} } as never}
+          value={{ user, currencies: null, userSelectedCurrency: "USD", logout: () => {} } as never}
         >
           <ForgeThemeProvider
             theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
@@ -96,39 +103,47 @@ function render(opts: { spaces: CommunitySpace[] | null; onNavigateCommunity?: (
   );
 }
 
-describe("AccountDashboard: the way into the members corner", () => {
-  it("REGRESSION: offers the community to a member who has a space to open", () => {
-    // The gap this closes. Without it the membership card's only exits are
-    // Change and Cancel, and the community is unreachable from the account page.
+describe("AccountDashboard: the way into the member area", () => {
+  it("REGRESSION: offers the member area to a member who has a space to open", () => {
+    // The original gap this closes. Without it the membership card's only exits
+    // are Change and Cancel, and the member area is unreachable from here.
     const html = render({ spaces: [space()], onNavigateCommunity: () => {} });
 
-    expect(html).toContain("Community spaces");
+    expect(html).toContain("Member Area");
+  });
+
+  it("REGRESSION: offers the member area to a signed-in fan with NO membership", () => {
+    // The second gap. The link used to require an openable space, so a fan who
+    // had not joined saw no way in, which is the fan the member home is most
+    // useful to: that page shows the locked posts and the offer to join.
+    const html = render({ spaces: [], user: nonMember, onNavigateCommunity: () => {} });
+
+    expect(html).toContain("Member Area");
+    // Still the non-member card and not some other state.
+    expect(html).toContain("You don&#x27;t have an active membership.");
   });
 
-  it("REGRESSION: says nothing when the member can open no space", () => {
-    // A link here would promise a door that is locked: the server returned no
-    // space this account may enter, so the honest account page is silent.
-    const html = render({ spaces: [], onNavigateCommunity: () => {} });
+  it("REGRESSION: offers it before the spaces query has answered", () => {
+    // First paint has no cached answer. The link no longer waits on that read,
+    // so it does not appear a beat late.
+    const html = render({ spaces: null, onNavigateCommunity: () => {} });
 
-    expect(html).not.toContain("Community spaces");
-    // The billing actions are untouched, so this is the entry point missing and
-    // not the whole card failing to draw.
-    expect(html).toContain("Change");
+    expect(html).toContain("Member Area");
   });
 
-  it("draws nothing when the host site has no community route to send anyone to", () => {
+  it("draws nothing when the host site has no member-area route to send anyone to", () => {
     // `onNavigateCommunity` is optional. A site that leaves it out gets no
-    // button, even with spaces in the cache, rather than a dead one.
+    // button rather than a dead one.
     const html = render({ spaces: [space()] });
 
-    expect(html).not.toContain("Community spaces");
+    expect(html).not.toContain("Member Area");
   });
 
-  it("stays quiet while the spaces query has not answered yet", () => {
-    // First paint has no cached answer. Guessing "yes" here would flash a link
-    // and then withdraw it from members who never had access.
-    const html = render({ spaces: null, onNavigateCommunity: () => {} });
+  it("draws nothing for a visitor who is not signed in", () => {
+    // The member area is behind a login. Offering it to a signed-out visitor
+    // sends them at a guard, not at the content.
+    const html = render({ spaces: [space()], user: null, onNavigateCommunity: () => {} });
 
-    expect(html).not.toContain("Community spaces");
+    expect(html).not.toContain("Member Area");
   });
 });

package/src/ui/styled/_tests/membershipTierCallout.spec.tsx

@@ -0,0 +1,126 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { LoginForm } from "../LoginForm";
+import { SignupForm } from "../SignupForm";
+import type { MembershipTier } from "../../../types/models";
+
+/**
+ * What a fan sees after pressing Join while signed out.
+ *
+ * The auth guard sends them to `/i/login?redirect=/i/membership/checkout?membershipTierId=…`,
+ * which up to now was a bare sign-in card: no mention of the tier they had just
+ * chosen, no sign that the wall was part of joining at all. The client app has
+ * always shown the tier on this screen, so this is code websites catching up.
+ *
+ * Rendered through `react-dom/server`, with the tier list SEEDED into the
+ * react-query cache rather than mocked, so the real `useGetMembershipTiers` stays
+ * in the path and a rename of its query key fails here.
+ */
+
+const PROFILE_ID = "profile-1";
+
+const tier: MembershipTier = {
+  id: "tier-1",
+  profileId: PROFILE_ID,
+  name: "Inner Circle",
+  description: "The good stuff",
+  priceMonthly: 10,
+  priceYearly: null,
+  payWhatYouWant: false,
+  payWhatYouWantMinimum: null,
+  payWhatYouWantMaximum: null,
+  isDefault: false,
+  archived: false,
+  order: 0,
+  benefits: [
+    { id: "b1", title: "Early demos" },
+    { id: "b2", title: "Monthly livestream" },
+    { id: "b3", title: "Discord access" },
+    { id: "b4", title: "Name in the credits" },
+  ],
+} as unknown as MembershipTier;
+
+function render(node: React.ReactNode, opts: { tiers?: MembershipTier[] } = {}): string {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  if (opts.tiers) queryClient.setQueryData(["membership-tiers", PROFILE_ID], opts.tiers);
+  // Settlement currency, or every price formats as "N/A".
+  queryClient.setQueryData(["site-config", PROFILE_ID], { currency: "USD" });
+
+  return renderToStaticMarkup(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider
+          value={{ user: null, currencies: null, userSelectedCurrency: "USD", logout: () => {} } as never}
+        >
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            {node}
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe("the tier a signed-out fan was on their way to join", () => {
+  it("REGRESSION: names the tier, its price and its benefits above the login form", () => {
+    const html = render(<LoginForm signupHref="/i/signup" forgotHref="/i/forgot-password" membershipTierId="tier-1" />, {
+      tiers: [tier],
+    });
+
+    expect(html).toContain("Join Inner Circle");
+    expect(html).toContain("$10/mo");
+    expect(html).toContain("Early demos");
+    // The login form itself is untouched underneath.
+    expect(html).toContain("Password");
+  });
+
+  it("lists three benefits and counts the rest", () => {
+    // The whole list would push the form itself below the fold on a phone.
+    const html = render(<LoginForm signupHref="/i/signup" forgotHref="/i/forgot-password" membershipTierId="tier-1" />, {
+      tiers: [tier],
+    });
+
+    expect(html).toContain("Discord access");
+    expect(html).not.toContain("Name in the credits");
+    expect(html).toContain("+1 more benefits");
+  });
+
+  it("REGRESSION: shows the same tier on the signup form", () => {
+    // A fan with no account gets sent on from login to signup, and the tier has
+    // to survive that hop or the reassurance disappears halfway through.
+    const html = render(<SignupForm loginHref="/i/login" membershipTierId="tier-1" />, { tiers: [tier] });
+
+    expect(html).toContain("Join Inner Circle");
+  });
+
+  it("says nothing when the visitor came to log in on their own", () => {
+    const html = render(<LoginForm signupHref="/i/signup" forgotHref="/i/forgot-password" />, { tiers: [tier] });
+
+    expect(html).not.toContain("Join Inner Circle");
+    expect(html).toContain("Password");
+  });
+
+  it("says nothing when the id matches no tier the artist sells", () => {
+    // A stale link, or a tier that has since been archived. An empty box with a
+    // heading and no tier in it would be worse than no box.
+    const html = render(<LoginForm signupHref="/i/signup" forgotHref="/i/forgot-password" membershipTierId="gone" />, {
+      tiers: [tier],
+    });
+
+    expect(html).not.toContain("Join");
+  });
+
+  it("says nothing before the tier list has arrived", () => {
+    // First paint has no cached answer. Drawing a heading now and the tier a
+    // beat later would move the form under the visitor's cursor.
+    const html = render(<LoginForm signupHref="/i/signup" forgotHref="/i/forgot-password" membershipTierId="tier-1" />);
+
+    expect(html).not.toContain("Join Inner Circle");
+  });
+});

package/src/ui/styled/work/WorkProjectDocuments.tsx

@@ -0,0 +1,224 @@
+import { useRef, useState } from "react";
+import { FileText, Paperclip, Upload } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import {
+  formatWorkDate,
+  useUploadWorkDocument,
+  useWorkOpenSharedDocument,
+  useWorkSharedDocuments,
+  type WorkSharedDocument,
+} from "../../headless/work/useWorkPortal";
+
+export interface WorkProjectDocumentsProps {
+  /** The client project id. */
+  projectId: string;
+  /** Hide the upload control. The list still renders. Defaults to `true`. */
+  allowUpload?: boolean;
+}
+
+const humanSize = (size: number | null | undefined): string => {
+  if (!size || size <= 0) return "";
+  const units = ["B", "KB", "MB", "GB"];
+  let n = size;
+  let i = 0;
+  while (n >= 1024 && i < units.length - 1) {
+    n /= 1024;
+    i += 1;
+  }
+  return `${n.toFixed(n >= 10 || i === 0 ? 0 : 1)} ${units[i]}`;
+};
+
+const errorMessage = (error: unknown): string =>
+  (error as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+  "The upload didn't go through. Please try again.";
+
+/**
+ * The documents on a client's project: what the firm shared with them, and
+ * what they sent in themselves, with an upload control for the latter.
+ *
+ * A file opens through a short-lived signed read fetched on the click, never
+ * from an address held in the page. Built on `useWorkSharedDocuments`,
+ * `useWorkOpenSharedDocument` and `useUploadWorkDocument`; theme tokens only.
+ *
+ * Unlike the invoices block this renders even when the list is empty, because
+ * the empty state is where the upload control lives.
+ */
+export function WorkProjectDocuments({ projectId, allowUpload = true }: WorkProjectDocumentsProps) {
+  const t = useThemeTokens();
+  const { data: documents, isLoading } = useWorkSharedDocuments(projectId);
+  const open = useWorkOpenSharedDocument(projectId);
+  const upload = useUploadWorkDocument(projectId);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [opening, setOpening] = useState<string | null>(null);
+
+  if (isLoading) return null;
+
+  const onFiles = async (files: FileList | null) => {
+    if (!files || files.length === 0) return;
+    setError(null);
+    // One at a time, in order: each is its own signed PUT and its own row, and
+    // a failure names the file that failed rather than the whole batch.
+    for (const file of Array.from(files)) {
+      try {
+        await upload.mutateAsync({ file });
+      } catch (err) {
+        setError(`${file.name}: ${errorMessage(err)}`);
+        return;
+      }
+    }
+  };
+
+  const openDocument = async (doc: WorkSharedDocument) => {
+    if (!doc.file) return;
+    setOpening(doc.id);
+    try {
+      const { url } = await open.mutateAsync(doc.id);
+      window.open(url, "_blank", "noopener");
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setOpening(null);
+    }
+  };
+
+  const list = documents ?? [];
+
+  return (
+    <div
+      data-testid="work-project-documents"
+      style={{
+        border: `1px solid ${t.border}`,
+        borderRadius: t.cornerRadius,
+        background: t.surface,
+        padding: 20,
+        color: t.text,
+        fontFamily: t.fontFamily,
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 12,
+          flexWrap: "wrap",
+          marginBottom: 14,
+        }}
+      >
+        <h2 style={{ fontSize: 16, fontWeight: 800, margin: 0 }}>Documents</h2>
+        {allowUpload && (
+          <>
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              hidden
+              data-testid="work-document-file-input"
+              onChange={(e) => {
+                void onFiles(e.target.files);
+                e.target.value = "";
+              }}
+            />
+            <button
+              type="button"
+              data-testid="work-document-upload"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={upload.isPending}
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "8px 16px",
+                borderRadius: t.cornerRadius,
+                border: "none",
+                background: t.primary,
+                color: t.textPrimary,
+                fontWeight: 700,
+                fontSize: 13,
+                cursor: upload.isPending ? "wait" : "pointer",
+                opacity: upload.isPending ? 0.7 : 1,
+              }}
+            >
+              <Upload size={14} />
+              {upload.isPending ? "Uploading…" : "Upload a document"}
+            </button>
+          </>
+        )}
+      </div>
+
+      {error && (
+        <p
+          data-testid="work-document-error"
+          role="alert"
+          style={{ margin: "0 0 12px", fontSize: 13, color: "#ef4444" }}
+        >
+          {error}
+        </p>
+      )}
+
+      {list.length === 0 ? (
+        <p data-testid="work-project-documents-empty" style={{ margin: 0, fontSize: 13, color: t.muted }}>
+          {allowUpload
+            ? "Nothing here yet. Upload a document to add it to this project."
+            : "Nothing has been shared with you yet."}
+        </p>
+      ) : (
+        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }}>
+          {list.map((doc) => (
+            <li
+              key={doc.id}
+              data-testid={`work-document-${doc.id}`}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 12,
+                flexWrap: "wrap",
+                padding: "10px 14px",
+                border: `1px solid ${t.border}`,
+                borderRadius: t.cornerRadius,
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
+                {doc.file ? (
+                  <Paperclip size={14} style={{ color: t.muted, flexShrink: 0 }} />
+                ) : (
+                  <FileText size={14} style={{ color: t.muted, flexShrink: 0 }} />
+                )}
+                <div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }}>
+                  <span style={{ fontWeight: 700, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                    {doc.title}
+                  </span>
+                  <span style={{ fontSize: 12, color: t.muted }}>
+                    {formatWorkDate(doc.sharedAt)}
+                    {doc.file?.size ? ` · ${humanSize(doc.file.size)}` : ""}
+                  </span>
+                </div>
+              </div>
+              {doc.file && (
+                <button
+                  type="button"
+                  data-testid={`work-document-open-${doc.id}`}
+                  onClick={() => void openDocument(doc)}
+                  disabled={opening === doc.id}
+                  style={{
+                    background: "transparent",
+                    border: "none",
+                    padding: 0,
+                    color: t.primary,
+                    fontSize: 13,
+                    textDecoration: "underline",
+                    cursor: opening === doc.id ? "wait" : "pointer",
+                  }}
+                >
+                  {opening === doc.id ? "Opening…" : "Open"}
+                </button>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}