feature/ver-app-activa

frontend/src/lib/components/sidebar/app-sidebar.svelte

@@ -9,7 +9,9 @@
 	import NavUser from "./nav-user.svelte";
 	import TeamSwitcher from "./team-switcher.svelte";
 	import AppLauncher from "./app-launcher.svelte";
-	import { systemStore } from "$lib/stores/system.svelte";
+	import { systemStore, type SystemType } from "$lib/stores/system.svelte";
+	import PackageIcon from "@lucide/svelte/icons/package";
+	import BarChart3Icon from "@lucide/svelte/icons/bar-chart-3";
 	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
 	import type { ComponentProps } from "svelte";
 
@@ -77,6 +79,11 @@
 
 	const sidebar = useSidebar();
 
+	const ACTIVE_ICONS: Record<SystemType, any> = {
+		fixed_asset: PackageIcon,
+		inventory: BarChart3Icon,
+	};
+
 	onMount(() => {
 		const expandForKeyboardNav = () => {
 			sidebar.setOpen(true);
@@ -90,7 +97,37 @@
 
 <Sidebar.Root {collapsible} {...restProps}>
 	<Sidebar.Header>
-		<TeamSwitcher {userTenants} />
+		<div class="flex flex-col gap-2">
+			<TeamSwitcher {userTenants} />
+
+			{#if systemStore.activeLabel}
+				{@const activeLabel = systemStore.activeLabel}
+				{@const activeSystem = systemStore.activeSystem}
+				{@const Icon = activeSystem ? ACTIVE_ICONS[activeSystem] : null}
+
+				<div
+					class="flex items-center gap-2 rounded-lg border border-primary/40 bg-primary/5 px-3 py-2 text-xs shadow-sm
+						dark:bg-primary/10"
+					aria-label={`Aplicación activa: ${activeLabel.name}`}
+					title={`Aplicación activa: ${activeLabel.name}`}
+				>
+					{#if Icon}
+						<div class="flex size-8 items-center justify-center rounded-md bg-primary/10 text-primary">
+							<Icon class="size-4" />
+						</div>
+					{/if}
+					<div class="flex min-w-0 flex-col text-left">
+						<span class="text-[11px] font-medium text-muted-foreground">Aplicación activa</span>
+						<span class="truncate text-xs font-semibold text-foreground">
+							{activeLabel.name}
+						</span>
+						<span class="text-[11px] text-muted-foreground">
+							{activeLabel.code}
+						</span>
+					</div>
+				</div>
+			{/if}
+		</div>
 	</Sidebar.Header>
 	<Sidebar.Content>
 		<NavMain items={data.navMain} />