beadcyte 0.4.0

package/src/web/components/BeadsGrid.vue

@@ -0,0 +1,468 @@
+<script setup lang="ts">
+// BeadsGrid.vue — DOM card grid view of beads, grouped by the same
+// rules as the Gantt chart. Each bead renders as a card with id,
+// title, priority, status, and assignee. Group headers show the
+// same progress chip as the Gantt.
+//
+// Uses the same ViewModel prop as BeadsGantt so the grouping,
+// filtering, and truncation are consistent.
+
+import { computed } from "vue";
+import type { ViewModel, GroupBy } from "../view-model";
+import { useBeadsStore } from "../store";
+import PriorityChip from "./PriorityChip.vue";
+import TypeChip from "./TypeChip.vue";
+import { initialsOf, colorsFor } from "../avatar";
+import { Bot, CircleHelp, Pin } from "@lucide/vue";
+
+const props = defineProps<{
+  vm: ViewModel | null;
+}>();
+
+const store = useBeadsStore();
+
+const groupBy = computed<GroupBy>(() => store.groupBy);
+
+// "none" is one synthetic bucket with nothing to label: the header, its
+// progress chip and the group border all go, leaving a flat card list.
+const isUngrouped = computed(() => store.groupBy === "none");
+
+const blockedIds = computed(() => store.blockedBeadIds);
+const readyNowIds = computed(() => store.readyNowBeadIds);
+const overCapAssignees = computed(() => store.overCapAssignees);
+
+function isGroupOverCap(gid: string): boolean {
+  if (!store.highlights["over-cap"]) return false;
+  if (store.groupBy !== "assignee") return false;
+  return overCapAssignees.value.has(gid);
+}
+
+function statusClass(status: string): string {
+  return `status-${status.replace(/_/g, "-")}`;
+}
+
+function priorityColor(priority: number): string {
+  switch (priority) {
+    case 0:
+      return "var(--c-danger)";
+    case 1:
+      return "var(--c-warning-strong)";
+    case 2:
+      return "var(--c-warning)";
+    case 3:
+      return "var(--c-accent)";
+    default:
+      return "var(--c-closed-noship)";
+  }
+}
+
+const watched = computed(() => store.watchedSet);
+const isWatched = (id: string) => watched.value.has(id);
+
+// When filtering to a person, beads that are only *inferred* to be theirs
+// still belong in the result — that's what the chart shows — but they're a
+// guess, so they recede rather than sitting level with recorded work.
+const assigneeFilterActive = computed(
+  () => (store.filters.assignees?.length ?? 0) > 0,
+);
+const isInferredMatch = (row: { syntheticAssignee: boolean }) =>
+  assigneeFilterActive.value && row.syntheticAssignee;
+
+/** The bead behind a group, when the group *is* a bead — epic grouping
+ *  only, and never a "__" placeholder bucket. */
+function groupBeadId(gid: string): string | null {
+  if (store.groupBy !== "epic") return null;
+  if (gid.startsWith("__")) return null;
+  return gid;
+}
+
+/** An assignee lane's header is a handle: it opens that person (bp-67g.43). */
+function groupPerson(gid: string): string | null {
+  if (store.groupBy !== "assignee") return null;
+  if (gid.startsWith("__")) return null;
+  return gid;
+}
+
+const isGroupOpenable = (gid: string) => !!groupBeadId(gid) || !!groupPerson(gid);
+
+function openGroupBead(gid: string) {
+  const id = groupBeadId(gid);
+  if (id) return store.openBead(id);
+  const who = groupPerson(gid);
+  if (who) store.openPerson(who);
+}
+
+function onBeadClick(beadId: string) {
+  store.openBead(beadId);
+}
+
+const progressFraction = (p: { closed: number; total: number }): number =>
+  p.total > 0 ? p.closed / p.total : 0;
+</script>
+
+<template>
+  <div class="beads-grid" v-if="vm">
+    <div
+      v-for="g in vm.groups"
+      :key="g.id"
+      class="grid-group"
+      :class="{
+        'is-ungrouped': isUngrouped,
+        'is-over-cap': isGroupOverCap(g.id),
+      }"
+    >
+      <div v-if="!isUngrouped" class="group-header">
+        <span
+          class="group-label"
+          :class="{ 'is-openable': isGroupOpenable(g.id) }"
+          :title="groupBeadId(g.id) ? `Open ${g.id}` : groupPerson(g.id) ? `Show ${g.id}` : g.label"
+          @click.stop="openGroupBead(g.id)"
+        >{{ g.label }}</span>
+        <Pin v-if="isWatched(g.id)" class="icon watch-pin" />
+        <span v-if="isGroupOverCap(g.id)" class="over-cap-badge">⚠ over cap</span>
+        <span v-if="g.progress.total > 0" class="progress-chip">
+          {{ g.progress.closed }}/{{ g.progress.total }}
+        </span>
+        <span class="group-count">{{ g.rowCount }} bead{{ g.rowCount === 1 ? "" : "s" }}</span>
+      </div>
+
+      <div class="grid-cards">
+        <div
+          v-for="row in vm.rows"
+          :key="row.beadId"
+          v-show="row.groupId === g.id"
+          class="grid-card"
+          :class="{
+            'is-inferred-match': isInferredMatch(row),
+            'hl-blocked': blockedIds.has(row.beadId),
+            'hl-ready-now': readyNowIds.has(row.beadId),
+            'is-open': store.openBeadId === row.beadId,
+          }"
+          @click="onBeadClick(row.beadId)"
+          @contextmenu.prevent="store.openContextMenu(row.beadId, $event.clientX, $event.clientY)"
+        >
+          <div class="card-head">
+            <code class="card-id">{{ row.beadId }}</code>
+            <PriorityChip :priority="row.priority" />
+            <span class="pill" :class="statusClass(row.status)">
+              {{ row.status.replace(/_/g, " ") }}
+            </span>
+            <Pin v-if="isWatched(row.beadId)" class="icon watch-pin" />
+          </div>
+          <div class="card-title" :title="row.title">{{ row.title }}</div>
+          <div class="card-meta">
+            <TypeChip :type="row.issueType" />
+            <!-- Three states, each with its own glyph. A recorded assignee
+                 gets their colour and initials; an inferred one gets a bot
+                 and no colour, because we don't actually know it's them. -->
+            <!-- The handle leads to that person's picture on incytes
+                 (bp-67g.43); stopped so the card does not also open. -->
+            <span
+              v-if="row.assignee && !row.syntheticAssignee"
+              class="assignee is-link"
+              :title="`Show ${row.assignee}`"
+              @click.stop="store.openPerson(row.assignee)"
+            >
+              <span
+                class="assignee-chip"
+                :style="{
+                  background: colorsFor(row.assignee).bg,
+                  color: colorsFor(row.assignee).fg,
+                }"
+              >{{ initialsOf(row.assignee) }}</span>
+              <span class="assignee-handle">{{ row.assignee }}</span>
+            </span>
+            <span
+              v-else-if="row.assignee"
+              class="assignee is-inferred is-link"
+              :title="`${row.assignee} — inferred by the scheduler, not recorded on the bead. Show ${row.assignee}`"
+              @click.stop="store.openPerson(row.assignee)"
+            >
+              <span class="assignee-chip"><Bot class="icon" /></span>
+              <span class="assignee-handle">{{ row.assignee }}</span>
+            </span>
+            <span v-else class="assignee is-unassigned" title="No assignee">
+              <span class="assignee-chip"><CircleHelp class="icon" /></span>
+              <span class="assignee-handle">unassigned</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <p v-if="vm.rows.length === 0" class="empty-state">
+      No beads match the current filters and window.
+    </p>
+  </div>
+</template>
+
+<style>
+.beads-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px 20px;
+  background: var(--c-bg);
+  border: 1px solid var(--c-border);
+  border-radius: 4px;
+}
+
+/* flex: none is load-bearing. A flex item's automatic minimum size is
+   content-based ONLY while its overflow is visible; `overflow: hidden` here
+   (which rounds the corners over the header) drops that floor to zero, so
+   every group would shrink toward nothing and spill its header and cards
+   over the group below. Invisible until the grid holds more than fits. */
+.grid-group {
+  flex: none;
+  border: 1px solid var(--c-border);
+  border-radius: 4px;
+  overflow: hidden;
+  transition: opacity 0.12s ease-out;
+}
+
+/* Ungrouped: no header, so the frame around a single bucket is just a box
+   drawn round the whole list. Drop it and let the cards stand alone. */
+.grid-group.is-ungrouped {
+  border: none;
+  border-radius: 0;
+}
+
+.grid-group.is-over-cap {
+  border-color: var(--c-danger);
+}
+
+.beads-grid .watch-pin {
+  color: var(--c-accent);
+  flex: none;
+}
+
+/* Only a group backed by a real bead opens; a facet value must not look
+   like a link. */
+.beads-grid .group-label.is-openable {
+  cursor: pointer;
+}
+
+.beads-grid .group-label.is-openable:hover {
+  text-decoration: underline;
+}
+
+.beads-grid .group-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--c-border);
+  background: oklch(from var(--c-border) l c h / 60%);
+  user-select: none;
+  flex-wrap: wrap;
+}
+
+.beads-grid .group-header:hover {
+  background: oklch(from var(--c-border) l c h / 90%);
+}
+
+/* Wraps rather than ellipsising: the header is a flex row that already
+   wraps, and an epic's full title is worth the second line. */
+.beads-grid .group-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--c-epic);
+  overflow-wrap: anywhere;
+}
+
+.beads-grid .over-cap-badge {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--c-danger);
+}
+
+.beads-grid .progress-chip {
+  font-size: 10px;
+  font-family: ui-monospace, monospace;
+  color: var(--c-dim);
+  padding: 1px 6px;
+  border: 1px solid var(--c-border);
+  border-radius: 2px;
+  background: var(--c-bg);
+}
+
+.beads-grid .group-count {
+  font-size: 10px;
+  color: var(--c-dim);
+  margin-left: auto;
+}
+
+.grid-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 8px;
+  padding: 8px;
+}
+
+/* The open bead is the keyboard cursor (bp-67g.45): marked in the view too. */
+.grid-card.is-open {
+  outline: 1px solid var(--c-accent);
+  outline-offset: -1px;
+}
+
+.grid-card {
+  background: var(--c-panel);
+  border: 1px solid var(--c-border);
+  border-radius: 4px;
+  padding: 10px 12px;
+  cursor: pointer;
+  transition: border-color 0.08s ease-out, background 0.08s ease-out;
+}
+
+/* Matched only by an inferred assignment: present, but visibly a guess. */
+.grid-card.is-inferred-match {
+  opacity: var(--o-inferred);
+}
+
+.grid-card.is-inferred-match:hover {
+  opacity: 1;
+}
+
+.grid-card:hover {
+  border-color: var(--c-accent);
+  background: var(--c-accent-wash);
+}
+
+.grid-card.hl-blocked {
+  border-left: 3px solid var(--c-danger);
+}
+
+.grid-card.hl-ready-now {
+  border-left: 3px solid var(--c-accent);
+  box-shadow: 0 0 4px oklch(from var(--c-accent) l c h / 30%);
+}
+
+.beads-grid .card-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 4px;
+}
+
+.beads-grid .card-id {
+  color: var(--c-accent);
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+}
+
+/* Wrap to at most three lines. Unclamped, one long title would stretch its
+   whole grid row; clamped, cards stay comparable in height and the ellipsis
+   still signals there's more. Unlike a character cap this responds to the
+   actual column width. */
+.beads-grid .card-title {
+  font-size: 12px;
+  color: var(--c-text);
+  margin-bottom: 6px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}
+
+/* Assignee. A recorded assignee carries their own hashed colour; the two
+   uncertain states drop the colour entirely and mute down, so a guess never
+   competes with a fact for attention. The glyph says which kind it is: a bot
+   for a scheduler inference, a question mark for nobody at all. */
+.beads-grid .assignee {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: var(--c-dim);
+  min-width: 0;
+}
+
+.beads-grid .assignee-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  flex: none;
+}
+
+.beads-grid .assignee.is-link {
+  cursor: pointer;
+}
+
+.beads-grid .assignee.is-link:hover .assignee-handle {
+  color: var(--c-accent);
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+}
+
+.beads-grid .assignee-handle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.beads-grid .assignee.is-inferred,
+.beads-grid .assignee.is-unassigned {
+  opacity: 0.6;
+}
+
+.beads-grid .assignee.is-inferred .assignee-chip,
+.beads-grid .assignee.is-unassigned .assignee-chip {
+  background: transparent;
+  color: var(--c-dim);
+}
+
+/* The chip is a 16px box; the glyph wants to fill it rather than sit at the
+   inherited text size. */
+.beads-grid .assignee-chip .icon {
+  width: 13px;
+  height: 13px;
+}
+
+.beads-grid .card-meta {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.beads-grid .pill {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 2px;
+  border: 1px solid var(--c-border);
+  color: var(--c-dim);
+  text-transform: lowercase;
+}
+
+.beads-grid .pill.status-closed {
+  color: var(--c-shipped);
+  border-color: var(--c-shipped-stroke);
+}
+
+.beads-grid .pill.status-in-progress {
+  color: var(--c-in-progress);
+  border-color: var(--c-in-progress);
+}
+
+.beads-grid .pill.status-deferred {
+  color: var(--c-dim);
+}
+
+.beads-grid .empty-state {
+  color: var(--c-dim);
+  font-size: 12px;
+  text-align: center;
+  padding: 24px;
+  margin: 0;
+}
+</style>