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/NotesListView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, watch } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useNotesStore } from "@/stores/notes";
 import SearchBar from "@/components/SearchBar.vue";
@@ -7,10 +7,21 @@ import NoteCard from "@/components/NoteCard.vue";
 import TagPill from "@/components/TagPill.vue";
 import PaginationBar from "@/components/PaginationBar.vue";
 
+type ViewMode = "grid" | "list";
+
 const route = useRoute();
 const router = useRouter();
 const store = useNotesStore();
 
+const viewMode = ref<ViewMode>(
+  (localStorage.getItem("fabled-notes-view-mode") as ViewMode) ?? "grid"
+);
+
+function setViewMode(mode: ViewMode) {
+  viewMode.value = mode;
+  localStorage.setItem("fabled-notes-view-mode", mode);
+}
+
 onMounted(() => {
   const tag = route.query.tag;
   if (tag) {
@@ -81,9 +92,22 @@ function onOffsetUpdate(offset: number) {
           <option value="title">Title</option>
         </select>
         <button class="sort-order" @click="toggleOrder" :title="store.sortOrder === 'asc' ? 'Ascending' : 'Descending'">
-          {{ store.sortOrder === "asc" ? "\u2191" : "\u2193" }}
+          {{ store.sortOrder === "asc" ? "↑" : "↓" }}
         </button>
       </div>
+      <!-- View mode toggle -->
+      <div class="view-toggle">
+        <button
+          :class="['toggle-btn', { active: viewMode === 'grid' }]"
+          title="Grid view"
+          @click="setViewMode('grid')"
+        >⊞</button>
+        <button
+          :class="['toggle-btn', { active: viewMode === 'list' }]"
+          title="Compact list"
+          @click="setViewMode('list')"
+        >☰</button>
+      </div>
     </div>
 
     <div v-if="store.activeTagFilters.length" class="active-filters">
@@ -99,10 +123,7 @@ function onOffsetUpdate(offset: number) {
     </div>
 
     <p v-if="store.loading">Loading...</p>
-    <div
-      v-else-if="store.notes.length === 0"
-      class="empty-state"
-    >
+    <div v-else-if="store.notes.length === 0" class="empty-state">
       <template v-if="store.searchQuery || store.activeTagFilters.length">
         <p class="empty-title">No notes match your filters</p>
         <p class="empty-subtitle">Try adjusting your search or removing filters.</p>
@@ -113,7 +134,9 @@ function onOffsetUpdate(offset: number) {
         <router-link to="/notes/new" class="btn-cta">+ New Note</router-link>
       </template>
     </div>
-    <div v-else class="cards">
+
+    <!-- Grid view -->
+    <div v-else-if="viewMode === 'grid'" class="cards-grid">
       <NoteCard
         v-for="note in store.notes"
         :key="note.id"
@@ -122,6 +145,17 @@ function onOffsetUpdate(offset: number) {
       />
     </div>
 
+    <!-- Compact list view -->
+    <div v-else class="cards-list">
+      <NoteCard
+        v-for="note in store.notes"
+        :key="note.id"
+        :note="note"
+        compact
+        @tag-click="onTagClick"
+      />
+    </div>
+
     <PaginationBar
       :total="store.total"
       :limit="store.limit"
@@ -156,7 +190,8 @@ function onOffsetUpdate(offset: number) {
 }
 .controls {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
   margin-top: 0.75rem;
 }
 .sort-controls {
@@ -181,6 +216,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;
@@ -200,12 +255,23 @@ function onOffsetUpdate(offset: number) {
   font-size: 0.8rem;
   padding: 0;
 }
-.cards {
-  display: flex;
-  flex-direction: column;
+
+/* Grid layout */
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 0.75rem;
   margin-top: 1rem;
 }
+
+/* Compact list layout */
+.cards-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  margin-top: 1rem;
+}
+
 .empty-state {
   text-align: center;
   margin-top: 3rem;