Enhance dashboard with 7-day lookahead, priority surfacing, and inline edit buttons

Dashboard improvements:
- Added "Due This Week" section (next 7 days) and "High Priority" section
  (amber accent, catches high-priority tasks not already shown by date)
- All task sections sort by priority desc then due date asc
- Cascading deduplication via shared seen-set across all 5 sections
- Combined due-today + due-this-week into single API call, split client-side
- Removed unused `tomorrow` variable (fixed vue-tsc build error)

Inline edit buttons:
- NoteCard and TaskCard show "Edit" button on hover (always visible on touch)
- Navigates directly to edit view via .prevent.stop on router-link cards
- Styled as subtle bordered button, highlights to primary on hover

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-14 11:15:37 -05:00
parent e02b681e91
commit 987ec56dc3
4 changed files with 216 additions and 39 deletions
+47 -3
View File
@@ -1,20 +1,29 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from "vue-router";
import type { Note } from "@/types/note"; import type { Note } from "@/types/note";
import TagPill from "@/components/TagPill.vue"; import TagPill from "@/components/TagPill.vue";
import { relativeTime } from "@/composables/useRelativeTime"; import { relativeTime } from "@/composables/useRelativeTime";
import { renderPreview } from "@/utils/markdown"; import { renderPreview } from "@/utils/markdown";
defineProps<{ note: Note }>(); const props = defineProps<{ note: Note }>();
const emit = defineEmits<{ "tag-click": [tag: string] }>(); const emit = defineEmits<{ "tag-click": [tag: string] }>();
const router = useRouter();
function onTagClick(tag: string) { function onTagClick(tag: string) {
emit("tag-click", tag); emit("tag-click", tag);
} }
function goEdit() {
router.push(`/notes/${props.note.id}/edit`);
}
</script> </script>
<template> <template>
<router-link :to="`/notes/${note.id}`" class="note-card"> <router-link :to="`/notes/${note.id}`" class="note-card">
<h3 class="note-title">{{ note.title || "Untitled" }}</h3> <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 v-if="note.body" class="note-preview prose" v-html="renderPreview(note.body)"></div>
<div class="note-meta"> <div class="note-meta">
<TagPill <TagPill
@@ -42,9 +51,44 @@ function onTagClick(tag: string) {
.note-card:hover { .note-card:hover {
box-shadow: 0 2px 8px var(--color-shadow); box-shadow: 0 2px 8px var(--color-shadow);
} }
.note-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.note-title { .note-title {
margin: 0 0 0.25rem; margin: 0;
font-size: 1.1rem; font-size: 1.1rem;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btn-edit {
flex-shrink: 0;
padding: 0.2rem 0.5rem;
font-size: 0.75rem;
background: transparent;
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, border-color 0.15s;
}
.note-card:hover .btn-edit {
opacity: 1;
}
.btn-edit:hover {
color: var(--color-primary);
border-color: var(--color-primary);
}
@media (hover: none) {
.btn-edit {
opacity: 1;
}
} }
.note-preview { .note-preview {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
+36
View File
@@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from "vue-router";
import type { Task, TaskStatus } from "@/types/task"; import type { Task, TaskStatus } from "@/types/task";
import StatusBadge from "@/components/StatusBadge.vue"; import StatusBadge from "@/components/StatusBadge.vue";
import PriorityBadge from "@/components/PriorityBadge.vue"; import PriorityBadge from "@/components/PriorityBadge.vue";
@@ -7,6 +8,7 @@ import { relativeTime } from "@/composables/useRelativeTime";
import { renderPreview } from "@/utils/markdown"; import { renderPreview } from "@/utils/markdown";
const props = defineProps<{ task: Task }>(); const props = defineProps<{ task: Task }>();
const router = useRouter();
const emit = defineEmits<{ const emit = defineEmits<{
"tag-click": [tag: string]; "tag-click": [tag: string];
"status-toggle": [id: number, status: TaskStatus]; "status-toggle": [id: number, status: TaskStatus];
@@ -22,6 +24,10 @@ function cycleStatus() {
emit("status-toggle", props.task.id, statusCycle[props.task.status!]); emit("status-toggle", props.task.id, statusCycle[props.task.status!]);
} }
function goEdit() {
router.push(`/tasks/${props.task.id}/edit`);
}
function isOverdue(): boolean { function isOverdue(): boolean {
if (!props.task.due_date || props.task.status === "done") return false; if (!props.task.due_date || props.task.status === "done") return false;
return new Date(props.task.due_date) < new Date(new Date().toDateString()); return new Date(props.task.due_date) < new Date(new Date().toDateString());
@@ -38,6 +44,7 @@ function isOverdue(): boolean {
/> />
<PriorityBadge :priority="task.priority!" /> <PriorityBadge :priority="task.priority!" />
<h3 class="task-title">{{ task.title || "Untitled" }}</h3> <h3 class="task-title">{{ task.title || "Untitled" }}</h3>
<button class="btn-edit" title="Edit" @click.prevent.stop="goEdit">Edit</button>
</div> </div>
<div v-if="task.body" class="task-preview prose" v-html="renderPreview(task.body)"></div> <div v-if="task.body" class="task-preview prose" v-html="renderPreview(task.body)"></div>
<div class="task-meta"> <div class="task-meta">
@@ -78,6 +85,35 @@ function isOverdue(): boolean {
.task-title { .task-title {
margin: 0; margin: 0;
font-size: 1.1rem; font-size: 1.1rem;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btn-edit {
flex-shrink: 0;
padding: 0.2rem 0.5rem;
font-size: 0.75rem;
background: transparent;
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, border-color 0.15s;
}
.task-card:hover .btn-edit {
opacity: 1;
}
.btn-edit:hover {
color: var(--color-primary);
border-color: var(--color-primary);
}
@media (hover: none) {
.btn-edit {
opacity: 1;
}
} }
.task-preview { .task-preview {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
+122 -29
View File
@@ -15,37 +15,63 @@ const router = useRouter();
const recentNotes = ref<Note[]>([]); const recentNotes = ref<Note[]>([]);
const overdueTasks = ref<Task[]>([]); const overdueTasks = ref<Task[]>([]);
const dueTodayTasks = ref<Task[]>([]); const dueTodayTasks = ref<Task[]>([]);
const dueThisWeekTasks = ref<Task[]>([]);
const highPriorityTasks = ref<Task[]>([]);
const inProgressTasks = ref<Task[]>([]); const inProgressTasks = ref<Task[]>([]);
const recentChats = ref<Conversation[]>([]); const recentChats = ref<Conversation[]>([]);
const loading = ref(true); const loading = ref(true);
const tasksStore = useTasksStore(); const tasksStore = useTasksStore();
function todayStr(): string { const PRIORITY_ORDER: Record<string, number> = {
high: 3,
medium: 2,
low: 1,
none: 0,
};
function dateStr(offsetDays: number = 0): string {
const d = new Date(); const d = new Date();
return d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0"); d.setDate(d.getDate() + offsetDays);
return (
d.getFullYear() +
"-" +
String(d.getMonth() + 1).padStart(2, "0") +
"-" +
String(d.getDate()).padStart(2, "0")
);
} }
function tomorrowStr(): string { function sortByPriorityThenDate(tasks: Task[]): Task[] {
const d = new Date(); return tasks.slice().sort((a, b) => {
d.setDate(d.getDate() + 1); const pa = PRIORITY_ORDER[a.priority ?? "none"] ?? 0;
return d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0"); const pb = PRIORITY_ORDER[b.priority ?? "none"] ?? 0;
if (pb !== pa) return pb - pa;
// Earlier due dates first; null due dates last
if (a.due_date && b.due_date) return a.due_date.localeCompare(b.due_date);
if (a.due_date) return -1;
if (b.due_date) return 1;
return 0;
});
} }
onMounted(async () => { onMounted(async () => {
const today = todayStr(); const today = dateStr(0);
const tomorrow = tomorrowStr(); const nextWeek = dateStr(7);
const [notesRes, overdueRes, dueTodayRes, inProgressRes, chatsRes] = const [notesRes, overdueRes, dueSoonRes, highPriRes, inProgressRes, chatsRes] =
await Promise.allSettled([ await Promise.allSettled([
apiGet<NoteListResponse>("/api/notes?sort=updated_at&order=desc&limit=5"), apiGet<NoteListResponse>("/api/notes?sort=updated_at&order=desc&limit=5"),
apiGet<TaskListResponse>( apiGet<TaskListResponse>(
`/api/tasks?due_before=${today}&sort=due_date&order=asc&limit=15` `/api/tasks?due_before=${today}&sort=due_date&order=asc&limit=20`
), ),
apiGet<TaskListResponse>( apiGet<TaskListResponse>(
`/api/tasks?due_after=${today}&due_before=${tomorrow}&sort=priority&order=desc&limit=10` `/api/tasks?due_after=${today}&due_before=${nextWeek}&sort=due_date&order=asc&limit=20`
), ),
apiGet<TaskListResponse>( apiGet<TaskListResponse>(
`/api/tasks?status=in_progress&sort=updated_at&order=desc&limit=5` `/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<{ conversations: Conversation[]; total: number }>( apiGet<{ conversations: Conversation[]; total: number }>(
"/api/chat/conversations?limit=3&offset=0" "/api/chat/conversations?limit=3&offset=0"
@@ -59,23 +85,47 @@ onMounted(async () => {
recentChats.value = chatsRes.value.conversations; recentChats.value = chatsRes.value.conversations;
} }
// Filter out done tasks from overdue and due-today // Build seen-set incrementally so each section deduplicates against all above it
const seen = new Set<number>();
// Overdue: past due, not done
if (overdueRes.status === "fulfilled") { if (overdueRes.status === "fulfilled") {
overdueTasks.value = overdueRes.value.tasks.filter( overdueTasks.value = sortByPriorityThenDate(
(t) => t.status !== "done" overdueRes.value.tasks.filter((t) => t.status !== "done")
);
}
if (dueTodayRes.status === "fulfilled") {
dueTodayTasks.value = dueTodayRes.value.tasks.filter(
(t) => t.status !== "done"
); );
for (const t of overdueTasks.value) seen.add(t.id);
} }
// Deduplicate in-progress against overdue and due-today // Due soon: split into "today" and "this week", exclude done
if (inProgressRes.status === "fulfilled") { if (dueSoonRes.status === "fulfilled") {
const seen = new Set<number>(); const notDone = dueSoonRes.value.tasks.filter(
for (const t of overdueTasks.value) seen.add(t.id); (t) => t.status !== "done" && !seen.has(t.id)
);
const todayList: Task[] = [];
const weekList: Task[] = [];
for (const t of notDone) {
if (t.due_date === today) {
todayList.push(t);
} else {
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 dueTodayTasks.value) seen.add(t.id);
for (const t of dueThisWeekTasks.value) seen.add(t.id);
}
// High priority: not done, deduplicated
if (highPriRes.status === "fulfilled") {
highPriorityTasks.value = highPriRes.value.tasks.filter(
(t) => t.status !== "done" && !seen.has(t.id)
);
for (const t of highPriorityTasks.value) seen.add(t.id);
}
// In progress: deduplicated against all above
if (inProgressRes.status === "fulfilled") {
inProgressTasks.value = inProgressRes.value.tasks.filter( inProgressTasks.value = inProgressRes.value.tasks.filter(
(t) => !seen.has(t.id) (t) => !seen.has(t.id)
); );
@@ -84,10 +134,19 @@ onMounted(async () => {
loading.value = false; loading.value = false;
}); });
const allTaskLists = [
() => overdueTasks,
() => dueTodayTasks,
() => dueThisWeekTasks,
() => highPriorityTasks,
() => inProgressTasks,
];
function removeFromAllLists(id: number) { function removeFromAllLists(id: number) {
overdueTasks.value = overdueTasks.value.filter((t) => t.id !== id); for (const getList of allTaskLists) {
dueTodayTasks.value = dueTodayTasks.value.filter((t) => t.id !== id); const list = getList();
inProgressTasks.value = inProgressTasks.value.filter((t) => t.id !== id); list.value = list.value.filter((t) => t.id !== id);
}
} }
function onStatusToggle(id: number, status: TaskStatus) { function onStatusToggle(id: number, status: TaskStatus) {
@@ -95,8 +154,8 @@ function onStatusToggle(id: number, status: TaskStatus) {
if (updated.status === "done") { if (updated.status === "done") {
removeFromAllLists(updated.id); removeFromAllLists(updated.id);
} else { } else {
// Update in whichever list contains it for (const getList of allTaskLists) {
for (const list of [overdueTasks, dueTodayTasks, inProgressTasks]) { const list = getList();
const idx = list.value.findIndex((t) => t.id === updated.id); const idx = list.value.findIndex((t) => t.id === updated.id);
if (idx !== -1) { if (idx !== -1) {
list.value[idx] = updated; list.value[idx] = updated;
@@ -152,6 +211,36 @@ async function newChat() {
</div> </div>
</section> </section>
<section v-if="dueThisWeekTasks.length" class="section">
<div class="section-header">
<h2>Due This Week</h2>
<router-link to="/tasks" class="see-all">See all</router-link>
</div>
<div class="cards">
<TaskCard
v-for="task in dueThisWeekTasks"
:key="task.id"
:task="task"
@status-toggle="onStatusToggle"
/>
</div>
</section>
<section v-if="highPriorityTasks.length" class="section section-high-priority">
<div class="section-header">
<h2>High Priority</h2>
<router-link to="/tasks" class="see-all">See all</router-link>
</div>
<div class="cards">
<TaskCard
v-for="task in highPriorityTasks"
:key="task.id"
:task="task"
@status-toggle="onStatusToggle"
/>
</div>
</section>
<section v-if="inProgressTasks.length" class="section"> <section v-if="inProgressTasks.length" class="section">
<div class="section-header"> <div class="section-header">
<h2>In Progress</h2> <h2>In Progress</h2>
@@ -229,6 +318,10 @@ async function newChat() {
border-left: 3px solid var(--color-overdue, #e74c3c); border-left: 3px solid var(--color-overdue, #e74c3c);
padding-left: 0.75rem; padding-left: 0.75rem;
} }
.section-high-priority {
border-left: 3px solid var(--color-warning, #f59e0b);
padding-left: 0.75rem;
}
.section-header { .section-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
+11 -7
View File
@@ -314,7 +314,7 @@ fabledassistant/
│ │ ├── RegisterInviteView.vue # Invitation-based registration: validates token, creates account with pre-set email │ │ ├── RegisterInviteView.vue # Invitation-based registration: validates token, creates account with pre-set email
│ │ ├── UserManagementView.vue # Admin user management: registration toggle, invitations (send/revoke), user list with delete │ │ ├── UserManagementView.vue # Admin user management: registration toggle, invitations (send/revoke), user list with delete
│ │ ├── ChatView.vue # Dedicated /chat page: responsive sidebar (overlay on mobile), bubble messages, note picker, context pills │ │ ├── ChatView.vue # Dedicated /chat page: responsive sidebar (overlay on mobile), bubble messages, note picker, context pills
│ │ ├── HomeView.vue # Actionable dashboard: overdue tasks, due today, in progress, recent chats, recently edited notes │ │ ├── HomeView.vue # Actionable dashboard: overdue, due today, due this week, high priority, in progress tasks; recent chats; recently edited notes
│ │ ├── SettingsView.vue # Settings page: assistant name, model catalog, data export/restore (admin) │ │ ├── SettingsView.vue # Settings page: assistant name, model catalog, data export/restore (admin)
│ │ ├── NotesListView.vue # Note list: search, sort, tag filter pills, pagination │ │ ├── NotesListView.vue # Note list: search, sort, tag filter pills, pagination
│ │ ├── NoteEditorView.vue # Create/edit: Tiptap editor, sticky toolbar, AI Assist panel (bottom 1/3), Ctrl+S, unsaved guard │ │ ├── NoteEditorView.vue # Create/edit: Tiptap editor, sticky toolbar, AI Assist panel (bottom 1/3), Ctrl+S, unsaved guard
@@ -327,8 +327,8 @@ fabledassistant/
│ │ ├── AppHeader.vue # Nav bar: brand, nav links (incl. admin Logs), status indicator, theme toggle, user info + logout, hamburger menu (mobile) │ │ ├── AppHeader.vue # Nav bar: brand, nav links (incl. admin Logs), status indicator, theme toggle, user info + logout, hamburger menu (mobile)
│ │ ├── ChatPanel.vue # Slide-out chat panel (right side overlay, receives contextNoteId prop), bubble-style messages, floating dark input, note picker, context pills with promote/exclude │ │ ├── ChatPanel.vue # Slide-out chat panel (right side overlay, receives contextNoteId prop), bubble-style messages, floating dark input, note picker, context pills with promote/exclude
│ │ ├── ChatMessage.vue # Message bubble: markdown rendering, configurable assistant name label, "Save as Note" action on assistant messages │ │ ├── ChatMessage.vue # Message bubble: markdown rendering, configurable assistant name label, "Save as Note" action on assistant messages
│ │ ├── NoteCard.vue # Card with rendered markdown preview (v-html), TagPill, tag-click emit │ │ ├── NoteCard.vue # Card with rendered markdown preview (v-html), TagPill, tag-click emit, hover edit button
│ │ ├── TaskCard.vue # Card with rendered preview (body not description), StatusBadge (clickable), PriorityBadge, due date, tags │ │ ├── TaskCard.vue # Card with rendered preview (body not description), StatusBadge (clickable), PriorityBadge, due date, tags, hover edit button
│ │ ├── StatusBadge.vue # Color-coded status badge, optional clickable cycling │ │ ├── StatusBadge.vue # Color-coded status badge, optional clickable cycling
│ │ ├── PriorityBadge.vue # Color-coded priority indicator (hidden for "none") │ │ ├── PriorityBadge.vue # Color-coded priority indicator (hidden for "none")
│ │ ├── MarkdownToolbar.vue # Tiptap command-based toolbar: bold/italic/link/list/heading with active state highlighting │ │ ├── MarkdownToolbar.vue # Tiptap command-based toolbar: bold/italic/link/list/heading with active state highlighting
@@ -705,11 +705,14 @@ When adding a new migration, follow these conventions:
### Phase 5.9 — Actionable "Today" Dashboard ✓ ### Phase 5.9 — Actionable "Today" Dashboard ✓
- [x] **Due date filtering API:** Added `due_before` (exclusive `<`) and `due_after` (inclusive `>=`) params to `list_notes()` and `/api/tasks` endpoint - [x] **Due date filtering API:** Added `due_before` (exclusive `<`) and `due_after` (inclusive `>=`) params to `list_notes()` and `/api/tasks` endpoint
- [x] **Dashboard rewrite:** HomeView now shows Overdue (red left-border accent), Due Today, In Progress, Recent Chats, Recently Edited sections - [x] **Dashboard rewrite:** HomeView shows 5 task sections: Overdue (red accent), Due Today, Due This Week (next 7 days), High Priority (amber accent, catches important tasks not already shown by date), In Progress (deduplicated catch-all)
- [x] **Parallel fetching:** 5 API calls via `Promise.allSettled` — notes, overdue tasks, due-today tasks, in-progress tasks, chats - [x] **Priority-aware sorting:** All task sections sort by priority desc then due date asc — highest priority items surface first within each section
- [x] **Client-side filtering:** Filters out `done` tasks from overdue/due-today, deduplicates in-progress against other lists - [x] **Parallel fetching:** 6 API calls via `Promise.allSettled` — notes, overdue, due-soon (split client-side into today/week), high priority, in-progress, chats
- [x] **Cascading deduplication:** Each section builds on a shared `seen` set so tasks only appear in their highest-priority section
- [x] **Client-side filtering:** Filters out `done` tasks from all date/priority sections
- [x] **Task sections hidden when empty:** Only shown if there are matching tasks - [x] **Task sections hidden when empty:** Only shown if there are matching tasks
- [x] **Status toggle:** Marking a task `done` removes it from all dashboard lists - [x] **Status toggle:** Marking a task `done` removes it from all dashboard lists
- [x] **Inline edit buttons:** NoteCard and TaskCard show an "Edit" button on hover (always visible on touch devices) that navigates directly to the edit view
### Future / Stretch ### Future / Stretch
- Tagging/labeling system with LLM-suggested tags - Tagging/labeling system with LLM-suggested tags
@@ -744,7 +747,8 @@ When adding a new migration, follow these conventions:
- **Registration control**: auto-closes after first user, admin toggle, invitation-based registration - **Registration control**: auto-closes after first user, admin toggle, invitation-based registration
- **Admin user management**: `/admin/users` with user list, delete, invite, revoke - **Admin user management**: `/admin/users` with user list, delete, invite, revoke
- **Session cookie hardening**: HttpOnly, SameSite=Lax, optional Secure flag - **Session cookie hardening**: HttpOnly, SameSite=Lax, optional Secure flag
- **Actionable dashboard**: HomeView shows overdue/due-today/in-progress task sections (hidden when empty), recent chats, recently edited notes - **Actionable dashboard**: HomeView shows overdue/due-today/due-this-week/high-priority/in-progress task sections (priority-sorted, cascading dedup, hidden when empty), recent chats, recently edited notes
- **Inline edit buttons**: NoteCard and TaskCard show hover edit button for direct navigation to edit view
- **Table of contents**: Sticky sidebar on note/task viewers, auto-generated from markdown headings - **Table of contents**: Sticky sidebar on note/task viewers, auto-generated from markdown headings
- **App-wide layout fix**: navbar always visible, all views fit within viewport - **App-wide layout fix**: navbar always visible, all views fit within viewport
- **Responsive design**: hamburger menu, mobile touch targets, responsive breakpoints - **Responsive design**: hamburger menu, mobile touch targets, responsive breakpoints