@gperezmz/bb-plugin-thread-glance 0.1.2

package/dist/server.meta.json

@@ -0,0 +1,11 @@
+{
+  "sdkMajor": 0,
+  "sdkVersion": "0.5.9",
+  "artifactFormatVersion": 1,
+  "pluginId": "thread-glance",
+  "pluginVersion": "0.1.2",
+  "builtWith": {
+    "bbVersion": "0.43.4",
+    "pluginSdkVersion": "0.5.9"
+  }
+}

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

@@ -0,0 +1,299 @@
+// Dialogs the list opens: customize, new section, confirmations and the
+// compact details drawer. Dialogs become drawers on compact.
+import { useEffect, useState } from "react";
+import { experimental_Icon as Icon } from "@get-bb/plugin-sdk/app";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { ICONS } from "../icons";
+
+export interface CustomizeItem {
+  id: string;
+  label: string;
+  hidden: boolean;
+  /** Pinned can't be hidden. */
+  hideable: boolean;
+}
+
+/** "Customize list": eye toggles and reorder. */
+export function CustomizeDialog({
+  open,
+  items,
+  onOpenChange,
+  onToggleHidden,
+  onMove,
+}: {
+  open: boolean;
+  items: readonly CustomizeItem[];
+  onOpenChange(open: boolean): void;
+  onToggleHidden(id: string): void;
+  onMove(id: string, direction: -1 | 1): void;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle>Customize list</DialogTitle>
+          <DialogDescription>Hidden groups move into More. Their counters still show there.</DialogDescription>
+        </DialogHeader>
+        <ul className="flex flex-col gap-0.5" aria-label="Groups">
+          {items.map((item, index) => (
+            <li
+              key={item.id}
+              data-sidebar-customize-item={item.id}
+              className="flex items-center gap-1 rounded-md py-0.5 pl-2 pr-1 text-sm hover:bg-accent"
+            >
+              <span className={cn("min-w-0 flex-1 truncate", item.hidden && "text-muted-foreground")}>{item.label}</span>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7"
+                aria-label={`Move ${item.label} up`}
+                disabled={index === 0}
+                onClick={() => onMove(item.id, -1)}
+              >
+                <Icon name={ICONS.moveUp} aria-hidden />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7"
+                aria-label={`Move ${item.label} down`}
+                disabled={index === items.length - 1}
+                onClick={() => onMove(item.id, 1)}
+              >
+                <Icon name={ICONS.collapse} aria-hidden />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7"
+                aria-pressed={!item.hidden}
+                aria-label={item.hidden ? `Show ${item.label}` : `Hide ${item.label}`}
+                disabled={!item.hideable}
+                onClick={() => onToggleHidden(item.id)}
+              >
+                <Icon name={item.hidden ? ICONS.hidden : ICONS.show} aria-hidden />
+              </Button>
+            </li>
+          ))}
+        </ul>
+        <DialogFooter>
+          <Button onClick={() => onOpenChange(false)}>Done</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function NewSectionDialog({
+  open,
+  onOpenChange,
+  onCreate,
+}: {
+  open: boolean;
+  onOpenChange(open: boolean): void;
+  onCreate(name: string): Promise<void>;
+}) {
+  const [name, setName] = useState("");
+  const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    if (open) setName("");
+  }, [open]);
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-sm">
+        <form
+          className="flex flex-col gap-4"
+          onSubmit={async (event) => {
+            event.preventDefault();
+            const trimmed = name.trim();
+            if (trimmed === "") return;
+            setBusy(true);
+            try {
+              await onCreate(trimmed);
+              onOpenChange(false);
+            } finally {
+              setBusy(false);
+            }
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>New section</DialogTitle>
+          </DialogHeader>
+          <Input autoFocus aria-label="Section name" value={name} onChange={(event) => setName(event.target.value)} />
+          <DialogFooter>
+            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={busy || name.trim() === ""}>
+              Create
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function ConfirmDialog({
+  open,
+  title,
+  description,
+  confirmLabel,
+  destructive,
+  onOpenChange,
+  onConfirm,
+}: {
+  open: boolean;
+  title: string;
+  description: string;
+  confirmLabel: string;
+  destructive?: boolean;
+  onOpenChange(open: boolean): void;
+  onConfirm(): void;
+}) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            className={cn(destructive && "bg-destructive text-destructive-foreground hover:bg-destructive/90")}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+export function DetailsDialog({
+  open,
+  title,
+  onOpenChange,
+  children,
+}: {
+  open: boolean;
+  title: string;
+  onOpenChange(open: boolean): void;
+  children: React.ReactNode;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle className="sr-only">{title}</DialogTitle>
+        </DialogHeader>
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/**
+ * "Move…": nest a thread under another, or move it to the top
+ * level, from the keyboard. Arrow keys pick, Enter moves.
+ */
+export function MoveDialog({
+  open,
+  title,
+  targets,
+  query,
+  onQueryChange,
+  onOpenChange,
+  onMove,
+}: {
+  open: boolean;
+  title: string;
+  targets: readonly { parentThreadId: string | null; label: string; detail: string | null }[];
+  query: string;
+  onQueryChange(query: string): void;
+  onOpenChange(open: boolean): void;
+  onMove(parentThreadId: string | null): void;
+}) {
+  const [index, setIndex] = useState(0);
+  useEffect(() => setIndex(0), [query, open]);
+  const choose = (target: (typeof targets)[number] | undefined) => {
+    if (target === undefined) return;
+    onMove(target.parentThreadId);
+    onOpenChange(false);
+  };
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle>Move “{title}”</DialogTitle>
+          <DialogDescription>Nest it under another thread, or move it to the top level.</DialogDescription>
+        </DialogHeader>
+        <Input
+          autoFocus
+          role="combobox"
+          aria-expanded
+          aria-controls="thread-glance-move-targets"
+          aria-activedescendant={targets[index] ? `thread-glance-move-${index}` : undefined}
+          aria-label="Find a thread"
+          placeholder="Find a thread"
+          value={query}
+          onChange={(event) => onQueryChange(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "ArrowDown") {
+              event.preventDefault();
+              setIndex((value) => Math.min(value + 1, targets.length - 1));
+            } else if (event.key === "ArrowUp") {
+              event.preventDefault();
+              setIndex((value) => Math.max(value - 1, 0));
+            } else if (event.key === "Enter") {
+              event.preventDefault();
+              choose(targets[index]);
+            }
+          }}
+        />
+        <ul id="thread-glance-move-targets" role="listbox" aria-label="Move to" className="flex max-h-72 flex-col gap-0.5 overflow-y-auto">
+          {targets.length === 0 ? <li className="px-2 py-1.5 text-sm text-muted-foreground">No matching threads</li> : null}
+          {targets.map((target, position) => (
+            <li
+              key={target.parentThreadId ?? "top"}
+              id={`thread-glance-move-${position}`}
+              role="option"
+              aria-selected={position === index}
+              onMouseEnter={() => setIndex(position)}
+              onClick={() => choose(target)}
+              className={cn(
+                "flex cursor-pointer flex-col rounded-md px-2 py-1.5 text-sm",
+                position === index && "bg-accent",
+              )}
+            >
+              <span className="truncate">{target.label}</span>
+              {target.detail ? <span className="truncate text-xs text-muted-foreground">{target.detail}</span> : null}
+            </li>
+          ))}
+        </ul>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,147 @@
+// The fold rows (`N older` on a group, `N more child threads` on a family)
+// 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";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+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 { RowController } from "./controller";
+import { FlagGlyph } from "./glyphs";
+import { RenameEditor } from "./RenameEditor";
+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.
+  const inFamily = row.scope !== "group";
+  return (
+    <button
+      type="button"
+      aria-expanded={row.expanded}
+      aria-label={ariaLabel}
+      onClick={() => controller.onToggleOlder(row)}
+      className={cn(
+        "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) }}
+    >
+      <RowRails rails={row.rails} nesting={controller.nesting} />
+      {inFamily ? (
+        <span aria-hidden className="inline-flex size-4 shrink-0 items-center justify-center">
+          <Icon name={ICONS.more} className="size-3.5" />
+        </span>
+      ) : (
+        <Icon name={ICONS.expand} aria-hidden className={cn("size-3 transition-transform", row.expanded && "-rotate-90")} />
+      )}
+      {label}
+    </button>
+  );
+});
+
+/** 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 }) {
+  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) }}
+    >
+      <RowRails rails={row.rails} nesting={controller.nesting} />
+      <span aria-hidden className="size-4 shrink-0" />
+      <span>{EMPTY_LEVEL_TEXT}</span>
+    </div>
+  );
+});
+
+export const EnvironmentRowView = memo(function EnvironmentRowView({
+  row,
+  controller,
+  environmentProviders,
+}: {
+  row: EnvironmentRow;
+  controller: RowController;
+  environmentProviders: readonly PluginEnvironmentProvider[];
+}) {
+  const [renaming, setRenaming] = useState(false);
+  const provider =
+    row.environmentProviderId === null
+      ? null
+      : environmentProviders.find((candidate) => candidate.id === row.environmentProviderId) ?? null;
+  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) }}
+    >
+      <RowRails rails={row.rails} nesting={controller.nesting} />
+      <button
+        type="button"
+        aria-expanded={!row.collapsed}
+        aria-label={`${row.collapsed ? "Expand" : "Collapse"} ${row.label} environment, ${row.threadIds.length} threads`}
+        onClick={() => controller.onToggleEnvironment(row.environmentId)}
+        className="absolute inset-0 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring"
+      />
+      <span className="pointer-events-none relative inline-flex size-4 shrink-0 items-center justify-center">
+        {provider !== null ? (
+          <ProviderIcon providerKind="environment" provider={provider} className="size-3.5" />
+        ) : (
+          <Icon name={row.environmentProviderId === null ? ICONS.machine : ICONS.environmentFallback} aria-hidden className="size-3.5" />
+        )}
+      </span>
+      {renaming ? (
+        <RenameEditor
+          initial={row.label}
+          label="Environment name"
+          onSave={(name) => controller.onRenameEnvironment(row.environmentId, name)}
+          onDone={() => setRenaming(false)}
+        />
+      ) : (
+        <span className="pointer-events-none relative min-w-0 flex-1 truncate">{row.label}</span>
+      )}
+      {row.flag !== null ? <FlagGlyph flag={row.flag} className="pointer-events-none relative size-3.5" /> : null}
+      <span className="pointer-events-none relative text-[11px] tabular-nums">{row.threadIds.length}</span>
+      <Icon
+        name={ICONS.expand}
+        aria-hidden
+        className={cn("pointer-events-none relative size-3 transition-transform", !row.collapsed && "rotate-90")}
+      />
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            aria-label="Environment actions"
+            className={cn(ROW_ICON_BUTTON, !controller.compact && "opacity-0 group-hover/row:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100")}
+          >
+            <Icon name={ICONS.more} aria-hidden className="size-4" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem
+            onSelect={() => controller.onNewThreadInEnvironment(row.environmentId, row.projectId, row.sectionId)}
+          >
+            <Icon name={ICONS.newThread} aria-hidden className="size-4" />
+            New thread in environment
+          </DropdownMenuItem>
+          <DropdownMenuItem onSelect={() => setRenaming(true)}>
+            <Icon name={ICONS.rename} aria-hidden className="size-4" />
+            Rename
+          </DropdownMenuItem>
+          <DropdownMenuItem onSelect={() => controller.onArchiveEnvironment(row.environmentId)}>
+            <Icon name={ICONS.archive} aria-hidden className="size-4" />
+            Archive
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+});