Skip to content
Sign up

flagon-io/g1t

public
0
129 linesCodeBlameRaw

Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.

Artifacts is a mode in the rail, the shell and the phone's tab bar in place of Docs: its home lists everything you can open by day or as cards under All, Yours and Shared with you, with search, filters and tiles to start a doc (slides, designs and dashboards say they are coming soon), and its sidebar holds favorites, spaces, Private, Shared, projects' docs and the trash.1/**
The docs folder is gone, and what it held lives where people read it: how a self-hosted g1t runs and how to deploy g1t to Cloudflare are pages on docs.g1t.sh under Run g1t yourself, and speed, rate limits and operating g1t.sh are sections of CONTRIBUTING.md; code that cited a file in docs/ now points to the page or section that covers it, or says what it means itself, and applied migrations and the runner images are left as they were.2 * The header every artifact's page shares, whatever its kind: where it
3 * is (a space or Private,
Artifacts is a mode in the rail, the shell and the phone's tab bar in place of Docs: its home lists everything you can open by day or as cards under All, Yours and Shared with you, with search, filters and tiles to start a doc (slides, designs and dashboards say they are coming soon), and its sidebar holds favorites, spaces, Private, Shared, projects' docs and the trash.4 * then the docs it sits under), who is here, "Offline, changes will
5 * sync", and Share, comments, history, favorite and the ⋯ menu. A kind's
6 * own actions go in `actions`.
7 */
8import type { Folio, FolioRef } from "@g1t/contracts";
9import { History, MessageSquare, Share2, Star, WifiOff } from "lucide-react";
10import { type ReactNode, useState } from "react";
11import { Link, useRevalidator } from "react-router";
12
13import { spacePath } from "../../lib/folios";
14import { Hint } from "../ui/hint";
15import { foliosRequest } from "./actions";
16import { FolioGlyph } from "./kinds";
17import { FolioMenu } from "./menu";
18import { Crumbs, Face } from "./parts";
19import type { LiveStatus } from "./provider";
20import { ShareDialog } from "./share-dialog";
21
22/** Someone here now, as the live document's awareness says. */
23export type Presence = { client: number; key: string; name: string; kind: "user" | "agent"; color: string; avatar: string | null; me: boolean };
24
25const ICON_BUTTON = "flex size-8 shrink-0 items-center justify-center rounded-md max-md:size-10";
26
27export function FolioHeader({
28 slug,
29 folio,
30 breadcrumbs,
31 presence,
32 status,
33 comments,
34 onError,
35 onTrashed,
36 actions,
37}: {
38 slug: string;
39 folio: Folio;
40 breadcrumbs: FolioRef[];
41 presence: Presence[];
42 status: LiveStatus;
43 /** The comments toggle, for kinds that have comments. */
44 comments?: { open: boolean; onToggle: () => void } | null;
45 onError: (message: string) => void;
46 onTrashed: () => void;
47 actions?: ReactNode;
48}) {
49 const { revalidate } = useRevalidator();
50 const [sharing, setSharing] = useState(false);
51 const [favorite, setFavorite] = useState(folio.favorite);
52 const others = presence.filter((p) => !p.me);
53 const crumbs = [
54 folio.space ? { label: folio.space.name, to: spacePath(slug, folio.space.slug) } : { label: "Private", to: `/${slug}/-/artifacts?space=private` },
55 ...breadcrumbs.map((b) => ({ label: `${b.icon ? `${b.icon} ` : ""}${b.title || "Untitled"}`, to: b.path })),
56 {
57 label: (
58 <span className="inline-flex items-center gap-1.5">
59 <FolioGlyph folio={folio} size={13} />
60 {folio.title || "Untitled"}
61 </span>
62 ),
63 },
64 ];
65 return (
The top of every page is one surface: the breadcrumb, search, spend, Ask g1t, bell and + share one height, corners and spacing, Ask g1t is a plain tinted button with the g1t mark drawn on whole pixels, a page's own header sits directly under the bar at the same left edge, and every section, conversations and open artifacts included, draws the same rounded panel. Tables written in chat render as tables, and the site's file, checkbox, radio, number and date controls are the design system's. Button, Separator, Breadcrumb, Table and FileDrop join the shared components; the chat guide says how tables work.66 // Right under the top bar, edge to edge, and one block with it (data-page-head in components/shell.tsx).
67 <div data-page-head="sticky" className="sticky top-(--topbar-h) z-20 -mx-4 flex h-14 items-center gap-2 border-b border-line bg-bg/90 px-4 backdrop-blur sm:-mx-6 sm:px-5 lg:-mx-8">
Artifacts is a mode in the rail, the shell and the phone's tab bar in place of Docs: its home lists everything you can open by day or as cards under All, Yours and Shared with you, with search, filters and tiles to start a doc (slides, designs and dashboards say they are coming soon), and its sidebar holds favorites, spaces, Private, Shared, projects' docs and the trash.68 <div className="min-w-0 grow">
69 <Crumbs items={crumbs} />
70 </div>
71 {status === "offline" && (
72 <Hint label="Your changes are kept and sync when the connection is back.">
73 <span className="flex items-center gap-1 text-xs text-warn" tabIndex={0}>
74 <WifiOff size={13} /> <span className="max-sm:hidden">Offline, changes will sync</span>
75 </span>
76 </Hint>
77 )}
78 {others.length > 0 && (
79 <span className="flex items-center -space-x-1.5 max-sm:hidden" aria-label={`${others.length} others here`}>
80 {others.slice(0, 5).map((p) => (
81 <Hint key={p.key} label={`${p.name}${p.kind === "agent" ? " (agent)" : ""}`}>
82 <span className="rounded-full ring-2" style={{ ["--tw-ring-color" as string]: p.color }}>
83 <Face who={{ kind: p.kind, id: p.key.slice(p.key.indexOf(":") + 1), name: p.name, avatar: p.avatar, avatar_seed: null }} size={24} />
84 </span>
85 </Hint>
86 ))}
87 {others.length > 5 && <span className="pl-3 text-xs text-faint">+{others.length - 5}</span>}
88 </span>
89 )}
90 {actions}
91 <button type="button" onClick={() => setSharing(true)} className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-line px-2.5 text-xs text-fg/85 hover:bg-raised max-md:size-10 max-md:justify-center max-md:px-0" aria-label="Share">
92 <Share2 size={13} /> <span className="max-md:hidden">Share</span>
93 </button>
94 {comments && (
95 <Hint label={comments.open ? "Hide comments" : "Comments"}>
96 <button type="button" onClick={comments.onToggle} aria-pressed={comments.open} aria-label="Comments" className={`${ICON_BUTTON} ${comments.open ? "bg-raised text-fg" : "text-faint hover:bg-raised hover:text-fg"}`}>
97 <MessageSquare size={16} />
98 </button>
99 </Hint>
100 )}
101 <Hint label="History">
102 <Link to={`${folio.path}/history`} aria-label="History" className={`${ICON_BUTTON} text-faint hover:bg-raised hover:text-fg max-sm:hidden`}>
103 <History size={16} />
104 </Link>
105 </Hint>
106 <Hint label={favorite ? "Remove from Favorites" : "Add to Favorites"}>
107 <button
108 type="button"
109 aria-label={favorite ? "Remove from Favorites" : "Add to Favorites"}
110 aria-pressed={favorite}
111 onClick={async () => {
112 setFavorite(!favorite);
113 const done = await foliosRequest(slug, "favorite", { folio_id: folio.id, on: !favorite });
114 if (done.ok) void revalidate();
115 else {
116 setFavorite(favorite);
117 onError(done.error.message);
118 }
119 }}
120 className={`${ICON_BUTTON} text-faint hover:bg-raised hover:text-fg max-sm:hidden`}
121 >
122 <Star size={16} className={favorite ? "fill-current text-warn" : ""} />
123 </button>
124 </Hint>
125 <FolioMenu slug={slug} folio={{ ...folio, favorite }} page onError={onError} onTrashed={onTrashed} />
126 <ShareDialog slug={slug} folio={folio} open={sharing} onOpenChange={setSharing} onChanged={() => void revalidate()} />
127 </div>
128 );
129}