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>
This commit is contained in:
2026-03-04 08:39:49 -05:00
parent 264c3664ba
commit 969ef0efa3
6 changed files with 174 additions and 25 deletions
+12 -1
View File
@@ -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(() => {