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:
@@ -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..."
|
||||
|
||||
Reference in New Issue
Block a user