frontend: upgrade to primevue v4, various fixes

flake.nix

@@ -190,7 +190,7 @@
 
           # When modifying npm dependencies, replace the hash with pkgs.lib.fakeSha256
           # then run `nix build .#frontend`. Use the hash in the error to replace the value.
-          npmDepsHash = "sha256-bEtkS+1YhC66d1iBX0w+5a2Sots7lyoDYDnSpl28iVI=";
+          npmDepsHash = "sha256-dVEKDZa/Bk1vUXzlH49Vaok5L01T9DRo64mOuTIiyks=";
 
           installPhase = ''
             runHook preInstall

frontend/app.vue

@@ -3,7 +3,9 @@
   <NuxtLayout>
     <NuxtPage v-if="state.loaded" />
     <NuxtPage v-else>
-      <h1>API is not available</h1>
+      <h1 class="text-xl">
+        API is not available
+      </h1>
       <p>Please try again later</p>
     </NuxtPage>
   </NuxtLayout>

frontend/assets/main.css

@@ -40,3 +40,15 @@ body,
 .coco-text {
   color: #ffffff;
 }
+
+/*
+remove the arrow set in p-popover::before
+can be removed once the issue is fixed in primevue
+*/
+.p-popover::before,
+.p-popover::after,
+.p-confirmpopup::before,
+.p-confirmpopup::after {
+  content: none;
+  display: none;
+}

frontend/assets/richtext.css

@@ -0,0 +1,64 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    .rich-text-content h1 {
+        @apply text-3xl font-bold mb-2;
+    }
+
+    .rich-text-content h2 {
+        @apply text-2xl font-bold mb-2;
+    }
+
+    .rich-text-content h3 {
+        @apply text-xl font-bold mb-2;
+    }
+
+    .rich-text-content h4 {
+        @apply text-lg font-bold mb-2;
+    }
+
+    .rich-text-content h5 {
+        @apply text-base font-bold mb-2;
+    }
+
+    .rich-text-content h6 {
+        @apply text-sm font-bold mb-1;
+    }
+
+    .rich-text-content p {
+        @apply mb-4 leading-tight;
+    }
+
+    .rich-text-content ul {
+        @apply list-disc pl-5 mb-4;
+    }
+
+    .rich-text-content a {
+        @apply underline text-blue-600 hover:text-blue-800;
+    }
+
+    .rich-text-content em,
+    .rich-text-content i {
+        @apply italic;
+    }
+
+    .rich-text-content strong,
+    .rich-text-content b {
+        @apply font-bold;
+    }
+
+    .rich-text-content u {
+        @apply underline;
+    }
+
+    .rich-text-content s {
+        @apply line-through;
+    }
+
+    .rich-text-content q,
+    .rich-text-content blockquote {
+        @apply border-l-4 border-gray-300 pl-2 italic;
+    }
+}

frontend/components/CommentsDisplayer.vue

@@ -1,11 +1,12 @@
 <template>
-  <Accordion :active-index="0">
-    <AccordionTab
+  <Accordion :value="sortedComments[0].id">
+    <AccordionPanel
       v-for="comment in sortedComments"
       :key="comment.id"
+      :value="comment.id"
     >
-      <template #header>
-        <span class="flex align-items-center gap-2 w-full">
+      <AccordionHeader>
+        <span class="flex items-center gap-2 w-full">
           {{ comment.author }} - {{ new Date(comment.created_at).toLocaleDateString() }}
           <Tag
             v-if="!public && (comment as AdminComment).moderated"
@@ -22,18 +23,22 @@
             @delete="(id, name, onDeleteDone) => emit('delete', id, name, onDeleteDone)"
           />
         </span>
-      </template>
+      </AccordionHeader>
+
       <!-- eslint-disable vue/no-v-html -->
-      <p
-        style="white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;"
-        v-html="purify_strict(comment.text)"
-      />
+      <AccordionContent>
+        <p
+          style="white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;"
+          class="rich-text-content"
+          v-html="purify_strict(comment.text)"
+        />
 
-      <ViewerCommonFormFields
-        :fields="props.commentFormFields"
-        :data="comment.data"
-      />
-    </AccordionTab>
+        <ViewerCommonFormFields
+          :fields="props.commentFormFields"
+          :data="comment.data"
+        />
+      </AccordionContent>
+    </AccordionPanel>
   </Accordion>
 </template>
 

frontend/components/DisplayedTag.vue

@@ -25,6 +25,6 @@ function getTextColor(hexColor: string): string {
   const g = parseInt(hex.substring(2, 4), 16)
   const b = parseInt(hex.substring(4, 6), 16)
   const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255
-  return luminance > 0.5 ? 'black' : 'white'
+  return luminance > 0.6 ? 'black' : 'white'
 }
 </script>

frontend/components/NominatimPicker.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <form @submit.prevent="searchNominatim">
-      <InputGroup class="mb-4 mt-2">
+      <InputGroup class="mb-6 mt-2">
         <InputText
           v-model="locationInput"
           placeholder="Rechercher une adresse"
@@ -25,7 +25,7 @@
     </div>
     <div
       v-else-if="locationSelected && resultsSearched"
-      class="h-20rem"
+      class="h-80"
     >
       <SingleEntityMap
         :coordinates="transformedCoordinates"

frontend/components/StartPopup.vue

@@ -10,14 +10,17 @@
     :style="{ width: '50rem' }"
     :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
   >
-    <div v-html="popupData.sanitizedContent" />
+    <div
+      class="rich-text-content"
+      v-html="popupData.sanitizedContent"
+    />
 
     <div v-if="popupData?.sanitizedCheckbox">
-      <span class="flex align-items-center gap-2">
-        <InputSwitch
+      <span class="flex items-center gap-2">
+        <ToggleSwitch
           v-model="validationCheckbox"
           input-id="validated_popup"
-          class="flex-shrink-0"
+          class="shrink-0"
         />
         <label
           for="validated_popup"

frontend/components/admin/EditDeleteButtons.vue

@@ -4,7 +4,7 @@
     outlined
     rounded
     class="mx-2"
-    severity="warning"
+    severity="warn"
     @click="() => emit('edit', props.id)"
   >
     <template #icon>
@@ -36,18 +36,18 @@
     :header="`Suppression ${props.modelName} ${props.name}`"
     :style="{ width: '25rem' }"
   >
-    <span class="p-text-secondary block mb-3 -mt-2">
+    <span class="p-text-secondary block mb-4 -mt-2">
       <p>La suppression {{ props.modelName }} {{ props.name }}
         entraînera <b>la suppression définitive de {{ props.secureDeleteEntityCount }} entités</b>.</p>
       <p>Cette action ne pourra pas être annulée. Pour confirmer, veuillez entrer le nom {{ props.modelName }} ci-dessous :</p>
     </span>
     <InputText
       id="repeatName"
       v-model="repeatName"
-      class="mb-4"
+      class="mb-6"
       autocomplete="off"
     />
-    <div class="flex justify-content-end gap-2">
+    <div class="flex justify-end gap-2">
       <Button
         type="button"
         label="Annuler"
@@ -58,7 +58,11 @@
         :disabled="repeatName.toUpperCase() != props.name.toUpperCase()"
         type="button"
         label="Confirmer"
-        @click="() => { secureDeleteDialogVisible = false, loading = true, emit('delete', props.id, props.name, onDeleteDone) }"
+        @click="() => {
+          secureDeleteDialogVisible = false,
+          loading = true,
+          emit('delete', props.id, props.name, onDeleteDone)
+        }"
       />
     </div>
   </Dialog>

frontend/components/admin/EntityKinshipTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-column gap-2">
+  <div class="flex flex-col gap-2">
     <span class="flex gap-2">
       <Button
         v-if="!hasChildren"
@@ -48,7 +48,7 @@
       <Column
         field="display_name"
         header="Nom de l'entité"
-        class="max-w-25rem"
+        class="max-w-[25rem]"
         sortable
       />
 

frontend/components/admin/Navbar.vue

@@ -4,12 +4,12 @@
     class="admin-navbar mb-2 coco-text top-0 left-0 fixed w-full"
   >
     <template #start>
-      <div class="flex align-items-center">
+      <div class="flex items-center">
         <Button
           outlined
           severity="secondary"
           small
-          class="p-1 mr-2"
+          class="!p-1 !mr-2"
           style="color: white; border-color: white;"
           @click="() => { emit('toggleSidebar') }"
         >
@@ -21,21 +21,24 @@
           </template>
         </Button>
 
-        <NuxtLink to="/admin">
+        <NuxtLink
+          to="/admin"
+          class="ml-1 "
+        >
           <img
             height="40"
             width="40"
             alt="icon"
             :src="safehaven_logo"
           >
         </NuxtLink>
-        <div class="pl-3">
-          <h3 class="my-0">
+        <div class="navbar-text pl-4">
+          <div class="my-0 text-lg font-extrabold">
             SafeHaven
-          </h3>
-          <span class="text-xs font-italic">
+          </div>
+          <div class="text-xs italic">
             {{ state.options.general.title }}
-          </span>
+          </div>
         </div>
       </div>
     </template>
@@ -44,7 +47,6 @@
 
     <template #end>
       <Button
-        text
         rounded
         severity="secondary"
         class="p-0 mx-2"
@@ -55,7 +57,7 @@
         <template #default>
           <AdminUserAvatar
             :username="state.username!"
-            size="large"
+            size="normal"
           />
         </template>
       </Button>
@@ -77,7 +79,7 @@ import safehaven_logo from '~/assets/logo_square_white.svg'
 
 const emit = defineEmits(['toggleSidebar'])
 
-const accountMenu = ref<Menu | null>(null)
+const accountMenu = ref<typeof Menu | null>(null)
 
 const navbarRef: Ref<HTMLElement | null> = ref(null)
 
@@ -111,11 +113,15 @@ function toggleAccountMenu(event: Event) {
 
 <style>
 .admin-navbar {
-  background-color: #E86BA7;
-  border-radius: 0;
-  border-left-width: 0;
-  border-right-width: 0;
-  border-top-width: 0;
-  z-index: 1000;
+  background-color: #E86BA7 !important;
+  border-radius: 0 !important;
+  border-left-width: 0 !important;
+  border-right-width: 0 !important;
+  border-top-width: 0 !important;
+  z-index: 1000 !important;
+}
+
+.navbar-text {
+  color: white;
 }
 </style>