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

Overhaul dashboard, notes, and tasks views for density and usability

Browse Source 
NoteCard: add compact prop — single-row title/tags/timestamp, no body preview
TaskCard: add compact prop — single-row with status dot, priority badge,
  title, optional project breadcrumb, due date; edit button appears on hover.
  Add projectTitle prop for cross-view context.

NotesListView: auto-fill CSS grid layout (2–4 columns); compact list toggle;
  view mode persisted to localStorage.

TasksListView: compact rows throughout; group-by-project toggle with
  collapsible sections, task counts, and "Open project" links; fetches
  project list for group labels and task breadcrumbs; limit raised to 100
  in grouped mode; view mode persisted to localStorage.

HomeView dashboard: task sections use compact rows (project breadcrumb shown);
  notes column uses 2-per-row mini-grid; new "Active Projects" widget below
  main grid shows milestone progress bars for up to 6 active projects.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-03-03 18:57:57 -05:00
parent eed6aedc9e
commit 56d5268fad
5 changed files with 793 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/NoteCard.vue
+66 -17
View File
@@ -5,7 +5,7 @@ import TagPill from "@/components/TagPill.vue";
import { relativeTime } from "@/composables/useRelativeTime";
import { renderPreview } from "@/utils/markdown";
const props = defineProps<{ note: Note }>();
const props = defineProps<{ note: Note; compact?: boolean }>();
const emit = defineEmits<{ "tag-click": [tag: string] }>();
const router = useRouter();
@@ -19,21 +19,40 @@ function goEdit() {
</script>
<template>
<router-link :to="`/notes/${note.id}`" class="note-card">
<div class="note-top">
<h3 class="note-title">{{ note.title || "Untitled" }}</h3>
<button class="btn-edit" title="Edit" @click.prevent.stop="goEdit">Edit</button>
</div>
<div v-if="note.body" class="note-preview prose" v-html="renderPreview(note.body)"></div>
<div class="note-meta">
<TagPill
v-for="tag in note.tags"
:key="tag"
:tag="tag"
@click.stop="onTagClick(tag)"
/>
<span class="timestamp">{{ relativeTime(note.updated_at) }}</span>
</div>
<router-link :to="`/notes/${note.id}`" :class="['note-card', { compact }]">
<!-- Compact: single row -->
<template v-if="compact">
<span class="note-title-compact">{{ note.title || "Untitled" }}</span>
<div class="note-tags-compact">
<TagPill
v-for="tag in note.tags.slice(0, 3)"
:key="tag"
:tag="tag"
@click.stop="onTagClick(tag)"
/>
</div>
<span class="timestamp-compact">{{ relativeTime(note.updated_at) }}</span>
</template>
<!-- Full: original layout -->
<template v-else>
<div class="note-top">
<h3 class="note-title">{{ note.title || "Untitled" }}</h3>
<button class="btn-edit" title="Edit" @click.prevent.stop="goEdit">Edit</button>
</div>
<div v-if="note.body" class="note-preview prose" v-html="renderPreview(note.body)"></div>
<div class="note-meta">
<TagPill
v-for="tag in note.tags"
:key="tag"
:tag="tag"
@click.stop="onTagClick(tag)"
/>
<span class="timestamp">{{ relativeTime(note.updated_at) }}</span>
</div>
</template>
</router-link>
</template>
@@ -51,6 +70,36 @@ function goEdit() {
.note-card:hover {
box-shadow: 0 2px 8px var(--color-shadow);
}
/* Compact single-row layout */
.note-card.compact {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.75rem;
}
.note-title-compact {
font-size: 0.9rem;
font-weight: 500;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.note-tags-compact {
display: flex;
gap: 0.3rem;
flex-shrink: 0;
}
.timestamp-compact {
font-size: 0.72rem;
color: var(--color-text-muted);
flex-shrink: 0;
white-space: nowrap;
}
/* Full layout */
.note-top {
display: flex;
align-items: center;
@@ -75,7 +124,7 @@ function goEdit() {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
transition: color 0.15s, border-color 0.15s;
}
.btn-edit:hover {
color: var(--color-primary);
frontend/src/components/TaskCard.vue
+147 -23
View File
@@ -7,7 +7,11 @@ import TagPill from "@/components/TagPill.vue";
import { relativeTime } from "@/composables/useRelativeTime";
import { renderPreview } from "@/utils/markdown";
const props = defineProps<{ task: Task }>();
const props = defineProps<{
task: Task;
compact?: boolean;
projectTitle?: string;
}>();
const router = useRouter();
const emit = defineEmits<{
"tag-click": [tag: string];
@@ -20,6 +24,18 @@ const statusCycle: Record<TaskStatus, TaskStatus> = {
done: "todo",
};
const statusDotClass: Record<TaskStatus, string> = {
todo: "dot-todo",
in_progress: "dot-in-progress",
done: "dot-done",
};
const statusTitle: Record<TaskStatus, string> = {
todo: "Todo — click to mark In Progress",
in_progress: "In Progress — click to mark Done",
done: "Done — click to mark Todo",
};
function cycleStatus() {
emit("status-toggle", props.task.id, statusCycle[props.task.status!]);
}
@@ -36,30 +52,51 @@ function isOverdue(): boolean {
</script>
<template>
<router-link :to="`/tasks/${task.id}`" class="task-card">
<div class="task-top">
<StatusBadge
:status="task.status!"
clickable
<router-link :to="`/tasks/${task.id}`" :class="['task-card', { compact }]">
<!-- Compact: single row -->
<template v-if="compact">
<button
:class="['status-dot', statusDotClass[task.status!]]"
:title="statusTitle[task.status!]"
@click.prevent.stop="cycleStatus"
/>
></button>
<PriorityBadge :priority="task.priority!" />
<h3 class="task-title">{{ task.title || "Untitled" }}</h3>
<button class="btn-edit" title="Edit" @click.prevent.stop="goEdit">Edit</button>
</div>
<div v-if="task.body" class="task-preview prose" v-html="renderPreview(task.body)"></div>
<div class="task-meta">
<span v-if="task.due_date" :class="['due-date', { overdue: isOverdue() }]">
Due: {{ task.due_date }}
<span class="task-title-compact">{{ task.title || "Untitled" }}</span>
<span v-if="projectTitle" class="project-crumb">{{ projectTitle }}</span>
<span v-if="task.due_date" :class="['due-compact', { overdue: isOverdue() }]">
{{ task.due_date }}
</span>
<TagPill
v-for="tag in task.tags"
:key="tag"
:tag="tag"
@click.stop="emit('tag-click', tag)"
/>
<span class="timestamp">{{ relativeTime(task.updated_at) }}</span>
</div>
<button class="btn-edit-compact" title="Edit" @click.prevent.stop="goEdit">Edit</button>
</template>
<!-- Full: original layout -->
<template v-else>
<div class="task-top">
<StatusBadge
:status="task.status!"
clickable
@click.prevent.stop="cycleStatus"
/>
<PriorityBadge :priority="task.priority!" />
<h3 class="task-title">{{ task.title || "Untitled" }}</h3>
<button class="btn-edit" title="Edit" @click.prevent.stop="goEdit">Edit</button>
</div>
<div v-if="task.body" class="task-preview prose" v-html="renderPreview(task.body)"></div>
<div class="task-meta">
<span v-if="task.due_date" :class="['due-date', { overdue: isOverdue() }]">
Due: {{ task.due_date }}
</span>
<TagPill
v-for="tag in task.tags"
:key="tag"
:tag="tag"
@click.stop="emit('tag-click', tag)"
/>
<span class="timestamp">{{ relativeTime(task.updated_at) }}</span>
</div>
</template>
</router-link>
</template>
@@ -77,6 +114,93 @@ function isOverdue(): boolean {
.task-card:hover {
box-shadow: 0 2px 8px var(--color-shadow);
}
/* Compact single-row layout */
.task-card.compact {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.75rem;
}
/* Status dot */
.status-dot {
flex-shrink: 0;
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
cursor: pointer;
padding: 0;
transition: transform 0.1s, opacity 0.1s;
}
.status-dot:hover {
transform: scale(1.25);
opacity: 0.8;
}
.dot-todo {
background: var(--color-status-todo, #94a3b8);
border: 2px solid var(--color-status-todo, #94a3b8);
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);
}
.task-title-compact {
font-size: 0.9rem;
font-weight: 500;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-crumb {
font-size: 0.75rem;
color: var(--color-text-muted);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 0.1rem 0.4rem;
white-space: nowrap;
flex-shrink: 0;
}
.due-compact {
font-size: 0.75rem;
color: var(--color-text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.due-compact.overdue {
color: var(--color-danger, #e74c3c);
font-weight: 600;
}
.btn-edit-compact {
flex-shrink: 0;
padding: 0.15rem 0.45rem;
font-size: 0.75rem;
background: none;
color: var(--color-text-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
opacity: 0;
transition: opacity 0.15s, color 0.15s;
}
.task-card.compact:hover .btn-edit-compact {
opacity: 1;
}
.btn-edit-compact:hover {
color: var(--color-primary);
border-color: var(--color-primary);
}
/* Full layout */
.task-top {
display: flex;
align-items: center;
@@ -101,7 +225,7 @@ function isOverdue(): boolean {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
transition: color 0.15s, border-color 0.15s;
}
.btn-edit:hover {
color: var(--color-primary);
frontend/src/views/HomeView.vue
+267 -173
View File
@@ -12,6 +12,8 @@ import type { TaskStatus } from "@/types/task";
import { useTasksStore } from "@/stores/tasks";
import { useChatStore } from "@/stores/chat";
// ─── Task data ───────────────────────────────────────────────────────────────
const recentNotes = ref<Note[]>([]);
const overdueTasks = ref<Task[]>([]);
const dueTodayTasks = ref<Task[]>([]);
@@ -22,21 +24,70 @@ const otherTasks = ref<Task[]>([]);
const loading = ref(true);
const tasksStore = useTasksStore();
// ─── Project data ─────────────────────────────────────────────────────────────
interface MilestoneSummary {
id: number;
title: string;
status: string;
pct: number;
total: number;
completed: number;
}
interface DashProject {
id: number;
title: string;
status: string;
summary?: {
task_counts: { todo?: number; in_progress?: number; done?: number };
milestone_summary: MilestoneSummary[];
};
}
const activeProjects = ref<DashProject[]>([]);
const projectMap = ref<Map<number, string>>(new Map());
async function loadProjects() {
try {
const data = await apiGet<{ projects: DashProject[] }>("/api/projects?status=active");
const projects = data.projects.slice(0, 6);
projectMap.value = new Map(data.projects.map((p) => [p.id, p.title]));
// Fetch summaries in parallel
await Promise.allSettled(
projects.map(async (p) => {
try {
const full = await apiGet<DashProject>(`/api/projects/${p.id}`);
p.summary = full.summary;
} catch { /* non-fatal */ }
})
);
activeProjects.value = projects;
} catch { /* non-fatal */ }
}
function milestoneColor(index: number): string {
const palette = [
"var(--color-primary)",
"var(--color-success, #22c55e)",
"#c98a00",
"var(--color-danger, #e74c3c)",
"#8b5cf6",
];
return palette[index % palette.length];
}
// ─── Sorting helpers ──────────────────────────────────────────────────────────
const PRIORITY_ORDER: Record<string, number> = {
high: 3,
medium: 2,
low: 1,
none: 0,
high: 3, medium: 2, low: 1, none: 0,
};
function dateStr(offsetDays: number = 0): string {
const d = new Date();
d.setDate(d.getDate() + offsetDays);
return (
d.getFullYear() +
"-" +
String(d.getMonth() + 1).padStart(2, "0") +
"-" +
d.getFullYear() + "-" +
String(d.getMonth() + 1).padStart(2, "0") + "-" +
String(d.getDate()).padStart(2, "0")
);
}
@@ -54,19 +105,17 @@ function sortByPriorityThenDate(tasks: Task[]): Task[] {
}
function sortOtherTasks(tasks: Task[]): Task[] {
const withDate = tasks
.filter((t) => t.due_date)
.sort((a, b) => a.due_date!.localeCompare(b.due_date!));
const withoutDate = tasks
.filter((t) => !t.due_date)
.sort((a, b) => {
const pa = PRIORITY_ORDER[a.priority ?? "none"] ?? 0;
const pb = PRIORITY_ORDER[b.priority ?? "none"] ?? 0;
return pb - pa;
});
const withDate = tasks.filter((t) => t.due_date).sort((a, b) => a.due_date!.localeCompare(b.due_date!));
const withoutDate = tasks.filter((t) => !t.due_date).sort((a, b) => {
const pa = PRIORITY_ORDER[a.priority ?? "none"] ?? 0;
const pb = PRIORITY_ORDER[b.priority ?? "none"] ?? 0;
return pb - pa;
});
return [...withDate, ...withoutDate].slice(0, 10);
}
// ─── Data loading ─────────────────────────────────────────────────────────────
onMounted(async () => {
const today = dateStr(0);
const nextWeek = dateStr(7);
@@ -74,79 +123,48 @@ onMounted(async () => {
const [notesRes, overdueRes, dueSoonRes, highPriRes, inProgressRes, otherRes] =
await Promise.allSettled([
apiGet<NoteListResponse>("/api/notes?sort=updated_at&order=desc&limit=8"),
apiGet<TaskListResponse>(
`/api/tasks?due_before=${today}&sort=due_date&order=asc&limit=20`
),
apiGet<TaskListResponse>(
`/api/tasks?due_after=${today}&due_before=${nextWeek}&sort=due_date&order=asc&limit=20`
),
apiGet<TaskListResponse>(
`/api/tasks?priority=high&sort=updated_at&order=desc&limit=10`
),
apiGet<TaskListResponse>(
`/api/tasks?status=in_progress&sort=updated_at&order=desc&limit=10`
),
apiGet<TaskListResponse>(
`/api/tasks?sort=updated_at&order=desc&limit=50`
),
apiGet<TaskListResponse>(`/api/tasks?due_before=${today}&sort=due_date&order=asc&limit=20`),
apiGet<TaskListResponse>(`/api/tasks?due_after=${today}&due_before=${nextWeek}&sort=due_date&order=asc&limit=20`),
apiGet<TaskListResponse>(`/api/tasks?priority=high&sort=updated_at&order=desc&limit=10`),
apiGet<TaskListResponse>(`/api/tasks?status=in_progress&sort=updated_at&order=desc&limit=10`),
apiGet<TaskListResponse>(`/api/tasks?sort=updated_at&order=desc&limit=50`),
]);
if (notesRes.status === "fulfilled") {
recentNotes.value = notesRes.value.notes;
}
if (notesRes.status === "fulfilled") recentNotes.value = notesRes.value.notes;
// Build seen-set incrementally so each section deduplicates against all above it
const seen = new Set<number>();
if (overdueRes.status === "fulfilled") {
overdueTasks.value = sortByPriorityThenDate(
overdueRes.value.tasks.filter((t) => t.status !== "done")
);
overdueTasks.value = sortByPriorityThenDate(overdueRes.value.tasks.filter((t) => t.status !== "done"));
for (const t of overdueTasks.value) seen.add(t.id);
}
if (dueSoonRes.status === "fulfilled") {
const notDone = dueSoonRes.value.tasks.filter(
(t) => t.status !== "done" && !seen.has(t.id)
);
const todayList: Task[] = [];
const weekList: Task[] = [];
const notDone = dueSoonRes.value.tasks.filter((t) => t.status !== "done" && !seen.has(t.id));
const todayList: Task[] = [], weekList: Task[] = [];
for (const t of notDone) {
if (t.due_date === today) {
todayList.push(t);
} else {
weekList.push(t);
}
(t.due_date === today ? todayList : weekList).push(t);
}
dueTodayTasks.value = sortByPriorityThenDate(todayList);
dueThisWeekTasks.value = sortByPriorityThenDate(weekList);
for (const t of dueTodayTasks.value) seen.add(t.id);
for (const t of dueThisWeekTasks.value) seen.add(t.id);
}
if (highPriRes.status === "fulfilled") {
highPriorityTasks.value = highPriRes.value.tasks.filter(
(t) => t.status !== "done" && !seen.has(t.id)
);
highPriorityTasks.value = highPriRes.value.tasks.filter((t) => t.status !== "done" && !seen.has(t.id));
for (const t of highPriorityTasks.value) seen.add(t.id);
}
if (inProgressRes.status === "fulfilled") {
inProgressTasks.value = inProgressRes.value.tasks.filter(
(t) => !seen.has(t.id)
);
inProgressTasks.value = inProgressRes.value.tasks.filter((t) => !seen.has(t.id));
for (const t of inProgressTasks.value) seen.add(t.id);
}
if (otherRes.status === "fulfilled") {
const remaining = otherRes.value.tasks.filter(
(t) => t.status !== "done" && !seen.has(t.id)
);
otherTasks.value = sortOtherTasks(remaining);
otherTasks.value = sortOtherTasks(otherRes.value.tasks.filter((t) => t.status !== "done" && !seen.has(t.id)));
}
loading.value = false;
nextTick(() => chatInputRef.value?.focus());
// Load projects in parallel (non-blocking)
loadProjects();
});
const noTasks = computed(
@@ -160,12 +178,8 @@ const noTasks = computed(
);
const allTaskLists = [
() => overdueTasks,
() => dueTodayTasks,
() => dueThisWeekTasks,
() => highPriorityTasks,
() => inProgressTasks,
() => otherTasks,
() => overdueTasks, () => dueTodayTasks, () => dueThisWeekTasks,
() => highPriorityTasks, () => inProgressTasks, () => otherTasks,
];
function removeFromAllLists(id: number) {
@@ -183,22 +197,19 @@ function onStatusToggle(id: number, status: TaskStatus) {
for (const getList of allTaskLists) {
const list = getList();
const idx = list.value.findIndex((t) => t.id === updated.id);
if (idx !== -1) {
list.value[idx] = updated;
break;
}
if (idx !== -1) { list.value[idx] = updated; break; }
}
}
});
}
// ─── Chat widget ──────────────────────────────────────────────────────────────
const chatInputRef = ref<{ focus: () => void } | null>(null);
const chatStore = useChatStore();
chatStore.fetchStatus().then(() => {
if (chatStore.defaultModel) {
chatStore.warmModel(chatStore.defaultModel);
}
if (chatStore.defaultModel) chatStore.warmModel(chatStore.defaultModel);
});
const dashboardConvId = ref<number | null>(null);
@@ -254,7 +265,7 @@ function clearDashboardResponse() {
<template>
<main class="home">
<!-- Chat widget — full width at top -->
<!-- Chat widget -->
<section class="chat-section">
<div class="quick-actions">
<button
@@ -263,39 +274,23 @@ function clearDashboardResponse() {
class="quick-action-chip"
:disabled="chatStore.streaming || !chatStore.chatReady"
@click="onQuickAction(q)"
>
{{ q }}
</button>
>{{ q }}</button>
</div>
<DashboardChatInput ref="chatInputRef" @submit="onChatSubmit" />
</section>
<!-- Inline response — full width -->
<!-- Inline response -->
<div v-if="dashboardConvId" class="dashboard-response">
<div class="dashboard-response-query">{{ dashboardQuery }}</div>
<div
v-if="chatStore.streaming && chatStore.streamingToolCalls.length"
class="dashboard-tool-calls"
>
<ToolCallCard
v-for="(tc, i) in chatStore.streamingToolCalls"
:key="i"
:tool-call="tc"
/>
<div v-if="chatStore.streaming && chatStore.streamingToolCalls.length" class="dashboard-tool-calls">
<ToolCallCard v-for="(tc, i) in chatStore.streamingToolCalls" :key="i" :tool-call="tc" />
</div>
<div v-else-if="dashboardDone && dashboardFinalToolCalls.length" class="dashboard-tool-calls">
<ToolCallCard
v-for="(tc, i) in dashboardFinalToolCalls"
:key="i"
:tool-call="tc"
/>
<ToolCallCard v-for="(tc, i) in dashboardFinalToolCalls" :key="i" :tool-call="tc" />
</div>
<div v-if="chatStore.streaming" class="dashboard-response-text streaming">
<div v-if="chatStore.streamingStatus && !chatStore.streamingContent" class="dashboard-status-line">
<span class="dashboard-status-dot"></span>
{{ chatStore.streamingStatus }}
<span class="dashboard-status-dot"></span>{{ chatStore.streamingStatus }}
</div>
<span v-else-if="chatStore.streamingContent">{{ chatStore.streamingContent }}</span>
<span v-else class="thinking-dots">...</span>
@@ -303,25 +298,22 @@ function clearDashboardResponse() {
<div v-else-if="dashboardDone && dashboardFinalContent" class="dashboard-response-text">
{{ dashboardFinalContent }}
</div>
<div class="dashboard-response-actions" :class="{ conversational: isConversational }">
<router-link
:to="`/chat/${dashboardConvId}`"
class="btn-open-chat"
:class="{ prominent: isConversational }"
>
{{ isConversational ? 'Continue the conversation →' : 'Think it through in Chat →' }}
</router-link>
>{{ isConversational ? 'Continue the conversation →' : 'Think it through in Chat →' }}</router-link>
<button class="btn-clear-response" @click="clearDashboardResponse">Clear</button>
</div>
</div>
<p v-if="loading" class="loading">Loading...</p>
<!-- Two-column grid -->
<!-- Main grid: Tasks + Notes -->
<div v-else class="dashboard-grid">
<!-- Left: Tasks -->
<!-- Tasks column -->
<div class="col-tasks">
<div class="col-header">
<h2>Tasks</h2>
@@ -336,11 +328,13 @@ function clearDashboardResponse() {
<template v-else>
<section v-if="overdueTasks.length" class="section section-overdue">
<h3 class="section-title">Overdue</h3>
<div class="cards">
<div class="task-rows">
<TaskCard
v-for="task in overdueTasks"
:key="task.id"
:task="task"
compact
:project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
@status-toggle="onStatusToggle"
/>
</div>
@@ -348,11 +342,13 @@ function clearDashboardResponse() {
<section v-if="dueTodayTasks.length" class="section">
<h3 class="section-title">Due Today</h3>
<div class="cards">
<div class="task-rows">
<TaskCard
v-for="task in dueTodayTasks"
:key="task.id"
:task="task"
compact
:project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
@status-toggle="onStatusToggle"
/>
</div>
@@ -360,11 +356,13 @@ function clearDashboardResponse() {
<section v-if="dueThisWeekTasks.length" class="section">
<h3 class="section-title">Due This Week</h3>
<div class="cards">
<div class="task-rows">
<TaskCard
v-for="task in dueThisWeekTasks"
:key="task.id"
:task="task"
compact
:project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
@status-toggle="onStatusToggle"
/>
</div>
@@ -372,11 +370,13 @@ function clearDashboardResponse() {
<section v-if="highPriorityTasks.length" class="section section-high-priority">
<h3 class="section-title">High Priority</h3>
<div class="cards">
<div class="task-rows">
<TaskCard
v-for="task in highPriorityTasks"
:key="task.id"
:task="task"
compact
:project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
@status-toggle="onStatusToggle"
/>
</div>
@@ -384,11 +384,13 @@ function clearDashboardResponse() {
<section v-if="inProgressTasks.length" class="section">
<h3 class="section-title">In Progress</h3>
<div class="cards">
<div class="task-rows">
<TaskCard
v-for="task in inProgressTasks"
:key="task.id"
:task="task"
compact
:project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
@status-toggle="onStatusToggle"
/>
</div>
@@ -396,11 +398,13 @@ function clearDashboardResponse() {
<section v-if="otherTasks.length" class="section">
<h3 class="section-title">Other</h3>
<div class="cards">
<div class="task-rows">
<TaskCard
v-for="task in otherTasks"
:key="task.id"
:task="task"
compact
:project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
@status-toggle="onStatusToggle"
/>
</div>
@@ -408,13 +412,13 @@ function clearDashboardResponse() {
</template>
</div>
<!-- Right: Notes -->
<!-- Notes column: 2-per-row mini grid -->
<div class="col-notes">
<div class="col-header">
<h2>Recent Notes</h2>
<router-link to="/notes" class="see-all">See all</router-link>
</div>
<div v-if="recentNotes.length" class="cards">
<div v-if="recentNotes.length" class="notes-mini-grid">
<NoteCard
v-for="note in recentNotes"
:key="note.id"
@@ -428,6 +432,53 @@ function clearDashboardResponse() {
</div>
</div>
<!-- Projects widget -->
<div v-if="activeProjects.length" class="projects-section">
<div class="col-header">
<h2>Active Projects</h2>
<router-link to="/projects" class="see-all">See all</router-link>
</div>
<div class="projects-strip">
<router-link
v-for="project in activeProjects"
:key="project.id"
:to="`/projects/${project.id}`"
class="project-mini-card"
>
<div class="project-mini-title">{{ project.title }}</div>
<template v-if="project.summary?.milestone_summary?.length">
<div
v-for="(ms, i) in project.summary.milestone_summary.filter(m => m.status !== 'archived')"
:key="ms.id"
class="ms-row"
>
<span class="ms-label">{{ ms.title }}</span>
<div class="ms-track">
<div
class="ms-fill"
:style="{ width: ms.pct + '%', background: milestoneColor(i) }"
></div>
</div>
<span class="ms-pct">{{ Math.round(ms.pct) }}%</span>
</div>
</template>
<div v-else-if="project.summary" class="project-mini-counts">
<span v-if="project.summary.task_counts.in_progress">
{{ project.summary.task_counts.in_progress }} in progress
</span>
<span v-if="project.summary.task_counts.todo">
{{ project.summary.task_counts.todo }} todo
</span>
<span v-if="!project.summary.task_counts.in_progress && !project.summary.task_counts.todo" class="muted">
No open tasks
</span>
</div>
<div v-else class="project-mini-counts muted">Loading…</div>
</router-link>
</div>
</div>
</main>
</template>
@@ -438,10 +489,8 @@ function clearDashboardResponse() {
padding: 0 1rem;
}
/* Chat section */
.chat-section {
margin-bottom: 1rem;
}
/* Chat */
.chat-section { margin-bottom: 1rem; }
.quick-actions {
display: flex;
flex-wrap: wrap;
@@ -462,10 +511,7 @@ function clearDashboardResponse() {
border-color: var(--color-primary);
color: var(--color-primary);
}
.quick-action-chip:disabled {
opacity: 0.4;
cursor: default;
}
.quick-action-chip:disabled { opacity: 0.4; cursor: default; }
/* Inline response */
.dashboard-response {
@@ -490,17 +536,11 @@ function clearDashboardResponse() {
.dashboard-response-text {
font-size: 0.9rem;
line-height: 1.55;
color: var(--color-text);
white-space: pre-wrap;
word-break: break-word;
}
.dashboard-response-text.streaming {
color: var(--color-text-muted);
}
.thinking-dots {
display: inline-block;
animation: blink 1.2s infinite;
}
.dashboard-response-text.streaming { color: var(--color-text-muted); }
.thinking-dots { display: inline-block; animation: blink 1.2s infinite; }
.dashboard-status-line {
display: flex;
align-items: center;
@@ -534,9 +574,7 @@ function clearDashboardResponse() {
text-decoration: none;
font-weight: 500;
}
.btn-open-chat:hover {
text-decoration: underline;
}
.btn-open-chat:hover { text-decoration: underline; }
.btn-open-chat.prominent {
background: var(--color-primary);
color: #fff;
@@ -544,10 +582,7 @@ function clearDashboardResponse() {
border-radius: var(--radius-sm);
font-size: 0.9rem;
}
.btn-open-chat.prominent:hover {
text-decoration: none;
opacity: 0.9;
}
.btn-open-chat.prominent:hover { text-decoration: none; opacity: 0.9; }
.btn-clear-response {
font-size: 0.8rem;
color: var(--color-text-muted);
@@ -556,11 +591,9 @@ function clearDashboardResponse() {
cursor: pointer;
padding: 0;
}
.btn-clear-response:hover {
color: var(--color-text);
}
.btn-clear-response:hover { color: var(--color-text); }
/* Two-column grid */
/* Main grid */
.dashboard-grid {
display: grid;
grid-template-columns: 3fr 2fr;
@@ -573,28 +606,20 @@ function clearDashboardResponse() {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.col-header h2 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.col-header h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.see-all {
color: var(--color-primary);
text-decoration: none;
font-size: 0.85rem;
}
.see-all:hover {
text-decoration: underline;
}
.see-all:hover { text-decoration: underline; }
/* Task sections */
.section {
margin-bottom: 1.5rem;
}
/* Task sections — compact rows */
.section { margin-bottom: 1.25rem; }
.section-title {
margin: 0 0 0.6rem;
margin: 0 0 0.4rem;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
@@ -605,31 +630,100 @@ function clearDashboardResponse() {
border-left: 3px solid var(--color-danger, #e74c3c);
padding-left: 0.75rem;
}
.section-overdue .section-title {
color: var(--color-danger, #e74c3c);
}
.section-overdue .section-title { color: var(--color-danger, #e74c3c); }
.section-high-priority {
border-left: 3px solid var(--color-warning, #f59e0b);
padding-left: 0.75rem;
}
.cards {
.task-rows {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.loading {
color: var(--color-text-secondary);
gap: 0.2rem;
}
/* Empty states */
.empty-state {
text-align: center;
padding: 1.5rem 0;
/* Notes mini-grid: 2-per-row within the column */
.notes-mini-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.6rem;
}
.empty-text {
/* Projects widget */
.projects-section {
margin-top: 2rem;
}
.projects-strip {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.75rem;
}
.project-mini-card {
display: block;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-card);
text-decoration: none;
color: inherit;
transition: box-shadow 0.15s;
}
.project-mini-card:hover {
box-shadow: 0 2px 8px var(--color-shadow);
}
.project-mini-title {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ms-row {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.3rem;
}
.ms-label {
font-size: 0.72rem;
color: var(--color-text-muted);
margin: 0 0 0.75rem;
width: 5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 0;
}
.ms-track {
flex: 1;
height: 5px;
background: var(--color-bg-secondary);
border-radius: 999px;
overflow: hidden;
}
.ms-fill {
height: 100%;
border-radius: 999px;
transition: width 0.3s;
}
.ms-pct {
font-size: 0.7rem;
color: var(--color-text-muted);
width: 2.2rem;
text-align: right;
flex-shrink: 0;
}
.project-mini-counts {
font-size: 0.8rem;
color: var(--color-text-secondary);
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.muted { color: var(--color-text-muted); }
.loading { color: var(--color-text-secondary); }
.empty-state { text-align: center; padding: 1.5rem 0; }
.empty-text { color: var(--color-text-muted); margin: 0 0 0.75rem; }
.btn-cta {
display: inline-block;
padding: 0.45rem 1rem;
@@ -644,8 +738,8 @@ function clearDashboardResponse() {
/* Mobile */
@media (max-width: 768px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
.dashboard-grid { grid-template-columns: 1fr; }
.notes-mini-grid { grid-template-columns: 1fr; }
.projects-strip { grid-template-columns: 1fr; }
}
</style>
frontend/src/views/NotesListView.vue
+77 -11
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, watch } from "vue";
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useNotesStore } from "@/stores/notes";
import SearchBar from "@/components/SearchBar.vue";
@@ -7,10 +7,21 @@ import NoteCard from "@/components/NoteCard.vue";
import TagPill from "@/components/TagPill.vue";
import PaginationBar from "@/components/PaginationBar.vue";
type ViewMode = "grid" | "list";
const route = useRoute();
const router = useRouter();
const store = useNotesStore();
const viewMode = ref<ViewMode>(
(localStorage.getItem("fabled-notes-view-mode") as ViewMode) ?? "grid"
);
function setViewMode(mode: ViewMode) {
viewMode.value = mode;
localStorage.setItem("fabled-notes-view-mode", mode);
}
onMounted(() => {
const tag = route.query.tag;
if (tag) {
@@ -81,9 +92,22 @@ function onOffsetUpdate(offset: number) {
<option value="title">Title</option>
</select>
<button class="sort-order" @click="toggleOrder" :title="store.sortOrder === 'asc' ? 'Ascending' : 'Descending'">
{{ store.sortOrder === "asc" ? "\u2191" : "\u2193" }}
{{ store.sortOrder === "asc" ? "↑" : "↓" }}
</button>
</div>
<!-- View mode toggle -->
<div class="view-toggle">
<button
:class="['toggle-btn', { active: viewMode === 'grid' }]"
title="Grid view"
@click="setViewMode('grid')"
>⊞</button>
<button
:class="['toggle-btn', { active: viewMode === 'list' }]"
title="Compact list"
@click="setViewMode('list')"
>☰</button>
</div>
</div>
<div v-if="store.activeTagFilters.length" class="active-filters">
@@ -99,10 +123,7 @@ function onOffsetUpdate(offset: number) {
</div>
<p v-if="store.loading">Loading...</p>
<div
v-else-if="store.notes.length === 0"
class="empty-state"
>
<div v-else-if="store.notes.length === 0" class="empty-state">
<template v-if="store.searchQuery || store.activeTagFilters.length">
<p class="empty-title">No notes match your filters</p>
<p class="empty-subtitle">Try adjusting your search or removing filters.</p>
@@ -113,7 +134,9 @@ function onOffsetUpdate(offset: number) {
<router-link to="/notes/new" class="btn-cta">+ New Note</router-link>
</template>
</div>
<div v-else class="cards">
<!-- Grid view -->
<div v-else-if="viewMode === 'grid'" class="cards-grid">
<NoteCard
v-for="note in store.notes"
:key="note.id"
@@ -122,6 +145,17 @@ function onOffsetUpdate(offset: number) {
/>
</div>
<!-- Compact list view -->
<div v-else class="cards-list">
<NoteCard
v-for="note in store.notes"
:key="note.id"
:note="note"
compact
@tag-click="onTagClick"
/>
</div>
<PaginationBar
:total="store.total"
:limit="store.limit"
@@ -156,7 +190,8 @@ function onOffsetUpdate(offset: number) {
}
.controls {
display: flex;
justify-content: flex-end;
justify-content: space-between;
align-items: center;
margin-top: 0.75rem;
}
.sort-controls {
@@ -181,6 +216,26 @@ function onOffsetUpdate(offset: number) {
cursor: pointer;
font-size: 0.95rem;
}
.view-toggle {
display: flex;
gap: 0.2rem;
}
.toggle-btn {
padding: 0.3rem 0.55rem;
border: 1px solid var(--color-input-border);
border-radius: var(--radius-sm);
background: var(--color-bg-card);
color: var(--color-text-muted);
cursor: pointer;
font-size: 1rem;
line-height: 1;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.toggle-btn.active {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.active-filters {
display: flex;
align-items: center;
@@ -200,12 +255,23 @@ function onOffsetUpdate(offset: number) {
font-size: 0.8rem;
padding: 0;
}
.cards {
display: flex;
flex-direction: column;
/* Grid layout */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0.75rem;
margin-top: 1rem;
}
/* Compact list layout */
.cards-list {
display: flex;
flex-direction: column;
gap: 0.3rem;
margin-top: 1rem;
}
.empty-state {
text-align: center;
margin-top: 3rem;
frontend/src/views/TasksListView.vue
+236 -22
View File
@@ -1,18 +1,83 @@
<script setup lang="ts">
import { onMounted, watch } from "vue";
import { ref, computed, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useTasksStore } from "@/stores/tasks";
import type { TaskStatus } from "@/types/task";
import type { Task, TaskStatus } from "@/types/task";
import { apiGet } from "@/api/client";
import SearchBar from "@/components/SearchBar.vue";
import TaskCard from "@/components/TaskCard.vue";
import TagPill from "@/components/TagPill.vue";
import PaginationBar from "@/components/PaginationBar.vue";
type ViewMode = "flat" | "grouped";
const route = useRoute();
const router = useRouter();
const store = useTasksStore();
onMounted(() => {
const viewMode = ref<ViewMode>(
(localStorage.getItem("fabled-tasks-view-mode") as ViewMode) ?? "flat"
);
function setViewMode(mode: ViewMode) {
viewMode.value = mode;
localStorage.setItem("fabled-tasks-view-mode", mode);
if (mode === "grouped") {
store.limit = 100;
store.offset = 0;
} else {
store.limit = 20;
store.offset = 0;
}
store.refresh();
}
// Project map for group labels and task breadcrumbs
const projectMap = ref<Map<number, string>>(new Map());
async function loadProjects() {
try {
const data = await apiGet<{ projects: { id: number; title: string }[] }>("/api/projects");
projectMap.value = new Map(data.projects.map((p) => [p.id, p.title]));
} catch {
// non-fatal — labels just won't show
}
}
// Grouped tasks: [{projectId, title, tasks[]}]
interface TaskGroup {
projectId: number | null;
title: string;
tasks: Task[];
}
const groupedTasks = computed<TaskGroup[]>(() => {
if (viewMode.value !== "grouped") return [];
const map = new Map<number | null, Task[]>();
for (const task of store.tasks) {
const key = task.project_id ?? null;
if (!map.has(key)) map.set(key, []);
map.get(key)!.push(task);
}
const groups: TaskGroup[] = [];
// Named projects first (sorted by title), then "No Project"
for (const [id, tasks] of map) {
if (id !== null) {
groups.push({
projectId: id,
title: projectMap.value.get(id) ?? `Project #${id}`,
tasks,
});
}
}
groups.sort((a, b) => a.title.localeCompare(b.title));
if (map.has(null)) {
groups.push({ projectId: null, title: "No Project", tasks: map.get(null)! });
}
return groups;
});
onMounted(async () => {
const tag = route.query.tag;
if (tag) {
const tags = Array.isArray(tag) ? (tag as string[]) : [tag as string];
@@ -21,7 +86,10 @@ onMounted(() => {
if (route.query.status) {
store.statusFilter = route.query.status as TaskStatus;
}
store.refresh();
if (viewMode.value === "grouped") {
store.limit = 100;
}
await Promise.all([store.refresh(), loadProjects()]);
});
watch(
@@ -82,6 +150,16 @@ function onStatusToggle(id: number, status: TaskStatus) {
function onOffsetUpdate(offset: number) {
store.setOffset(offset);
}
// Collapse state for grouped sections
const collapsedGroups = ref<Set<string>>(new Set());
function toggleGroup(key: string) {
if (collapsedGroups.value.has(key)) {
collapsedGroups.value.delete(key);
} else {
collapsedGroups.value.add(key);
}
}
</script>
<template>
@@ -108,17 +186,32 @@ function onOffsetUpdate(offset: number) {
<option value="high">High</option>
</select>
</div>
<div class="sort-controls">
<select :value="store.sortField" @change="onSortChange" class="sort-select">
<option value="updated_at">Updated</option>
<option value="created_at">Created</option>
<option value="title">Title</option>
<option value="due_date">Due Date</option>
<option value="priority">Priority</option>
</select>
<button class="sort-order" @click="toggleOrder" :title="store.sortOrder === 'asc' ? 'Ascending' : 'Descending'">
{{ store.sortOrder === "asc" ? "\u2191" : "\u2193" }}
</button>
<div class="right-controls">
<div class="sort-controls">
<select :value="store.sortField" @change="onSortChange" class="sort-select">
<option value="updated_at">Updated</option>
<option value="created_at">Created</option>
<option value="title">Title</option>
<option value="due_date">Due Date</option>
<option value="priority">Priority</option>
</select>
<button class="sort-order" @click="toggleOrder" :title="store.sortOrder === 'asc' ? 'Ascending' : 'Descending'">
{{ store.sortOrder === "asc" ? "↑" : "↓" }}
</button>
</div>
<!-- View mode toggle -->
<div class="view-toggle">
<button
:class="['toggle-btn', { active: viewMode === 'flat' }]"
title="Flat list"
@click="setViewMode('flat')"
>☰</button>
<button
:class="['toggle-btn', { active: viewMode === 'grouped' }]"
title="Group by project"
@click="setViewMode('grouped')"
>⊟</button>
</div>
</div>
</div>
@@ -135,10 +228,8 @@ function onOffsetUpdate(offset: number) {
</div>
<p v-if="store.loading">Loading...</p>
<div
v-else-if="store.tasks.length === 0"
class="empty-state"
>
<div v-else-if="store.tasks.length === 0" class="empty-state">
<template v-if="store.searchQuery || store.activeTagFilters.length || store.statusFilter || store.priorityFilter">
<p class="empty-title">No tasks match your filters</p>
<p class="empty-subtitle">Try adjusting your search or removing filters.</p>
@@ -149,17 +240,56 @@ function onOffsetUpdate(offset: number) {
<router-link to="/tasks/new" class="btn-cta">+ New Task</router-link>
</template>
</div>
<div v-else class="cards">
<!-- Grouped view -->
<template v-else-if="viewMode === 'grouped'">
<div
v-for="group in groupedTasks"
:key="group.projectId ?? 'none'"
class="task-group"
>
<button
class="group-header"
@click="toggleGroup(String(group.projectId))"
>
<span class="group-chevron">{{ collapsedGroups.has(String(group.projectId)) ? '▶' : '▼' }}</span>
<span class="group-title">{{ group.title }}</span>
<span class="group-count">{{ group.tasks.length }}</span>
<router-link
v-if="group.projectId"
:to="`/projects/${group.projectId}`"
class="group-open-link"
@click.stop
>Open project →</router-link>
</button>
<div v-if="!collapsedGroups.has(String(group.projectId))" class="group-tasks">
<TaskCard
v-for="task in group.tasks"
:key="task.id"
:task="task"
compact
@tag-click="onTagClick"
@status-toggle="onStatusToggle"
/>
</div>
</div>
</template>
<!-- Flat compact list -->
<div v-else class="cards-list">
<TaskCard
v-for="task 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"
/>
</div>
<PaginationBar
v-if="viewMode === 'flat'"
:total="store.total"
:limit="store.limit"
:offset="store.offset"
@@ -194,6 +324,7 @@ function onOffsetUpdate(offset: number) {
.controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.75rem;
gap: 0.5rem;
flex-wrap: wrap;
@@ -202,6 +333,11 @@ function onOffsetUpdate(offset: number) {
display: flex;
gap: 0.5rem;
}
.right-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.filter-select,
.sort-select {
padding: 0.3rem 0.5rem;
@@ -225,6 +361,26 @@ function onOffsetUpdate(offset: number) {
cursor: pointer;
font-size: 0.95rem;
}
.view-toggle {
display: flex;
gap: 0.2rem;
}
.toggle-btn {
padding: 0.3rem 0.55rem;
border: 1px solid var(--color-input-border);
border-radius: var(--radius-sm);
background: var(--color-bg-card);
color: var(--color-text-muted);
cursor: pointer;
font-size: 1rem;
line-height: 1;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.toggle-btn.active {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.active-filters {
display: flex;
align-items: center;
@@ -244,12 +400,70 @@ function onOffsetUpdate(offset: number) {
font-size: 0.8rem;
padding: 0;
}
.cards {
/* Flat compact list */
.cards-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
gap: 0.3rem;
margin-top: 1rem;
}
/* Grouped view */
.task-group {
margin-top: 1.25rem;
}
.group-header {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
background: none;
border: none;
border-bottom: 1px solid var(--color-border);
padding: 0.3rem 0 0.3rem 0;
cursor: pointer;
text-align: left;
color: var(--color-text);
}
.group-header:hover {
color: var(--color-primary);
}
.group-chevron {
font-size: 0.65rem;
color: var(--color-text-muted);
flex-shrink: 0;
}
.group-title {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
flex: 1;
}
.group-count {
font-size: 0.75rem;
color: var(--color-text-muted);
background: var(--color-bg-secondary);
border-radius: 999px;
padding: 0.1rem 0.45rem;
}
.group-open-link {
font-size: 0.75rem;
color: var(--color-primary);
text-decoration: none;
flex-shrink: 0;
}
.group-open-link:hover {
text-decoration: underline;
}
.group-tasks {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-top: 0.4rem;
}
.empty-state {
text-align: center;
margin-top: 3rem;