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

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>

frontend/src/views/TasksListView.vue

@@ -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;