fix: multiple fixes all accross the SPA, missing buttons actions, styling etc.

web/src/components/DashboardShell.vue

@@ -3,6 +3,7 @@ import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useSessionStore } from '@/stores/session'
 import { useApi } from '@/composables/useApi'
+import { useSidebarCollapsed } from '@/composables/useSidebarCollapsed'
 import AppBoot from '@/components/AppBoot.vue'
 import AppLogo from '@/components/AppLogo.vue'
 import ErrorView from '@/components/ErrorView.vue'
@@ -44,7 +45,22 @@ const navItems = computed(() =>
 
 const routeTitle = computed(() => (route.meta.title as string) ?? '')
 const pageTitle = computed(() => props.mobileTitle ?? routeTitle.value)
-const sidebarCollapsed = ref(false)
+const sidebarCollapsed = useSidebarCollapsed()
+
+const sidebarUi = computed(() => ({
+	root: sidebarCollapsed.value ? 'min-w-14 px-1 py-3' : 'min-w-14 p-3',
+	header: 'mb-3 h-10 gap-2.5 px-1.5',
+	body: 'gap-0.5 p-0',
+	footer: 'p-0',
+}))
+
+const navUi = computed(() => ({
+	list: 'flex flex-col gap-0.5',
+	link: sidebarCollapsed.value
+		? 'h-8 justify-center gap-0 px-0 text-sm'
+		: 'h-8 gap-2.5 px-2.5 py-0 text-sm',
+	linkLeadingIcon: 'size-4',
+}))
 const loggingOut = ref(false)
 
 function onRetry() {
@@ -75,12 +91,7 @@ async function onLogout() {
 			:resizable="false"
 			:default-size="14"
 			:collapsed-size="3.5"
-			:ui="{
-				root: 'min-w-14 p-3',
-				header: 'mb-3 h-10 gap-2.5 px-1.5',
-				body: 'gap-0.5 p-0',
-				footer: 'p-0',
-			}"
+			:ui="sidebarUi"
 		>
 			<template #header>
 				<AppLogo :size="26" />
@@ -97,11 +108,7 @@ async function onLogout() {
 				:items="navItems"
 				:collapsed="sidebarCollapsed"
 				aria-label="Main"
-				:ui="{
-					list: 'flex flex-col gap-0.5',
-					link: 'h-8 gap-2.5 px-2.5 py-0 text-sm',
-					linkLeadingIcon: 'size-4',
-				}"
+				:ui="navUi"
 			/>
 
 			<template #footer>