From 987ec56dc35b8b7944ef45ac16859ec88551616b Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 14 Feb 2026 11:15:37 -0500
Subject: [PATCH] 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>
---
 frontend/src/components/NoteCard.vue |  50 ++++++++-
 frontend/src/components/TaskCard.vue |  36 +++++++
 frontend/src/views/HomeView.vue      | 151 ++++++++++++++++++++++-----
 summary.md                           |  18 ++--
 4 files changed, 216 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/NoteCard.vue b/frontend/src/components/NoteCard.vue
index 80cfce0..82aba99 100644
--- a/frontend/src/components/NoteCard.vue
+++ b/frontend/src/components/NoteCard.vue
@@ -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;
diff --git a/frontend/src/components/TaskCard.vue b/frontend/src/components/TaskCard.vue
index ad9f58e..2a14c37 100644
--- a/frontend/src/components/TaskCard.vue
+++ b/frontend/src/components/TaskCard.vue
@@ -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;
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 7fbd06b..41a28f7 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -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;
diff --git a/summary.md b/summary.md
index 627005a..b790f8c 100644
--- a/summary.md
+++ b/summary.md
@@ -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