add firebase and sign up

src/lib/layout/TopBar.svelte

@@ -1,5 +1,21 @@
 <script>
+  import { getUser, getUserProfile, signOut } from '../auth/userStore.svelte.js';
+
   let { screen, onNavigate } = $props();
+
+  let user = $derived(getUser());
+  let profile = $derived(getUserProfile());
+
+  let menuOpen = $state(false);
+
+  function toggleMenu() {
+    menuOpen = !menuOpen;
+  }
+
+  function handleSignOut() {
+    menuOpen = false;
+    signOut();
+  }
 </script>
 
 <div class="topbar">
@@ -20,10 +36,34 @@
   </div>
 
   <div class="right">
-    <img src="/profile.jpg" alt="Profile" class="avatar" />
+    {#if user}
+      <div class="avatar-wrapper">
+        <button class="avatar-btn" onclick={toggleMenu} onkeydown={(e) => { if (e.key === 'Enter') toggleMenu(); }}>
+          <img
+            src={user.photoURL || '/profile.jpg'}
+            alt="Profile"
+            class="avatar"
+          />
+        </button>
+        {#if menuOpen}
+          <div class="dropdown-menu">
+            <div class="menu-header">
+              <span class="menu-name">{profile?.displayName || user.displayName}</span>
+              <span class="menu-email">{user.email}</span>
+            </div>
+            <div class="divider"></div>
+            <button class="menu-item" onclick={handleSignOut}>Sign out</button>
+          </div>
+        {/if}
+      </div>
+    {/if}
   </div>
 </div>
 
+{#if menuOpen}
+  <button class="backdrop" aria-label="Close menu" onclick={() => { menuOpen = false; }}></button>
+{/if}
+
 <style>
   .topbar {
     height: 64px;
@@ -101,12 +141,85 @@
     align-items: center;
   }
 
+  .avatar-wrapper {
+    position: relative;
+  }
+
+  .avatar-btn {
+    display: flex;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    border-radius: 50%;
+  }
+
   .avatar {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     object-fit: cover;
-    cursor: pointer;
     flex-shrink: 0;
   }
+
+  .dropdown-menu {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    background: #1e2937;
+    border: 1px solid #334155;
+    border-radius: 10px;
+    padding: 8px 0;
+    min-width: 200px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    z-index: 50;
+  }
+
+  .menu-header {
+    padding: 8px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .menu-name {
+    font: 600 14px/1.3 sans-serif;
+    color: #f1f5f9;
+  }
+
+  .menu-email {
+    font: 400 12px/1.3 sans-serif;
+    color: #94a3b8;
+  }
+
+  .divider {
+    height: 1px;
+    background: #334155;
+    margin: 6px 0;
+  }
+
+  .menu-item {
+    width: 100%;
+    padding: 8px 16px;
+    border: none;
+    background: none;
+    text-align: left;
+    font: 400 14px/1.4 sans-serif;
+    color: #fca5a5;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .menu-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 40;
+    border: none;
+    background: transparent;
+    cursor: default;
+  }
 </style>

src/lib/layout/selection.svelte.js

@@ -1,18 +1,46 @@
+import { db } from '../firebase.js';
+import { doc, onSnapshot, updateDoc, arrayUnion, arrayRemove } from 'firebase/firestore';
+
 let selected = $state(new Set());
 let totalCountries = $state(0);
+let _uid = null;
+let _unsubscribe = null;
+
+export function initSelectionListener(uid) {
+  if (_unsubscribe) _unsubscribe();
+  _uid = uid;
+  const userRef = doc(db, 'users', uid);
+  _unsubscribe = onSnapshot(userRef, (snap) => {
+    if (snap.exists()) {
+      const codes = snap.data().visitedCountries || [];
+      selected = new Set(codes);
+    }
+  });
+}
 
 export function toggle(id) {
+  if (!_uid) return;
+  const was = selected.has(id);
   const next = new Set(selected);
-  if (next.has(id)) {
+  if (was) {
     next.delete(id);
   } else {
     next.add(id);
   }
   selected = next;
+  const userRef = doc(db, 'users', _uid);
+  if (was) {
+    updateDoc(userRef, { visitedCountries: arrayRemove(id) });
+  } else {
+    updateDoc(userRef, { visitedCountries: arrayUnion(id) });
+  }
 }
 
 export function clearAll() {
+  if (!_uid) return;
   selected = new Set();
+  const userRef = doc(db, 'users', _uid);
+  updateDoc(userRef, { visitedCountries: [] });
 }
 
 export function getSelected() {