npm - ompchamber - Versions diffs - 1.2.1 → 2.0.1 - Mend

ompchamber 1.2.1 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (237) hide show

package/src/client/hooks/ui/open-file.ts CHANGED Viewed

@@ -5,6 +5,10 @@ export interface OpenFilePayload {
   name?: string;
   id?: number;
   content?: string;
+  /** Absolute workspace root the path belongs to; the panel defaults it to the active project. */
+  root?: string;
+  /** Repo picked in the panel, relative to `root` — the path's own scope when set. */
+  repo?: string;
 }
 /**
@@ -26,7 +30,9 @@ export function openFileInEditor(payloadOrPath: string | OpenFilePayload) {
         path: cleanPath,
         name: fileName,
         id: payload.id,
-        content: payload.content
+        content: payload.content,
+        root: payload.root,
+        repo: payload.repo,
       }
     })
   );

package/src/client/hooks/ui/theme.ts CHANGED Viewed

@@ -1,92 +1,117 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * The single writer for the document's theme.
+ *
+ * `data-theme` (the palette id) and `data-theme-variant` (light/dark) are
+ * written together, and both are read from the catalog: the variant used to be
+ * a hardcoded id list here, in the Shiki selector, in the mermaid hydrator and
+ * in the SSR shell — four copies that a new theme would have silently missed.
+ *
+ * The `data-theme` attribute is the durable copy of the palette; the
+ * `omp:theme-changed` event is the notification. CSS reads the attribute, and
+ * the mermaid hydrator observes it, so a write that skips the event still
+ * recolors — but a write that skips the attribute does not.
+ */
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import { useChamberSettingsWriter } from '@/client/hooks/settings/use-chamber-setting';
+import { DEFAULT_THEME_ID, resolveTheme } from '@/shared/lib/theme/catalog';
+import { THEME_STYLE_ELEMENT_ID, themeStyleSheet } from '@/shared/lib/theme/css';
-/** Broadcast on every theme write. Detail is the new theme id; the
- *  `data-theme` attribute on `<html>` is the durable copy of the same fact. */
+/** Broadcast on every theme write. Detail is the new theme id. */
 export const THEME_CHANGED_EVENT = 'omp:theme-changed';
+/** The palette id currently on `<html>`, falling back to the shipped default. */
+export function currentThemeId(): string {
+  if (typeof document === 'undefined') return DEFAULT_THEME_ID;
+  return document.documentElement.dataset.theme || document.documentElement.getAttribute('data-theme') || DEFAULT_THEME_ID;
+}
+/**
+ * Put the catalog on the document before the first render.
+ *
+ * The SSR shell already inlines the stylesheet and both attributes; this is the
+ * guard for a document that predates them — a cached page, or `dist/client/
+ * index.html` left over from an older build while only the server was restarted.
+ * Without it the page keeps `:root`'s default palette and no variant attribute,
+ * which is a wrong palette, not merely a stale one.
+ *
+ * Called once from `main.tsx` rather than from a hook: the only components that
+ * read the theme are lazily mounted panels, so a hook would not run until the
+ * user opened one.
+ */
+export function initDocumentTheme(): void {
+  if (typeof document === 'undefined') return;
+  if (!document.getElementById(THEME_STYLE_ELEMENT_ID)) {
+    const style = document.createElement('style');
+    style.id = THEME_STYLE_ELEMENT_ID;
+    style.textContent = themeStyleSheet();
+    document.head.appendChild(style);
+  }
+  applyDocumentTheme(currentThemeId());
+}
 /**
  * Point the document at `theme` and announce it.
  *
- * The single writer path for the theme: the navbar toggle and the settings
- * modal both call this, because a writer that only sets `data-theme` leaves
- * runtime consumers (the mermaid hydrator re-renders diagrams per theme) on the
- * previous palette until the next reload. CSS reads the attribute; listeners
- * watch the attribute too, so this stays correct even if the event is missed.
+ * The single writer path for the theme: the settings modal and every future
+ * picker call this, because a writer that only sets `data-theme` leaves runtime
+ * consumers (the mermaid hydrator re-renders diagrams per palette) on the
+ * previous colors until the next reload.
  */
 export function applyDocumentTheme(theme: string): void {
   if (typeof document === 'undefined') return;
-  document.documentElement.dataset.theme = theme;
-  window.dispatchEvent(new CustomEvent(THEME_CHANGED_EVENT, { detail: theme }));
+  const palette = resolveTheme(theme);
+  const root = document.documentElement;
+  root.dataset.theme = palette.id;
+  root.dataset.themeVariant = palette.variant;
+  document.querySelector('meta[name="theme-color"]')?.setAttribute('content', palette.canvas);
+  window.dispatchEvent(new CustomEvent(THEME_CHANGED_EVENT, { detail: palette.id }));
 }
 export function useTheme() {
   const writeChamberSettings = useChamberSettingsWriter();
-  const [theme, setThemeState] = useState<string>(() => {
-    if (typeof document !== 'undefined') {
-      return document.documentElement.dataset.theme || document.documentElement.getAttribute('data-theme') || 'paper';
-    }
-    return 'paper';
-  });
+  const [theme, setThemeState] = useState<string>(currentThemeId);
-  const isDark = theme === 'one-dark-pro-soft' || theme === 'noir' || theme === 'dark';
+  const isDark = resolveTheme(theme).variant === 'dark';
   useEffect(() => {
     if (typeof document === 'undefined') return;
-    const updateTheme = () => {
-      const current = document.documentElement.dataset.theme || document.documentElement.getAttribute('data-theme') || 'paper';
-      setThemeState(current);
-      const metaThemeColor = document.querySelector('meta[name="theme-color"]');
-      if (metaThemeColor) {
-        metaThemeColor.setAttribute('content', current === 'one-dark-pro-soft' ? '#282c34' : '#faf8f3');
-      }
-    };
-    updateTheme();
     const observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
-        if (
-          mutation.type === 'attributes' &&
-          (mutation.attributeName === 'data-theme' || mutation.attributeName === 'class')
-        ) {
-          updateTheme();
+        if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+          setThemeState(currentThemeId());
         }
       }
     });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['data-theme', 'class'],
-    });
-    const handleCustomChange = (e: Event) => {
-      const customEvent = e as CustomEvent<string>;
-      if (customEvent.detail) {
-        setThemeState(customEvent.detail);
-      } else {
-        updateTheme();
-      }
+    const handleCustomChange = (event: Event) => {
+      const detail = (event as CustomEvent<string>).detail;
+      setThemeState(detail ? resolveTheme(detail).id : currentThemeId());
     };
-    window.addEventListener('omp:theme-changed', handleCustomChange);
+    window.addEventListener(THEME_CHANGED_EVENT, handleCustomChange);
     return () => {
       observer.disconnect();
-      window.removeEventListener('omp:theme-changed', handleCustomChange);
+      window.removeEventListener(THEME_CHANGED_EVENT, handleCustomChange);
     };
   }, []);
-  const setTheme = useCallback((newTheme: string) => {
-    applyDocumentTheme(newTheme);
-    setThemeState(newTheme);
-    writeChamberSettings({ theme: newTheme });
-  }, [writeChamberSettings]);
-  const toggleTheme = useCallback(() => {
-    setTheme(isDark ? 'paper' : 'one-dark-pro-soft');
-  }, [isDark, setTheme]);
+  const setTheme = useCallback(
+    (newTheme: string) => {
+      const id = resolveTheme(newTheme).id;
+      applyDocumentTheme(id);
+      setThemeState(id);
+      writeChamberSettings({ theme: id });
+    },
+    [writeChamberSettings],
+  );
-  return { theme, isDark, setTheme, toggleTheme };
+  return { theme, isDark, setTheme };
 }

package/src/client/hooks/workspace/file-tabs.ts CHANGED Viewed

@@ -93,7 +93,7 @@ export function useFileTabs(
   // Global listeners for omp:open-file and omp:open-diff
   useChamberEvent('omp:open-file', (e) => {
-    const customEvent = e as CustomEvent<{ path: string; name?: string; id?: number; content?: string }>;
+    const customEvent = e as CustomEvent<{ path: string; name?: string; id?: number; content?: string; root?: string; repo?: string }>;
     if (!customEvent.detail || !customEvent.detail.path) return;
     const rawPath = customEvent.detail.path.replace(/^\/+/, '');
@@ -110,6 +110,10 @@ export function useFileTabs(
       name,
       path: rawPath,
       content: customEvent.detail.content,
+      // A caller that knows its own scope (a preview's relative link) keeps it;
+      // otherwise the file belongs to the active project.
+      root: customEvent.detail.root,
+      repo: customEvent.detail.repo,
     });
   });

package/src/client/hooks/workspace/repo-scope/index.ts ADDED Viewed

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Nested-repo scope for the right-panel views (files, search, git, terminal).
+ *
+ * Every one of them needs the same two things, and both are meaningless without
+ * the workspace root they describe:
+ *
+ *   - WHICH repo the view operates on (`useRepoScope`). A repo is a path
+ *     relative to the active root — `projects/jns6_5/token` only names a
+ *     directory under `~/JatisMobile/Workspace` — so a choice is only valid
+ *     next to the root it was made under.
+ *   - WHAT repos exist under that root (`useRepoList`), discovered server-side
+ *     and stored with the root it was discovered for (see `./store`).
+ *
+ * Kept as bare per-panel values, both outlived the workspace they belonged to:
+ * after a workspace switch the picker still listed the previous workspace's
+ * repos, still showed one of them as the selection, and every request the panel
+ * made named a path that did not exist under the new root. Pairing each value
+ * with its root invalidates it by construction — no reset effect to order
+ * against the per-session state restore — while a session returned to inside
+ * the same workspace keeps the repo it was left on.
+ */
+import { useCallback, useRef, useSyncExternalStore } from 'preact/compat';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { repoStore, UNKNOWN_LIST } from '@/client/hooks/workspace/repo-scope/store';
+/** A repo choice, kept next to the workspace root it was made under. */
+interface RepoPick {
+  root: string;
+  repo: string;
+}
+/**
+ * The repo a git panel works on: the user's pick, or — when they have none and
+ * the workspace root is not itself a repo — the first repo discovery found.
+ *
+ * The git loader applies the same fallback when it is sent no repo at all
+ * (`repo = repos.includes('.') ? '.' : repos[0]`), so resolving it here is what
+ * keeps the header label, the picker's checkmark and the requests all naming
+ * the repo git is actually operating on. Only git resolves it: browsing the
+ * workspace root is legitimate even when that root is not a repo — a folder of
+ * nested repos is a normal workspace — so the files, search and terminal panels
+ * keep `'.'` as the root itself.
+ */
+export function resolveRepoForPanel(pick: string, repos: readonly string[]): string {
+  if (pick !== '.' || repos.includes('.')) return pick;
+  return repos[0] ?? '.';
+}
+/**
+ * The repo this panel operates on, restored per session but dropped the moment
+ * the active workspace root changes.
+ */
+export function useRepoScope(
+  rootPath: string | undefined,
+  stateKey: string,
+): { activeRepo: string; setActiveRepo: (repo: string) => void; ready: boolean } {
+  const [pick, setPick, ready] = useSessionState<RepoPick | null>(stateKey, null);
+  const scope = rootPath ?? '';
+  // Read through refs so the setter keeps ONE identity: it is handed to child
+  // components and used in effect dependencies, and `useSessionState` mints a
+  // fresh setter per render.
+  const scopeRef = useRef(scope);
+  scopeRef.current = scope;
+  const setPickRef = useRef(setPick);
+  setPickRef.current = setPick;
+  const setActiveRepo = useCallback((repo: string) => {
+    setPickRef.current({ root: scopeRef.current, repo });
+  }, []);
+  // A pick made under another root (or stored before the root was recorded
+  // alongside it) names a directory that need not exist here: fall back to the
+  // workspace root.
+  const activeRepo =
+    pick && typeof pick === 'object' && pick.root === scope && typeof pick.repo === 'string' && pick.repo
+      ? pick.repo
+      : '.';
+  return { activeRepo, setActiveRepo, ready };
+}
+export interface RepoListHandle {
+  /** Repos of the active root; the workspace root alone until discovery answers. */
+  repos: string[];
+  /** Discovery is still running — the server said so, or a rescan is in flight. */
+  scanning: boolean;
+  /** Re-run discovery from scratch (the picker's refresh button). */
+  rescan: () => void;
+}
+/**
+ * Discovered repos of the active root.
+ *
+ * @param active - when false nothing is subscribed; a hidden panel has no use
+ *   for a list that costs the server a `find` over the workspace.
+ */
+export function useRepoList(rootPath: string | undefined, active: boolean): RepoListHandle {
+  const scope = rootPath ?? '';
+  const subscribe = useCallback(
+    (listener: () => void) => (active ? repoStore.subscribe(scope, listener) : () => {}),
+    [scope, active],
+  );
+  const getSnapshot = useCallback(
+    () => (active ? repoStore.snapshot(scope) : UNKNOWN_LIST),
+    [scope, active],
+  );
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot);
+  const rescan = useCallback(() => {
+    if (active) repoStore.rescan(scope);
+  }, [scope, active]);
+  return { repos: snapshot.repos, scanning: snapshot.scanning, rescan };
+}

package/src/client/hooks/workspace/repo-scope/store.test.ts ADDED Viewed

@@ -0,0 +1,161 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { describe, expect, test } from 'bun:test';
+import { createRepoStore, type RepoFetch, type RepoScheduler } from '@/client/hooks/workspace/repo-scope/store';
+/** Resolves each request from a per-root table, recording the roots asked for. */
+function fakeFetch(byRoot: Record<string, { repos: string[]; reposPending?: boolean }>) {
+  const requested: string[] = [];
+  const fetchImpl: RepoFetch = async (url) => {
+    const root = new URL(url, 'http://localhost').searchParams.get('root') ?? '';
+    requested.push(root);
+    return byRoot[root] ?? { repos: ['.'] };
+  };
+  return { fetchImpl, requested };
+}
+/** Retries the caller arms, so a test can fire them instead of waiting them out. */
+function fakeScheduler() {
+  const armed: (() => void)[] = [];
+  const scheduler: RepoScheduler = (run) => {
+    armed.push(run);
+    return () => {
+      const index = armed.indexOf(run);
+      if (index >= 0) armed.splice(index, 1);
+    };
+  };
+  return { scheduler, armed };
+}
+describe('repo list invalidation on workspace switch', () => {
+  test('a new root never reports the previous root\'s repos', async () => {
+    const { fetchImpl } = fakeFetch({
+      '/ws/a': { repos: ['.', 'projects/a'] },
+      '/ws/b': { repos: ['.', 'projects/b'] },
+    });
+    const store = createRepoStore({ fetch: fetchImpl });
+    const seenA: string[][] = [];
+    const unsubscribeA = store.subscribe('/ws/a', () => seenA.push(store.snapshot('/ws/a').repos));
+    await store.settled('/ws/a');
+    expect(store.snapshot('/ws/a').repos).toEqual(['.', 'projects/a']);
+    // Switching workspaces: root B has no entry, so it starts from the root
+    // alone — not from A's list.
+    expect(store.snapshot('/ws/b').repos).toEqual(['.']);
+    unsubscribeA();
+    const seenB: string[][] = [];
+    const unsubscribeB = store.subscribe('/ws/b', () => seenB.push(store.snapshot('/ws/b').repos));
+    await store.settled('/ws/b');
+    expect(store.snapshot('/ws/b').repos).toEqual(['.', 'projects/b']);
+    // Every notification for B reported B's list — A's list was never published
+    // under B, not even for the render before the read landed.
+    expect(seenB).toEqual([['.'], ['.', 'projects/b']]);
+    expect(seenA).toEqual([['.'], ['.', 'projects/a']]);
+    unsubscribeB();
+  });
+  test('a list already discovered for a root is reused without re-asking', async () => {
+    const { fetchImpl, requested } = fakeFetch({ '/ws/a': { repos: ['.', 'projects/a'] } });
+    const store = createRepoStore({ fetch: fetchImpl });
+    const unsubscribeFirst = store.subscribe('/ws/a', () => {});
+    await store.settled('/ws/a');
+    unsubscribeFirst();
+    expect(requested).toEqual(['/ws/a']);
+    // A right-panel view switch re-subscribes to the same root.
+    const unsubscribeSecond = store.subscribe('/ws/a', () => {});
+    await store.settled('/ws/a');
+    expect(requested).toEqual(['/ws/a']);
+    expect(store.snapshot('/ws/a').repos).toEqual(['.', 'projects/a']);
+    unsubscribeSecond();
+  });
+  test('an unsettled discovery is resumed, not abandoned, when a subscriber returns', async () => {
+    const { fetchImpl, requested } = fakeFetch({ '/ws/a': { repos: ['.'], reposPending: true } });
+    const { scheduler, armed } = fakeScheduler();
+    const store = createRepoStore({ fetch: fetchImpl, scheduler });
+    const unsubscribe = store.subscribe('/ws/a', () => {});
+    await store.settled('/ws/a');
+    expect(store.snapshot('/ws/a').scanning).toBe(true);
+    expect(armed).toHaveLength(1);
+    unsubscribe();
+    // The retry is dropped with the last subscriber rather than left armed.
+    expect(armed).toHaveLength(0);
+    // Re-subscribing resumes the scan instead of inheriting a spinner that
+    // nothing drives.
+    const unsubscribeAgain = store.subscribe('/ws/a', () => {});
+    await store.settled('/ws/a');
+    expect(requested).toEqual(['/ws/a', '/ws/a']);
+    expect(armed).toHaveLength(1);
+    unsubscribeAgain();
+  });
+  test('a failed discovery leaves the root unlisted so the next subscriber retries', async () => {
+    let calls = 0;
+    const store = createRepoStore({
+      fetch: async () => {
+        calls += 1;
+        if (calls === 1) throw new Error('offline');
+        return { repos: ['.', 'projects/a'] };
+      },
+    });
+    const unsubscribe = store.subscribe('/ws/a', () => {});
+    await store.settled('/ws/a');
+    expect(store.snapshot('/ws/a').repos).toEqual(['.']);
+    unsubscribe();
+    const unsubscribeAgain = store.subscribe('/ws/a', () => {});
+    await store.settled('/ws/a');
+    expect(calls).toBe(2);
+    expect(store.snapshot('/ws/a').repos).toEqual(['.', 'projects/a']);
+    unsubscribeAgain();
+  });
+  test('a response that lands after its root lost every subscriber is dropped', async () => {
+    const gate = Promise.withResolvers<unknown>();
+    const store = createRepoStore({ fetch: () => gate.promise });
+    const unsubscribe = store.subscribe('/ws/a', () => {});
+    unsubscribe();
+    gate.resolve({ repos: ['.', 'projects/a'] });
+    await store.settled('/ws/a');
+    // The read was abandoned with the subscription: nothing is reported for a
+    // root nobody is showing.
+    expect(store.snapshot('/ws/a').repos).toEqual(['.']);
+  });
+  test('a rescan reports the fresh list and clears the pending flag', async () => {
+    let repos = ['.'];
+    const requested: string[] = [];
+    const store = createRepoStore({
+      fetch: async (url) => {
+        requested.push(new URL(url, 'http://localhost').searchParams.get('rescan') ?? '');
+        return { repos };
+      },
+    });
+    const unsubscribe = store.subscribe('/ws/a', () => {});
+    await store.settled('/ws/a');
+    expect(store.snapshot('/ws/a')).toEqual({ repos: ['.'], scanning: false });
+    // A nested repo that appeared after the first discovery.
+    repos = ['.', 'projects/late'];
+    store.rescan('/ws/a');
+    await store.settled('/ws/a');
+    expect(requested).toEqual(['', '1']);
+    expect(store.snapshot('/ws/a')).toEqual({ repos: ['.', 'projects/late'], scanning: false });
+    unsubscribe();
+  });
+});