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>