From 969ef0efa3532c72d76fff89e74ebc3d25c2abc5 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 4 Mar 2026 08:39:49 -0500
Subject: [PATCH] Add keyboard navigation: e/c/slash shortcuts, j/k list nav,
 focus visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- App.vue: e → edit on viewer pages; / → focus search (custom event); c → focus
  chat on home or navigate to /chat; update shortcuts panel with Lists + Chat sections
- theme.css: add a:focus-visible to focus-ring rules (router-link cards now show
  visible keyboard focus outline)
- SearchBar.vue: expose focus() via defineExpose for cross-component focus dispatch
- NotesListView / TasksListView: j/k vim-style navigation with kb-active-item
  highlight; listen for shortcut:focus-search; cleanup on unmount
- HomeView.vue: listen for shortcut:focus-chat, call chatInputRef.focus()

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/App.vue                  | 43 ++++++++++++++++
 frontend/src/assets/theme.css         |  4 +-
 frontend/src/components/SearchBar.vue |  4 ++
 frontend/src/views/HomeView.vue       | 13 ++++-
 frontend/src/views/NotesListView.vue  | 71 ++++++++++++++++++++++-----
 frontend/src/views/TasksListView.vue  | 64 ++++++++++++++++++++----
 6 files changed, 174 insertions(+), 25 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index b1660db..e041d5f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -95,6 +95,24 @@ function onGlobalKeydown(e: KeyboardEvent) {
     case "t":
       router.push("/tasks/new");
       break;
+    case "e": {
+      const name = router.currentRoute.value.name;
+      if (name === "note-view" || name === "task-view") {
+        router.push(router.currentRoute.value.path + "/edit");
+      }
+      break;
+    }
+    case "/":
+      e.preventDefault();
+      document.dispatchEvent(new CustomEvent("shortcut:focus-search"));
+      break;
+    case "c":
+      if (router.currentRoute.value.name === "home") {
+        document.dispatchEvent(new CustomEvent("shortcut:focus-chat"));
+      } else {
+        router.push("/chat");
+      }
+      break;
   }
 }
 
@@ -193,8 +211,33 @@ onUnmounted(() => {
                 <span class="shortcut-desc">New task</span>
               </div>
             </div>
+            <div class="shortcuts-section">
+              <div class="shortcuts-section-title">Lists</div>
+              <div class="shortcut-row">
+                <kbd class="shortcut-key">/</kbd>
+                <span class="shortcut-desc">Focus search bar</span>
+              </div>
+              <div class="shortcut-row">
+                <kbd class="shortcut-key">j</kbd>
+                <span class="shortcut-key-sep">/</span>
+                <kbd class="shortcut-key">k</kbd>
+                <span class="shortcut-desc">Move down / up</span>
+              </div>
+              <div class="shortcut-row">
+                <kbd class="shortcut-key">Enter</kbd>
+                <span class="shortcut-desc">Open selected item</span>
+              </div>
+              <div class="shortcut-row">
+                <kbd class="shortcut-key">e</kbd>
+                <span class="shortcut-desc">Edit current item (viewer)</span>
+              </div>
+            </div>
             <div class="shortcuts-section">
               <div class="shortcuts-section-title">Chat</div>
+              <div class="shortcut-row">
+                <kbd class="shortcut-key">c</kbd>
+                <span class="shortcut-desc">Focus chat (home) / go to chat</span>
+              </div>
               <div class="shortcut-row">
                 <kbd class="shortcut-key">Enter</kbd>
                 <span class="shortcut-desc">Send message</span>
diff --git a/frontend/src/assets/theme.css b/frontend/src/assets/theme.css
index 2bbe523..712ae3a 100644
--- a/frontend/src/assets/theme.css
+++ b/frontend/src/assets/theme.css
@@ -106,9 +106,11 @@ body {
 input:focus-visible,
 textarea:focus-visible,
 select:focus-visible,
-button:focus-visible {
+button:focus-visible,
+a:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
+  border-radius: var(--radius-sm);
 }
 
 /* Responsive breakpoints: 480px (phone), 768px (tablet), 1024px (desktop) */
diff --git a/frontend/src/components/SearchBar.vue b/frontend/src/components/SearchBar.vue
index 0e525e4..701954c 100644
--- a/frontend/src/components/SearchBar.vue
+++ b/frontend/src/components/SearchBar.vue
@@ -3,16 +3,20 @@ import { ref, watch } from "vue";
 
 const emit = defineEmits<{ search: [query: string] }>();
 const query = ref("");
+const inputRef = ref<HTMLInputElement | null>(null);
 let timeout: ReturnType<typeof setTimeout>;
 
 watch(query, (val) => {
   clearTimeout(timeout);
   timeout = setTimeout(() => emit("search", val), 300);
 });
+
+defineExpose({ focus: () => inputRef.value?.focus() });
 </script>
 
 <template>
   <input
+    ref="inputRef"
     v-model="query"
     type="text"
     placeholder="Search notes..."
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 343b65c..625bdff 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, nextTick } from "vue";
+import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
 import { apiGet } from "@/api/client";
 import type { Note, NoteListResponse } from "@/types/note";
 import type { Task, TaskListResponse } from "@/types/task";
@@ -206,6 +206,17 @@ function onStatusToggle(id: number, status: TaskStatus) {
 // ─── Chat widget ──────────────────────────────────────────────────────────────
 
 const chatInputRef = ref<{ focus: () => void } | null>(null);
+
+function onFocusChatShortcut() {
+  chatInputRef.value?.focus();
+}
+
+onMounted(() => {
+  document.addEventListener("shortcut:focus-chat", onFocusChatShortcut);
+});
+onUnmounted(() => {
+  document.removeEventListener("shortcut:focus-chat", onFocusChatShortcut);
+});
 const chatStore = useChatStore();
 
 chatStore.fetchStatus().then(() => {
diff --git a/frontend/src/views/NotesListView.vue b/frontend/src/views/NotesListView.vue
index 6179e29..4330b40 100644
--- a/frontend/src/views/NotesListView.vue
+++ b/frontend/src/views/NotesListView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, onUnmounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useNotesStore } from "@/stores/notes";
 import SearchBar from "@/components/SearchBar.vue";
@@ -13,6 +13,38 @@ const route = useRoute();
 const router = useRouter();
 const store = useNotesStore();
 
+const searchBarRef = ref<{ focus: () => void } | null>(null);
+const activeIndex = ref(-1);
+
+function onFocusSearch() {
+  searchBarRef.value?.focus();
+}
+
+function onKeydown(e: KeyboardEvent) {
+  const el = document.activeElement;
+  const tag = el ? (el as HTMLElement).tagName : "";
+  const isInput = tag === "INPUT" || tag === "TEXTAREA" || (el as HTMLElement)?.isContentEditable;
+  if (isInput || e.ctrlKey || e.metaKey || e.altKey) return;
+  const count = store.notes.length;
+  if (e.key === "j") {
+    e.preventDefault();
+    activeIndex.value = Math.min(activeIndex.value + 1, count - 1);
+    scrollActiveIntoView();
+  } else if (e.key === "k") {
+    e.preventDefault();
+    activeIndex.value = Math.max(activeIndex.value - 1, 0);
+    scrollActiveIntoView();
+  } else if (e.key === "Enter" && activeIndex.value >= 0) {
+    const note = store.notes[activeIndex.value];
+    if (note) router.push(`/notes/${note.id}`);
+  }
+}
+
+function scrollActiveIntoView() {
+  const el = document.querySelector(".kb-active-item");
+  if (el) el.scrollIntoView({ block: "nearest" });
+}
+
 const viewMode = ref<ViewMode>(
   (localStorage.getItem("fabled-notes-view-mode") as ViewMode) ?? "grid"
 );
@@ -30,6 +62,13 @@ onMounted(() => {
   } else {
     store.refresh();
   }
+  document.addEventListener("shortcut:focus-search", onFocusSearch);
+  document.addEventListener("keydown", onKeydown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("shortcut:focus-search", onFocusSearch);
+  document.removeEventListener("keydown", onKeydown);
 });
 
 watch(
@@ -82,7 +121,7 @@ function onOffsetUpdate(offset: number) {
       <h1>Notes</h1>
       <router-link to="/notes/new" class="btn-new">+ New Note</router-link>
     </div>
-    <SearchBar @search="onSearch" />
+    <SearchBar ref="searchBarRef" @search="onSearch" />
 
     <div class="controls">
       <div class="sort-controls">
@@ -137,23 +176,24 @@ function onOffsetUpdate(offset: number) {
 
     <!-- Grid view -->
     <div v-else-if="viewMode === 'grid'" class="cards-grid">
-      <NoteCard
-        v-for="note in store.notes"
+      <div
+        v-for="(note, i) in store.notes"
         :key="note.id"
-        :note="note"
-        @tag-click="onTagClick"
-      />
+        :class="{ 'kb-active-item': activeIndex === i }"
+      >
+        <NoteCard :note="note" @tag-click="onTagClick" />
+      </div>
     </div>
 
     <!-- Compact list view -->
     <div v-else class="cards-list">
-      <NoteCard
-        v-for="note in store.notes"
+      <div
+        v-for="(note, i) in store.notes"
         :key="note.id"
-        :note="note"
-        compact
-        @tag-click="onTagClick"
-      />
+        :class="{ 'kb-active-item': activeIndex === i }"
+      >
+        <NoteCard :note="note" compact @tag-click="onTagClick" />
+      </div>
     </div>
 
     <PaginationBar
@@ -300,4 +340,9 @@ function onOffsetUpdate(offset: number) {
   text-decoration: none;
   font-size: 0.9rem;
 }
+
+.kb-active-item {
+  outline: 2px solid var(--color-primary);
+  border-radius: var(--radius-md);
+}
 </style>
diff --git a/frontend/src/views/TasksListView.vue b/frontend/src/views/TasksListView.vue
index b2d95b5..11c25cb 100644
--- a/frontend/src/views/TasksListView.vue
+++ b/frontend/src/views/TasksListView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from "vue";
+import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useTasksStore } from "@/stores/tasks";
 import type { Task, TaskStatus } from "@/types/task";
@@ -15,6 +15,34 @@ const route = useRoute();
 const router = useRouter();
 const store = useTasksStore();
 
+const searchBarRef = ref<{ focus: () => void } | null>(null);
+const activeIndex = ref(-1);
+
+function onFocusSearch() {
+  searchBarRef.value?.focus();
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (viewMode.value !== "flat") return;
+  const el = document.activeElement;
+  const tag = el ? (el as HTMLElement).tagName : "";
+  const isInput = tag === "INPUT" || tag === "TEXTAREA" || (el as HTMLElement)?.isContentEditable;
+  if (isInput || e.ctrlKey || e.metaKey || e.altKey) return;
+  const count = store.tasks.length;
+  if (e.key === "j") {
+    e.preventDefault();
+    activeIndex.value = Math.min(activeIndex.value + 1, count - 1);
+    document.querySelector(".kb-active-item")?.scrollIntoView({ block: "nearest" });
+  } else if (e.key === "k") {
+    e.preventDefault();
+    activeIndex.value = Math.max(activeIndex.value - 1, 0);
+    document.querySelector(".kb-active-item")?.scrollIntoView({ block: "nearest" });
+  } else if (e.key === "Enter" && activeIndex.value >= 0) {
+    const task = store.tasks[activeIndex.value];
+    if (task) router.push(`/tasks/${task.id}/edit`);
+  }
+}
+
 const viewMode = ref<ViewMode>(
   (localStorage.getItem("fabled-tasks-view-mode") as ViewMode) ?? "flat"
 );
@@ -90,6 +118,13 @@ onMounted(async () => {
     store.limit = 100;
   }
   await Promise.all([store.refresh(), loadProjects()]);
+  document.addEventListener("shortcut:focus-search", onFocusSearch);
+  document.addEventListener("keydown", onKeydown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("shortcut:focus-search", onFocusSearch);
+  document.removeEventListener("keydown", onKeydown);
 });
 
 watch(
@@ -168,7 +203,7 @@ function toggleGroup(key: string) {
       <h1>Tasks</h1>
       <router-link to="/tasks/new" class="btn-new">+ New Task</router-link>
     </div>
-    <SearchBar @search="onSearch" />
+    <SearchBar ref="searchBarRef" @search="onSearch" />
 
     <div class="controls">
       <div class="filter-controls">
@@ -277,15 +312,19 @@ function toggleGroup(key: string) {
 
     <!-- Flat compact list -->
     <div v-else class="cards-list">
-      <TaskCard
-        v-for="task in store.tasks"
+      <div
+        v-for="(task, i) in store.tasks"
         :key="task.id"
-        :task="task"
-        compact
-        :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
-        @tag-click="onTagClick"
-        @status-toggle="onStatusToggle"
-      />
+        :class="{ 'kb-active-item': activeIndex === i }"
+      >
+        <TaskCard
+          :task="task"
+          compact
+          :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
+          @tag-click="onTagClick"
+          @status-toggle="onStatusToggle"
+        />
+      </div>
     </div>
 
     <PaginationBar
@@ -489,4 +528,9 @@ function toggleGroup(key: string) {
   text-decoration: none;
   font-size: 0.9rem;
 }
+
+.kb-active-item {
+  outline: 2px solid var(--color-primary);
+  border-radius: var(--radius-md);
+}
 </style>