ui:improved ui of homepage

src/app.css

@@ -24,13 +24,17 @@ body {
 	color: #333;
 }
 
-h1,
+h1 {
+	font-family: 'Washington', serif;
+	font-weight: normal;
+}
+
 h2,
 h3,
 h4,
 h5,
 h6 {
-	font-family: 'Washington', serif;
+	font-family: 'Times New Roman', Times, serif;
 	font-weight: normal;
 }
 

src/lib/components/ProfileIcon.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	interface Props {
+		username: string;
+		onclick?: () => void;
+	}
+
+	let { username, onclick }: Props = $props();
+
+	// Get the first letter of username for avatar
+	const initial = username.charAt(0).toUpperCase();
+</script>
+
+<button class="profile-icon" {onclick} type="button">
+	<div class="avatar">
+		{initial}
+	</div>
+</button>
+
+<style>
+	.profile-icon {
+		background: none;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		border-radius: 50%;
+		transition: transform 0.2s ease;
+	}
+
+	.profile-icon:hover {
+		transform: scale(1.05);
+	}
+
+	.profile-icon:active {
+		transform: scale(0.95);
+	}
+
+	.avatar {
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+		background: black;
+		color: white;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: 600;
+		font-size: 16px;
+		border: 2px solid #fff;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	}
+
+	@media (max-width: 480px) {
+		.avatar {
+			width: 36px;
+			height: 36px;
+			font-size: 14px;
+		}
+	}
+</style>

src/lib/components/ProfilePanel.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+
+	interface Props {
+		username: string;
+		id: string;
+		isOpen: boolean;
+		onClose: () => void;
+	}
+
+	let { username, id, isOpen, onClose }: Props = $props();
+
+	// Close panel when clicking outside
+	function handleBackdropClick(event: MouseEvent) {
+		if (event.target === event.currentTarget) {
+			onClose();
+		}
+	}
+
+	// Close panel on escape key
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			onClose();
+		}
+	}
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if isOpen}
+	<div class="backdrop" onclick={handleBackdropClick} role="presentation">
+		<div class="panel">
+			<div class="panel-header">
+				<h2>Profile</h2>
+				<button class="close-button" onclick={onClose} type="button" aria-label="Close">
+					<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+						<path
+							d="M18 6L6 18M6 6L18 18"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</button>
+			</div>
+
+			<div class="panel-content">
+				<div class="user-item">
+					<span class="label">Username</span>
+					<span class="value">{username}</span>
+				</div>
+
+				<div class="user-item">
+					<span class="label">User ID</span>
+					<span class="value">{id}</span>
+				</div>
+
+				<div class="panel-actions">
+					<form method="post" action="/logout" use:enhance>
+						<button type="submit" class="signout-button"> Sign out </button>
+					</form>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: flex-start;
+		justify-content: flex-end;
+		z-index: 1000;
+		padding: 60px 16px 16px 16px;
+	}
+
+	.panel {
+		background: white;
+		border-radius: 12px;
+		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+		width: 100%;
+		max-width: 320px;
+		max-height: calc(100vh - 80px);
+		overflow: hidden;
+		animation: slideIn 0.3s ease-out;
+	}
+
+	@keyframes slideIn {
+		from {
+			opacity: 0;
+			transform: translateY(-20px) scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	.panel-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20px;
+		border-bottom: 1px solid #e5e5e5;
+	}
+
+	.panel-header h2 {
+		font-size: 18px;
+		font-weight: 600;
+		color: #333;
+		margin: 0;
+	}
+
+	.close-button {
+		background: none;
+		border: none;
+		padding: 4px;
+		cursor: pointer;
+		color: #666;
+		border-radius: 4px;
+		transition: background-color 0.2s ease;
+	}
+
+	.close-button:hover {
+		background-color: #f5f5f5;
+		color: #333;
+	}
+
+	.panel-content {
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.user-item {
+		padding: 16px 20px;
+		border-bottom: 1px solid #e5e5e5;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.user-item:last-of-type {
+		border-bottom: none;
+	}
+
+	.label {
+		font-size: 14px;
+		color: #666;
+		font-weight: 500;
+	}
+
+	.value {
+		font-size: 14px;
+		color: #333;
+		font-family: monospace;
+		font-weight: 500;
+	}
+
+	.panel-actions {
+		padding: 20px;
+		border-top: 1px solid #e5e5e5;
+	}
+
+	.signout-button {
+		background-color: #dc3545;
+		color: white;
+		border: none;
+		border-radius: 6px;
+		padding: 8px 16px;
+		font-size: 14px;
+		font-weight: 500;
+		width: 100%;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+	}
+
+	.signout-button:hover {
+		background-color: #c82333;
+	}
+
+	.signout-button:active {
+		background-color: #bd2130;
+	}
+
+	@media (max-width: 480px) {
+		.backdrop {
+			padding: 40px 12px 12px 12px;
+		}
+
+		.panel {
+			max-width: 100%;
+		}
+
+		.user-item {
+			padding: 14px 16px;
+		}
+
+		.panel-actions {
+			padding: 16px;
+		}
+	}
+</style>

src/lib/components/UserInfo.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-	interface Props {
-		username: string;
-		id: string;
-		showId?: boolean;
-	}
-
-	let { username, id, showId = true }: Props = $props();
-</script>
-
-<div class="user-info">
-	<p class="greeting">Hi, {username}!</p>
-	{#if showId}
-		<p class="user-id">Your user ID is {id}.</p>
-	{/if}
-</div>
-
-<style>
-	.user-info {
-		margin-bottom: 2rem;
-		text-align: center;
-	}
-
-	.greeting {
-		font-size: 1.25rem;
-		color: #333;
-		margin-bottom: 0.5rem;
-		font-weight: 500;
-	}
-
-	.user-id {
-		font-size: 0.95rem;
-		color: #666;
-		margin-bottom: 0;
-		font-family: monospace;
-	}
-
-	@media (max-width: 480px) {
-		.greeting {
-			font-size: 1.1rem;
-		}
-
-		.user-id {
-			font-size: 0.85rem;
-		}
-	}
-</style>

src/lib/index.ts

@@ -2,4 +2,5 @@
 export { default as Input } from './components/Input.svelte';
 export { default as Button } from './components/Button.svelte';
 export { default as ErrorMessage } from './components/ErrorMessage.svelte';
-export { default as UserInfo } from './components/UserInfo.svelte';
+export { default as ProfileIcon } from './components/ProfileIcon.svelte';
+export { default as ProfilePanel } from './components/ProfilePanel.svelte';

src/routes/+page.svelte

@@ -1,31 +1,79 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
+	import { ProfileIcon, ProfilePanel } from '$lib';
-	import { Button, UserInfo } from '$lib';
 	import type { PageServerData } from './$types';
 
 	let { data }: { data: PageServerData } = $props();
+
+	let showProfilePanel = $state(false);
+
+	function toggleProfilePanel() {
+		showProfilePanel = !showProfilePanel;
+	}
+
+	function closeProfilePanel() {
+		showProfilePanel = false;
+	}
 </script>
 
 <div class="home-container">
-	<h1>Welcome to Serengo</h1>
+	<header class="app-header">
-	<UserInfo username={data.user.username} id={data.user.id} />
+		<h1 class="app-title">Serengo</h1>
+		<ProfileIcon username={data.user.username} onclick={toggleProfilePanel} />
+	</header>
 
-	<form method="post" action="/logout" use:enhance>
+	<main class="main-content">
-		<Button type="submit" variant="secondary">Sign out</Button>
+		<!-- Future content will go here -->
-	</form>
+	</main>
+
+	<ProfilePanel
+		username={data.user.username}
+		id={data.user.id}
+		isOpen={showProfilePanel}
+		onClose={closeProfilePanel}
+	/>
 </div>
 
 <style>
 	.home-container {
-		max-width: 600px;
+		min-height: 100vh;
-		margin: 0 auto;
+		background-color: #f8f8f8;
-		padding: 2rem;
-		text-align: center;
 	}
 
-	.home-container h1 {
+	.app-header {
-		font-size: 2.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 16px 20px;
+		background-color: white;
+		border-bottom: 1px solid #e5e5e5;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+	}
+
+	.app-title {
+		font-family: 'Washington', serif;
+		font-size: 24px;
+		font-weight: normal;
 		color: #333;
-		margin-bottom: 2rem;
+		margin: 0;
+	}
+
+	.main-content {
+		padding: 24px 20px;
+		max-width: 1200px;
+		margin: 0 auto;
+	}
+
+	@media (max-width: 480px) {
+		.app-header {
+			padding: 12px 16px;
+		}
+
+		.app-title {
+			font-size: 20px;
+		}
+
+		.main-content {
+			padding: 20px 16px;
+		}
 	}
 </style>

static/manifest.json

@@ -1,7 +1,7 @@
 {
   "short_name": "Serengo",
   "name": "Serengo",
-  "description": "Meet the unexcpected.",
+  "description": "Meet the unexpected.",
   "icons": [
     {
       "src": "/favicon-64x64.png",