feat(#21): Replaced chat comment component with proper cursor-based commenting

legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue

@@ -57,10 +57,12 @@ import {
 import type { FormElementId } from '~~/types/formElement'
 import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
 import { useUserStore } from '~~/stores/useUserStore'
+import { useCommentStore } from '~~/stores/useCommentStore'
 
 const route = useRoute()
 const toast = useToast()
 const { t: $t } = useI18n()
+const commentStore = useCommentStore()
 
 definePageMeta({
   // Prevent whole page from re-rendering when navigating between sections to keep state
@@ -74,6 +76,10 @@ const {
   updateApplicationForm
 } = await useApplicationFormNavigation(applicationFormId!)
 
+if (applicationFormId) {
+  await commentStore.loadCounts(applicationFormId)
+}
+
 const { updateApplicationForm: updateForm, submitApplicationForm } = useApplicationForm()
 const { validateFormElements, getHighestComplianceStatus } = useApplicationFormValidator()
 const { evaluateVisibility } = useFormElementVisibility()

legalconsenthub/app/pages/index.vue

@@ -62,6 +62,18 @@
                 <p class="text-xs text-muted mt-1">#{{ index }}</p>
               </div>
               <div class="flex items-center gap-2">
+                <UTooltip
+                  v-if="(applicationFormElem.commentCount ?? 0) > 0"
+                  :text="$t('comments.count', { count: applicationFormElem.commentCount ?? 0 })"
+                >
+                  <UBadge
+                    :label="applicationFormElem.commentCount ?? 0"
+                    color="neutral"
+                    variant="subtle"
+                    icon="i-lucide-message-square"
+                    size="sm"
+                  />
+                </UTooltip>
                 <UBadge
                   v-if="applicationFormElem.status"
                   :label="applicationFormElem.status"