UI polish: hover lift, skeleton loaders, empty states, badge contrast, transitions

Card & row interactions:
- NoteCard, TaskCard, ProjectCard: translateY(-2px) lift on hover + extended transitions
- Kanban task cards (ProjectView), note rows: same lift treatment
- Task rows in flat/grouped list: soft indigo bg tint on hover
- Chat conversation items: left-border accent + bg tint on hover (was border-only)
- HomeView project mini-cards: translateY(-2px) lift on hover

Global feedback:
- Buttons: scale(0.97) on :active press (theme.css, :not(:disabled) scoped)
- TagPill: color → primary + indigo bg tint on hover
- StatusBadge: increased opacity 15% → 22% + stronger text color for readability

Loading & empty states:
- TasksListView: shimmer skeleton loader (6 rows) + rich empty state with CTA
- ProjectListView: shimmer skeleton cards (4) + rich empty state with CTA
- HomeView: section-empty messages for overdue/high-priority/notes sections
- ProjectView kanban columns: dashed-border styled empty state

Transitions & graph:
- WorkspaceView panels: panel-fade opacity transition on show/hide (v-if inner wrap)
- GraphView D3 nodes: grow to r*1.3 + bold label on mouseover (150ms transition)
- Milestone action buttons: base opacity 0 → 0.35 for discoverability

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/assets/theme.css

@@ -128,6 +128,13 @@ a:focus-visible {
   border-radius: var(--radius-sm);
 }
 
+button:not(:disabled):active,
+.btn:not(:disabled):active,
+[role="button"]:not(:disabled):active {
+  transform: scale(0.97);
+  transition: transform 0.08s ease;
+}
+
 /* Responsive breakpoints: 480px (phone), 768px (tablet), 1024px (desktop) */
 @media (max-width: 768px) {
   .hide-mobile {

frontend/src/components/NoteCard.vue

@@ -65,10 +65,11 @@ function goEdit() {
   color: inherit;
   background: var(--color-bg-card);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.06);
-  transition: box-shadow 0.2s;
+  transition: box-shadow 0.2s, transform 0.18s ease;
 }
 .note-card:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(99, 102, 241, 0.14);
+  transform: translateY(-2px);
 }
 
 /* Compact single-row layout */

frontend/src/components/StatusBadge.vue

@@ -37,16 +37,16 @@ const labels: Record<TaskStatus, string> = {
   letter-spacing: 0.025em;
 }
 .status-todo {
-  background: var(--color-status-todo-bg);
+  background: color-mix(in srgb, var(--color-status-todo-bg) 78%, var(--color-status-todo) 22%);
-  color: var(--color-status-todo);
+  color: color-mix(in srgb, var(--color-status-todo) 85%, #000 15%);
 }
 .status-in_progress {
-  background: var(--color-status-in-progress-bg);
+  background: color-mix(in srgb, var(--color-status-in-progress-bg) 78%, var(--color-status-in-progress) 22%);
-  color: var(--color-status-in-progress);
+  color: color-mix(in srgb, var(--color-status-in-progress) 85%, #000 15%);
 }
 .status-done {
-  background: var(--color-status-done-bg);
+  background: color-mix(in srgb, var(--color-status-done-bg) 78%, var(--color-status-done) 22%);
-  color: var(--color-status-done);
+  color: color-mix(in srgb, var(--color-status-done) 85%, #000 15%);
 }
 .clickable {
   cursor: pointer;

frontend/src/components/TagPill.vue

@@ -36,9 +36,11 @@ defineEmits<{
   font-size: 0.8rem;
   cursor: pointer;
   white-space: nowrap;
+  transition: color 0.15s, background 0.15s;
 }
 .tag-pill:hover {
-  filter: brightness(0.95);
+  color: var(--color-primary);
+  background: rgba(99, 102, 241, 0.08);
 }
 .dismiss {
   background: none;

frontend/src/components/TaskCard.vue

@@ -102,10 +102,11 @@ function isOverdue(): boolean {
   color: inherit;
   background: var(--color-bg-card);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.06);
-  transition: box-shadow 0.2s;
+  transition: box-shadow 0.2s, transform 0.18s ease;
 }
 .task-card:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(99, 102, 241, 0.14);
+  transform: translateY(-2px);
 }
 
 /* Compact single-row layout */

frontend/src/views/ChatView.vue

@@ -999,13 +999,17 @@ onUnmounted(() => {
   border-radius: var(--radius-sm);
   cursor: pointer;
   margin-bottom: 0.25rem;
+  border-left: 3px solid transparent;
+  transition: background 0.15s, border-color 0.15s;
 }
 .conv-item:hover {
-  background: var(--color-bg-card);
+  background: rgba(99,102,241,0.05);
+  border-left: 3px solid var(--color-primary);
 }
 .conv-item.active {
   background: color-mix(in srgb, var(--color-primary) 15%, transparent);
   color: var(--color-primary);
+  border-left: 3px solid var(--color-primary);
 }
 .conv-info {
   flex: 1;

frontend/src/views/GraphView.vue

@@ -258,7 +258,7 @@ function initGraph() {
         openPeek(d);
       }
     })
-    .on("mouseover", (event: MouseEvent, d: GraphNode) => {
+    .on("mouseover", function(event: MouseEvent, d: GraphNode) {
       const rect = containerRef.value!.getBoundingClientRect();
       tooltip.value = {
         visible: true,
@@ -266,14 +266,28 @@ function initGraph() {
         y: event.clientY - rect.top - 8,
         node: d,
       };
+      select(this as SVGGElement).select("circle")
+        .transition().duration(150)
+        .attr("r", (d.radius ?? 8) * 1.3);
+      select(this as SVGGElement).select("text")
+        .transition().duration(150)
+        .style("font-weight", "600")
+        .style("font-size", "11px");
     })
     .on("mousemove", (event: MouseEvent) => {
       const rect = containerRef.value!.getBoundingClientRect();
       tooltip.value.x = event.clientX - rect.left + 12;
       tooltip.value.y = event.clientY - rect.top - 8;
     })
-    .on("mouseout", () => {
+    .on("mouseout", function(_event: MouseEvent, d: GraphNode) {
       tooltip.value.visible = false;
+      select(this as SVGGElement).select("circle")
+        .transition().duration(150)
+        .attr("r", d.radius ?? 8);
+      select(this as SVGGElement).select("text")
+        .transition().duration(150)
+        .style("font-weight", null)
+        .style("font-size", null);
     });
 
   nodeSel

frontend/src/views/HomeView.vue

@@ -397,6 +397,7 @@ function clearDashboardResponse() {
               />
             </div>
           </section>
+          <p v-else class="section-empty">All clear</p>
 
           <section v-if="dueTodayTasks.length" class="section">
             <h3 class="section-title">Due Today</h3>
@@ -439,6 +440,7 @@ function clearDashboardResponse() {
               />
             </div>
           </section>
+          <p v-else class="section-empty">All clear</p>
 
           <section v-if="inProgressTasks.length" class="section">
             <h3 class="section-title">In Progress</h3>
@@ -484,7 +486,7 @@ function clearDashboardResponse() {
           />
         </div>
         <div v-else class="empty-state">
-          <p class="empty-text">No notes yet.</p>
+          <p class="section-empty">No recent notes</p>
           <router-link to="/notes/new" class="btn-cta">+ New Note</router-link>
         </div>
       </div>
@@ -691,10 +693,11 @@ function clearDashboardResponse() {
   text-decoration: none;
   color: inherit;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.06);
-  transition: box-shadow 0.15s;
+  transition: box-shadow 0.18s ease, transform 0.18s ease;
 }
 .project-mini-card:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(99, 102, 241, 0.14);
+  transform: translateY(-2px);
 }
 .project-mini-title {
   font-size: 0.9rem;
@@ -748,6 +751,15 @@ function clearDashboardResponse() {
 }
 .muted { color: var(--color-text-muted); }
 
+.section-empty {
+  text-align: center;
+  padding: 1rem 0.5rem;
+  color: var(--color-text-muted);
+  font-size: 0.82rem;
+  font-style: italic;
+  margin: 0;
+}
+
 .loading { color: var(--color-text-secondary); }
 .empty-state { text-align: center; padding: 1.5rem 0; }
 .empty-state::before {

frontend/src/views/ProjectListView.vue

@@ -150,13 +150,16 @@ function truncate(text: string | null, max = 120): string {
       </button>
     </div>
 
-    <p v-if="loading" class="loading-msg">Loading...</p>
+    <div v-if="loading" class="skeleton-grid">
+      <div class="skeleton-card" v-for="i in 4" :key="i"></div>
+    </div>
     <p v-else-if="error" class="error-msg">{{ error }}</p>
 
-    <div v-else-if="filteredProjects.length === 0" class="empty-state">
+    <div v-else-if="filteredProjects.length === 0" class="empty-state-rich">
+      <div class="empty-icon">◈</div>
       <p class="empty-title">No projects yet</p>
-      <p class="empty-subtitle">Create your first project to organize tasks and notes.</p>
+      <p class="empty-sub">Organise your notes and tasks into a project</p>
-      <button class="btn-cta" @click="openNewProjectModal">+ New Project</button>
+      <button class="empty-action" @click="openNewProjectModal">New project →</button>
     </div>
 
     <div v-else class="projects-grid">
@@ -327,32 +330,28 @@ function truncate(text: string | null, max = 120): string {
   color: var(--color-danger);
 }
 
-.empty-state {
+.empty-state-rich { text-align: center; padding: 3rem 1rem; color: var(--color-text-muted); }
-  text-align: center;
+.empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.3; }
-  margin-top: 3rem;
+.empty-title { font-size: 1rem; font-weight: 600; color: var(--color-text-secondary); margin: 0 0 0.35rem; }
+.empty-sub { font-size: 0.85rem; margin: 0 0 1rem; }
+.empty-action { display: inline-block; padding: 0.4rem 1rem; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); color: var(--color-primary); background: none; cursor: pointer; font-size: 0.85rem; transition: background 0.15s, color 0.15s; }
+.empty-action:hover { background: var(--color-primary); color: #fff; }
+
+.skeleton-card {
+  height: 140px;
+  border-radius: var(--radius-md);
+  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border) 50%, var(--color-bg-secondary) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.4s ease infinite;
 }
-.empty-title {
+@keyframes skeleton-shimmer {
-  font-size: 1.1rem;
+  0% { background-position: 200% 0; }
-  font-weight: 600;
+  100% { background-position: -200% 0; }
-  margin: 0 0 0.25rem;
-  color: var(--color-text);
 }
-.empty-subtitle {
+.skeleton-grid {
-  color: var(--color-text-muted);
+  display: grid;
-  margin: 0 0 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  font-size: 0.95rem;
+  gap: 1rem;
-}
-.btn-cta {
-  display: inline-block;
-  padding: 0.45rem 1rem;
-  background: var(--color-primary);
-  color: #fff;
-  border: none;
-  border-radius: var(--radius-sm);
-  text-decoration: none;
-  font-size: 0.9rem;
-  cursor: pointer;
-  font-family: inherit;
 }
 
 .projects-grid {
@@ -367,7 +366,7 @@ function truncate(text: string | null, max = 120): string {
   border-radius: var(--radius-md);
   padding: 1rem 1.1rem;
   cursor: pointer;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color 0.15s, box-shadow 0.15s, transform 0.18s ease;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -375,6 +374,7 @@ function truncate(text: string | null, max = 120): string {
 .project-card:hover {
   border-color: var(--color-primary);
   box-shadow: 0 2px 8px var(--color-shadow);
+  transform: translateY(-2px);
 }
 
 .card-header {

frontend/src/views/ProjectView.vue

@@ -1031,10 +1031,11 @@ function formatDate(dateStr?: string | null): string {
   text-decoration: none;
   color: var(--color-text);
   font-size: 0.875rem;
-  transition: border-color 0.15s;
+  transition: border-color 0.15s, transform 0.18s ease;
 }
 .task-card:hover {
   border-color: var(--color-primary);
+  transform: translateY(-2px);
 }
 .task-card-done .task-title {
   text-decoration: line-through;
@@ -1069,11 +1070,13 @@ function formatDate(dateStr?: string | null): string {
   color: var(--color-text-muted);
 }
 .col-empty {
-  font-size: 0.8rem;
-  color: var(--color-text-muted);
   text-align: center;
-  padding: 0.5rem 0;
+  padding: 1.5rem 0.5rem;
-  margin: 0;
+  color: var(--color-text-muted);
+  font-size: 0.82rem;
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-sm);
+  margin-top: 0.5rem;
 }
 
 /* Notes list */
@@ -1093,10 +1096,11 @@ function formatDate(dateStr?: string | null): string {
   text-decoration: none;
   color: var(--color-text);
   font-size: 0.9rem;
-  transition: border-color 0.15s;
+  transition: border-color 0.15s, transform 0.15s ease;
 }
 .note-row:hover {
   border-color: var(--color-primary);
+  transform: translateY(-1px);
 }
 .note-title {
   font-weight: 500;
@@ -1193,7 +1197,7 @@ function formatDate(dateStr?: string | null): string {
   display: flex;
   gap: 0.15rem;
   margin-left: 0.25rem;
-  opacity: 0;
+  opacity: 0.35;
   transition: opacity 0.15s;
 }
 .milestone-header:hover .ms-actions {

frontend/src/views/TasksListView.vue

@@ -247,7 +247,9 @@ function toggleGroup(key: string) {
       <button class="clear-filters" @click="store.clearTagFilters()">Clear all</button>
     </div>
 
-    <p v-if="store.loading">Loading...</p>
+    <div v-if="store.loading" class="task-list-skeleton">
+      <div class="skeleton-row" v-for="i in 6" :key="i"></div>
+    </div>
 
     <div v-else-if="store.tasks.length === 0" class="empty-state">
       <template v-if="store.searchQuery || store.activeTagFilters.length || store.statusFilter || store.priorityFilter">
@@ -255,9 +257,12 @@ function toggleGroup(key: string) {
         <p class="empty-subtitle">Try adjusting your search or removing filters.</p>
       </template>
       <template v-else>
-        <p class="empty-title">No tasks yet</p>
+        <div class="empty-state-rich">
-        <p class="empty-subtitle">Create your first task to get started.</p>
+          <div class="empty-icon">✓</div>
-        <router-link to="/tasks/new" class="btn-cta">+ New Task</router-link>
+          <p class="empty-title">No tasks yet</p>
+          <p class="empty-sub">Create your first task to start tracking work</p>
+          <router-link to="/tasks/new" class="empty-action">New task →</router-link>
+        </div>
       </template>
     </div>
 
@@ -426,6 +431,23 @@ function toggleGroup(key: string) {
   padding: 0;
 }
 
+/* Skeleton loading */
+.task-list-skeleton {
+  margin-top: 1rem;
+}
+.skeleton-row {
+  height: 44px;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border) 50%, var(--color-bg-secondary) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.4s ease infinite;
+  margin-bottom: 0.3rem;
+}
+@keyframes skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
 /* Flat compact list */
 .cards-list {
   display: flex;
@@ -433,6 +455,13 @@ function toggleGroup(key: string) {
   gap: 0.3rem;
   margin-top: 1rem;
 }
+.cards-list > div {
+  border-radius: var(--radius-sm, 6px);
+  transition: background 0.15s;
+}
+.cards-list > div:hover {
+  background: rgba(99,102,241,0.05);
+}
 
 /* Grouped view */
 .task-group {
@@ -513,6 +542,40 @@ function toggleGroup(key: string) {
   text-decoration: none;
   font-size: 0.9rem;
 }
+.empty-state-rich {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--color-text-muted);
+}
+.empty-icon {
+  font-size: 2.5rem;
+  margin-bottom: 0.75rem;
+  opacity: 0.3;
+}
+.empty-state-rich .empty-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  margin: 0 0 0.35rem;
+}
+.empty-sub {
+  font-size: 0.85rem;
+  margin: 0 0 1rem;
+}
+.empty-action {
+  display: inline-block;
+  padding: 0.4rem 1rem;
+  border: 1px solid var(--color-primary);
+  border-radius: var(--radius-sm);
+  color: var(--color-primary);
+  text-decoration: none;
+  font-size: 0.85rem;
+  transition: background 0.15s, color 0.15s;
+}
+.empty-action:hover {
+  background: var(--color-primary);
+  color: #fff;
+}
 
 .kb-active-item {
   outline: 2px solid var(--color-primary);

frontend/src/views/WorkspaceView.vue

@@ -261,11 +261,15 @@ onUnmounted(async () => {
 
       <!-- Left: Tasks -->
       <div v-show="panelOpen.tasks" class="ws-panel">
-        <WorkspaceTaskPanel
+        <Transition name="panel-fade">
-          v-if="project"
+          <div v-if="panelOpen.tasks" class="panel-inner">
-          ref="taskPanelRef"
+            <WorkspaceTaskPanel
-          :project-id="project.id"
+              v-if="project"
-        />
+              ref="taskPanelRef"
+              :project-id="project.id"
+            />
+          </div>
+        </Transition>
       </div>
 
       <!-- Center: Chat -->
@@ -376,11 +380,15 @@ onUnmounted(async () => {
 
       <!-- Right: Note Editor -->
       <div v-show="panelOpen.notes" class="ws-panel">
-        <WorkspaceNoteEditor
+        <Transition name="panel-fade">
-          v-if="project"
+          <div v-if="panelOpen.notes" class="panel-inner">
-          :project-id="project.id"
+            <WorkspaceNoteEditor
-          :active-note-id="activeNoteId"
+              v-if="project"
-        />
+              :project-id="project.id"
+              :active-note-id="activeNoteId"
+            />
+          </div>
+        </Transition>
       </div>
 
     </div>
@@ -461,6 +469,21 @@ onUnmounted(async () => {
   min-width: 0;
 }
 
+.panel-inner {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-fade-enter-active,
+.panel-fade-leave-active {
+  transition: opacity 0.18s ease;
+}
+.panel-fade-enter-from,
+.panel-fade-leave-to {
+  opacity: 0;
+}
+
 /* Chat panel */
 .ws-chat-panel {
   display: flex;