fetch element title

frontend/rabbi_gerzi/src/views/ElementPage.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import SiteHeader from '@/components/SiteHeader.vue'
+import { useElementsStore } from '@/stores/elements'
 
 const route = useRoute()
+const elementsStore = useElementsStore()
+const { element, isLoading, error } = storeToRefs(elementsStore)
 
 const elementId = computed(() => {
   const routeElementId = route.params.id
@@ -14,13 +18,35 @@ const elementId = computed(() => {
 
   return routeElementId
 })
+
+watch(
+  elementId,
+  (currentElementId) => {
+    if (typeof currentElementId !== 'string' || currentElementId === '') {
+      return
+    }
+
+    void elementsStore.fetchElement(currentElementId)
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
   <div class="element-page">
     <SiteHeader />
     <main class="element-page__main" data-cy="element-page">
-      <h1 class="element-page__heading">Element {{ elementId }}</h1>
+      <p v-if="isLoading" class="element-page__status">Loading element...</p>
+      <p
+        v-else-if="error"
+        class="element-page__status element-page__status--error"
+        data-cy="element-error"
+      >
+        {{ error }}
+      </p>
+      <h1 v-else-if="element" class="element-page__heading">
+        {{ element.title }}
+      </h1>
     </main>
   </div>
 </template>
@@ -46,6 +72,22 @@ const elementId = computed(() => {
   text-align: center;
 }
 
+.element-page__status {
+  max-width: 48rem;
+  margin: 0 auto;
+  padding: 1rem 1.25rem;
+  color: var(--color-text-muted);
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  font-size: 0.95rem;
+}
+
+.element-page__status--error {
+  color: #7c2d2d;
+  border-color: #e5b8b8;
+}
+
 @media (max-width: 768px) {
   .element-page__main {
     padding: 3rem 1rem;