Implement keyboard shortcuts and enrich note/task viewer views
Keyboard shortcuts (App.vue): - g+h/n/t/p/c: navigate to home/notes/tasks/projects/chat - n / t: new note / new task (when not in an input field) - Escape: go home (when not typing) - Shortcuts panel updated to document all working shortcuts NoteViewerView: - Context breadcrumb: parent note link (↑), project badge, milestone badge - Fetches project and parent note titles in parallel on load - Back button label improved to "← Notes" TaskViewerView: - Context breadcrumb: parent task link (uses parent_title from API), project badge, milestone badge - Sub-tasks section with inline progress bar and status dots (clickable to advance) - Sub-tasks loaded from /api/notes?parent_id=X&type=task - Note type extended with optional parent_title field Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+101
-12
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, watch } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import AppHeader from "@/components/AppHeader.vue";
|
||||
import ToastNotification from "@/components/ToastNotification.vue";
|
||||
import { useTheme } from "@/composables/useTheme";
|
||||
@@ -10,6 +11,7 @@ import { useSettingsStore } from "@/stores/settings";
|
||||
|
||||
useTheme();
|
||||
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
const chatStore = useChatStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
@@ -31,16 +33,66 @@ function isInputActive(): boolean {
|
||||
return tag === "INPUT" || tag === "TEXTAREA" || (el as HTMLElement).isContentEditable;
|
||||
}
|
||||
|
||||
// Sequence shortcut support (e.g. g+n, g+t)
|
||||
let pendingPrefix: string | null = null;
|
||||
let prefixTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
function clearPrefix() {
|
||||
pendingPrefix = null;
|
||||
if (prefixTimeout) clearTimeout(prefixTimeout);
|
||||
prefixTimeout = null;
|
||||
}
|
||||
|
||||
function onGlobalKeydown(e: KeyboardEvent) {
|
||||
if (!authStore.isAuthenticated) return;
|
||||
|
||||
// ? — toggle shortcuts overlay (only when not typing)
|
||||
if (e.key === "?" && !isInputActive() && !e.ctrlKey && !e.metaKey) {
|
||||
toggleShortcuts();
|
||||
return;
|
||||
}
|
||||
// Escape — close shortcuts overlay
|
||||
if (e.key === "Escape" && showShortcuts.value) {
|
||||
closeShortcuts();
|
||||
|
||||
// Escape — close shortcuts overlay OR navigate home
|
||||
if (e.key === "Escape") {
|
||||
clearPrefix();
|
||||
if (showShortcuts.value) {
|
||||
closeShortcuts();
|
||||
return;
|
||||
}
|
||||
if (!isInputActive()) {
|
||||
router.push("/");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// All remaining shortcuts: ignore when typing or using modifier keys
|
||||
if (isInputActive() || e.ctrlKey || e.metaKey || e.altKey) return;
|
||||
|
||||
// Complete a g+X sequence
|
||||
if (pendingPrefix === "g") {
|
||||
clearPrefix();
|
||||
switch (e.key) {
|
||||
case "h": router.push("/"); break;
|
||||
case "n": router.push("/notes"); break;
|
||||
case "t": router.push("/tasks"); break;
|
||||
case "p": router.push("/projects"); break;
|
||||
case "c": router.push("/chat"); break;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Single-key shortcuts
|
||||
switch (e.key) {
|
||||
case "g":
|
||||
pendingPrefix = "g";
|
||||
prefixTimeout = setTimeout(clearPrefix, 1500);
|
||||
break;
|
||||
case "n":
|
||||
router.push("/notes/new");
|
||||
break;
|
||||
case "t":
|
||||
router.push("/tasks/new");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,12 +142,53 @@ onUnmounted(() => {
|
||||
<div class="shortcuts-section">
|
||||
<div class="shortcuts-section-title">Navigation</div>
|
||||
<div class="shortcut-row">
|
||||
<span class="shortcut-key">Esc</span>
|
||||
<span class="shortcut-desc">Go to home / close dialog</span>
|
||||
<kbd class="shortcut-key">g</kbd>
|
||||
<span class="shortcut-key-sep">+</span>
|
||||
<kbd class="shortcut-key">h</kbd>
|
||||
<span class="shortcut-desc">Home</span>
|
||||
</div>
|
||||
<div class="shortcut-row">
|
||||
<span class="shortcut-key">?</span>
|
||||
<span class="shortcut-desc">Toggle this shortcuts panel</span>
|
||||
<kbd class="shortcut-key">g</kbd>
|
||||
<span class="shortcut-key-sep">+</span>
|
||||
<kbd class="shortcut-key">n</kbd>
|
||||
<span class="shortcut-desc">Notes</span>
|
||||
</div>
|
||||
<div class="shortcut-row">
|
||||
<kbd class="shortcut-key">g</kbd>
|
||||
<span class="shortcut-key-sep">+</span>
|
||||
<kbd class="shortcut-key">t</kbd>
|
||||
<span class="shortcut-desc">Tasks</span>
|
||||
</div>
|
||||
<div class="shortcut-row">
|
||||
<kbd class="shortcut-key">g</kbd>
|
||||
<span class="shortcut-key-sep">+</span>
|
||||
<kbd class="shortcut-key">p</kbd>
|
||||
<span class="shortcut-desc">Projects</span>
|
||||
</div>
|
||||
<div class="shortcut-row">
|
||||
<kbd class="shortcut-key">g</kbd>
|
||||
<span class="shortcut-key-sep">+</span>
|
||||
<kbd class="shortcut-key">c</kbd>
|
||||
<span class="shortcut-desc">Chat</span>
|
||||
</div>
|
||||
<div class="shortcut-row">
|
||||
<kbd class="shortcut-key">Esc</kbd>
|
||||
<span class="shortcut-desc">Go home (when not typing)</span>
|
||||
</div>
|
||||
<div class="shortcut-row">
|
||||
<kbd class="shortcut-key">?</kbd>
|
||||
<span class="shortcut-desc">Toggle this panel</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shortcuts-section">
|
||||
<div class="shortcuts-section-title">Create</div>
|
||||
<div class="shortcut-row">
|
||||
<kbd class="shortcut-key">n</kbd>
|
||||
<span class="shortcut-desc">New note</span>
|
||||
</div>
|
||||
<div class="shortcut-row">
|
||||
<kbd class="shortcut-key">t</kbd>
|
||||
<span class="shortcut-desc">New task</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shortcuts-section">
|
||||
@@ -108,11 +201,7 @@ onUnmounted(() => {
|
||||
<kbd class="shortcut-key">Shift</kbd>
|
||||
<span class="shortcut-key-sep">+</span>
|
||||
<kbd class="shortcut-key">Enter</kbd>
|
||||
<span class="shortcut-desc">New line in message</span>
|
||||
</div>
|
||||
<div class="shortcut-row">
|
||||
<kbd class="shortcut-key">Esc</kbd>
|
||||
<span class="shortcut-desc">Clear input / go home</span>
|
||||
<span class="shortcut-desc">New line</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user