@saasicat/ui-vue 0.19.0 → 0.21.0

package/src/pages-standard/AdminLayout.vue

@@ -86,9 +86,11 @@
         </q-drawer>
 
         <q-page-container>
-            <div :class="['sa-admin-content', { 'sa-admin-content--fullbleed': isFullbleed }]">
+            <!-- The document's only <main>. Pages must not add one of their
+                 own, and must not use QPage, which renders <main> itself. -->
+            <main :class="['sa-admin-content', { 'sa-admin-content--fullbleed': isFullbleed }]">
                 <router-view />
-            </div>
+            </main>
         </q-page-container>
     </q-layout>
 </template>

package/src/pages-standard/AuditPage.vue

@@ -1,20 +1,19 @@
 <template>
-    <div class="sa-audit">
-        <header class="sa-audit__head">
-            <div>
-                <h1 class="sa-audit__title">{{ msg.title }}</h1>
-                <p class="sa-audit__sub">
-                    {{ formatMessage(msg.subtitle, { count: rows.length }) }}
-                </p>
-            </div>
-            <q-btn
-                unelevated
-                color="primary"
-                icon="refresh"
-                :label="msg.filterButton"
-                @click="reload"
-            />
-        </header>
+    <AdminPage class="sa-audit">
+        <AdminHero
+            :title="msg.title"
+            :subtitle="formatMessage(msg.subtitle, { count: rows.length })"
+        >
+            <template #actions>
+                <q-btn
+                    unelevated
+                    color="primary"
+                    icon="refresh"
+                    :label="msg.filterButton"
+                    @click="reload"
+                />
+            </template>
+        </AdminHero>
 
         <div class="sa-audit__body">
             <div class="sa-audit__filter">
@@ -89,11 +88,13 @@
                 </q-card-actions>
             </q-card>
         </q-dialog>
-    </div>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
 import { formatMessage } from '../client/i18n/format.js';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 
@@ -206,32 +207,6 @@ function formatTs(iso: string | null | undefined): string {
 </script>
 
 <style scoped>
-.sa-audit {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app, #f1f5f9);
-}
-.sa-audit__head {
-    padding: 20px 28px 8px;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 16px;
-}
-.sa-audit__title {
-    margin: 0;
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-    font-weight: 700;
-    font-size: 22px;
-    color: var(--sa-heading, #0f172a);
-}
-.sa-audit__sub {
-    margin: 4px 0 0;
-    color: var(--sa-muted-dark, #475569);
-    font-size: 13.5px;
-}
-.sa-audit__body {
-    padding: 12px 28px 28px;
-}
 .sa-audit__filter {
     display: flex;
     gap: 10px;

package/src/pages-standard/BundlesPage.vue

@@ -1,13 +1,17 @@
 <template>
-    <div class="sa-bundles">
-        <BundlesHeader
-            :loading="loading"
-            :display-locale="displayLocale"
-            :locales="locales"
-            @create="openCreatePanel"
-            @refresh="load"
-            @update:display-locale="(value) => (displayLocale = value)"
-        />
+    <AdminPage class="sa-bundles">
+        <AdminHero :title="msg.header.title" :subtitle="msg.header.subtitle">
+            <template #actions>
+                <BundlesToolbar
+                    :loading="loading"
+                    :display-locale="displayLocale"
+                    :locales="locales"
+                    @create="openCreatePanel"
+                    @refresh="load"
+                    @update:display-locale="(value) => (displayLocale = value)"
+                />
+            </template>
+        </AdminHero>
 
         <q-banner v-if="error" class="sa-bundles__error" rounded>
             <template #avatar><q-icon name="warning" color="negative" /></template>
@@ -131,7 +135,7 @@
             :submit="onPublishSubmit"
             @submitted="onPublishSubmitted"
         />
-    </div>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
@@ -174,7 +178,9 @@ import { useSaMessages } from '../vue/use-super-admin-i18n.js';
 import BundleAccordionList from './bundles-page/BundleAccordionList.vue';
 import BundleDetailPanel from './bundles-page/BundleDetailPanel.vue';
 import BundlesFilterBar from './bundles-page/BundlesFilterBar.vue';
-import BundlesHeader from './bundles-page/BundlesHeader.vue';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
+import BundlesToolbar from './bundles-page/BundlesToolbar.vue';
 import BundlesKpis from './bundles-page/BundlesKpis.vue';
 import type {
     BundleEditForm,
@@ -643,33 +649,10 @@ const classifyDiff = computed(() => props.classifyDiff);
 
 <style>
 .sa-bundles {
-    padding: 16px;
     display: flex;
     flex-direction: column;
     gap: 14px;
 }
-.sa-bundles__head {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    gap: 16px;
-}
-.sa-bundles__title {
-    font-size: 20px;
-    font-weight: 700;
-    margin: 0;
-}
-.sa-bundles__sub {
-    margin: 4px 0 0;
-    color: #64748b;
-    font-size: 12px;
-    max-width: 560px;
-}
-.sa-bundles__head-actions {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
 .sa-bundles__error {
     border-left: 4px solid #dc2626;
 }

package/src/pages-standard/DashboardPage.vue

@@ -1,11 +1,7 @@
 <template>
-    <div class="sa-dashboard">
-        <header class="sa-page-head sa-dashboard__head">
-            <div>
-                <h1 class="sa-page-head__title">{{ msg.title }}</h1>
-                <p v-if="subtitle" class="sa-page-head__sub">{{ subtitle }}</p>
-            </div>
-            <div class="sa-page-head__actions">
+    <AdminPage class="sa-dashboard">
+        <AdminHero :title="msg.title" :subtitle="subtitle">
+            <template #actions>
                 <q-btn
                     flat
                     dense
@@ -14,8 +10,8 @@
                     :aria-label="common.reload"
                     @click="reload"
                 />
-            </div>
-        </header>
+            </template>
+        </AdminHero>
 
         <q-banner v-if="error" class="bg-red-1 text-red-9 q-mb-md" rounded>
             <strong>{{ common.error }}:</strong> {{ error.message }}
@@ -47,15 +43,15 @@
         </div>
 
         <div v-if="distributions && distributions.length > 0" class="sa-dashboard__rows">
-            <section
+            <AdminSection
                 v-for="dist in distributions"
                 :key="dist.id"
-                class="sa-dashboard__card sa-dashboard__row-card"
+                :title="dist.label"
+                class="sa-card sa-dashboard__row-card"
             >
-                <header class="sa-dashboard__row-head">
-                    <h2>{{ dist.label }}</h2>
-                    <span v-if="dist.total" class="sa-dashboard__count">{{ dist.total }}</span>
-                </header>
+                <template v-if="dist.total" #actions>
+                    <span class="sa-dashboard__count">{{ dist.total }}</span>
+                </template>
                 <ul class="sa-dashboard__bar-list">
                     <li
                         v-for="entry in dist.entries"
@@ -75,16 +71,14 @@
                         <span class="sa-dashboard__bar-count">{{ entry.value }}</span>
                     </li>
                 </ul>
-            </section>
+            </AdminSection>
         </div>
 
-        <section
+        <AdminSection
             v-if="resolvedShortcuts.length > 0"
-            class="sa-dashboard__card sa-dashboard__shortcuts"
+            :title="msg.shortcutsTitle"
+            class="sa-card sa-dashboard__shortcuts"
         >
-            <header class="sa-dashboard__row-head">
-                <h2>{{ msg.shortcutsTitle }}</h2>
-            </header>
             <div class="sa-dashboard__shortcut-grid">
                 <a
                     v-for="s in resolvedShortcuts"
@@ -99,10 +93,10 @@
                     </div>
                 </a>
             </div>
-        </section>
+        </AdminSection>
 
         <slot name="after-kpis" />
-    </div>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
@@ -114,6 +108,9 @@ import { formatMessage } from '../client/i18n/format.js';
 import { SUPER_ADMIN_MANIFEST_KEY } from '../vue/super-admin-context.js';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import { useSuperAdminHttp } from '../vue/use-super-admin-context.js';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
+import AdminSection from '../components/admin-page/AdminSection.vue';
 
 // Platform standard page: Dashboard.
 //
@@ -403,16 +400,7 @@ function barWidth(value: number, max?: number): number {
 </script>
 
 <style scoped>
-.sa-dashboard {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app, #f1f5f9);
-    padding: 20px 28px 28px;
-}
 /* Header look comes from the global .sa-page-head — only a margin tweak here. */
-.sa-dashboard__head {
-    margin-bottom: 4px;
-}
-
 .sa-dashboard__strip {
     display: grid;
     /* Responsive: 4 cards while there is space, then automatically 3 → 2 → 1. */
@@ -494,25 +482,6 @@ function barWidth(value: number, max?: number): number {
     }
 }
 
-.sa-dashboard__card {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    padding: 16px 18px;
-}
-.sa-dashboard__row-head {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 12px;
-}
-.sa-dashboard__row-head h2 {
-    margin: 0;
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--sa-heading, #0f172a);
-}
 .sa-dashboard__count {
     background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
     color: var(--sa-primary, #3f6bff);

package/src/pages-standard/DiscoveryPage.vue

@@ -1,6 +1,20 @@
 <template>
-    <div class="sa-discovery">
-        <DiscoveryHeader :loading="loading" @run-discovery="onRunDiscovery" />
+    <AdminPage class="sa-discovery">
+        <AdminHero :title="msg.title">
+            <template #subtitle>
+                {{ msg.subtitleLead }} <b>{{ msg.subtitleEmphasis }}</b> {{ msg.subtitleTail }}
+            </template>
+            <template #actions>
+                <q-btn
+                    unelevated
+                    color="primary"
+                    icon="bolt"
+                    :label="msg.runDiscovery"
+                    :loading="loading"
+                    @click="onRunDiscovery"
+                />
+            </template>
+        </AdminHero>
 
         <DiscoveryMetaBanner
             :app-label="appLabel"
@@ -53,11 +67,15 @@
                     />
                 </div>
 
-                <div v-for="group in featureGroups" :key="group.label" class="sa-discovery__group">
-                    <div class="sa-discovery__group-head">
-                        <span class="sa-discovery__group-title">{{ group.label }}</span>
+                <AdminSection
+                    v-for="group in featureGroups"
+                    :key="group.label"
+                    :title="group.label"
+                    class="sa-discovery__group"
+                >
+                    <template #actions>
                         <span class="sa-discovery__group-count">{{ group.features.length }}</span>
-                    </div>
+                    </template>
                     <div class="sa-discovery__cardlist">
                         <DiscoveryFeatureCard
                             v-for="f in group.features"
@@ -74,19 +92,19 @@
                             @feature-locale="onFeatureLocale"
                         />
                     </div>
-                </div>
+                </AdminSection>
                 <div v-if="filteredFeatures.length === 0" class="sa-discovery__empty-row">
                     {{ msg.noFeaturesMatchFilters }}
                 </div>
 
-                <div v-if="orphanCaps.length" class="sa-discovery__group">
-                    <div class="sa-discovery__group-head">
-                        <span class="sa-discovery__group-title sa-discovery__group-title--orphan">
-                            <q-icon name="warning" size="14px" />
-                            {{ msg.orphansTitle }}
-                        </span>
+                <AdminSection
+                    v-if="orphanCaps.length"
+                    :title="msg.orphansTitle"
+                    class="sa-discovery__group sa-discovery__group--orphan"
+                >
+                    <template #actions>
                         <span class="sa-discovery__group-count">{{ orphanCaps.length }}</span>
-                    </div>
+                    </template>
                     <p class="sa-discovery__orphan-hint">
                         {{ msg.orphanHint.before }} <code>feature:</code>{{ msg.orphanHint.middle }}
                         <code>@ImplementsCapability</code>{{ msg.orphanHint.after }}
@@ -95,7 +113,7 @@
                         :capabilities="orphanCaps"
                         :declared-at-by-key="declaredAtByKey"
                     />
-                </div>
+                </AdminSection>
             </q-tab-panel>
 
             <q-tab-panel name="quotas" class="sa-discovery__panel">
@@ -117,7 +135,7 @@
                 </div>
             </q-tab-panel>
         </q-tab-panels>
-    </div>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
@@ -135,7 +153,9 @@ import type {
 } from '@saasicat/types';
 import DiscoveryCapList from './discovery-page/DiscoveryCapList.vue';
 import DiscoveryFeatureCard from './discovery-page/DiscoveryFeatureCard.vue';
-import DiscoveryHeader from './discovery-page/DiscoveryHeader.vue';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminSection from '../components/admin-page/AdminSection.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
 import DiscoveryKpis from './discovery-page/DiscoveryKpis.vue';
 import DiscoveryMetaBanner from './discovery-page/DiscoveryMetaBanner.vue';
 import DiscoveryQuotaCard from './discovery-page/DiscoveryQuotaCard.vue';
@@ -438,23 +458,6 @@ onMounted(() => {
     flex-direction: column;
     gap: 14px;
 }
-.sa-discovery__head {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    gap: 16px;
-}
-.sa-discovery__title {
-    font-size: 20px;
-    font-weight: 700;
-    margin: 0;
-}
-.sa-discovery__sub {
-    margin: 4px 0 0;
-    color: #64748b;
-    font-size: 12px;
-    max-width: 640px;
-}
 .sa-discovery__banner {
     display: flex;
     justify-content: space-between;
@@ -559,23 +562,7 @@ onMounted(() => {
 .sa-discovery__group {
     margin-bottom: 16px;
 }
-.sa-discovery__group-head {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 8px;
-}
-.sa-discovery__group-title {
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: #475569;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-.sa-discovery__group-title--orphan {
+.sa-discovery__group--orphan .sa-section__title {
     color: #b45309;
 }
 .sa-discovery__group-count {

package/src/pages-standard/EmailHistoryPage.vue

@@ -1,12 +1,10 @@
 <template>
-    <div class="sa-emh">
-        <header class="sa-emh__head">
-            <div>
-                <h1 class="sa-emh__title">{{ resolvedTitle }}</h1>
-                <p class="sa-emh__sub">{{ msg.history.subtitle }}</p>
-            </div>
-            <q-btn flat icon="refresh" :label="common.reload" @click="applyFilter" />
-        </header>
+    <AdminPage class="sa-emh">
+        <AdminHero :title="resolvedTitle" :subtitle="msg.history.subtitle">
+            <template #actions>
+                <q-btn flat icon="refresh" :label="common.reload" @click="applyFilter" />
+            </template>
+        </AdminHero>
 
         <div class="sa-emh__body">
             <div class="sa-emh__filter">
@@ -206,18 +204,21 @@
 
         <MfaPromptDialog
             v-if="requireMfaForWrite"
-            :model-value="showMfa"
-            :description="mfaDescription"
-            :error="mfaError"
+            :model-value="mfa.show.value"
+            :description="mfa.description.value"
+            :error="mfa.error.value"
             :setup-hint="mfaSetupHint"
-            @update:model-value="onMfaDialogVisibility"
-            @confirm="onMfaConfirm"
+            @update:model-value="mfa.onVisibility"
+            @confirm="mfa.onConfirm"
         />
-    </div>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue';
+import { useMfaPrompt } from '../vue/use-mfa-prompt.js';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
 import { useSuperAdminNotify } from '../quasar/notify.js';
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
 import { formatMessage } from '../client/i18n/format.js';
@@ -317,10 +318,7 @@ const confirmDeleteOpen = ref(false);
 const pendingDeleteId = ref<string | null>(null);
 
 // MFA loop analogous to PlatformEmailPage (promise-resolver pattern).
-const showMfa = ref(false);
-const mfaError = ref('');
-const mfaDescription = ref('');
-let pendingMfaResolve: ((code: string | null) => void) | null = null;
+const mfa = useMfaPrompt();
 
 // Sequence guard: with rapidly changing filters a stale (out-of-order)
 // response must not overwrite the newest.
@@ -428,48 +426,25 @@ async function runWrite<T>(
         }
     }
     for (;;) {
-        const code = await promptMfa(label);
+        const code = await mfa.prompt(label);
         if (code === null) return { ok: false };
         try {
             const result = await invoke(code);
-            showMfa.value = false;
+            mfa.show.value = false;
             return { ok: true, result };
         } catch (err) {
             const status = (err as { response?: { status?: number } })?.response?.status;
             if (status === 401) {
-                mfaError.value = shell.value.mfa.invalidCode;
+                mfa.error.value = shell.value.mfa.invalidCode;
                 continue;
             }
-            showMfa.value = false;
+            mfa.show.value = false;
             notify('negative', errMsg(err));
             return { ok: false };
         }
     }
 }
 
-function promptMfa(description: string): Promise<string | null> {
-    return new Promise((resolve) => {
-        mfaDescription.value = description;
-        mfaError.value = '';
-        showMfa.value = true;
-        pendingMfaResolve = (code) => {
-            pendingMfaResolve = null;
-            resolve(code);
-        };
-    });
-}
-
-function onMfaConfirm(code: string): void {
-    pendingMfaResolve?.(code);
-}
-
-function onMfaDialogVisibility(open: boolean): void {
-    showMfa.value = open;
-    if (!open && pendingMfaResolve) {
-        pendingMfaResolve(null);
-    }
-}
-
 function statusColor(status: EmailHistoryStatus): string {
     switch (status) {
         case 'SENT':
@@ -521,32 +496,6 @@ function formatTs(iso: string | null | undefined): string {
 </script>
 
 <style scoped>
-.sa-emh {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app, #f1f5f9);
-}
-.sa-emh__head {
-    padding: 20px 28px 8px;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 16px;
-}
-.sa-emh__title {
-    margin: 0;
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-    font-weight: 700;
-    font-size: 22px;
-    color: var(--sa-heading, #0f172a);
-}
-.sa-emh__sub {
-    margin: 4px 0 0;
-    color: var(--sa-muted-dark, #475569);
-    font-size: 13.5px;
-}
-.sa-emh__body {
-    padding: 12px 28px 28px;
-}
 .sa-emh__filter {
     display: flex;
     gap: 10px;