bvandeusen/FabledScribe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 50 Wiki Activity

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

Browse Source 
- 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:
Bryan Van Deusen
2026-03-04 08:39:49 -05:00
parent 264c3664ba
commit 969ef0efa3
6 changed files with 174 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+43
View File
@@ -95,6 +95,24 @@ function onGlobalKeydown(e: KeyboardEvent) {
case "t":
router.push("/tasks/new");
break;
case "e": {
const name = router.currentRoute.value.name;
if (name === "note-view" || name === "task-view") {
router.push(router.currentRoute.value.path + "/edit");
}
break;
}
case "/":
e.preventDefault();
document.dispatchEvent(new CustomEvent("shortcut:focus-search"));
break;
case "c":
if (router.currentRoute.value.name === "home") {
document.dispatchEvent(new CustomEvent("shortcut:focus-chat"));
} else {
router.push("/chat");
}
break;
}
}
@@ -193,8 +211,33 @@ onUnmounted(() => {
<span class="shortcut-desc">New task</span>
</div>
</div>
<div class="shortcuts-section">
<div class="shortcuts-section-title">Lists</div>
<div class="shortcut-row">
<kbd class="shortcut-key">/</kbd>
<span class="shortcut-desc">Focus search bar</span>
</div>
<div class="shortcut-row">
<kbd class="shortcut-key">j</kbd>
<span class="shortcut-key-sep">/</span>
<kbd class="shortcut-key">k</kbd>
<span class="shortcut-desc">Move down / up</span>
</div>
<div class="shortcut-row">
<kbd class="shortcut-key">Enter</kbd>
<span class="shortcut-desc">Open selected item</span>
</div>
<div class="shortcut-row">
<kbd class="shortcut-key">e</kbd>
<span class="shortcut-desc">Edit current item (viewer)</span>
</div>
</div>
<div class="shortcuts-section">
<div class="shortcuts-section-title">Chat</div>
<div class="shortcut-row">
<kbd class="shortcut-key">c</kbd>
<span class="shortcut-desc">Focus chat (home) / go to chat</span>
</div>
<div class="shortcut-row">
<kbd class="shortcut-key">Enter</kbd>
<span class="shortcut-desc">Send message</span>
frontend/src/assets/theme.css
+3 -1
View File
@@ -106,9 +106,11 @@ body {
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
button:focus-visible,
a:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--radius-sm);
}
/* Responsive breakpoints: 480px (phone), 768px (tablet), 1024px (desktop) */
frontend/src/components/SearchBar.vue
+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..."
frontend/src/views/HomeView.vue
+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(() => {
frontend/src/views/NotesListView.vue
+58 -13
View File
@@ -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>
frontend/src/views/TasksListView.vue
+54 -10
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed, onMounted, watch } from "vue";
import { ref, computed, onMounted, onUnmounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useTasksStore } from "@/stores/tasks";
import type { Task, TaskStatus } from "@/types/task";
@@ -15,6 +15,34 @@ const route = useRoute();
const router = useRouter();
const store = useTasksStore();
const searchBarRef = ref<{ focus: () => void } | null>(null);
const activeIndex = ref(-1);
function onFocusSearch() {
searchBarRef.value?.focus();
}
function onKeydown(e: KeyboardEvent) {
if (viewMode.value !== "flat") return;
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.tasks.length;
if (e.key === "j") {
e.preventDefault();
activeIndex.value = Math.min(activeIndex.value + 1, count - 1);
document.querySelector(".kb-active-item")?.scrollIntoView({ block: "nearest" });
} else if (e.key === "k") {
e.preventDefault();
activeIndex.value = Math.max(activeIndex.value - 1, 0);
document.querySelector(".kb-active-item")?.scrollIntoView({ block: "nearest" });
} else if (e.key === "Enter" && activeIndex.value >= 0) {
const task = store.tasks[activeIndex.value];
if (task) router.push(`/tasks/${task.id}/edit`);
}
}
const viewMode = ref<ViewMode>(
(localStorage.getItem("fabled-tasks-view-mode") as ViewMode) ?? "flat"
);
@@ -90,6 +118,13 @@ onMounted(async () => {
store.limit = 100;
}
await Promise.all([store.refresh(), loadProjects()]);
document.addEventListener("shortcut:focus-search", onFocusSearch);
document.addEventListener("keydown", onKeydown);
});
onUnmounted(() => {
document.removeEventListener("shortcut:focus-search", onFocusSearch);
document.removeEventListener("keydown", onKeydown);
});
watch(
@@ -168,7 +203,7 @@ function toggleGroup(key: string) {
<h1>Tasks</h1>
<router-link to="/tasks/new" class="btn-new">+ New Task</router-link>
</div>
<SearchBar @search="onSearch" />
<SearchBar ref="searchBarRef" @search="onSearch" />
<div class="controls">
<div class="filter-controls">
@@ -277,15 +312,19 @@ function toggleGroup(key: string) {
<!-- Flat compact list -->
<div v-else class="cards-list">
<TaskCard
v-for="task in store.tasks"
<div
v-for="(task, i) in store.tasks"
:key="task.id"
:task="task"
compact
:project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
@tag-click="onTagClick"
@status-toggle="onStatusToggle"
/>
:class="{ 'kb-active-item': activeIndex === i }"
>
<TaskCard
:task="task"
compact
:project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
@tag-click="onTagClick"
@status-toggle="onStatusToggle"
/>
</div>
</div>
<PaginationBar
@@ -489,4 +528,9 @@ function toggleGroup(key: string) {
text-decoration: none;
font-size: 0.9rem;
}
.kb-active-item {
outline: 2px solid var(--color-primary);
border-radius: var(--radius-md);
}
</style>