app/components/frame.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/routes/ai-draft.tsx, app/routes/book.chapter.tsx, app/routes/book.corkboard.tsx, app/routes/book.file.tsx, app/routes/book.history.tsx, app/routes/book.new.tsx, app/routes/book.outliner.tsx, app/routes/editor.tsx, app/routes/frame.tsx, app/routes/history.tsx, app/routes/project.new.tsx, app/routes/unpublish.tsx.

Source

1// Carrel inside Capsomer's shell: the same site header, app strip, menu, top bar and phone tab bar as
2// Capsomer's own site. Only the contents differ: Carrel's projects and its Owner-only views. The strip,
3// the logo and the tab title come from Capsomer's FAMILY_APPS (app="carrel"); the theme is the header's
4// button (Capsomer 0.9.0).
5
6import { useMemo, type ReactNode } from "react";
7import { Link, useLocation } from "react-router";
8import { MessageProvider } from "capsomer/react/message";
9import { AdminShell, type AdminEntry, type LinkProps } from "capsomer/react/admin-shell";
10
11export type FrameProject = { slug: string; name: string; kind: "site" | "book" | null };
12
13export type FrameData = {
14  name: string;
15  isOwner: boolean;
16  projects: FrameProject[];
17};
18
19function Icon({ d, stroke }: { d: string; stroke?: boolean }) {
20  return (
21    <svg className="cap-admin-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
22      <path d={d} fill={stroke ? "none" : "currentColor"} stroke={stroke ? "currentColor" : "none"} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
23    </svg>
24  );
25}
26
27const ICONS = {
28  home: <Icon d="M2.5 7.5 8 3l5.5 4.5V13h-3.5V9.5H6V13H2.5z" stroke />,
29  site: <Icon d="M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2zM2 8h12M8 2c2 1.8 2 10.2 0 12M8 2c-2 1.8-2 10.2 0 12" stroke />,
30  book: <Icon d="M2.5 3.5c2-.8 4-.6 5.5.6 1.5-1.2 3.5-1.4 5.5-.6v9c-2-.8-4-.6-5.5.6-1.5-1.2-3.5-1.4-5.5-.6z M8 4.1v9" stroke />,
31  manuscripts: <Icon d="M4 2.5h5l3 3v8H4zM9 2.5v3h3M6 8.5h4M6 11h4" stroke />,
32  social: <Icon d="M2.5 9.5V6.5l8-3.5v10l-8-3.5zM5 10.5l.8 3h2" stroke />,
33};
34
35const initialsOf = (name: string) =>
36  name
37    .split(/[\s@.]+/)
38    .filter(Boolean)
39    .slice(0, 2)
40    .map((w) => w[0]!.toUpperCase())
41    .join("") || "?";
42
43export function RouterLink({ href, children, ...rest }: LinkProps) {
44  return (
45    <Link to={href} {...rest}>
46      {children}
47    </Link>
48  );
49}
50
51const projectHref = (p: FrameProject) => (p.kind === "book" ? `/b/${p.slug}` : `/p/${p.slug}`);
52
53export function Frame({ data, children }: { data: FrameData | null; children: ReactNode }) {
54  const { pathname } = useLocation();
55  const owner = data?.isOwner ?? false;
56
57  const { nav, tabs } = useMemo(() => {
58    const at = (prefix: string) => pathname === prefix || pathname.startsWith(`${prefix}/`);
59    const home: AdminEntry = { id: "home", label: "Home", href: "/", icon: ICONS.home, current: pathname === "/" };
60    const projects = (data?.projects ?? [])
61      .filter((p) => p.kind !== null)
62      .map<AdminEntry>((p) => ({
63        id: `${p.kind}-${p.slug}`,
64        label: p.name,
65        href: projectHref(p),
66        icon: p.kind === "book" ? ICONS.book : ICONS.site,
67        current: at(projectHref(p)),
68        group: p.kind === "book" ? "Books" : "Sites",
69      }));
70    // Sites before books, as the groups read down the rail.
71    const sites = projects.filter((e) => e.group === "Sites");
72    const books = projects.filter((e) => e.group === "Books");
73    const library: AdminEntry[] = owner
74      ? [
75          { id: "manuscripts", label: "Manuscripts", href: "/manuscripts", icon: ICONS.manuscripts, current: at("/manuscripts"), group: "Owner" },
76          { id: "social", label: "Social", href: "/social", icon: ICONS.social, current: at("/social"), group: "Owner" },
77        ]
78      : [];
79    return {
80      nav: [home, ...sites, ...books, ...library],
81      // The phone's bar holds the views everyone reaches first; every project is in the header's sheet.
82      tabs: [home, ...library.map((e) => ({ ...e, group: undefined }))],
83    };
84  }, [data, owner, pathname]);
85
86  return (
87    <AdminShell
88      app="carrel"
89      nav={nav}
90      tabs={tabs}
91      renderLink={RouterLink}
92      account={{
93        name: data?.name ?? "Signed out",
94        initials: initialsOf(data?.name ?? ""),
95        role: owner ? "Owner" : undefined,
96        appLinks: owner ? [{ label: "Settings", href: "/people", current: pathname === "/people" }] : undefined,
97        onSignOut: data ? () => location.assign("/cdn-cgi/access/logout") : undefined,
98      }}
99      prefKey="carrel-rail"
100    >
101      <MessageProvider>
102        {children}
103        {/* Capsomer's publish gate only says its results when it finds [data-cap="message"] in the page, and
104            the React message region carries no such attribute, so the gate would stay silent here. This empty
105            marker is what it looks for; the region itself is the provider's. */}
106        <span hidden data-cap="message" />
107      </MessageProvider>
108    </AdminShell>
109  );
110}