Add keyboard navigation: e/c/slash shortcuts, j/k list nav, focus visibility

- 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/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>