mgv-backoffice 1.19.0 → 1.20.0

package/src/components/BaseLoginForm.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import { useThemeClasses } from '../composables/useThemeClasses'
+import BaseGoogleSignInButton from './BaseGoogleSignInButton.vue'
+import type { LoginCredentials } from '../types/auth'
+
+interface Props {
+  /** Card heading. Defaults to "Sign in". */
+  title?: string
+  /** Optional muted line under the heading. */
+  subtitle?: string
+  /** Submit button label. Defaults to "Sign in". */
+  submitLabel?: string
+  /** Disables the form and shows a spinner on the submit button. */
+  loading?: boolean
+  /** Disables the form and shows a spinner on the Google button. */
+  googleLoading?: boolean
+  /** Error message rendered above the form (e.g. "Invalid credentials"). */
+  error?: string
+  /** Render the "Sign in with Google" button + divider. Defaults to true. */
+  showGoogle?: boolean
+  /** Render the "Remember me" checkbox. Defaults to false. */
+  showRemember?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'Sign in',
+  subtitle: '',
+  submitLabel: 'Sign in',
+  loading: false,
+  googleLoading: false,
+  error: '',
+  showGoogle: true,
+  showRemember: false,
+})
+
+const emit = defineEmits<{
+  /** Email/password submit. */
+  submit: [credentials: LoginCredentials]
+  /** User chose "Sign in with Google". */
+  'google-sign-in': []
+}>()
+
+const { isDark } = useTheme()
+const t = useThemeClasses()
+
+const email = ref('')
+const password = ref('')
+const remember = ref(false)
+const showPassword = ref(false)
+
+const busy = computed(() => props.loading || props.googleLoading)
+
+function onSubmit() {
+  if (busy.value) return
+  emit('submit', {
+    email: email.value,
+    password: password.value,
+    ...(props.showRemember ? { remember: remember.value } : {}),
+  })
+}
+</script>
+
+<template>
+  <!--
+    Presentational sign-in card. Owns its own input state and emits
+    `submit` (with credentials) / `google-sign-in`. It runs no auth
+    itself — the consuming app handles the actual request and feeds back
+    `loading` / `error`.
+  -->
+  <div
+    class="w-full max-w-sm mx-auto rounded-xl border shadow-sm p-6 sm:p-8"
+    :class="t.card"
+  >
+    <!-- Brand / logo slot above the heading. -->
+    <div v-if="$slots.logo" class="flex justify-center mb-6">
+      <slot name="logo" />
+    </div>
+
+    <div class="mb-6 text-center">
+      <h1 class="text-xl font-semibold" :class="t.primaryText">{{ title }}</h1>
+      <p v-if="subtitle" class="mt-1 text-sm" :class="t.mutedText">{{ subtitle }}</p>
+    </div>
+
+    <!-- Error banner -->
+    <div
+      v-if="error"
+      role="alert"
+      class="mb-4 rounded-lg border px-3 py-2 text-sm"
+      :class="isDark
+        ? 'bg-red-500/10 border-red-500/30 text-red-300'
+        : 'bg-red-50 border-red-200 text-red-700'"
+    >
+      {{ error }}
+    </div>
+
+    <!-- Google sign-in + divider -->
+    <template v-if="showGoogle">
+      <BaseGoogleSignInButton
+        :loading="googleLoading"
+        :disabled="loading"
+        @click="emit('google-sign-in')"
+      />
+      <div class="flex items-center gap-3 my-5">
+        <span class="h-px flex-1" :class="isDark ? 'bg-gray-700' : 'bg-gray-200'" />
+        <span class="text-xs uppercase tracking-wider" :class="t.dimTextAlt">or</span>
+        <span class="h-px flex-1" :class="isDark ? 'bg-gray-700' : 'bg-gray-200'" />
+      </div>
+    </template>
+
+    <form class="space-y-4" @submit.prevent="onSubmit">
+      <div>
+        <label for="login-email" class="block mb-1.5 text-sm font-medium" :class="t.label">
+          Email
+        </label>
+        <input
+          id="login-email"
+          v-model="email"
+          type="email"
+          name="email"
+          autocomplete="email"
+          required
+          :disabled="busy"
+          placeholder="you@example.com"
+          class="w-full h-11 px-3 rounded-lg border text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 disabled:opacity-60"
+          :class="t.inputWithPlaceholder"
+        />
+      </div>
+
+      <div>
+        <div class="flex items-center justify-between mb-1.5">
+          <label for="login-password" class="block text-sm font-medium" :class="t.label">
+            Password
+          </label>
+          <!-- `forgot` slot: drop a "Forgot password?" link here. -->
+          <slot name="forgot" />
+        </div>
+        <div class="relative">
+          <input
+            id="login-password"
+            v-model="password"
+            :type="showPassword ? 'text' : 'password'"
+            name="password"
+            autocomplete="current-password"
+            required
+            :disabled="busy"
+            placeholder="••••••••"
+            class="w-full h-11 pl-3 pr-16 rounded-lg border text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 disabled:opacity-60"
+            :class="t.inputWithPlaceholder"
+          />
+          <button
+            type="button"
+            @click="showPassword = !showPassword"
+            :aria-label="showPassword ? 'Hide password' : 'Show password'"
+            :aria-pressed="showPassword"
+            class="absolute inset-y-0 right-0 px-3 text-xs font-medium cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 rounded-r-lg"
+            :class="t.mutedText"
+          >
+            {{ showPassword ? 'Hide' : 'Show' }}
+          </button>
+        </div>
+      </div>
+
+      <label
+        v-if="showRemember"
+        class="flex items-center gap-2 text-sm cursor-pointer select-none"
+        :class="t.bodyText"
+      >
+        <input
+          v-model="remember"
+          type="checkbox"
+          :disabled="busy"
+          class="w-4 h-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500"
+        />
+        Remember me
+      </label>
+
+      <button
+        type="submit"
+        :disabled="busy"
+        :aria-busy="loading"
+        class="inline-flex items-center justify-center gap-2 w-full h-11 px-4 rounded-lg text-sm font-semibold text-white bg-emerald-600 hover:bg-emerald-700 transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed"
+      >
+        <svg
+          v-if="loading"
+          class="w-4 h-4 animate-spin"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+        >
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.4 0 0 5.4 0 12h4z" />
+        </svg>
+        {{ submitLabel }}
+      </button>
+    </form>
+
+    <!-- `footer` slot: e.g. "Don't have an account? Sign up". -->
+    <div v-if="$slots.footer" class="mt-6 text-center text-sm" :class="t.mutedText">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/src/components/BaseNotificationPanel.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { XMarkIcon, BellIcon } from '@heroicons/vue/24/outline'
+import { useTheme } from '../composables/useTheme'
+import { useThemeClasses } from '../composables/useThemeClasses'
+import { useEscapeKey } from '../composables/useEscapeKey'
+import { useNotifications } from '../composables/useNotifications'
+
+interface Props {
+  /** Panel heading. Defaults to "Notifications". */
+  title?: string
+  /** Shown when there are no notifications. */
+  emptyText?: string
+  /** Render the "Mark all read" action when there are unread items. */
+  showMarkAllRead?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'Notifications',
+  emptyText: 'You have no notifications.',
+  showMarkAllRead: true,
+})
+
+const emit = defineEmits<{
+  /** A notification row was clicked (e.g. to navigate to its target). */
+  select: [id: import('../types/notification').NotificationItem['id']]
+}>()
+
+const { isDark } = useTheme()
+const t = useThemeClasses()
+const {
+  notifications,
+  unreadCount,
+  open,
+  closePanel,
+  markAllRead,
+  markRead,
+} = useNotifications()
+
+const dotClass: Record<string, string> = {
+  info: 'bg-sky-500',
+  success: 'bg-emerald-500',
+  warning: 'bg-amber-500',
+  error: 'bg-red-500',
+}
+
+const total = computed(() => notifications.value.length)
+
+function onSelect(id: import('../types/notification').NotificationItem['id']) {
+  markRead(id)
+  emit('select', id)
+}
+
+useEscapeKey(() => {
+  if (open.value) closePanel()
+})
+</script>
+
+<template>
+  <!--
+    Left-anchored notification drawer. Open/close state and the list live
+    in `useNotifications()`, so the sidebar bell and this panel stay in
+    sync. Teleported to <body> with a backdrop; slides in from the left.
+  -->
+  <Teleport to="body">
+    <!-- Backdrop -->
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      leave-active-class="transition-opacity duration-200"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="open"
+        class="fixed inset-0 z-[60] bg-black/50"
+        aria-hidden="true"
+        @click="closePanel"
+      />
+    </Transition>
+
+    <!-- Drawer -->
+    <Transition
+      enter-active-class="transition-transform duration-300 ease-out"
+      enter-from-class="-translate-x-full"
+      leave-active-class="transition-transform duration-300 ease-in"
+      leave-to-class="-translate-x-full"
+    >
+      <aside
+        v-if="open"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="title"
+        class="fixed top-0 left-0 z-[70] h-screen w-full max-w-sm flex flex-col border-r shadow-xl"
+        :class="isDark ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'"
+      >
+        <!-- Header -->
+        <div
+          class="flex items-center justify-between gap-3 px-5 py-4 border-b shrink-0"
+          :class="t.border"
+        >
+          <h2 class="text-lg font-semibold flex items-center gap-2" :class="t.primaryText">
+            {{ title }}
+            <span class="text-sm font-normal" :class="t.dimTextAlt">— {{ total }}</span>
+          </h2>
+          <button
+            type="button"
+            @click="closePanel"
+            aria-label="Close notifications"
+            class="p-1.5 rounded-lg cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+            :class="isDark ? 'text-gray-400 hover:bg-gray-800' : 'text-gray-500 hover:bg-gray-100'"
+          >
+            <XMarkIcon class="w-5 h-5" aria-hidden="true" />
+          </button>
+        </div>
+
+        <!-- Mark all read -->
+        <div
+          v-if="showMarkAllRead && unreadCount > 0"
+          class="px-5 py-2 border-b shrink-0 flex justify-end"
+          :class="t.border"
+        >
+          <button
+            type="button"
+            @click="markAllRead"
+            class="text-xs font-medium cursor-pointer transition-colors focus:outline-none focus-visible:underline"
+            :class="t.emeraldText"
+          >
+            Mark all as read
+          </button>
+        </div>
+
+        <!-- Body -->
+        <div class="flex-1 overflow-y-auto">
+          <!-- Empty state -->
+          <div
+            v-if="total === 0"
+            class="flex flex-col items-center justify-center text-center px-6 py-16 gap-3"
+          >
+            <BellIcon class="w-10 h-10" :class="t.illustration" aria-hidden="true" />
+            <p class="text-sm" :class="t.mutedText">{{ emptyText }}</p>
+          </div>
+
+          <!-- List -->
+          <ul v-else class="divide-y" :class="isDark ? 'divide-gray-800' : 'divide-gray-100'">
+            <li v-for="n in notifications" :key="n.id">
+              <button
+                type="button"
+                @click="onSelect(n.id)"
+                class="w-full text-left px-5 py-4 flex gap-3 transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500"
+                :class="[
+                  !n.read
+                    ? (isDark ? 'bg-emerald-500/5' : 'bg-emerald-50/60')
+                    : '',
+                  isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-50',
+                ]"
+              >
+                <span
+                  class="mt-1.5 w-2 h-2 rounded-full shrink-0"
+                  :class="n.read ? (isDark ? 'bg-gray-700' : 'bg-gray-300') : (dotClass[n.type ?? 'info'])"
+                  aria-hidden="true"
+                />
+                <span class="min-w-0 flex-1">
+                  <span class="flex items-baseline justify-between gap-2">
+                    <span
+                      class="text-sm truncate"
+                      :class="[n.read ? 'font-medium' : 'font-semibold', t.primaryTextSoft]"
+                    >
+                      {{ n.title }}
+                    </span>
+                    <span v-if="n.time" class="text-xs shrink-0" :class="t.dimText">{{ n.time }}</span>
+                  </span>
+                  <span v-if="n.message" class="mt-0.5 block text-sm" :class="t.mutedText">
+                    {{ n.message }}
+                  </span>
+                </span>
+              </button>
+            </li>
+          </ul>
+        </div>
+      </aside>
+    </Transition>
+  </Teleport>
+</template>

package/src/components/BaseSidebar.vue

@@ -1,9 +1,19 @@
 <script setup lang="ts">
-import { ref, nextTick, watch } from 'vue'
+import { ref, computed, nextTick, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline'
+import {
+  Bars3Icon,
+  XMarkIcon,
+  ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
+  MoonIcon,
+  SunIcon,
+  BellIcon,
+} from '@heroicons/vue/24/outline'
 import { useTheme } from '../composables/useTheme'
 import { useMobileSidebar } from '../composables/useMobileSidebar'
+import { useSidebarCollapse } from '../composables/useSidebarCollapse'
+import { useNotifications } from '../composables/useNotifications'
 import type { NavSection } from '../types/sidebar'
 
 interface Props {
@@ -17,6 +27,10 @@ interface Props {
   version?: string
   /** Whether to render the dark/light toggle in the footer. */
   showThemeToggle?: boolean
+  /** Whether to render the desktop collapse toggle (icon-only rail). */
+  collapsible?: boolean
+  /** Whether to render the notifications bell button. */
+  showNotifications?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -24,12 +38,20 @@ const props = withDefaults(defineProps<Props>(), {
   appName: '',
   version: '',
   showThemeToggle: true,
+  collapsible: true,
+  showNotifications: false,
 })
 
 const router = useRouter()
 const route = useRoute()
 const { isDark, toggleTheme } = useTheme()
 const { mobileOpen, close: closeMobile, toggle: toggleMobile } = useMobileSidebar()
+const { collapsed, toggle: toggleCollapsed } = useSidebarCollapse()
+const { unreadCount, togglePanel: toggleNotifications } = useNotifications()
+
+// Whether the icon-only rail styling applies. Only relevant on desktop
+// (`lg:`) — on mobile the sidebar is always the full off-canvas panel.
+const isRail = computed(() => props.collapsible && collapsed.value)
 
 // Refs needed for the mobile focus management.
 const closeMobileButton = ref<HTMLButtonElement | null>(null)
@@ -103,17 +125,21 @@ function navigate(name: string) {
     <aside
       role="navigation"
       aria-label="Main navigation"
-      class="fixed top-0 left-0 h-screen w-60 flex flex-col border-r transition-transform duration-300 lg:pointer-events-auto"
+      class="fixed top-0 left-0 h-screen w-60 flex flex-col border-r transition-all duration-300 lg:pointer-events-auto"
       :class="[
         isDark ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200',
         mobileOpen ? 'translate-x-0 z-50' : '-translate-x-full max-lg:pointer-events-none lg:translate-x-0 z-50',
+        collapsible && collapsed ? 'lg:w-16' : 'lg:w-60',
       ]"
     >
       <div class="flex flex-col h-full">
         <!-- Logo -->
-        <div class="px-5 pt-5 pb-4 flex items-center justify-center relative">
+        <div
+          class="px-5 pt-5 pb-4 flex items-center justify-center relative"
+          :class="{ 'lg:px-2': isRail }"
+        >
           <button type="button" @click="goHome" class="cursor-pointer" aria-label="Go to home">
-            <slot name="logo" :size="52" />
+            <slot name="logo" :size="isRail ? 36 : 52" />
           </button>
           <button
             ref="closeMobileButton"
@@ -130,7 +156,10 @@ function navigate(name: string) {
         <!-- Nav -->
         <nav class="flex-1 overflow-y-auto px-3 space-y-6">
           <div v-for="section in sections" :key="section.title">
-            <p class="px-2 mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+            <p
+              class="px-2 mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500"
+              :class="{ 'lg:hidden': isRail }"
+            >
               {{ section.title }}
             </p>
             <ul class="space-y-0.5">
@@ -138,27 +167,64 @@ function navigate(name: string) {
                 <button
                   type="button"
                   :aria-current="isActive(item.name) ? 'page' : undefined"
+                  :title="isRail ? item.label : undefined"
                   @click="navigate(item.name)"
                   class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors w-full text-left cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
-                  :class="isActive(item.name)
-                    ? (isDark
-                        ? 'bg-emerald-500/15 text-emerald-300'
-                        : 'bg-emerald-50 text-emerald-700')
-                    : (isDark
-                        ? 'text-gray-400 hover:text-gray-100 hover:bg-gray-800'
-                        : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100')"
+                  :class="[
+                    isActive(item.name)
+                      ? (isDark
+                          ? 'bg-emerald-500/15 text-emerald-300'
+                          : 'bg-emerald-50 text-emerald-700')
+                      : (isDark
+                          ? 'text-gray-400 hover:text-gray-100 hover:bg-gray-800'
+                          : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'),
+                    { 'lg:justify-center': isRail },
+                  ]"
                 >
                   <component :is="item.icon" class="w-[18px] h-[18px] shrink-0" />
-                  {{ item.label }}
+                  <span :class="{ 'lg:hidden': isRail }">{{ item.label }}</span>
                 </button>
               </li>
             </ul>
           </div>
         </nav>
 
-        <!-- Bottom: Theme toggle, status slot, footer slot -->
+        <!-- Bottom: Notifications, theme toggle, status slot, footer slot -->
         <div class="px-4 py-4 border-t transition-colors space-y-3"
           :class="isDark ? 'border-gray-800' : 'border-gray-200'">
+          <!--
+            Notifications bell: toggles the shared `BaseNotificationPanel`
+            (via useNotifications). The unread badge reads the same shared
+            count. Drop a `<BaseNotificationPanel />` in your layout to
+            render the panel itself.
+          -->
+          <button
+            v-if="showNotifications"
+            type="button"
+            @click="toggleNotifications"
+            title="Notifications"
+            :aria-label="unreadCount > 0 ? `Notifications, ${unreadCount} unread` : 'Notifications'"
+            class="relative flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm font-medium transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+            :class="[
+              isDark
+                ? 'text-gray-400 hover:text-gray-100 hover:bg-gray-800'
+                : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100',
+              { 'lg:justify-center': isRail },
+            ]"
+          >
+            <span class="relative shrink-0">
+              <BellIcon class="w-[18px] h-[18px]" aria-hidden="true" />
+              <!-- Unread badge -->
+              <span
+                v-if="unreadCount > 0"
+                class="absolute -top-1.5 -right-1.5 min-w-4 h-4 px-1 rounded-full bg-red-500 text-white text-[10px] font-semibold leading-4 text-center"
+              >
+                {{ unreadCount > 99 ? '99+' : unreadCount }}
+              </span>
+            </span>
+            <span :class="{ 'lg:hidden': isRail }">Notifications</span>
+          </button>
+
           <button
             v-if="showThemeToggle"
             type="button"
@@ -167,38 +233,81 @@ function navigate(name: string) {
             :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
             :aria-pressed="isDark"
             class="flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm font-medium transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
-            :class="isDark
-              ? 'text-gray-400 hover:text-gray-100 hover:bg-gray-800'
-              : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'"
+            :class="[
+              isDark
+                ? 'text-gray-400 hover:text-gray-100 hover:bg-gray-800'
+                : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100',
+              { 'lg:justify-center': isRail },
+            ]"
           >
-            {{ isDark ? 'Switch to light' : 'Switch to dark' }}
+            <!-- Icon stand-in shown only on the collapsed desktop rail. -->
+            <component
+              :is="isDark ? SunIcon : MoonIcon"
+              class="hidden w-[18px] h-[18px] shrink-0"
+              :class="{ 'lg:block': isRail }"
+              aria-hidden="true"
+            />
+            <span :class="{ 'lg:hidden': isRail }">{{ isDark ? 'Switch to light' : 'Switch to dark' }}</span>
             <span class="ml-auto relative w-9 h-5 rounded-full transition-colors"
-              :class="isDark ? 'bg-emerald-600' : 'bg-gray-300'">
+              :class="[isDark ? 'bg-emerald-600' : 'bg-gray-300', { 'lg:hidden': isRail }]">
               <span class="absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-300"
                 :class="isDark ? 'translate-x-4' : 'translate-x-0'" />
             </span>
           </button>
 
+          <!--
+            Desktop-only collapse toggle: shrinks the sidebar to an
+            icon-only rail. Hidden on mobile, where the off-canvas menu is
+            controlled by the open/close buttons instead.
+          -->
+          <button
+            v-if="collapsible"
+            type="button"
+            @click="toggleCollapsed"
+            :title="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+            :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+            :aria-pressed="collapsed"
+            class="hidden lg:flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm font-medium transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+            :class="[
+              isDark
+                ? 'text-gray-400 hover:text-gray-100 hover:bg-gray-800'
+                : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100',
+              { 'lg:justify-center': isRail },
+            ]"
+          >
+            <component
+              :is="collapsed ? ChevronDoubleRightIcon : ChevronDoubleLeftIcon"
+              class="w-[18px] h-[18px] shrink-0"
+              aria-hidden="true"
+            />
+            <span :class="{ 'lg:hidden': isRail }">Collapse</span>
+          </button>
+
           <!--
             `status` slot: consumers drop in their own indicator (e.g.
             health check, sync status). The wrapper handles spacing only.
+            Hidden on the collapsed desktop rail where there's no room.
           -->
-          <slot name="status" />
+          <div :class="{ 'lg:hidden': isRail }">
+            <slot name="status" />
+          </div>
 
           <!--
             `footer` slot: links / version / etc. If not provided and
             either `appName` or `version` is set, we render a default
-            "appName vVersion" line.
+            "appName vVersion" line. Hidden on the collapsed desktop rail.
           -->
-          <slot name="footer">
-            <div
-              v-if="appName || version"
-              class="flex items-center justify-center gap-2 text-xs"
-              :class="isDark ? 'text-gray-500' : 'text-gray-500'"
-            >
-              <span>{{ appName }}<template v-if="appName && version"> </template><template v-if="version">v{{ version }}</template></span>
-            </div>
-          </slot>
+          <div :class="{ 'lg:hidden': isRail }">
+            <slot name="footer">
+              <div
+                v-if="appName || version"
+                class="flex items-center justify-center gap-2 text-xs"
+                :class="isDark ? 'text-gray-500' : 'text-gray-500'"
+              >
+                <span>{{ appName }}<template v-if="appName && version"> </template><template v-if="version">v{{ version }}</template></span>
+              </div>
+            </slot>
+          </div>
         </div>
       </div>
     </aside>