apps/web/app/components/folios/sidebar.tsx · flagon-io/g1t

import { FOLIO_KINDS, folioIdFrom, folioSlug, type DocRepoSpace, type FolioKind, type FolioRef, type FolioTreeNode, type FoliosSidebarSpace } from "@g1t/contracts";

11

import { AlertTriangle, ChevronDown, ChevronRight, Compass, FileText, Folder, FolderGit2, Home, LayoutTemplate, Lock, Plus, Search, Settings, Star, Trash2, X } from "lucide-react";

12

import { type DragEvent, type ReactNode, useEffect, useMemo, useState } from "react";

13

import { NavLink, useLocation, useNavigate, useParams, useRevalidator } from "react-router";

14

15

import { buildTree, canDo, pathTo, repoFilePath, repoFolders, spacePath, type RepoFolder, type TreeItem } from "../../lib/folios";

16

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu";

17

import { Hint } from "../ui/hint";

18

import { Skeleton } from "../ui/skeleton";

19

import { foliosRequest, useFoliosAction, useFoliosData } from "./actions";

20

import { RepoDocsDialog } from "./doc/code";

21

import { FOLIO_KIND_UI, FolioGlyph, KindIcon } from "./kinds";

22

import { SpaceIcon } from "./parts";

23

24

const ROW = "group flex h-8 items-center gap-1.5 rounded-md pr-1 text-[0.8125rem] transition-colors";

25

const ROW_BUTTON = "flex size-6 shrink-0 items-center justify-center rounded text-faint opacity-0 group-hover:opacity-100 hover:bg-line hover:text-fg focus-visible:opacity-100 pointer-coarse:size-9 pointer-coarse:opacity-100";

26

27

function SideLink({ to, end, icon, children, trailing }: { to: string; end?: boolean; icon: ReactNode; children: ReactNode; trailing?: ReactNode }) {

28

return (

29

<NavLink to={to} end={end} prefetch="intent" className={({ isActive }) => `${ROW} pl-2 ${isActive ? "bg-raised font-medium text-fg" : "text-muted hover:bg-raised/60 hover:text-fg"}`}>

30

31

<span className="min-w-0 grow truncate">{children}</span>

{trailing}

</NavLink>

);

}

function Section({ title, children, action, open: initially = true }: { title: string; children: ReactNode; action?: ReactNode; open?: boolean }) {

38

const [open, setOpen] = useState(initially);

return (

<button type="button" onClick={() => setOpen(!open)} aria-expanded={open} className="flex grow items-center gap-1 rounded px-1 text-xs font-medium text-faint transition-colors hover:text-muted">

{title}

</button>

{action}

</div>

{open && children}

</section>

);

}

/** "New ▾": the four kinds, the ones not here yet shown as coming. */

54

export function NewMenu({ onMake, children, align = "end" }: { onMake: (kind: FolioKind) => void; children: ReactNode; align?: "start" | "end" }) {

55

return (

56

57

<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>

58

59

{FOLIO_KINDS.map((kind) => {

60

const ui = FOLIO_KIND_UI[kind];

61

return (

62

<DropdownMenuItem key={kind} disabled={!ui.ready} onSelect={() => onMake(kind)}>

63

64

<span className="grow">{ui.label}</span>

65

{!ui.ready && <span className="text-[0.625rem] text-faint">Coming soon</span>}

</DropdownMenuItem>

);

})}

</DropdownMenuContent>

</DropdownMenu>

);

}

type Drag = { id: string; place: string } | null;

75

76

/** Where a tree lives: a space (by id) or the viewer's Private (null). */

77

type Place = { space_id: string | null; key: string; editable: boolean };

78

79

function TreeRow({ slug, place, item, current, open, toggle, drag, setDrag, onDrop, onAdd }: { slug: string; place: Place; item: TreeItem; current: string | null; open: Set<string>; toggle: (id: string) => void; drag: Drag; setDrag: (d: Drag) => void; onDrop: (target: TreeItem, where: "before" | "inside") => void; onAdd: (parent: string) => void }) {

80

const [over, setOver] = useState<"before" | "inside" | null>(null);

81

const expanded = open.has(item.id);

82

const active = current === item.id;

83

const holds = item.kind === "doc";

84

const zone = (e: DragEvent<HTMLElement>): "before" | "inside" => {

85

if (!holds) return "before";

86

const box = e.currentTarget.getBoundingClientRect();

87

return e.clientY - box.top < box.height * 0.35 ? "before" : "inside";

};

return (

<li>

<div

draggable={place.editable}

93

onDragStart={(e) => {

94

e.dataTransfer.effectAllowed = "move";

95

e.dataTransfer.setData("text/plain", item.id);

96

setDrag({ id: item.id, place: place.key });

97

}}

98

onDragEnd={() => setDrag(null)}

99

onDragOver={(e) => {

100

if (!drag || drag.id === item.id || !place.editable) return;

e.preventDefault();

setOver(zone(e));

}}

onDragLeave={() => setOver(null)}

105

onDrop={(e) => {

106

e.preventDefault();

107

const where = zone(e);

108

setOver(null);

109

if (drag && drag.id !== item.id) onDrop(item, where);

110

}}

111

className={`${ROW} relative ${active ? "bg-raised font-medium text-fg" : "text-muted hover:bg-raised/60 hover:text-fg"} ${over === "inside" ? "ring-1 ring-accent/60 ring-inset" : ""}`}

112

style={{ paddingLeft: 4 + item.depth * 14 }}

113

>

114

{over === "before" && <span className="pointer-events-none absolute inset-x-1 -top-px h-0.5 rounded bg-accent" aria-hidden="true" />}

115

<button

116

type="button"

117

onClick={() => toggle(item.id)}

118

aria-label={expanded ? "Collapse" : "Expand"}

119

aria-expanded={expanded}

120

className={`flex size-5 shrink-0 items-center justify-center rounded text-faint hover:bg-line hover:text-fg ${item.children.length ? "" : "invisible"}`}

>

</button>

</span>

<span className="min-w-0 truncate">{item.title || "Untitled"}</span>

129

{item.restricted && (

</Hint>

)}

{item.stale && (

</Hint>

)}

</NavLink>

{place.editable && holds && (

141

142

<button type="button" onClick={() => onAdd(item.id)} aria-label={`Add a doc inside ${item.title || "Untitled"}`} className={ROW_BUTTON}>

</button>

</Hint>

)}

</div>

{expanded && item.children.length > 0 && (

149

<ul>

150

{item.children.map((child) => (

))}

</ul>

)}

</li>

);

}

/** A tree of folios in one place, opened to the one being read; drag to reorder or nest. */

160

function Tree({ slug, place, nodes, current, drag, setDrag, empty }: { slug: string; place: Place; nodes: FolioTreeNode[]; current: string | null; drag: Drag; setDrag: (d: Drag) => void; empty: string }) {

161

const navigate = useNavigate();

162

const { send } = useFoliosAction(slug);

163

const tree = useMemo(() => buildTree(nodes), [nodes]);

164

const [open, setOpen] = useState<Set<string>>(() => new Set(pathTo(nodes, current)));

165

// Opening an artifact opens the way to it.

166

useEffect(() => {

167

if (!current) return;

168

const path = pathTo(nodes, current);

169

if (path.length) setOpen((was) => new Set([...was, ...path]));

170

}, [current, nodes]);

171

const toggle = (id: string) =>

172

setOpen((was) => {

173

const next = new Set(was);

174

if (next.has(id)) next.delete(id);

else next.add(id);

return next;

});

const add = async (parent: string) => {

179

const made = await send<{ path: string }>("create", { folio: { kind: "doc", parent_id: parent } });

180

if (made.ok) {

181

setOpen((was) => new Set([...was, parent]));

182

navigate(made.value.path);

183

}

184

};

185

const drop = async (target: TreeItem, where: "before" | "inside") => {

186

if (!drag) return;

187

const move = where === "inside" ? { space_id: place.space_id, parent_id: target.id, before_id: null } : { space_id: place.space_id, parent_id: target.parent_id, before_id: target.id };

188

setDrag(null);

189

await send("move", { folio_id: drag.id, move });

190

if (where === "inside") setOpen((was) => new Set([...was, target.id]));

};

return (

<ul>

{tree.map((item) => (

195

196

))}

197

{tree.length === 0 && <li className="py-1 pr-2 pl-9 text-xs text-faint">{empty}</li>}

</ul>

);

}

function SpaceTree({ slug, space, current, drag, setDrag }: { slug: string; space: FoliosSidebarSpace; current: string | null; drag: Drag; setDrag: (d: Drag) => void }) {

203

const navigate = useNavigate();

204

const { send } = useFoliosAction(slug);

205

const [collapsed, setCollapsed] = useState(false);

206

const editable = canDo(space.viewer_role, "edit");

207

const place: Place = { space_id: space.id, key: space.id, editable };

return (

<div

className={`${ROW} text-fg-soft`}

212

onDragOver={(e) => {

213

if (drag && editable) e.preventDefault();

214

}}

215

onDrop={async (e) => {

216

// Dropped on the space itself: to its top, at the end.

e.preventDefault();

if (!drag) return;

const id = drag.id;

setDrag(null);

await send("move", { folio_id: id, move: { space_id: space.id, parent_id: null, before_id: null } });

222

}}

223

>

224

<button type="button" onClick={() => setCollapsed(!collapsed)} aria-expanded={!collapsed} aria-label={collapsed ? `Show ${space.name}` : `Hide ${space.name}`} className="flex size-5 shrink-0 items-center justify-center rounded text-faint hover:bg-line hover:text-fg">

225

226

</button>

227

<NavLink to={spacePath(slug, space.slug)} end prefetch="intent" className={({ isActive }) => `flex min-w-0 grow items-center gap-1.5 font-medium ${isActive ? "text-fg" : ""}`}>

</span>

<span className="min-w-0 truncate">{space.name}</span>

232

</NavLink>

233

{canDo(space.viewer_role, "manage") && (

</NavLink>

</Hint>

)}

{editable && (

<button

type="button"

onClick={async () => {

245

const made = await send<{ path: string }>("create", { folio: { kind: "doc", space_id: space.id } });

246

if (made.ok) navigate(made.value.path);

247

}}

248

aria-label={`New doc in ${space.name}`}

249

className={ROW_BUTTON}

>

</button>

</Hint>

)}

</div>

{!collapsed && <Tree slug={slug} place={place} nodes={space.tree} current={current} drag={drag} setDrag={setDrag} empty="Nothing here yet." />}

</li>

);

}

function RepoFolderRows({ slug, repo, folder, depth, current }: { slug: string; repo: string; folder: RepoFolder; depth: number; current: string }) {

262

const [open, setOpen] = useState<Set<string>>(() => new Set(folder.folders.filter((f) => current.includes(`/${f.path}/`)).map((f) => f.path)));

263

return (

264

<>

265

{folder.files.map((f) => (

266

267

<NavLink to={repoFilePath(slug, repo, f.path)} prefetch="intent" className={({ isActive }) => `${ROW} ${isActive ? "bg-raised font-medium text-fg" : "text-muted hover:bg-raised/60 hover:text-fg"}`} style={{ paddingLeft: 26 + depth * 14 }}>

268

269

<span className="min-w-0 truncate">{f.title}</span>

</NavLink>

</li>

))}

{folder.folders.map((sub) => {

274

const expanded = open.has(sub.path);

return (

<button

type="button"

aria-expanded={expanded}

280

onClick={() =>

281

setOpen((was) => {

282

const next = new Set(was);

283

if (next.has(sub.path)) next.delete(sub.path);

284

else next.add(sub.path);

return next;

})

}

className={`${ROW} w-full text-muted hover:bg-raised/60 hover:text-fg`}

289

style={{ paddingLeft: 4 + (depth + 1) * 14 }}

>

</button>

{expanded && (

<ul>

</ul>

)}

</li>

);

})}

</>

);

}

/** A project's docs folder: read-only, its files as folders, from the repository's default branch. */

308

function RepoTree({ slug, space }: { slug: string; space: DocRepoSpace }) {

309

const { pathname } = useLocation();

310

const base = `/${slug}/-/artifacts/repo/${space.repo}/`;

311

const here = decodeURIComponent(pathname).startsWith(base);

312

const [collapsed, setCollapsed] = useState(!here);

313

const root = useMemo(() => repoFolders(space.files), [space.files]);

return (

<button type="button" onClick={() => setCollapsed(!collapsed)} aria-expanded={!collapsed} aria-label={collapsed ? `Show ${space.repo}'s docs` : `Hide ${space.repo}'s docs`} className="flex size-5 shrink-0 items-center justify-center rounded text-faint hover:bg-line hover:text-fg">

</button>

</span>

<span className="min-w-0 grow truncate font-medium">{space.repo}</span>

</div>

{!collapsed && (

<ul>

{space.files.length === 0 && <li className="py-1 pr-2 pl-9 text-xs text-faint">{space.indexed_at ? "No docs folder or README." : "Reading its docs…"}</li>}

</ul>

)}

</li>

);

}

function RefRow({ folio, trailing }: { folio: FolioRef; trailing?: ReactNode }) {

336

return (

337

<li>

338

<SideLink to={folio.path} icon={<FolioGlyph folio={folio} size={14} />} trailing={trailing}>

339

{folio.title || "Untitled"}

</SideLink>

</li>

);

}

export function FoliosSidebar({ slug, onClose }: { slug: string; onClose?: () => void }) {

346

const data = useFoliosData();

347

const navigate = useNavigate();

348

const params = useParams();

349

const current = folioIdFrom(params.folio);

350

const [drag, setDrag] = useState<Drag>(null);

351

const [query, setQuery] = useState("");

352

const [addingRepo, setAddingRepo] = useState(false);

353

const [error, setError] = useState<string | null>(null);

354

const { revalidate } = useRevalidator();

355

const sidebar = data?.sidebar;

356

const make = async (kind: FolioKind) => {

357

setError(null);

358

const made = await foliosRequest<{ path: string }>(slug, "create", { folio: { kind } });

359

if (made.ok) {

360

void revalidate();

361

navigate(made.value.path);

362

} else setError(made.error.message);

};

return (

<h2 className="min-w-0 grow truncate text-[0.9375rem] font-semibold">Artifacts</h2>

</button>

</NewMenu>

{onClose && (

</button>

)}

</div>

<form

role="search"

onSubmit={(e) => {

e.preventDefault();

navigate(`/${slug}/-/artifacts?q=${encodeURIComponent(query.trim())}`);

}}

className="mb-2"

>

<span className="sr-only">Search artifacts</span>

392

<input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search artifacts" className="min-w-0 grow bg-transparent text-fg outline-none placeholder:text-faint" />

393

</label>

394

</form>

395

{error && <p className="mb-2 px-2 text-xs text-danger">{error}</p>}

Home

</SideLink>

Templates

</SideLink>

</div>

{sidebar === undefined || sidebar === null ? (

405

sidebar === null ? (

406

<p className="mt-4 px-2 text-xs leading-relaxed text-faint">Artifacts didn't answer. Your spaces will show here once it does.</p>

407

) : (

408

409

{[0, 1, 2, 3].map((i) => (

))}

</div>

)

) : (

<>

{sidebar.favorites.length > 0 && (

417

418

419

{sidebar.favorites.map((f) => (

))}

</ul>

</Section>

)}

<Section

title="Spaces"

action={

</button>

</DropdownMenuTrigger>

435

</Hint>

436

437

<DropdownMenuItem onSelect={() => navigate(`/${slug}/-/artifacts/spaces`)}>

438

<Compass size={14} /> Browse spaces

439

</DropdownMenuItem>

440

441

<DropdownMenuItem onSelect={() => navigate(`/${slug}/-/artifacts/spaces/new`)}>

442

<Plus size={14} /> New space

443

</DropdownMenuItem>

444

</DropdownMenuContent>

</DropdownMenu>

}

>

<ul>

{sidebar.spaces.map((space) => (

450

451

))}

452

{sidebar.spaces.length === 0 && <li className="px-2 py-1 text-xs text-faint">No spaces yet.</li>}

</ul>

</Section>

<Section

title="Private"

action={

<button type="button" onClick={() => make("doc")} aria-label="New private doc" className="flex size-6 items-center justify-center rounded text-faint hover:bg-raised hover:text-fg">

</button>

</Hint>

}

>

<div

onDragOver={(e) => {

if (drag) e.preventDefault();

468

}}

469

onDrop={async (e) => {

470

// Dropped on Private's empty space: to its top, at the end.

471

if (e.target !== e.currentTarget || !drag) return;

e.preventDefault();

const id = drag.id;

setDrag(null);

const moved = await foliosRequest(slug, "move", { folio_id: id, move: { space_id: null, parent_id: null, before_id: null } });

476

if (moved.ok) void revalidate();

477

else setError(moved.error.message);

}}

>

</div>

</Section>

{sidebar.shared.length > 0 && (

484

485

486

{sidebar.shared.map((f) => (

))}

</ul>

</Section>

)}

{!!sidebar.stale_count && (

494

<SideLink to={`/${slug}/-/artifacts/stale`} icon={<AlertTriangle size={15} className="text-warn" />} trailing={<span className="text-[0.6875rem] text-warn tabular-nums">{sidebar.stale_count}</span>}>

Possibly out of date

</SideLink>

)}

</div>

<Section

title="Projects' docs"

501

open={(sidebar.repos ?? []).length > 0}

502

action={

503

504

<button type="button" onClick={() => setAddingRepo(true)} aria-label="Show a project's docs" className="flex size-6 items-center justify-center rounded text-faint hover:bg-raised hover:text-fg">

</button>

</Hint>

}

>

<ul>

{(sidebar.repos ?? []).map((space) => (

512

513

))}

514

{(sidebar.repos ?? []).length === 0 && (

515

<li>

516

<button type="button" onClick={() => setAddingRepo(true)} className="px-2 py-1 text-left text-xs text-faint hover:text-fg">

517

Show a repository's docs folder here, read-only.

</button>

</li>

)}

</ul>

</Section>

<SideLink to={`/${slug}/-/artifacts/trash`} icon={<Trash2 size={15} />} trailing={sidebar.trash_count ? <span className="text-[0.6875rem] text-faint tabular-nums">{sidebar.trash_count}</span> : undefined}>

Trash

</SideLink>

</div>

<RepoDocsDialog slug={slug} open={addingRepo} onOpenChange={setAddingRepo} shown={(sidebar.repos ?? []).map((r) => r.repo.toLowerCase())} onAdded={() => void revalidate()} />

</>

)}

</nav>

</div>

);

}