From 3f91ea9d66c58c9730ca2dfc0b7f275e1176050d Mon Sep 17 00:00:00 2001
From: hreyes <hreyes@aduanasoft.com>
Date: Mon, 9 Feb 2026 12:39:26 -0600
Subject: [PATCH] fix/logo-bad-location

---
 .../components/sidebar/team-switcher.svelte   | 27 +++++----
 .../ui/sidebar/sidebar-trigger.svelte         | 56 +++----------------
 2 files changed, 20 insertions(+), 63 deletions(-)

diff --git a/frontend/src/lib/components/sidebar/team-switcher.svelte b/frontend/src/lib/components/sidebar/team-switcher.svelte
index 0118331f..1c071fdd 100644
--- a/frontend/src/lib/components/sidebar/team-switcher.svelte
+++ b/frontend/src/lib/components/sidebar/team-switcher.svelte
@@ -45,18 +45,6 @@
 							size="lg"
 							class="relative overflow-hidden data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-has-data-[state=collapsed]/sidebar-wrapper:aspect-square group-has-data-[state=collapsed]/sidebar-wrapper:h-10 group-has-data-[state=collapsed]/sidebar-wrapper:w-10 group-has-data-[state=collapsed]/sidebar-wrapper:rounded-lg group-has-data-[state=collapsed]/sidebar-wrapper:justify-center group-has-data-[state=collapsed]/sidebar-wrapper:gap-0"
 						>
-							<!-- Logo skin visible cuando el sidebar está colapsado (icon mode) -->
-							<span
-								aria-hidden
-								class="pointer-events-none absolute inset-0 bg-center bg-contain bg-no-repeat transition-all duration-300 opacity-0 group-has-data-[state=collapsed]/sidebar-wrapper:opacity-90 group-has-data-[state=collapsed]/sidebar-wrapper:blur-[0.6px] group-has-data-[state=collapsed]/sidebar-wrapper:scale-100"
-								style:background-image={logoBg}
-							/>
-							<!-- Overlay para legibilidad del ícono/chevron -->
-							<span
-								aria-hidden
-								class="pointer-events-none absolute inset-0 transition-opacity duration-300 opacity-0 group-has-data-[state=collapsed]/sidebar-wrapper:bg-black/12 group-has-data-[state=collapsed]/sidebar-wrapper:opacity-100"
-							/>
-
 							<div
 								class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg overflow-hidden group-has-data-[state=collapsed]/sidebar-wrapper:hidden"
 							>
@@ -87,9 +75,20 @@
 
 							<!-- Isotipo compacto visible solo en modo colapsado -->
 							<div
-								class="relative z-10 hidden size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-foreground text-sm font-semibold shadow-sm ring-1 ring-sidebar-border/40 group-has-data-[state=collapsed]/sidebar-wrapper:flex"
+								class="relative z-10 hidden size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-foreground text-sm font-semibold shadow-sm ring-1 ring-sidebar-border/40 group-has-data-[state=collapsed]/sidebar-wrapper:flex overflow-hidden"
 							>
-								{activeCompanyInitials}
+								{#if activeCompanyLogoUrl}
+									<img
+										src={activeCompanyLogoUrl}
+										alt={companyStore.activeCompany?.name || "Company"}
+										class="size-full object-cover"
+										onerror={(e) => {
+											(e.currentTarget as HTMLImageElement).style.display = "none";
+										}}
+									/>
+								{:else}
+									{activeCompanyInitials}
+								{/if}
 							</div>
 						</Sidebar.MenuButton>
 					{/snippet}
diff --git a/frontend/src/lib/components/ui/sidebar/sidebar-trigger.svelte b/frontend/src/lib/components/ui/sidebar/sidebar-trigger.svelte
index 98083be6..c9a0b076 100644
--- a/frontend/src/lib/components/ui/sidebar/sidebar-trigger.svelte
+++ b/frontend/src/lib/components/ui/sidebar/sidebar-trigger.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { Button } from "$lib/components/ui/button/index.js";
-	import { cn, getBackendAssetUrl } from "$lib/utils.js";
-	import PanelLeftIcon from "@lucide/svelte/icons/panel-left";
-	import type { ComponentProps } from "svelte";
-	import { companyStore } from "$lib/stores/company.svelte";
-	import { useSidebar } from "./context.svelte.js";
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { cn, getBackendAssetUrl } from '$lib/utils.js';
+	import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
+	import type { ComponentProps } from 'svelte';
+	import { useSidebar } from './context.svelte.js';
 
 	let {
 		ref = $bindable(null),
@@ -16,19 +15,6 @@
 	} = $props();
 
 	const sidebar = useSidebar();
-
-	// Derive the current company logo as a skin for the trigger when collapsed.
-	let activeCompanyLogoUrl = $derived(
-		companyStore.activeCompany?.logo
-			? getBackendAssetUrl(
-				`v1/a76/company/${companyStore.activeCompany.id}/logo/image?t=${Date.now()}`
-			)
-			: null
-	);
-
-	// Keep a short fallback in case there is no logo.
-	const fallbackBg =
-		"radial-gradient(circle at 30% 30%, rgba(0,0,0,0.08), rgba(0,0,0,0.12)), linear-gradient(135deg, rgba(99,102,241,0.08), rgba(14,165,233,0.14))";
 </script>
 
 <Button
@@ -36,13 +22,7 @@
 	data-slot="sidebar-trigger"
 	variant="ghost"
 	size="icon"
-	class={cn(
-		"relative flex aspect-square h-10 w-10 items-center justify-center overflow-hidden rounded-lg",
-		"border border-sidebar-border/60 bg-sidebar shadow-sm transition-all duration-300",
-		"hover:bg-sidebar-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
-		"group-data-[collapsible=icon]/sidebar-wrapper:size-9",
-		className
-	)}
+	class={cn('h-8 w-8', className)}
 	type="button"
 	onclick={(e) => {
 		onclick?.(e);
@@ -50,28 +30,6 @@
 	}}
 	{...restProps}
 >
-	<!-- Logo skin behind the icon; fades/blurs when collapsed for legibility -->
-	<span
-		aria-hidden
-		class={cn(
-			"absolute inset-0 bg-center bg-no-repeat transition-all duration-300",
-			"bg-contain",
-			sidebar.state === "collapsed"
-				? "opacity-75 blur-[0.5px] scale-95"
-				: "opacity-100 blur-0 scale-105"
-		)}
-		style:background-image={activeCompanyLogoUrl ? `url(${activeCompanyLogoUrl})` : fallbackBg}
-	/>
-
-	<!-- Subtle overlay to keep the icon readable over the logo skin -->
-	<span
-		class={cn(
-			"pointer-events-none absolute inset-0 transition-opacity duration-300",
-			sidebar.state === "collapsed" ? "bg-black/10 opacity-100" : "opacity-0"
-		)}
-		aria-hidden
-	/>
-
-	<PanelLeftIcon class="relative z-10 transition-transform duration-300" />
+	<PanelLeftIcon />
 	<span class="sr-only">Toggle Sidebar</span>
 </Button>