From 18a2e04b8f62562b965cc63fc736e71f37539978 Mon Sep 17 00:00:00 2001
From: Pierre Brisorgueil <pierrebrisorgueil@me.com>
Date: Thu, 11 Jun 2026 18:42:39 +0200
Subject: [PATCH 1/7] feat(core): datatable card-level #toolbar slot; move
 add-member + invite buttons into the card title

Adds an optional named #toolbar slot to core.datatable.component between the
title spacer and the search field (named toolbar, not actions, to avoid
colliding with the dynamic per-row slots resolved via header.slotName ||
header.value). Members tab: the Add member button moves from its own row
above the card into the toolbar slot, fixing the misalignment with the
Details card (data-test org-add-member-open preserved for e2e). Admin
Invitations: the Invite button moves into the same slot (top-right of the
card, no search on that table) like other admin tabs.
---
 .../components/core.datatable.component.vue   |  7 +++-
 .../core.datatable.component.unit.tests.js    | 33 +++++++++++++++++++
 .../invitations.admin.view.unit.tests.js      |  3 +-
 .../views/invitations.admin.view.vue          | 14 ++++----
 .../organizations.members.component.vue       | 30 +++++++++--------
 ...anizations.members.component.unit.tests.js |  3 +-
 6 files changed, 67 insertions(+), 23 deletions(-)

diff --git a/src/modules/core/components/core.datatable.component.vue b/src/modules/core/components/core.datatable.component.vue
index da2536b0e..bc6f3ee79 100644
--- a/src/modules/core/components/core.datatable.component.vue
+++ b/src/modules/core/components/core.datatable.component.vue
@@ -1,8 +1,13 @@
 <template>
   <v-card width="100%" class="datatable" color="surface" :flat="config.vuetify.theme.flat" :class="config.vuetify.theme.rounded">
-    <v-card-title class="d-flex align-center">
+    <v-card-title class="d-flex align-center ga-3">
       <span class="text-title-medium">{{ title }}</span>
       <v-spacer></v-spacer>
+      <!-- Optional card-level actions (e.g. an "Add" button) rendered inside the card
+           title, left of the search field. Named `toolbar` — NOT `actions` — because
+           row slots resolve dynamically via `header.slotName || header.value` and
+           several consumers already pass #actions for the row actions column. -->
+      <slot name="toolbar"></slot>
       <v-text-field
         v-if="search"
         v-model="textSearch"
diff --git a/src/modules/core/tests/core.datatable.component.unit.tests.js b/src/modules/core/tests/core.datatable.component.unit.tests.js
index 85f749bd5..1dfb931b5 100644
--- a/src/modules/core/tests/core.datatable.component.unit.tests.js
+++ b/src/modules/core/tests/core.datatable.component.unit.tests.js
@@ -94,4 +94,37 @@ describe('core.datatable.component', () => {
       });
     }).not.toThrow();
   });
+
+  // Card-level #toolbar slot — renders inside the v-card-title, left of the search
+  // field. Named `toolbar` (not `actions`) to avoid colliding with the dynamic
+  // per-row slots resolved via `header.slotName || header.value`.
+  it('renders the #toolbar slot content in the card title', () => {
+    const wrapper = mount(CoreDatatable, {
+      props: { headers: [{ text: 'Name', value: 'name' }], items: [], fetchAction: vi.fn().mockResolvedValue() },
+      slots: { toolbar: '<button data-test="toolbar-action">Add</button>' },
+      global: globalOpts(vuetify),
+    });
+    const action = wrapper.find('[data-test="toolbar-action"]');
+    expect(action.exists()).toBe(true);
+    expect(action.element.closest('.v-card-title')).not.toBeNull();
+  });
+
+  it('does not collide with a per-row #actions slot (toolbar stays out of the rows)', () => {
+    const headers = [
+      { text: 'Name', value: 'name' },
+      { text: 'Actions', value: 'actions', kind: 'slot', slotName: 'actions' },
+    ];
+    const items = [{ _id: '1', name: 'John' }];
+    const wrapper = mount(CoreDatatable, {
+      props: { headers, items, fetchAction: vi.fn().mockResolvedValue() },
+      slots: {
+        toolbar: '<button data-test="toolbar-action">Add</button>',
+        actions: '<span data-test="row-action">edit</span>',
+      },
+      global: globalOpts(vuetify),
+    });
+    // Row slot renders in the table body, toolbar slot in the card title — both present, independent.
+    expect(wrapper.find('[data-test="row-action"]').element.closest('tbody')).not.toBeNull();
+    expect(wrapper.find('[data-test="toolbar-action"]').element.closest('.v-card-title')).not.toBeNull();
+  });
 });
diff --git a/src/modules/invitations/tests/invitations.admin.view.unit.tests.js b/src/modules/invitations/tests/invitations.admin.view.unit.tests.js
index d90542176..031df8084 100644
--- a/src/modules/invitations/tests/invitations.admin.view.unit.tests.js
+++ b/src/modules/invitations/tests/invitations.admin.view.unit.tests.js
@@ -13,9 +13,10 @@ vi.mock('../../../lib/services/config', () => ({
 }));
 
 const stubs = {
-  // Render named slots so the #status/#invitedBy/#actions template functions are invoked
+  // Render named slots so the #toolbar/#status/#invitedBy/#actions template functions are invoked
   coreDataTableComponent: {
     template: `<div>
+      <slot name="toolbar" />
       <slot name="status" :item="{ id:'s1', email:'a@b.co', usedAt: null, expiresAt: '2999-01-01', invitedBy: null }" />
       <slot name="invitedBy" :item="{ id:'s2', email:'b@b.co', usedAt: null, expiresAt: null, invitedBy: { email: 'admin@b.co' } }" />
       <slot name="invitedBy" :item="{ id:'s4', email:'d@b.co', usedAt: null, expiresAt: null, invitedBy: null }" />
diff --git a/src/modules/invitations/views/invitations.admin.view.vue b/src/modules/invitations/views/invitations.admin.view.vue
index fbd559247..9e619d775 100644
--- a/src/modules/invitations/views/invitations.admin.view.vue
+++ b/src/modules/invitations/views/invitations.admin.view.vue
@@ -16,14 +16,16 @@
         </v-alert>
       </v-col>
 
-      <v-col cols="12" class="d-flex justify-end">
-        <v-btn color="primary" variant="flat" :class="config.vuetify.theme.rounded" class="text-none" @click="openCreate">
-          <v-icon start icon="fa-solid fa-envelope"></v-icon>
-          Invite
-        </v-btn>
-      </v-col>
       <v-col cols="12">
         <coreDataTableComponent :headers="inviteHeaders" :items="invitations" :fetch-action="fetchInvitations" :search="false">
+          <!-- Card-level action: the Invite button lives inside the datatable card
+               title (top-right — no search on this table), like other admin tabs. -->
+          <template #toolbar>
+            <v-btn color="primary" variant="flat" :class="config.vuetify.theme.rounded" class="text-none" @click="openCreate">
+              <v-icon start icon="fa-solid fa-envelope"></v-icon>
+              Invite
+            </v-btn>
+          </template>
           <template #status="{ item }">
             <v-chip :color="inviteStatus(item).color" size="small" variant="tonal">{{ inviteStatus(item).label }}</v-chip>
           </template>
diff --git a/src/modules/organizations/components/organizations.members.component.vue b/src/modules/organizations/components/organizations.members.component.vue
index 00b38e81a..c05eeb163 100644
--- a/src/modules/organizations/components/organizations.members.component.vue
+++ b/src/modules/organizations/components/organizations.members.component.vue
@@ -1,25 +1,27 @@
 <template>
   <div>
-    <div v-if="canAddMember()" class="d-flex justify-end mb-3">
-      <v-btn
-        color="primary"
-        variant="tonal"
-        :class="config.vuetify.theme.rounded"
-        class="text-none text-body-medium"
-        data-test="org-add-member-open"
-        @click="openAddDialog"
-      >
-        <v-icon icon="fa-solid fa-user-plus" size="small" class="mr-2"></v-icon>
-        Add member
-      </v-btn>
-    </div>
-
     <coreDataTableComponent
       :headers="filteredHeaders"
       :items="members"
       :fetch-action="fetchMembers"
       :search="true"
     >
+      <!-- Card-level action: Add member lives inside the datatable card title,
+           left of the search field, so the card aligns with the Details card. -->
+      <template #toolbar>
+        <v-btn
+          v-if="canAddMember()"
+          color="primary"
+          variant="tonal"
+          :class="config.vuetify.theme.rounded"
+          class="text-none text-body-medium"
+          data-test="org-add-member-open"
+          @click="openAddDialog"
+        >
+          <v-icon icon="fa-solid fa-user-plus" size="small" class="mr-2"></v-icon>
+          Add member
+        </v-btn>
+      </template>
       <!-- Avatar column -->
       <template #avatar="{ item }">
         <userAvatarComponent :user="item.userId || item" :size="37" />
diff --git a/src/modules/organizations/tests/organizations.members.component.unit.tests.js b/src/modules/organizations/tests/organizations.members.component.unit.tests.js
index 416c9076e..ee4719310 100644
--- a/src/modules/organizations/tests/organizations.members.component.unit.tests.js
+++ b/src/modules/organizations/tests/organizations.members.component.unit.tests.js
@@ -14,7 +14,8 @@ vi.mock('../../../lib/helpers/roleColor', () => ({ default: () => 'primary' }));
 import OrganizationsMembersComponent from '../components/organizations.members.component.vue';
 
 const sharedStubs = {
-  coreDataTableComponent: { template: '<div data-test="datatable" />' },
+  // Renders the card-level #toolbar slot (hosts the Add member button)
+  coreDataTableComponent: { template: '<div data-test="datatable"><slot name="toolbar" /></div>' },
   userAvatarComponent: { template: '<div />' },
   'v-btn': { template: '<button v-bind="$attrs"><slot /></button>', inheritAttrs: false },
   'v-icon': { template: '<i />' },

From b0ffd1cd03e271ae049783b593347d0f07ed714c Mon Sep 17 00:00:00 2001
From: Pierre Brisorgueil <pierrebrisorgueil@me.com>
Date: Thu, 11 Jun 2026 18:42:51 +0200
Subject: [PATCH 2/7] feat(organizations): app-level pending-invitations nudge
 after login

New organizations.pendingInvitationsNudge component mounted in app.vue next
to the suggested-join banner: on login (watch isLoggedIn, immediate, once
per session) it fetches the user's pending owner_add invitations and shows
a centered snackbar (location=center, 8s) with a View action routing to
/users/organizations. Replaces the page-local nudge in
user.organizations.view (which only showed if the invitee happened to visit
My Organizations); the persistent pending list there stays the durable
surface. Logout re-arms the nudge for the next session; accepting an
invitation drains the shared store list and hides it automatically.
---
 src/modules/app/app.vue                       |   3 +
 ...ions.pendingInvitationsNudge.component.vue | 117 +++++++++++++
 ...ngInvitationsNudge.component.unit.tests.js | 164 ++++++++++++++++++
 .../user.organizations.view.unit.tests.js     |  52 ------
 .../users/views/user.organizations.view.vue   |  22 +--
 5 files changed, 288 insertions(+), 70 deletions(-)
 create mode 100644 src/modules/organizations/components/organizations.pendingInvitationsNudge.component.vue
 create mode 100644 src/modules/organizations/tests/organizations.pendingInvitationsNudge.component.unit.tests.js

diff --git a/src/modules/app/app.vue b/src/modules/app/app.vue
index 1effca306..0d7fb2a3e 100644
--- a/src/modules/app/app.vue
+++ b/src/modules/app/app.vue
@@ -37,6 +37,7 @@
 
     <organizationsAdminPendingBanner />
     <organizationsSuggestedJoinBanner />
+    <organizationsPendingInvitationsNudge />
     <legalCookieBanner />
     <legalFooterSection />
     <v-main class="pb-0" :style="mainStyle">
@@ -65,6 +66,7 @@ import authPendingRequestBanner from '../auth/components/pendingRequestBanner.co
 
 import organizationsAdminPendingBanner from '../organizations/components/organizations.adminPendingBanner.component.vue';
 import organizationsSuggestedJoinBanner from '../organizations/components/organizations.suggestedJoinBanner.component.vue';
+import organizationsPendingInvitationsNudge from '../organizations/components/organizations.pendingInvitationsNudge.component.vue';
 import legalCookieBanner from '../legal/components/legal.cookieBanner.component.vue';
 import legalFooterSection from '../legal/components/legal.footerSection.component.vue';
 import appErrorBoundary from './components/app.errorBoundary.component.vue';
@@ -83,6 +85,7 @@ export default {
 
     organizationsAdminPendingBanner,
     organizationsSuggestedJoinBanner,
+    organizationsPendingInvitationsNudge,
     legalCookieBanner,
     legalFooterSection,
     appErrorBoundary,
diff --git a/src/modules/organizations/components/organizations.pendingInvitationsNudge.component.vue b/src/modules/organizations/components/organizations.pendingInvitationsNudge.component.vue
new file mode 100644
index 000000000..52775d6cc
--- /dev/null
+++ b/src/modules/organizations/components/organizations.pendingInvitationsNudge.component.vue
@@ -0,0 +1,117 @@
+<template>
+  <v-snackbar v-model="visible" location="center" color="info" :timeout="8000" multi-line data-test="pending-invitations-nudge">
+    <span class="text-body-medium">
+      <v-icon icon="fa-solid fa-envelope-open-text" size="small" class="mr-1" />
+      You have <strong>{{ count }}</strong> pending organization invitation{{ count > 1 ? 's' : '' }}
+    </span>
+    <template #actions>
+      <v-btn
+        variant="text"
+        size="small"
+        class="text-none"
+        to="/users/organizations"
+        data-test="pending-invitations-nudge-view"
+        @click="dismiss"
+      >
+        View
+      </v-btn>
+      <v-btn variant="text" size="small" icon="$close" @click="dismiss" />
+    </template>
+  </v-snackbar>
+</template>
+
+<script>
+/**
+ * Module dependencies.
+ */
+import config from '@/config';
+import { useAuthStore } from '../../auth/stores/auth.store';
+import { useOrganizationsStore } from '../stores/organizations.store';
+
+/**
+ * Component definition.
+ *
+ * App-level pending-invitations nudge: a centered snackbar shown right after
+ * login (once per login session) when the user has pending owner_add
+ * invitations to accept. Mounted in app.vue next to the other organizations
+ * banners; the durable surface stays the persistent list on
+ * /users/organizations — this is only the transient prompt pointing at it.
+ */
+export default {
+  name: 'OrganizationsPendingInvitationsNudge',
+  data: () => ({
+    /**
+     * @desc Once-per-session guard: set on the first logged-in trigger so the
+     * watcher never re-fetches/re-nudges within the same login session.
+     * Reset on logout so the next login re-arms the nudge.
+     */
+    announced: false,
+    dismissed: false,
+  }),
+  computed: {
+    /**
+     * @desc Whether the user is logged in.
+     * @returns {boolean}
+     */
+    isLoggedIn() {
+      return useAuthStore().isLoggedIn;
+    },
+    /**
+     * @desc Count of the user's pending owner_add invitations.
+     * @returns {number}
+     */
+    count() {
+      return (useOrganizationsStore().pendingInvitations || []).length;
+    },
+    /**
+     * @desc Controls snackbar visibility — only after the post-login fetch has
+     * run (announced), with at least one pending invitation, until acted on.
+     * Accepting an invitation elsewhere drains the shared store list, hiding
+     * the nudge automatically.
+     * @returns {boolean}
+     */
+    visible: {
+      get() {
+        return this.announced && this.count > 0 && !this.dismissed;
+      },
+      set(val) {
+        if (!val) this.dismiss();
+      },
+    },
+  },
+  watch: {
+    /**
+     * @desc Fetch the user's pending invitations when they log in (or on
+     * initial load when already logged in). Fires once per login session
+     * via the `announced` flag; logout re-arms it.
+     * @param {boolean} loggedIn - Whether the user is logged in
+     */
+    isLoggedIn: {
+      immediate: true,
+      async handler(loggedIn) {
+        if (!loggedIn) {
+          this.announced = false;
+          this.dismissed = false;
+          return;
+        }
+        if (!config.organizations || this.announced) return;
+        this.announced = true;
+        try {
+          await useOrganizationsStore().fetchMyPendingInvitations();
+        } catch {
+          // best-effort — silently ignore (the durable list self-heals)
+        }
+      },
+    },
+  },
+  methods: {
+    /**
+     * @desc Dismiss the nudge for the current login session.
+     * @returns {void}
+     */
+    dismiss() {
+      this.dismissed = true;
+    },
+  },
+};
+</script>
diff --git a/src/modules/organizations/tests/organizations.pendingInvitationsNudge.component.unit.tests.js b/src/modules/organizations/tests/organizations.pendingInvitationsNudge.component.unit.tests.js
new file mode 100644
index 000000000..657761992
--- /dev/null
+++ b/src/modules/organizations/tests/organizations.pendingInvitationsNudge.component.unit.tests.js
@@ -0,0 +1,164 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { shallowMount, flushPromises } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import PendingInvitationsNudge from '../components/organizations.pendingInvitationsNudge.component.vue';
+
+// Mock config service (consumed by the auth + organizations stores)
+vi.mock('../../../lib/services/config', () => ({
+  default: {
+    api: { protocol: 'http', host: 'localhost', port: '3000', base: 'api' },
+    cookie: { prefix: 'devkit' },
+  },
+}));
+vi.mock('../../../lib/helpers/ability', () => ({ updateAbilities: vi.fn(), ability: { rules: [], can: vi.fn() } }));
+
+const stubs = {
+  'v-snackbar': { template: '<div data-test="snackbar-stub"><slot /><slot name="actions" /></div>' },
+  'v-btn': { template: '<button v-bind="$attrs" :to="$attrs.to"><slot /></button>', inheritAttrs: false },
+  'v-icon': { template: '<i />' },
+};
+
+/**
+ * Mount the nudge with real pinia stores so the isLoggedIn watch is reactive.
+ * isLoggedIn derives from `!!authStore.cookieExpire` — flip it to simulate login.
+ * @param {Object} [opts]
+ * @param {Array} [opts.invitations] - Rows fetchMyPendingInvitations resolves with
+ * @param {boolean} [opts.loggedIn] - Whether the user starts logged in
+ * @returns {Promise<{ wrapper, authStore, orgStore, fetchMock }>}
+ */
+async function mountNudge({ invitations = [], loggedIn = false } = {}) {
+  const { useAuthStore } = await import('../../auth/stores/auth.store');
+  const { useOrganizationsStore } = await import('../stores/organizations.store');
+  const authStore = useAuthStore();
+  const orgStore = useOrganizationsStore();
+  const fetchMock = vi.fn().mockImplementation(() => {
+    orgStore.pendingInvitations = invitations;
+    return Promise.resolve(invitations);
+  });
+  orgStore.fetchMyPendingInvitations = fetchMock;
+  if (loggedIn) authStore.cookieExpire = Date.now() + 100000;
+  const wrapper = shallowMount(PendingInvitationsNudge, {
+    global: { stubs },
+  });
+  await flushPromises();
+  return { wrapper, authStore, orgStore, fetchMock };
+}
+
+describe('organizations.pendingInvitationsNudge.component', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('shows after login when the fetch returns pending invitations', async () => {
+    const { wrapper, authStore, fetchMock } = await mountNudge({
+      invitations: [{ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } }],
+    });
+
+    // Logged out: nothing fetched, nothing visible.
+    expect(fetchMock).not.toHaveBeenCalled();
+    expect(wrapper.vm.visible).toBe(false);
+
+    // Login → fetch fires, nudge becomes visible with the count.
+    authStore.cookieExpire = Date.now() + 100000;
+    await flushPromises();
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(wrapper.vm.count).toBe(1);
+    expect(wrapper.vm.visible).toBe(true);
+  });
+
+  it('does not show when the fetch returns no pending invitations', async () => {
+    const { wrapper, fetchMock } = await mountNudge({ invitations: [], loggedIn: true });
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(wrapper.vm.count).toBe(0);
+    expect(wrapper.vm.visible).toBe(false);
+  });
+
+  it('View action routes to /users/organizations and dismisses', async () => {
+    const { wrapper } = await mountNudge({
+      invitations: [{ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } }],
+      loggedIn: true,
+    });
+    expect(wrapper.vm.visible).toBe(true);
+
+    const view = wrapper.find('[data-test="pending-invitations-nudge-view"]');
+    expect(view.exists()).toBe(true);
+    expect(view.attributes('to')).toBe('/users/organizations');
+
+    await view.trigger('click');
+    expect(wrapper.vm.dismissed).toBe(true);
+    expect(wrapper.vm.visible).toBe(false);
+  });
+
+  it('snackbar v-model set(false) (timeout/close) dismisses', async () => {
+    const { wrapper } = await mountNudge({
+      invitations: [{ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } }],
+      loggedIn: true,
+    });
+    expect(wrapper.vm.visible).toBe(true);
+    wrapper.vm.visible = false;
+    expect(wrapper.vm.dismissed).toBe(true);
+    expect(wrapper.vm.visible).toBe(false);
+  });
+
+  it('fires once per login session (guarded), and re-arms after logout → login', async () => {
+    const { wrapper, authStore, fetchMock } = await mountNudge({
+      invitations: [{ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } }],
+      loggedIn: true,
+    });
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+
+    // Same session: a re-invocation of the handler is guarded by the announced flag.
+    await wrapper.vm.$options.watch.isLoggedIn.handler.call(wrapper.vm, true);
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+
+    // Dismiss, then logout: the nudge re-arms for the next session.
+    wrapper.vm.dismiss();
+    authStore.cookieExpire = 0;
+    await flushPromises();
+    expect(wrapper.vm.visible).toBe(false);
+    expect(wrapper.vm.announced).toBe(false);
+    expect(wrapper.vm.dismissed).toBe(false);
+
+    // New login session → fetch + nudge again.
+    authStore.cookieExpire = Date.now() + 100000;
+    await flushPromises();
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    expect(wrapper.vm.visible).toBe(true);
+  });
+
+  it('stays hidden until the post-login fetch has run (announced gate)', async () => {
+    const { useOrganizationsStore } = await import('../stores/organizations.store');
+    const orgStore = useOrganizationsStore();
+    // Stale rows in the store from a previous view should not flash the nudge pre-login.
+    orgStore.pendingInvitations = [{ id: 'stale', role: 'member' }];
+    orgStore.fetchMyPendingInvitations = vi.fn().mockResolvedValue([]);
+    const wrapper = shallowMount(PendingInvitationsNudge, { global: { stubs } });
+    await flushPromises();
+    expect(wrapper.vm.count).toBe(1);
+    expect(wrapper.vm.visible).toBe(false);
+  });
+
+  it('survives a failing fetch (best-effort, stays hidden)', async () => {
+    const { useAuthStore } = await import('../../auth/stores/auth.store');
+    const { useOrganizationsStore } = await import('../stores/organizations.store');
+    const authStore = useAuthStore();
+    const orgStore = useOrganizationsStore();
+    orgStore.fetchMyPendingInvitations = vi.fn().mockRejectedValue(new Error('boom'));
+    authStore.cookieExpire = Date.now() + 100000;
+    const wrapper = shallowMount(PendingInvitationsNudge, { global: { stubs } });
+    await flushPromises();
+    expect(orgStore.fetchMyPendingInvitations).toHaveBeenCalledTimes(1);
+    expect(wrapper.vm.visible).toBe(false);
+  });
+
+  it('drains automatically when invitations are accepted elsewhere (shared store)', async () => {
+    const { wrapper, orgStore } = await mountNudge({
+      invitations: [{ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } }],
+      loggedIn: true,
+    });
+    expect(wrapper.vm.visible).toBe(true);
+    // Accepting the invitation on /users/organizations filters the shared list.
+    orgStore.pendingInvitations = [];
+    expect(wrapper.vm.visible).toBe(false);
+  });
+});
diff --git a/src/modules/users/tests/user.organizations.view.unit.tests.js b/src/modules/users/tests/user.organizations.view.unit.tests.js
index 264470514..861fc9efd 100644
--- a/src/modules/users/tests/user.organizations.view.unit.tests.js
+++ b/src/modules/users/tests/user.organizations.view.unit.tests.js
@@ -171,38 +171,6 @@ describe('user.organizations.view — pending invitations', () => {
     expect(wrapper.vm.pendingInvitations[0].organizationId.name).toBe('Acme');
   });
 
-  test('shows the nudge snackbar when invitations exist after fetch', async () => {
-    const { useOrganizationsStore } = await import('../../organizations/stores/organizations.store');
-    const store = useOrganizationsStore();
-    store.fetchOrganizations = vi.fn().mockResolvedValue([]);
-    store.fetchMyPendingInvitations = vi.fn().mockImplementation(() => {
-      store.pendingInvitations = [{ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } }];
-      return Promise.resolve(store.pendingInvitations);
-    });
-
-    const wrapper = shallowMount(UserOrganizationsView, {
-      global: { mocks: sharedMocks(), stubs: sharedStubs },
-    });
-    await Promise.resolve();
-    await Promise.resolve();
-
-    expect(wrapper.vm.nudge).toBe(true);
-  });
-
-  test('does not show the nudge snackbar when there are no invitations', async () => {
-    const { useOrganizationsStore } = await import('../../organizations/stores/organizations.store');
-    const store = useOrganizationsStore();
-    store.fetchOrganizations = vi.fn().mockResolvedValue([]);
-    store.fetchMyPendingInvitations = vi.fn().mockResolvedValue([]);
-
-    const wrapper = shallowMount(UserOrganizationsView, {
-      global: { mocks: sharedMocks(), stubs: sharedStubs },
-    });
-    await Promise.resolve();
-
-    expect(wrapper.vm.nudge).toBe(false);
-  });
-
   test('acceptInvitation accepts, soft-refreshes abilities via token(), and re-fetches orgs + invitations', async () => {
     const { useOrganizationsStore } = await import('../../organizations/stores/organizations.store');
     const { useAuthStore } = await import('../../auth/stores/auth.store');
@@ -260,26 +228,6 @@ describe('user.organizations.view — pending invitations', () => {
     expect(wrapper.vm.acceptingId).toBeNull();
   });
 
-  test('acceptInvitation dismisses the login nudge on success', async () => {
-    const { useOrganizationsStore } = await import('../../organizations/stores/organizations.store');
-    const { useAuthStore } = await import('../../auth/stores/auth.store');
-    const store = useOrganizationsStore();
-    const authStore = useAuthStore();
-    store.fetchOrganizations = vi.fn().mockResolvedValue([]);
-    store.fetchMyPendingInvitations = vi.fn().mockResolvedValue([]);
-    store.acceptMembership = vi.fn().mockResolvedValue({ id: 'inv1', status: 'active' });
-    authStore.token = vi.fn().mockResolvedValue();
-
-    const wrapper = shallowMount(UserOrganizationsView, {
-      global: { mocks: sharedMocks(), stubs: sharedStubs },
-    });
-    wrapper.vm.nudge = true;
-
-    await wrapper.vm.acceptInvitation({ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } });
-
-    expect(wrapper.vm.nudge).toBe(false);
-  });
-
   test('invitationOrgName + invitationRole helpers read the populated membership', async () => {
     const { useOrganizationsStore } = await import('../../organizations/stores/organizations.store');
     const store = useOrganizationsStore();
diff --git a/src/modules/users/views/user.organizations.view.vue b/src/modules/users/views/user.organizations.view.vue
index 1c652018c..eaf74e3c3 100644
--- a/src/modules/users/views/user.organizations.view.vue
+++ b/src/modules/users/views/user.organizations.view.vue
@@ -116,19 +116,6 @@
       confirm-color="error"
       @confirm="leaveOrg"
     />
-
-    <!-- Login nudge: not triggered by a POST/PUT response, so a component-local
-         snackbar (the persistent list above is the source of truth). -->
-    <v-snackbar v-model="nudge" location="top right" color="info" :timeout="6000" data-test="pending-invitations-nudge">
-      <span class="text-body-medium">
-        <v-icon icon="fa-solid fa-envelope-open-text" size="small" class="mr-1" />
-        You have {{ pendingInvitations.length }}
-        pending {{ pendingInvitations.length === 1 ? 'invitation' : 'invitations' }} to accept.
-      </span>
-      <template #actions>
-        <v-btn variant="text" size="small" icon="$close" @click="nudge = false" />
-      </template>
-    </v-snackbar>
   </v-container>
 </template>
 
@@ -157,7 +144,6 @@ export default {
       leaveDialog: false,
       orgToLeave: null,
       acceptingId: null,
-      nudge: false,
     };
   },
   computed: {
@@ -203,10 +189,9 @@ export default {
       // interceptor handles snackbar
     }
     try {
+      // The persistent list above is the source of truth; the transient login
+      // nudge is app-level (organizations.pendingInvitationsNudge in app.vue).
       await this.organizationsStore.fetchMyPendingInvitations();
-      // Nudge on login when there are invitations to accept. The persistent list
-      // above is the source of truth; this is only a transient prompt.
-      this.nudge = this.pendingInvitations.length > 0;
     } catch {
       // interceptor handles snackbar
     }
@@ -249,7 +234,8 @@ export default {
       try {
         await this.organizationsStore.acceptMembership(membershipId);
         // Membership is accepted server-side: reflect it before touching abilities.
-        this.nudge = false;
+        // (acceptMembership drains the shared pendingInvitations list, which also
+        // hides the app-level nudge.)
         await this.organizationsStore.fetchOrganizations();
         await this.organizationsStore.fetchMyPendingInvitations();
         // Soft-refresh abilities: token() updates abilities/user in-place without

From 880def70ca9b9e51fb3f021fca7676a09800a3dd Mon Sep 17 00:00:00 2001
From: Pierre Brisorgueil <pierrebrisorgueil@me.com>
Date: Thu, 11 Jun 2026 18:43:03 +0200
Subject: [PATCH 3/7] style(organizations): align general-tab stacked cards to
 the 12px grid gutter

mt-4 (16px) -> mt-3 (12px) on the Pending Join Requests and
Roles & Permissions cards so the vertical card gaps match the 12px
row/column gutter rhythm.
---
 .../organizations/components/organization.general.tab.vue     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/organizations/components/organization.general.tab.vue b/src/modules/organizations/components/organization.general.tab.vue
index c47835d96..38f4622f8 100644
--- a/src/modules/organizations/components/organization.general.tab.vue
+++ b/src/modules/organizations/components/organization.general.tab.vue
@@ -55,7 +55,7 @@
           color="surface"
           :flat="config.vuetify.theme.flat"
           :class="config.vuetify.theme.rounded"
-          class="pa-6 mt-4"
+          class="pa-6 mt-3"
         >
           <h3 class="text-title-medium font-weight-medium mb-4">Roles & Permissions</h3>
           <v-list density="compact" class="bg-transparent">
@@ -80,7 +80,7 @@
           color="surface"
           :flat="config.vuetify.theme.flat"
           :class="config.vuetify.theme.rounded"
-          class="pa-6 mt-4"
+          class="pa-6 mt-3"
         >
           <h3 class="text-title-medium font-weight-medium mb-4">
             Pending Join Requests

From 6df3be27373fee8d3a37811cdf1238fbc003ad7d Mon Sep 17 00:00:00 2001
From: Pierre Brisorgueil <pierrebrisorgueil@me.com>
Date: Thu, 11 Jun 2026 21:16:11 +0200
Subject: [PATCH 4/7] refactor(organizations): merge suggested-join +
 pending-invitations notices into loginNotices

---
 src/modules/app/app.vue                       |   9 +-
 .../organizations.loginNotices.component.vue  | 286 ++++++++++++
 ...ions.pendingInvitationsNudge.component.vue | 117 -----
 ...izations.suggestedJoinBanner.component.vue | 172 -------
 ...tions.loginNotices.component.unit.tests.js | 419 ++++++++++++++++++
 ...ngInvitationsNudge.component.unit.tests.js | 164 -------
 ...uggestedJoinBanner.component.unit.tests.js | 263 -----------
 .../users/views/user.organizations.view.vue   |   2 +-
 8 files changed, 709 insertions(+), 723 deletions(-)
 create mode 100644 src/modules/organizations/components/organizations.loginNotices.component.vue
 delete mode 100644 src/modules/organizations/components/organizations.pendingInvitationsNudge.component.vue
 delete mode 100644 src/modules/organizations/components/organizations.suggestedJoinBanner.component.vue
 create mode 100644 src/modules/organizations/tests/organizations.loginNotices.component.unit.tests.js
 delete mode 100644 src/modules/organizations/tests/organizations.pendingInvitationsNudge.component.unit.tests.js
 delete mode 100644 src/modules/organizations/tests/organizations.suggestedJoinBanner.component.unit.tests.js

diff --git a/src/modules/app/app.vue b/src/modules/app/app.vue
index 0d7fb2a3e..9f1d8b468 100644
--- a/src/modules/app/app.vue
+++ b/src/modules/app/app.vue
@@ -36,8 +36,7 @@
     <authPendingRequestBanner />
 
     <organizationsAdminPendingBanner />
-    <organizationsSuggestedJoinBanner />
-    <organizationsPendingInvitationsNudge />
+    <organizationsLoginNotices />
     <legalCookieBanner />
     <legalFooterSection />
     <v-main class="pb-0" :style="mainStyle">
@@ -65,8 +64,7 @@ import authEmailBanner from '../auth/components/emailBanner.component.vue';
 import authPendingRequestBanner from '../auth/components/pendingRequestBanner.component.vue';
 
 import organizationsAdminPendingBanner from '../organizations/components/organizations.adminPendingBanner.component.vue';
-import organizationsSuggestedJoinBanner from '../organizations/components/organizations.suggestedJoinBanner.component.vue';
-import organizationsPendingInvitationsNudge from '../organizations/components/organizations.pendingInvitationsNudge.component.vue';
+import organizationsLoginNotices from '../organizations/components/organizations.loginNotices.component.vue';
 import legalCookieBanner from '../legal/components/legal.cookieBanner.component.vue';
 import legalFooterSection from '../legal/components/legal.footerSection.component.vue';
 import appErrorBoundary from './components/app.errorBoundary.component.vue';
@@ -84,8 +82,7 @@ export default {
     authPendingRequestBanner,
 
     organizationsAdminPendingBanner,
-    organizationsSuggestedJoinBanner,
-    organizationsPendingInvitationsNudge,
+    organizationsLoginNotices,
     legalCookieBanner,
     legalFooterSection,
     appErrorBoundary,
diff --git a/src/modules/organizations/components/organizations.loginNotices.component.vue b/src/modules/organizations/components/organizations.loginNotices.component.vue
new file mode 100644
index 000000000..345dee6dd
--- /dev/null
+++ b/src/modules/organizations/components/organizations.loginNotices.component.vue
@@ -0,0 +1,286 @@
+<template>
+  <!-- Suggested workspace join — top-right, persistent until acted on -->
+  <v-snackbar
+    v-if="suggestedJoin"
+    v-model="suggested.visible"
+    location="top right"
+    color="info"
+    :timeout="-1"
+    multi-line
+  >
+    <span class="text-body-medium">
+      <v-icon icon="fa-solid fa-building" size="small" class="mr-1" />
+      There may already be a workspace for <strong>{{ suggestedJoin.orgName }}</strong>. Request access?
+    </span>
+    <template #actions>
+      <v-btn
+        variant="text"
+        size="small"
+        class="text-none"
+        :loading="suggested.loading"
+        @click="requestAccess"
+      >
+        Request access
+      </v-btn>
+      <v-btn variant="text" size="small" icon="$close" :disabled="suggested.loading" @click="dismissSuggested" />
+    </template>
+  </v-snackbar>
+
+  <v-snackbar
+    v-model="suggested.feedback.visible"
+    location="top right"
+    :color="suggested.feedback.color"
+    :timeout="4000"
+  >
+    {{ suggested.feedback.text }}
+  </v-snackbar>
+
+  <!-- Pending-invitations nudge — centered, once per login session -->
+  <v-snackbar v-model="nudgeVisible" location="center" color="info" :timeout="8000" multi-line data-test="pending-invitations-nudge">
+    <span class="text-body-medium">
+      <v-icon icon="fa-solid fa-envelope-open-text" size="small" class="mr-1" />
+      You have <strong>{{ count }}</strong> pending organization invitation{{ count > 1 ? 's' : '' }}
+    </span>
+    <template #actions>
+      <v-btn
+        variant="text"
+        size="small"
+        class="text-none"
+        to="/users/organizations"
+        data-test="pending-invitations-nudge-view"
+        @click="dismissNudge"
+      >
+        View
+      </v-btn>
+      <v-btn variant="text" size="small" icon="$close" @click="dismissNudge" />
+    </template>
+  </v-snackbar>
+</template>
+
+<script>
+/**
+ * Module dependencies.
+ */
+import config from '@/config';
+import { useAuthStore } from '../../auth/stores/auth.store';
+import { useOrganizationsStore } from '../stores/organizations.store';
+
+/**
+ * Benign terminal error messages returned by the backend.
+ * These are NOT product errors — they indicate a resolved or pre-existing state.
+ * Each entry is a lowercased substring of the real backend message string (source shown).
+ * @type {string[]}
+ */
+const BENIGN_MESSAGES = [
+  // organizations.membership.service.js L160: 'Already a member of this organization'
+  'already a member',
+  // organizations.membership.service.js L161: 'A pending request already exists'
+  'a pending request already exists',
+  // organizations.membership.service.js L165: 'You already have a pending request. Please wait for it to be reviewed before requesting to join another organization.'
+  'you already have a pending request',
+  // 404 is handled by the status fast-path in isBenign() — no string entry needed
+];
+
+/**
+ * Determine whether a thrown axios error is a benign terminal state.
+ * Benign = 404 (org deleted) OR message matches a known terminal phrase.
+ * @param {unknown} err - The caught error
+ * @returns {boolean}
+ */
+function isBenign(err) {
+  if (!err || !err.response) return false;
+  const { status, data } = err.response;
+  if (status === 404) return true;
+  const desc = (data?.description || '').toLowerCase();
+  return BENIGN_MESSAGES.some((phrase) => desc.includes(phrase));
+}
+
+/**
+ * Human-readable neutral message for each benign state.
+ * @param {unknown} err - The caught error
+ * @returns {string}
+ */
+function benignMessage(err) {
+  const status = err?.response?.status;
+  const desc = (err?.response?.data?.description || '').toLowerCase();
+  // organizations.controller.js L211: 404 → 'No Organization with that identifier has been found'
+  if (status === 404) {
+    return 'That workspace no longer exists.';
+  }
+  // organizations.membership.service.js L160: 'Already a member of this organization'
+  if (desc.includes('already a member')) {
+    return "You're already a member of that workspace.";
+  }
+  // L161: 'A pending request already exists'
+  // L165: 'You already have a pending request...' (cross-org one-pending cap)
+  return 'Request already sent. Awaiting approval.';
+}
+
+/**
+ * Component definition.
+ *
+ * App-level login notices: the single owner of the transient post-login
+ * organization snackbars, mounted once in app.vue.
+ * - Suggested workspace join (top-right): driven by the auth-store
+ *   `suggestedJoin` payload + v-if; Request-access CTA with the benign-error
+ *   taxonomy; persistent dismiss via `dismissSuggestedJoin`.
+ * - Pending-invitations nudge (centered): shown right after login (once per
+ *   login session) when the user has pending owner_add invitations to accept.
+ *   The durable surface stays the persistent list on /users/organizations —
+ *   this is only the transient prompt pointing at it.
+ */
+export default {
+  name: 'OrganizationsLoginNotices',
+
+  data: () => ({
+    /**
+     * @desc Suggested-join banner state.
+     */
+    suggested: {
+      // visible:true is correct — the snackbar only renders when suggestedJoin is
+      // non-null (v-if guard above); safe for a future v-if→v-show refactor.
+      visible: true,
+      loading: false,
+      feedback: {
+        visible: false,
+        color: 'success',
+        text: '',
+      },
+    },
+    /**
+     * @desc Pending-invitations nudge state.
+     */
+    nudge: {
+      /**
+       * @desc Once-per-session guard: set on the first logged-in trigger so the
+       * watcher never re-fetches/re-nudges within the same login session.
+       * Reset on logout so the next login re-arms the nudge.
+       */
+      announced: false,
+      dismissed: false,
+    },
+  }),
+
+  computed: {
+    /**
+     * @desc The suggestedJoin payload from the auth store ({ orgId, orgName } | null).
+     * @returns {{ orgId: string, orgName: string } | null}
+     */
+    suggestedJoin() {
+      return useAuthStore().suggestedJoin;
+    },
+    /**
+     * @desc Whether the user is logged in.
+     * @returns {boolean}
+     */
+    isLoggedIn() {
+      return useAuthStore().isLoggedIn;
+    },
+    /**
+     * @desc Count of the user's pending owner_add invitations.
+     * @returns {number}
+     */
+    count() {
+      return (useOrganizationsStore().pendingInvitations || []).length;
+    },
+    /**
+     * @desc Controls nudge snackbar visibility — only after the post-login fetch
+     * has run (announced), with at least one pending invitation, until acted on.
+     * Accepting an invitation elsewhere drains the shared store list, hiding
+     * the nudge automatically.
+     * @returns {boolean}
+     */
+    nudgeVisible: {
+      get() {
+        return this.nudge.announced && this.count > 0 && !this.nudge.dismissed;
+      },
+      set(val) {
+        if (!val) this.dismissNudge();
+      },
+    },
+  },
+
+  watch: {
+    /**
+     * @desc Fetch the user's pending invitations when they log in (or on
+     * initial load when already logged in). Fires once per login session
+     * via the `announced` flag; logout re-arms it. The suggested-join banner
+     * is untouched here — its visibility is driven by the auth-store payload.
+     * @param {boolean} loggedIn - Whether the user is logged in
+     */
+    isLoggedIn: {
+      immediate: true,
+      async handler(loggedIn) {
+        if (!loggedIn) {
+          this.nudge.announced = false;
+          this.nudge.dismissed = false;
+          return;
+        }
+        if (!config.organizations || this.nudge.announced) return;
+        this.nudge.announced = true;
+        try {
+          await useOrganizationsStore().fetchMyPendingInvitations();
+        } catch {
+          // best-effort — silently ignore (the durable list self-heals)
+        }
+      },
+    },
+  },
+
+  methods: {
+    /**
+     * @desc Request to join the suggested organization.
+     * Success → success toast + dismiss.
+     * Benign rejection → neutral info toast + dismiss.
+     * Genuine error → error toast, do NOT dismiss (user can retry).
+     * @returns {Promise<void>}
+     */
+    async requestAccess() {
+      // Double-submit guard: v-btn :loading does NOT block @click in Vuetify 4.
+      if (!this.suggestedJoin || this.suggested.loading) return;
+      this.suggested.loading = true;
+      const organizationsStore = useOrganizationsStore();
+      try {
+        await organizationsStore.createJoinRequest(this.suggestedJoin.orgId);
+        this.showFeedback('success', 'Request sent. An admin will review it shortly.');
+        useAuthStore().dismissSuggestedJoin();
+      } catch (err) {
+        if (isBenign(err)) {
+          this.showFeedback('info', benignMessage(err));
+          useAuthStore().dismissSuggestedJoin();
+        } else {
+          this.showFeedback('error', 'Something went wrong. Please try again.');
+        }
+      } finally {
+        this.suggested.loading = false;
+      }
+    },
+
+    /**
+     * @desc Dismiss the suggested-join banner permanently (persisted via auth store).
+     * @returns {void}
+     */
+    dismissSuggested() {
+      useAuthStore().dismissSuggestedJoin();
+    },
+
+    /**
+     * @desc Show a feedback snackbar with the given color and message.
+     * @param {'success'|'info'|'error'} color
+     * @param {string} text
+     * @returns {void}
+     */
+    showFeedback(color, text) {
+      this.suggested.feedback = { visible: true, color, text };
+    },
+
+    /**
+     * @desc Dismiss the nudge for the current login session.
+     * @returns {void}
+     */
+    dismissNudge() {
+      this.nudge.dismissed = true;
+    },
+  },
+};
+</script>
diff --git a/src/modules/organizations/components/organizations.pendingInvitationsNudge.component.vue b/src/modules/organizations/components/organizations.pendingInvitationsNudge.component.vue
deleted file mode 100644
index 52775d6cc..000000000
--- a/src/modules/organizations/components/organizations.pendingInvitationsNudge.component.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-  <v-snackbar v-model="visible" location="center" color="info" :timeout="8000" multi-line data-test="pending-invitations-nudge">
-    <span class="text-body-medium">
-      <v-icon icon="fa-solid fa-envelope-open-text" size="small" class="mr-1" />
-      You have <strong>{{ count }}</strong> pending organization invitation{{ count > 1 ? 's' : '' }}
-    </span>
-    <template #actions>
-      <v-btn
-        variant="text"
-        size="small"
-        class="text-none"
-        to="/users/organizations"
-        data-test="pending-invitations-nudge-view"
-        @click="dismiss"
-      >
-        View
-      </v-btn>
-      <v-btn variant="text" size="small" icon="$close" @click="dismiss" />
-    </template>
-  </v-snackbar>
-</template>
-
-<script>
-/**
- * Module dependencies.
- */
-import config from '@/config';
-import { useAuthStore } from '../../auth/stores/auth.store';
-import { useOrganizationsStore } from '../stores/organizations.store';
-
-/**
- * Component definition.
- *
- * App-level pending-invitations nudge: a centered snackbar shown right after
- * login (once per login session) when the user has pending owner_add
- * invitations to accept. Mounted in app.vue next to the other organizations
- * banners; the durable surface stays the persistent list on
- * /users/organizations — this is only the transient prompt pointing at it.
- */
-export default {
-  name: 'OrganizationsPendingInvitationsNudge',
-  data: () => ({
-    /**
-     * @desc Once-per-session guard: set on the first logged-in trigger so the
-     * watcher never re-fetches/re-nudges within the same login session.
-     * Reset on logout so the next login re-arms the nudge.
-     */
-    announced: false,
-    dismissed: false,
-  }),
-  computed: {
-    /**
-     * @desc Whether the user is logged in.
-     * @returns {boolean}
-     */
-    isLoggedIn() {
-      return useAuthStore().isLoggedIn;
-    },
-    /**
-     * @desc Count of the user's pending owner_add invitations.
-     * @returns {number}
-     */
-    count() {
-      return (useOrganizationsStore().pendingInvitations || []).length;
-    },
-    /**
-     * @desc Controls snackbar visibility — only after the post-login fetch has
-     * run (announced), with at least one pending invitation, until acted on.
-     * Accepting an invitation elsewhere drains the shared store list, hiding
-     * the nudge automatically.
-     * @returns {boolean}
-     */
-    visible: {
-      get() {
-        return this.announced && this.count > 0 && !this.dismissed;
-      },
-      set(val) {
-        if (!val) this.dismiss();
-      },
-    },
-  },
-  watch: {
-    /**
-     * @desc Fetch the user's pending invitations when they log in (or on
-     * initial load when already logged in). Fires once per login session
-     * via the `announced` flag; logout re-arms it.
-     * @param {boolean} loggedIn - Whether the user is logged in
-     */
-    isLoggedIn: {
-      immediate: true,
-      async handler(loggedIn) {
-        if (!loggedIn) {
-          this.announced = false;
-          this.dismissed = false;
-          return;
-        }
-        if (!config.organizations || this.announced) return;
-        this.announced = true;
-        try {
-          await useOrganizationsStore().fetchMyPendingInvitations();
-        } catch {
-          // best-effort — silently ignore (the durable list self-heals)
-        }
-      },
-    },
-  },
-  methods: {
-    /**
-     * @desc Dismiss the nudge for the current login session.
-     * @returns {void}
-     */
-    dismiss() {
-      this.dismissed = true;
-    },
-  },
-};
-</script>
diff --git a/src/modules/organizations/components/organizations.suggestedJoinBanner.component.vue b/src/modules/organizations/components/organizations.suggestedJoinBanner.component.vue
deleted file mode 100644
index 1a43784c7..000000000
--- a/src/modules/organizations/components/organizations.suggestedJoinBanner.component.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<template>
-  <v-snackbar
-    v-if="suggestedJoin"
-    v-model="visible"
-    location="top right"
-    color="info"
-    :timeout="-1"
-    multi-line
-  >
-    <span class="text-body-medium">
-      <v-icon icon="fa-solid fa-building" size="small" class="mr-1" />
-      There may already be a workspace for <strong>{{ suggestedJoin.orgName }}</strong>. Request access?
-    </span>
-    <template #actions>
-      <v-btn
-        variant="text"
-        size="small"
-        class="text-none"
-        :loading="loading"
-        @click="requestAccess"
-      >
-        Request access
-      </v-btn>
-      <v-btn variant="text" size="small" icon="$close" :disabled="loading" @click="dismiss" />
-    </template>
-  </v-snackbar>
-
-  <v-snackbar
-    v-model="feedback.visible"
-    location="top right"
-    :color="feedback.color"
-    :timeout="4000"
-  >
-    {{ feedback.text }}
-  </v-snackbar>
-</template>
-
-<script>
-/**
- * Module dependencies.
- */
-import { useAuthStore } from '../../auth/stores/auth.store';
-import { useOrganizationsStore } from '../stores/organizations.store';
-
-/**
- * Benign terminal error messages returned by the backend.
- * These are NOT product errors — they indicate a resolved or pre-existing state.
- * Each entry is a lowercased substring of the real backend message string (source shown).
- * @type {string[]}
- */
-const BENIGN_MESSAGES = [
-  // organizations.membership.service.js L160: 'Already a member of this organization'
-  'already a member',
-  // organizations.membership.service.js L161: 'A pending request already exists'
-  'a pending request already exists',
-  // organizations.membership.service.js L165: 'You already have a pending request. Please wait for it to be reviewed before requesting to join another organization.'
-  'you already have a pending request',
-  // 404 is handled by the status fast-path in isBenign() — no string entry needed
-];
-
-/**
- * Determine whether a thrown axios error is a benign terminal state.
- * Benign = 404 (org deleted) OR message matches a known terminal phrase.
- * @param {unknown} err - The caught error
- * @returns {boolean}
- */
-function isBenign(err) {
-  if (!err || !err.response) return false;
-  const { status, data } = err.response;
-  if (status === 404) return true;
-  const desc = (data?.description || '').toLowerCase();
-  return BENIGN_MESSAGES.some((phrase) => desc.includes(phrase));
-}
-
-/**
- * Human-readable neutral message for each benign state.
- * @param {unknown} err - The caught error
- * @returns {string}
- */
-function benignMessage(err) {
-  const status = err?.response?.status;
-  const desc = (err?.response?.data?.description || '').toLowerCase();
-  // organizations.controller.js L211: 404 → 'No Organization with that identifier has been found'
-  if (status === 404) {
-    return 'That workspace no longer exists.';
-  }
-  // organizations.membership.service.js L160: 'Already a member of this organization'
-  if (desc.includes('already a member')) {
-    return "You're already a member of that workspace.";
-  }
-  // L161: 'A pending request already exists'
-  // L165: 'You already have a pending request...' (cross-org one-pending cap)
-  return 'Request already sent. Awaiting approval.';
-}
-
-/**
- * Component definition.
- */
-export default {
-  name: 'OrganizationsSuggestedJoinBanner',
-
-  data: () => ({
-    // visible:true is correct — the component only mounts when suggestedJoin is non-null
-    // (guarded by outer v-if in app.vue); safe for a future v-if→v-show refactor.
-    visible: true,
-    loading: false,
-    feedback: {
-      visible: false,
-      color: 'success',
-      text: '',
-    },
-  }),
-
-  computed: {
-    /**
-     * @desc The suggestedJoin payload from the auth store ({ orgId, orgName } | null).
-     * @returns {{ orgId: string, orgName: string } | null}
-     */
-    suggestedJoin() {
-      return useAuthStore().suggestedJoin;
-    },
-  },
-
-  methods: {
-    /**
-     * @desc Request to join the suggested organization.
-     * Success → success toast + dismiss.
-     * Benign rejection → neutral info toast + dismiss.
-     * Genuine error → error toast, do NOT dismiss (user can retry).
-     * @returns {Promise<void>}
-     */
-    async requestAccess() {
-      // Double-submit guard: v-btn :loading does NOT block @click in Vuetify 4.
-      if (!this.suggestedJoin || this.loading) return;
-      this.loading = true;
-      const organizationsStore = useOrganizationsStore();
-      try {
-        await organizationsStore.createJoinRequest(this.suggestedJoin.orgId);
-        this.showFeedback('success', 'Request sent. An admin will review it shortly.');
-        useAuthStore().dismissSuggestedJoin();
-      } catch (err) {
-        if (isBenign(err)) {
-          this.showFeedback('info', benignMessage(err));
-          useAuthStore().dismissSuggestedJoin();
-        } else {
-          this.showFeedback('error', 'Something went wrong. Please try again.');
-        }
-      } finally {
-        this.loading = false;
-      }
-    },
-
-    /**
-     * @desc Dismiss the banner permanently (persisted via auth store).
-     * @returns {void}
-     */
-    dismiss() {
-      useAuthStore().dismissSuggestedJoin();
-    },
-
-    /**
-     * @desc Show a feedback snackbar with the given color and message.
-     * @param {'success'|'info'|'error'} color
-     * @param {string} text
-     * @returns {void}
-     */
-    showFeedback(color, text) {
-      this.feedback = { visible: true, color, text };
-    },
-  },
-};
-</script>
diff --git a/src/modules/organizations/tests/organizations.loginNotices.component.unit.tests.js b/src/modules/organizations/tests/organizations.loginNotices.component.unit.tests.js
new file mode 100644
index 000000000..2d57b636b
--- /dev/null
+++ b/src/modules/organizations/tests/organizations.loginNotices.component.unit.tests.js
@@ -0,0 +1,419 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { mount, shallowMount, flushPromises } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { createVuetify } from 'vuetify';
+
+// v-snackbar uses visualViewport which is not available in jsdom
+if (typeof globalThis.visualViewport === 'undefined') {
+  globalThis.visualViewport = {
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    width: 1024,
+    height: 768,
+  };
+}
+
+// Mock config service (consumed by the auth + organizations stores)
+vi.mock('../../../lib/services/config', () => ({
+  default: {
+    api: { protocol: 'http', host: 'localhost', port: '3000', base: 'api' },
+    cookie: { prefix: 'devkit' },
+  },
+}));
+vi.mock('../../../lib/helpers/ability', () => ({ updateAbilities: vi.fn(), ability: { rules: [], can: vi.fn() } }));
+
+// ── Component + store imports (real pinia stores, mocked per-instance) ───────
+
+import OrganizationsLoginNotices from '../components/organizations.loginNotices.component.vue';
+import { useAuthStore } from '../../auth/stores/auth.store';
+import { useOrganizationsStore } from '../stores/organizations.store';
+
+// ── Suggested-join harness ────────────────────────────────────────────────────
+
+/**
+ * Prime the real stores for the suggested-join tests: set the suggestedJoin
+ * payload and replace the actions the component calls with vi.fn() mocks.
+ * @param {{ orgId: string, orgName: string } | null} suggestedJoin
+ * @returns {{ authStore, orgStore, dismissSuggestedJoinMock, createJoinRequestMock }}
+ */
+function setupSuggestedStores(suggestedJoin) {
+  const authStore = useAuthStore();
+  const orgStore = useOrganizationsStore();
+  authStore.suggestedJoin = suggestedJoin;
+  const dismissSuggestedJoinMock = vi.fn();
+  authStore.dismissSuggestedJoin = dismissSuggestedJoinMock;
+  const createJoinRequestMock = vi.fn();
+  orgStore.createJoinRequest = createJoinRequestMock;
+  return { authStore, orgStore, dismissSuggestedJoinMock, createJoinRequestMock };
+}
+
+/**
+ * Mount the loginNotices component with Vuetify installed (full mount).
+ * @returns {import('@vue/test-utils').VueWrapper}
+ */
+const mountComponent = () =>
+  mount(OrganizationsLoginNotices, {
+    global: {
+      plugins: [createVuetify()],
+    },
+  });
+
+/**
+ * Build a fake axios-style rejection for a given HTTP status + description.
+ * @param {number} status
+ * @param {string} description
+ * @returns {Error}
+ */
+function makeAxiosError(status, description) {
+  const err = new Error(description);
+  err.response = { status, data: { description } };
+  return err;
+}
+
+// ── Nudge harness ─────────────────────────────────────────────────────────────
+
+const stubs = {
+  'v-snackbar': { template: '<div data-test="snackbar-stub"><slot /><slot name="actions" /></div>' },
+  'v-btn': { template: '<button v-bind="$attrs" :to="$attrs.to"><slot /></button>', inheritAttrs: false },
+  'v-icon': { template: '<i />' },
+};
+
+/**
+ * Mount the nudge with real pinia stores so the isLoggedIn watch is reactive.
+ * isLoggedIn derives from `!!authStore.cookieExpire` — flip it to simulate login.
+ * @param {Object} [opts]
+ * @param {Array} [opts.invitations] - Rows fetchMyPendingInvitations resolves with
+ * @param {boolean} [opts.loggedIn] - Whether the user starts logged in
+ * @returns {Promise<{ wrapper, authStore, orgStore, fetchMock }>}
+ */
+async function mountNudge({ invitations = [], loggedIn = false } = {}) {
+  const authStore = useAuthStore();
+  const orgStore = useOrganizationsStore();
+  const fetchMock = vi.fn().mockImplementation(() => {
+    orgStore.pendingInvitations = invitations;
+    return Promise.resolve(invitations);
+  });
+  orgStore.fetchMyPendingInvitations = fetchMock;
+  if (loggedIn) authStore.cookieExpire = Date.now() + 100000;
+  const wrapper = shallowMount(OrganizationsLoginNotices, {
+    global: { stubs },
+  });
+  await flushPromises();
+  return { wrapper, authStore, orgStore, fetchMock };
+}
+
+// ── Tests — suggested workspace join ─────────────────────────────────────────
+
+describe('organizations.loginNotices.component — suggested join', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  // ── No-op when null ──────────────────────────────────────────────────────
+
+  it('renders nothing when suggestedJoin is null', () => {
+    setupSuggestedStores(null);
+    const wrapper = mountComponent();
+
+    // Primary banner is v-if guarded — no CTA or org name should be present
+    expect(wrapper.vm.suggestedJoin).toBe(null);
+    expect(wrapper.vm.suggested.visible).toBe(true);
+    // Feedback snackbar is outside the guard but hidden (feedback.visible=false)
+    expect(wrapper.vm.suggested.feedback.visible).toBe(false);
+  });
+
+  // ── Renders when set ─────────────────────────────────────────────────────
+
+  it('renders org name, CTA, and dismiss when suggestedJoin is set', async () => {
+    setupSuggestedStores({ orgId: 'org1', orgName: 'Acme Corp' });
+    const wrapper = mountComponent();
+    await flushPromises();
+
+    expect(wrapper.vm.suggestedJoin).toEqual({ orgId: 'org1', orgName: 'Acme Corp' });
+    // The computed is reactive; text content is rendered inside Vuetify portal
+    // so we verify the computed value and the loading state is false (ready to interact)
+    expect(wrapper.vm.suggested.loading).toBe(false);
+    expect(wrapper.vm.suggested.visible).toBe(true);
+  });
+
+  // ── CTA success ──────────────────────────────────────────────────────────
+
+  it('calls createJoinRequest with orgId, shows success feedback, and dismisses on success', async () => {
+    const { dismissSuggestedJoinMock, createJoinRequestMock } = setupSuggestedStores({ orgId: 'org1', orgName: 'Acme Corp' });
+    createJoinRequestMock.mockResolvedValueOnce({});
+
+    const wrapper = mountComponent();
+    await wrapper.vm.requestAccess();
+    await flushPromises();
+
+    expect(createJoinRequestMock).toHaveBeenCalledWith('org1');
+    expect(wrapper.vm.suggested.feedback.visible).toBe(true);
+    expect(wrapper.vm.suggested.feedback.color).toBe('success');
+    expect(dismissSuggestedJoinMock).toHaveBeenCalledTimes(1);
+  });
+
+  // ── Benign rejection matrix ───────────────────────────────────────────────
+  // Uses the REAL backend error strings (capitalized as thrown by the Node service).
+  // Sources: organizations.membership.service.js L160, L161, L165;
+  //          organizations.controller.js L211 (404).
+
+  it.each([
+    [
+      'already a member (same-org active)',
+      // membership.service.js L160: 'Already a member of this organization'
+      makeAxiosError(422, 'Already a member of this organization'),
+      "You're already a member of that workspace.",
+    ],
+    [
+      'same-org pending request exists',
+      // membership.service.js L161: 'A pending request already exists'
+      makeAxiosError(422, 'A pending request already exists'),
+      'Request already sent. Awaiting approval.',
+    ],
+    [
+      'cross-org one-pending cap',
+      // membership.service.js L165: 'You already have a pending request. Please wait...'
+      makeAxiosError(422, 'You already have a pending request. Please wait for it to be reviewed before requesting to join another organization.'),
+      'Request already sent. Awaiting approval.',
+    ],
+    [
+      'org not found / 404',
+      // organizations.controller.js L211: 'No Organization with that identifier has been found'
+      makeAxiosError(404, 'No Organization with that identifier has been found'),
+      'That workspace no longer exists.',
+    ],
+  ])(
+    'benign "%s" → info toast + dismissSuggestedJoin called (no error toast)',
+    async (_label, err, expectedMsg) => {
+      const { dismissSuggestedJoinMock, createJoinRequestMock } = setupSuggestedStores({ orgId: 'org1', orgName: 'Acme Corp' });
+      createJoinRequestMock.mockRejectedValueOnce(err);
+
+      const wrapper = mountComponent();
+      await wrapper.vm.requestAccess();
+      await flushPromises();
+
+      // Neutral (info) feedback, NOT error
+      expect(wrapper.vm.suggested.feedback.visible).toBe(true);
+      expect(wrapper.vm.suggested.feedback.color).toBe('info');
+      expect(wrapper.vm.suggested.feedback.text).toBe(expectedMsg);
+
+      // suggestedJoin must be dismissed
+      expect(dismissSuggestedJoinMock).toHaveBeenCalledTimes(1);
+    },
+  );
+
+  // ── Genuine error — error toast, NOT dismissed ───────────────────────────
+
+  it('genuine error (network/500) → error toast shown and dismissSuggestedJoin NOT called', async () => {
+    const { dismissSuggestedJoinMock, createJoinRequestMock } = setupSuggestedStores({ orgId: 'org1', orgName: 'Acme Corp' });
+    createJoinRequestMock.mockRejectedValueOnce(makeAxiosError(500, 'Internal Server Error'));
+
+    const wrapper = mountComponent();
+    await wrapper.vm.requestAccess();
+    await flushPromises();
+
+    expect(wrapper.vm.suggested.feedback.visible).toBe(true);
+    expect(wrapper.vm.suggested.feedback.color).toBe('error');
+    expect(dismissSuggestedJoinMock).not.toHaveBeenCalled();
+  });
+
+  it('genuine error without response → error toast shown and dismissSuggestedJoin NOT called', async () => {
+    const { dismissSuggestedJoinMock, createJoinRequestMock } = setupSuggestedStores({ orgId: 'org1', orgName: 'Acme Corp' });
+    createJoinRequestMock.mockRejectedValueOnce(new Error('Network Error'));
+
+    const wrapper = mountComponent();
+    await wrapper.vm.requestAccess();
+    await flushPromises();
+
+    expect(wrapper.vm.suggested.feedback.visible).toBe(true);
+    expect(wrapper.vm.suggested.feedback.color).toBe('error');
+    expect(dismissSuggestedJoinMock).not.toHaveBeenCalled();
+  });
+
+  // ── Dismiss control ──────────────────────────────────────────────────────
+
+  it('dismissSuggested() calls dismissSuggestedJoin', () => {
+    const { dismissSuggestedJoinMock } = setupSuggestedStores({ orgId: 'org1', orgName: 'Acme Corp' });
+    const wrapper = mountComponent();
+
+    wrapper.vm.dismissSuggested();
+
+    expect(dismissSuggestedJoinMock).toHaveBeenCalledTimes(1);
+  });
+
+  // ── Loading state ────────────────────────────────────────────────────────
+
+  it('sets loading during request and clears it after success', async () => {
+    const { createJoinRequestMock } = setupSuggestedStores({ orgId: 'org1', orgName: 'Acme Corp' });
+    let resolveRequest;
+    createJoinRequestMock.mockReturnValueOnce(
+      new Promise((resolve) => {
+        resolveRequest = resolve;
+      }),
+    );
+
+    const wrapper = mountComponent();
+    const promise = wrapper.vm.requestAccess();
+    expect(wrapper.vm.suggested.loading).toBe(true);
+
+    resolveRequest({});
+    await promise;
+    await flushPromises();
+
+    expect(wrapper.vm.suggested.loading).toBe(false);
+  });
+
+  // ── Double-submit guard ───────────────────────────────────────────────────
+
+  it('concurrent double-click calls createJoinRequest exactly once', async () => {
+    // Vuetify 4 v-btn :loading does NOT block @click — guard must be in code.
+    const { createJoinRequestMock } = setupSuggestedStores({ orgId: 'org1', orgName: 'Acme Corp' });
+    let resolveRequest;
+    createJoinRequestMock.mockReturnValueOnce(
+      new Promise((resolve) => {
+        resolveRequest = resolve;
+      }),
+    );
+
+    const wrapper = mountComponent();
+    // Fire two concurrent calls without awaiting the first
+    const first = wrapper.vm.requestAccess();
+    const second = wrapper.vm.requestAccess(); // mid-flight, loading=true → no-op
+    resolveRequest({});
+    await Promise.all([first, second]);
+    await flushPromises();
+
+    expect(createJoinRequestMock).toHaveBeenCalledTimes(1);
+  });
+
+  // ── No-op guard ───────────────────────────────────────────────────────────
+
+  it('requestAccess is a no-op when suggestedJoin is null', async () => {
+    const { dismissSuggestedJoinMock, createJoinRequestMock } = setupSuggestedStores(null);
+    const wrapper = mountComponent();
+
+    await wrapper.vm.requestAccess();
+    await flushPromises();
+
+    expect(createJoinRequestMock).not.toHaveBeenCalled();
+    expect(dismissSuggestedJoinMock).not.toHaveBeenCalled();
+  });
+});
+
+// ── Tests — pending-invitations nudge ────────────────────────────────────────
+
+describe('organizations.loginNotices.component — pending-invitations nudge', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('shows after login when the fetch returns pending invitations', async () => {
+    const { wrapper, authStore, fetchMock } = await mountNudge({
+      invitations: [{ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } }],
+    });
+
+    // Logged out: nothing fetched, nothing visible.
+    expect(fetchMock).not.toHaveBeenCalled();
+    expect(wrapper.vm.nudgeVisible).toBe(false);
+
+    // Login → fetch fires, nudge becomes visible with the count.
+    authStore.cookieExpire = Date.now() + 100000;
+    await flushPromises();
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(wrapper.vm.count).toBe(1);
+    expect(wrapper.vm.nudgeVisible).toBe(true);
+  });
+
+  it('does not show when the fetch returns no pending invitations', async () => {
+    const { wrapper, fetchMock } = await mountNudge({ invitations: [], loggedIn: true });
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(wrapper.vm.count).toBe(0);
+    expect(wrapper.vm.nudgeVisible).toBe(false);
+  });
+
+  it('View action routes to /users/organizations and dismisses', async () => {
+    const { wrapper } = await mountNudge({
+      invitations: [{ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } }],
+      loggedIn: true,
+    });
+    expect(wrapper.vm.nudgeVisible).toBe(true);
+
+    const view = wrapper.find('[data-test="pending-invitations-nudge-view"]');
+    expect(view.exists()).toBe(true);
+    expect(view.attributes('to')).toBe('/users/organizations');
+
+    await view.trigger('click');
+    expect(wrapper.vm.nudge.dismissed).toBe(true);
+    expect(wrapper.vm.nudgeVisible).toBe(false);
+  });
+
+  it('snackbar v-model set(false) (timeout/close) dismisses', async () => {
+    const { wrapper } = await mountNudge({
+      invitations: [{ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } }],
+      loggedIn: true,
+    });
+    expect(wrapper.vm.nudgeVisible).toBe(true);
+    wrapper.vm.nudgeVisible = false;
+    expect(wrapper.vm.nudge.dismissed).toBe(true);
+    expect(wrapper.vm.nudgeVisible).toBe(false);
+  });
+
+  it('fires once per login session (guarded), and re-arms after logout → login', async () => {
+    const { wrapper, authStore, fetchMock } = await mountNudge({
+      invitations: [{ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } }],
+      loggedIn: true,
+    });
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+
+    // Same session: a re-invocation of the handler is guarded by the announced flag.
+    await wrapper.vm.$options.watch.isLoggedIn.handler.call(wrapper.vm, true);
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+
+    // Dismiss, then logout: the nudge re-arms for the next session.
+    wrapper.vm.dismissNudge();
+    authStore.cookieExpire = 0;
+    await flushPromises();
+    expect(wrapper.vm.nudgeVisible).toBe(false);
+    expect(wrapper.vm.nudge.announced).toBe(false);
+    expect(wrapper.vm.nudge.dismissed).toBe(false);
+
+    // New login session → fetch + nudge again.
+    authStore.cookieExpire = Date.now() + 100000;
+    await flushPromises();
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    expect(wrapper.vm.nudgeVisible).toBe(true);
+  });
+
+  it('stays hidden until the post-login fetch has run (announced gate)', async () => {
+    const orgStore = useOrganizationsStore();
+    // Stale rows in the store from a previous view should not flash the nudge pre-login.
+    orgStore.pendingInvitations = [{ id: 'stale', role: 'member' }];
+    orgStore.fetchMyPendingInvitations = vi.fn().mockResolvedValue([]);
+    const wrapper = shallowMount(OrganizationsLoginNotices, { global: { stubs } });
+    await flushPromises();
+    expect(wrapper.vm.count).toBe(1);
+    expect(wrapper.vm.nudgeVisible).toBe(false);
+  });
+
+  it('survives a failing fetch (best-effort, stays hidden)', async () => {
+    const authStore = useAuthStore();
+    const orgStore = useOrganizationsStore();
+    orgStore.fetchMyPendingInvitations = vi.fn().mockRejectedValue(new Error('boom'));
+    authStore.cookieExpire = Date.now() + 100000;
+    const wrapper = shallowMount(OrganizationsLoginNotices, { global: { stubs } });
+    await flushPromises();
+    expect(orgStore.fetchMyPendingInvitations).toHaveBeenCalledTimes(1);
+    expect(wrapper.vm.nudgeVisible).toBe(false);
+  });
+
+  it('drains automatically when invitations are accepted elsewhere (shared store)', async () => {
+    const { wrapper, orgStore } = await mountNudge({
+      invitations: [{ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } }],
+      loggedIn: true,
+    });
+    expect(wrapper.vm.nudgeVisible).toBe(true);
+    // Accepting the invitation on /users/organizations filters the shared list.
+    orgStore.pendingInvitations = [];
+    expect(wrapper.vm.nudgeVisible).toBe(false);
+  });
+});
diff --git a/src/modules/organizations/tests/organizations.pendingInvitationsNudge.component.unit.tests.js b/src/modules/organizations/tests/organizations.pendingInvitationsNudge.component.unit.tests.js
deleted file mode 100644
index 657761992..000000000
--- a/src/modules/organizations/tests/organizations.pendingInvitationsNudge.component.unit.tests.js
+++ /dev/null
@@ -1,164 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { shallowMount, flushPromises } from '@vue/test-utils';
-import { createPinia, setActivePinia } from 'pinia';
-import PendingInvitationsNudge from '../components/organizations.pendingInvitationsNudge.component.vue';
-
-// Mock config service (consumed by the auth + organizations stores)
-vi.mock('../../../lib/services/config', () => ({
-  default: {
-    api: { protocol: 'http', host: 'localhost', port: '3000', base: 'api' },
-    cookie: { prefix: 'devkit' },
-  },
-}));
-vi.mock('../../../lib/helpers/ability', () => ({ updateAbilities: vi.fn(), ability: { rules: [], can: vi.fn() } }));
-
-const stubs = {
-  'v-snackbar': { template: '<div data-test="snackbar-stub"><slot /><slot name="actions" /></div>' },
-  'v-btn': { template: '<button v-bind="$attrs" :to="$attrs.to"><slot /></button>', inheritAttrs: false },
-  'v-icon': { template: '<i />' },
-};
-
-/**
- * Mount the nudge with real pinia stores so the isLoggedIn watch is reactive.
- * isLoggedIn derives from `!!authStore.cookieExpire` — flip it to simulate login.
- * @param {Object} [opts]
- * @param {Array} [opts.invitations] - Rows fetchMyPendingInvitations resolves with
- * @param {boolean} [opts.loggedIn] - Whether the user starts logged in
- * @returns {Promise<{ wrapper, authStore, orgStore, fetchMock }>}
- */
-async function mountNudge({ invitations = [], loggedIn = false } = {}) {
-  const { useAuthStore } = await import('../../auth/stores/auth.store');
-  const { useOrganizationsStore } = await import('../stores/organizations.store');
-  const authStore = useAuthStore();
-  const orgStore = useOrganizationsStore();
-  const fetchMock = vi.fn().mockImplementation(() => {
-    orgStore.pendingInvitations = invitations;
-    return Promise.resolve(invitations);
-  });
-  orgStore.fetchMyPendingInvitations = fetchMock;
-  if (loggedIn) authStore.cookieExpire = Date.now() + 100000;
-  const wrapper = shallowMount(PendingInvitationsNudge, {
-    global: { stubs },
-  });
-  await flushPromises();
-  return { wrapper, authStore, orgStore, fetchMock };
-}
-
-describe('organizations.pendingInvitationsNudge.component', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-  });
-
-  it('shows after login when the fetch returns pending invitations', async () => {
-    const { wrapper, authStore, fetchMock } = await mountNudge({
-      invitations: [{ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } }],
-    });
-
-    // Logged out: nothing fetched, nothing visible.
-    expect(fetchMock).not.toHaveBeenCalled();
-    expect(wrapper.vm.visible).toBe(false);
-
-    // Login → fetch fires, nudge becomes visible with the count.
-    authStore.cookieExpire = Date.now() + 100000;
-    await flushPromises();
-    expect(fetchMock).toHaveBeenCalledTimes(1);
-    expect(wrapper.vm.count).toBe(1);
-    expect(wrapper.vm.visible).toBe(true);
-  });
-
-  it('does not show when the fetch returns no pending invitations', async () => {
-    const { wrapper, fetchMock } = await mountNudge({ invitations: [], loggedIn: true });
-    expect(fetchMock).toHaveBeenCalledTimes(1);
-    expect(wrapper.vm.count).toBe(0);
-    expect(wrapper.vm.visible).toBe(false);
-  });
-
-  it('View action routes to /users/organizations and dismisses', async () => {
-    const { wrapper } = await mountNudge({
-      invitations: [{ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } }],
-      loggedIn: true,
-    });
-    expect(wrapper.vm.visible).toBe(true);
-
-    const view = wrapper.find('[data-test="pending-invitations-nudge-view"]');
-    expect(view.exists()).toBe(true);
-    expect(view.attributes('to')).toBe('/users/organizations');
-
-    await view.trigger('click');
-    expect(wrapper.vm.dismissed).toBe(true);
-    expect(wrapper.vm.visible).toBe(false);
-  });
-
-  it('snackbar v-model set(false) (timeout/close) dismisses', async () => {
-    const { wrapper } = await mountNudge({
-      invitations: [{ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } }],
-      loggedIn: true,
-    });
-    expect(wrapper.vm.visible).toBe(true);
-    wrapper.vm.visible = false;
-    expect(wrapper.vm.dismissed).toBe(true);
-    expect(wrapper.vm.visible).toBe(false);
-  });
-
-  it('fires once per login session (guarded), and re-arms after logout → login', async () => {
-    const { wrapper, authStore, fetchMock } = await mountNudge({
-      invitations: [{ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } }],
-      loggedIn: true,
-    });
-    expect(fetchMock).toHaveBeenCalledTimes(1);
-
-    // Same session: a re-invocation of the handler is guarded by the announced flag.
-    await wrapper.vm.$options.watch.isLoggedIn.handler.call(wrapper.vm, true);
-    expect(fetchMock).toHaveBeenCalledTimes(1);
-
-    // Dismiss, then logout: the nudge re-arms for the next session.
-    wrapper.vm.dismiss();
-    authStore.cookieExpire = 0;
-    await flushPromises();
-    expect(wrapper.vm.visible).toBe(false);
-    expect(wrapper.vm.announced).toBe(false);
-    expect(wrapper.vm.dismissed).toBe(false);
-
-    // New login session → fetch + nudge again.
-    authStore.cookieExpire = Date.now() + 100000;
-    await flushPromises();
-    expect(fetchMock).toHaveBeenCalledTimes(2);
-    expect(wrapper.vm.visible).toBe(true);
-  });
-
-  it('stays hidden until the post-login fetch has run (announced gate)', async () => {
-    const { useOrganizationsStore } = await import('../stores/organizations.store');
-    const orgStore = useOrganizationsStore();
-    // Stale rows in the store from a previous view should not flash the nudge pre-login.
-    orgStore.pendingInvitations = [{ id: 'stale', role: 'member' }];
-    orgStore.fetchMyPendingInvitations = vi.fn().mockResolvedValue([]);
-    const wrapper = shallowMount(PendingInvitationsNudge, { global: { stubs } });
-    await flushPromises();
-    expect(wrapper.vm.count).toBe(1);
-    expect(wrapper.vm.visible).toBe(false);
-  });
-
-  it('survives a failing fetch (best-effort, stays hidden)', async () => {
-    const { useAuthStore } = await import('../../auth/stores/auth.store');
-    const { useOrganizationsStore } = await import('../stores/organizations.store');
-    const authStore = useAuthStore();
-    const orgStore = useOrganizationsStore();
-    orgStore.fetchMyPendingInvitations = vi.fn().mockRejectedValue(new Error('boom'));
-    authStore.cookieExpire = Date.now() + 100000;
-    const wrapper = shallowMount(PendingInvitationsNudge, { global: { stubs } });
-    await flushPromises();
-    expect(orgStore.fetchMyPendingInvitations).toHaveBeenCalledTimes(1);
-    expect(wrapper.vm.visible).toBe(false);
-  });
-
-  it('drains automatically when invitations are accepted elsewhere (shared store)', async () => {
-    const { wrapper, orgStore } = await mountNudge({
-      invitations: [{ id: 'inv1', role: 'member', organizationId: { name: 'Acme' } }],
-      loggedIn: true,
-    });
-    expect(wrapper.vm.visible).toBe(true);
-    // Accepting the invitation on /users/organizations filters the shared list.
-    orgStore.pendingInvitations = [];
-    expect(wrapper.vm.visible).toBe(false);
-  });
-});
diff --git a/src/modules/organizations/tests/organizations.suggestedJoinBanner.component.unit.tests.js b/src/modules/organizations/tests/organizations.suggestedJoinBanner.component.unit.tests.js
deleted file mode 100644
index fb66d2f8b..000000000
--- a/src/modules/organizations/tests/organizations.suggestedJoinBanner.component.unit.tests.js
+++ /dev/null
@@ -1,263 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { mount, flushPromises } from '@vue/test-utils';
-import { createPinia, setActivePinia } from 'pinia';
-import { createVuetify } from 'vuetify';
-
-// v-snackbar uses visualViewport which is not available in jsdom
-if (typeof globalThis.visualViewport === 'undefined') {
-  globalThis.visualViewport = {
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    width: 1024,
-    height: 768,
-  };
-}
-
-// ── Store mocks ──────────────────────────────────────────────────────────────
-
-const dismissSuggestedJoinMock = vi.hoisted(() => vi.fn());
-const authStoreMock = vi.hoisted(() => ({
-  suggestedJoin: null,
-  dismissSuggestedJoin: dismissSuggestedJoinMock,
-}));
-
-vi.mock('../../auth/stores/auth.store', () => ({
-  useAuthStore: () => authStoreMock,
-}));
-
-const createJoinRequestMock = vi.hoisted(() => vi.fn());
-vi.mock('../stores/organizations.store', () => ({
-  useOrganizationsStore: () => ({
-    createJoinRequest: createJoinRequestMock,
-  }),
-}));
-
-// ── Component import (after mocks) ───────────────────────────────────────────
-
-import OrganizationsSuggestedJoinBanner from '../components/organizations.suggestedJoinBanner.component.vue';
-
-// ── Mount helper ─────────────────────────────────────────────────────────────
-
-/**
- * Mount the SuggestedJoinBanner with Vuetify installed.
- * @returns {import('@vue/test-utils').VueWrapper}
- */
-const mountComponent = () =>
-  mount(OrganizationsSuggestedJoinBanner, {
-    global: {
-      plugins: [createVuetify()],
-    },
-  });
-
-/**
- * Build a fake axios-style rejection for a given HTTP status + description.
- * @param {number} status
- * @param {string} description
- * @returns {Error}
- */
-function makeAxiosError(status, description) {
-  const err = new Error(description);
-  err.response = { status, data: { description } };
-  return err;
-}
-
-// ── Tests ─────────────────────────────────────────────────────────────────────
-
-describe('organizations.suggestedJoinBanner.component', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-    dismissSuggestedJoinMock.mockReset();
-    createJoinRequestMock.mockReset();
-    authStoreMock.suggestedJoin = null;
-  });
-
-  // ── No-op when null ──────────────────────────────────────────────────────
-
-  it('renders nothing when suggestedJoin is null', () => {
-    authStoreMock.suggestedJoin = null;
-    const wrapper = mountComponent();
-
-    // Primary banner is v-if guarded — no CTA or org name should be present
-    expect(wrapper.vm.suggestedJoin).toBe(null);
-    expect(wrapper.vm.visible).toBe(true);
-    // Feedback snackbar is outside the guard but hidden (feedback.visible=false)
-    expect(wrapper.vm.feedback.visible).toBe(false);
-  });
-
-  // ── Renders when set ─────────────────────────────────────────────────────
-
-  it('renders org name, CTA, and dismiss when suggestedJoin is set', async () => {
-    authStoreMock.suggestedJoin = { orgId: 'org1', orgName: 'Acme Corp' };
-    const wrapper = mountComponent();
-    await flushPromises();
-
-    expect(wrapper.vm.suggestedJoin).toEqual({ orgId: 'org1', orgName: 'Acme Corp' });
-    // The computed is reactive; text content is rendered inside Vuetify portal
-    // so we verify the computed value and the loading state is false (ready to interact)
-    expect(wrapper.vm.loading).toBe(false);
-    expect(wrapper.vm.visible).toBe(true);
-  });
-
-  // ── CTA success ──────────────────────────────────────────────────────────
-
-  it('calls createJoinRequest with orgId, shows success feedback, and dismisses on success', async () => {
-    authStoreMock.suggestedJoin = { orgId: 'org1', orgName: 'Acme Corp' };
-    createJoinRequestMock.mockResolvedValueOnce({});
-
-    const wrapper = mountComponent();
-    await wrapper.vm.requestAccess();
-    await flushPromises();
-
-    expect(createJoinRequestMock).toHaveBeenCalledWith('org1');
-    expect(wrapper.vm.feedback.visible).toBe(true);
-    expect(wrapper.vm.feedback.color).toBe('success');
-    expect(dismissSuggestedJoinMock).toHaveBeenCalledTimes(1);
-  });
-
-  // ── Benign rejection matrix ───────────────────────────────────────────────
-  // Uses the REAL backend error strings (capitalized as thrown by the Node service).
-  // Sources: organizations.membership.service.js L160, L161, L165;
-  //          organizations.controller.js L211 (404).
-
-  it.each([
-    [
-      'already a member (same-org active)',
-      // membership.service.js L160: 'Already a member of this organization'
-      makeAxiosError(422, 'Already a member of this organization'),
-      "You're already a member of that workspace.",
-    ],
-    [
-      'same-org pending request exists',
-      // membership.service.js L161: 'A pending request already exists'
-      makeAxiosError(422, 'A pending request already exists'),
-      'Request already sent. Awaiting approval.',
-    ],
-    [
-      'cross-org one-pending cap',
-      // membership.service.js L165: 'You already have a pending request. Please wait...'
-      makeAxiosError(422, 'You already have a pending request. Please wait for it to be reviewed before requesting to join another organization.'),
-      'Request already sent. Awaiting approval.',
-    ],
-    [
-      'org not found / 404',
-      // organizations.controller.js L211: 'No Organization with that identifier has been found'
-      makeAxiosError(404, 'No Organization with that identifier has been found'),
-      'That workspace no longer exists.',
-    ],
-  ])(
-    'benign "%s" → info toast + dismissSuggestedJoin called (no error toast)',
-    async (_label, err, expectedMsg) => {
-      authStoreMock.suggestedJoin = { orgId: 'org1', orgName: 'Acme Corp' };
-      createJoinRequestMock.mockRejectedValueOnce(err);
-
-      const wrapper = mountComponent();
-      await wrapper.vm.requestAccess();
-      await flushPromises();
-
-      // Neutral (info) feedback, NOT error
-      expect(wrapper.vm.feedback.visible).toBe(true);
-      expect(wrapper.vm.feedback.color).toBe('info');
-      expect(wrapper.vm.feedback.text).toBe(expectedMsg);
-
-      // suggestedJoin must be dismissed
-      expect(dismissSuggestedJoinMock).toHaveBeenCalledTimes(1);
-    },
-  );
-
-  // ── Genuine error — error toast, NOT dismissed ───────────────────────────
-
-  it('genuine error (network/500) → error toast shown and dismissSuggestedJoin NOT called', async () => {
-    authStoreMock.suggestedJoin = { orgId: 'org1', orgName: 'Acme Corp' };
-    createJoinRequestMock.mockRejectedValueOnce(makeAxiosError(500, 'Internal Server Error'));
-
-    const wrapper = mountComponent();
-    await wrapper.vm.requestAccess();
-    await flushPromises();
-
-    expect(wrapper.vm.feedback.visible).toBe(true);
-    expect(wrapper.vm.feedback.color).toBe('error');
-    expect(dismissSuggestedJoinMock).not.toHaveBeenCalled();
-  });
-
-  it('genuine error without response → error toast shown and dismissSuggestedJoin NOT called', async () => {
-    authStoreMock.suggestedJoin = { orgId: 'org1', orgName: 'Acme Corp' };
-    createJoinRequestMock.mockRejectedValueOnce(new Error('Network Error'));
-
-    const wrapper = mountComponent();
-    await wrapper.vm.requestAccess();
-    await flushPromises();
-
-    expect(wrapper.vm.feedback.visible).toBe(true);
-    expect(wrapper.vm.feedback.color).toBe('error');
-    expect(dismissSuggestedJoinMock).not.toHaveBeenCalled();
-  });
-
-  // ── Dismiss control ──────────────────────────────────────────────────────
-
-  it('dismiss() calls dismissSuggestedJoin', () => {
-    authStoreMock.suggestedJoin = { orgId: 'org1', orgName: 'Acme Corp' };
-    const wrapper = mountComponent();
-
-    wrapper.vm.dismiss();
-
-    expect(dismissSuggestedJoinMock).toHaveBeenCalledTimes(1);
-  });
-
-  // ── Loading state ────────────────────────────────────────────────────────
-
-  it('sets loading during request and clears it after success', async () => {
-    authStoreMock.suggestedJoin = { orgId: 'org1', orgName: 'Acme Corp' };
-    let resolveRequest;
-    createJoinRequestMock.mockReturnValueOnce(
-      new Promise((resolve) => {
-        resolveRequest = resolve;
-      }),
-    );
-
-    const wrapper = mountComponent();
-    const promise = wrapper.vm.requestAccess();
-    expect(wrapper.vm.loading).toBe(true);
-
-    resolveRequest({});
-    await promise;
-    await flushPromises();
-
-    expect(wrapper.vm.loading).toBe(false);
-  });
-
-  // ── Double-submit guard ───────────────────────────────────────────────────
-
-  it('concurrent double-click calls createJoinRequest exactly once', async () => {
-    // Vuetify 4 v-btn :loading does NOT block @click — guard must be in code.
-    authStoreMock.suggestedJoin = { orgId: 'org1', orgName: 'Acme Corp' };
-    let resolveRequest;
-    createJoinRequestMock.mockReturnValueOnce(
-      new Promise((resolve) => {
-        resolveRequest = resolve;
-      }),
-    );
-
-    const wrapper = mountComponent();
-    // Fire two concurrent calls without awaiting the first
-    const first = wrapper.vm.requestAccess();
-    const second = wrapper.vm.requestAccess(); // mid-flight, loading=true → no-op
-    resolveRequest({});
-    await Promise.all([first, second]);
-    await flushPromises();
-
-    expect(createJoinRequestMock).toHaveBeenCalledTimes(1);
-  });
-
-  // ── No-op guard ───────────────────────────────────────────────────────────
-
-  it('requestAccess is a no-op when suggestedJoin is null', async () => {
-    authStoreMock.suggestedJoin = null;
-    const wrapper = mountComponent();
-
-    await wrapper.vm.requestAccess();
-    await flushPromises();
-
-    expect(createJoinRequestMock).not.toHaveBeenCalled();
-    expect(dismissSuggestedJoinMock).not.toHaveBeenCalled();
-  });
-});
diff --git a/src/modules/users/views/user.organizations.view.vue b/src/modules/users/views/user.organizations.view.vue
index eaf74e3c3..b6c98a59b 100644
--- a/src/modules/users/views/user.organizations.view.vue
+++ b/src/modules/users/views/user.organizations.view.vue
@@ -190,7 +190,7 @@ export default {
     }
     try {
       // The persistent list above is the source of truth; the transient login
-      // nudge is app-level (organizations.pendingInvitationsNudge in app.vue).
+      // nudge is app-level (organizations.loginNotices in app.vue).
       await this.organizationsStore.fetchMyPendingInvitations();
     } catch {
       // interceptor handles snackbar

From 8c89307b892c9b343845a960a9fb310e8d9b9855 Mon Sep 17 00:00:00 2001
From: Pierre Brisorgueil <pierrebrisorgueil@me.com>
Date: Fri, 12 Jun 2026 08:56:05 +0200
Subject: [PATCH 5/7] style(invitations): align admin Invite button with the
 add-member reference (tonal)

---
 .../invitations/views/invitations.admin.view.vue       | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/modules/invitations/views/invitations.admin.view.vue b/src/modules/invitations/views/invitations.admin.view.vue
index 9e619d775..acb830d79 100644
--- a/src/modules/invitations/views/invitations.admin.view.vue
+++ b/src/modules/invitations/views/invitations.admin.view.vue
@@ -21,8 +21,14 @@
           <!-- Card-level action: the Invite button lives inside the datatable card
                title (top-right — no search on this table), like other admin tabs. -->
           <template #toolbar>
-            <v-btn color="primary" variant="flat" :class="config.vuetify.theme.rounded" class="text-none" @click="openCreate">
-              <v-icon start icon="fa-solid fa-envelope"></v-icon>
+            <v-btn
+              color="primary"
+              variant="tonal"
+              :class="config.vuetify.theme.rounded"
+              class="text-none text-body-medium"
+              @click="openCreate"
+            >
+              <v-icon icon="fa-solid fa-envelope" size="small" class="mr-2"></v-icon>
               Invite
             </v-btn>
           </template>

From 9109060b7dd155546974a765fd419cf45f119ebc Mon Sep 17 00:00:00 2001
From: Pierre Brisorgueil <pierrebrisorgueil@me.com>
Date: Fri, 12 Jun 2026 09:04:04 +0200
Subject: [PATCH 6/7] test(organizations): add @/config mock to loginNotices
 tests

The component imports config directly from @/config to gate the nudge
fetch on config.organizations. Without mocking this path, a clean
checkout without the generated src/config/index.js can fail to import
the SFC and the nudge logic is silently skipped. Mock is self-contained
and shares the same shape as the lib/services/config mock already present.
---
 ...rganizations.loginNotices.component.unit.tests.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/modules/organizations/tests/organizations.loginNotices.component.unit.tests.js b/src/modules/organizations/tests/organizations.loginNotices.component.unit.tests.js
index 2d57b636b..300b9941d 100644
--- a/src/modules/organizations/tests/organizations.loginNotices.component.unit.tests.js
+++ b/src/modules/organizations/tests/organizations.loginNotices.component.unit.tests.js
@@ -20,6 +20,18 @@ vi.mock('../../../lib/services/config', () => ({
     cookie: { prefix: 'devkit' },
   },
 }));
+
+// Mock generated @/config — used directly by the component for feature flags
+// (isLoggedIn watcher gates on config.organizations being truthy).
+// Without this mock, a clean checkout without src/config/index.js would fail to
+// import the SFC and the nudge logic would be silently skipped.
+vi.mock('@/config', () => ({
+  default: {
+    api: { protocol: 'http', host: 'localhost', port: '3000', base: 'api' },
+    cookie: { prefix: 'devkit' },
+    organizations: { enabled: true },
+  },
+}));
 vi.mock('../../../lib/helpers/ability', () => ({ updateAbilities: vi.fn(), ability: { rules: [], can: vi.fn() } }));
 
 // ── Component + store imports (real pinia stores, mocked per-instance) ───────

From ba104ebaed357c342a26ca979784da1febbc322a Mon Sep 17 00:00:00 2001
From: Pierre Brisorgueil <pierrebrisorgueil@me.com>
Date: Fri, 12 Jun 2026 09:10:11 +0200
Subject: [PATCH 7/7] docs(organizations): add JSDoc @returns on data() and
 async watcher handler
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add function-level JSDoc with @returns to the data() function describing
the reactive state shape, and add @returns {Promise<void>} to the async
isLoggedIn watcher handler — both required by the project JSDoc rule
(every function must document @returns, mandatory on async functions).
---
 .../components/organizations.loginNotices.component.vue      | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/modules/organizations/components/organizations.loginNotices.component.vue b/src/modules/organizations/components/organizations.loginNotices.component.vue
index 345dee6dd..4c94e9afd 100644
--- a/src/modules/organizations/components/organizations.loginNotices.component.vue
+++ b/src/modules/organizations/components/organizations.loginNotices.component.vue
@@ -132,6 +132,10 @@ function benignMessage(err) {
 export default {
   name: 'OrganizationsLoginNotices',
 
+  /**
+   * @desc Reactive state for the two login-notice surfaces.
+   * @returns {{ suggested: { visible: boolean, loading: boolean, feedback: { visible: boolean, color: string, text: string } }, nudge: { announced: boolean, dismissed: boolean } }}
+   */
   data: () => ({
     /**
      * @desc Suggested-join banner state.
@@ -207,6 +211,7 @@ export default {
      * via the `announced` flag; logout re-arms it. The suggested-join banner
      * is untouched here — its visibility is driven by the auth-store payload.
      * @param {boolean} loggedIn - Whether the user is logged in
+     * @returns {Promise<void>}
      */
     isLoggedIn: {
       immediate: true,