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:
@@ -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(() => {
|
||||
|
||||
Reference in New Issue
Block a user