Move account menu to a floating bottom-left card with light/dark/system theme control

app/src/shell/components/Sidebar.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue';
+import UserMenu from './UserMenu.vue';
 
 const props = defineProps({
   menu: {
@@ -30,8 +31,18 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  serverData: {
+    type: Object,
+    required: true,
+  },
+  theme: {
+    type: String,
+    default: 'system',
+  },
 });
 
+const emit = defineEmits(['set-theme']);
+
 // Custom logo from Settings > General. Dark mode prefers the dark variant
 // and falls back to the standard logo; no logo set = "Aurora" wordmark.
 const activeLogo = computed(() =>
@@ -93,6 +104,7 @@ const isAuroraActive = (item) => normalize(item.url) === current.value;
 
 <template>
   <nav class="sidebar" :class="{ 'sidebar--collapsed': collapsed }">
+    <div class="sidebar__scroll">
     <div class="sidebar__brand">
       <img v-if="activeLogo" :src="activeLogo" alt="" class="sidebar__brand-img" />
       <template v-else>{{ collapsed ? 'A' : 'Aurora' }}</template>
@@ -192,6 +204,14 @@ const isAuroraActive = (item) => normalize(item.url) === current.value;
         </li>
       </ul>
     </div>
+    </div>
+
+    <UserMenu
+      :server-data="serverData"
+      :collapsed="collapsed"
+      :theme="theme"
+      @set-theme="(t) => emit('set-theme', t)"
+    />
   </nav>
 </template>
 
@@ -203,16 +223,24 @@ const isAuroraActive = (item) => normalize(item.url) === current.value;
   width: var(--aurora-sidebar-w);
   height: 100vh;
   background: var(--aurora-app-bg);
-  overflow-y: auto;
   transition: width 0.2s ease;
   z-index: 99999;
-  padding: 12px 0;
   box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   display: flex;
   flex-direction: column;
 }
 
+/* Scrollable nav content — separate from the pinned UserMenu footer below
+   it, so the account card stays visible regardless of scroll position. */
+.sidebar__scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px 0;
+  box-sizing: border-box;
+}
+
 .sidebar__brand {
   font-size: 1.25rem;
   font-weight: 700;