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">
import { useRouter } from "vue-router";
import type { Note } from "@/types/note";
import TagPill from "@/components/TagPill.vue";
import { relativeTime } from "@/composables/useRelativeTime";
import { renderPreview } from "@/utils/markdown";
defineProps<{ note: Note }>();
const props = defineProps<{ note: Note }>();
const emit = defineEmits<{ "tag-click": [tag: string] }>();
const router = useRouter();
function onTagClick(tag: string) {
emit("tag-click", tag);
}
function goEdit() {
router.push(`/notes/${props.note.id}/edit`);
}
</script>
<template>
<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 class="note-meta">
<TagPill
@@ -42,9 +51,44 @@ function onTagClick(tag: string) {
.note-card:hover {
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 {
margin: 0 0 0.25rem;
margin: 0;
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 {
margin: 0 0 0.5rem;
+36
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { useRouter } from "vue-router";
import type { Task, TaskStatus } from "@/types/task";
import StatusBadge from "@/components/StatusBadge.vue";
import PriorityBadge from "@/components/PriorityBadge.vue";
@@ -7,6 +8,7 @@ import { relativeTime } from "@/composables/useRelativeTime";
import { renderPreview } from "@/utils/markdown";
const props = defineProps<{ task: Task }>();
const router = useRouter();
const emit = defineEmits<{
"tag-click": [tag: string];
"status-toggle": [id: number, status: TaskStatus];
@@ -22,6 +24,10 @@ function cycleStatus() {
emit("status-toggle", props.task.id, statusCycle[props.task.status!]);
}
function goEdit() {
router.push(`/tasks/${props.task.id}/edit`);
}
function isOverdue(): boolean {
if (!props.task.due_date || props.task.status === "done") return false;
return new Date(props.task.due_date) < new Date(new Date().toDateString());
@@ -38,6 +44,7 @@ function isOverdue(): boolean {
/>
<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">
@@ -78,6 +85,35 @@ function isOverdue(): boolean {
.task-title {
margin: 0;
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 {
margin: 0 0 0.5rem;
+122 -29
View File
@@ -15,37 +15,63 @@ const router = useRouter();
const recentNotes = ref<Note[]>([]);
const overdueTasks = ref<Task[]>([]);
const dueTodayTasks = ref<Task[]>([]);
const dueThisWeekTasks = ref<Task[]>([]);
const highPriorityTasks = ref<Task[]>([]);
const inProgressTasks = ref<Task[]>([]);
const recentChats = ref<Conversation[]>([]);
const loading = ref(true);
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();
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 {
const d = new Date();
d.setDate(d.getDate() + 1);
return d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
function sortByPriorityThenDate(tasks: Task[]): Task[] {
return tasks.slice().sort((a, b) => {
const pa = PRIORITY_ORDER[a.priority ?? "none"] ?? 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 () => {
const today = todayStr();
const tomorrow = tomorrowStr();
const today = dateStr(0);
const nextWeek = dateStr(7);
const [notesRes, overdueRes, dueTodayRes, inProgressRes, chatsRes] =
const [notesRes, overdueRes, dueSoonRes, highPriRes, inProgressRes, chatsRes] =
await Promise.allSettled([
apiGet<NoteListResponse>("/api/notes?sort=updated_at&order=desc&limit=5"),
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>(
`/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>(
`/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 }>(
"/api/chat/conversations?limit=3&offset=0"
@@ -59,23 +85,47 @@ onMounted(async () => {
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") {
overdueTasks.value = overdueRes.value.tasks.filter(
(t) => t.status !== "done"
);
}
if (dueTodayRes.status === "fulfilled") {
dueTodayTasks.value = dueTodayRes.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);
}
// Deduplicate in-progress against overdue and due-today
if (inProgressRes.status === "fulfilled") {
const seen = new Set<number>();
for (const t of overdueTasks.value) seen.add(t.id);
// Due soon: split into "today" and "this week", exclude done
if (dueSoonRes.status === "fulfilled") {
const notDone = dueSoonRes.value.tasks.filter(
(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 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(
(t) => !seen.has(t.id)
);
@@ -84,10 +134,19 @@ onMounted(async () => {
loading.value = false;
});
const allTaskLists = [
() => overdueTasks,
() => dueTodayTasks,
() => dueThisWeekTasks,
() => highPriorityTasks,
() => inProgressTasks,
];
function removeFromAllLists(id: number) {
overdueTasks.value = overdueTasks.value.filter((t) => t.id !== id);
dueTodayTasks.value = dueTodayTasks.value.filter((t) => t.id !== id);
inProgressTasks.value = inProgressTasks.value.filter((t) => t.id !== id);
for (const getList of allTaskLists) {
const list = getList();
list.value = list.value.filter((t) => t.id !== id);
}
}
function onStatusToggle(id: number, status: TaskStatus) {
@@ -95,8 +154,8 @@ function onStatusToggle(id: number, status: TaskStatus) {
if (updated.status === "done") {
removeFromAllLists(updated.id);
} else {
// Update in whichever list contains it
for (const list of [overdueTasks, dueTodayTasks, inProgressTasks]) {
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;
@@ -152,6 +211,36 @@ async function newChat() {
</div>
</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">
<div class="section-header">
<h2>In Progress</h2>
@@ -229,6 +318,10 @@ async function newChat() {
border-left: 3px solid var(--color-overdue, #e74c3c);
padding-left: 0.75rem;
}
.section-high-priority {
border-left: 3px solid var(--color-warning, #f59e0b);
padding-left: 0.75rem;
}
.section-header {
display: flex;
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
│ │ ├── 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
│ │ ├── 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)
│ │ ├── 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
@@ -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)
│ │ ├── 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
│ │ ├── NoteCard.vue # Card with rendered markdown preview (v-html), TagPill, tag-click emit
│ │ ├── TaskCard.vue # Card with rendered preview (body not description), StatusBadge (clickable), PriorityBadge, due date, tags
│ │ ├── 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, hover edit button
│ │ ├── StatusBadge.vue # Color-coded status badge, optional clickable cycling
│ │ ├── PriorityBadge.vue # Color-coded priority indicator (hidden for "none")
│ │ ├── 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 ✓
- [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] **Parallel fetching:** 5 API calls via `Promise.allSettled` — notes, overdue tasks, due-today tasks, in-progress tasks, chats
- [x] **Client-side filtering:** Filters out `done` tasks from overdue/due-today, deduplicates in-progress against other lists
- [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] **Priority-aware sorting:** All task sections sort by priority desc then due date asc — highest priority items surface first within each section
- [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] **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
- 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
- **Admin user management**: `/admin/users` with user list, delete, invite, revoke
- **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
- **App-wide layout fix**: navbar always visible, all views fit within viewport
- **Responsive design**: hamburger menu, mobile touch targets, responsive breakpoints