feat: mobile-first redesign (warm notebook aesthetic, thumb-zone capture bar)

- Editorial masthead (Fraunces + Spline Sans), warm paper/ink palette with
  terracotta accent, matching dark mode
- Thumb-zone composer: single capture input + round submit, optional note
  toggle, refocus after add for rapid capture
- Mobile-first CSS: 44-50px touch targets, 16px inputs (no iOS zoom),
  edge-to-edge scroll-snap list chips, safe-area insets, tap-highlight off,
  contained overscroll; desktop as min-width enhancement
- Staggered task-card entrance (reduced-motion aware), themed empty states
- Head: theme-color light/dark, Apple web-app metas, lang attr, font preconnect

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app/pages/auth/callback.vue

@@ -17,7 +17,14 @@ onMounted(() => {
   min-height: 100dvh;
   display: grid;
   place-items: center;
-  color: #6b7280;
+  background: #f4f1ea;
-  font: 500 1rem/1.4 system-ui, sans-serif;
+  color: #837a6b;
+  font: 500 1rem/1.4 "Spline Sans", system-ui, sans-serif;
+}
+@media (prefers-color-scheme: dark) {
+  .callback {
+    background: #181410;
+    color: #9d9281;
+  }
 }
 </style>

app/pages/index.vue

@@ -24,10 +24,18 @@ const error = ref<string | null>(null);
 
 const title = ref("");
 const description = ref("");
+const showNote = ref(false);
 const adding = ref(false);
+const titleInput = ref<HTMLInputElement | null>(null);
 
 const selectedList = computed(() => lists.value.find((l) => l.id === selectedId.value) ?? null);
 
+const today = new Intl.DateTimeFormat(undefined, {
+  weekday: "long",
+  month: "long",
+  day: "numeric",
+}).format(new Date());
+
 async function refreshLists() {
   loadingLists.value = true;
   error.value = null;
@@ -79,6 +87,8 @@ async function addTask() {
     tasks.value = [...tasks.value, created];
     title.value = "";
     description.value = "";
+    showNote.value = false;
+    titleInput.value?.focus();
   } catch (e) {
     error.value = (e as Error).message;
   } finally {
@@ -86,6 +96,11 @@ async function addTask() {
   }
 }
 
+function toggleNote() {
+  showNote.value = !showNote.value;
+  if (!showNote.value) description.value = "";
+}
+
 onMounted(() => {
   // The auth plugin gates before mount, so this is normally authenticated.
   // Safety net: if not, drive login instead of calling the API (no 401 banner).
@@ -96,12 +111,16 @@ onMounted(() => {
 
 <template>
   <div class="app">
-    <header class="topbar">
+    <header class="masthead">
-      <h1>Inbox</h1>
+      <div class="masthead-row">
-      <div class="who" v-if="auth.user">
+        <p class="brand">ClaudeDo</p>
-        <span class="email">{{ auth.user.email || auth.user.name }}</span>
+        <div class="who" v-if="auth.user">
-        <button class="link" @click="auth.logout()">Sign out</button>
+          <span class="email">{{ auth.user.email || auth.user.name }}</span>
+          <button class="link" @click="auth.logout()">Sign out</button>
+        </div>
       </div>
+      <h1>Inbox</h1>
+      <p class="date">{{ today }}<template v-if="tasks.length"> · {{ tasks.length }} {{ tasks.length === 1 ? "task" : "tasks" }}</template></p>
     </header>
 
     <main class="content">
@@ -113,6 +132,7 @@ onMounted(() => {
 
       <template v-else-if="!lists.length">
         <div class="empty">
+          <p class="empty-mark">◍</p>
           <p class="empty-title">No lists yet</p>
           <p class="muted">Sync your lists from the ClaudeDo desktop app, then add tasks here.</p>
         </div>
@@ -133,9 +153,13 @@ onMounted(() => {
 
         <section class="tasks" aria-label="Tasks">
           <p v-if="loadingTasks" class="muted">Loading…</p>
-          <p v-else-if="!tasks.length" class="muted">No tasks in {{ selectedList?.name }} yet.</p>
+          <div v-else-if="!tasks.length" class="empty">
+            <p class="empty-mark">✓</p>
+            <p class="empty-title">All clear</p>
+            <p class="muted">Nothing in {{ selectedList?.name }} yet. Capture something below.</p>
+          </div>
           <ul v-else class="task-list">
-            <li v-for="t in tasks" :key="t.id" class="task">
+            <li v-for="(t, i) in tasks" :key="t.id" class="task" :style="{ '--i': i }">
               <p class="task-title">{{ t.title }}</p>
               <p v-if="t.description" class="task-desc">{{ t.description }}</p>
             </li>
@@ -146,76 +170,108 @@ onMounted(() => {
 
     <form v-if="lists.length" class="composer" @submit.prevent="addTask">
       <input
-        v-model="title"
+        v-if="showNote"
-        class="input"
+        v-model="description"
+        class="input note"
         type="text"
-        :placeholder="`Add to ${selectedList?.name ?? 'list'}…`"
+        placeholder="Add a note…"
         autocomplete="off"
         enterkeyhint="done"
-        aria-label="Task title"
-      />
-      <input
-        v-model="description"
-        class="input desc"
-        type="text"
-        placeholder="Description (optional)"
-        autocomplete="off"
         aria-label="Task description"
       />
-      <button class="add" type="submit" :disabled="!title.trim() || adding">
+      <div class="capture">
-        {{ adding ? "Adding…" : "Add task" }}
+        <button
-      </button>
+          class="note-toggle"
+          type="button"
+          :class="{ on: showNote }"
+          :aria-pressed="showNote"
+          aria-label="Toggle note field"
+          @click="toggleNote"
+        >
+          ✎
+        </button>
+        <input
+          ref="titleInput"
+          v-model="title"
+          class="input"
+          type="text"
+          :placeholder="`Add to ${selectedList?.name ?? 'list'}…`"
+          autocomplete="off"
+          enterkeyhint="done"
+          aria-label="Task title"
+        />
+        <button class="add" type="submit" :disabled="!title.trim() || adding" aria-label="Add task">
+          <span v-if="adding" class="spin" aria-hidden="true"></span>
+          <span v-else aria-hidden="true">↑</span>
+        </button>
+      </div>
     </form>
   </div>
 </template>
 
 <style scoped>
 .app {
-  --bg: #f7f7f8;
+  --bg: #f4f1ea;
-  --card: #ffffff;
+  --card: #fffdf8;
-  --border: #e5e7eb;
+  --border: #e3ddd0;
-  --text: #111827;
+  --text: #211c15;
-  --muted: #6b7280;
+  --muted: #837a6b;
-  --accent: #6d4aff;
+  --accent: #c75b39;
-  --accent-contrast: #ffffff;
+  --accent-soft: #f3e3dc;
+  --accent-contrast: #fffdf8;
   --danger: #b42318;
+  --shadow: 0 1px 2px rgb(33 28 21 / 0.05), 0 4px 16px rgb(33 28 21 / 0.04);
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
   background: var(--bg);
   color: var(--text);
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-family: "Spline Sans", system-ui, sans-serif;
+  -webkit-tap-highlight-color: transparent;
 }
 
-.topbar {
+/* ——— Masthead: editorial, mobile-first ——— */
-  position: sticky;
+.masthead {
-  top: 0;
+  padding: max(1rem, env(safe-area-inset-top)) 1.25rem 0.75rem;
-  z-index: 5;
+}
+.masthead-row {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   justify-content: space-between;
   gap: 1rem;
-  padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.75rem;
-  background: color-mix(in srgb, var(--bg) 85%, transparent);
-  backdrop-filter: blur(8px);
-  border-bottom: 1px solid var(--border);
 }
-.topbar h1 {
+.brand {
-  font-size: 1.25rem;
-  font-weight: 700;
   margin: 0;
-  letter-spacing: -0.01em;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+.masthead h1 {
+  margin: 0.4rem 0 0;
+  font-family: "Fraunces", Georgia, serif;
+  font-weight: 600;
+  font-size: clamp(2.1rem, 9vw, 2.75rem);
+  line-height: 1.05;
+  letter-spacing: -0.02em;
+}
+.date {
+  margin: 0.3rem 0 0;
+  font-size: 0.85rem;
+  color: var(--muted);
 }
 .who {
   display: flex;
-  align-items: center;
+  align-items: baseline;
-  gap: 0.75rem;
+  gap: 0.6rem;
   min-width: 0;
 }
 .email {
-  font-size: 0.8rem;
+  display: none;
+  font-size: 0.78rem;
   color: var(--muted);
-  max-width: 9rem;
+  max-width: 12rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -223,44 +279,58 @@ onMounted(() => {
 .link {
   border: 0;
   background: none;
-  color: var(--accent);
+  color: var(--muted);
-  font-size: 0.85rem;
+  font-size: 0.78rem;
   font-weight: 600;
-  padding: 0.4rem 0.2rem;
+  padding: 0.5rem 0;
   cursor: pointer;
+  touch-action: manipulation;
+}
+.link:active {
+  color: var(--accent);
 }
 
 .content {
   flex: 1;
-  padding: 1rem;
+  padding: 0.5rem 1.25rem 1rem;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.9rem;
   overflow-y: auto;
+  overscroll-behavior-y: contain;
 }
 
+/* ——— List chips: edge-to-edge swipe row ——— */
 .lists {
   display: flex;
   gap: 0.5rem;
   overflow-x: auto;
-  padding-bottom: 0.25rem;
+  margin: 0 -1.25rem;
+  padding: 0.25rem 1.25rem;
   scrollbar-width: none;
+  scroll-snap-type: x proximity;
 }
 .lists::-webkit-scrollbar {
   display: none;
 }
 .chip {
   flex: 0 0 auto;
-  min-height: 40px;
+  scroll-snap-align: start;
-  padding: 0.5rem 1rem;
+  min-height: 44px;
+  padding: 0.55rem 1.1rem;
   border-radius: 999px;
   border: 1px solid var(--border);
   background: var(--card);
   color: var(--text);
+  font-family: inherit;
   font-size: 0.9rem;
   font-weight: 600;
   cursor: pointer;
-  transition: background 0.12s, border-color 0.12s;
+  touch-action: manipulation;
+  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
+}
+.chip:active {
+  transform: scale(0.96);
 }
 .chip.active {
   background: var(--accent);
@@ -268,114 +338,218 @@ onMounted(() => {
   color: var(--accent-contrast);
 }
 
+/* ——— Tasks: paper cards with staggered entrance ——— */
 .task-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.6rem;
 }
 .task {
   background: var(--card);
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 14px;
-  padding: 0.85rem 1rem;
+  padding: 0.9rem 1rem;
+  box-shadow: var(--shadow);
+  animation: rise 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) both;
+  animation-delay: calc(var(--i, 0) * 35ms);
+}
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
 }
 .task-title {
   margin: 0;
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 500;
-  line-height: 1.3;
+  line-height: 1.35;
 }
 .task-desc {
   margin: 0.35rem 0 0;
   font-size: 0.875rem;
   color: var(--muted);
-  line-height: 1.4;
+  line-height: 1.45;
   white-space: pre-wrap;
 }
 
 .empty {
-  margin-top: 2rem;
+  margin-top: 14vh;
   text-align: center;
+  padding: 0 1.5rem;
+}
+.empty-mark {
+  margin: 0 0 0.5rem;
+  font-size: 2rem;
+  color: var(--accent);
 }
 .empty-title {
-  font-size: 1.1rem;
+  font-family: "Fraunces", Georgia, serif;
-  font-weight: 700;
+  font-size: 1.35rem;
+  font-weight: 600;
   margin: 0 0 0.35rem;
 }
 .muted {
   color: var(--muted);
   font-size: 0.9rem;
+  line-height: 1.5;
   margin: 0;
 }
 .error {
   background: #fef3f2;
   color: var(--danger);
   border: 1px solid #fecdca;
-  border-radius: 10px;
+  border-radius: 12px;
-  padding: 0.6rem 0.8rem;
+  padding: 0.65rem 0.85rem;
   font-size: 0.875rem;
   margin: 0;
 }
 
+/* ——— Composer: thumb-zone capture bar ——— */
 .composer {
   position: sticky;
   bottom: 0;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
+  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
-  background: var(--card);
+  background: color-mix(in srgb, var(--bg) 88%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   border-top: 1px solid var(--border);
 }
+.capture {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
 .input {
+  flex: 1;
   width: 100%;
-  min-height: 48px;
+  min-width: 0;
-  padding: 0.7rem 0.9rem;
+  min-height: 50px;
+  padding: 0.7rem 1rem;
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 999px;
+  /* 16px floor prevents iOS focus zoom */
   font-size: 1rem;
-  background: var(--bg);
+  font-family: inherit;
+  background: var(--card);
   color: var(--text);
+  box-shadow: var(--shadow);
 }
 .input:focus {
   outline: 2px solid var(--accent);
   outline-offset: 1px;
   border-color: transparent;
 }
-.input.desc {
+.input.note {
-  font-size: 0.9rem;
+  min-height: 44px;
+  font-size: 1rem;
+  animation: rise 0.2s ease both;
+}
+.note-toggle {
+  flex: 0 0 auto;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: var(--card);
+  color: var(--muted);
+  font-size: 1.1rem;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: background 0.15s, color 0.15s;
+}
+.note-toggle.on {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+  color: var(--accent);
 }
 .add {
-  min-height: 48px;
+  flex: 0 0 auto;
+  width: 50px;
+  height: 50px;
   border: 0;
-  border-radius: 12px;
+  border-radius: 50%;
   background: var(--accent);
   color: var(--accent-contrast);
-  font-size: 1rem;
+  font-size: 1.3rem;
   font-weight: 700;
   cursor: pointer;
+  touch-action: manipulation;
+  display: grid;
+  place-items: center;
+  transition: transform 0.1s, opacity 0.15s;
+}
+.add:active:not(:disabled) {
+  transform: scale(0.92);
 }
 .add:disabled {
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: not-allowed;
 }
+.spin {
+  width: 18px;
+  height: 18px;
+  border: 2px solid color-mix(in srgb, var(--accent-contrast) 35%, transparent);
+  border-top-color: var(--accent-contrast);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ——— Larger screens: the enhancement, not the default ——— */
+@media (min-width: 640px) {
+  .masthead,
+  .content,
+  .composer {
+    padding-left: max(1.25rem, calc(50vw - 19rem));
+    padding-right: max(1.25rem, calc(50vw - 19rem));
+  }
+  .email {
+    display: inline;
+  }
+  .lists {
+    margin: 0;
+    padding: 0.25rem 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .task,
+  .input.note {
+    animation: none;
+  }
+}
 
 @media (prefers-color-scheme: dark) {
   .app {
-    --bg: #0f1115;
+    --bg: #181410;
-    --card: #1a1d24;
+    --card: #221d17;
-    --border: #2a2f3a;
+    --border: #352d24;
-    --text: #f3f4f6;
+    --text: #f0eae0;
-    --muted: #9ca3af;
+    --muted: #9d9281;
-    --accent: #8b6dff;
+    --accent: #e0795a;
-    --danger: #ff9a8d;
+    --accent-soft: #3a261f;
+    --accent-contrast: #1d130f;
+    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.2);
   }
   .error {
     background: #2a1815;
     border-color: #5a2a22;
+    color: #ff9a8d;
   }
 }
 </style>

nuxt.config.ts

@@ -17,9 +17,23 @@ export default defineNuxtConfig({
   app: {
     head: {
       title: "ClaudeDo Inbox",
+      htmlAttrs: { lang: "en" },
       meta: [
         { name: "viewport", content: "width=device-width, initial-scale=1, viewport-fit=cover" },
         { name: "color-scheme", content: "light dark" },
+        { name: "theme-color", media: "(prefers-color-scheme: light)", content: "#f4f1ea" },
+        { name: "theme-color", media: "(prefers-color-scheme: dark)", content: "#181410" },
+        { name: "apple-mobile-web-app-capable", content: "yes" },
+        { name: "apple-mobile-web-app-status-bar-style", content: "default" },
+        { name: "apple-mobile-web-app-title", content: "ClaudeDo" },
+      ],
+      link: [
+        { rel: "preconnect", href: "https://fonts.googleapis.com" },
+        { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" },
+        {
+          rel: "stylesheet",
+          href: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Spline+Sans:wght@400;500;600&display=swap",
+        },
       ],
     },
   },