feat(SPA): media page T0

web/src/components/DashboardShell.vue

@@ -15,20 +15,30 @@ const props = withDefaults(
 	defineProps<{
 		mobileTitle?: string
 		fullBleed?: boolean
+		compactPadding?: boolean
 		renderWhileChecking?: boolean
+		offlineMessage?: string
+		offlineIcon?: string
 	}>(),
 	{
 		mobileTitle: undefined,
+		offlineMessage: undefined,
+		offlineIcon: undefined,
 		fullBleed: false,
+		compactPadding: false,
 		renderWhileChecking: false,
 	},
 )
 
-const bodyUi = computed(() =>
-	props.fullBleed
-		? 'gap-0 p-0 sm:gap-0 sm:p-0 lg:p-0'
-		: 'gap-0 px-4 pt-5 pb-22 sm:gap-0 sm:px-4 sm:pt-5 sm:pb-22 lg:p-8',
-)
+const COMPACT_BODY = 'gap-0 px-4 pt-4 pb-22 sm:gap-0 sm:px-4 sm:pt-4 sm:pb-22 lg:p-6'
+const DEFAULT_BODY = 'gap-0 px-4 pt-5 pb-22 sm:gap-0 sm:px-4 sm:pt-5 sm:pb-22 lg:p-8'
+
+const bodyUi = computed(() => {
+	if (props.fullBleed) {
+		return 'gap-0 p-0 sm:gap-0 sm:p-0 lg:p-0'
+	}
+	return props.compactPadding ? COMPACT_BODY : DEFAULT_BODY
+})
 
 const route = useRoute()
 const router = useRouter()
@@ -39,6 +49,7 @@ const navItems = computed(() =>
 	[
 		{ label: 'Home', to: '/home', icon: 'i-lucide-home' },
 		{ label: 'Articles', to: '/article', icon: 'i-lucide-file-text' },
+		{ label: 'Media', to: '/media', icon: 'i-lucide-images' },
 		{ label: 'Users', to: '/users', icon: 'i-lucide-users' },
 		{ label: 'Integration', to: '/integration', icon: 'i-lucide-plug' },
 		{ label: 'Settings', to: '/settings', icon: 'i-lucide-settings' },
@@ -203,7 +214,11 @@ async function onLogout() {
 					id="dashboard-content"
 					:class="fullBleed ? 'flex h-full min-h-0 flex-1 flex-col' : ''"
 				>
-					<OfflineBanner />
+					<OfflineBanner
+						:message="offlineMessage"
+						:icon="offlineIcon"
+						:bleed="compactPadding"
+					/>
 
 					<AppBoot v-if="showBoot" />
 					<ErrorView