PROG-66: alpha-sort name-based filter dropdowns (#29)

* feat(web): PROG-66 alpha-sort name-based filter dropdowns

The board and Agenda filter dropdowns listed their options in store
insertion order, so a long Arc/Product/tag list was unscannable. Sort
name-based options (initiative, product, repo, arc, tag) alphabetically
via a shared sortByName helper. Logical vocabularies — priority (and the
status columns) — keep their meaningful order and are left untouched.

sortByName copies its input before sorting so it's safe to pass a live
store array (e.g. workspace.tags) without reordering the store.

* test(web): PROG-66 cover alphabetical filter-option sort

Unit-test sortByName: case-insensitive alphabetical order and that it
leaves the input array (the store) unmutated.

---------

Co-authored-by: bkennedy <bryan@mysteryexperience.com>

Author: exe-dev-github-integration[bot]

docs/REFERENCE.md

@@ -392,7 +392,9 @@ canonical key — entirely client-side from the loaded workspace (D22).
   statuses; Backlog hides behind a toggle by default. Filters (initiative,
   product, repo, arc, tag, priority) live in URL query params, so any
   filtered board is bookmarkable — this is how per-container boards are
-  covered without existing (D23). The current filter selection is also
+  covered without existing (D23). Name-based filter dropdowns (initiative,
+  product, repo, arc, tag) list their options alphabetically; priority keeps
+  its logical order (PROG-66). The Agenda filters sort the same way. The current filter selection is also
   mirrored to `localStorage` (`progress:board-filters`) and re-applied when the
   board is reopened with a bare URL, so a choice sticks across navigation;
   "Clear filters" clears the memory too (PROG-58). Drag-and-drop reorders cards

src/client/boardFilters.test.ts

@@ -2,7 +2,7 @@
 // is unit-tested here; the end-to-end persistence (navigate away, come back,
 // filter still applied) is covered by e2e/board-filters.spec.ts. Run `bun test`.
 import { describe, expect, it } from "bun:test";
-import { filtersToRestore } from "./boardFilters";
+import { filtersToRestore, sortByName } from "./boardFilters";
 
 describe("filtersToRestore", () => {
   it("restores the saved query when the board opens unfiltered", () => {
@@ -25,3 +25,18 @@ describe("filtersToRestore", () => {
     expect(filtersToRestore("", "")).toBeNull();
   });
 });
+
+// Alphabetical filter-dropdown options (PROG-66).
+describe("sortByName", () => {
+  it("orders items alphabetically by name, case-insensitively", () => {
+    const items = [{ name: "Zebra" }, { name: "apple" }, { name: "Mango" }];
+    expect(sortByName(items).map((i) => i.name)).toEqual(["apple", "Mango", "Zebra"]);
+  });
+
+  it("does not mutate the input (the store array stays in its original order)", () => {
+    const items = [{ name: "b" }, { name: "a" }];
+    const sorted = sortByName(items);
+    expect(items.map((i) => i.name)).toEqual(["b", "a"]);
+    expect(sorted).not.toBe(items);
+  });
+});

src/client/boardFilters.ts

@@ -34,3 +34,12 @@ export function saveBoardFilters(search: string): void {
 export function filtersToRestore(currentSearch: string, saved: string): string | null {
   return !currentSearch && saved ? saved : null;
 }
+
+// Order name-based filter dropdown options alphabetically (PROG-66) so a long
+// Arc / Product / Repo / Initiative / tag list is scannable. Returns a new array
+// (the input may be a live store array, e.g. workspace.tags). Logical
+// vocabularies — status, priority — keep their meaningful order and must NOT use
+// this; their fixed sequence is the order they read in.
+export function sortByName<T extends { name: string }>(items: T[]): T[] {
+  return [...items].sort((a, b) => a.name.localeCompare(b.name));
+}

src/client/pages/Agenda.tsx

@@ -12,6 +12,7 @@
 import { useMemo } from "react";
 import { Link, useLocation, useSearch } from "wouter";
 import type { WireIssue, WireTag, WorkspacePayload } from "../../shared/types";
+import { sortByName } from "../boardFilters";
 import { type AgendaBucket, bucketOf, formatDueDate, relativeDue, todayISO } from "../dates";
 import { STATUS_LABELS } from "../labels";
 import PriorityIndicator from "../PriorityIndicator";
@@ -102,22 +103,26 @@ export default function Agenda({ workspace }: { workspace: WorkspacePayload }) {
         <FilterSelect
           label="Product"
           value={filters.product}
-          options={workspace.products.filter((p) => !p.archivedAt).map((p) => [p.id, p.name])}
+          options={sortByName(workspace.products.filter((p) => !p.archivedAt)).map((p) => [
+            p.id,
+            p.name,
+          ])}
           onChange={(v) => setParam("product", v)}
         />
         <FilterSelect
           label="Arc"
           value={filters.arc}
-          options={workspace.arcs
-            .filter((a) => !a.archivedAt)
-            .filter((a) => !filters.product || a.productId === filters.product)
-            .map((a) => [a.id, a.name])}
+          options={sortByName(
+            workspace.arcs
+              .filter((a) => !a.archivedAt)
+              .filter((a) => !filters.product || a.productId === filters.product),
+          ).map((a) => [a.id, a.name])}
           onChange={(v) => setParam("arc", v)}
         />
         <FilterSelect
           label="Tag"
           value={filters.tag}
-          options={workspace.tags.map((t) => [t.id, t.name])}
+          options={sortByName(workspace.tags).map((t) => [t.id, t.name])}
           onChange={(v) => setParam("tag", v)}
         />
         {filtersActive && (

src/client/pages/Home.tsx

@@ -44,7 +44,7 @@ import {
 } from "../../shared/constants";
 import { rankBetween } from "../../shared/rank";
 import { reorder, type ColumnMap } from "../boardOrder";
-import { filtersToRestore, loadBoardFilters, saveBoardFilters } from "../boardFilters";
+import { filtersToRestore, loadBoardFilters, saveBoardFilters, sortByName } from "../boardFilters";
 import { recentlyCompleted } from "../boardDone";
 import type { WireIssue, WireTag, WorkspacePayload } from "../../shared/types";
 import { openCreateIssue } from "../commands/controller";
@@ -349,42 +349,46 @@ export default function Home({ workspace }: { workspace: WorkspacePayload }) {
         <FilterSelect
           label="Initiative"
           value={filters.initiative}
-          options={workspace.initiatives
-            .filter((i) => !i.archivedAt)
-            .map((i) => [i.id, i.name])}
+          options={sortByName(workspace.initiatives.filter((i) => !i.archivedAt)).map((i) => [
+            i.id,
+            i.name,
+          ])}
           onChange={(v) => setParam("initiative", v)}
         />
         <FilterSelect
           label="Product"
           value={filters.product}
-          options={workspace.products
-            .filter((p) => !p.archivedAt)
-            .filter((p) => !filters.initiative || p.initiativeId === filters.initiative)
-            .map((p) => [p.id, p.name])}
+          options={sortByName(
+            workspace.products
+              .filter((p) => !p.archivedAt)
+              .filter((p) => !filters.initiative || p.initiativeId === filters.initiative),
+          ).map((p) => [p.id, p.name])}
           onChange={(v) => setParam("product", v)}
         />
         <FilterSelect
           label="Repo"
           value={filters.repo}
-          options={workspace.repos
-            .filter((r) => !r.archivedAt)
-            .filter((r) => !filters.product || r.productId === filters.product)
-            .map((r) => [r.id, r.name])}
+          options={sortByName(
+            workspace.repos
+              .filter((r) => !r.archivedAt)
+              .filter((r) => !filters.product || r.productId === filters.product),
+          ).map((r) => [r.id, r.name])}
           onChange={(v) => setParam("repo", v)}
         />
         <FilterSelect
           label="Arc"
           value={filters.arc}
-          options={workspace.arcs
-            .filter((a) => !a.archivedAt)
-            .filter((a) => !filters.product || a.productId === filters.product)
-            .map((a) => [a.id, a.name])}
+          options={sortByName(
+            workspace.arcs
+              .filter((a) => !a.archivedAt)
+              .filter((a) => !filters.product || a.productId === filters.product),
+          ).map((a) => [a.id, a.name])}
           onChange={(v) => setParam("arc", v)}
         />
         <FilterSelect
           label="Tag"
           value={filters.tag}
-          options={workspace.tags.map((t) => [t.id, t.name])}
+          options={sortByName(workspace.tags).map((t) => [t.id, t.name])}
           onChange={(v) => setParam("tag", v)}
         />
         <FilterSelect