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.
| g1t is described as the product it is in alpha, and its shell takes the new shape: the README, the docs home and docs/PLAN.md label every feature Live, Preview or Coming; a floating dock with the g1t mark, Today, Chat, Notifications, Agents, Code, Artifacts, your pinned apps and the Apps launcher, with People, Workspace and the account menu (now holding help) at its foot; the workspace's logo and switcher heading a flat sidebar that folds away with Ctrl B, or leading the header's breadcrumbs where there is none; the page in a rounded panel with a full-width header; Today as the front page, with first-time acceptance of agents' pull requests, what needs you and what's at stake, spend today and one item to start with, every number from a service; Notifications in place of the Inbox at /notifications; a bottom bar and More sheet on phones; and sign-in, sign-up, two-factor, reset, invites and choosing a workspace on standalone pages with no app around them. | 1 | import type { ReactNode } from "react"; |
| 2 | import { Link } from "react-router"; | |
| 3 | ||
| 4 | import { Logo } from "./logo"; | |
| 5 | import { Progress, useLeaving } from "./shell"; | |
| 6 | import { POLICIES } from "../lib/legal"; | |
| 7 | import { STATUS_URL } from "../lib/status"; | |
| 8 | ||
| 9 | const FOOT_LINK = "rounded px-1.5 py-1 text-xs text-faint transition-colors hover:text-fg focus-visible:ring-2 focus-visible:ring-accent outline-none"; | |
| 10 | ||
| 11 | /** | |
| 12 | * The frame for signing in, signing up and choosing a workspace | |
| 13 | * (lib/chrome.ts, `standalone`): no header, no sidebar, no dock. The | |
| 14 | * logo, then the page in a narrow column at the centre, and a quiet row | |
| 15 | * of links at the foot of the window. | |
| 16 | */ | |
| 17 | export function StandaloneFrame({ children }: { children: ReactNode }) { | |
| 18 | const leaving = useLeaving(); | |
| 19 | const terms = POLICIES.find((policy) => policy.slug === "terms"); | |
| 20 | const privacy = POLICIES.find((policy) => policy.slug === "privacy"); | |
| 21 | return ( | |
| 22 | <div className="flex min-h-dvh flex-col pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]"> | |
| 23 | <Progress /> | |
| 24 | <div id="content" tabIndex={-1} {...leaving} className={`flex grow flex-col items-center px-4 pt-[max(2.5rem,9vh)] pb-10 outline-none ${leaving.className}`}> | |
| 25 | <Link to="/" aria-label="g1t" className="flex rounded-md p-1 outline-none focus-visible:ring-2 focus-visible:ring-accent"> | |
| 26 | <Logo className="text-[1.75rem]" /> | |
| 27 | </Link> | |
| 28 | <div className="w-full">{children}</div> | |
| 29 | </div> | |
| 30 | <nav aria-label="About g1t" className="flex flex-wrap items-center justify-center gap-x-1 gap-y-1 px-4 pb-5"> | |
| 31 | {terms && ( | |
| 32 | <Link to={`/policies/${terms.slug}`} className={FOOT_LINK}> | |
| 33 | Terms | |
| 34 | </Link> | |
| 35 | )} | |
| 36 | {privacy && ( | |
| 37 | <Link to={`/policies/${privacy.slug}`} className={FOOT_LINK}> | |
| 38 | Privacy | |
| 39 | </Link> | |
| 40 | )} | |
| 41 | <a href="https://docs.g1t.sh/" className={FOOT_LINK}> | |
| 42 | Docs | |
| 43 | </a> | |
| 44 | <a href={STATUS_URL} className={FOOT_LINK}> | |
| 45 | Status | |
| 46 | </a> | |
| 47 | <Link to="/support" className={FOOT_LINK}> | |
| 48 | Support | |
| 49 | </Link> | |
| 50 | </nav> | |
| 51 | </div> | |
| 52 | ); | |
| 53 | } |
