feat: Add @data-fair/lib-vuetify-events with notification queue component

Dockerfile

@@ -1,5 +1,5 @@
 ##########################
-FROM node:24.14.0-alpine3.23 AS base
+FROM node:24.14.1-alpine3.23 AS base
 
 WORKDIR /app
 ENV NODE_ENV=production
@@ -26,9 +26,12 @@ COPY --from=package-strip /app/package.json package.json
 COPY --from=package-strip /app/package-lock.json package-lock.json
 ADD ui/package.json ui/package.json
 ADD api/package.json api/package.json
-# full deps install used for building
+ADD lib-vuetify/package.json lib-vuetify/package.json
+# full deps install used for types and ui building
 # also used to fill the npm cache for faster install of api deps
-RUN npm ci --omit=optional --no-audit --no-fund
+RUN npm ci --omit=dev --no-audit --no-fund
+# install dev dependencies for ui workspace
+RUN npm install -w ui --include=dev --no-audit --no-fund
 
 ##########################
 FROM installer AS types
@@ -46,6 +49,7 @@ COPY --from=types /app/api/config api/config
 COPY --from=types /app/api/types api/types
 ADD /api/src/config.ts api/src/config.ts
 ADD /ui ui
+ADD /lib-vuetify lib-vuetify
 RUN npm -w ui run build
 
 ##########################

eslint.config.mjs

@@ -2,7 +2,7 @@ import neostandard from 'neostandard'
 import dfLibRecommended from '@data-fair/lib-utils/eslint/recommended.js'
 
 export default [
-  { ignores: ['ui/*', '**/.type/', 'dev/*', 'node_modules/*'] },
+  { ignores: ['ui/*', '**/.type/', 'dev/*', 'node_modules/*', 'lib-vuetify/*.js', 'lib-vuetify/*.d.ts'] },
   ...dfLibRecommended,
   ...neostandard({ ts: true })
 ]

lib-vuetify/.gitignore

@@ -0,0 +1,3 @@
+*.js
+*.d.ts
+!env.d.ts

lib-vuetify/DfNotificationQueue.vue

@@ -0,0 +1,134 @@
+<template>
+  <!-- Eager to prevent ARIA errors-->
+  <v-menu
+    :close-on-content-click="false"
+    max-height="400"
+    max-width="500"
+    width="100%"
+    eager
+    style="z-index: 2600; /* Higher than agent-chat's 2500 */"
+  >
+    <template #activator="{ props }">
+      <v-btn
+        v-bind="props"
+        :title="t('openNotificationList')"
+        stacked
+        @click="refresh()"
+      >
+        <v-badge
+          :model-value="!!countNew"
+          :content="countNew"
+          color="warning"
+        >
+          <v-icon :icon="mdiBell" />
+        </v-badge>
+      </v-btn>
+    </template>
+
+    <v-list density="compact">
+      <v-list-item v-if="!session.state.user">
+        {{ t('loginRequired.part1') }} <a
+          :href="session.loginUrl()"
+          class="simple-link"
+        >{{ t('loginRequired.part2') }}</a> {{ t('loginRequired.part3') }}
+      </v-list-item>
+      <v-list-item v-else-if="!notifications || !notifications.length">
+        {{ t('noNotifications') }}
+      </v-list-item>
+      <v-list-item
+        v-for="notif in notifications"
+        v-else
+        :key="notif._id"
+        :href="notif.url"
+        :title="notif.title"
+        :subtitle="dayjs(notif.date).format('lll')"
+        :value="notif._id"
+        :active="notif.new"
+        active-class="text-pink"
+        lines="three"
+      >
+        <template #subtitle>
+          {{ dayjs(notif.date).format('lll') }}
+          <div v-if="notif.body">{{ notif.body }}</div>
+        </template>
+
+        <template
+          v-if="notif.sender"
+          #append
+        >
+          <owner-avatar :owner="notif.sender" />
+        </template>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { ofetch } from 'ofetch'
+import OwnerAvatar from '@data-fair/lib-vuetify/owner-avatar.vue'
+import useSession from '@data-fair/lib-vue/session.js'
+import useLocaleDayjs from '@data-fair/lib-vue/locale-dayjs.js'
+import { useI18n } from 'vue-i18n'
+import { mdiBell } from '@mdi/js'
+
+const props = defineProps<{
+  eventsUrl: string
+}>()
+
+const session = useSession()
+const { dayjs } = useLocaleDayjs()
+const { t } = useI18n()
+
+type NotificationItem = {
+  _id: string
+  title: string
+  date: string
+  body?: string
+  url?: string
+  new?: boolean
+  sender?: {
+    type: 'user' | 'organization'
+    id: string
+    name?: string
+  }
+}
+
+type NotificationsRes = {
+  results: NotificationItem[]
+  count: number
+  countNew: number
+}
+
+const notifications = ref<NotificationItem[]>([])
+const countNew = ref(0)
+
+async function refresh () {
+  if (!session.state.user) return
+  const res = await ofetch<NotificationsRes>(`${props.eventsUrl}/notifications`, { query: { size: 10 } })
+  notifications.value = res.results
+  countNew.value = res.countNew
+}
+
+onMounted(() => {
+  refresh()
+})
+</script>
+
+<i18n lang="yaml">
+  en:
+    loginRequired:
+      part1: You must
+      part2: log in
+      part3: to receive notifications.
+    noNotifications: You have not received any notifications yet.
+    openNotificationList: Open notification list
+
+  fr:
+    loginRequired:
+      part1: Vous devez vous
+      part2: connecter
+      part3: pour recevoir des notifications.
+    noNotifications: Vous n'avez pas encore reçu de notification.
+    openNotificationList: Ouvrir la liste des notifications
+</i18n>

lib-vuetify/env.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

lib-vuetify/index.ts

@@ -0,0 +1 @@
+export { default as DfNotificationQueue } from './DfNotificationQueue.vue'

lib-vuetify/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@data-fair/lib-vuetify-events",
+  "version": "0.2.1",
+  "description": "Vuetify components for embedding events features.",
+  "main": "index.js",
+  "type": "module",
+  "files": [
+    "**/*.js",
+    "**/*.d.ts",
+    "**/*.vue"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "tsc"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "vuetify": "^4.0.0",
+    "@data-fair/lib-vuetify": "^2.0.0",
+    "@data-fair/lib-vue": "^1.26.0"
+  },
+  "dependencies": {
+    "@mdi/js": "^7.4.47",
+    "ofetch": "^1.4.0"
+  }
+}

lib-vuetify/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "declaration": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": ".",
+    "rootDir": ".",
+    "lib": ["ESNext", "DOM"]
+  },
+  "include": ["*.ts"],
+  "exclude": ["node_modules"]
+}