add parent navigation

frontend/rabbi_gerzi/src/components/ElementParentLink.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ArrowUp as ArrowUpIcon } from 'lucide-vue-next'
+import type { ChildElement } from '@/stores/elements'
+
+type ElementRouteName = 'element' | 'admin-element'
+
+interface Props {
+  dataCy: string
+  parentElement: ChildElement
+  routeName: ElementRouteName
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <RouterLink
+    :to="{
+      name: routeName,
+      params: { id: parentElement.id },
+    }"
+    class="element-parent-link"
+    :data-cy="dataCy"
+  >
+    <ArrowUpIcon :size="16" aria-hidden="true" />
+    <span>Parent: {{ parentElement.title }}</span>
+  </RouterLink>
+</template>
+
+<style scoped>
+.element-parent-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-height: 2.2rem;
+  padding: 0.35rem 0;
+  color: var(--color-slate);
+  font-family: var(--font-sans);
+  font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1.25;
+  text-decoration: none;
+}
+
+.element-parent-link:hover,
+.element-parent-link:focus-visible {
+  color: var(--color-text);
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+
+.element-parent-link:focus-visible {
+  border-radius: 4px;
+  outline: 3px solid rgb(61 78 93 / 24%);
+  outline-offset: 3px;
+}
+</style>

frontend/rabbi_gerzi/src/stores/elements.ts

@@ -20,6 +20,7 @@ type ElementFileType = 'iconImage' | 'shortPdf' | 'longPdf'
 interface ElementResponse {
   element: Element
   childElements: ChildElement[]
+  parentElement: ChildElement | null
   siblingElements: ChildElement[]
 }
 
@@ -63,6 +64,7 @@ const ELEMENT_UPDATE_URL = `${API_BASE_URL}/api/element/update`
 export const useElementsStore = defineStore('elements', () => {
   const element = ref<Element | null>(null)
   const childElements = ref<ChildElement[]>([])
+  const parentElement = ref<ChildElement | null>(null)
   const siblingElements = ref<ChildElement[]>([])
   const isLoading = ref(false)
   const error = ref<string | null>(null)
@@ -77,6 +79,7 @@ export const useElementsStore = defineStore('elements', () => {
   async function fetchElement(elementId: string): Promise<void> {
     element.value = null
     childElements.value = []
+    parentElement.value = null
     siblingElements.value = []
     error.value = null
     saveError.value = null
@@ -101,9 +104,11 @@ export const useElementsStore = defineStore('elements', () => {
       const data: ElementResponse = await response.json()
       element.value = data.element
       childElements.value = data.childElements
+      parentElement.value = data.parentElement
       siblingElements.value = data.siblingElements
     } catch {
       childElements.value = []
+      parentElement.value = null
       siblingElements.value = []
       error.value = 'Network error - could not load element'
     } finally {
@@ -451,6 +456,7 @@ export const useElementsStore = defineStore('elements', () => {
   return {
     element,
     childElements,
+    parentElement,
     siblingElements,
     isLoading,
     error,

frontend/rabbi_gerzi/src/views/AdminElementPage.vue

@@ -6,6 +6,7 @@ import {
   ChevronUp as ChevronUpIcon,
 } from 'lucide-vue-next'
 import { useRoute, useRouter } from 'vue-router'
+import ElementParentLink from '@/components/ElementParentLink.vue'
 import ElementSiblingNavigation from '@/components/ElementSiblingNavigation.vue'
 import RichTextEditor from '@/components/RichTextEditor.vue'
 import SiteHeader from '@/components/SiteHeader.vue'
@@ -30,6 +31,7 @@ const elementsStore = useElementsStore()
 const {
   element,
   childElements,
+  parentElement,
   siblingElements,
   isLoading,
   error,
@@ -352,6 +354,12 @@ function resetInput(changeEvent: Event): void {
     <SiteHeader />
     <main class="admin-element-page__main" data-cy="admin-element-page">
       <header class="admin-element-page__header">
+        <ElementParentLink
+          v-if="parentElement !== null"
+          :parent-element="parentElement"
+          data-cy="admin-parent-link"
+          route-name="admin-element"
+        />
         <h1 class="admin-element-page__heading">Edit Element</h1>
       </header>
 
@@ -730,7 +738,7 @@ function resetInput(changeEvent: Event): void {
 }
 
 .admin-element-page__heading {
-  margin: 0;
+  margin: 0.35rem 0 0;
   color: #2c2c2c;
   font-family: var(--font-serif);
   font-size: 2rem;

frontend/rabbi_gerzi/src/views/ElementPage.vue

@@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia'
 import { computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
+import ElementParentLink from '@/components/ElementParentLink.vue'
 import ElementSiblingNavigation from '@/components/ElementSiblingNavigation.vue'
 import SiteHeader from '@/components/SiteHeader.vue'
 import { useElementsStore } from '@/stores/elements'
@@ -10,8 +11,14 @@ type TimestampPart = string | undefined
 
 const route = useRoute()
 const elementsStore = useElementsStore()
-const { element, childElements, siblingElements, isLoading, error } =
-  storeToRefs(elementsStore)
+const {
+  element,
+  childElements,
+  parentElement,
+  siblingElements,
+  isLoading,
+  error,
+} = storeToRefs(elementsStore)
 
 const youtubeIframeAllow = [
   'accelerometer',
@@ -221,6 +228,17 @@ function isShortYoutubeHost(hostname: string): boolean {
           data-cy="element-icon"
         />
 
+        <div
+          v-if="parentElement !== null"
+          class="element-page__parent-navigation"
+        >
+          <ElementParentLink
+            :parent-element="parentElement"
+            data-cy="element-parent-link"
+            route-name="element"
+          />
+        </div>
+
         <h1 class="element-page__heading">
           {{ element.title }}
         </h1>
@@ -335,6 +353,12 @@ function isShortYoutubeHost(hostname: string): boolean {
   object-fit: contain;
 }
 
+.element-page__parent-navigation {
+  display: flex;
+  justify-content: center;
+  margin: 0 0 0.5rem;
+}
+
 .element-page__heading {
   margin: 0;
   color: #2c2c2c;