From 8a83ba8e115094e4ba08eef0182054c6c4584cd6 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 11 Mar 2026 11:00:08 -0400
Subject: [PATCH] Task views: same UI refinement pass as note views
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TaskEditorView:
- Back button standardized to "← Tasks"
- Toolbar now on same row as Write/Preview tabs (flex-direction row)
- Save button and title input inherit gradient/Fraunces from editor-shared.css

TaskViewerView:
- Shimmer skeleton loader replaces plain "Loading..." text
- Task title uses Fraunces font at 2rem
- Edit button becomes primary gradient CTA
- Meta timestamps show clock/pencil SVG icons
- Backlinks section: card grid with colored type badges (note=indigo, task=amber)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/views/TaskEditorView.vue |  10 +-
 frontend/src/views/TaskViewerView.vue | 234 ++++++++++++++++++++------
 2 files changed, 193 insertions(+), 51 deletions(-)

diff --git a/frontend/src/views/TaskEditorView.vue b/frontend/src/views/TaskEditorView.vue
index 751a94f..ee60b42 100644
--- a/frontend/src/views/TaskEditorView.vue
+++ b/frontend/src/views/TaskEditorView.vue
@@ -382,7 +382,7 @@ useEditorGuards(dirty, save);
   <main class="editor-page task-editor-page">
     <div class="editor-header">
       <div class="toolbar">
-        <router-link to="/tasks" class="btn-back">Back</router-link>
+        <router-link to="/tasks" class="btn-back">← Tasks</router-link>
         <button class="btn-save" @click="save" :disabled="saving">
           {{ saving ? "Saving..." : "Save" }}
         </button>
@@ -687,8 +687,12 @@ useEditorGuards(dirty, save);
 
 .body-tabs-row {
   display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .body-editor-wrap {
diff --git a/frontend/src/views/TaskViewerView.vue b/frontend/src/views/TaskViewerView.vue
index 5cee4b6..4d20c24 100644
--- a/frontend/src/views/TaskViewerView.vue
+++ b/frontend/src/views/TaskViewerView.vue
@@ -202,7 +202,21 @@ const subTaskProgress = computed(() => {
 <template>
   <div class="viewer-layout">
     <main class="viewer">
-      <p v-if="store.loading">Loading...</p>
+      <div v-if="store.loading" class="viewer-skeleton" aria-label="Loading task">
+        <div class="skel-toolbar">
+          <div class="skel-btn"></div>
+          <div class="skel-btn skel-btn--wide"></div>
+          <div class="skel-btn"></div>
+        </div>
+        <div class="skel-title"></div>
+        <div class="skel-meta"></div>
+        <div class="skel-badges"></div>
+        <div class="skel-line"></div>
+        <div class="skel-line skel-line--short"></div>
+        <div class="skel-line"></div>
+        <div class="skel-line skel-line--medium"></div>
+        <div class="skel-line skel-line--short"></div>
+      </div>
       <template v-else-if="store.currentTask">
         <div class="toolbar">
           <router-link to="/tasks" class="btn-back">← Tasks</router-link>
@@ -252,11 +266,17 @@ const subTaskProgress = computed(() => {
           </span>
         </div>
 
-        <h1>{{ store.currentTask.title || "Untitled" }}</h1>
+        <h1 class="task-title">{{ store.currentTask.title || "Untitled" }}</h1>
         <p class="meta">
-          Updated {{ relativeTime(store.currentTask.updated_at) }}
-          &middot;
-          Created {{ relativeTime(store.currentTask.created_at) }}
+          <span class="meta-item">
+            <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>
+            Updated {{ relativeTime(store.currentTask.updated_at) }}
+          </span>
+          <span class="meta-sep" aria-hidden="true">·</span>
+          <span class="meta-item">
+            <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+            Created {{ relativeTime(store.currentTask.created_at) }}
+          </span>
         </p>
         <div class="badges">
           <StatusBadge
@@ -318,18 +338,22 @@ const subTaskProgress = computed(() => {
         </div>
 
         <div v-if="backlinks.length" class="backlinks">
-          <h2>Backlinks</h2>
-          <ul class="backlinks-list">
-            <li v-for="link in backlinks" :key="`${link.type}-${link.id}`" class="backlink-item">
-              <span class="backlink-type">{{ link.type }}</span>
-              <router-link
-                :to="`/${link.type === 'note' ? 'notes' : 'tasks'}/${link.id}`"
-                class="backlink-link"
-              >
-                {{ link.title || "Untitled" }}
-              </router-link>
-            </li>
-          </ul>
+          <h3 class="backlinks-heading">
+            <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor" aria-hidden="true"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>
+            Backlinks
+            <span class="backlinks-count">{{ backlinks.length }}</span>
+          </h3>
+          <div class="backlinks-grid">
+            <router-link
+              v-for="link in backlinks"
+              :key="`${link.type}-${link.id}`"
+              :to="`/${link.type === 'note' ? 'notes' : 'tasks'}/${link.id}`"
+              class="backlink-card"
+            >
+              <span :class="['backlink-type-badge', `badge-${link.type}`]">{{ link.type }}</span>
+              <span class="backlink-title">{{ link.title || "Untitled" }}</span>
+            </router-link>
+          </div>
         </div>
       </template>
       <p v-else>Task not found.</p>
@@ -370,8 +394,7 @@ const subTaskProgress = computed(() => {
   gap: 0.75rem;
   margin-bottom: 0.75rem;
 }
-.btn-back,
-.btn-edit {
+.btn-back {
   display: inline-flex;
   align-items: center;
   padding: 0.45rem 1rem;
@@ -383,11 +406,30 @@ const subTaskProgress = computed(() => {
   cursor: pointer;
   font-size: 0.9rem;
 }
-.btn-back:hover,
-.btn-edit:hover {
+.btn-back:hover {
   border-color: var(--color-primary);
   color: var(--color-primary);
 }
+.btn-edit {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.45rem 1.1rem;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  color: #fff;
+  text-decoration: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28);
+  transition: box-shadow 0.15s, opacity 0.15s;
+}
+.btn-edit:hover {
+  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.42);
+  opacity: 0.95;
+  color: #fff;
+}
 .btn-advance {
   padding: 0.45rem 1rem;
   background: linear-gradient(135deg, #6366f1, #4f46e5);
@@ -422,11 +464,32 @@ const subTaskProgress = computed(() => {
   cursor: default;
 }
 
+.task-title {
+  font-family: "Fraunces", Georgia, serif;
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.25rem 0 0.5rem;
+  color: var(--color-text);
+}
+
 .meta {
-  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  font-size: 0.83rem;
   color: var(--color-text-muted);
   margin: 0 0 0.75rem;
 }
+.meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+.meta-sep {
+  opacity: 0.5;
+}
 .badges {
   display: flex;
   align-items: center;
@@ -551,41 +614,116 @@ const subTaskProgress = computed(() => {
 }
 
 .backlinks {
-  margin-top: 2rem;
+  margin-top: 2.5rem;
   border-top: 1px solid var(--color-border);
-  padding-top: 1rem;
+  padding-top: 1.25rem;
 }
-.backlinks h2 {
-  font-size: 1.1rem;
-  margin: 0 0 0.75rem;
-}
-.backlinks-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-.backlink-item {
+.backlinks-heading {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.4rem;
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-text-muted);
+  margin: 0 0 0.75rem;
 }
-.backlink-link {
-  color: var(--color-text);
+.backlinks-count {
+  margin-left: 0.2rem;
+  font-size: 0.72rem;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  padding: 0 0.4rem;
+  line-height: 1.4;
+}
+.backlinks-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.backlink-card {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-md);
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
   text-decoration: none;
-  font-size: 0.95rem;
+  color: var(--color-text);
+  transition: border-color 0.15s, box-shadow 0.15s;
+  font-size: 0.9rem;
 }
-.backlink-link:hover {
+.backlink-card:hover {
+  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   color: var(--color-primary);
 }
-.backlink-type {
-  font-size: 0.75rem;
+.backlink-type-badge {
+  font-size: 0.68rem;
   text-transform: uppercase;
-  color: var(--color-text-muted);
-  background: var(--color-bg-secondary);
-  padding: 0.1rem 0.4rem;
-  border-radius: var(--radius-sm);
+  letter-spacing: 0.04em;
+  font-weight: 600;
+  padding: 0.1rem 0.45rem;
+  border-radius: 999px;
+  flex-shrink: 0;
 }
+.badge-note {
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  color: var(--color-primary);
+  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
+}
+.badge-task {
+  background: color-mix(in srgb, #f59e0b 12%, transparent);
+  color: #d97706;
+  border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
+}
+.backlink-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Skeleton loader ── */
+@keyframes skel-shine {
+  to { background-position: 200% center; }
+}
+.viewer-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  padding-top: 0.5rem;
+}
+.skel-btn,
+.skel-title,
+.skel-meta,
+.skel-badges,
+.skel-line {
+  border-radius: var(--radius-sm);
+  background: linear-gradient(
+    90deg,
+    var(--color-bg-secondary) 25%,
+    color-mix(in srgb, var(--color-text-muted) 18%, var(--color-bg-secondary)) 50%,
+    var(--color-bg-secondary) 75%
+  );
+  background-size: 200% 100%;
+  animation: skel-shine 1.5s ease infinite;
+}
+.skel-toolbar {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+.skel-btn { width: 70px; height: 32px; }
+.skel-btn--wide { width: 90px; }
+.skel-title { height: 2.2rem; width: 65%; border-radius: var(--radius-md); }
+.skel-meta { height: 0.85rem; width: 45%; }
+.skel-badges { height: 1.6rem; width: 30%; border-radius: 999px; }
+.skel-line { height: 0.9rem; }
+.skel-line--short { width: 50%; }
+.skel-line--medium { width: 78%; }
 </style>