Add Mode6Test: copy of Mode5Test running on port 3000

2026-01-20 13:43:29 +00:00
parent 61dbbc457a
commit 42ff3e8f33
133 changed files with 353720 additions and 2 deletions
@@ -0,0 +1,99 @@
+<script lang="ts">
+	/**
+	 * COMPONENT: Navigation
+	 * 
+	 * PURPOSE: Main navigation header
+	 * FEATURES:
+	 * - Display user name
+	 * - Sign out button
+	 * - Logo/branding
+	 * - Navigation links
+	 */
+
+	import { user, clearAuth } from '../stores/auth';
+	import { clearNotifications } from '../stores/ui';
+	import { clearJobs } from '../stores/jobs';
+
+	/**
+	 * Handle sign out
+	 */
+	function handleSignOut() {
+		try {
+			// Clear auth state
+			clearAuth();
+
+			// Clear other stores
+			clearNotifications();
+			clearJobs();
+
+			// Redirect to signin using hash-based routing
+			window.location.hash = '/signin';
+		} catch (error) {
+			console.error('[Navigation] Sign out error:', error);
+		}
+	}
+
+	/**
+	 * Get user initials for avatar
+	 */
+	function getInitials(displayName: string | undefined): string {
+		if (!displayName) return '?';
+		return displayName
+			.split(' ')
+			.map((n) => n[0])
+			.join('')
+			.toUpperCase()
+			.slice(0, 2);
+	}
+</script>
+
+<!-- Navigation Header -->
+<nav class="bg-white shadow-sm border-b border-gray-200">
+	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+		<div class="flex justify-between items-center h-16">
+			<!-- Left: Logo/Title -->
+			<div class="flex items-center">
+				<h1 class="text-2xl font-bold text-blue-600">Job Info</h1>
+			</div>
+
+			<!-- Center: Navigation Links (placeholder for future) -->
+			<div class="hidden md:flex items-center space-x-8">
+				<a href="/" class="text-gray-600 hover:text-gray-900 transition-colors">
+					Home
+				</a>
+				<a href="/#" class="text-gray-600 hover:text-gray-900 transition-colors">
+					Saved Jobs
+				</a>
+			</div>
+
+			<!-- Right: User Menu -->
+			<div class="flex items-center gap-4">
+				<!-- User Avatar and Name -->
+				<div class="flex items-center gap-3">
+					<!-- Avatar -->
+					<div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">
+						{getInitials($user?.displayName)}
+					</div>
+
+					<!-- User Name (hidden on mobile) -->
+					<div class="hidden sm:block">
+						<p class="text-sm font-medium text-gray-900">{$user?.displayName || 'User'}</p>
+						<p class="text-xs text-gray-500">{$user?.mail}</p>
+					</div>
+				</div>
+
+				<!-- Sign Out Button -->
+				<button
+					on:click={handleSignOut}
+					class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors"
+				>
+					Sign Out
+				</button>
+			</div>
+		</div>
+	</div>
+</nav>
+
+<style>
+	/* No additional styles needed - using TailwindCSS */
+</style>