diff --git a/docs/swarm/ui.md b/docs/swarm/ui.md index 11ce8fd60..b80b3232a 100644 --- a/docs/swarm/ui.md +++ b/docs/swarm/ui.md @@ -129,10 +129,6 @@ you flip it. It also hides the **components** tab, a page for developers, which still answers at `/components`. The browser keeps the choice for the swarm UI, apart from the per-agent pages'. -The menu also has a **solid backgrounds** toggle. It turns the frosted, see-through -surfaces opaque: the header bar, the badges and the terminal panes. It stays off -until you turn it on, and the browser keeps the choice. - The menu also has an **expand tool output** toggle. It opens tool-output rows expanded; rows already on screen keep their state, and rows that arrive after you flip it follow it. diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json index 4d004381d..0d5718e34 100644 --- a/frontend/packages/shared/package.json +++ b/frontend/packages/shared/package.json @@ -55,7 +55,6 @@ "./hide-debug-setting.js": "./src/settings/HideDebugSetting.tsx", "./expand-details-setting.js": "./src/settings/ExpandDetailsSetting.tsx", "./settings-menu.css": "./src/settings/SettingsMenu.css", - "./solid-backgrounds.js": "./src/settings/solid-backgrounds.tsx", "./user-menu.js": "./src/user-menu/UserMenu.tsx", "./user-menu.css": "./src/user-menu/UserMenu.css", "./links-menu.js": "./src/links-menu/LinksMenu.tsx", diff --git a/frontend/packages/shared/src/settings/solid-backgrounds.css b/frontend/packages/shared/src/settings/solid-backgrounds.css deleted file mode 100644 index eaf63c476..000000000 --- a/frontend/packages/shared/src/settings/solid-backgrounds.css +++ /dev/null @@ -1,20 +0,0 @@ -/* The frosted surfaces, made opaque while `data-solid="true"` is on `` - (`solid-backgrounds.tsx`). Each rule names the same surface as the rule that - makes it see-through, with `html:root` in front so it outranks that rule's - theme variants whatever order the stylesheets load in. The dialog scrim is - left alone: it dims the page on purpose. */ -html:root[data-solid="true"] .shell-header { - background: var(--bg-elev); - -webkit-backdrop-filter: none; - backdrop-filter: none; -} -html:root[data-solid="true"] .ui-badge:not(.ui-badge-quiet) { - background: var(--purple-dim); - -webkit-backdrop-filter: none; - backdrop-filter: none; -} -html:root[data-solid="true"] .terminal-wrap { - background: var(--crust); - -webkit-backdrop-filter: none; - backdrop-filter: none; -} diff --git a/frontend/packages/shared/src/settings/solid-backgrounds.tsx b/frontend/packages/shared/src/settings/solid-backgrounds.tsx deleted file mode 100644 index c7ce9ea07..000000000 --- a/frontend/packages/shared/src/settings/solid-backgrounds.tsx +++ /dev/null @@ -1,39 +0,0 @@ -// "Solid backgrounds" — a gear-menu toggle that turns the frosted, see-through -// surfaces opaque (mara: "add setting to disable transparency", e.g. the top -// bar and badge backgrounds). Off by default, so the look is unchanged until -// someone turns it on. -// -// The setting sets `data-solid="true"` on ``, and `./solid-backgrounds.css` -// answers it. The caller owns the storage key, as with the theme and motion -// overrides, and mounts `useApplySolidBackgrounds` once so the choice applies -// before the menu is ever opened; `SolidBackgroundsSetting` is the menu's row. -import { useEffect } from "preact/hooks"; -import { useLocalSetting } from "./settings-storage.js"; -import "./solid-backgrounds.css"; - -export function useApplySolidBackgrounds(key: string): void { - const [solid] = useLocalSetting(key, false); - useEffect(() => { - const root = document.documentElement; - if (solid) root.dataset.solid = "true"; - else delete root.dataset.solid; - }, [solid]); -} - -export function SolidBackgroundsSetting({ - storageKey, -}: { - storageKey: string; -}) { - const [solid, setSolid] = useLocalSetting(storageKey, false); - return ( - - ); -} diff --git a/frontend/packages/swarm-ui/src/shell/Shell.tsx b/frontend/packages/swarm-ui/src/shell/Shell.tsx index b3dc60380..4d59b5d87 100644 --- a/frontend/packages/swarm-ui/src/shell/Shell.tsx +++ b/frontend/packages/swarm-ui/src/shell/Shell.tsx @@ -37,10 +37,6 @@ import { HideDebugSetting } from "@hive/shared/hide-debug-setting.js"; import { ExpandDetailsSetting } from "@hive/shared/expand-details-setting.js"; import { useApplyThemeOverride } from "@hive/shared/theme-apply.js"; import { useApplyMotionOverride } from "@hive/shared/motion-apply.js"; -import { - SolidBackgroundsSetting, - useApplySolidBackgrounds, -} from "@hive/shared/solid-backgrounds.js"; import { isFullBleedRoute, visibleNavItems } from "./routes.js"; import { useDynamicTabs } from "./useDynamicTabs.js"; import { useSwarmName } from "./useSwarmName.js"; @@ -53,7 +49,6 @@ import "./Shell.css"; // 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 SOLID_KEY = "swarm-ui:solid-backgrounds"; const NAV_ITEMS: { href: string; label: string; accent: string }[] = [ { href: "/agents", label: "agents", accent: "var(--green)" }, @@ -225,7 +220,6 @@ export function Shell({ children }: { children: ComponentChildren }) { // needing a reference to the other. useApplyThemeOverride(THEME_KEY); useApplyMotionOverride(MOTION_KEY); - useApplySolidBackgrounds(SOLID_KEY); // Measures nav item `index`'s rect relative to `.shell-nav`. // `getBoundingClientRect()` on both elements at the same tick keeps @@ -430,7 +424,6 @@ export function Shell({ children }: { children: ComponentChildren }) { -