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:
@@ -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;
|
||||
|
||||
@@ -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
@@ -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
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user