@gperezmz/bb-plugin-thread-glance 0.2.3 → 0.2.4

package/dist/server.meta.json

@@ -3,7 +3,7 @@
   "sdkVersion": "0.5.9",
   "artifactFormatVersion": 1,
   "pluginId": "thread-glance",
-  "pluginVersion": "0.2.3",
+  "pluginVersion": "0.2.4",
   "builtWith": {
     "bbVersion": "0.43.4",
     "pluginSdkVersion": "0.5.9"

package/features/thread-list/components/FoldRows.tsx

@@ -22,7 +22,7 @@ import { ROW_ICON_BUTTON } from "./ThreadRowView";
 export const OlderRowView = memo(function OlderRowView({ row, controller }: { row: OlderRow; controller: RowController }) {
   const { label, ariaLabel } = olderRowText(row);
   // A family's fold sits where its children do, with a dots glyph in the
-  // status slot; the group's fold keeps the chevron.
+  // Status column; the group's fold keeps the chevron.
   const inFamily = row.scope !== "group";
   return (
     <button

package/features/thread-list/components/GroupSection.tsx

@@ -43,8 +43,6 @@ export interface GroupController {
 
 export type DropStates = ReadonlyMap<string, "valid" | "blocked" | "unchanged" | "before" | "after">;
 
-/** The sticky toolbar's height; headers stick below it. */
-export const TOOLBAR_HEIGHT = 28;
 const ROW_HEIGHT = { compact: 28, comfortable: 44 };
 
 function canRename(group: GroupView): boolean {
@@ -96,9 +94,8 @@ const GroupHeader = memo(function GroupHeader({
       role={undefined}
       tabIndex={undefined}
       data-sidebar="group-label"
-      style={{ top: inOverflow ? 0 : TOOLBAR_HEIGHT }}
       className={cn(
-        "group/header sticky z-20 flex h-7 items-center gap-1 rounded-md bg-sidebar pl-2 pr-1 text-xs text-muted-foreground max-md:pointer-coarse:h-9",
+        "group/header sticky top-0 z-20 flex h-7 items-center gap-1 rounded-md bg-sidebar pl-2 pr-1 text-xs text-muted-foreground max-md:pointer-coarse:h-9",
         dropActive && "bg-sidebar-accent",
         draggable.isDragging && "opacity-50",
         !controller.compact && !inOverflow && "select-none",
@@ -431,8 +428,7 @@ export const AttentionSection = memo(function AttentionSection({ view, ...rest }
   return (
     <section aria-label="Needs attention" className={cn("relative mb-1 flex w-full min-w-0 flex-col rounded-md pb-0.5", ATTENTION_BAND)}>
       <h2
-        style={{ top: TOOLBAR_HEIGHT }}
-        className="sticky z-20 flex h-7 items-center gap-1 rounded-t-md bg-[var(--tg-surface)] pl-2 pr-1 text-xs font-medium text-muted-foreground max-md:pointer-coarse:h-9"
+        className="sticky top-0 z-20 flex h-7 items-center gap-1 rounded-t-md bg-[var(--tg-surface)] pl-2 pr-1 text-xs font-medium text-muted-foreground max-md:pointer-coarse:h-9"
       >
         <span className="min-w-0 flex-1 truncate">Needs attention</span>
         {view.familyCount > 0 ? (

package/features/thread-list/components/{Toolbar.tsx → SettingsPanel.tsx}

@@ -1,20 +1,21 @@
-// The top of the scroll area: the settings button and its popover.
-import { experimental_Icon as Icon } from "@get-bb/plugin-sdk/app";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+// Thread Glance's settings, shown by its item in bb's sidebar footer.
+import { experimental_Icon as Icon, type ExperimentalSidebarFooterDisclosureProps } from "@get-bb/plugin-sdk/app";
 import { cn } from "@/lib/utils";
 import type { ClientPreferences, Preferences } from "@/shared/preferences";
 import { childAttentionFor, countsEveryChild, lifecyclesFor, sortArrow, sortFieldPatch, threadsShown } from "../model/settings";
 import { effectiveSortField } from "../model/sort";
+import { useClientPreferences } from "../data/useClientPreferences";
+import { usePreferences } from "../data/usePreferences";
 import { ICONS } from "../icons";
-import { TOOLBAR_HEIGHT } from "./GroupSection";
-import { ROW_ICON_BUTTON } from "./ThreadRowView";
 
 // bb's own segmented controls (the Reasoning picker, the diff view toggle)
 // mark the chosen item with the state-active token and no shadow. The track
 // is a translucent tint, so the chosen item reads as raised in both themes.
-const SEGMENT_TRACK = "flex min-w-0 flex-1 gap-0.5 rounded-md bg-surface-recessed p-0.5";
+// An item never shrinks below its text: where a line cannot hold its label
+// and its control, the control wraps onto a line of its own.
+const SEGMENT_TRACK = "flex flex-1 gap-0.5 rounded-md bg-surface-recessed p-0.5";
 const SEGMENT_ITEM =
-  "flex min-w-0 flex-1 items-center justify-center whitespace-nowrap rounded-sm px-1 py-0.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring";
+  "flex flex-1 items-center justify-center whitespace-nowrap rounded-sm px-1 py-0.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring";
 
 function segmentClass(selected: boolean): string {
   return cn(
@@ -25,12 +26,12 @@ function segmentClass(selected: boolean): string {
   );
 }
 
-/** A label, then its control, on one line. */
+/** A label, then its control: on one line where the panel is wide enough, else the control below. */
 function Line({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-2 px-2 py-1">
-      <span className="w-[5.5rem] shrink-0 text-sm">{label}</span>
-      {children}
+    <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-2 py-1">
+      <span className="min-w-[5.5rem] shrink-0 whitespace-nowrap text-sm">{label}</span>
+      <div className="flex flex-1 gap-2">{children}</div>
     </div>
   );
 }
@@ -104,7 +105,7 @@ function Heading({ children }: { children: React.ReactNode }) {
   return <h3 className="px-2 pb-0.5 pt-3 text-xs font-medium text-muted-foreground first:pt-0">{children}</h3>;
 }
 
-export function SettingsPanel({
+function SettingsPanel({
   prefs,
   client,
   onPrefs,
@@ -208,31 +209,13 @@ export function SettingsPanel({
   );
 }
 
-/** The slim row above the list: ⚙ alone at its right. */
-export function Toolbar({
-  prefs,
-  client,
-  onPrefs,
-  onClient,
-}: {
-  prefs: Preferences;
-  client: ClientPreferences;
-  onPrefs(patch: Partial<Preferences>): void;
-  onClient(patch: Partial<ClientPreferences>): void;
-}) {
+/** The footer item's panel, reading and writing the preferences the list reads. */
+export function SettingsDisclosure(_props: ExperimentalSidebarFooterDisclosureProps) {
+  const { prefs, update } = usePreferences();
+  const [client, updateClient] = useClientPreferences();
   return (
-    // Sticky with the group headers, so the settings stay in reach.
-    <div style={{ height: TOOLBAR_HEIGHT }} className="sticky top-0 z-30 flex items-center justify-end bg-sidebar">
-      <Popover>
-        <PopoverTrigger asChild>
-          <button type="button" aria-label="Thread Glance settings" title="List settings" className={ROW_ICON_BUTTON}>
-            <Icon name={ICONS.settings} aria-hidden className="size-4" />
-          </button>
-        </PopoverTrigger>
-        <PopoverContent align="end" className="w-80 p-2">
-          <SettingsPanel prefs={prefs} client={client} onPrefs={onPrefs} onClient={onClient} />
-        </PopoverContent>
-      </Popover>
+    <div className="p-1">
+      <SettingsPanel prefs={prefs} client={client} onPrefs={update} onClient={updateClient} />
     </div>
   );
 }

package/features/thread-list/components/ThreadList.tsx

@@ -54,7 +54,6 @@ import { cancelPendingCards } from "./row-card";
 import { GroupSection, AttentionSection, type DropStates, type GroupController } from "./GroupSection";
 import type { ProviderDisplay } from "./ProviderBadge";
 import { ThreadDetails } from "./ThreadDetails";
-import { Toolbar } from "./Toolbar";
 
 const PLUGIN_ID = "thread-glance";
 
@@ -108,7 +107,7 @@ function ThreadListBody({
   onRetry,
 }: PluginThreadListProps & { attempt: number; onRetry(): void }) {
   const { prefs, hydrated, update } = usePreferences();
-  const [client, updateClient] = useClientPreferences();
+  const [client] = useClientPreferences();
   const sidebar = useSidebarThreads({ experimental_lifecycles: prefs.threadLifecycles });
   const actions = useThreadActions();
   const sdk = useSdk();
@@ -679,7 +678,6 @@ function ThreadListBody({
   return (
     <ListLiveContext.Provider value={live}>
       <div className="flex w-full min-w-0 flex-col px-1.5 pb-2">
-        <Toolbar prefs={prefs} client={client} onPrefs={update} onClient={updateClient} />
         {threads.length === 0 ? (
           // bb's own pinned New thread button covers the empty list.
           <p className="px-3 py-4 text-sm text-muted-foreground">No threads yet.</p>

package/features/thread-list/components/glyphs.tsx

@@ -47,6 +47,18 @@ export function UnreadDot({ label, className }: { label?: string; className?: st
   );
 }
 
+// The Idle state's ring: uncoloured, smaller than the column and thinned, so
+// it reads as status yet stays fainter than the unread dot and the draft
+// pencil. Screen readers skip it, so an Idle row announces what it did before.
+export function IdleRing({ className }: { className?: string }) {
+  return (
+    <span
+      aria-hidden
+      className={cn("inline-block size-2.5 shrink-0 rounded-full border-[1.5px] border-current opacity-50", className)}
+    />
+  );
+}
+
 export function GlyphIcon({
   glyph,
   label,
@@ -56,7 +68,7 @@ export function GlyphIcon({
   label?: string;
   className?: string;
 }) {
-  if (glyph.icon === null) return null;
+  if (glyph.icon === "ring") return <IdleRing className={TONE_CLASS[glyph.tone]} />;
   if (glyph.icon === "dot") return <UnreadDot label={label} />;
   return (
     <Icon

package/features/thread-list/data/same-window.ts

@@ -0,0 +1,34 @@
+// The list and the settings panel mount apart, each with its own copy of the
+// preferences. A change made in one reaches the other here, in the same
+// window, at once; the server and localStorage stay what other windows read.
+import { useCallback, useEffect } from "react";
+
+type Apply<Patch> = (patch: Patch) => void;
+
+export function sameWindow<Patch>(): Set<Apply<Patch>> {
+  return new Set();
+}
+
+/**
+ * Joins this copy to `copies` for as long as it is mounted.
+ *
+ * Returns the call that hands a patch this copy made to every other copy.
+ */
+export function useSameWindow<State extends object>(
+  copies: Set<Apply<Partial<State>>>,
+  setState: (update: (current: State) => State) => void,
+): Apply<Partial<State>> {
+  const apply = useCallback((patch: Partial<State>) => setState((current) => ({ ...current, ...patch })), [setState]);
+  useEffect(() => {
+    copies.add(apply);
+    return () => {
+      copies.delete(apply);
+    };
+  }, [copies, apply]);
+  return useCallback(
+    (patch: Partial<State>) => {
+      for (const other of copies) if (other !== apply) other(patch);
+    },
+    [copies, apply],
+  );
+}

package/features/thread-list/data/useClientPreferences.ts

@@ -5,16 +5,24 @@ import {
   parseClientPreferences,
   type ClientPreferences,
 } from "@/shared/preferences";
+import { sameWindow, useSameWindow } from "./same-window";
 import { readJson, writeJson } from "./storage";
 
+const copies = sameWindow<Partial<ClientPreferences>>();
+
 export function useClientPreferences(): [ClientPreferences, (patch: Partial<ClientPreferences>) => void] {
   const [value, setValue] = useState(() => parseClientPreferences(readJson(CLIENT_PREFERENCES_STORAGE_KEY)));
-  const update = useCallback((patch: Partial<ClientPreferences>) => {
-    setValue((current) => {
-      const next = { ...current, ...patch };
-      writeJson(CLIENT_PREFERENCES_STORAGE_KEY, next);
-      return next;
-    });
-  }, []);
+  const tellOthers = useSameWindow(copies, setValue);
+  const update = useCallback(
+    (patch: Partial<ClientPreferences>) => {
+      setValue((current) => {
+        const next = { ...current, ...patch };
+        writeJson(CLIENT_PREFERENCES_STORAGE_KEY, next);
+        return next;
+      });
+      tellOthers(patch);
+    },
+    [tellOthers],
+  );
   return [value, update];
 }

package/features/thread-list/data/usePreferences.ts

@@ -14,10 +14,16 @@ import {
   type PreferenceKey,
   type Preferences,
 } from "@/shared/preferences";
+import { sameWindow, useSameWindow } from "./same-window";
 import { readJson, writeJson } from "./storage";
 
 const WRITE_DEBOUNCE_MS = 150;
 
+const copies = sameWindow<Partial<Preferences>>();
+// Writes not yet sent, whichever copy made them: a reload or an echo in any
+// copy must not put back the value one of them replaced.
+const pending = new Map<PreferenceKey, unknown>();
+
 export interface PreferencesState {
   prefs: Preferences;
   /** The server's values have arrived (or failed; the mirror stands in). */
@@ -31,7 +37,6 @@ export function usePreferences(): PreferencesState {
     coercePreferences(readJson(PREFERENCES_MIRROR_STORAGE_KEY)),
   );
   const [hydrated, setHydrated] = useState(false);
-  const pending = useRef(new Map<PreferenceKey, unknown>());
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const connection = useRealtimeConnectionState();
   const wasConnected = useRef(false);
@@ -41,7 +46,7 @@ export function usePreferences(): PreferencesState {
       const { preferences } = await rpc.call("listPreferences", null);
       const next = coercePreferences(preferences);
       // Keys with a write in flight keep the local value.
-      for (const [key, value] of pending.current) (next as Record<string, unknown>)[key] = value;
+      for (const [key, value] of pending) (next as Record<string, unknown>)[key] = value;
       setPrefs(next);
       writeJson(PREFERENCES_MIRROR_STORAGE_KEY, next);
     } finally {
@@ -73,7 +78,7 @@ export function usePreferences(): PreferencesState {
 
   useRealtime(CHANNELS.preferences, (payload) => {
     const signal = payload as PreferenceSignal;
-    if (!isPreferenceKey(signal?.key) || pending.current.has(signal.key)) return;
+    if (!isPreferenceKey(signal?.key) || pending.has(signal.key)) return;
     const parsed = parsePreference(signal.key, signal.value);
     if (!parsed.success) return;
     setPrefs((current) => {
@@ -84,8 +89,8 @@ export function usePreferences(): PreferencesState {
   });
 
   const flush = useCallback(() => {
-    const writes = [...pending.current];
-    pending.current.clear();
+    const writes = [...pending];
+    pending.clear();
     for (const [key, value] of writes) {
       rpc.call("setPreference", { key, value }).catch((error: unknown) => {
         toast.error(`Couldn't save the ${key} setting`, {
@@ -103,6 +108,9 @@ export function usePreferences(): PreferencesState {
     [flush],
   );
 
+  // Another copy's change arrives already mirrored and on its way to the server.
+  const tellOthers = useSameWindow(copies, setPrefs);
+
   const update = useCallback(
     (patch: Partial<Preferences>) => {
       setPrefs((current) => {
@@ -110,8 +118,9 @@ export function usePreferences(): PreferencesState {
         writeJson(PREFERENCES_MIRROR_STORAGE_KEY, next);
         return next;
       });
+      tellOthers(patch);
       for (const [key, value] of Object.entries(patch)) {
-        if (isPreferenceKey(key)) pending.current.set(key, value);
+        if (isPreferenceKey(key)) pending.set(key, value);
       }
       if (timer.current !== null) clearTimeout(timer.current);
       timer.current = setTimeout(() => {
@@ -119,7 +128,7 @@ export function usePreferences(): PreferencesState {
         flush();
       }, WRITE_DEBOUNCE_MS);
     },
-    [flush],
+    [flush, tellOthers],
   );
 
   return { prefs, hydrated, update };

package/features/thread-list/icons.ts

@@ -24,7 +24,6 @@ export const ICONS = {
   moveUp: "ChevronUp",
   newThread: "Plus",
   newSection: "SectionAdd",
-  settings: "Settings",
   customize: "SlidersHorizontal",
   check: "Check",
   pullRequest: "GitPullRequest",

package/features/thread-list/index.ts

@@ -1,2 +1,3 @@
 // The sidebar thread list feature: what the app entry may use.
 export { ThreadList } from "./components/ThreadList";
+export { SettingsDisclosure } from "./components/SettingsPanel";

package/features/thread-list/model/layout.ts

@@ -1,9 +1,12 @@
 // How far a row sits from the list's left edge. Pure, so a test can
 // call it without rendering.
-/** Left padding of a root row, as in bb's list. */
+/**
+ * Left padding of a root row: its Status column starts where the group
+ * header's text does.
+ */
 export const ROOT_INDENT = 8;
 /**
- * A child's status slot starts this far right of its parent's, so the
+ * A child's Status column starts this far right of its parent's, so the
  * child's title sits this far right of the parent's title.
  */
 export const FOLDED_STEP = 12;

package/features/thread-list/model/settings.ts

@@ -1,4 +1,4 @@
-// What the settings popover's controls show and write. Pure.
+// What the settings panel's controls show and write. Pure.
 import type { ChildAttention, Lifecycle, Preferences, SortField } from "@/shared/preferences";
 import { effectiveDirection, effectiveSortField, naturalDirection } from "./sort";
 

package/features/thread-list/model/state.ts

@@ -48,9 +48,12 @@ const NEEDS: Record<NeedsKind, { icon: string; label: string }> = {
   input: { icon: "MessageQuestion", label: "Needs your input" },
 };
 
-/** How a glyph is drawn. `dot` is the unread dot; everything else a host icon. */
+/**
+ * How a glyph is drawn. `dot` is the unread dot, `ring` the Idle state's
+ * faint ring; everything else a host icon.
+ */
 export interface Glyph {
-  icon: string | "dot" | null;
+  icon: string | "dot" | "ring";
   tone: Tone;
   spin: boolean;
   shine: boolean;
@@ -231,7 +234,7 @@ export function computeState(thread: PluginSidebarThread, inputs: StateInputs):
   }
   if (inputs.unread) return { kind: "unread", label: "Unread", glyph: glyph("dot", "none"), ...none };
   if (inputs.hasDraft) return { kind: "draft", label: "Unsubmitted draft", glyph: glyph("Edit", "muted"), ...none };
-  return { kind: "idle", label: "Idle", glyph: glyph(null, "none"), ...none };
+  return { kind: "idle", label: "Idle", glyph: glyph("ring", "muted"), ...none };
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gperezmz/bb-plugin-thread-glance",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "type": "module",
   "engines": {
     "bb": ">=0.43",