treefmt: apply prettier
Pure `nix fmt` output from the commit before this one — no hand edits. 203 files: 52 md, 42 tsx, 32 js, 32 css, 21 ts, 13 html, 8 json, 3 mjs. Reproduce with `nix develop -c nix fmt` on the parent commit; the result should be byte-identical to this tree. None of the 13 `.prettierignore` entries appears here — verified by intersecting the changed-file list against the ignore file, with a control proving the intersection finds a match when one exists.
This commit is contained in:
atlas
parent
5d24bedd60
commit
39b95c2ede
203 changed files with 10090 additions and 6085 deletions
|
|
@ -26,7 +26,7 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
.links-menu-button:hover,
|
||||
.links-menu-button[aria-expanded='true'] {
|
||||
.links-menu-button[aria-expanded="true"] {
|
||||
border-color: var(--border);
|
||||
background: var(--bg-elev);
|
||||
}
|
||||
|
|
@ -65,10 +65,10 @@
|
|||
animation: none;
|
||||
}
|
||||
}
|
||||
:root[data-motion='reduce'] .links-menu-popover {
|
||||
:root[data-motion="reduce"] .links-menu-popover {
|
||||
animation: none;
|
||||
}
|
||||
:root[data-motion='allow'] .links-menu-popover {
|
||||
:root[data-motion="allow"] .links-menu-popover {
|
||||
animation: links-menu-popover-enter 140ms ease;
|
||||
}
|
||||
.links-menu-item {
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
// hides the button rather than showing an empty popover, same "don't
|
||||
// render a dead affordance" rule the old dashboard's H0M3 tiles follow
|
||||
// for Forge/Matrix.
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { LinkIcon } from '@hive/shared/icons.js';
|
||||
import './LinksMenu.css';
|
||||
import { useEffect, useRef, useState } from "preact/hooks";
|
||||
import { LinkIcon } from "@hive/shared/icons.js";
|
||||
import "./LinksMenu.css";
|
||||
|
||||
interface ServiceLink {
|
||||
label: string;
|
||||
|
|
@ -27,8 +27,12 @@ export function LinksMenu() {
|
|||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/links')
|
||||
.then((r) => (r.ok ? (r.json() as Promise<ServiceLink[]>) : Promise.reject(new Error(`http ${r.status}`))))
|
||||
fetch("/api/links")
|
||||
.then((r) =>
|
||||
r.ok
|
||||
? (r.json() as Promise<ServiceLink[]>)
|
||||
: Promise.reject(new Error(`http ${r.status}`)),
|
||||
)
|
||||
.then(setLinks)
|
||||
.catch(() => setLinks([])); // best-effort: no button beats a broken one
|
||||
}, []);
|
||||
|
|
@ -38,16 +42,17 @@ export function LinksMenu() {
|
|||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function onPointerDown(e: MouseEvent) {
|
||||
if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
|
||||
if (rootRef.current && !rootRef.current.contains(e.target as Node))
|
||||
setOpen(false);
|
||||
}
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') setOpen(false);
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
}
|
||||
document.addEventListener('pointerdown', onPointerDown);
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
document.addEventListener("pointerdown", onPointerDown);
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener('pointerdown', onPointerDown);
|
||||
document.removeEventListener('keydown', onKeyDown);
|
||||
document.removeEventListener("pointerdown", onPointerDown);
|
||||
document.removeEventListener("keydown", onKeyDown);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
|
|
|
|||
|
|
@ -47,10 +47,10 @@
|
|||
transition: none;
|
||||
}
|
||||
}
|
||||
:root[data-motion='reduce'] .shell-brand {
|
||||
:root[data-motion="reduce"] .shell-brand {
|
||||
transition: none;
|
||||
}
|
||||
:root[data-motion='allow'] .shell-brand {
|
||||
:root[data-motion="allow"] .shell-brand {
|
||||
transition: color 140ms ease;
|
||||
}
|
||||
.shell-nav {
|
||||
|
|
@ -118,10 +118,10 @@
|
|||
transition: none;
|
||||
}
|
||||
}
|
||||
:root[data-motion='reduce'] .shell-nav-indicator {
|
||||
:root[data-motion="reduce"] .shell-nav-indicator {
|
||||
transition: none;
|
||||
}
|
||||
:root[data-motion='allow'] .shell-nav-indicator {
|
||||
:root[data-motion="allow"] .shell-nav-indicator {
|
||||
transition:
|
||||
left 140ms ease,
|
||||
top 140ms ease,
|
||||
|
|
@ -170,9 +170,9 @@
|
|||
animation: none;
|
||||
}
|
||||
}
|
||||
:root[data-motion='reduce'] .shell-body {
|
||||
:root[data-motion="reduce"] .shell-body {
|
||||
animation: none;
|
||||
}
|
||||
:root[data-motion='allow'] .shell-body {
|
||||
:root[data-motion="allow"] .shell-body {
|
||||
animation: shell-page-enter 160ms ease;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,30 +26,30 @@
|
|||
// the palette follows. `.shell-brand` rides the identical accent value
|
||||
// (`navAccent` below), so the header reads as one accent changing, not
|
||||
// the underline alone.
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import type { ComponentChildren } from 'preact';
|
||||
import { Link, useLocation } from 'wouter-preact';
|
||||
import { LinksMenu } from './LinksMenu.js';
|
||||
import { UserMenu } from './UserMenu.js';
|
||||
import { SettingsMenu } from '@hive/shared/settings-menu.js';
|
||||
import { useApplyThemeOverride } from '@hive/shared/theme-apply.js';
|
||||
import { useApplyMotionOverride } from '@hive/shared/motion-apply.js';
|
||||
import './Shell.css';
|
||||
import { useEffect, useRef, useState } from "preact/hooks";
|
||||
import type { ComponentChildren } from "preact";
|
||||
import { Link, useLocation } from "wouter-preact";
|
||||
import { LinksMenu } from "./LinksMenu.js";
|
||||
import { UserMenu } from "./UserMenu.js";
|
||||
import { SettingsMenu } from "@hive/shared/settings-menu.js";
|
||||
import { useApplyThemeOverride } from "@hive/shared/theme-apply.js";
|
||||
import { useApplyMotionOverride } from "@hive/shared/motion-apply.js";
|
||||
import "./Shell.css";
|
||||
|
||||
// Storage keys this app owns for `@hive/shared`'s settings mechanism —
|
||||
// kept here, not derived, so the two mount points below (the
|
||||
// `useApply*` effects and `<SettingsMenu>`) always agree on which
|
||||
// browser-local key they're reading/writing. Theme defaults to `'dark'`,
|
||||
// not `'system'` — see `@hive/shared/theme-apply.js`'s file comment.
|
||||
const THEME_KEY = 'swarm-ui:theme-override';
|
||||
const MOTION_KEY = 'swarm-ui:motion-override';
|
||||
const THEME_KEY = "swarm-ui:theme-override";
|
||||
const MOTION_KEY = "swarm-ui:motion-override";
|
||||
|
||||
const NAV_ITEMS: { href: string; label: string; accent: string }[] = [
|
||||
{ href: '/', label: 'hives', accent: 'var(--purple)' },
|
||||
{ href: '/agents', label: 'agents', accent: 'var(--green)' },
|
||||
{ href: '/jobs', label: 'jobs', accent: 'var(--pink)' },
|
||||
{ href: '/issues', label: 'issues', accent: 'var(--yellow)' },
|
||||
{ href: '/components', label: 'components', accent: 'var(--blue)' },
|
||||
{ href: "/", label: "hives", accent: "var(--purple)" },
|
||||
{ href: "/agents", label: "agents", accent: "var(--green)" },
|
||||
{ href: "/jobs", label: "jobs", accent: "var(--pink)" },
|
||||
{ href: "/issues", label: "issues", accent: "var(--yellow)" },
|
||||
{ href: "/components", label: "components", accent: "var(--blue)" },
|
||||
];
|
||||
|
||||
// Routes that opt out of `.shell-body`'s 60em readable-line-length cap
|
||||
|
|
@ -60,13 +60,13 @@ const NAV_ITEMS: { href: string; label: string; accent: string }[] = [
|
|||
// route's layout is untouched — first user of this allowlist, but a
|
||||
// future wide page reaches for the same class rather than inventing
|
||||
// its own cap.
|
||||
const WIDE_BODY_ROUTES = new Set(['/issues']);
|
||||
const WIDE_BODY_ROUTES = new Set(["/issues"]);
|
||||
|
||||
// Static fallback — matches `index.html`'s `<title>` default, so a page
|
||||
// never flashes something else before the fetch below resolves, and an
|
||||
// operator who never set `services.hyperhive.swarm.name` sees the exact
|
||||
// same generic label the pre-fetch page already showed, not a blank.
|
||||
const DEFAULT_BRAND = 'hyperhive swarm';
|
||||
const DEFAULT_BRAND = "hyperhive swarm";
|
||||
|
||||
interface IndicatorRect {
|
||||
left: number;
|
||||
|
|
@ -90,9 +90,9 @@ const HOP_MS = 140;
|
|||
// override semantics `@hive/shared/motion-apply.js` establishes.
|
||||
function prefersReducedMotion(): boolean {
|
||||
const override = document.documentElement.dataset.motion;
|
||||
if (override === 'reduce') return true;
|
||||
if (override === 'allow') return false;
|
||||
return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
if (override === "reduce") return true;
|
||||
if (override === "allow") return false;
|
||||
return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
}
|
||||
|
||||
function NavLink({
|
||||
|
|
@ -115,7 +115,7 @@ function NavLink({
|
|||
than the full-height tappable box. */}
|
||||
<span
|
||||
ref={textRef}
|
||||
class={'shell-nav-link-text' + (active ? ' shell-nav-link-active' : '')}
|
||||
class={"shell-nav-link-text" + (active ? " shell-nav-link-active" : "")}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
|
|
@ -233,8 +233,8 @@ export function Shell({ children }: { children: ComponentChildren }) {
|
|||
if (settledIndexRef.current === -1) return;
|
||||
setIndicator(measureIndex(settledIndexRef.current));
|
||||
}
|
||||
window.addEventListener('resize', onResize);
|
||||
return () => window.removeEventListener('resize', onResize);
|
||||
window.addEventListener("resize", onResize);
|
||||
return () => window.removeEventListener("resize", onResize);
|
||||
}, []);
|
||||
|
||||
// Fetched once here, not per-page: every route mounts inside one
|
||||
|
|
@ -245,7 +245,7 @@ export function Shell({ children }: { children: ComponentChildren }) {
|
|||
// not worth an `ApiErrorPanel`.
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const r = await fetch('/api/swarm');
|
||||
const r = await fetch("/api/swarm");
|
||||
if (!r.ok) return;
|
||||
const data = (await r.json()) as { name: string | null };
|
||||
if (data.name) setSwarmName(data.name);
|
||||
|
|
@ -263,7 +263,7 @@ export function Shell({ children }: { children: ComponentChildren }) {
|
|||
// the brand text rides the identical hop sequence rather than
|
||||
// computing its own, so "the header's accent" reads as one thing
|
||||
// changing, not two things that happen to agree at rest.
|
||||
const navAccent = indicator?.accent ?? 'var(--purple)';
|
||||
const navAccent = indicator?.accent ?? "var(--purple)";
|
||||
|
||||
return (
|
||||
<div class="shell">
|
||||
|
|
@ -288,12 +288,15 @@ export function Shell({ children }: { children: ComponentChildren }) {
|
|||
nav item (404), so it doesn't pop in with a stale position
|
||||
the next time a real nav item becomes active. */}
|
||||
<span
|
||||
class={'shell-nav-indicator' + (indicatorSettledOnce ? '' : ' shell-nav-indicator-instant')}
|
||||
class={
|
||||
"shell-nav-indicator" +
|
||||
(indicatorSettledOnce ? "" : " shell-nav-indicator-instant")
|
||||
}
|
||||
style={{
|
||||
left: `${indicator?.left ?? 0}px`,
|
||||
top: `${indicator?.top ?? 0}px`,
|
||||
width: `${indicator?.width ?? 0}px`,
|
||||
backgroundColor: indicator?.accent ?? 'transparent',
|
||||
backgroundColor: indicator?.accent ?? "transparent",
|
||||
}}
|
||||
/>
|
||||
</nav>
|
||||
|
|
@ -312,7 +315,13 @@ export function Shell({ children }: { children: ComponentChildren }) {
|
|||
`shell-body-wide` is additive (see `WIDE_BODY_ROUTES` above),
|
||||
not a swap — `.shell-body`'s padding/animation rules still
|
||||
apply, only the max-width cap changes. */}
|
||||
<div class={'shell-body' + (WIDE_BODY_ROUTES.has(location) ? ' shell-body-wide' : '')} key={location}>
|
||||
<div
|
||||
class={
|
||||
"shell-body" +
|
||||
(WIDE_BODY_ROUTES.has(location) ? " shell-body-wide" : "")
|
||||
}
|
||||
key={location}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
text-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.user-menu-button:hover,
|
||||
.user-menu-button[aria-expanded='true'] {
|
||||
.user-menu-button[aria-expanded="true"] {
|
||||
border-color: var(--fg);
|
||||
}
|
||||
.user-menu-popover {
|
||||
|
|
@ -61,10 +61,10 @@
|
|||
animation: none;
|
||||
}
|
||||
}
|
||||
:root[data-motion='reduce'] .user-menu-popover {
|
||||
:root[data-motion="reduce"] .user-menu-popover {
|
||||
animation: none;
|
||||
}
|
||||
:root[data-motion='allow'] .user-menu-popover {
|
||||
:root[data-motion="allow"] .user-menu-popover {
|
||||
animation: user-menu-popover-enter 140ms ease;
|
||||
}
|
||||
.user-menu-name {
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@
|
|||
// second source of the domain — `/settings` and `/logout` are appended
|
||||
// client-side, both real authelia routes (mara confirmed `/settings` is
|
||||
// the real path after the plain domain-root link landed short of it).
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import './UserMenu.css';
|
||||
import { useEffect, useRef, useState } from "preact/hooks";
|
||||
import "./UserMenu.css";
|
||||
|
||||
interface WhoAmI {
|
||||
displayName: string | null;
|
||||
|
|
@ -39,18 +39,19 @@ interface ServiceLink {
|
|||
// not imported from there directly: that list is route accents, this is
|
||||
// a name→colour pick, different domains that happen to share a palette.
|
||||
const AVATAR_ACCENTS = [
|
||||
'var(--red)',
|
||||
'var(--yellow)',
|
||||
'var(--green)',
|
||||
'var(--cyan)',
|
||||
'var(--blue)',
|
||||
'var(--purple)',
|
||||
'var(--pink)',
|
||||
"var(--red)",
|
||||
"var(--yellow)",
|
||||
"var(--green)",
|
||||
"var(--cyan)",
|
||||
"var(--blue)",
|
||||
"var(--purple)",
|
||||
"var(--pink)",
|
||||
];
|
||||
|
||||
function pickAccent(seed: string): string {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < seed.length; i++) hash = (hash * 31 + seed.charCodeAt(i)) | 0;
|
||||
for (let i = 0; i < seed.length; i++)
|
||||
hash = (hash * 31 + seed.charCodeAt(i)) | 0;
|
||||
return AVATAR_ACCENTS[Math.abs(hash) % AVATAR_ACCENTS.length];
|
||||
}
|
||||
|
||||
|
|
@ -61,9 +62,11 @@ function pickAccent(seed: string): string {
|
|||
function parseWhoAmI(body: unknown): WhoAmI {
|
||||
const record = (body ?? {}) as Record<string, unknown>;
|
||||
const data = (record.data ?? record) as Record<string, unknown>;
|
||||
const displayName = typeof data.display_name === 'string' ? data.display_name : null;
|
||||
const displayName =
|
||||
typeof data.display_name === "string" ? data.display_name : null;
|
||||
const emails = Array.isArray(data.emails) ? data.emails : null;
|
||||
const email = emails && typeof emails[0] === 'string' ? (emails[0] as string) : null;
|
||||
const email =
|
||||
emails && typeof emails[0] === "string" ? (emails[0] as string) : null;
|
||||
return { displayName, email };
|
||||
}
|
||||
|
||||
|
|
@ -74,8 +77,10 @@ export function UserMenu() {
|
|||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/whoami')
|
||||
.then((r) => (r.ok ? r.json() : Promise.reject(new Error(`http ${r.status}`))))
|
||||
fetch("/api/whoami")
|
||||
.then((r) =>
|
||||
r.ok ? r.json() : Promise.reject(new Error(`http ${r.status}`)),
|
||||
)
|
||||
.then((body) => setWho(parseWhoAmI(body)))
|
||||
.catch(() => setWho(null)); // cosmetic only — see file-top comment
|
||||
}, []);
|
||||
|
|
@ -83,10 +88,14 @@ export function UserMenu() {
|
|||
// Reuses `LinksMenu`'s own data source rather than a second endpoint —
|
||||
// see file-top comment.
|
||||
useEffect(() => {
|
||||
fetch('/api/links')
|
||||
.then((r) => (r.ok ? (r.json() as Promise<ServiceLink[]>) : Promise.reject(new Error(`http ${r.status}`))))
|
||||
fetch("/api/links")
|
||||
.then((r) =>
|
||||
r.ok
|
||||
? (r.json() as Promise<ServiceLink[]>)
|
||||
: Promise.reject(new Error(`http ${r.status}`)),
|
||||
)
|
||||
.then((links) => {
|
||||
const authelia = links.find((l) => l.label === 'Authelia');
|
||||
const authelia = links.find((l) => l.label === "Authelia");
|
||||
if (authelia) setAutheliaUrl(authelia.url);
|
||||
})
|
||||
.catch(() => {
|
||||
|
|
@ -99,27 +108,28 @@ export function UserMenu() {
|
|||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function onPointerDown(e: MouseEvent) {
|
||||
if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
|
||||
if (rootRef.current && !rootRef.current.contains(e.target as Node))
|
||||
setOpen(false);
|
||||
}
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') setOpen(false);
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
}
|
||||
document.addEventListener('pointerdown', onPointerDown);
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
document.addEventListener("pointerdown", onPointerDown);
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener('pointerdown', onPointerDown);
|
||||
document.removeEventListener('keydown', onKeyDown);
|
||||
document.removeEventListener("pointerdown", onPointerDown);
|
||||
document.removeEventListener("keydown", onKeyDown);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
const label = who?.displayName || who?.email || null;
|
||||
const initial = label ? label.trim().charAt(0).toUpperCase() : '?';
|
||||
const accent = pickAccent(label ?? 'operator');
|
||||
const initial = label ? label.trim().charAt(0).toUpperCase() : "?";
|
||||
const accent = pickAccent(label ?? "operator");
|
||||
// Trailing slash normalised off so `/logout` appends cleanly
|
||||
// regardless of whether the contributed link kept one (the `Authelia`
|
||||
// entry does — see `swarm-authelia.nix` — but this isn't the only
|
||||
// conceivable shape a future contributor's own URL could take).
|
||||
const base = autheliaUrl?.replace(/\/+$/, '') ?? null;
|
||||
const base = autheliaUrl?.replace(/\/+$/, "") ?? null;
|
||||
|
||||
return (
|
||||
<div class="user-menu" ref={rootRef}>
|
||||
|
|
@ -129,7 +139,7 @@ export function UserMenu() {
|
|||
style={{ background: accent }}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open}
|
||||
aria-label={label ? `signed in as ${label}` : 'account'}
|
||||
aria-label={label ? `signed in as ${label}` : "account"}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
>
|
||||
{initial}
|
||||
|
|
@ -149,7 +159,12 @@ export function UserMenu() {
|
|||
>
|
||||
authelia settings
|
||||
</a>
|
||||
<a class="user-menu-item" href={`${base}/logout`} role="menuitem" onClick={() => setOpen(false)}>
|
||||
<a
|
||||
class="user-menu-item"
|
||||
href={`${base}/logout`}
|
||||
role="menuitem"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
log out
|
||||
</a>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in a new issue