From f5a9e491cee7e1629158afd28f8a7473ace39cfb Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Mon, 11 May 2026 01:06:11 +0200
Subject: [PATCH] feat(primevue): add Icon component and mount Toast +
 ConfirmDialog services
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two additions complete the F3 runtime scaffolding:

apps/app/src/components/Icon.vue — generic Iconify renderer wrapping
@iconify/vue's <Icon> component. F4 migration substitutes
<VIcon icon="tabler-X" /> with <Icon name="tabler-X" /> at call-sites,
producing real SVG output and using the existing Crewli "tabler-*"
naming convention. Props: name (required, e.g. "tabler-eye"), optional
size. The component avoids @iconify/vue's auto-import for clarity at
call-sites.

apps/app/src/App.vue — mounts <Toast /> and <ConfirmDialog /> at the
template root inside VLocaleProvider. Both render alongside the
existing VSnackbar and VDialog confirm patterns during the F3–F4
parallel-mode window. F4 sub-packages migrate call-sites to PrimeVue's
useToast() / useConfirm() composables.

UnoCSS-style i-tabler-* utility-class rendering (RFC AD-5 v1.0 wording)
is not adopted — UnoCSS is not installed in the Crewli stack. The
RFC will be aligned in B9.

Verification:
- pnpm typecheck — clean.
- pnpm test — 402 tests pass unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/app/src/App.vue             | 10 +++++++++
 apps/app/src/components/Icon.vue | 35 ++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 apps/app/src/components/Icon.vue

diff --git a/apps/app/src/App.vue b/apps/app/src/App.vue
index a1733b1f..d64ba1b0 100644
--- a/apps/app/src/App.vue
+++ b/apps/app/src/App.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { useTheme } from 'vuetify'
+import Toast from 'primevue/toast'
+import ConfirmDialog from 'primevue/confirmdialog'
 import ScrollToTop from '@core/components/ScrollToTop.vue'
 import initCore from '@core/initCore'
 import { initConfigStore, useConfigStore } from '@core/stores/config'
@@ -68,5 +70,13 @@ authStore.initialize()
         </VBtn>
       </template>
     </VSnackbar>
+
+    <!--
+      PrimeVue overlay services (F3 — parallel-mode with VSnackbar above
+      and the legacy VDialog confirm patterns until F4 sub-packages
+      migrate call-sites to useToast() and useConfirm()).
+    -->
+    <Toast />
+    <ConfirmDialog />
   </VLocaleProvider>
 </template>
diff --git a/apps/app/src/components/Icon.vue b/apps/app/src/components/Icon.vue
new file mode 100644
index 00000000..393e1136
--- /dev/null
+++ b/apps/app/src/components/Icon.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Generic Iconify renderer — the F4-migration replacement for
+// <VIcon icon="tabler-X" />. Wraps @iconify/vue's <Icon> component so
+// call-sites use the existing Crewli icon naming convention
+// ("tabler-eye", "tabler-user", "tabler-mail-code", …) and get real
+// SVG output without depending on Vuetify's icon adapter.
+//
+// Per RFC AD-5 (corrected in B9): @iconify/vue produces the SVG.
+// UnoCSS-style i-tabler-* utility classes were considered but not
+// adopted — UnoCSS is not in the Crewli stack.
+//
+// Usage:
+//   <Icon name="tabler-eye" />
+//   <Icon name="tabler-user" size="20" />
+//   <Icon name="tabler-shield-lock" class="text-primary-500" />
+
+import { Icon as IconifyIcon } from '@iconify/vue'
+
+interface Props {
+  name: string
+  size?: number | string
+}
+
+withDefaults(defineProps<Props>(), {
+  size: undefined,
+})
+</script>
+
+<template>
+  <IconifyIcon
+    :icon="name"
+    :width="size"
+    :height="size"
+  />
+</template>