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/components/NoteCard.vue

@@ -5,7 +5,7 @@ import TagPill from "@/components/TagPill.vue";
 import { relativeTime } from "@/composables/useRelativeTime";
 import { renderPreview } from "@/utils/markdown";
 
-const props = defineProps<{ note: Note }>();
+const props = defineProps<{ note: Note; compact?: boolean }>();
 const emit = defineEmits<{ "tag-click": [tag: string] }>();
 const router = useRouter();
 
@@ -19,21 +19,40 @@ function goEdit() {
 </script>
 
 <template>
-  <router-link :to="`/notes/${note.id}`" class="note-card">
-    <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
-        v-for="tag in note.tags"
-        :key="tag"
-        :tag="tag"
-        @click.stop="onTagClick(tag)"
-      />
-      <span class="timestamp">{{ relativeTime(note.updated_at) }}</span>
-    </div>
+  <router-link :to="`/notes/${note.id}`" :class="['note-card', { compact }]">
+
+    <!-- Compact: single row -->
+    <template v-if="compact">
+      <span class="note-title-compact">{{ note.title || "Untitled" }}</span>
+      <div class="note-tags-compact">
+        <TagPill
+          v-for="tag in note.tags.slice(0, 3)"
+          :key="tag"
+          :tag="tag"
+          @click.stop="onTagClick(tag)"
+        />
+      </div>
+      <span class="timestamp-compact">{{ relativeTime(note.updated_at) }}</span>
+    </template>
+
+    <!-- Full: original layout -->
+    <template v-else>
+      <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
+          v-for="tag in note.tags"
+          :key="tag"
+          :tag="tag"
+          @click.stop="onTagClick(tag)"
+        />
+        <span class="timestamp">{{ relativeTime(note.updated_at) }}</span>
+      </div>
+    </template>
+
   </router-link>
 </template>
 
@@ -51,6 +70,36 @@ function goEdit() {
 .note-card:hover {
   box-shadow: 0 2px 8px var(--color-shadow);
 }
+
+/* Compact single-row layout */
+.note-card.compact {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.45rem 0.75rem;
+}
+.note-title-compact {
+  font-size: 0.9rem;
+  font-weight: 500;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.note-tags-compact {
+  display: flex;
+  gap: 0.3rem;
+  flex-shrink: 0;
+}
+.timestamp-compact {
+  font-size: 0.72rem;
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+/* Full layout */
 .note-top {
   display: flex;
   align-items: center;
@@ -75,7 +124,7 @@ function goEdit() {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: color 0.15s, border-color 0.15s, background 0.15s;
+  transition: color 0.15s, border-color 0.15s;
 }
 .btn-edit:hover {
   color: var(--color-primary);