Work App: a dedicated browser for work tools
A Tauri 2 shell with one child webview per configured tool. Nav on the left with groups and a collapsible icon rail; links between configured apps switch tabs, everything else leaves for the real browser. Design spec in docs/superpowers/specs/2026-09-01-work-app-design.md.
This commit is contained in:
@@ -0,0 +1,185 @@
|
||||
import type { Config, Group, WorkApp } from "../types";
|
||||
import { Favicon, HEADING, ICON_CHROME } from "./ui";
|
||||
|
||||
interface Props {
|
||||
config: Config;
|
||||
activeId: string | null;
|
||||
collapsed: boolean;
|
||||
onSelect: (id: string) => void;
|
||||
onToggleCollapse: () => void;
|
||||
onOpenSettings: () => void;
|
||||
onToggleGroup: (g: Group) => void;
|
||||
}
|
||||
|
||||
const RAIL = 52;
|
||||
const PANEL = 240;
|
||||
export const navWidth = (collapsed: boolean) => (collapsed ? RAIL : PANEL);
|
||||
|
||||
function Chevron({ dir }: { dir: "left" | "right" }) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="1.8">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d={dir === "left" ? "M15 6l-6 6 6 6" : "M9 6l6 6-6 6"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function Cog() {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="1.8">
|
||||
<circle cx="12" cy="12" r="3.2" />
|
||||
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09A1.65 1.65 0 008 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 15a1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06A1.65 1.65 0 009 4.6a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06A1.65 1.65 0 0019.4 9c.14.34.4.62.73.79.24.13.51.2.78.21H21a2 2 0 110 4h-.09c-.7.01-1.33.43-1.51 1z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Nav({
|
||||
config,
|
||||
activeId,
|
||||
collapsed,
|
||||
onSelect,
|
||||
onToggleCollapse,
|
||||
onOpenSettings,
|
||||
onToggleGroup,
|
||||
}: Props) {
|
||||
const groups = [...config.groups].sort((a, b) => a.order - b.order);
|
||||
const inGroup = (id: string | null) =>
|
||||
config.apps.filter((a) => a.groupId === id).sort((a, b) => a.order - b.order);
|
||||
const ungrouped = inGroup(null);
|
||||
|
||||
const shell =
|
||||
"flex shrink-0 flex-col overflow-hidden border-r border-slate-300 bg-white " +
|
||||
"dark:border-slate-800 dark:bg-slate-900";
|
||||
|
||||
// ------------------------------------------------------------ icon rail
|
||||
if (collapsed) {
|
||||
const railBtn = (app: WorkApp) => {
|
||||
const active = app.id === activeId;
|
||||
return (
|
||||
<button
|
||||
key={app.id}
|
||||
onClick={() => onSelect(app.id)}
|
||||
title={app.name}
|
||||
aria-label={app.name}
|
||||
className={
|
||||
"relative grid size-9 cursor-pointer place-items-center rounded-lg transition-colors " +
|
||||
(active
|
||||
? "bg-slate-100 dark:bg-slate-800"
|
||||
: "opacity-70 hover:bg-slate-100 hover:opacity-100 dark:hover:bg-slate-800")
|
||||
}
|
||||
>
|
||||
{active && (
|
||||
<span className="absolute -left-2 h-5 w-[3px] rounded-full bg-sky-500" />
|
||||
)}
|
||||
<Favicon url={app.url} name={app.name} size={18} />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<aside className={`${shell} w-[52px] items-center`} style={{ width: RAIL }}>
|
||||
<div className="flex w-full flex-col items-center gap-1 border-b border-slate-200 py-2 dark:border-slate-800">
|
||||
<button onClick={onOpenSettings} title="Settings" className={ICON_CHROME}>
|
||||
<Cog />
|
||||
</button>
|
||||
<button onClick={onToggleCollapse} title="Expand" className={ICON_CHROME}>
|
||||
<Chevron dir="right" />
|
||||
</button>
|
||||
</div>
|
||||
<nav className="flex min-h-0 flex-1 flex-col items-center gap-1 overflow-y-auto py-3">
|
||||
{ungrouped.map(railBtn)}
|
||||
{ungrouped.length > 0 && groups.length > 0 && (
|
||||
<span className="my-1 h-px w-6 bg-slate-200 dark:bg-slate-800" />
|
||||
)}
|
||||
{groups.map((g, i) => {
|
||||
const apps = inGroup(g.id);
|
||||
if (apps.length === 0) return null;
|
||||
return (
|
||||
<div key={g.id} className="flex flex-col items-center gap-1">
|
||||
{i > 0 && <span className="my-1 h-px w-6 bg-slate-200 dark:bg-slate-800" />}
|
||||
{apps.map(railBtn)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------- panel
|
||||
const row =
|
||||
"flex w-full cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-[13px] transition-colors";
|
||||
const inactive =
|
||||
"text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800";
|
||||
const active = "bg-slate-900 text-white dark:bg-white dark:text-slate-900";
|
||||
|
||||
const appRow = (app: WorkApp) => (
|
||||
<li key={app.id}>
|
||||
<button
|
||||
onClick={() => onSelect(app.id)}
|
||||
title={app.url}
|
||||
className={`${row} ${app.id === activeId ? active : inactive}`}
|
||||
>
|
||||
<Favicon url={app.url} name={app.name} />
|
||||
<span className="truncate">{app.name}</span>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
|
||||
return (
|
||||
<aside className={shell} style={{ width: PANEL }}>
|
||||
<header className="flex items-center justify-between gap-2 border-b border-slate-200 px-3 py-2 dark:border-slate-800">
|
||||
<span className="truncate text-[13px] font-semibold tracking-tight">Apps</span>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<button onClick={onOpenSettings} title="Settings" className={ICON_CHROME}>
|
||||
<Cog />
|
||||
</button>
|
||||
<button onClick={onToggleCollapse} title="Collapse" className={ICON_CHROME}>
|
||||
<Chevron dir="left" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav className="min-h-0 flex-1 overflow-y-auto px-2 py-3">
|
||||
{ungrouped.length > 0 && <ul className="space-y-0.5">{ungrouped.map(appRow)}</ul>}
|
||||
|
||||
{groups.map((g) => {
|
||||
const apps = inGroup(g.id);
|
||||
return (
|
||||
<section key={g.id} className="pt-3 first:pt-0">
|
||||
<button
|
||||
onClick={() => onToggleGroup(g)}
|
||||
className={`${HEADING} flex w-full cursor-pointer items-center gap-1 px-2 pb-1
|
||||
hover:text-slate-700 dark:hover:text-slate-200`}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className={`size-3 transition-transform ${g.collapsed ? "" : "rotate-90"}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 6l6 6-6 6" />
|
||||
</svg>
|
||||
<span className="truncate">{g.name}</span>
|
||||
<span className="ml-auto font-mono text-[10px] tracking-normal opacity-60">
|
||||
{apps.length}
|
||||
</span>
|
||||
</button>
|
||||
{!g.collapsed && <ul className="space-y-0.5">{apps.map(appRow)}</ul>}
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
|
||||
{config.apps.length === 0 && (
|
||||
<p className="px-2 py-3 text-[11px] leading-snug text-slate-500 dark:text-slate-400">
|
||||
No apps yet. Open Settings to add the first one.
|
||||
</p>
|
||||
)}
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,265 @@
|
||||
import { useState } from "react";
|
||||
|
||||
import * as api from "../api";
|
||||
import type { Config, Group, WorkApp } from "../types";
|
||||
import type { Theme } from "../hooks/useAppearance";
|
||||
import {
|
||||
BTN,
|
||||
BTN_PRIMARY,
|
||||
Dialog,
|
||||
Favicon,
|
||||
HELP,
|
||||
ICON_CHROME,
|
||||
INPUT,
|
||||
LABEL,
|
||||
SectionHeading,
|
||||
Segmented,
|
||||
SUBPANEL,
|
||||
} from "./ui";
|
||||
|
||||
interface Props {
|
||||
config: Config;
|
||||
theme: Theme;
|
||||
onConfig: (c: Config) => void;
|
||||
onTheme: (t: Theme) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
function TrashIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" className="size-3.5" fill="none" stroke="currentColor"
|
||||
strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M4 7h16M10 11v6M14 11v6" />
|
||||
<path d="M6 7l1 12.5A1.5 1.5 0 008.5 21h7a1.5 1.5 0 001.5-1.5L18 7" />
|
||||
<path d="M9 7V5a1 1 0 011-1h4a1 1 0 011 1v2" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Settings({ config, theme, onConfig, onTheme, onClose }: Props) {
|
||||
const [name, setName] = useState("");
|
||||
const [url, setUrl] = useState("");
|
||||
const [groupId, setGroupId] = useState<string>("");
|
||||
const [groupName, setGroupName] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [confirmDelete, setConfirmDelete] = useState<WorkApp | null>(null);
|
||||
|
||||
const groups = [...config.groups].sort((a, b) => a.order - b.order);
|
||||
|
||||
const run = async (fn: () => Promise<Config>) => {
|
||||
try {
|
||||
onConfig(await fn());
|
||||
setError(null);
|
||||
} catch (e) {
|
||||
setError(String(e));
|
||||
}
|
||||
};
|
||||
|
||||
const addApp = async () => {
|
||||
if (!name.trim() || !url.trim()) return;
|
||||
await run(() => api.addApp(name, url, groupId || null));
|
||||
setName("");
|
||||
setUrl("");
|
||||
};
|
||||
|
||||
const addGroup = async () => {
|
||||
if (!groupName.trim()) return;
|
||||
await run(() => api.addGroup(groupName));
|
||||
setGroupName("");
|
||||
};
|
||||
|
||||
const patch = (app: WorkApp, fields: Partial<WorkApp>) =>
|
||||
run(() => api.updateApp({ ...app, ...fields }));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog title="Settings" onCancel={onClose} wide footer={<div />}>
|
||||
<div className="space-y-6">
|
||||
{error && (
|
||||
<p className="rounded-lg bg-red-500/10 px-3 py-2 text-[12px] text-red-600 dark:text-red-400">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* ----------------------------------------------------- apps */}
|
||||
<section className="space-y-2">
|
||||
<SectionHeading>Apps</SectionHeading>
|
||||
<div className="space-y-1.5">
|
||||
{config.apps.length === 0 && (
|
||||
<p className={HELP}>Nothing yet. Add the first one below.</p>
|
||||
)}
|
||||
{[...config.apps]
|
||||
.sort((a, b) => a.order - b.order)
|
||||
.map((app) => (
|
||||
<div
|
||||
key={app.id}
|
||||
className="flex items-center gap-2 rounded-lg border border-slate-200 px-2 py-1.5 dark:border-slate-800"
|
||||
>
|
||||
<Favicon url={app.url} name={app.name} />
|
||||
<input
|
||||
value={app.name}
|
||||
onChange={(e) => patch(app, { name: e.target.value })}
|
||||
className={`${INPUT} h-[26px] flex-1`}
|
||||
/>
|
||||
<input
|
||||
value={app.url}
|
||||
onChange={(e) => patch(app, { url: e.target.value })}
|
||||
title="Changing this rebuilds the app's view"
|
||||
className={`${INPUT} h-[26px] flex-[1.4] font-mono text-[11px]`}
|
||||
/>
|
||||
<select
|
||||
value={app.groupId ?? ""}
|
||||
onChange={(e) => patch(app, { groupId: e.target.value || null })}
|
||||
className={`${INPUT} h-[26px] w-[110px] cursor-pointer`}
|
||||
>
|
||||
<option value="">No group</option>
|
||||
{groups.map((g) => (
|
||||
<option key={g.id} value={g.id}>
|
||||
{g.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
onClick={() => setConfirmDelete(app)}
|
||||
title={`Remove ${app.name}`}
|
||||
className={`${ICON_CHROME} hover:text-red-500!`}
|
||||
>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={`${SUBPANEL} flex items-end gap-2`}>
|
||||
<label className="flex-1 space-y-1">
|
||||
<span className={LABEL}>Name</span>
|
||||
<input
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Odoo"
|
||||
className={INPUT}
|
||||
/>
|
||||
</label>
|
||||
<label className="flex-[1.4] space-y-1">
|
||||
<span className={LABEL}>URL</span>
|
||||
<input
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && addApp()}
|
||||
placeholder="example.com"
|
||||
className={`${INPUT} font-mono text-[11px]`}
|
||||
/>
|
||||
</label>
|
||||
<label className="w-[110px] space-y-1">
|
||||
<span className={LABEL}>Group</span>
|
||||
<select
|
||||
value={groupId}
|
||||
onChange={(e) => setGroupId(e.target.value)}
|
||||
className={`${INPUT} cursor-pointer`}
|
||||
>
|
||||
<option value="">No group</option>
|
||||
{groups.map((g) => (
|
||||
<option key={g.id} value={g.id}>
|
||||
{g.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<button onClick={addApp} className={BTN_PRIMARY}>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<p className={HELP}>
|
||||
An app owns its URL's host. Links to any other app on this list switch to it;
|
||||
everything else opens in your browser.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* --------------------------------------------------- groups */}
|
||||
<section className="space-y-2">
|
||||
<SectionHeading>Groups</SectionHeading>
|
||||
<div className="space-y-1.5">
|
||||
{groups.length === 0 && <p className={HELP}>No groups yet.</p>}
|
||||
{groups.map((g: Group) => (
|
||||
<div
|
||||
key={g.id}
|
||||
className="flex items-center gap-2 rounded-lg border border-slate-200 px-2 py-1.5 dark:border-slate-800"
|
||||
>
|
||||
<input
|
||||
value={g.name}
|
||||
onChange={(e) =>
|
||||
run(() => api.updateGroup({ ...g, name: e.target.value }))
|
||||
}
|
||||
className={`${INPUT} h-[26px] flex-1`}
|
||||
/>
|
||||
<span className="shrink-0 font-mono text-[10px] text-slate-400">
|
||||
{config.apps.filter((a) => a.groupId === g.id).length} apps
|
||||
</span>
|
||||
<button
|
||||
onClick={() => run(() => api.deleteGroup(g.id))}
|
||||
title={`Delete ${g.name} — its apps stay, ungrouped`}
|
||||
className={`${ICON_CHROME} hover:text-red-500!`}
|
||||
>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={`${SUBPANEL} flex items-end gap-2`}>
|
||||
<label className="flex-1 space-y-1">
|
||||
<span className={LABEL}>New group</span>
|
||||
<input
|
||||
value={groupName}
|
||||
onChange={(e) => setGroupName(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && addGroup()}
|
||||
placeholder="Finance"
|
||||
className={INPUT}
|
||||
/>
|
||||
</label>
|
||||
<button onClick={addGroup} className={BTN}>
|
||||
Add group
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ----------------------------------------------- appearance */}
|
||||
<section className="space-y-2">
|
||||
<SectionHeading>Appearance</SectionHeading>
|
||||
<Segmented<Theme>
|
||||
value={theme}
|
||||
onChange={onTheme}
|
||||
options={[
|
||||
{ value: "system", label: "System" },
|
||||
{ value: "light", label: "Light" },
|
||||
{ value: "dark", label: "Dark" },
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<div className="flex justify-end border-t border-slate-200 pt-4 dark:border-slate-800">
|
||||
<button onClick={onClose} className={BTN}>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
{confirmDelete && (
|
||||
<Dialog
|
||||
title={`Remove ${confirmDelete.name}?`}
|
||||
onCancel={() => setConfirmDelete(null)}
|
||||
onConfirm={async () => {
|
||||
await run(() => api.deleteApp(confirmDelete.id));
|
||||
setConfirmDelete(null);
|
||||
}}
|
||||
confirmLabel="Remove"
|
||||
destructive
|
||||
>
|
||||
It disappears from the nav and its view is closed. The session it holds for{" "}
|
||||
<span className="font-mono text-[12px]">{confirmDelete.url}</span> is kept, so
|
||||
adding it back does not mean logging in again.
|
||||
</Dialog>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { ICON_CHROME } from "./ui";
|
||||
|
||||
interface Props {
|
||||
url: string | null;
|
||||
appName: string | null;
|
||||
onBack: () => void;
|
||||
onForward: () => void;
|
||||
onReload: () => void;
|
||||
onOpenExternal: () => void;
|
||||
}
|
||||
|
||||
/** Reserves the strip the macOS traffic lights sit in. */
|
||||
const TRAFFIC_LIGHTS = 78;
|
||||
|
||||
function Icon({ d }: { d: string }) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="1.8">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d={d} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Browser chrome, kept to the four things a tabless app still needs. It spans
|
||||
* the whole window rather than sitting inside the stage, so the traffic lights
|
||||
* have somewhere to live no matter how narrow the nav gets.
|
||||
*/
|
||||
export default function TopBar({
|
||||
url,
|
||||
appName,
|
||||
onBack,
|
||||
onForward,
|
||||
onReload,
|
||||
onOpenExternal,
|
||||
}: Props) {
|
||||
return (
|
||||
<header
|
||||
data-tauri-drag-region
|
||||
className="flex h-[38px] shrink-0 items-center gap-1 border-b border-slate-300
|
||||
bg-white px-2 dark:border-slate-800 dark:bg-slate-900"
|
||||
style={{ paddingLeft: TRAFFIC_LIGHTS }}
|
||||
>
|
||||
<button onClick={onBack} title="Back" className={ICON_CHROME}>
|
||||
<Icon d="M15 6l-6 6 6 6" />
|
||||
</button>
|
||||
<button onClick={onForward} title="Forward" className={ICON_CHROME}>
|
||||
<Icon d="M9 6l6 6-6 6" />
|
||||
</button>
|
||||
<button onClick={onReload} title="Reload" className={ICON_CHROME}>
|
||||
<Icon d="M20 11a8 8 0 10-2.3 5.7M20 5v6h-6" />
|
||||
</button>
|
||||
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="mx-2 flex min-w-0 flex-1 items-center gap-2 text-[11px]"
|
||||
>
|
||||
{appName && (
|
||||
<span className="shrink-0 font-medium text-slate-600 dark:text-slate-300">
|
||||
{appName}
|
||||
</span>
|
||||
)}
|
||||
<span className="truncate text-slate-400 dark:text-slate-500">{url ?? ""}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onOpenExternal}
|
||||
title="Open this page in your browser"
|
||||
className={ICON_CHROME}
|
||||
disabled={!url}
|
||||
>
|
||||
<Icon d="M14 5h5v5M19 5l-8 8M18 14v4a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2h4" />
|
||||
</button>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
/**
|
||||
* The design system's component vocabulary, in one place. Every other file
|
||||
* composes these rather than re-spelling the class strings.
|
||||
*
|
||||
* Ported from FlightTube: slate and sky, a 9–15px type ladder, outline-first
|
||||
* controls, borders for separation and shadows only for elevation.
|
||||
*/
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
/** Every control in the app is this tall, so a row of mixed ones lines up. */
|
||||
export const CONTROL_H = "h-[30px]";
|
||||
|
||||
export const ICON_BTN =
|
||||
`grid ${CONTROL_H} w-[30px] shrink-0 place-items-center rounded-lg cursor-pointer ` +
|
||||
"disabled:cursor-not-allowed disabled:opacity-40";
|
||||
|
||||
export const HEADING =
|
||||
"text-[11px] font-bold uppercase tracking-widest text-slate-500 dark:text-slate-400";
|
||||
export const LABEL = "text-[12px] text-slate-500 dark:text-slate-400";
|
||||
export const HELP = "text-[11px] leading-snug text-slate-500 dark:text-slate-400";
|
||||
export const SECTION = "border-b border-slate-200 px-4 py-4 dark:border-slate-800";
|
||||
export const INPUT =
|
||||
`w-full ${CONTROL_H} rounded-lg border border-slate-300 bg-white px-3 text-[12px] outline-none ` +
|
||||
"placeholder:text-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:placeholder:text-slate-500";
|
||||
export const SUBPANEL = "rounded-lg bg-slate-50 p-3 dark:bg-slate-800/50";
|
||||
|
||||
const BTN_BASE =
|
||||
`inline-flex ${CONTROL_H} items-center justify-center rounded-lg text-[12px] ` +
|
||||
"disabled:cursor-not-allowed cursor-pointer";
|
||||
|
||||
export const BTN =
|
||||
`${BTN_BASE} border border-slate-300 px-2.5 font-medium ` +
|
||||
"hover:border-sky-500 hover:text-sky-600 disabled:opacity-40 " +
|
||||
"dark:border-slate-700 dark:hover:border-sky-500 dark:hover:text-sky-400";
|
||||
|
||||
export const BTN_PRIMARY =
|
||||
`${BTN_BASE} bg-sky-500 px-3 font-semibold text-white hover:bg-sky-400 disabled:opacity-40`;
|
||||
|
||||
export const BTN_DANGER =
|
||||
`${BTN_BASE} bg-red-600 px-3 font-semibold text-white hover:bg-red-500`;
|
||||
|
||||
/** Header actions: quieter than a secondary button, still a real target. */
|
||||
export const BTN_CHROME =
|
||||
`inline-flex ${CONTROL_H} items-center rounded-lg px-2 text-[12px] font-medium text-slate-500 ` +
|
||||
"cursor-pointer hover:bg-slate-100 hover:text-slate-900 disabled:opacity-40 " +
|
||||
"disabled:hover:bg-transparent dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white";
|
||||
|
||||
export const BTN_QUIET =
|
||||
"text-[11px] text-slate-500 underline underline-offset-2 cursor-pointer " +
|
||||
"hover:text-sky-600 dark:text-slate-400 dark:hover:text-sky-400";
|
||||
|
||||
/** Icon-button skin used throughout the chrome. */
|
||||
export const ICON_CHROME =
|
||||
`${ICON_BTN} text-slate-500 hover:bg-slate-100 hover:text-slate-900 ` +
|
||||
"dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white";
|
||||
|
||||
export function SectionHeading({ children }: { children: ReactNode }) {
|
||||
return <h2 className={`flex items-center gap-2 ${HEADING}`}>{children}</h2>;
|
||||
}
|
||||
|
||||
/** Bordered container, borderless children — the group's outline does the framing. */
|
||||
export function Segmented<T extends string>({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
options: Array<{ value: T; label: ReactNode; title?: string }>;
|
||||
value: T;
|
||||
onChange: (v: T) => void;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
className={`flex ${CONTROL_H} items-center rounded-lg border border-slate-300 p-0.5 dark:border-slate-700`}
|
||||
>
|
||||
{options.map((o) => {
|
||||
const active = o.value === value;
|
||||
return (
|
||||
<button
|
||||
key={o.value}
|
||||
onClick={() => onChange(o.value)}
|
||||
title={o.title}
|
||||
className={
|
||||
"inline-flex h-full cursor-pointer items-center justify-center rounded-md px-2.5 " +
|
||||
"text-[12px] font-medium transition-colors " +
|
||||
(active
|
||||
? "bg-slate-900! text-white! dark:bg-white! dark:text-slate-900!"
|
||||
: "text-slate-500 hover:bg-slate-100 hover:text-slate-900 " +
|
||||
"dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white")
|
||||
}
|
||||
>
|
||||
{o.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** States a fact in passing — a quality, a status. Never a control. */
|
||||
export function Badge({
|
||||
children,
|
||||
tone = "neutral",
|
||||
title,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
tone?: "neutral" | "accent" | "danger";
|
||||
title?: string;
|
||||
}) {
|
||||
const skin =
|
||||
tone === "accent"
|
||||
? "bg-sky-500/15 text-sky-700 dark:text-sky-300"
|
||||
: tone === "danger"
|
||||
? "bg-red-500/15 text-red-600 dark:text-red-400"
|
||||
: "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300";
|
||||
return (
|
||||
<span
|
||||
title={title}
|
||||
className={`inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium ${skin}`}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** A modal for anything needing a decision or reporting a failure. */
|
||||
export function Dialog({
|
||||
title,
|
||||
children,
|
||||
onCancel,
|
||||
confirmLabel,
|
||||
onConfirm,
|
||||
destructive,
|
||||
wide,
|
||||
footer,
|
||||
}: {
|
||||
title: string;
|
||||
children: ReactNode;
|
||||
onCancel: () => void;
|
||||
confirmLabel?: string;
|
||||
onConfirm?: () => void;
|
||||
destructive?: boolean;
|
||||
wide?: boolean;
|
||||
footer?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-[70] flex items-center justify-center bg-slate-950/70 p-5"
|
||||
onClick={onCancel}
|
||||
>
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className={`w-full ${wide ? "max-w-2xl max-h-[82vh] overflow-y-auto" : "max-w-sm"}
|
||||
rounded-2xl border border-slate-300 bg-white p-5 shadow-2xl
|
||||
dark:border-slate-700 dark:bg-slate-900`}
|
||||
>
|
||||
<h2 className="mb-1.5 text-[15px] font-semibold tracking-tight">{title}</h2>
|
||||
<div className="mb-4 text-[13px] leading-relaxed text-slate-600 dark:text-slate-300">
|
||||
{children}
|
||||
</div>
|
||||
{footer ?? (
|
||||
<div className="flex justify-end gap-2">
|
||||
<button onClick={onCancel} className={BTN}>
|
||||
{onConfirm ? "Cancel" : "Close"}
|
||||
</button>
|
||||
{onConfirm && (
|
||||
<button
|
||||
onClick={onConfirm}
|
||||
className={destructive ? BTN_DANGER : BTN_PRIMARY}
|
||||
>
|
||||
{confirmLabel ?? "Continue"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* An app's mark. Google's favicon service is used rather than the site's own
|
||||
* /favicon.ico, because many work tools sit behind a login that would return
|
||||
* the sign-in page's icon — or a 403 — to a request without a session.
|
||||
*/
|
||||
export function Favicon({
|
||||
url,
|
||||
name,
|
||||
size = 16,
|
||||
}: {
|
||||
url: string;
|
||||
name: string;
|
||||
size?: number;
|
||||
}) {
|
||||
let host = "";
|
||||
try {
|
||||
host = new URL(url).hostname;
|
||||
} catch {
|
||||
host = "";
|
||||
}
|
||||
const letter = name.trim().charAt(0).toUpperCase() || "?";
|
||||
return (
|
||||
<span
|
||||
className="relative grid shrink-0 place-items-center overflow-hidden rounded"
|
||||
style={{ width: size, height: size }}
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
className="absolute inset-0 grid place-items-center rounded bg-slate-200
|
||||
text-[9px] font-bold text-slate-500 dark:bg-slate-700 dark:text-slate-300"
|
||||
style={{ fontSize: Math.max(9, size * 0.5) }}
|
||||
>
|
||||
{letter}
|
||||
</span>
|
||||
{host && (
|
||||
<img
|
||||
src={`https://www.google.com/s2/favicons?sz=64&domain=${host}`}
|
||||
alt=""
|
||||
width={size}
|
||||
height={size}
|
||||
loading="lazy"
|
||||
className="relative rounded"
|
||||
onError={(e) => {
|
||||
// Leave the letter showing rather than a broken-image glyph.
|
||||
e.currentTarget.style.display = "none";
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user