feat: add alpha preview brand badge

docs/TASKS/app-shell/003-add-alpha-preview-brand-badge.md

@@ -0,0 +1,19 @@
+# Task: Add alpha preview brand badge
+
+## Goal
+
+Add a compact product-stage badge beside the authenticated app brand and public landing brand so users can see the product is in alpha preview without treating it as an error or blocking alert. Remove the old authenticated sidebar caption so the brand treatment stays focused.
+
+## Relevant Files
+
+- `frontend/src/layouts/main/AppSidebar.vue`
+- `frontend/src/static/components/LandingSiteMenu.vue`
+- `frontend/src/locales/en.json`
+- `frontend/src/locales/fr.json`
+
+## Validation
+
+```bash
+cd frontend
+npm run build
+```

frontend/src/layouts/main/AppSidebar.vue

@@ -254,9 +254,21 @@
                 to="/"
             >
                 <span class="brand-mark">S</span>
-                <div v-if="isExpanded">
+                <div
-                    <div class="brand-name">Socialize</div>
+                    v-if="isExpanded"
-                    <div class="brand-caption">{{ t('nav.brandCaption') }}</div>
+                    class="brand-copy"
+                >
+                    <div class="brand-heading">
+                        <span class="brand-name-wrap">
+                            <span class="brand-name">Socialize</span>
+                            <span
+                                class="brand-stage-badge"
+                                :aria-label="t('nav.brandStageLabel')"
+                            >
+                                <span>{{ t('nav.brandStage') }}</span>
+                            </span>
+                        </span>
+                    </div>
                 </div>
             </router-link>
         </div>
@@ -635,7 +647,7 @@
     }
 
     .brand-link {
-        @apply flex min-w-0 items-center gap-3 no-underline;
+        @apply flex min-w-0 items-start gap-3 no-underline;
         color: inherit;
     }
 
@@ -643,20 +655,38 @@
         @apply w-full justify-center;
     }
 
+    .brand-copy {
+        @apply min-w-0;
+    }
+
+    .brand-heading {
+        @apply flex min-w-0 items-center;
+    }
+
     .brand-mark {
         @apply flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-[1.1rem] text-xl font-black;
         background: linear-gradient(135deg, #ff8a3d 0%, #ef4444 100%);
         color: #fffaf2;
     }
 
-    .brand-name {
+    .brand-name-wrap {
-        @apply text-lg font-black uppercase tracking-[0.18em];
+        @apply relative inline-flex min-w-0 items-center;
-        color: #172033;
     }
 
-    .brand-caption {
+    .brand-name {
-        @apply text-xs uppercase tracking-[0.24em];
+        @apply min-w-0 text-lg font-black uppercase tracking-[0.18em];
-        color: #5d6b82;
+        color: #172033;
+        line-height: 2.75rem;
+    }
+
+    .brand-stage-badge {
+        @apply absolute inline-flex h-4 items-center rounded-sm border px-1.5 text-[0.55rem] font-black uppercase tracking-[0.08em];
+        background: rgba(255, 231, 199, 0.46);
+        border-color: rgba(242, 179, 107, 0.38);
+        color: #925000;
+        left: 0;
+        line-height: 1;
+        top: calc(100% - 0.45rem);
     }
 
     .side-menu {

frontend/src/locales/en.json

@@ -443,8 +443,8 @@
     }
   },
   "nav": {
-    "brandStage": "Preview",
+    "brandStage": "Alpha Preview",
-    "brandStageLabel": "Product stage: Preview",
+    "brandStageLabel": "Product stage: Alpha Preview",
     "brandCaption": "Approval workflow",
     "workspace": "Workspace",
     "notifications": "Notifications",

frontend/src/locales/fr.json

@@ -443,8 +443,8 @@
     }
   },
   "nav": {
-    "brandStage": "Preview",
+    "brandStage": "Aperçu alpha",
-    "brandStageLabel": "Statut du produit : Preview",
+    "brandStageLabel": "Statut du produit : aperçu alpha",
     "brandCaption": "Flux d'approbation",
     "workspace": "Espace de travail",
     "notifications": "Notifications",

frontend/src/static/components/LandingSiteMenu.vue

@@ -6,7 +6,17 @@
                 to="/"
             >
                 <span class="site-brand-mark">S</span>
-                <span class="site-brand-text">Socialize</span>
+                <span class="site-brand-heading">
+                    <span class="site-brand-text-wrap">
+                        <span class="site-brand-text">Socialize</span>
+                        <span
+                            class="site-brand-stage-badge"
+                            :aria-label="t('nav.brandStageLabel')"
+                        >
+                            <span>{{ t('nav.brandStage') }}</span>
+                        </span>
+                    </span>
+                </span>
             </router-link>
 
             <nav
@@ -262,7 +272,7 @@
     }
 
     .site-brand {
-        @apply flex min-w-0 items-center gap-3 no-underline;
+        @apply flex min-w-0 items-start gap-3 no-underline;
         color: #172033;
     }
 
@@ -272,8 +282,27 @@
         color: #fffaf2;
     }
 
+    .site-brand-heading {
+        @apply flex min-w-0 items-center;
+    }
+
+    .site-brand-text-wrap {
+        @apply relative inline-flex min-w-0 items-center;
+    }
+
     .site-brand-text {
         @apply truncate text-lg font-black uppercase tracking-[0.18em];
+        line-height: 2.5rem;
+    }
+
+    .site-brand-stage-badge {
+        @apply absolute inline-flex h-4 items-center rounded-sm border px-1.5 text-[0.55rem] font-black uppercase tracking-[0.08em];
+        background: rgba(255, 231, 199, 0.46);
+        border-color: rgba(242, 179, 107, 0.38);
+        color: #925000;
+        left: 0;
+        line-height: 1;
+        top: calc(100% - 0.45rem);
     }
 
     .site-nav {
@@ -390,7 +419,7 @@
     }
 
     @media (max-width: 420px) {
-        .site-brand-text {
+        .site-brand-heading {
             @apply hidden;
         }