beadcyte 0.4.0

package/src/web/components/OptionsMenu.vue

@@ -0,0 +1,825 @@
+<script setup lang="ts">
+// OptionsMenu.vue — the app's one options surface.
+//
+// Owns the project registry (add / rename / forget / reorder / switch) and
+// the refresh controls. bp-67g.14 moves the theme and style controls in
+// here too, rather than each growing its own menu.
+//
+// Click-toggled rather than hover-opened, unlike the watch list: this holds
+// text inputs and destructive-looking actions, so it must not vanish when
+// the pointer strays.
+//
+// Paths are TYPED, not picked, and that is not an oversight. No browser API
+// hands out an absolute filesystem path: showDirectoryPicker() returns a
+// handle whose prototype has getDirectoryHandle/getFileHandle/removeEntry/
+// resolve/entries/keys/values and no path at all (resolve() is relative to
+// another handle), and <input webkitdirectory> gives webkitRelativePath,
+// relative to whatever was picked. The server needs an absolute path, so a
+// native picker cannot supply one. A real picker would mean a server-side
+// directory-listing endpoint, which is precisely the filesystem-probing
+// oracle the registration allowlist exists to close (see src/projects.mjs).
+// Decided: keep typed paths, with validation and per-reason messages.
+
+import { computed, nextTick, ref, watch } from "vue";
+import {
+  Settings,
+  Plus,
+  X,
+  ChevronUp,
+  ChevronDown,
+  RefreshCw,
+  Check,
+  Sun,
+  Moon,
+  Monitor,
+} from "@lucide/vue";
+import { useBeadsStore } from "../store";
+import { REFRESH_CHOICES } from "../refresh";
+import { useTheme } from "../composables/useTheme";
+import { STYLE_NAMES, STYLE_LABELS, THEME_MODES, type ThemeMode } from "../theme";
+import { REFUSAL_TEXT } from "../projects-text";
+
+const store = useBeadsStore();
+
+const theme = useTheme();
+
+// Get version from environment variables
+const version = import.meta.env.VITE_BEADCYTE_VERSION || 'unknown';
+
+// Explicit three-way rather than a cycling button: with 'system' in the set
+// a single toggle cannot show which of the three is active, and "follows the
+// OS" is a different statement from "dark".
+const MODE_ICON: Record<ThemeMode, typeof Sun> = {
+  light: Sun,
+  dark: Moon,
+  system: Monitor,
+};
+
+const open = ref(false);
+// "," asks for the menu through the store (bp-67g.45).
+watch(() => store.optionsRequests, () => { open.value = true; });
+const newPath = ref("");
+const newLabel = ref("");
+const addError = ref<string | null>(null);
+const adding = ref(false);
+const renamingId = ref<string | null>(null);
+const renameText = ref("");
+// The form is the rare action here; switching projects is the common one.
+// Collapsed by default so the list is what the menu leads with.
+const addOpen = ref(false);
+
+const projects = computed(() => store.projects);
+
+/**
+ * Why a registry entry is unusable against the CURRENT server, if it is.
+ * The reconcile in loadProjects() re-registers everything the server has
+ * forgotten; anything that still fails validation is dead until the
+ * directory comes back, and saying so here is what keeps the row from
+ * being a click that 403s.
+ */
+function unavailableReason(path: string): string | null {
+  const code = store.unavailableProjects[path];
+  if (!code) return null;
+  return REFUSAL_TEXT[code] ?? code;
+}
+const activeId = computed(() => store.activeProject?.id ?? null);
+
+async function submitAdd() {
+  const path = newPath.value.trim();
+  if (!path || adding.value) return;
+  adding.value = true;
+  addError.value = null;
+  const result = await store.addProjectByPath(path, newLabel.value);
+  adding.value = false;
+  if (result.ok) {
+    newPath.value = "";
+    newLabel.value = "";
+    addOpen.value = false;
+  } else {
+    addError.value = REFUSAL_TEXT[result.reason] ?? result.reason;
+  }
+}
+
+function startRename(id: string, current: string) {
+  renamingId.value = id;
+  renameText.value = current;
+}
+
+function commitRename() {
+  if (renamingId.value) store.renameProject(renamingId.value, renameText.value);
+  renamingId.value = null;
+}
+
+// Closing discards a half-typed path rather than keeping it to reappear
+// later with no context.
+watch(open, (isOpen) => {
+  if (!isOpen) {
+    addError.value = null;
+    renamingId.value = null;
+    addOpen.value = false;
+  }
+});
+
+// Focus the path field when the form appears, so the button-then-type flow
+// doesn't need a second click.
+const pathInput = ref<HTMLInputElement | null>(null);
+watch(addOpen, async (isOpen) => {
+  if (!isOpen) {
+    addError.value = null;
+    return;
+  }
+  await nextTick();
+  pathInput.value?.focus();
+});
+</script>
+
+<template>
+  <div class="options-menu">
+    <button
+      type="button"
+      class="options-trigger"
+      :class="{ 'is-open': open }"
+      :aria-expanded="open"
+      aria-label="Options"
+      title="Options"
+      @click="open = !open"
+    >
+      <Settings class="icon" />
+    </button>
+
+    <!-- Backdrop closes on an outside click without swallowing the click
+         that opened it. -->
+    <div v-if="open" class="options-backdrop" @click="open = false" />
+
+    <section v-if="open" class="options-panel" aria-label="Options">
+      <h3>Projects</h3>
+      <p v-if="!projects.length" class="options-empty">
+        No projects registered yet.
+      </p>
+      <ul v-else class="project-list">
+        <li
+          v-for="(p, i) in projects"
+          :key="p.id"
+          :class="{
+            'is-active': p.id === activeId,
+            'is-unavailable': !!unavailableReason(p.path),
+          }"
+        >
+          <button
+            type="button"
+            class="project-pick"
+            :aria-current="p.id === activeId"
+            :disabled="!!unavailableReason(p.path)"
+            :title="unavailableReason(p.path) ?? p.path"
+            @click="store.setActiveProject(p.id)"
+          >
+            <Check v-if="p.id === activeId" class="icon pick-tick" />
+            <span v-else class="pick-tick-spacer" />
+            <span v-if="renamingId !== p.id" class="project-label">{{ p.label }}</span>
+            <input
+              v-else
+              v-model="renameText"
+              class="rename-input"
+              @click.stop
+              @keydown.enter="commitRename"
+              @keydown.esc="renamingId = null"
+              @blur="commitRename"
+            />
+            <code class="project-path">{{ p.path }}</code>
+            <span v-if="unavailableReason(p.path)" class="project-unavailable">
+              unavailable — {{ unavailableReason(p.path) }}
+            </span>
+          </button>
+          <div class="project-actions">
+            <button
+              type="button"
+              :disabled="i === 0"
+              aria-label="Move up"
+              title="Move up"
+              @click="store.moveProject(p.id, -1)"
+            ><ChevronUp class="icon" /></button>
+            <button
+              type="button"
+              :disabled="i === projects.length - 1"
+              aria-label="Move down"
+              title="Move down"
+              @click="store.moveProject(p.id, 1)"
+            ><ChevronDown class="icon" /></button>
+            <button
+              type="button"
+              aria-label="Rename"
+              title="Rename"
+              @click="startRename(p.id, p.label)"
+            >&#9998;</button>
+            <!-- Wording matters: this forgets a location. Nothing on disk
+                 is touched, and "delete project" would read otherwise. -->
+            <button
+              type="button"
+              class="forget"
+              aria-label="Forget this location"
+              title="Forget this location (nothing on disk is deleted)"
+              @click="store.forgetProject(p.id)"
+            ><X class="icon" /></button>
+          </div>
+        </li>
+      </ul>
+
+      <button
+        v-if="!addOpen"
+        type="button"
+        class="add-toggle"
+        @click="addOpen = true"
+      >
+        <Plus class="icon" /> Add beads project
+      </button>
+
+      <form v-else class="add-project" @submit.prevent="submitAdd">
+        <label class="sr-only" for="np">Project path</label>
+        <input
+          id="np"
+          ref="pathInput"
+          v-model="newPath"
+          class="add-path"
+          placeholder="/absolute/path/to/repo"
+          spellcheck="false"
+          autocomplete="off"
+        />
+        <label class="sr-only" for="nl">Label</label>
+        <input
+          id="nl"
+          v-model="newLabel"
+          class="add-label"
+          placeholder="label (optional)"
+          autocomplete="off"
+        />
+        <button type="submit" :disabled="adding || !newPath.trim()">
+          <Plus class="icon" /> Add
+        </button>
+        <button
+          type="button"
+          class="add-cancel"
+          aria-label="Cancel"
+          title="Cancel"
+          @click="addOpen = false"
+        ><X class="icon" /></button>
+      </form>
+      <p v-if="addError" class="add-error">{{ addError }}</p>
+      <p v-if="addOpen" class="options-note">
+        A browser can't hand out absolute paths, so the path is typed.
+      </p>
+      <p class="options-note">
+        Forgetting a project removes it from this list only — nothing on disk
+        changes.
+      </p>
+
+      <!-- Who "mine" means (bp-egy). Listed from the assignees present in the
+           data, so the stored value is exactly a bd assignee string. -->
+      <h3>Current user</h3>
+      <div class="refresh-row">
+        <label class="sr-only" for="cu">Current user</label>
+        <select
+          id="cu"
+          class="refresh-select"
+          :value="store.currentUser ?? ''"
+          @change="store.setCurrentUser(($event.target as HTMLSelectElement).value || null)"
+        >
+          <option value="">not set</option>
+          <option v-for="a in store.presentAssignees" :key="a" :value="a">{{ a }}</option>
+          <option
+            v-if="store.currentUser && !store.presentAssignees.includes(store.currentUser)"
+            :value="store.currentUser"
+          >{{ store.currentUser }} (not an assignee here)</option>
+        </select>
+      </div>
+      <p class="options-note">
+        Who the MINE buttons mean. Stored in this browser; a shared link
+        carrying <code>?me=</code> overrides it for that load only<template v-if="store.urlUser">, and this page is showing <code>{{ store.urlUser }}</code></template>.
+      </p>
+
+      <h3>Appearance</h3>
+      <div class="mode-row">
+        <div class="segmented mode-toggle" role="group" aria-label="Colour mode">
+          <button
+            v-for="m in THEME_MODES"
+            :key="m"
+            type="button"
+            :class="{ active: theme.mode.value === m }"
+            :aria-pressed="theme.mode.value === m"
+            :aria-label="m"
+            :title="m === 'system' ? 'Follow the OS' : m"
+            @click="theme.setMode(m)"
+          >
+            <component :is="MODE_ICON[m]" class="icon" />
+            <span class="mode-name">{{ m }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Each style shows its OWN colours. The swatch container carries
+           data-preview, and the token blocks in tokens.css/styles-alt.css
+           match that as well as :root[data-style], so a preview renders in
+           a family's palette while a different family is active — and can
+           never drift from the style it claims to show. -->
+      <ul class="style-list">
+        <li v-for="s in STYLE_NAMES" :key="s">
+          <button
+            type="button"
+            class="style-pick"
+            :class="{ 'is-active': theme.style.value === s }"
+            :aria-current="theme.style.value === s"
+            @click="theme.setStyle(s)"
+          >
+            <span class="style-swatch" :data-preview="s" aria-hidden="true">
+              <span class="sw-panel">
+                <span class="sw-bar sw-shipped" />
+                <span class="sw-bar sw-progress" />
+                <span class="sw-bar sw-future" />
+              </span>
+            </span>
+            <span class="style-name">{{ STYLE_LABELS[s] }}</span>
+            <Check v-if="theme.style.value === s" class="icon pick-tick" />
+          </button>
+        </li>
+      </ul>
+      <p class="options-note">
+        Stored in this browser. <code>?theme=</code> and <code>?fx=</code>
+        override either for one visit without saving.
+      </p>
+
+      <h3>Refresh</h3>
+      <div class="refresh-row">
+        <label class="sr-only" for="ri">Refresh interval</label>
+        <select
+          id="ri"
+          class="refresh-select"
+          :value="String(store.pollIntervalMs)"
+          @change="store.setPollInterval(Number(($event.target as HTMLSelectElement).value))"
+        >
+          <option v-for="c in REFRESH_CHOICES" :key="c.ms" :value="String(c.ms)">
+            {{ c.label }}
+          </option>
+        </select>
+        <button
+          type="button"
+          class="refresh-now"
+          :disabled="store.loading"
+          @click="store.fetch()"
+        >
+          <RefreshCw class="icon" /> Refresh now
+        </button>
+      </div>
+      <p class="options-note">
+        Stored in this browser. Every poll shells out to <code>bd</code>, so
+        the default is slow.
+      </p>
+
+      <!-- The whole panel is one <section>, and every group is an <h3> plus
+           its own content — the version block arrived wrapped in a <div>
+           nested inside Refresh, which made "About" read as a sub-heading of
+           the poll interval. Flattened to match its siblings, and using the
+           panel's existing .options-note rather than an unstyled class. -->
+      <h3>Keyboard</h3>
+      <p class="options-note">
+        Press <kbd>?</kbd> anywhere for the shortcuts — single letters, and
+        nothing fires while you are typing.
+        <button type="button" class="link-btn" @click="open = false; store.openHelp()">Show them</button>
+      </p>
+
+      <h3>Walkthrough</h3>
+      <p class="options-note">
+        The first-run tour: bar kinds, the projection being a model, triage, the views.
+        <button type="button" class="link-btn open-walkthrough" @click="open = false; store.openWalkthrough()">Show it again</button>
+      </p>
+
+      <h3>About</h3>
+      <p class="options-note">
+        <button type="button" class="link-btn about-changelog" @click="open = false; store.openChangelog()">What changed</button>
+        — the changelog, generated from the tracker and shipped with this build.
+      </p>
+      <p class="options-note">
+        beadcyte <code>{{ version }}</code> — also available as
+        <code>beadcyte --version</code>.
+      </p>
+    </section>
+  </div>
+</template>
+
+<style>
+.options-menu {
+  position: relative;
+}
+
+.options-trigger {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  box-sizing: border-box;
+  padding: 3px 7px;
+  line-height: 16px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  background: var(--c-panel-2);
+  color: var(--c-dim);
+  cursor: pointer;
+}
+
+.options-trigger .icon {
+  width: 16px;
+  height: 16px;
+}
+
+.options-trigger:hover,
+.options-trigger.is-open {
+  color: var(--c-accent);
+  border-color: var(--c-accent);
+}
+
+/* Catches an outside click. Transparent rather than a scrim: this is a
+   settings popover, not a modal, and dimming the whole app for it would
+   overstate the interruption. */
+.options-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 450;
+}
+
+.options-panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 460;
+  width: min(92vw, 560px);
+  max-height: min(78vh, 640px);
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 12px 14px 14px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius);
+  background: var(--c-panel);
+  box-shadow: var(--shadow-pop);
+  text-align: left;
+}
+
+.options-panel h3 {
+  margin: 10px 0 8px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--c-dim);
+  font-weight: 600;
+}
+
+.options-panel h3:first-child {
+  margin-top: 0;
+}
+
+.project-list {
+  list-style: none;
+  margin: 0 0 10px;
+  padding: 0;
+}
+
+.project-list li {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: var(--radius-sm);
+}
+
+.project-list li.is-active {
+  background: var(--c-accent-wash);
+}
+
+.project-pick {
+  display: flex;
+  align-items: baseline;
+  gap: 7px;
+  flex: 1;
+  min-width: 0;
+  padding: 5px 7px;
+  border: none;
+  background: transparent;
+  color: var(--c-text);
+  font: inherit;
+  font-size: 11px;
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+
+.project-pick:hover {
+  background: var(--c-panel-2);
+}
+
+/* A path the current server won't admit. Dimmed and not clickable, because
+   the only thing clicking it could do is 403 — but still listed, since the
+   directory may come back and forgetting it is the user's call. The row
+   keeps the forget/rename actions for exactly that reason. */
+.project-list li.is-unavailable .project-label,
+.project-list li.is-unavailable .project-path {
+  opacity: var(--o-dim-label);
+}
+
+.project-pick:disabled {
+  cursor: default;
+}
+
+.project-pick:disabled:hover {
+  background: transparent;
+}
+
+.project-unavailable {
+  color: var(--c-warning-strong);
+  font-size: 10px;
+  flex: none;
+  white-space: nowrap;
+}
+
+.pick-tick {
+  color: var(--c-accent);
+  flex: none;
+  align-self: center;
+}
+
+.pick-tick-spacer {
+  width: 1.15em;
+  flex: none;
+}
+
+.project-label {
+  font-weight: 600;
+  flex: none;
+}
+
+/* Plain LTR. `direction: rtl` would ellipsize from the start — keeping the
+   informative tail of a long path — but "/" is bidi-neutral, so RTL
+   reorders the leading slash to the end and "/home/anon/x" renders as
+   "home/anon/x/". The label carries identity and the row's title attribute
+   carries the full path, so a right-side ellipsis is the honest trade. */
+.project-path {
+  color: var(--c-dim);
+  font-size: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.rename-input {
+  font: inherit;
+  font-size: 11px;
+  padding: 1px 4px;
+  border: 1px solid var(--c-accent);
+  border-radius: 2px;
+  background: var(--c-bg);
+  color: var(--c-text);
+  width: 12ch;
+}
+
+.project-actions {
+  display: flex;
+  gap: 1px;
+  flex: none;
+}
+
+.project-actions button {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 4px;
+  border: none;
+  background: transparent;
+  color: var(--c-dim);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  border-radius: 2px;
+}
+
+.project-actions button:hover:not(:disabled) {
+  color: var(--c-accent);
+  background: var(--c-panel-2);
+}
+
+.project-actions button:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.project-actions .forget:hover {
+  color: var(--c-danger);
+}
+
+.add-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 9px;
+  border: 1px dashed var(--c-border-strong);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--c-dim);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.add-toggle:hover {
+  color: var(--c-accent);
+  border-color: var(--c-accent);
+  border-style: solid;
+}
+
+.add-cancel {
+  padding: 4px 5px !important;
+  color: var(--c-dim) !important;
+}
+
+.add-project {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.add-project input {
+  font: inherit;
+  font-size: 11px;
+  padding: 4px 6px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  background: var(--c-bg);
+  color: var(--c-text);
+}
+
+.add-path {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--font-mono);
+}
+
+.add-label {
+  width: 13ch;
+}
+
+.add-project button,
+.refresh-now {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  background: var(--c-panel-2);
+  color: var(--c-text);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.add-project button:disabled,
+.refresh-now:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.add-error {
+  margin: 6px 0 0;
+  font-size: 11px;
+  color: var(--c-danger);
+}
+
+.options-empty,
+.options-note {
+  margin: 6px 0 0;
+  font-size: 10px;
+  color: var(--c-dim);
+  line-height: 1.5;
+}
+
+.mode-row {
+  margin-bottom: 8px;
+}
+
+.mode-toggle button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 9px;
+}
+
+.mode-name {
+  font-size: 11px;
+}
+
+/* Two columns: twelve styles as a single column was a menu-length scroll. The
+   swatch carries the identity, so a short label beside it is enough. */
+.style-list {
+  list-style: none;
+  margin: 0 0 6px;
+  padding: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3px 6px;
+}
+
+.style-pick {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 4px 7px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--c-text);
+  font: inherit;
+  font-size: 11px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.style-pick:hover {
+  background: var(--c-panel-2);
+}
+
+.style-pick.is-active {
+  border-color: var(--c-accent);
+  background: var(--c-accent-wash);
+}
+
+.style-name {
+  font-weight: 600;
+}
+
+.style-pick .pick-tick {
+  margin-left: auto;
+}
+
+/* A miniature of the app: ground, panel, three encoding bars. Reads as
+   "this is what that looks like" far faster than a row of colour chips. */
+.style-swatch {
+  display: block;
+  width: 62px;
+  height: 26px;
+  flex: none;
+  padding: 4px;
+  border: 1px solid var(--c-border);
+  border-radius: 3px;
+  background: var(--c-bg);
+}
+
+.sw-panel {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 100%;
+  padding: 0 3px;
+  border-radius: 2px;
+  background: var(--c-panel);
+}
+
+.sw-bar {
+  height: 6px;
+  flex: 1;
+  border-radius: 2px;
+}
+
+.sw-shipped { background: var(--c-shipped); }
+.sw-progress { background: var(--c-in-progress); }
+.sw-future { background: var(--c-future); }
+
+.refresh-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.refresh-select {
+  font: inherit;
+  font-size: 11px;
+  padding: 4px 6px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  background: var(--c-panel-2);
+  color: var(--c-text);
+}
+
+.options-panel kbd {
+  display: inline-block;
+  padding: 0 5px;
+  border: 1px solid var(--c-border-strong);
+  border-bottom-width: 2px;
+  border-radius: 3px;
+  background: var(--c-lift);
+  font-family: ui-monospace, monospace;
+  font-size: 10px;
+}
+
+.options-panel .link-btn {
+  all: unset;
+  cursor: pointer;
+  color: var(--c-accent);
+  text-decoration: underline dotted;
+  margin-left: 4px;
+}
+</style>