Skip to content
Sign up

flagon-io/g1t

public
0
121 linesCodeBlameRaw
1import { DOC_AGENT_MODE_LABELS, DOC_ROLE_LABELS, DOC_SPACE_KIND_LABELS, type DocPage, type DocSpace, type DocSpaceMember } from "@g1t/contracts";
2import { Download, FilePlus2, Settings } from "lucide-react";
3import { Link, data, useNavigate } from "react-router";
4
5import type { Route } from "./+types/space";
6import { useDocsAction } from "../../../components/docs/actions";
7import { Face, SectionTitle } from "../../../components/docs/parts";
8import { PageIcon, SpaceIcon } from "../../../components/docs/sidebar";
9import { ButtonLink, EmptyState, ErrorText, TimeAgo } from "../../../components/ui";
10import { buildTree, canDo, flatten } from "../../../lib/docs";
11import { page } from "../../../lib/meta";
12import { docs } from "../../../lib/services.server";
13import { requireUser, roleIn } from "../../../lib/session.server";
14
15export function meta({ loaderData: loaded, params, ...args }: Route.MetaArgs) {
16 return page(args, { title: `${loaded?.space.name ?? "Space"} · Docs · ${params.owner} · g1t`, description: loaded?.space.description });
17}
18
19export async function loader({ params, context, request }: Route.LoaderArgs): Promise<{ space: DocSpace; members: DocSpaceMember[]; pages: DocPage[] }> {
20 const viewer = requireUser(context, request);
21 if (!roleIn(viewer, params.owner)) throw data(null, { status: 404 });
22 const found = await docs.space(params.owner.toLowerCase(), params.space, viewer);
23 if (!found.ok) throw data(null, { status: found.error.code === "not_found" ? 404 : 403 });
24 return found.value;
25}
26
27/** A space: what it is, who it's for, and its pages as a tree. */
28export default function SpacePage({ loaderData, params }: Route.ComponentProps) {
29 const slug = params.owner.toLowerCase();
30 const { space, members, pages } = loaderData;
31 const navigate = useNavigate();
32 const { send, busy, error } = useDocsAction(slug);
33 const tree = flatten(buildTree(pages.map((p) => ({ id: p.id, parent_id: p.parent_id, position: p.position, title: p.title, icon: p.icon, slug: p.slug }))));
34 const byId = new Map(pages.map((p) => [p.id, p]));
35 const create = async () => {
36 const made = await send<{ path: string }>("create_page", { page: { space_id: space.id } });
37 if (made.ok) navigate(made.value.path);
38 };
39 return (
40 <div className="mx-auto max-w-4xl">
41 <div className="flex flex-wrap items-start gap-4">
42 <span className="flex size-14 items-center justify-center rounded-2xl bg-raised text-2xl">
43 <SpaceIcon space={space} size={26} />
44 </span>
45 <div className="min-w-0 grow">
46 <h1 className="text-2xl font-semibold tracking-tight">{space.name}</h1>
47 {space.description && <p className="mt-1 text-sm text-muted">{space.description}</p>}
48 <p className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-xs text-faint">
49 <span>{space.kind === "team" ? `Team @${space.team}` : DOC_SPACE_KIND_LABELS[space.kind]}</span>
50 {space.default_role && <span>{DOC_ROLE_LABELS[space.default_role]}</span>}
51 <span>Agents: {DOC_AGENT_MODE_LABELS[space.agent_mode].toLowerCase()}</span>
52 <span>Your access: {DOC_ROLE_LABELS[space.viewer_role].toLowerCase()}</span>
53 {space.projects.map((p) => (
54 <Link key={p} to={`/${p}`} className="font-mono hover:text-fg">
55 {p}
56 </Link>
57 ))}
58 </p>
59 </div>
60 <div className="flex items-center gap-2">
61 <a href={`/${slug}/-/docs/export?space=${encodeURIComponent(space.id)}`} className="inline-flex h-9 items-center gap-1.5 rounded-md border border-line px-3 text-sm text-fg/80 hover:bg-surface hover:text-fg">
62 <Download size={15} /> Export
63 </a>
64 {canDo(space.viewer_role, "manage") && (
65 <ButtonLink to={`/${slug}/-/docs/${space.slug}/settings`} variant="quiet">
66 <Settings size={15} /> Settings
67 </ButtonLink>
68 )}
69 {canDo(space.viewer_role, "edit") && (
70 <button type="button" disabled={busy} onClick={create} className="inline-flex h-9 items-center gap-1.5 rounded-md bg-accent px-3 text-sm font-medium text-bg hover:bg-accent-hover">
71 <FilePlus2 size={15} /> New page
72 </button>
73 )}
74 </div>
75 </div>
76 {error && (
77 <div className="mt-3">
78 <ErrorText>{error}</ErrorText>
79 </div>
80 )}
81 <section className="mt-8">
82 <SectionTitle>Pages</SectionTitle>
83 {tree.length === 0 ? (
84 <EmptyState title="No pages yet">{canDo(space.viewer_role, "edit") ? "Start with New page, or from a template." : "Nothing has been written here yet."}</EmptyState>
85 ) : (
86 <ul className="divide-y divide-line overflow-hidden rounded-xl border border-line bg-surface">
87 {tree.map((item) => {
88 const p = byId.get(item.id)!;
89 return (
90 <li key={item.id}>
91 <Link to={p.path} prefetch="intent" className="flex items-center gap-3 py-2.5 pr-4 text-sm transition-colors hover:bg-raised" style={{ paddingLeft: 16 + item.depth * 20 }}>
92 <PageIcon icon={p.icon} />
93 <span className="min-w-0 grow truncate">{p.title || "Untitled"}</span>
94 <span className="hidden shrink-0 items-center gap-1.5 text-xs text-faint sm:flex">
95 {p.updated_by && <Face who={p.updated_by} size={14} />}
96 <TimeAgo at={p.updated_at} />
97 </span>
98 </Link>
99 </li>
100 );
101 })}
102 </ul>
103 )}
104 </section>
105 {members.length > 0 && (
106 <section className="mt-8">
107 <SectionTitle>Members</SectionTitle>
108 <ul className="flex flex-wrap gap-2">
109 {members.map((m) => (
110 <li key={m.key} className="flex items-center gap-2 rounded-full border border-line bg-surface py-1 pr-3 pl-1 text-xs">
111 {m.kind === "team" ? <span className="flex size-5 items-center justify-center rounded-full bg-raised text-[0.625rem]">@</span> : <Face who={{ kind: m.kind, id: m.key.slice(m.key.indexOf(":") + 1), name: m.name, avatar: m.avatar, avatar_seed: m.avatar_seed ?? null }} size={20} />}
112 <span>{m.display_name}</span>
113 <span className="text-faint">{DOC_ROLE_LABELS[m.role]}</span>
114 </li>
115 ))}
116 </ul>
117 </section>
118 )}
119 </div>
120 );
121}