add sibling navigation

frontend/rabbi_gerzi/src/components/ElementSiblingNavigation.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon,
+} from 'lucide-vue-next'
+import type { ChildElement } from '@/stores/elements'
+
+type ElementRouteName = 'element' | 'admin-element'
+type ElementNavigationPrefix = 'element' | 'admin'
+
+interface Props {
+  currentElementId: number
+  dataCyPrefix: ElementNavigationPrefix
+  routeName: ElementRouteName
+  siblingElements: ChildElement[]
+}
+
+const props = defineProps<Props>()
+
+const currentSiblingIndex = computed(() => {
+  return props.siblingElements.findIndex((siblingElement) => {
+    return siblingElement.id === props.currentElementId
+  })
+})
+
+const hasSiblingNavigation = computed(() => {
+  return props.siblingElements.length > 1 && currentSiblingIndex.value !== -1
+})
+
+const previousSibling = computed(() => {
+  return siblingElementAtOffset(-1)
+})
+
+const nextSibling = computed(() => {
+  return siblingElementAtOffset(1)
+})
+
+const navigationDataCy = computed(() => {
+  return `${props.dataCyPrefix}-sibling-navigation`
+})
+
+const previousDataCy = computed(() => {
+  return `${props.dataCyPrefix}-sibling-previous`
+})
+
+const nextDataCy = computed(() => {
+  return `${props.dataCyPrefix}-sibling-next`
+})
+
+function siblingElementAtOffset(offset: number): ChildElement | null {
+  if (!hasSiblingNavigation.value) {
+    return null
+  }
+
+  const siblingCount = props.siblingElements.length
+  const targetIndex = (
+    currentSiblingIndex.value
+    + offset
+    + siblingCount
+  ) % siblingCount
+
+  return props.siblingElements[targetIndex] ?? null
+}
+</script>
+
+<template>
+  <nav
+    v-if="
+      hasSiblingNavigation
+        && previousSibling !== null
+        && nextSibling !== null
+    "
+    class="element-sibling-navigation"
+    :data-cy="navigationDataCy"
+    aria-label="Sibling elements"
+  >
+    <RouterLink
+      :to="{
+        name: routeName,
+        params: { id: previousSibling.id },
+      }"
+      class="element-sibling-navigation__link"
+      :data-cy="previousDataCy"
+    >
+      <ChevronLeftIcon :size="18" aria-hidden="true" />
+      <span>Previous</span>
+    </RouterLink>
+    <RouterLink
+      :to="{
+        name: routeName,
+        params: { id: nextSibling.id },
+      }"
+      class="element-sibling-navigation__link"
+      :data-cy="nextDataCy"
+    >
+      <span>Next</span>
+      <ChevronRightIcon :size="18" aria-hidden="true" />
+    </RouterLink>
+  </nav>
+</template>
+
+<style scoped>
+.element-sibling-navigation {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.75rem;
+  margin: 1.35rem 0 0;
+}
+
+.element-sibling-navigation__link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  min-height: 2.5rem;
+  padding: 0.55rem 0.95rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  color: var(--color-text);
+  background: var(--color-white);
+  font-family: var(--font-sans);
+  font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none;
+  transition:
+    border-color 180ms ease,
+    color 180ms ease;
+}
+
+.element-sibling-navigation__link:hover,
+.element-sibling-navigation__link:focus-visible {
+  border-color: var(--color-slate);
+  color: var(--color-slate);
+}
+
+.element-sibling-navigation__link:focus-visible {
+  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[]
+  siblingElements: ChildElement[]
 }
 
 export interface UpdateElementInput {
@@ -58,6 +59,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 siblingElements = ref<ChildElement[]>([])
   const isLoading = ref(false)
   const error = ref<string | null>(null)
   const isSaving = ref(false)
@@ -71,6 +73,7 @@ export const useElementsStore = defineStore('elements', () => {
   async function fetchElement(elementId: string): Promise<void> {
     element.value = null
     childElements.value = []
+    siblingElements.value = []
     error.value = null
     saveError.value = null
     childActionError.value = null
@@ -94,8 +97,10 @@ export const useElementsStore = defineStore('elements', () => {
       const data: ElementResponse = await response.json()
       element.value = data.element
       childElements.value = data.childElements
+      siblingElements.value = data.siblingElements
     } catch {
       childElements.value = []
+      siblingElements.value = []
       error.value = 'Network error - could not load element'
     } finally {
       isLoading.value = false
@@ -388,6 +393,7 @@ export const useElementsStore = defineStore('elements', () => {
   return {
     element,
     childElements,
+    siblingElements,
     isLoading,
     error,
     isSaving,

frontend/rabbi_gerzi/src/views/AdminElementPage.vue

@@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia'
 import { computed, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import ElementSiblingNavigation from '@/components/ElementSiblingNavigation.vue'
 import RichTextEditor from '@/components/RichTextEditor.vue'
 import SiteHeader from '@/components/SiteHeader.vue'
 import { useElementsStore } from '@/stores/elements'
@@ -23,6 +24,7 @@ const elementsStore = useElementsStore()
 const {
   element,
   childElements,
+  siblingElements,
   isLoading,
   error,
   isSaving,
@@ -318,6 +320,13 @@ function resetInput(changeEvent: Event): void {
         class="admin-element-page__form"
         @submit.prevent="handleSubmit"
       >
+        <ElementSiblingNavigation
+          :current-element-id="element.id"
+          :sibling-elements="siblingElements"
+          data-cy-prefix="admin"
+          route-name="admin-element"
+        />
+
         <label class="admin-element-page__field">
           <span class="admin-element-page__label">Title</span>
           <input

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 ElementSiblingNavigation from '@/components/ElementSiblingNavigation.vue'
 import SiteHeader from '@/components/SiteHeader.vue'
 import { useElementsStore } from '@/stores/elements'
 
@@ -9,7 +10,8 @@ type TimestampPart = string | undefined
 
 const route = useRoute()
 const elementsStore = useElementsStore()
-const { element, childElements, isLoading, error } = storeToRefs(elementsStore)
+const { element, childElements, siblingElements, isLoading, error } =
+  storeToRefs(elementsStore)
 
 const youtubeIframeAllow = [
   'accelerometer',
@@ -223,6 +225,13 @@ function isShortYoutubeHost(hostname: string): boolean {
           {{ element.title }}
         </h1>
 
+        <ElementSiblingNavigation
+          :current-element-id="element.id"
+          :sibling-elements="siblingElements"
+          data-cy-prefix="element"
+          route-name="element"
+        />
+
         <div
           v-if="element.richText !== ''"
           class="element-page__rich-text"