feat(10-04): collapsible panel with flyout, user menu with logout, breadcrumbs and dark mode

- useSidebar: collapsed below 1100px (matchMedia) or by the admin's choice,
  persisted as a boolean under summer-admin.sidebar; the viewport never
  overwrites the stored choice
- SectionPanel collapse and rail expand buttons; SectionFlyout (role menu)
  opens on hover, focus, Enter or ArrowDown on a rail item, closes on Esc or
  about 200 ms after leaving and returns focus to the rail item
- Breadcrumbs with plugin, controller and record crumbs; UserMenu (Reka
  DropdownMenu) with initials, name, role and Wyloguj
- useAuth.logout POSTs /auth/logout, clears user, navigation and settings
  and routes to login even when the call fails
- applyColorScheme toggles .dark from prefers-color-scheme (no toggle, A6)
- newest toast first, 200 ms fade and scale for dialogs and toasts
- one relation-manager type constant in the registry
- shell smoke tests; tests default to a desktop, light matchMedia

admin/src/components/ui/Toast.vue

@@ -2,11 +2,20 @@
 import { Check, CircleAlert, X } from '@lucide/vue'
 import { t } from '../../app/i18n'
 import { dismissToast, toasts } from '../../state/useToasts'
+
+// Toast stack (design: Interactions, Save and Relation manager): one global
+// queue, most recent first, success as status and danger as alert. Toasts
+// fade and scale in over 200 ms (no decorative animation) and dismiss after
+// about 4 s or on the close button.
 </script>
 
 <template>
   <!-- Bottom centre, 88px up so it clears the sticky form footer. -->
-  <div class="pointer-events-none fixed inset-x-0 bottom-[88px] z-50 flex flex-col items-center gap-2 px-4">
+  <TransitionGroup
+    tag="div"
+    name="toast"
+    class="pointer-events-none fixed inset-x-0 bottom-[88px] z-50 flex flex-col items-center gap-2 px-4"
+  >
     <div
       v-for="toast in toasts"
       :key="toast.id"
@@ -26,11 +35,11 @@ import { dismissToast, toasts } from '../../state/useToasts'
       <button
         type="button"
         :aria-label="t('backend::lang.form.close')"
-        class="flex size-8 items-center justify-center rounded-pager text-[#c3cbda] hover:bg-side-hover hover:text-white"
+        class="flex size-8 items-center justify-center rounded-pager text-[#c3cbda] transition-colors duration-150 ease-out hover:bg-side-hover hover:text-white"
         @click="dismissToast(toast.id)"
       >
         <X :size="16" aria-hidden="true" />
       </button>
     </div>
-  </div>
+  </TransitionGroup>
 </template>