From 80592167c8fb76a2ec2881a576d3f230059977cd Mon Sep 17 00:00:00 2001
From: Denis Lugowski <denis.lugowski@gmail.com>
Date: Sat, 4 Oct 2025 08:17:22 +0200
Subject: [PATCH] feat(frontend): Close notification slider over on click, fix
 types, delete dead code

---
 legalconsenthub/components/NotificationsSlideover.vue  | 10 ++++++++--
 .../composables/notification/useNotification.ts        | 10 +++++-----
 .../pages/application-forms/[id]/[sectionIndex].vue    |  5 -----
 legalconsenthub/pages/create.vue                       |  2 +-
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/legalconsenthub/components/NotificationsSlideover.vue b/legalconsenthub/components/NotificationsSlideover.vue
index 7b9c6cd..86de644 100644
--- a/legalconsenthub/components/NotificationsSlideover.vue
+++ b/legalconsenthub/components/NotificationsSlideover.vue
@@ -11,7 +11,7 @@
         :key="notification.id"
         :to="notification.clickTarget"
         class="px-3 py-2.5 rounded-md hover:bg-elevated/50 flex items-center gap-3 relative -mx-3 first:-mt-3 last:-mb-3"
-        @click="handleNotificationClick(notification)"
+        @click="onNotificationClick(notification)"
       >
         <UChip
           :color="notification.type === 'ERROR' ? 'error' : notification.type === 'WARNING' ? 'warning' : 'primary'"
@@ -54,7 +54,7 @@
               {{ notification.type }}
             </UBadge>
             <UBadge color="neutral" variant="subtle" size="xs">
-              {{ notification.targetGroup }}
+              {{ notification.role }}
             </UBadge>
           </div>
         </div>
@@ -65,6 +65,7 @@
 
 <script setup lang="ts">
 import { formatTimeAgo } from '@vueuse/core'
+import type { NotificationDto } from '~/.api-client'
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
@@ -86,4 +87,9 @@ watch(isOpen, async (newValue) => {
     await fetchNotifications()
   }
 })
+
+function onNotificationClick(notification: NotificationDto) {
+  handleNotificationClick(notification)
+  emit('update:modelValue', false)
+}
 </script>
diff --git a/legalconsenthub/composables/notification/useNotification.ts b/legalconsenthub/composables/notification/useNotification.ts
index ed9978c..8549609 100644
--- a/legalconsenthub/composables/notification/useNotification.ts
+++ b/legalconsenthub/composables/notification/useNotification.ts
@@ -92,7 +92,7 @@ export const useNotification = () => {
 
   const startPeriodicRefresh = (intervalMs: number = 30000) => {
     const interval = setInterval(() => {
-      fetchUnreadCount()
+      void fetchUnreadCount()
     }, intervalMs)
 
     onUnmounted(() => {
@@ -103,10 +103,10 @@ export const useNotification = () => {
   }
 
   return {
-    notifications: readonly(notifications),
-    unreadNotifications: readonly(unreadNotifications),
-    unreadCount: readonly(unreadCount),
-    isLoading: readonly(isLoading),
+    notifications,
+    unreadNotifications,
+    unreadCount,
+    isLoading,
     fetchNotifications,
     fetchUnreadNotifications,
     fetchUnreadCount,
diff --git a/legalconsenthub/pages/application-forms/[id]/[sectionIndex].vue b/legalconsenthub/pages/application-forms/[id]/[sectionIndex].vue
index 3c944ac..f33a8a2 100644
--- a/legalconsenthub/pages/application-forms/[id]/[sectionIndex].vue
+++ b/legalconsenthub/pages/application-forms/[id]/[sectionIndex].vue
@@ -40,7 +40,6 @@
             v-model="currentFormElementSection.formElements"
             :application-form-id="applicationForm.id"
             :disabled="isReadOnly"
-            @click:comments="openComments"
           />
           <div class="flex gap-2 justify-between mt-4">
             <UButton
@@ -160,8 +159,4 @@ async function onSubmit() {
     toast.add({ title: 'Success', description: 'Application form submitted', color: 'success' })
   }
 }
-
-function openComments(formElementId: string) {
-  console.log('open comments for', formElementId)
-}
 </script>
diff --git a/legalconsenthub/pages/create.vue b/legalconsenthub/pages/create.vue
index cccdece..df7a3ac 100644
--- a/legalconsenthub/pages/create.vue
+++ b/legalconsenthub/pages/create.vue
@@ -80,7 +80,7 @@
 <script setup lang="ts">
 import { ComplianceStatus, type FormElementSectionDto, type PagedApplicationFormDto } from '~/.api-client'
 import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
-import type { FormElementId } from '~/types/FormElement'
+import type { FormElementId } from '~/types/formElement'
 import type { StepperItem } from '@nuxt/ui'
 
 const { getAllApplicationFormTemplates } = useApplicationFormTemplate()