feat(web): compact responsive pins for Maria sidebar

AGENTS.md

@@ -201,6 +201,7 @@ Architecture and its constraints: `docs/internals/overview.md`. Glossary: `docs/
   projection, tight loops) or duplicate an existing tracing boundary; explain that choice nearby.
   Named `Effect.fn` creates a span; the unnamed form does not. Preserve existing span names and
   options, and pass combinators as additional function-builder arguments.
+- Before building UI, open `/design-system` in a dev build: it renders every primitive, variant and type role. Text takes a role (`<Text variant>` or `text-title` … `text-micro`), not `text-sm` or `font-medium`; a clickable thing is a `components/ui` control, not a styled `<button>` or `<a>`. `t3code/no-raw-type-classes` and `t3code/no-styled-raw-controls` fail lint, and their per-file ceilings in `vite.config.ts` only go down.
 - Inferred types over annotations. `any` is the enemy.
 - Default to no comment. Write one only for a constraint, an external quirk, or an invariant the code can't show, in one line where you can and four at most. Don't restate names or signatures, narrate steps, record history, or explain the fix you just made; the PR carries that. `t3code/no-low-value-comments` enforces the length cap and the mechanical cases.
 - React effects are for synchronizing with something outside React. Derive in render and act in handlers instead of syncing state, but don't hide real lifecycle work in refs or stores to dodge one. The `t3code/no-unreasoned-state-sync` lint rule reports every effect; one that stays states its reason with `// oxlint-disable-next-line t3code/no-unreasoned-state-sync -- <why>`.

apps/desktop/src/app/DesktopLifecycle.test.ts

@@ -63,7 +63,9 @@ function layerElectronApp(
 
 const layerElectronTheme = Layer.succeed(ElectronTheme.ElectronTheme, {
   shouldUseDarkColors: Effect.succeed(false),
+  shouldUseDarkChrome: Effect.succeed(false),
   setSource: () => Effect.void,
+  setBlackChrome: () => Effect.void,
   onUpdated: () => Effect.void,
 });
 

apps/desktop/src/electron/ElectronMenu.ts

@@ -83,6 +83,9 @@ function normalizeContextMenuItems(source: readonly ContextMenuItem[]): ContextM
       disabled: sourceItem.disabled === true,
       ...(sourceItem.separatorBefore === true ? { separatorBefore: true } : {}),
       ...(typeof sourceItem.checked === "boolean" ? { checked: sourceItem.checked } : {}),
+      ...(typeof sourceItem.accelerator === "string"
+        ? { accelerator: sourceItem.accelerator }
+        : {}),
     };
 
     if (sourceItem.children) {
@@ -170,6 +173,8 @@ export const make = Effect.gen(function* () {
         label: item.label,
         enabled: !item.disabled,
         ...(typeof item.checked === "boolean" ? { type: "checkbox", checked: item.checked } : {}),
+        // Shown beside the label for learning; the app's own handler runs the key.
+        ...(item.accelerator ? { accelerator: item.accelerator, registerAccelerator: false } : {}),
       };
       if (item.children && item.children.length > 0) {
         itemOption.submenu = buildTemplate(item.children, complete);

apps/desktop/src/electron/ElectronTheme.ts

@@ -26,7 +26,14 @@ export class ElectronTheme extends Context.Service<
   ElectronTheme,
   {
     readonly shouldUseDarkColors: Effect.Effect<boolean>;
+    /**
+     * Whether the window chrome (native background, caption button symbols)
+     * is dark: the dark appearance, or the renderer's light, black chrome.
+     */
+    readonly shouldUseDarkChrome: Effect.Effect<boolean>;
     readonly setSource: (theme: DesktopTheme) => Effect.Effect<void, ElectronThemeSetSourceError>;
+    /** The renderer's light, black chrome appearance; notifies onUpdated listeners. */
+    readonly setBlackChrome: (enabled: boolean) => Effect.Effect<void>;
     readonly onUpdated: (listener: () => void) => Effect.Effect<void, never, Scope.Scope>;
   }
 >()("@t3tools/desktop/electron/ElectronTheme") {}
@@ -38,6 +45,10 @@ type WatchSystemColorScheme = (onChange: (scheme: LinuxColorScheme) => void) =>
 export const makeWith = Effect.fn("ElectronTheme.make")(function* (
   watchSystemColorScheme: WatchSystemColorScheme | undefined,
 ) {
+  // Black chrome is renderer state, not a native theme source, so the service
+  // keeps it and fans changes out to the same listeners as native updates.
+  let blackChrome = false;
+  const blackChromeListeners = new Set<() => void>();
   let source: DesktopTheme = Electron.nativeTheme.themeSource;
   let systemScheme: LinuxColorScheme = null;
   // On Linux, Electron reads the desktop color scheme once and then ignores the settings
@@ -64,6 +75,7 @@ export const makeWith = Effect.fn("ElectronTheme.make")(function* (
 
   return ElectronTheme.of({
     shouldUseDarkColors: Effect.sync(() => Electron.nativeTheme.shouldUseDarkColors),
+    shouldUseDarkChrome: Effect.sync(() => Electron.nativeTheme.shouldUseDarkColors || blackChrome),
     setSource: Effect.fn("ElectronTheme.setSource")(function (theme) {
       return Effect.try({
         try: () => {
@@ -73,15 +85,24 @@ export const makeWith = Effect.fn("ElectronTheme.make")(function* (
         catch: (cause) => new ElectronThemeSetSourceError({ source: theme, cause }),
       });
     }),
+    setBlackChrome: Effect.fn("ElectronTheme.setBlackChrome")(function (enabled) {
+      return Effect.sync(() => {
+        if (blackChrome === enabled) return;
+        blackChrome = enabled;
+        for (const listener of blackChromeListeners) listener();
+      });
+    }),
     onUpdated: Effect.fn("ElectronTheme.onUpdated")(function (listener) {
       return Effect.acquireRelease(
         Effect.suspend(() => {
           Electron.nativeTheme.on("updated", listener);
+          blackChromeListeners.add(listener);
           return Effect.void;
         }),
         () =>
           Effect.suspend(() => {
             Electron.nativeTheme.removeListener("updated", listener);
+            blackChromeListeners.delete(listener);
             return Effect.void;
           }),
       );

apps/desktop/src/ipc/DesktopIpcHandlers.ts

@@ -51,8 +51,10 @@ import {
   pickFolder,
   pickProjectFavicon,
   pickThemeFiles,
+  setBlackChrome,
   setTheme,
   syncHtmlFullscreen,
+  setWindowButtonsVisible,
   showContextMenu,
 } from "./methods/window.ts";
 import {
@@ -146,6 +148,7 @@ export const installDesktopIpcHandlers = Effect.fn("desktop.ipc.installHandlers"
   yield* ipc.handle(pickProjectFavicon);
   yield* ipc.handle(pickThemeFiles);
   yield* ipc.handle(setTheme);
+  yield* ipc.handle(setBlackChrome);
   yield* ipc.handle(showContextMenu);
   yield* ipc.handle(openExternal);
   yield* ipc.handle(readMedia);
@@ -156,6 +159,7 @@ export const installDesktopIpcHandlers = Effect.fn("desktop.ipc.installHandlers"
   yield* ipc.handle(pasteAsText);
   yield* ipc.handle(revealWindow);
   yield* ipc.handle(syncHtmlFullscreen);
+  yield* ipc.handle(setWindowButtonsVisible);
   yield* ipc.handle(probeRemoteEditors);
   yield* ipc.handle(getUpdateState);
   yield* ipc.handle(setUpdateChannel);