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>
|
||||
|
||||
@@ -7,6 +7,7 @@ export interface Note {
|
||||
body: string;
|
||||
tags: string[];
|
||||
parent_id: number | null;
|
||||
parent_title?: string | null;
|
||||
project_id: number | null;
|
||||
milestone_id: number | null;
|
||||
status: TaskStatus | null;
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useRoute, useRouter } from "vue-router";
|
||||
import { useNotesStore } from "@/stores/notes";
|
||||
import { renderMarkdown } from "@/utils/markdown";
|
||||
import { relativeTime } from "@/composables/useRelativeTime";
|
||||
import { apiPost } from "@/api/client";
|
||||
import { apiPost, apiGet } from "@/api/client";
|
||||
import type { Note } from "@/types/note";
|
||||
import TagPill from "@/components/TagPill.vue";
|
||||
import TableOfContents from "@/components/TableOfContents.vue";
|
||||
@@ -16,8 +16,44 @@ const bodyEl = ref<HTMLElement | null>(null);
|
||||
const backlinks = ref<{ type: string; id: number; title: string }[]>([]);
|
||||
const converting = ref(false);
|
||||
|
||||
// Context enrichment
|
||||
const projectTitle = ref<string | null>(null);
|
||||
const milestoneName = ref<string | null>(null);
|
||||
const parentNoteTitle = ref<string | null>(null);
|
||||
|
||||
const noteId = computed(() => Number(route.params.id));
|
||||
|
||||
async function loadContext(note: Note) {
|
||||
projectTitle.value = null;
|
||||
milestoneName.value = null;
|
||||
parentNoteTitle.value = null;
|
||||
|
||||
const promises: Promise<void>[] = [];
|
||||
|
||||
if (note.project_id) {
|
||||
promises.push(
|
||||
apiGet<any>(`/api/projects/${note.project_id}`).then((data) => {
|
||||
projectTitle.value = data.title ?? null;
|
||||
if (note.milestone_id && data.summary?.milestone_summary) {
|
||||
const ms = (data.summary.milestone_summary as Array<{ id: number; title: string }>)
|
||||
.find((m) => m.id === note.milestone_id);
|
||||
if (ms) milestoneName.value = ms.title;
|
||||
}
|
||||
}).catch(() => {})
|
||||
);
|
||||
}
|
||||
|
||||
if (note.parent_id) {
|
||||
promises.push(
|
||||
apiGet<Note>(`/api/notes/${note.parent_id}`).then((parent) => {
|
||||
parentNoteTitle.value = parent.title || "Untitled";
|
||||
}).catch(() => {})
|
||||
);
|
||||
}
|
||||
|
||||
await Promise.all(promises);
|
||||
}
|
||||
|
||||
async function loadNote(id: number) {
|
||||
backlinks.value = [];
|
||||
await store.fetchNote(id);
|
||||
@@ -28,11 +64,11 @@ async function loadNote(id: number) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
backlinks.value = await store.fetchBacklinks(id);
|
||||
} catch {
|
||||
backlinks.value = [];
|
||||
}
|
||||
const [bl] = await Promise.allSettled([
|
||||
store.fetchBacklinks(id),
|
||||
loadContext(store.currentNote!),
|
||||
]);
|
||||
if (bl.status === "fulfilled") backlinks.value = bl.value;
|
||||
}
|
||||
|
||||
onMounted(() => loadNote(noteId.value));
|
||||
@@ -106,7 +142,7 @@ async function convertToTask() {
|
||||
<p v-if="store.loading">Loading...</p>
|
||||
<template v-else-if="store.currentNote">
|
||||
<div class="toolbar">
|
||||
<router-link to="/notes" class="btn-back">Back</router-link>
|
||||
<router-link to="/notes" class="btn-back">← Notes</router-link>
|
||||
<router-link
|
||||
:to="`/notes/${store.currentNote.id}/edit`"
|
||||
class="btn-edit"
|
||||
@@ -122,6 +158,31 @@ async function convertToTask() {
|
||||
{{ converting ? "Converting..." : "Convert to Task" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Breadcrumb: parent → project → milestone -->
|
||||
<div
|
||||
v-if="store.currentNote.parent_id || store.currentNote.project_id"
|
||||
class="context-bar"
|
||||
>
|
||||
<router-link
|
||||
v-if="store.currentNote.parent_id"
|
||||
:to="`/notes/${store.currentNote.parent_id}`"
|
||||
class="ctx-crumb ctx-crumb-parent"
|
||||
>
|
||||
↑ {{ parentNoteTitle || "Parent note" }}
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="store.currentNote.project_id && projectTitle"
|
||||
:to="`/projects/${store.currentNote.project_id}`"
|
||||
class="ctx-crumb ctx-crumb-project"
|
||||
>
|
||||
{{ projectTitle }}
|
||||
</router-link>
|
||||
<span v-if="milestoneName" class="ctx-crumb ctx-crumb-milestone">
|
||||
{{ milestoneName }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1>{{ store.currentNote.title || "Untitled" }}</h1>
|
||||
<p class="meta">
|
||||
Updated {{ relativeTime(store.currentNote.updated_at) }}
|
||||
@@ -193,7 +254,7 @@ async function convertToTask() {
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.btn-back,
|
||||
.btn-edit {
|
||||
@@ -232,6 +293,49 @@ async function convertToTask() {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Context breadcrumb */
|
||||
.context-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
.ctx-crumb {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.15rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ctx-crumb-parent {
|
||||
color: var(--color-text-muted);
|
||||
background: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
text-decoration: none;
|
||||
}
|
||||
.ctx-crumb-parent:hover {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.ctx-crumb-project {
|
||||
color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
.ctx-crumb-project:hover {
|
||||
background: color-mix(in srgb, var(--color-primary) 18%, transparent);
|
||||
}
|
||||
.ctx-crumb-milestone {
|
||||
color: var(--color-text-secondary);
|
||||
background: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
|
||||
@@ -5,7 +5,7 @@ import { useTasksStore } from "@/stores/tasks";
|
||||
import { useNotesStore } from "@/stores/notes";
|
||||
import { renderMarkdown } from "@/utils/markdown";
|
||||
import { relativeTime } from "@/composables/useRelativeTime";
|
||||
import { apiPost } from "@/api/client";
|
||||
import { apiPost, apiGet } from "@/api/client";
|
||||
import type { Note } from "@/types/note";
|
||||
import type { TaskStatus } from "@/types/task";
|
||||
import StatusBadge from "@/components/StatusBadge.vue";
|
||||
@@ -20,16 +20,76 @@ const notesStore = useNotesStore();
|
||||
const backlinks = ref<{ type: string; id: number; title: string }[]>([]);
|
||||
const converting = ref(false);
|
||||
|
||||
// Context enrichment
|
||||
const projectTitle = ref<string | null>(null);
|
||||
const milestoneName = ref<string | null>(null);
|
||||
const subTasks = ref<Note[]>([]);
|
||||
|
||||
const taskId = computed(() => Number(route.params.id));
|
||||
|
||||
const statusCycle: Record<TaskStatus, TaskStatus> = {
|
||||
todo: "in_progress",
|
||||
in_progress: "done",
|
||||
done: "todo",
|
||||
};
|
||||
|
||||
const statusDotClass: Record<TaskStatus, string> = {
|
||||
todo: "dot-todo",
|
||||
in_progress: "dot-in-progress",
|
||||
done: "dot-done",
|
||||
};
|
||||
|
||||
function cycleSubTaskStatus(subTask: Note) {
|
||||
if (!subTask.status) return;
|
||||
const next = statusCycle[subTask.status as TaskStatus];
|
||||
store.patchStatus(subTask.id, next).then(() => {
|
||||
const idx = subTasks.value.findIndex((t) => t.id === subTask.id);
|
||||
if (idx !== -1) subTasks.value[idx] = { ...subTasks.value[idx], status: next };
|
||||
});
|
||||
}
|
||||
|
||||
async function loadContext(task: Note) {
|
||||
projectTitle.value = null;
|
||||
milestoneName.value = null;
|
||||
subTasks.value = [];
|
||||
|
||||
const promises: Promise<void>[] = [];
|
||||
|
||||
if (task.project_id) {
|
||||
promises.push(
|
||||
apiGet<any>(`/api/projects/${task.project_id}`).then((data) => {
|
||||
projectTitle.value = data.title ?? null;
|
||||
if (task.milestone_id && data.summary?.milestone_summary) {
|
||||
const ms = (data.summary.milestone_summary as Array<{ id: number; title: string }>)
|
||||
.find((m) => m.id === task.milestone_id);
|
||||
if (ms) milestoneName.value = ms.title;
|
||||
}
|
||||
}).catch(() => {})
|
||||
);
|
||||
}
|
||||
|
||||
// Load sub-tasks via the notes endpoint with parent_id filter
|
||||
promises.push(
|
||||
apiGet<{ notes: Note[]; total: number }>(
|
||||
`/api/notes?parent_id=${task.id}&type=task&sort=created_at&order=asc&limit=50`
|
||||
).then((data) => {
|
||||
subTasks.value = data.notes;
|
||||
}).catch(() => {})
|
||||
);
|
||||
|
||||
await Promise.all(promises);
|
||||
}
|
||||
|
||||
async function loadTask(id: number) {
|
||||
backlinks.value = [];
|
||||
await store.fetchTask(id);
|
||||
try {
|
||||
backlinks.value = await notesStore.fetchBacklinks(id);
|
||||
} catch {
|
||||
backlinks.value = [];
|
||||
}
|
||||
if (!store.currentTask) return;
|
||||
|
||||
const [bl] = await Promise.allSettled([
|
||||
notesStore.fetchBacklinks(id),
|
||||
loadContext(store.currentTask),
|
||||
]);
|
||||
if (bl.status === "fulfilled") backlinks.value = bl.value;
|
||||
}
|
||||
|
||||
onMounted(() => loadTask(taskId.value));
|
||||
@@ -43,12 +103,6 @@ const renderedBody = computed(() => {
|
||||
return renderMarkdown(store.currentTask.body);
|
||||
});
|
||||
|
||||
const statusCycle: Record<TaskStatus, TaskStatus> = {
|
||||
todo: "in_progress",
|
||||
in_progress: "done",
|
||||
done: "todo",
|
||||
};
|
||||
|
||||
function cycleStatus() {
|
||||
if (!store.currentTask) return;
|
||||
store.patchStatus(
|
||||
@@ -115,6 +169,14 @@ async function onBodyClick(e: MouseEvent) {
|
||||
function onTagClick(tag: string) {
|
||||
router.push({ path: "/tasks", query: { tag } });
|
||||
}
|
||||
|
||||
// Sub-task progress
|
||||
const subTaskProgress = computed(() => {
|
||||
if (!subTasks.value.length) return null;
|
||||
const done = subTasks.value.filter((t) => t.status === "done").length;
|
||||
const total = subTasks.value.length;
|
||||
return { done, total, pct: Math.round((done / total) * 100) };
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -123,7 +185,7 @@ function onTagClick(tag: string) {
|
||||
<p v-if="store.loading">Loading...</p>
|
||||
<template v-else-if="store.currentTask">
|
||||
<div class="toolbar">
|
||||
<router-link to="/tasks" class="btn-back">Back</router-link>
|
||||
<router-link to="/tasks" class="btn-back">← Tasks</router-link>
|
||||
<router-link
|
||||
:to="`/tasks/${store.currentTask.id}/edit`"
|
||||
class="btn-edit"
|
||||
@@ -138,6 +200,31 @@ function onTagClick(tag: string) {
|
||||
{{ converting ? "Converting..." : "Convert to Note" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Breadcrumb: parent task → project → milestone -->
|
||||
<div
|
||||
v-if="store.currentTask.parent_id || store.currentTask.project_id"
|
||||
class="context-bar"
|
||||
>
|
||||
<router-link
|
||||
v-if="store.currentTask.parent_id"
|
||||
:to="`/tasks/${store.currentTask.parent_id}`"
|
||||
class="ctx-crumb ctx-crumb-parent"
|
||||
>
|
||||
↑ {{ store.currentTask.parent_title || "Parent task" }}
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="store.currentTask.project_id && projectTitle"
|
||||
:to="`/projects/${store.currentTask.project_id}`"
|
||||
class="ctx-crumb ctx-crumb-project"
|
||||
>
|
||||
{{ projectTitle }}
|
||||
</router-link>
|
||||
<span v-if="milestoneName" class="ctx-crumb ctx-crumb-milestone">
|
||||
{{ milestoneName }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1>{{ store.currentTask.title || "Untitled" }}</h1>
|
||||
<p class="meta">
|
||||
Updated {{ relativeTime(store.currentTask.updated_at) }}
|
||||
@@ -172,6 +259,37 @@ function onTagClick(tag: string) {
|
||||
@click="onBodyClick"
|
||||
></div>
|
||||
|
||||
<!-- Sub-tasks -->
|
||||
<div v-if="subTasks.length" class="subtasks">
|
||||
<div class="subtasks-header">
|
||||
<h2 class="subtasks-title">Sub-tasks</h2>
|
||||
<span v-if="subTaskProgress" class="subtasks-progress">
|
||||
{{ subTaskProgress.done }}/{{ subTaskProgress.total }}
|
||||
<span class="subtasks-pct">({{ subTaskProgress.pct }}%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="subTaskProgress" class="subtasks-track">
|
||||
<div class="subtasks-fill" :style="{ width: subTaskProgress.pct + '%' }"></div>
|
||||
</div>
|
||||
<ul class="subtasks-list">
|
||||
<li
|
||||
v-for="sub in subTasks"
|
||||
:key="sub.id"
|
||||
class="subtask-row"
|
||||
>
|
||||
<button
|
||||
:class="['sub-dot', statusDotClass[sub.status as TaskStatus] ?? 'dot-todo']"
|
||||
:title="`${sub.status} — click to advance`"
|
||||
@click="cycleSubTaskStatus(sub)"
|
||||
></button>
|
||||
<router-link :to="`/tasks/${sub.id}`" class="sub-title" :class="{ 'sub-done': sub.status === 'done' }">
|
||||
{{ sub.title || "Untitled" }}
|
||||
</router-link>
|
||||
<span v-if="sub.due_date" class="sub-due">{{ sub.due_date }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div v-if="backlinks.length" class="backlinks">
|
||||
<h2>Backlinks</h2>
|
||||
<ul class="backlinks-list">
|
||||
@@ -222,7 +340,7 @@ function onTagClick(tag: string) {
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.btn-back,
|
||||
.btn-edit {
|
||||
@@ -261,6 +379,49 @@ function onTagClick(tag: string) {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Context breadcrumb */
|
||||
.context-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
.ctx-crumb {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.15rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ctx-crumb-parent {
|
||||
color: var(--color-text-muted);
|
||||
background: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
text-decoration: none;
|
||||
}
|
||||
.ctx-crumb-parent:hover {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.ctx-crumb-project {
|
||||
color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
.ctx-crumb-project:hover {
|
||||
background: color-mix(in srgb, var(--color-primary) 18%, transparent);
|
||||
}
|
||||
.ctx-crumb-milestone {
|
||||
color: var(--color-text-secondary);
|
||||
background: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
@@ -286,6 +447,109 @@ function onTagClick(tag: string) {
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Sub-tasks */
|
||||
.subtasks {
|
||||
margin-top: 2rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.subtasks-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.subtasks-title {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
.subtasks-progress {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.subtasks-pct {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.subtasks-track {
|
||||
height: 4px;
|
||||
background: var(--color-bg-secondary);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 0.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.subtasks-fill {
|
||||
height: 100%;
|
||||
background: var(--color-status-done, #22c55e);
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.subtasks-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.subtask-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.subtask-row:hover {
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
.sub-dot {
|
||||
flex-shrink: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: transform 0.1s, opacity 0.1s;
|
||||
}
|
||||
.sub-dot:hover {
|
||||
transform: scale(1.25);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.dot-todo {
|
||||
background: transparent;
|
||||
border: 2px solid var(--color-text-muted);
|
||||
}
|
||||
.dot-in-progress {
|
||||
background: var(--color-status-in-progress, #3b82f6);
|
||||
}
|
||||
.dot-done {
|
||||
background: var(--color-status-done, #22c55e);
|
||||
}
|
||||
.sub-title {
|
||||
flex: 1;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sub-title:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.sub-title.sub-done {
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.sub-due {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.backlinks {
|
||||
margin-top: 2rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
|
||||
Reference in New Issue
Block a user