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.
| Docs: the inbox, what lands in it and why, its tabs and actions | 1 | import type { ComponentProps } from "react"; |
| 2 | ||
| 3 | import { cn } from "../../lib/cn"; | |
| 4 | import { notACredential } from "./index"; | |
| 5 | ||
| 6 | // shadcn/ui's input, styled with g1t's tokens. Unlike the older `Input` in | |
| 7 | // ./index it takes a className, and fields that are not part of signing in | |
| 8 | // still keep password managers out. | |
| 9 | ||
| 10 | export const CONTROL = | |
| 11 | "w-full min-w-0 rounded-md border border-line bg-bg px-3 py-2 text-sm text-fg outline-none transition-[border-color,box-shadow] placeholder:text-faint hover:border-line-strong focus-visible:border-accent-dim focus-visible:ring-2 focus-visible:ring-accent/25 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger/70"; | |
| 12 | ||
| 13 | export function Input({ className, ...props }: ComponentProps<"input">) { | |
| 14 | return <input {...notACredential(props.autoComplete)} {...props} className={cn(CONTROL, "h-9", className)} />; | |
| 15 | } | |
| 16 | ||
| 17 | /** | |
| 18 | * Text either side of an input, joined into one control, as in | |
| 19 | * `workspace / name` or `https:// … .g1t.page`. Put addons and an input | |
| 20 | * inside; the group draws the border and the focus ring. | |
| 21 | */ | |
| 22 | export function InputGroup({ className, ...props }: ComponentProps<"div">) { | |
| 23 | return ( | |
| 24 | <div | |
| 25 | className={cn( | |
| 26 | "flex h-9 w-full min-w-0 items-stretch overflow-hidden rounded-md border border-line bg-bg text-sm transition-[border-color,box-shadow]", | |
| People wear their own avatars wherever g1t knows them only by name, and a workspace is never shown as a person. The activity feeds, recent changes, home's most active faces, issue and pull request authors, assignees, comments and the audit log drew a person from their username alone, so everyone got their letter avatar instead of the picture they uploaded. An avatar given no picture now draws the letter at once and lays the person's own picture over it once it loads, from /-/avatar/user/<username> (routes/avatar-user.ts): a redirect to the picture on the usercontent origin, or not found, read from identity's people only, so a workspace's icon can never stand in for someone. Kept five minutes, public like the profile. Agents, the product tour's people, "someone" and workspaces' square avatars are never looked up (image null), so an account with the same name never lends them its face. | 27 | "hover:border-line-strong has-focus-visible:border-accent-dim has-focus-visible:ring-2 has-focus-visible:ring-accent/25", |
| Docs: the inbox, what lands in it and why, its tabs and actions | 28 | "[&_input]:h-full [&_input]:rounded-none [&_input]:border-0 [&_input]:bg-transparent [&_input]:ring-0 [&_input]:focus-visible:ring-0", |
| 29 | className, | |
| 30 | )} | |
| 31 | {...props} | |
| 32 | /> | |
| 33 | ); | |
| 34 | } | |
| 35 | ||
| 36 | export function InputAddon({ className, ...props }: ComponentProps<"span">) { | |
| 37 | return ( | |
| 38 | <span | |
| 39 | className={cn("flex shrink-0 items-center px-2.5 text-faint select-none", className)} | |
| 40 | {...props} | |
| 41 | /> | |
| 42 | ); | |
| 43 | } |
This file's history is long; its oldest lines are credited to the oldest commit read.