use:more shadcn components

src/lib/components/Header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ProfileIcon, ProfilePanel } from '$lib';
+	import { ProfilePanel } from '$lib';
 
 	type User = {
 		id: string;
@@ -7,29 +7,13 @@
 	};
 
 	let { user }: { user: User } = $props();
-
-	let showProfilePanel = $state(false);
-
-	function toggleProfilePanel() {
-		showProfilePanel = !showProfilePanel;
-	}
-
-	function closeProfilePanel() {
-		showProfilePanel = false;
-	}
 </script>
 
 <header class="app-header">
 	<div class="header-content">
 		<h1 class="app-title">Serengo</h1>
 		<div class="profile-container">
-			<ProfileIcon username={user.username} onclick={toggleProfilePanel} />
-			<ProfilePanel
-				username={user.username}
-				id={user.id}
-				isOpen={showProfilePanel}
-				onClose={closeProfilePanel}
-			/>
+			<ProfilePanel username={user.username} id={user.id} />
 		</div>
 	</div>
 </header>
@@ -39,7 +23,6 @@
 		width: 100%;
 		position: relative;
 		z-index: 10;
-		background-color: rgba(255, 255, 255, 0.2);
 		backdrop-filter: blur(10px);
 	}