@gperezmz/bb-plugin-thread-glance 0.1.3 → 0.2.1

package/dist/server.meta.json

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

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

@@ -1,5 +1,5 @@
-// The fold rows (`N older` on a group, `N more child threads` on a family)
-// and the environment folder row.
+// The fold rows (`N older` on a group, `N more child threads` on a family),
+// the "+N more" line in Needs you, and the environment folder row.
 import { memo, useState } from "react";
 import { experimental_Icon as Icon, experimental_ProviderIcon as ProviderIcon } from "@get-bb/plugin-sdk/app";
 import type { PluginEnvironmentProvider } from "@get-bb/plugin-sdk/app";
@@ -14,7 +14,7 @@ import { ICONS } from "../icons";
 import { RowRails } from "./Rails";
 import { olderRowText } from "../model/labels";
 import { rowIndent } from "../model/layout";
-import { EMPTY_LEVEL_TEXT, type EmptyRow, type EnvironmentRow, type OlderRow } from "../model/view";
+import type { EnvironmentRow, LeftOutRow, OlderRow } from "../model/view";
 import type { RowController } from "./controller";
 import { FlagGlyph } from "./glyphs";
 import { RenameEditor } from "./RenameEditor";
@@ -35,9 +35,9 @@ export const OlderRowView = memo(function OlderRowView({ row, controller }: { ro
         "relative flex w-full items-center rounded-md pr-2 text-left text-xs text-muted-foreground outline-none hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring",
         inFamily ? "h-7 gap-1.5 max-md:pointer-coarse:h-9" : "h-6 gap-1",
       )}
-      style={{ paddingLeft: rowIndent(row.depth, controller.nesting) + (inFamily ? 0 : 2) }}
+      style={{ paddingLeft: rowIndent(row.depth) + (inFamily ? 0 : 2) }}
     >
-      <RowRails rails={row.rails} nesting={controller.nesting} />
+      <RowRails rails={row.rails} />
       {inFamily ? (
         <span aria-hidden className="inline-flex size-4 shrink-0 items-center justify-center">
           <Icon name={ICONS.more} className="size-3.5" />
@@ -50,16 +50,17 @@ export const OlderRowView = memo(function OlderRowView({ row, controller }: { ro
   );
 });
 
-/** A plain line under an opened chip that Needs attention leaves empty; not a control. */
-export const EmptyRowView = memo(function EmptyRowView({ row, controller }: { row: EmptyRow; controller: RowController }) {
+/** The "+N more" line under a family in Needs you: a count, not a control. */
+export const LeftOutRowView = memo(function LeftOutRowView({ row }: { row: LeftOutRow }) {
+  const noun = row.count === 1 ? "child thread" : "child threads";
   return (
     <div
-      className="relative flex h-7 w-full items-center gap-1.5 pr-2 text-xs text-muted-foreground max-md:pointer-coarse:h-9"
-      style={{ paddingLeft: rowIndent(row.depth, controller.nesting) }}
+      className="relative flex h-6 w-full items-center gap-1.5 pr-2 text-xs text-muted-foreground"
+      style={{ paddingLeft: rowIndent(row.depth) }}
     >
-      <RowRails rails={row.rails} nesting={controller.nesting} />
+      <RowRails rails={row.rails} />
       <span aria-hidden className="size-4 shrink-0" />
-      <span>{EMPTY_LEVEL_TEXT}</span>
+      <span title={`${row.count} more ${noun}`}>+{row.count} more</span>
     </div>
   );
 });
@@ -81,9 +82,9 @@ export const EnvironmentRowView = memo(function EnvironmentRowView({
   return (
     <div
       className="group/row relative flex h-7 w-full items-center gap-1.5 rounded-md pr-1 text-sm text-muted-foreground hover:bg-sidebar-accent"
-      style={{ paddingLeft: rowIndent(row.depth, controller.nesting) }}
+      style={{ paddingLeft: rowIndent(row.depth) }}
     >
-      <RowRails rails={row.rails} nesting={controller.nesting} />
+      <RowRails rails={row.rails} />
       <button
         type="button"
         aria-expanded={!row.collapsed}

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

@@ -1,5 +1,5 @@
 // A top-level group: its header with counters, and its rows, windowed
-// in chunks.
+// in chunks; and the Needs you section above every group.
 import { memo, useEffect, useRef, useState } from "react";
 import { useDraggable, useDroppable } from "@dnd-kit/core";
 import { experimental_Icon as Icon } from "@get-bb/plugin-sdk/app";
@@ -14,10 +14,10 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import { ICONS } from "../icons";
-import type { GroupView, Row } from "../model/view";
+import { NEEDS_YOU_GROUP_ID, type GroupView, type NeedsYouView, type Row } from "../model/view";
 import { chunk, windowedNavValue } from "../model/windowing";
 import type { RowController } from "./controller";
-import { EmptyRowView, EnvironmentRowView, OlderRowView } from "./FoldRows";
+import { EnvironmentRowView, LeftOutRowView, OlderRowView } from "./FoldRows";
 import { CounterStrip } from "./glyphs";
 import { visibleCounters } from "../model/counters";
 import { RenameEditor } from "./RenameEditor";
@@ -44,8 +44,7 @@ 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 = 32;
-const HEADER_HEIGHT = 28;
+export const TOOLBAR_HEIGHT = 28;
 const ROW_HEIGHT = { compact: 28, comfortable: 44 };
 
 function canRename(group: GroupView): boolean {
@@ -267,38 +266,107 @@ function WindowedChunk({
   );
 }
 
-export const GroupSection = memo(function GroupSection({
-  group,
+interface RowsProps {
+  rows: readonly Row[];
+  /** The group the rows are drawn in, for drag ids. */
+  groupId: string;
+  inPinned: boolean;
+  /** Mount every chunk, whatever is on screen (the More popover). */
+  forceMount: boolean;
+  rowController: RowController;
+  environmentProviders: readonly PluginEnvironmentProvider[];
+  dropStates: DropStates;
+  activeThreadId: string | null;
+  editingId: string | null;
+  now: number;
+  /** Rows get their own stamps as props, so a stamp renders one row. */
+  stamps: Stamps;
+}
+
+/** A group's rows, windowed in chunks. */
+function Rows({
+  rows: all,
+  groupId,
+  inPinned,
+  forceMount,
   rowController,
-  groupController,
   environmentProviders,
   dropStates,
-  dropTargetGroupId,
   activeThreadId,
   editingId,
   now,
   stamps,
+}: RowsProps) {
+  const rowHeight = rowController.comfortable ? ROW_HEIGHT.comfortable : ROW_HEIGHT.compact;
+  return (
+    <div data-sidebar="group-content" className="flex w-full flex-col text-sm">
+      {chunk(all).map((rows) => (
+        <WindowedChunk
+          key={rowKey(rows[0]!)}
+          rows={rows}
+          rowHeight={rowHeight}
+          forceMount={
+            forceMount ||
+            rows.some(
+              (row) =>
+                row.type === "thread" &&
+                (row.info.thread.id === activeThreadId || row.info.thread.id === editingId),
+            )
+          }
+        >
+          {rows.map((row) =>
+            row.type === "thread" ? (
+              <ThreadRowView
+                key={row.key}
+                row={row}
+                controller={rowController}
+                groupId={groupId}
+                inPinned={inPinned}
+                dropState={dropStates.get(row.info.thread.id) ?? null}
+                active={row.info.thread.id === activeThreadId}
+                editing={row.info.thread.id === editingId}
+                now={now}
+                startedAt={stamps.startedAt[row.info.thread.id]}
+                finishedAt={stamps.finishedAt[row.info.thread.id]}
+                pendingAt={stamps.pendingAt[row.info.thread.id]}
+              />
+            ) : row.type === "older" ? (
+              <OlderRowView key={row.key} row={row} controller={rowController} />
+            ) : row.type === "left-out" ? (
+              <LeftOutRowView key={row.key} row={row} />
+            ) : (
+              <EnvironmentRowView
+                key={row.key}
+                row={row}
+                controller={rowController}
+                environmentProviders={environmentProviders}
+              />
+            ),
+          )}
+        </WindowedChunk>
+      ))}
+    </div>
+  );
+}
+
+type SectionProps = Omit<RowsProps, "rows" | "groupId" | "inPinned" | "forceMount">;
+
+export const GroupSection = memo(function GroupSection({
+  group,
+  groupController,
+  dropTargetGroupId,
   inOverflow = false,
-}: {
+  ...rest
+}: SectionProps & {
   group: GroupView;
-  rowController: RowController;
   groupController: GroupController;
-  environmentProviders: readonly PluginEnvironmentProvider[];
-  dropStates: DropStates;
   dropTargetGroupId: string | null;
-  activeThreadId: string | null;
-  editingId: string | null;
-  now: number;
-  /** Rows get their own stamps as props, so a stamp renders one row. */
-  stamps: Stamps;
   inOverflow?: boolean;
 }) {
   const droppable = useDroppable({
     id: `drop-group:${group.descriptor.id}`,
     data: { kind: "group", groupId: group.descriptor.id },
   });
-  const rowHeight = rowController.comfortable ? ROW_HEIGHT.comfortable : ROW_HEIGHT.compact;
-  const inPinned = group.descriptor.id === "pinned";
   return (
     <section
       ref={droppable.setNodeRef}
@@ -314,57 +382,38 @@ export const GroupSection = memo(function GroupSection({
         dropActive={dropTargetGroupId === group.descriptor.id}
       />
       {group.collapsed ? null : group.rows.length === 0 ? (
-        <p className="py-1 pl-8 text-xs text-muted-foreground">No threads</p>
+        // A group whose every family sits in Needs you draws only its header.
+        group.rootIds.length === 0 ? <p className="py-1 pl-8 text-xs text-muted-foreground">No threads</p> : null
       ) : (
-        <div data-sidebar="group-content" className="flex w-full flex-col text-sm">
-          {chunk(group.rows).map((rows) => (
-            <WindowedChunk
-              key={rowKey(rows[0]!)}
-              rows={rows}
-              rowHeight={rowHeight}
-              forceMount={
-                inOverflow ||
-                rows.some(
-                  (row) =>
-                    row.type === "thread" &&
-                    (row.info.thread.id === activeThreadId || row.info.thread.id === editingId),
-                )
-              }
-            >
-              {rows.map((row) =>
-                row.type === "thread" ? (
-                  <ThreadRowView
-                    key={row.key}
-                    row={row}
-                    controller={rowController}
-                    groupId={group.descriptor.id}
-                    inPinned={inPinned}
-                    dropState={dropStates.get(row.info.thread.id) ?? null}
-                    stickyTop={row.stickyLevel !== null ? TOOLBAR_HEIGHT + HEADER_HEIGHT + row.stickyLevel * rowHeight : null}
-                    active={row.info.thread.id === activeThreadId}
-                    editing={row.info.thread.id === editingId}
-                    now={now}
-                    startedAt={stamps.startedAt[row.info.thread.id]}
-                    finishedAt={stamps.finishedAt[row.info.thread.id]}
-                    pendingAt={stamps.pendingAt[row.info.thread.id]}
-                  />
-                ) : row.type === "older" ? (
-                  <OlderRowView key={row.key} row={row} controller={rowController} />
-                ) : row.type === "empty" ? (
-                  <EmptyRowView key={row.key} row={row} controller={rowController} />
-                ) : (
-                  <EnvironmentRowView
-                    key={row.key}
-                    row={row}
-                    controller={rowController}
-                    environmentProviders={environmentProviders}
-                  />
-                ),
-              )}
-            </WindowedChunk>
-          ))}
-        </div>
+        <Rows
+          {...rest}
+          rows={group.rows}
+          groupId={group.descriptor.id}
+          inPinned={group.descriptor.id === "pinned"}
+          forceMount={inOverflow}
+        />
       )}
     </section>
   );
 });
+
+/**
+ * The Needs you section: a header with its family count, then its rows. It
+ * has no collapse, menu or drag, and no drop target of its own.
+ */
+export const NeedsYouSection = memo(function NeedsYouSection({ view, ...rest }: SectionProps & { view: NeedsYouView }) {
+  return (
+    <section aria-label="Needs you" className="relative flex w-full min-w-0 flex-col">
+      <h2
+        style={{ top: TOOLBAR_HEIGHT }}
+        className="sticky z-20 flex h-7 items-center gap-1 bg-sidebar pl-2 pr-2 text-xs font-medium text-muted-foreground max-md:pointer-coarse:h-9"
+      >
+        <span className="min-w-0 flex-1 truncate">Needs you</span>
+        <span className="tabular-nums" aria-label={`${view.familyCount} ${view.familyCount === 1 ? "family" : "families"}`}>
+          {view.familyCount}
+        </span>
+      </h2>
+      <Rows {...rest} rows={view.rows} groupId={NEEDS_YOU_GROUP_ID} inPinned={false} forceMount={false} />
+    </section>
+  );
+});

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

@@ -1,6 +1,5 @@
 // The guide rails of a nested row: one hairline per nesting level,
 // drawn inside the row so they join up from row to row.
-import type { Nesting } from "@/shared/preferences";
 import { railLeft, type Rail } from "../model/layout";
 
 // `start` begins just under the 16px status slot, which is centred in the row.
@@ -10,7 +9,7 @@ const SPAN: Record<Rail, { top: string; bottom: string }> = {
   end: { top: "0px", bottom: "50%" },
 };
 
-export function RowRails({ rails, nesting }: { rails: readonly (Rail | null)[]; nesting: Nesting }) {
+export function RowRails({ rails }: { rails: readonly (Rail | null)[] }) {
   if (rails.every((rail) => rail === null)) return null;
   return (
     <span aria-hidden data-rails="" className="pointer-events-none absolute inset-0">
@@ -19,7 +18,7 @@ export function RowRails({ rails, nesting }: { rails: readonly (Rail | null)[];
           <span
             key={level}
             className="absolute w-px bg-border"
-            style={{ left: railLeft(level, nesting), ...SPAN[rail] }}
+            style={{ left: railLeft(level), ...SPAN[rail] }}
           />
         ),
       )}

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

@@ -29,6 +29,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { cn } from "@/lib/utils";
 import { useAutoExpand } from "../data/useAutoExpand";
 import { useClientPreferences } from "../data/useClientPreferences";
+import { useNeedsYouHold } from "../data/useNeedsYouHold";
 import { useNow } from "../data/useNow";
 import { usePreferences } from "../data/usePreferences";
 import { useScheduled } from "../data/useScheduled";
@@ -50,7 +51,7 @@ import { modelDisplayName } from "../model/details";
 import { groupIdForRoot } from "../model/groups";
 import { CounterStrip } from "./glyphs";
 import { cancelPendingCards } from "./row-card";
-import { GroupSection, type DropStates, type GroupController } from "./GroupSection";
+import { GroupSection, NeedsYouSection, type DropStates, type GroupController } from "./GroupSection";
 import type { ProviderDisplay } from "./ProviderBadge";
 import { ThreadDetails } from "./ThreadDetails";
 import { Toolbar } from "./Toolbar";
@@ -159,6 +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 = useNeedsYouHold(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);
@@ -172,11 +174,11 @@ function ThreadListBody({
             projects: sidebar.projects,
             sections: sidebar.sections,
             prefs,
-            filter: client.filter,
             activeThreadId,
+            heldRootId,
             targets,
           })),
-    [forest, threads, sidebar.projects, sidebar.sections, prefs, client.filter, activeThreadId, targets],
+    [forest, threads, sidebar.projects, sidebar.sections, prefs, activeThreadId, heldRootId, targets],
   );
   useLayoutEffect(() => {
     previousView.current = view;
@@ -356,7 +358,6 @@ function ThreadListBody({
       provider: providerDisplay,
       sections: sidebar.sections,
       mode: prefs.organizationMode,
-      nesting: prefs.nesting,
       onNavigate,
       onToggleChip: (row) => {
         const { prefs, forest } = latest.current;
@@ -399,7 +400,6 @@ function ThreadListBody({
     prefs.showPullRequests,
     prefs.harnessIcon,
     prefs.organizationMode,
-    prefs.nesting,
     defaultBranches,
     multiHost,
     providerDisplay,
@@ -523,7 +523,8 @@ function ThreadListBody({
   }, []);
 
   const dropContext = useMemo(() => {
-    const groupOfThread = new Map<string, string>();
+    // A row in Needs you drops as it would in its home group.
+    const groupOfThread = new Map<string, string>(Object.entries(view?.needsYou?.homeGroupIds ?? {}));
     for (const group of [...(view?.groups ?? []), ...(view?.more ?? [])]) {
       for (const row of group.rows) if (row.type === "thread") groupOfThread.set(row.info.thread.id, group.descriptor.id);
     }
@@ -677,19 +678,23 @@ 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} attentionCount={view.attentionCount} compact={isCompactViewport} onPrefs={update} onClient={updateClient} />
+        <Toolbar prefs={prefs} client={client} onPrefs={update} onClient={updateClient} />
         {threads.length === 0 ? (
-          <div className="flex flex-col items-start gap-2 px-3 py-4 text-sm text-muted-foreground">
-            <p>No threads yet.</p>
-            <Button size="sm" variant="outline" onClick={() => actions.openNewThread({ focusPrompt: true })}>
-              <Icon name="Plus" aria-hidden />
-              New thread
-            </Button>
-          </div>
+          // 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>
         ) : (
           <DndContext sensors={sensors} collisionDetection={collision} onDragMove={onDragMove} onDragEnd={onDragEnd} onDragCancel={onDragCancel}>
-            {view.groups.length === 0 && client.filter === "attention" ? (
-              <p className="px-3 py-3 text-sm text-muted-foreground">Nothing needs your attention.</p>
+            {view.needsYou !== null ? (
+              <NeedsYouSection
+                view={view.needsYou}
+                rowController={rowController}
+                environmentProviders={environmentProviders}
+                dropStates={dropStates}
+                activeThreadId={activeThreadId}
+                editingId={editingId}
+                now={now}
+                stamps={stamps}
+              />
             ) : null}
             {view.groups.map((group) => (
               <GroupSection

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

@@ -81,7 +81,6 @@ export interface ThreadRowViewProps {
   inPinned: boolean;
   /** Drop feedback from the list's drag state. */
   dropState: "valid" | "blocked" | "unchanged" | "before" | "after" | null;
-  stickyTop: number | null;
   /** The open thread is this one. */
   active: boolean;
   /** Its title is being renamed. */
@@ -100,7 +99,6 @@ export const ThreadRowView = memo(function ThreadRowView({
   groupId,
   inPinned,
   dropState,
-  stickyTop,
   active: isActive,
   editing,
   now,
@@ -165,7 +163,7 @@ export const ThreadRowView = memo(function ThreadRowView({
           finishedAt: finishedAt === undefined ? {} : { [thread.id]: finishedAt },
         },
         now,
-        info.state.kind === "needs-you" ? (pendingAt ?? null) : undefined,
+        info.state.kind === "waits-on-you" ? (pendingAt ?? null) : undefined,
       );
   const menuItems = rowMenuItems({
     thread,
@@ -292,7 +290,7 @@ export const ThreadRowView = memo(function ThreadRowView({
     : {};
 
   const chip = row.chip;
-  const indent = rowIndent(row.depth, controller.nesting);
+  const indent = rowIndent(row.depth);
   const title = titleTreatment(row.depth, { unread: info.unread, active: isActive });
   const twoLines = controller.comfortable || info.note !== null;
   // A parent keeps full colour so its children read as the quieter ones.
@@ -342,10 +340,8 @@ export const ThreadRowView = memo(function ThreadRowView({
         dropState === "blocked" && "ring-1 ring-inset ring-destructive/60",
         dropState === "before" && "shadow-[inset_0_2px_0_0_var(--sidebar-ring)]",
         dropState === "after" && "shadow-[inset_0_-2px_0_0_var(--sidebar-ring)]",
-        stickyTop !== null && "sticky z-10 bg-sidebar",
-        stickyTop !== null && isActive && "bg-state-active",
       )}
-      style={{ paddingLeft: indent, top: stickyTop ?? undefined }}
+      style={{ paddingLeft: indent }}
     >
       <a
         ref={anchor}
@@ -363,7 +359,7 @@ export const ThreadRowView = memo(function ThreadRowView({
         }}
         className="absolute inset-0 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring"
       />
-      <RowRails rails={row.rails} nesting={controller.nesting} />
+      <RowRails rails={row.rails} />
       <span className="pointer-events-none relative flex size-4 shrink-0 items-center justify-center">{stateSlot}</span>
       {row.nested ? (
         // Tight against the title, and over the row's gap, so it adds 8px.
@@ -490,7 +486,14 @@ export const ThreadRowView = memo(function ThreadRowView({
             </kbd>
           ) : (
             <>
-              {time !== null ? (
+              {row.homeGroupLabel !== null ? (
+                <span
+                  title={`In ${row.homeGroupLabel}`}
+                  className={cn("pointer-events-none max-w-24 truncate text-[11px] text-muted-foreground transition-opacity", fadeClass)}
+                >
+                  {row.homeGroupLabel}
+                </span>
+              ) : time !== null ? (
                 <span
                   title={time.label}
                   aria-label={time.label}