add set layout view

frontend/website/src/views/DashboardView.vue

@@ -1,33 +1,21 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { onMounted } from 'vue'
-import { useRouter } from 'vue-router'
 
-import BrandWordmark from '@/components/BrandWordmark.vue'
-import { useAuthStore } from '@/stores/auth'
+import AuthenticatedHeader from '@/components/AuthenticatedHeader.vue'
 import { useSetsStore } from '@/stores/sets'
 
-const authStore = useAuthStore()
 const setsStore = useSetsStore()
 const { sets, loading, error } = storeToRefs(setsStore)
-const router = useRouter()
 
 onMounted(async () => {
   await setsStore.fetchSets()
 })
-
-async function handleLogout(): Promise<void> {
-  await authStore.logout()
-  await router.push({ name: 'login' })
-}
 </script>
 
 <template>
   <main class="dashboard-page">
-    <header class="dashboard-header">
-      <BrandWordmark theme="dark" />
-      <button type="button" class="logout-button" @click="handleLogout">Log out</button>
-    </header>
+    <AuthenticatedHeader />
 
     <section class="sets-catalog" aria-labelledby="sets-heading">
       <div class="sets-catalog__introduction">
@@ -51,10 +39,19 @@ async function handleLogout(): Promise<void> {
 
       <ul v-else class="set-grid" aria-label="Available sets">
         <li v-for="availableSet in sets" :key="availableSet.id">
-          <article class="set-card">
-            <p>Set</p>
-            <h2>{{ availableSet.name }}</h2>
-          </article>
+          <RouterLink
+            class="set-card-link"
+            :to="{ name: 'set-layout', params: { setId: availableSet.id } }"
+          >
+            <article class="set-card">
+              <p>Set</p>
+              <h2>{{ availableSet.name }}</h2>
+              <span class="set-card__action">
+                Explore layout
+                <span aria-hidden="true">→</span>
+              </span>
+            </article>
+          </RouterLink>
         </li>
       </ul>
     </section>
@@ -70,42 +67,6 @@ async function handleLogout(): Promise<void> {
   background: #f4f1e7;
 }
 
-.dashboard-header {
-  display: flex;
-  width: min(100%, 76rem);
-  align-items: center;
-  justify-content: space-between;
-  margin: 0 auto;
-}
-
-.logout-button {
-  min-height: 2.75rem;
-  padding: 0.7rem 1.1rem;
-  border: 0;
-  border-radius: 0.7rem;
-  color: #fffdf7;
-  background: #183a31;
-  box-shadow: 0 0.55rem 1.2rem rgb(24 58 49 / 14%);
-  font-size: 0.82rem;
-  font-weight: 750;
-  cursor: pointer;
-  transition:
-    background-color 160ms ease,
-    transform 160ms ease,
-    box-shadow 160ms ease;
-}
-
-.logout-button:hover {
-  background: #285c4e;
-  box-shadow: 0 0.7rem 1.4rem rgb(24 58 49 / 18%);
-  transform: translateY(-1px);
-}
-
-.logout-button:focus-visible {
-  outline: 3px solid rgb(86 127 112 / 34%);
-  outline-offset: 0.25rem;
-}
-
 .sets-catalog {
   width: min(100%, 72rem);
   margin: clamp(4.5rem, 10vh, 7rem) auto 0;
@@ -195,12 +156,35 @@ h1 {
 }
 
 .set-card {
+  height: 100%;
   min-height: 11rem;
   padding: 1.6rem;
   border: 1px solid rgb(24 48 41 / 12%);
   border-radius: 1rem;
   background: linear-gradient(135deg, rgb(255 253 247 / 96%), rgb(242 236 221 / 82%));
   box-shadow: 0 1rem 2.5rem rgb(40 62 52 / 8%);
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+.set-card-link {
+  display: block;
+  height: 100%;
+  border-radius: 1rem;
+  text-decoration: none;
+}
+
+.set-card-link:hover .set-card {
+  border-color: rgb(40 92 78 / 35%);
+  box-shadow: 0 1.25rem 2.75rem rgb(40 62 52 / 13%);
+  transform: translateY(-3px);
+}
+
+.set-card-link:focus-visible {
+  outline: 3px solid rgb(86 127 112 / 38%);
+  outline-offset: 0.25rem;
 }
 
 .set-card p {
@@ -222,6 +206,16 @@ h1 {
   letter-spacing: -0.035em;
 }
 
+.set-card__action {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-top: 1.4rem;
+  color: #567064;
+  font-size: 0.76rem;
+  font-weight: 750;
+}
+
 @media (max-width: 37.5rem) {
   .dashboard-page {
     padding: 1.4rem 1.1rem 2.5rem;