add set layout view

frontend/website/src/components/AuthenticatedHeader.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+import BrandWordmark from '@/components/BrandWordmark.vue'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+const router = useRouter()
+
+async function handleLogout(): Promise<void> {
+  await authStore.logout()
+  await router.push({ name: 'login' })
+}
+</script>
+
+<template>
+  <header class="authenticated-header">
+    <BrandWordmark theme="dark" />
+    <button type="button" class="logout-button" @click="handleLogout">Log out</button>
+  </header>
+</template>
+
+<style scoped>
+.authenticated-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;
+}
+</style>

frontend/website/src/components/ElementTree.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import type { SetElementNode } from '@/stores/setLayout'
+
+defineProps<{
+  nodes: SetElementNode[]
+  label?: string
+}>()
+</script>
+
+<template>
+  <ol
+    class="element-tree"
+    :class="{ 'element-tree--root': label !== undefined }"
+    :aria-label="label"
+  >
+    <li v-for="node in nodes" :key="node.id" class="element-tree__item" :data-element-id="node.id">
+      <div class="element-node__card">
+        <span class="element-node__name">{{ node.name }}</span>
+        <span class="element-node__kind">{{ node.kind }}</span>
+      </div>
+
+      <ElementTree v-if="node.children.length > 0" :nodes="node.children" />
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+.element-tree {
+  display: grid;
+  gap: 0.75rem;
+  margin: 0.75rem 0 0 1.25rem;
+  padding: 0 0 0 1.35rem;
+  border-left: 1px solid rgb(146 96 68 / 28%);
+  list-style: none;
+}
+
+.element-tree--root {
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  border-left: 0;
+}
+
+.element-tree__item {
+  position: relative;
+  min-width: 0;
+}
+
+.element-tree:not(.element-tree--root) > .element-tree__item::before {
+  position: absolute;
+  top: 1.55rem;
+  left: -1.35rem;
+  width: 1rem;
+  border-top: 1px solid rgb(146 96 68 / 28%);
+  content: '';
+}
+
+.element-node__card {
+  display: flex;
+  min-width: 0;
+  min-height: 3.1rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.8rem 1rem;
+  border: 1px solid rgb(24 48 41 / 12%);
+  border-radius: 0.8rem;
+  background: rgb(255 253 247 / 88%);
+  box-shadow: 0 0.55rem 1.5rem rgb(40 62 52 / 6%);
+}
+
+.element-node__name {
+  min-width: 0;
+  color: #183029;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(1.05rem, 2vw, 1.25rem);
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.element-node__kind {
+  flex: 0 0 auto;
+  padding: 0.35rem 0.55rem;
+  border-radius: 999px;
+  color: #81533a;
+  background: #efe4d4;
+  font-size: 0.62rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 37.5rem) {
+  .element-tree {
+    margin-left: 0.45rem;
+    padding-left: 0.65rem;
+  }
+
+  .element-tree:not(.element-tree--root) > .element-tree__item::before {
+    left: -0.65rem;
+    width: 0.45rem;
+  }
+
+  .element-node__card {
+    gap: 0.6rem;
+    padding: 0.75rem 0.7rem;
+  }
+
+  .element-node__kind {
+    padding-inline: 0.42rem;
+    font-size: 0.56rem;
+  }
+}
+</style>

frontend/website/src/router/index.ts

@@ -63,6 +63,14 @@ const router = createRouter({
         requiresAuth: true,
       },
     },
+    {
+      path: '/sets/:setId(\\d+)',
+      name: 'set-layout',
+      component: () => import('@/views/SetLayoutView.vue'),
+      meta: {
+        requiresAuth: true,
+      },
+    },
   ],
 })
 

frontend/website/src/stores/setLayout.ts

@@ -0,0 +1,102 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { z } from 'zod'
+
+import { API_BASE } from '@/utils/apiBase'
+
+export const setElementNodeSchema = z.object({
+  id: z.number().int().positive(),
+  name: z.string().min(1),
+  kind: z.string().min(1),
+  get children() {
+    return z.array(setElementNodeSchema)
+  },
+})
+
+export const setLayoutResponseSchema = z.object({
+  set: z.object({
+    id: z.number().int().positive(),
+    name: z.string().min(1),
+  }),
+  elements: z.array(setElementNodeSchema),
+})
+
+export type SetElementNode = z.infer<typeof setElementNodeSchema>
+export type SetLayoutResponse = z.infer<typeof setLayoutResponseSchema>
+
+const LOAD_ERROR = "We couldn't load this set's layout."
+
+export const useSetLayoutStore = defineStore('set-layout', () => {
+  const layout = ref<SetLayoutResponse | null>(null)
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const notFound = ref(false)
+  let activeRequestId = 0
+
+  async function fetchSetLayout(setId: number): Promise<boolean> {
+    const requestId = ++activeRequestId
+    layout.value = null
+    loading.value = true
+    error.value = null
+    notFound.value = false
+
+    try {
+      const response = await fetch(`${API_BASE}/api/sets/${setId}`, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+
+      if (requestId !== activeRequestId) {
+        return false
+      }
+
+      if (response.status === 404) {
+        notFound.value = true
+
+        return false
+      }
+
+      if (response.status !== 200) {
+        error.value = LOAD_ERROR
+
+        return false
+      }
+
+      const responseBody: unknown = await response.json()
+      if (requestId !== activeRequestId) {
+        return false
+      }
+
+      const parsedLayout = setLayoutResponseSchema.parse(responseBody)
+      if (parsedLayout.set.id !== setId) {
+        throw new Error('set response did not match requested set')
+      }
+
+      layout.value = parsedLayout
+
+      return true
+    } catch {
+      if (requestId === activeRequestId) {
+        layout.value = null
+        error.value = LOAD_ERROR
+      }
+
+      return false
+    } finally {
+      if (requestId === activeRequestId) {
+        loading.value = false
+      }
+    }
+  }
+
+  return {
+    layout,
+    loading,
+    error,
+    notFound,
+    fetchSetLayout,
+  }
+})

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 AuthenticatedHeader from '@/components/AuthenticatedHeader.vue'
-import { useAuthStore } from '@/stores/auth'
 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">
+    <AuthenticatedHeader />
-      <BrandWordmark theme="dark" />
-      <button type="button" class="logout-button" @click="handleLogout">Log out</button>
-    </header>
 
     <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">
+          <RouterLink
-            <p>Set</p>
+            class="set-card-link"
-            <h2>{{ availableSet.name }}</h2>
+            :to="{ name: 'set-layout', params: { setId: availableSet.id } }"
-          </article>
+          >
+            <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;

frontend/website/src/views/SetLayoutView.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+import AuthenticatedHeader from '@/components/AuthenticatedHeader.vue'
+import ElementTree from '@/components/ElementTree.vue'
+import { useSetLayoutStore } from '@/stores/setLayout'
+
+const route = useRoute()
+const setLayoutStore = useSetLayoutStore()
+const { layout, loading, error, notFound } = storeToRefs(setLayoutStore)
+const currentSetId = ref<number | null>(null)
+const EMPTY_MESSAGE = 'This set does not have any elements yet.'
+
+watch(
+  () => route.params.setId,
+  async (setIdParameter) => {
+    const rawSetId = Array.isArray(setIdParameter) ? setIdParameter[0] : setIdParameter
+    const setId = Number(rawSetId)
+    currentSetId.value = setId
+    await setLayoutStore.fetchSetLayout(setId)
+  },
+  { immediate: true },
+)
+
+async function retry(): Promise<void> {
+  if (currentSetId.value === null) {
+    return
+  }
+
+  await setLayoutStore.fetchSetLayout(currentSetId.value)
+}
+</script>
+
+<template>
+  <main class="layout-page">
+    <AuthenticatedHeader />
+
+    <section class="set-layout">
+      <RouterLink class="back-link" :to="{ name: 'dashboard' }">
+        <span aria-hidden="true">←</span>
+        Back to sets
+      </RouterLink>
+
+      <p v-if="loading" class="layout-state" role="status">Loading set layout...</p>
+
+      <div v-else-if="notFound" class="layout-state layout-state--error" role="alert">
+        <p class="set-layout__eyebrow">Your library</p>
+        <h1>Set not found</h1>
+        <p>The set you're looking for is not available.</p>
+      </div>
+
+      <div v-else-if="error !== null" class="layout-state layout-state--error" role="alert">
+        <p>{{ error }}</p>
+        <button type="button" class="retry-button" @click="retry">Try again</button>
+      </div>
+
+      <template v-else-if="layout !== null">
+        <header class="set-layout__introduction">
+          <p class="set-layout__eyebrow">Set layout</p>
+          <h1>{{ layout.set.name }}</h1>
+          <p class="set-layout__description">
+            Explore every element in this set and see how each level fits into the whole.
+          </p>
+        </header>
+
+        <p
+          v-if="layout.elements.length === 0"
+          class="layout-state"
+          role="status"
+          v-text="EMPTY_MESSAGE"
+        ></p>
+
+        <div v-else class="layout-outline">
+          <ElementTree :nodes="layout.elements" :label="`${layout.set.name} element layout`" />
+        </div>
+      </template>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.layout-page {
+  min-height: 100vh;
+  min-height: 100svh;
+  padding: 2rem clamp(1.5rem, 6vw, 5rem) 5rem;
+  color: #183029;
+  background: #f4f1e7;
+}
+
+.set-layout {
+  width: min(100%, 62rem);
+  margin: clamp(3.5rem, 8vh, 5.5rem) auto 0;
+}
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  border-radius: 0.35rem;
+  color: #5e7067;
+  font-size: 0.84rem;
+  font-weight: 750;
+  text-decoration: none;
+}
+
+.back-link:hover {
+  color: #183a31;
+}
+
+.back-link:focus-visible {
+  outline: 3px solid rgb(86 127 112 / 34%);
+  outline-offset: 0.25rem;
+}
+
+.set-layout__introduction {
+  max-width: 44rem;
+  margin-top: 2.75rem;
+}
+
+.set-layout__eyebrow {
+  margin: 0 0 1rem;
+  color: #926044;
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin: 0;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(3rem, 7vw, 5.25rem);
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: -0.055em;
+  overflow-wrap: anywhere;
+}
+
+.set-layout__description {
+  max-width: 38rem;
+  margin: 1.5rem 0 0;
+  color: #68776f;
+  line-height: 1.7;
+}
+
+.layout-outline {
+  margin-top: 3rem;
+}
+
+.layout-state {
+  display: grid;
+  width: 100%;
+  min-height: 10rem;
+  place-items: center;
+  margin: 2.75rem 0 0;
+  padding: 2rem;
+  border: 1px solid rgb(24 48 41 / 12%);
+  border-radius: 1rem;
+  color: #68776f;
+  background: rgb(255 253 247 / 72%);
+  text-align: center;
+}
+
+.layout-state--error {
+  align-content: center;
+  gap: 1rem;
+}
+
+.layout-state--error p {
+  margin: 0;
+}
+
+.layout-state--error h1 {
+  font-size: clamp(2.25rem, 5vw, 3.6rem);
+}
+
+.retry-button {
+  min-height: 2.65rem;
+  padding: 0.65rem 1rem;
+  border: 1px solid rgb(24 58 49 / 28%);
+  border-radius: 0.7rem;
+  color: #183a31;
+  background: #fffdf7;
+  font-size: 0.82rem;
+  font-weight: 750;
+  cursor: pointer;
+}
+
+.retry-button:hover {
+  border-color: #285c4e;
+  background: #f9f5e9;
+}
+
+.retry-button:focus-visible {
+  outline: 3px solid rgb(86 127 112 / 34%);
+  outline-offset: 0.25rem;
+}
+
+@media (max-width: 37.5rem) {
+  .layout-page {
+    padding: 1.4rem 1.1rem 3rem;
+  }
+
+  .set-layout {
+    margin-top: 3rem;
+  }
+
+  .set-layout__introduction {
+    margin-top: 2.25rem;
+  }
+
+  .layout-outline {
+    margin-top: 2.25rem;
+  }
+}
+</style>