Add configurable native glass window backgrounds

apps/desktop/src/main.ts

@@ -6,6 +6,8 @@ import {
   isCaptureSurface,
   prepareMediaURL,
 } from "./desktop-api";
+import { appearanceView, AppearanceUpdates } from "./appearance-state";
+import type { AppearanceStatus, BackgroundMaterial } from "./appearance-state";
 import { listen } from "@tauri-apps/api/event";
 import {
   AutomaticIndexGate,
@@ -84,11 +86,14 @@ interface Settings {
   version: number;
   roots: string[];
   cpu_threads: number;
+  background_material?: BackgroundMaterial;
+  background_opacity?: number;
 }
 interface DesktopStatus {
   settings: Settings;
   indexing: boolean;
   shortcut_status: string;
+  appearance?: AppearanceStatus;
   watching?: {
     root: string;
     attached: boolean;
@@ -140,7 +145,7 @@ interface SearchRequest {
 }
 
 document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
-<header><div class="brand"><img class="brand-symbol" src="/searchi-symbol.png" alt=""><span class="wordmark">searchi</span></div><span id="index-status" class="index-status">Loading your index…</span><div class="header-actions"><button id="add-folder" class="quiet-button" type="button">${icon("folderAdd")}<span>Add folder</span></button><details id="filters" class="popover"><summary>${icon("filter")}<span id="scope-label">All files</span>${icon("chevron")}</summary><div class="popover-panel"><h2>Filter your search</h2><div class="filters-grid"><label>Search scope<select id="filter-scope"><option value="all">All files</option><option value="code">Code</option></select></label><label>Within folder<input id="filter-folder" placeholder="Absolute folder path"></label><label>Extension<input id="filter-extension" placeholder="pdf, md, txt…"></label><label>Minimum size (bytes)<input id="filter-min" type="number" min="0" step="1"></label><label>Maximum size (bytes)<input id="filter-max" type="number" min="0" step="1"></label><label>Minimum duration (seconds)<input id="filter-duration-min" type="number" min="0" step="0.1"></label><label>Maximum duration (seconds)<input id="filter-duration-max" type="number" min="0" step="0.1"></label><label>Modified from<input id="filter-after" type="date"></label><label>Modified through<input id="filter-before" type="date"></label></div></div></details><details id="settings" class="popover"><summary class="icon-button" aria-label="Settings" title="Settings">${icon("settings")}</summary><div class="popover-panel"><h2>Folders & resources</h2><p id="shortcut-status" class="hint"></p><label class="resource-label" for="cpu-threads">CPU thread budget</label><select id="cpu-threads">${Array.from({ length: 8 }, (_, i) => `<option value="${i + 1}">${i + 1} ${i === 1 ? "threads (default)" : i ? "threads" : "thread (low power)"}</option>`).join("")}</select><p class="hint">Search automatically uses supported acceleration with CPU fallback. Two or more threads let search run alongside indexing; one thread can delay semantic search during indexing.</p><ul id="roots" aria-label="Selected folders"></ul><label class="performance-toggle"><input id="performance-toggle" type="checkbox">Performance details</label><p class="hint">Local timing diagnostics for new searches. Queries and file paths are excluded from copied reports.</p><details id="ai-settings" class="ai-settings"><summary>Optional AI answers</summary><label class="performance-toggle"><input id="ai-enabled" type="checkbox">Enable summaries and questions</label><p class="hint">Disabled by default. Only an explicit action sends the shown passage to your configured endpoint.</p><label>OpenAI-compatible base URL<input id="ai-endpoint" type="url" placeholder="http://localhost:1234/v1" autocomplete="off" maxlength="2048"></label><label>Model<input id="ai-model" placeholder="Your model name" autocomplete="off" maxlength="200"></label><label>API key (optional, this session only)<input id="ai-key" type="password" autocomplete="off" maxlength="2048"></label><button id="ai-clear-key" type="button">Clear key</button><p class="hint">Endpoint, model and key stay in this app session. The key authenticates requests to your endpoint.</p></details></div></details></div></header>
+<header><div class="brand"><img class="brand-symbol" src="/searchi-symbol.png" alt=""><span class="wordmark">searchi</span></div><span id="index-status" class="index-status">Loading your index…</span><div class="header-actions"><button id="add-folder" class="quiet-button" type="button">${icon("folderAdd")}<span>Add folder</span></button><details id="filters" class="popover"><summary>${icon("filter")}<span id="scope-label">All files</span>${icon("chevron")}</summary><div class="popover-panel"><h2>Filter your search</h2><div class="filters-grid"><label>Search scope<select id="filter-scope"><option value="all">All files</option><option value="code">Code</option></select></label><label>Within folder<input id="filter-folder" placeholder="Absolute folder path"></label><label>Extension<input id="filter-extension" placeholder="pdf, md, txt…"></label><label>Minimum size (bytes)<input id="filter-min" type="number" min="0" step="1"></label><label>Maximum size (bytes)<input id="filter-max" type="number" min="0" step="1"></label><label>Minimum duration (seconds)<input id="filter-duration-min" type="number" min="0" step="0.1"></label><label>Maximum duration (seconds)<input id="filter-duration-max" type="number" min="0" step="0.1"></label><label>Modified from<input id="filter-after" type="date"></label><label>Modified through<input id="filter-before" type="date"></label></div></div></details><details id="settings" class="popover"><summary class="icon-button" aria-label="Settings" title="Settings">${icon("settings")}</summary><div class="popover-panel"><h2>Settings</h2><section class="appearance-settings" aria-labelledby="appearance-heading"><h3 id="appearance-heading">Appearance</h3><label for="background-material">Window background</label><select id="background-material"><option value="solid">Solid</option><option value="glass">Glass</option><option value="frosted">Frosted glass</option></select><div class="appearance-opacity"><label for="background-opacity">Background tint</label><output id="background-opacity-value" for="background-opacity">90%</output></div><input id="background-opacity" type="range" min="70" max="100" step="1" value="90" aria-describedby="appearance-status"><p id="appearance-status" class="hint" role="status">A subtle window background. Search results and passages stay clear.</p></section><h3>Folders & resources</h3><p id="shortcut-status" class="hint"></p><label class="resource-label" for="cpu-threads">CPU thread budget</label><select id="cpu-threads">${Array.from({ length: 8 }, (_, i) => `<option value="${i + 1}">${i + 1} ${i === 1 ? "threads (default)" : i ? "threads" : "thread (low power)"}</option>`).join("")}</select><p class="hint">Search automatically uses supported acceleration with CPU fallback. Two or more threads let search run alongside indexing; one thread can delay semantic search during indexing.</p><ul id="roots" aria-label="Selected folders"></ul><label class="performance-toggle"><input id="performance-toggle" type="checkbox">Performance details</label><p class="hint">Local timing diagnostics for new searches. Queries and file paths are excluded from copied reports.</p><details id="ai-settings" class="ai-settings"><summary>Optional AI answers</summary><label class="performance-toggle"><input id="ai-enabled" type="checkbox">Enable summaries and questions</label><p class="hint">Disabled by default. Only an explicit action sends the shown passage to your configured endpoint.</p><label>OpenAI-compatible base URL<input id="ai-endpoint" type="url" placeholder="http://localhost:1234/v1" autocomplete="off" maxlength="2048"></label><label>Model<input id="ai-model" placeholder="Your model name" autocomplete="off" maxlength="200"></label><label>API key (optional, this session only)<input id="ai-key" type="password" autocomplete="off" maxlength="2048"></label><button id="ai-clear-key" type="button">Clear key</button><p class="hint">Endpoint, model and key stay in this app session. The key authenticates requests to your endpoint.</p></details></div></details></div></header>
 <main>
 <form id="search-form" role="search"><label class="sr-only" for="query">Search your files</label>${icon("search")}<input id="query" type="search" placeholder="Search a filename, phrase, or what you remember…" autocomplete="off" spellcheck="false" maxlength="1000"><kbd id="focus-shortcut">Ctrl K</kbd><button id="clear-query" class="icon-button" type="button" aria-label="Clear search" title="Clear search">${icon("dismiss")}</button></form>
 <details id="semantic-panel"><summary>${icon("sparkles")}<span id="semantic-status" role="status" aria-live="polite">Preparing local semantic search…</span><span id="semantic-device" class="kind">Local model</span>${icon("chevron")}</summary><div class="semantic-content"><strong>Google EmbeddingGemma 2</strong><progress id="semantic-progress" aria-label="Local model setup progress"></progress><p id="semantic-detail" class="hint">The verified local model downloads automatically on first launch (865 MB). Your files stay on this device.</p><div class="semantic-actions"><button id="retry-model" type="button" hidden>Retry model setup</button><button id="rebuild-semantic" type="button" hidden>Rebuild semantic index</button></div></div></details>
@@ -465,8 +470,88 @@ async function refreshSemanticStatus() {
   }
 }
 
-async function refreshDesktopStatus() {
+const highContrast = window.matchMedia("(forced-colors: active)");
+const appearanceUpdates = new AppearanceUpdates(
+  (update) =>
+    invoke<AppearanceStatus>(
+      update.preference ? "set_appearance" : "apply_appearance",
+      { ...update.preference, highContrast: update.highContrast },
+    ),
+  (status) => renderAppearance(status),
+  showError,
+  () => {
+    renderAppearance();
+    void refreshDesktopStatus(true).catch(showError);
+  },
+);
+let lastAppearance: AppearanceStatus | undefined;
+function renderAppearance(
+  status?: AppearanceStatus,
+  settings?: Settings,
+  restoreControls = false,
+) {
+  if (status) lastAppearance = status;
+  const material = element<HTMLSelectElement>("background-material");
+  const opacity = element<HTMLInputElement>("background-opacity");
+  if (
+    !appearanceUpdates.busy &&
+    settings &&
+    (restoreControls || document.activeElement !== opacity)
+  ) {
+    material.value = settings.background_material ?? "frosted";
+    opacity.value = String(settings.background_opacity ?? 90);
+  }
+  const view = appearanceView(lastAppearance, highContrast.matches);
+  document.documentElement.dataset.backgroundMaterial = view.material;
+  document.documentElement.style.setProperty(
+    "--window-opacity",
+    String(view.opacity / 100),
+  );
+  element("background-opacity-value").textContent = `${opacity.value}%`;
+  material.disabled = !isNativeDesktop() || appearanceUpdates.busy;
+  opacity.disabled =
+    !isNativeDesktop() ||
+    appearanceUpdates.busy ||
+    material.value === "solid" ||
+    highContrast.matches;
+  element("appearance-status").textContent = view.message;
+}
+function saveAppearance() {
+  if (!isNativeDesktop()) return;
+  appearanceUpdates.submit(highContrast.matches, {
+    material: element<HTMLSelectElement>("background-material")
+      .value as BackgroundMaterial,
+    opacity: Number(element<HTMLInputElement>("background-opacity").value),
+  });
+  renderAppearance();
+}
+element("background-material").addEventListener("change", () => {
+  void saveAppearance();
+});
+element("background-opacity").addEventListener("input", () => {
+  element("background-opacity-value").textContent =
+    `${element<HTMLInputElement>("background-opacity").value}%`;
+});
+element("background-opacity").addEventListener("change", () => {
+  void saveAppearance();
+});
+highContrast.addEventListener("change", () => {
+  renderAppearance(); // Fail closed immediately, before the native effect changes.
+  if (isNativeDesktop()) appearanceUpdates.submit(highContrast.matches);
+});
+
+async function refreshDesktopStatus(restoreAppearanceControls = false) {
+  const appearanceRevision = appearanceUpdates.revision;
   const status = await invoke<DesktopStatus>("desktop_status");
+  if (
+    !appearanceUpdates.busy &&
+    appearanceRevision === appearanceUpdates.revision
+  )
+    renderAppearance(
+      status.appearance,
+      status.settings,
+      restoreAppearanceControls,
+    );
   indexingActive = status.indexing;
   element("shortcut-status").textContent = status.shortcut_status;
   element("focus-shortcut").textContent = status.shortcut_status.includes(
@@ -1433,6 +1518,10 @@ document.addEventListener("keydown", (event) => {
 });
 async function initializeSurface() {
   await initializeDesktopSurface();
+  renderAppearance();
+  if (isNativeDesktop()) {
+    appearanceUpdates.submit(highContrast.matches);
+  }
   if (isDesktopSurface()) {
     if (isCaptureSurface()) {
       for (const id of [