fix: consistent inconsistencies

Author: mtdvlpr

app/pages/translate/index.vue

@@ -16,17 +16,14 @@
       <UPageGrid>
         <UPageCard v-for="(card, index) in cards" :key="index" v-bind="card" />
       </UPageGrid>
-      <div
-        v-if="uiStore.uiInconsistencies.length > 0"
-        class="flex flex-col gap-8"
-      >
+      <template v-if="uiStore.uiInconsistencies.length > 0">
         <p>{{ uiStore.uiInconsistencies.length }} UI inconsistentie(s):</p>
         <UAlert
           v-for="term in uiStore.uiInconsistencies"
           :key="term.key"
           color="warning"
           variant="subtle"
-          :title="`Inconsistentie voor: ${term.key}`"
+          :title="`Inconsistentie in de key: ${term.key}`"
           :description="`NWS: ${term.nws} • NWP: ${term.nwp}`"
           :actions="[
             {
@@ -41,7 +38,7 @@
             },
           ]"
         />
-      </div>
+      </template>
     </UPageBody>
   </UPage>
 </template>
@@ -53,7 +50,7 @@ const translationStore = useTranslationStore();
 const cards = computed((): PageCardProps[] => {
   return [
     {
-      description: `${uiStore.keys.length} records. ${uiStore.inconsistentNWS.length > 0 ? `${uiStore.inconsistentNWS.flatMap((i) => i.others).length} inconsistentie(s).` : ""}`,
+      description: `${uiStore.keys.length} records. ${uiStore.inconsistentNWS.length > 0 ? `${uiStore.inconsistentNWS.length} mogelijke inconsistentie(s).` : ""}`,
       icon: "i-lucide:monitor",
       title: "NWS UI",
       to: "/translate/nws",

app/pages/translate/nws/index.vue

@@ -1,35 +1,41 @@
 <template>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col gap-8">
     <p>Kies een key uit de lijst om te vertalen.</p>
-    <UAlert
-      v-for="i in uiStore.inconsistentNWS"
-      :key="i.key"
-      color="warning"
-      variant="subtle"
-      :title="`Inconsistentie in de term: ${i.original} = ${i.translation}`"
-      :description="
-        i.others.length === 1
-          ? i.others[0]!.value
-          : `${i.others.length} inconsistente vertalingen`
-      "
-      :actions="[
-        {
-          label: 'Open termen naast elkaar',
-          to: `/translate/nws/${i.key},${i.others.map((o) => o.key).join(',')}`,
-        },
-        ...(i.others.length === 1
-          ? ([
-              {
-                label: 'Markeer als consistent',
-                onClick: () => {
-                  uiStore.markNWSConsistent(i.key, i.others[0]!.key);
+    <template v-if="uiStore.inconsistentNWS.length > 0">
+      <p>
+        {{ uiStore.inconsistentNWS.length }} mogelijke inconsistentie(s)
+        gevonden:
+      </p>
+      <UAlert
+        v-for="i in uiStore.inconsistentNWS"
+        :key="i.key"
+        color="warning"
+        variant="subtle"
+        :title="`Inconsistentie in de term: ${i.original} = ${i.translation}`"
+        :description="
+          i.others.length === 1
+            ? i.others[0]!.value
+            : `${i.others.length} inconsistente vertalingen`
+        "
+        :actions="[
+          {
+            label: 'Open termen naast elkaar',
+            to: `/translate/nws/${i.key},${i.others.map((o) => o.key).join(',')}`,
+          },
+          ...(i.others.length === 1
+            ? ([
+                {
+                  label: 'Markeer als consistent',
+                  onClick: () => {
+                    uiStore.markNWSConsistent(i.key, i.others[0]!.key);
+                  },
+                  color: 'neutral',
                 },
-                color: 'neutral',
-              },
-            ] as const)
-          : []),
-      ]"
-    />
+              ] as const)
+            : []),
+        ]"
+      />
+    </template>
   </div>
 </template>
 <script setup lang="ts">

app/pages/translate/tips/index.vue

@@ -8,6 +8,10 @@
 
     <UPageBody>
       <template v-if="translationStore.inconsistentTips.length">
+        <p>
+          {{ translationStore.inconsistentTips.length }} inconsistentie(s)
+          gevonden:
+        </p>
         <UAlert
           v-for="h in translationStore.inconsistentTips"
           :key="h.heading"

eslint.config.mjs

@@ -1,6 +1,7 @@
 import vitest from "@vitest/eslint-plugin";
+import eslintConfigPrettier from "eslint-config-prettier/flat";
 import perfectionist from "eslint-plugin-perfectionist";
-import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+//import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
 import security from "eslint-plugin-security";
 
 // @ts-check
@@ -42,8 +43,10 @@ export default withNuxt(
   },
 
   // Prettier
-  eslintPluginPrettierRecommended,
-  { rules: { "prettier/prettier": ["error", { endOfLine: "auto" }] } },
+  eslintConfigPrettier,
+  // Causing issues: https://github.com/prettier/eslint-plugin-prettier/issues/65
+  //eslintPluginPrettierRecommended,
+  //{ rules: { "prettier/prettier": ["error", { endOfLine: "auto" }] } },
 ).overrideRules({
   "security/detect-object-injection": "off",
   "vue/attributes-order": [