Blame · Line-by-line history

`ui.tsx`

Each line is annotated with the commit that last touched it. Click any SHA to jump to that commit and see the surrounding change.

ui.tsxBlame703 lines · 2 contributors

Normal view Raw

45e31d0Claude	1	/**
	2	* Core UI Component Library — gluecron design system.
	3	*
	4	* Pure components. No raw HTML in routes. Every visual element
	5	* is a composable, typed, reusable component.
	6	*/
	7
	8	import type { FC, PropsWithChildren } from "hono/jsx";
	9	import { html } from "hono/html";
	10
	11	// ─── Primitive Components ───────────────────────────────────────────────────
	12
	13	/** Flex container with gap and alignment */
	14	export const Flex: FC<
	15	PropsWithChildren<{
	16	direction?: "row" \| "column";
	17	gap?: number;
	18	align?: string;
	19	justify?: string;
	20	wrap?: boolean;
	21	class?: string;
	22	style?: string;
	23	}>
	24	> = ({ children, direction = "row", gap = 0, align, justify, wrap, class: cls, style }) => (
	25	<div
	26	class={cls \|\| ""}
	27	style={`display:flex;flex-direction:${direction};${gap ? `gap:${gap}px;` : ""}${align ? `align-items:${align};` : ""}${justify ? `justify-content:${justify};` : ""}${wrap ? "flex-wrap:wrap;" : ""}${style \|\| ""}`}
	28	>
	29	{children}
	30	</div>
	31	);
	32
	33	/** Grid container */
	34	export const Grid: FC<
	35	PropsWithChildren<{ cols?: string; gap?: number; class?: string }>
	36	> = ({ children, cols = "repeat(auto-fill, minmax(340px, 1fr))", gap = 16, class: cls }) => (
	37	<div class={cls \|\| "card-grid"} style={`display:grid;grid-template-columns:${cols};gap:${gap}px;`}>
	38	{children}
	39	</div>
	40	);
	41
	42	/** Spacer element */
	43	export const Spacer: FC<{ size?: number }> = ({ size = 16 }) => (
	44	<div style={`height:${size}px`} />
	45	);
	46
	47	/** Text with semantic styling */
	48	export const Text: FC<
	49	PropsWithChildren<{
	50	size?: number;
	51	color?: string;
	52	weight?: number \| string;
	53	mono?: boolean;
	54	muted?: boolean;
	55	style?: string;
	56	}>
	57	> = ({ children, size, color, weight, mono, muted, style }) => (
	58	<span
	59	style={`${size ? `font-size:${size}px;` : ""}${color ? `color:${color};` : ""}${weight ? `font-weight:${weight};` : ""}${mono ? "font-family:var(--font-mono);" : ""}${muted ? "color:var(--text-muted);" : ""}${style \|\| ""}`}
	60	>
	61	{children}
	62	</span>
	63	);
	64
	65	// ─── Buttons ────────────────────────────────────────────────────────────────
	66
	67	export const Button: FC<
	68	PropsWithChildren<{
	69	variant?: "default" \| "primary" \| "danger" \| "success" \| "ghost";
	70	size?: "sm" \| "md" \| "lg";
	71	type?: "button" \| "submit" \| "reset";
	72	disabled?: boolean;
	73	formaction?: string;
	74	class?: string;
	75	}>
	76	> = ({ children, variant = "default", size = "md", type = "button", disabled, formaction, class: cls }: any) => {
	77	const variantCls =
	78	variant === "primary" ? " btn-primary" :
	79	variant === "danger" ? " btn-danger" :
	80	variant === "success" ? " btn-success" :
	81	variant === "ghost" ? " btn-ghost" : "";
	82	const sizeCls = size === "sm" ? " btn-sm" : size === "lg" ? " btn-lg" : "";
	83	return (
	84	<button
	85	type={type}
	86	class={`btn${variantCls}${sizeCls}${cls ? ` ${cls}` : ""}`}
	87	disabled={disabled}
	88	formaction={formaction}
	89	>
	90	{children}
	91	</button>
	92	);
	93	};
	94
	95	export const LinkButton: FC<
	96	PropsWithChildren<{
	97	href: string;
	98	variant?: "default" \| "primary" \| "danger" \| "success";
	99	size?: "sm" \| "md";
	100	}>
	101	> = ({ children, href, variant = "default", size = "md" }) => {
	102	const variantCls = variant === "primary" ? " btn-primary" : variant === "danger" ? " btn-danger" : variant === "success" ? " btn-success" : "";
	103	const sizeCls = size === "sm" ? " btn-sm" : "";
	104	return (
	105	<a href={href} class={`btn${variantCls}${sizeCls}`}>
	106	{children}
	107	</a>
	108	);
	109	};
	110
	111	// ─── Forms ──────────────────────────────────────────────────────────────────
	112
	113	export const Form: FC<
	114	PropsWithChildren<{
	115	action: string;
	116	method?: string;
	117	csrfToken?: string;
	118	class?: string;
	119	}>
	120	> = ({ children, action, method = "POST", csrfToken, class: cls }) => (
	121	<form method={method.toLowerCase() as any} action={action} class={cls \|\| ""}>
	122	{csrfToken && <input type="hidden" name="_csrf" value={csrfToken} />}
	123	{children}
	124	</form>
	125	);
	126
	127	export const FormGroup: FC<
	128	PropsWithChildren<{ label?: string; htmlFor?: string; hint?: string }>
	129	> = ({ children, label, htmlFor, hint }) => (
	130	<div class="form-group">
	131	{label && <label for={htmlFor}>{label}</label>}
	132	{children}
	133	{hint && <Text size={12} muted>{hint}</Text>}
	134	</div>
	135	);
	136
	137	export const Input: FC<{
	138	name: string;
	139	type?: string;
	140	id?: string;
	141	value?: string;
	142	placeholder?: string;
	143	required?: boolean;
	144	disabled?: boolean;
	145	pattern?: string;
	146	autocomplete?: string;
	147	autofocus?: boolean;
bb0f894Claude	148	minLength?: number;
	149	maxLength?: number;
45e31d0Claude	150	style?: string;
	151	}> = (props) => (
	152	<input
	153	type={props.type \|\| "text"}
	154	id={props.id \|\| props.name}
	155	name={props.name}
	156	value={props.value}
	157	placeholder={props.placeholder}
	158	required={props.required}
	159	disabled={props.disabled}
	160	pattern={props.pattern}
	161	autocomplete={props.autocomplete}
	162	autofocus={props.autofocus}
bb0f894Claude	163	minLength={props.minLength}
	164	maxLength={props.maxLength}
45e31d0Claude	165	class={props.disabled ? "input-disabled" : ""}
	166	style={props.style}
	167	/>
	168	);
	169
	170	export const TextArea: FC<{
	171	name: string;
	172	id?: string;
	173	rows?: number;
	174	placeholder?: string;
	175	required?: boolean;
	176	value?: string;
	177	mono?: boolean;
	178	style?: string;
	179	}> = (props) => (
	180	<textarea
	181	id={props.id \|\| props.name}
	182	name={props.name}
	183	rows={props.rows \|\| 6}
	184	placeholder={props.placeholder}
	185	required={props.required}
	186	style={`${props.mono ? "font-family:var(--font-mono);font-size:13px;" : ""}${props.style \|\| ""}`}
	187	>
	188	{props.value}
	189	</textarea>
	190	);
	191
	192	export const Select: FC<
	193	PropsWithChildren<{ name: string; id?: string; value?: string }>
	194	> = ({ children, name, id, value }) => (
	195	<select id={id \|\| name} name={name} value={value}>
	196	{children}
	197	</select>
	198	);
	199
	200	// ─── Feedback Components ────────────────────────────────────────────────────
	201
	202	export const Alert: FC<
	203	PropsWithChildren<{ variant: "error" \| "success" \| "warning" \| "info" }>
	204	> = ({ children, variant }) => {
	205	const cls =
	206	variant === "error" ? "auth-error" :
	207	variant === "success" ? "auth-success" :
	208	variant === "warning" ? "alert-warning" :
	209	"alert-info";
	210	return <div class={cls}>{children}</div>;
	211	};
	212
	213	export const EmptyState: FC<
	214	PropsWithChildren<{ title?: string; icon?: string }>
	215	> = ({ children, title, icon }) => (
	216	<div class="empty-state">
	217	{icon && <div style="font-size:48px;margin-bottom:12px">{icon}</div>}
	218	{title && <h2>{title}</h2>}
	219	{children}
	220	</div>
	221	);
	222
	223	export const Badge: FC<
	224	PropsWithChildren<{
	225	variant?: "default" \| "open" \| "closed" \| "merged" \| "success" \| "danger" \| "warning";
	226	style?: string;
	227	}>
	228	> = ({ children, variant = "default", style }) => {
	229	const cls =
	230	variant === "open" ? "badge-open" :
	231	variant === "closed" ? "badge-closed" :
	232	variant === "merged" ? "badge-merged" :
	233	variant === "success" ? "badge-success" :
	234	variant === "danger" ? "badge-danger" :
	235	variant === "warning" ? "badge-warning" :
	236	"badge";
	237	return <span class={`issue-badge ${cls}`} style={style}>{children}</span>;
	238	};
	239
	240	// ─── Card Components ────────────────────────────────────────────────────────
	241
	242	export const Card: FC<PropsWithChildren<{ class?: string; style?: string }>> = ({
	243	children,
	244	class: cls,
	245	style,
	246	}) => (
	247	<div class={`card${cls ? ` ${cls}` : ""}`} style={style}>
	248	{children}
	249	</div>
	250	);
	251
	252	export const CardMeta: FC<PropsWithChildren> = ({ children }) => (
	253	<div class="card-meta">{children}</div>
	254	);
	255
	256	// ─── Navigation Components ──────────────────────────────────────────────────
	257
	258	export const TabNav: FC<{
	259	tabs: Array<{ label: string; href: string; active?: boolean; count?: number }>;
	260	}> = ({ tabs }) => (
	261	<div class="repo-nav">
	262	{tabs.map((tab) => (
	263	<a href={tab.href} class={tab.active ? "active" : ""}>
	264	{tab.label}
	265	{tab.count !== undefined && (
	266	<span class="tab-count">{tab.count}</span>
	267	)}
	268	</a>
	269	))}
	270	</div>
	271	);
	272
	273	export const FilterTabs: FC<{
	274	tabs: Array<{ label: string; href: string; active?: boolean }>;
	275	}> = ({ tabs }) => (
	276	<div class="issue-tabs">
	277	{tabs.map((tab) => (
	278	<a href={tab.href} class={tab.active ? "active" : ""}>
	279	{tab.label}
	280	</a>
	281	))}
	282	</div>
	283	);
	284
	285	// ─── Page Layout Components ─────────────────────────────────────────────────
	286
	287	export const PageHeader: FC<
	288	PropsWithChildren<{ title: string; actions?: any }>
	289	> = ({ title, actions, children }) => (
	290	<Flex justify="space-between" align="center" style="margin-bottom:20px">
	291	<h2>{title}</h2>
	292	{actions}
	293	{children}
	294	</Flex>
	295	);
	296
	297	export const Section: FC<
	298	PropsWithChildren<{ title?: string; style?: string }>
	299	> = ({ children, title, style }) => (
	300	<div style={`margin-bottom:24px;${style \|\| ""}`}>
	301	{title && <h3 style="margin-bottom:12px">{title}</h3>}
	302	{children}
	303	</div>
	304	);
	305
	306	export const Container: FC<
	307	PropsWithChildren<{ maxWidth?: number; class?: string }>
	308	> = ({ children, maxWidth = 800, class: cls }) => (
	309	<div class={cls \|\| ""} style={`max-width:${maxWidth}px`}>
	310	{children}
	311	</div>
	312	);
	313
	314	// ─── Data Display Components ────────────────────────────────────────────────
	315
	316	export const StatGroup: FC<{
	317	stats: Array<{ label: string; value: string \| number; color?: string }>;
	318	}> = ({ stats }) => (
	319	<Flex gap={24} wrap>
	320	{stats.map((stat) => (
	321	<div>
	322	<div style={`font-size:24px;font-weight:700;${stat.color ? `color:${stat.color};` : ""}`}>
	323	{stat.value}
	324	</div>
	325	<Text size={13} muted>{stat.label}</Text>
	326	</div>
	327	))}
	328	</Flex>
	329	);
	330
	331	export const KeyValue: FC<{ label: string; value: string \| number }> = ({
	332	label,
	333	value,
	334	}) => (
	335	<Flex justify="space-between" align="center" style="padding:8px 0;border-bottom:1px solid var(--border)">
	336	<Text size={14} muted>{label}</Text>
	337	<Text size={14}>{String(value)}</Text>
	338	</Flex>
	339	);
	340
	341	export const DataTable: FC<{
	342	headers: string[];
	343	rows: Array<Array<string \| any>>;
	344	class?: string;
	345	}> = ({ headers, rows, class: cls }) => (
	346	<table class={cls \|\| "file-table"}>
	347	<thead>
	348	<tr>
	349	{headers.map((h) => (
	350	<th style="padding:8px 16px;text-align:left;font-size:13px;color:var(--text-muted);border-bottom:1px solid var(--border)">{h}</th>
	351	))}
	352	</tr>
	353	</thead>
	354	<tbody>
	355	{rows.map((row) => (
	356	<tr>
	357	{row.map((cell) => (
	358	<td style="padding:8px 16px;font-size:14px">{cell}</td>
	359	))}
	360	</tr>
	361	))}
	362	</tbody>
	363	</table>
	364	);
	365
	366	// ─── List Components ────────────────────────────────────────────────────────
	367
	368	export const ListItem: FC<
	369	PropsWithChildren<{ style?: string }>
	370	> = ({ children, style }) => (
	371	<div class="issue-item" style={style}>
	372	{children}
	373	</div>
	374	);
	375
	376	export const List: FC<PropsWithChildren<{ class?: string }>> = ({ children, class: cls }) => (
	377	<div class={cls \|\| "issue-list"}>
	378	{children}
	379	</div>
	380	);
	381
	382	// ─── Code Display ───────────────────────────────────────────────────────────
	383
	384	export const CodeBlock: FC<{
	385	code: string;
	386	language?: string;
	387	showLineNumbers?: boolean;
	388	}> = ({ code, showLineNumbers = true }) => {
	389	const lines = code.split("\n");
	390	if (lines[lines.length - 1] === "") lines.pop();
	391	return (
	392	<div class="blob-code">
	393	<table>
	394	<tbody>
	395	{lines.map((line, i) => (
	396	<tr>
	397	{showLineNumbers && <td class="line-num">{i + 1}</td>}
	398	<td class="line-content">{line}</td>
	399	</tr>
	400	))}
	401	</tbody>
	402	</table>
	403	</div>
	404	);
	405	};
	406
	407	export const InlineCode: FC<PropsWithChildren> = ({ children }) => (
	408	<code style="font-size:12px;background:var(--bg-tertiary);padding:2px 6px;border-radius:3px;font-family:var(--font-mono)">
	409	{children}
	410	</code>
	411	);
	412
	413	export const CopyBlock: FC<{
	414	text: string;
	415	label?: string;
	416	}> = ({ text, label }) => (
	417	<Flex gap={8} align="center" class="copy-block">
	418	{label && <Text size={13} muted>{label}</Text>}
	419	<code
	420	style="flex:1;padding:8px 12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-mono);font-size:13px;overflow-x:auto"
	421	data-copy={text}
	422	>
	423	{text}
	424	</code>
	425	<button
	426	type="button"
	427	class="btn btn-sm copy-btn"
	428	data-clipboard={text}
	429	title="Copy to clipboard"
	430	>
	431	Copy
	432	</button>
	433	</Flex>
	434	);
	435
	436	// ─── Notification Components ────────────────────────────────────────────────
	437
	438	export const NotificationBell: FC<{ count: number; href: string }> = ({
	439	count,
	440	href,
	441	}) => (
	442	<a href={href} class="notification-bell" title="Notifications">
	443	<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
	444	<path d="M8 16a2 2 0 002-2H6a2 2 0 002 2zM8 1.918l-.797.161A4.002 4.002 0 004 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 00-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 111.99 0A5.002 5.002 0 0113 6c0 .88.32 4.2 1.22 6z" />
	445	</svg>
	446	{count > 0 && <span class="notification-count">{count > 99 ? "99+" : count}</span>}
	447	</a>
	448	);
	449
	450	// ─── Profile Components ─────────────────────────────────────────────────────
	451
	452	export const Avatar: FC<{
	453	name: string;
	454	url?: string;
	455	size?: number;
	456	}> = ({ name, url, size = 40 }) => {
	457	if (url) {
	458	return (
	459	<img
	460	src={url}
	461	alt={name}
ea52715copilot-swe-agent[bot]	462	width={size}
	463	height={size}
45e31d0Claude	464	style={`width:${size}px;height:${size}px;border-radius:50%;object-fit:cover`}
	465	loading="lazy"
	466	/>
	467	);
	468	}
	469	return (
	470	<div
	471	class="user-avatar"
	472	style={`width:${size}px;height:${size}px;font-size:${size * 0.4}px`}
	473	>
	474	{name[0].toUpperCase()}
	475	</div>
	476	);
	477	};
	478
	479	export const UserCard: FC<{
	480	username: string;
	481	displayName?: string \| null;
	482	bio?: string \| null;
	483	avatarUrl?: string \| null;
	484	}> = ({ username, displayName, bio, avatarUrl }) => (
	485	<div class="user-profile">
	486	<Avatar name={displayName \|\| username} url={avatarUrl \|\| undefined} size={96} />
	487	<div class="user-info">
	488	<h2>{displayName \|\| username}</h2>
	489	<div class="username">@{username}</div>
	490	{bio && <div class="bio">{bio}</div>}
	491	</div>
	492	</div>
	493	);
	494
	495	// ─── Onboarding Components ──────────────────────────────────────────────────
	496
	497	export const StepIndicator: FC<{
	498	steps: Array<{ label: string; completed: boolean; active: boolean }>;
	499	}> = ({ steps }) => (
	500	<Flex gap={0} align="center" class="step-indicator">
	501	{steps.map((step, i) => (
	502	<>
	503	{i > 0 && <div class="step-line" data-completed={step.completed \|\| steps[i - 1]?.completed ? "true" : "false"} />}
	504	<Flex direction="column" align="center" gap={4}>
	505	<div
	506	class={`step-circle${step.completed ? " step-completed" : ""}${step.active ? " step-active" : ""}`}
	507	>
	508	{step.completed ? "\u2713" : i + 1}
	509	</div>
	510	<Text size={12} muted={!step.active}>{step.label}</Text>
	511	</Flex>
	512	</>
	513	))}
	514	</Flex>
	515	);
	516
	517	export const WelcomeHero: FC<
	518	PropsWithChildren<{ title: string; subtitle?: string }>
	519	> = ({ children, title, subtitle }) => (
	520	<div class="welcome-hero">
	521	<h1>{title}</h1>
	522	{subtitle && <p class="hero-subtitle">{subtitle}</p>}
	523	{children}
	524	</div>
	525	);
	526
	527	export const FeatureCard: FC<{
	528	icon: string;
	529	title: string;
	530	description: string;
	531	href?: string;
	532	}> = ({ icon, title, description, href }) => {
	533	const content = (
	534	<Card class="feature-card">
	535	<div class="feature-icon">{icon}</div>
	536	<h3>{title}</h3>
	537	<Text size={13} muted>{description}</Text>
	538	</Card>
	539	);
	540	return href ? <a href={href} style="text-decoration:none">{content}</a> : content;
	541	};
	542
	543	// ─── Search Components ──────────────────────────────────────────────────────
	544
	545	export const SearchBar: FC<{
	546	action: string;
	547	value?: string;
	548	placeholder?: string;
	549	name?: string;
	550	}> = ({ action, value, placeholder = "Search...", name = "q" }) => (
	551	<form method="get" action={action} style="margin-bottom:20px">
	552	<Flex gap={8}>
	553	<input
	554	type="text"
	555	name={name}
	556	value={value}
	557	placeholder={placeholder}
	558	class="search-input"
	559	autocomplete="off"
	560	/>
	561	<Button type="submit" variant="primary">Search</Button>
	562	</Flex>
	563	</form>
	564	);
	565
	566	export const SearchResults: FC<{
	567	query: string;
	568	count: number;
	569	}> = ({ query, count }) => (
	570	<p style="font-size:14px;color:var(--text-muted);margin-bottom:16px">
	571	{count} result{count !== 1 ? "s" : ""} for{" "}
	572	<strong style="color:var(--text)">"{query}"</strong>
	573	</p>
	574	);
	575
	576	// ─── Markdown Content ───────────────────────────────────────────────────────
	577
	578	export const MarkdownContent: FC<{ html: string }> = ({ html: htmlContent }) => (
	579	<div class="markdown-body">
	580	{html([htmlContent] as unknown as TemplateStringsArray)}
	581	</div>
	582	);
	583
	584	// ─── Comment Components ─────────────────────────────────────────────────────
	585
	586	export const CommentBox: FC<{
	587	author: string;
	588	date: string \| Date;
	589	body: string;
	590	isAi?: boolean;
	591	}> = ({ author, date, body, isAi }) => {
	592	const dateStr = typeof date === "string" ? date : date.toISOString();
	593	return (
	594	<div class={`issue-comment-box${isAi ? " ai-review" : ""}`}>
	595	<div class="comment-header">
	596	<Flex gap={8} align="center">
	597	<strong>{author}</strong>
	598	{isAi && <Badge variant="default" style="font-size:11px">AI Review</Badge>}
	599	<Text size={13} muted>commented {formatRelative(dateStr)}</Text>
	600	</Flex>
	601	</div>
	602	<MarkdownContent html={body} />
	603	</div>
	604	);
	605	};
	606
	607	export const CommentForm: FC<{
	608	action: string;
	609	csrfToken?: string;
	610	placeholder?: string;
	611	submitLabel?: string;
	612	extraActions?: any;
	613	}> = ({ action, csrfToken, placeholder = "Leave a comment... (Markdown supported)", submitLabel = "Comment", extraActions }) => (
	614	<div style="margin-top:20px">
	615	<Form action={action} csrfToken={csrfToken}>
	616	<FormGroup>
	617	<div class="comment-editor">
	618	<div class="editor-tabs">
	619	<button type="button" class="editor-tab active" data-tab="write">Write</button>
	620	<button type="button" class="editor-tab" data-tab="preview">Preview</button>
	621	</div>
	622	<TextArea
	623	name="body"
	624	rows={6}
	625	required
	626	placeholder={placeholder}
	627	mono
	628	/>
	629	<div class="editor-preview" style="display:none" />
	630	</div>
	631	</FormGroup>
	632	<Flex gap={8}>
	633	<Button type="submit" variant="primary">{submitLabel}</Button>
	634	{extraActions}
	635	</Flex>
	636	</Form>
	637	</div>
	638	);
	639
	640	// ─── Tooltip Component ──────────────────────────────────────────────────────
	641
	642	export const Tooltip: FC<PropsWithChildren<{ text: string }>> = ({
	643	children,
	644	text,
	645	}) => (
	646	<span class="tooltip-wrapper" data-tooltip={text}>
	647	{children}
	648	</span>
	649	);
	650
	651	// ─── Loading & Progress ─────────────────────────────────────────────────────
	652
	653	export const Spinner: FC<{ size?: number }> = ({ size = 20 }) => (
	654	<div
	655	class="spinner"
	656	style={`width:${size}px;height:${size}px`}
	657	/>
	658	);
	659
	660	export const ProgressBar: FC<{ value: number; max?: number; color?: string }> = ({
	661	value,
	662	max = 100,
	663	color,
	664	}) => (
	665	<div class="progress-bar">
	666	<div
	667	class="progress-fill"
	668	style={`width:${(value / max) * 100}%;${color ? `background:${color};` : ""}`}
	669	/>
	670	</div>
	671	);
	672
	673	// ─── Keyboard Shortcut Hint ─────────────────────────────────────────────────
	674
	675	export const Kbd: FC<PropsWithChildren> = ({ children }) => (
	676	<kbd class="kbd">{children}</kbd>
	677	);
	678
	679	// ─── Utility Functions ──────────────────────────────────────────────────────
	680
	681	export function formatRelative(dateStr: string \| Date): string {
	682	const date = typeof dateStr === "string" ? new Date(dateStr) : dateStr;
	683	const now = new Date();
	684	const diffMs = now.getTime() - date.getTime();
	685	const diffMins = Math.floor(diffMs / 60000);
	686	if (diffMins < 1) return "just now";
	687	if (diffMins < 60) return `${diffMins}m ago`;
	688	const diffHours = Math.floor(diffMins / 60);
	689	if (diffHours < 24) return `${diffHours}h ago`;
	690	const diffDays = Math.floor(diffHours / 24);
	691	if (diffDays < 30) return `${diffDays}d ago`;
	692	return date.toLocaleDateString("en-US", {
	693	month: "short",
	694	day: "numeric",
	695	year: "numeric",
	696	});
	697	}
	698
	699	export function formatSize(bytes: number): string {
	700	if (bytes < 1024) return `${bytes} B`;
	701	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
	702	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
	703	}