M0: Vue 3 + TypeScript frontend — auth views + authed board shell

- Vite + Vue 3.5 + Pinia + vue-router + Tailwind (brand accent #F5C518), dark-mode aware, deterministic package-lock.json for `npm ci`. - Session store (fetchMe/login/register/logout) over a credentials:'include' fetch client; router guards (requiresAuth / guestOnly) with lazy /me resolve. - BaseButton + BaseInput primitives (focus rings, loading, error states). - LoginView, RegisterView, and an authed BoardView shell with an empty state for the M1 masonry board — all at v1 polish (rule 24). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm
2026-07-19 13:17:38 -04:00
parent 04e3ab20cf
commit bf3d403648
20 changed files with 3173 additions and 0 deletions
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { useSessionStore } from "../stores/session";
+import BaseButton from "../components/BaseButton.vue";
+
+const session = useSessionStore();
+const router = useRouter();
+
+async function signOut() {
+  await session.logout();
+  await router.replace("/login");
+}
+</script>
+
+<template>
+  <div class="flex min-h-full flex-col">
+    <header
+      class="sticky top-0 z-10 border-b border-neutral-200 bg-neutral-50/80 backdrop-blur dark:border-neutral-800 dark:bg-neutral-950/80"
+    >
+      <div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
+        <div class="flex items-center gap-2">
+          <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand text-sm font-black text-neutral-900">
+            TS
+          </div>
+          <span class="font-semibold">ThoughtSync</span>
+        </div>
+        <div class="flex items-center gap-3">
+          <span class="hidden text-sm text-neutral-500 sm:inline dark:text-neutral-400">{{
+            session.user?.display_name
+          }}</span>
+          <BaseButton variant="ghost" @click="signOut">
+            <svg
+              class="h-4 w-4"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+              <polyline points="16 17 21 12 16 7" />
+              <line x1="21" y1="12" x2="9" y2="12" />
+            </svg>
+            Sign out
+          </BaseButton>
+        </div>
+      </div>
+    </header>
+
+    <main class="mx-auto flex w-full max-w-6xl flex-1 flex-col items-center justify-center px-4 py-20 text-center">
+      <svg
+        class="h-12 w-12 text-neutral-300 dark:text-neutral-600"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M15.5 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h9l7-7V5a2 2 0 0 0-2-2Z" />
+        <path d="M14 21v-5a2 2 0 0 1 2-2h5" />
+      </svg>
+      <h1 class="mt-4 text-xl font-semibold">Your board is ready</h1>
+      <p class="mt-1.5 max-w-sm text-sm text-neutral-500 dark:text-neutral-400">
+        A Google-Keep-style masonry board for quick-capturing notes lands here next. The foundation — your account and
+        workspace — is in place.
+      </p>
+    </main>
+  </div>
+</template>