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
+4
View File
@@ -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..."