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

package/dist/server.meta.json

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

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

@@ -423,9 +423,9 @@ const ATTENTION_COUNT =
   "bg-[color-mix(in_oklab,var(--attention)_20%,transparent)] text-[color:color-mix(in_oklab,var(--attention),var(--foreground)_55%)]";
 
 /**
- * The Needs attention section: a header with its family count, then its rows,
- * on one band of bb's attention colour. It has no collapse, menu or drag, and
- * no drop target of its own.
+ * The Needs attention section: a header with its family count (none when every
+ * family in it is attended), then its rows, on one band of bb's attention
+ * colour. It has no collapse, menu or drag, and no drop target of its own.
  */
 export const AttentionSection = memo(function AttentionSection({ view, ...rest }: SectionProps & { view: AttentionView }) {
   return (
@@ -435,12 +435,14 @@ export const AttentionSection = memo(function AttentionSection({ view, ...rest }
         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"
       >
         <span className="min-w-0 flex-1 truncate">Needs attention</span>
-        <span
-          className={cn("rounded-full px-1.5 text-[11px] leading-4 tabular-nums", ATTENTION_COUNT)}
-          aria-label={`${view.familyCount} ${view.familyCount === 1 ? "family" : "families"}`}
-        >
-          {view.familyCount}
-        </span>
+        {view.familyCount > 0 ? (
+          <span
+            className={cn("rounded-full px-1.5 text-[11px] leading-4 tabular-nums", ATTENTION_COUNT)}
+            aria-label={`${view.familyCount} ${view.familyCount === 1 ? "family" : "families"}`}
+          >
+            {view.familyCount}
+          </span>
+        ) : null}
       </h2>
       <Rows {...rest} rows={view.rows} groupId={ATTENTION_GROUP_ID} inPinned={false} forceMount={false} />
     </section>

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

@@ -160,7 +160,7 @@ function ThreadListBody({
     [ready, threads, activeThreadId, stamps.finishedAt, stamps.seenAt, draftIds, scheduled, now, notes, prefs.childAttention],
   );
   const { targets, prune } = useAutoExpand(hydrated ? forest : null, activeThreadId);
-  const heldRootId = useAttentionHold(forest, activeThreadId);
+  const held = useAttentionHold(forest, activeThreadId);
   // Rows and groups that did not change keep their objects, so their
   // memoized components skip the render.
   const previousView = useRef<ListView | null>(null);
@@ -175,10 +175,10 @@ function ThreadListBody({
             sections: sidebar.sections,
             prefs,
             activeThreadId,
-            heldRootId,
+            held,
             targets,
           })),
-    [forest, threads, sidebar.projects, sidebar.sections, prefs, activeThreadId, heldRootId, targets],
+    [forest, threads, sidebar.projects, sidebar.sections, prefs, activeThreadId, held, targets],
   );
   useLayoutEffect(() => {
     previousView.current = view;

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

@@ -408,7 +408,7 @@ export const ThreadRowView = memo(function ThreadRowView({
             title={thread.displayTitle}
             className={cn(
               "min-w-0 truncate",
-              info.unread ? "font-semibold" : "font-normal",
+              row.bold ? "font-semibold" : "font-normal",
               // Children sit a step below their parent.
               row.depth > 0 && "text-xs",
               // Quiet threads step back so live ones lead; hover brings them back.

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

@@ -1,19 +1,19 @@
-// Which family Needs attention holds, and which family is open, while one of its threads is open. Diffed
-// render to render, as auto-expansion is; nothing here is persisted.
+// Which family Needs attention holds, as it was when opened, and which family is open, while one of its
+// threads is open. Diffed render to render, as auto-expansion is; nothing here is persisted.
 import { useRef } from "react";
 import type { Forest } from "../model/families";
-import { holdAttention, NO_HOLD, type AttentionHold } from "../model/attention";
+import { holdAttention, NO_HOLD, type AttentionHold, type SectionFamily } from "../model/attention";
 
-export function useAttentionHold(forest: Forest | null, activeThreadId: string | null): string | null {
-  const held = useRef<AttentionHold>(NO_HOLD);
+export function useAttentionHold(forest: Forest | null, activeThreadId: string | null): SectionFamily | null {
+  const hold = useRef<AttentionHold>(NO_HOLD);
   const lastForest = useRef<Forest | null>(null);
   const lastActive = useRef<string | null | undefined>(undefined);
   // Derived during render, so the family never leaves for a frame. Idempotent:
   // a repeated render with the same inputs keeps what it stored.
   if (forest !== null && (forest !== lastForest.current || activeThreadId !== lastActive.current)) {
-    held.current = holdAttention(held.current, activeThreadId === null ? undefined : forest.familyOf.get(activeThreadId));
+    hold.current = holdAttention(hold.current, forest, activeThreadId);
     lastForest.current = forest;
     lastActive.current = activeThreadId;
   }
-  return held.current.heldRootId;
+  return hold.current.held;
 }

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

@@ -3,7 +3,7 @@
 // builds. Pure.
 import type { PluginSidebarThread } from "@get-bb/plugin-sdk/app";
 import type { ChildAttention } from "@/shared/preferences";
-import type { Family } from "./families";
+import type { Family, Forest } from "./families";
 import { type Flag, type StateKind, type ThreadState } from "./state";
 
 /** The flags that count for a root thread. Working is not one. */
@@ -90,17 +90,20 @@ export function revealsOn(attention: ReadonlySet<Flag>, isRoot: boolean): boolea
 }
 
 /** What the section reads of a family. */
-type SectionFamily = Pick<Family, "root" | "attentionFlags">;
+export type SectionFamily = Pick<Family, "root" | "attentionFlags" | "latestAttentionAt">;
 
 /** What Needs attention remembers between renders: the family it holds, and the family that was open. */
 export interface AttentionHold {
-  /** The root of the family held in the section, if any. */
-  heldRootId: string | null;
+  /**
+   * The family held in the section, if any, as it was when opened. The section
+   * orders it by this, so nothing that happens inside it moves it.
+   */
+  held: SectionFamily | null;
   /** The root of the family the open thread belonged to at the last render, if any. */
   openRootId: string | null;
 }
 
-export const NO_HOLD: AttentionHold = { heldRootId: null, openRootId: null };
+export const NO_HOLD: AttentionHold = { held: null, openRootId: null };
 
 /**
  * Whether a family is in the Needs attention section: it is the held family, or one
@@ -114,20 +117,37 @@ export function inAttention(family: SectionFamily, heldRootId: string | null, op
   return family.attentionFlags.size > 0 && rootId !== openRootId;
 }
 
+/**
+ * Whether a family is attended: held in the section with nothing in it needing
+ * attention any more. It keeps its place and draws and counts as in its home group.
+ */
+export function isAttended(family: SectionFamily, heldRootId: string | null): boolean {
+  return family.root.thread.id === heldRootId && family.attentionFlags.size === 0;
+}
+
 /**
  * The hold after a render. A family is judged when a thread in it is opened
  * from outside it: it is held if something in it needs attention then, and it stays
  * held while one of its threads is open, after nothing in it needs attention any
- * more, until a thread outside it is opened. A family that does not need attention
+ * more, until none of its threads is open. An attended family whose open thread
+ * is archived counts as closed. A family that does not need attention
  * when opened is not pulled in later, whatever happens in it; nor is one
  * that never needed attention. Opening another thread of the open family judges
  * nothing again.
  */
-export function holdAttention(previous: AttentionHold, openFamily: SectionFamily | undefined): AttentionHold {
+export function holdAttention(
+  previous: AttentionHold,
+  forest: Pick<Forest, "infos" | "familyOf">,
+  activeThreadId: string | null,
+): AttentionHold {
+  if (activeThreadId === null) return NO_HOLD;
+  const openFamily = forest.familyOf.get(activeThreadId);
   if (openFamily === undefined) return NO_HOLD;
   const openRootId = openFamily.root.thread.id;
   if (openRootId === previous.openRootId) {
-    return { heldRootId: previous.heldRootId === openRootId ? openRootId : null, openRootId };
+    const archived = forest.infos.get(activeThreadId)?.thread.isArchived ?? false;
+    const held = previous.held?.root.thread.id === openRootId && !(archived && openFamily.attentionFlags.size === 0);
+    return held ? previous : { held: null, openRootId };
   }
-  return { heldRootId: openFamily.attentionFlags.size > 0 ? openRootId : null, openRootId };
+  return { held: openFamily.attentionFlags.size > 0 ? openFamily : null, openRootId };
 }

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

@@ -20,7 +20,7 @@ import {
 } from "./groups";
 import { addCounters, countFamilies, EMPTY_COUNTERS, type Counters } from "./counters";
 import { comparePinned, effectiveSortField, makeComparator, type SortKey } from "./sort";
-import { inAttention } from "./attention";
+import { inAttention, isAttended, type SectionFamily } from "./attention";
 import { mostUrgent, type Flag } from "./state";
 import type { Targets } from "./expansion";
 import type { RowNote } from "./notes";
@@ -50,9 +50,12 @@ export interface ThreadRow {
   /** Title of the thread this one attaches to, for tooltips and labels. */
   parentTitle: string | null;
   chip: Chip | null;
+  /** The title is bold: the thread is unread and its family is not attended. */
+  bold: boolean;
   /**
    * The line under the title. In Needs attention, a row that itself needs
-   * attention says why; any other row says why it waits on you or failed.
+   * attention says why, and an attended family's rows have none; any other
+   * row says why it waits on you or failed.
    */
   note: RowNote | null;
   /** The title, and the chip with it, step back: see `isDimmed`. */
@@ -122,7 +125,7 @@ export const ATTENTION_GROUP_ID = "attention";
 
 /** The Needs attention section: every family with a thread that needs attention, or held there while one of its threads is open. */
 export interface AttentionView {
-  /** How many families the section holds, for its header. */
+  /** How many families the section holds, attended ones left out, for its header. */
   familyCount: number;
   rows: Row[];
   /** The home group of each thread drawn here, by thread id: a drop on its row acts there. */
@@ -149,12 +152,13 @@ export interface ViewInputs {
   sections: readonly PluginSidebarSection[];
   prefs: Preferences;
   activeThreadId: string | null;
-  /** The root of the family Needs attention keeps while one of its threads is open. */
-  heldRootId: string | null;
+  /** The family Needs attention keeps while one of its threads is open, as it was when opened: the section orders it by this. */
+  held: SectionFamily | null;
   targets: Targets;
 }
 
 interface Context extends ViewInputs {
+  heldRootId: string | null;
   compare: (a: SortKey, b: SortKey) => number;
   expandedChildren: ReadonlySet<string>;
   expandedOlder: ReadonlySet<string>;
@@ -168,6 +172,8 @@ interface Context extends ViewInputs {
   sectionNames: ReadonlyMap<string, string>;
   /** The rows are drawn in Needs attention. */
   drawnInAttention: boolean;
+  /** The rows are an attended family's: they draw as in its home group, with no bold title or why line. */
+  attended: boolean;
 }
 
 function titleOf(context: Context, id: string | null): string | null {
@@ -219,7 +225,8 @@ function threadRow(
     nested: options.nested,
     parentTitle: titleOf(context, info.parentId),
     chip: options.chip,
-    note: context.drawnInAttention && needsAttention ? info.attentionNote : info.note,
+    bold: info.unread && !context.attended,
+    note: context.attended ? null : context.drawnInAttention && needsAttention ? info.attentionNote : info.note,
     dimmed: isDimmed(context, info, options.chip),
     hiddenBadge: info.thread.isHidden,
     crossGroupLabel: crossGroupLabel(context, info, root),
@@ -421,7 +428,7 @@ function familyUnit(context: Context, family: Family): Unit {
 }
 
 /** Waiting on you, then failed, then offline, then unread, then the rest. */
-export function urgency(family: Family): number {
+export function urgency(family: Pick<Family, "attentionFlags">): number {
   const flags = family.attentionFlags;
   if (flags.has("waits-on-you")) return 0;
   if (flags.has("unread-failed") || flags.has("queue-failed")) return 1;
@@ -437,7 +444,11 @@ export function urgency(family: Family): number {
  * with the root's chip, it draws as in its home group and keeps the path.
  */
 function attentionFamilyRows(groupContext: Context, family: Family, homeGroupLabel: string): Row[] {
-  const context: Context = { ...groupContext, drawnInAttention: true };
+  const context: Context = {
+    ...groupContext,
+    drawnInAttention: true,
+    attended: isAttended(family, groupContext.heldRootId),
+  };
   const root = family.root;
   const onPath = new Set<string>([root.thread.id]);
   for (const info of family.descendants) {
@@ -475,20 +486,26 @@ function buildAttention(
 ): AttentionView | null {
   if (families.length === 0) return null;
   // Most urgent first, then the chosen field in its natural direction: the
-  // sort direction orders the groups only.
+  // sort direction orders the groups only. The held family sorts as it was
+  // when opened, so nothing inside it moves it.
   const compare = makeComparator({
     field: context.prefs.chronologicalSort,
     direction: "default",
     workingFirst: context.prefs.workingFirst,
   });
-  const sorted = [...families].sort(
-    (a, b) =>
+  const slotOf = (family: Family): SectionFamily =>
+    context.held !== null && family.root.thread.id === context.heldRootId ? context.held : family;
+  const sorted = [...families].sort((familyA, familyB) => {
+    const a = slotOf(familyA);
+    const b = slotOf(familyB);
+    return (
       urgency(a) - urgency(b) ||
       compare(
         { thread: a.root.thread, familyAttention: a.latestAttentionAt },
         { thread: b.root.thread, familyAttention: b.latestAttentionAt },
-      ),
-  );
+      )
+    );
+  });
   const homeGroupIds: Record<string, string> = {};
   const rows = sorted.flatMap((family) => {
     const home = homeGroupOf(family);
@@ -497,7 +514,7 @@ function buildAttention(
     return familyRows;
   });
   return {
-    familyCount: sorted.length,
+    familyCount: sorted.filter((family) => !isAttended(family, context.heldRootId)).length,
     rows,
     homeGroupIds,
   };
@@ -601,6 +618,7 @@ export function buildListView(inputs: ViewInputs): ListView {
   }
   const context: Context = {
     ...inputs,
+    heldRootId: inputs.held?.root.thread.id ?? null,
     compare: makeComparator({
       field: prefs.chronologicalSort,
       direction: prefs.sortDirection,
@@ -615,6 +633,7 @@ export function buildListView(inputs: ViewInputs): ListView {
     projectNames: new Map(inputs.projects.map((project) => [project.id, project.name])),
     sectionNames: new Map(inputs.sections.map((section) => [section.id, section.name])),
     drawnInAttention: false,
+    attended: false,
   };
 
   const byGroup = new Map<string, Family[]>();
@@ -630,7 +649,7 @@ export function buildListView(inputs: ViewInputs): ListView {
     list.push(family);
     byGroup.set(id, list);
     homeOf.set(family, id);
-    if (inAttention(family, inputs.heldRootId, openRootId)) section.push(family);
+    if (inAttention(family, context.heldRootId, openRootId)) section.push(family);
   }
   const inSection = new Set(section);
 

package/features/thread-list/testing/fixtures.ts

@@ -8,6 +8,7 @@ import { defaultPreferences, type Preferences } from "@/shared/preferences";
 import { buildForest, type Forest } from "../model/families";
 import { buildListView, type ListView, type Row } from "../model/view";
 import type { Targets } from "../model/expansion";
+import type { SectionFamily } from "../model/attention";
 
 export const T0 = 1_780_000_000_000;
 
@@ -108,7 +109,10 @@ export interface Scenario {
   sections?: PluginSidebarSection[];
   prefs?: Partial<Preferences>;
   activeThreadId?: string | null;
+  /** The root of the held family, held as it stands now. */
   heldRootId?: string | null;
+  /** The held family as it was when opened; wins over `heldRootId`. */
+  held?: SectionFamily | null;
   targets?: Targets;
   finishedAt?: Record<string, number>;
   seenAt?: Record<string, number>;
@@ -141,7 +145,7 @@ export function viewOf(scenario: Scenario): ListView {
     sections: scenario.sections ?? [],
     prefs: { ...defaultPreferences(), ...scenario.prefs },
     activeThreadId: scenario.activeThreadId ?? null,
-    heldRootId: scenario.heldRootId ?? null,
+    held: scenario.held ?? (scenario.heldRootId == null ? null : (forest.familyOf.get(scenario.heldRootId) ?? null)),
     targets: scenario.targets ?? new Map(),
   });
 }

package/package.json

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