feat: add home marker on map, crayon cursor in worldmap, remove logo from topbar

src/lib/layout/TopBar.svelte

@@ -1,7 +1,5 @@
 <script>
   import { getUser, getUserProfile, signOut } from '../auth/userStore.svelte.js';
-  import logo1Img from '../../assets/logo-1.png';
-
   let { screen, onNavigate } = $props();
 
   let user = $derived(getUser());
@@ -22,7 +20,6 @@
 <div class="topbar">
   <div class="left">
     <div class="brand">
-      <img src={logo1Img} class="logo-img" alt="Journi logo" />
       <span class="app-name">Journi</span>
     </div>
   </div>
@@ -93,12 +90,6 @@
     gap: 4px;
   }
 
-  .logo-img {
-    width: 28px;
-    height: 28px;
-    object-fit: contain;
-  }
-
   .app-name {
     font-family: var(--heading);
     font-size: 22px;

src/lib/world-map/WorldMap.svelte

@@ -4,6 +4,9 @@
   import { feature } from 'topojson-client';
   import worldData from 'world-atlas/countries-50m.json';
   import { getSelected, setTotalCount } from '../layout/selection.svelte.js';
+  import { getUserProfile } from '../auth/userStore.svelte.js';
+  import homeIconUrl from '../../assets 2/home.png';
+  import crayonCursorUrl from '../../assets/logo-cursor.png';
 
   let { onCountryClick = (_name) => {} } = $props();
 
@@ -75,6 +78,32 @@
   let frameEl;
   let _paths = null;
   let _g = null;
+  let _pathFn = null;
+  let _countries = null;
+
+  function updateHomeMarker(homeCountryName) {
+    if (!_g || !_pathFn || !_countries) return;
+    _g.selectAll('.home-marker').remove();
+    if (!homeCountryName) return;
+    const found = _countries.find(f => f.properties.name === homeCountryName);
+    if (!found) return;
+    const [cx, cy] = _pathFn.centroid(found);
+    if (isNaN(cx) || isNaN(cy)) return;
+    const SIZE = 24;
+    _g.append('image')
+      .attr('class', 'home-marker')
+      .attr('href', homeIconUrl)
+      .attr('x', cx - SIZE / 2)
+      .attr('y', cy - SIZE / 2)
+      .attr('width', SIZE)
+      .attr('height', SIZE)
+      .style('pointer-events', 'none');
+  }
+
+  $effect(() => {
+    const homeCountry = getUserProfile()?.homeCountry ?? null;
+    updateHomeMarker(homeCountry);
+  });
 
   function fitProjection(proj, w, h) {
     proj.fitSize([w, h], { type: 'Sphere' });
@@ -107,6 +136,9 @@
       if (!f.id) f.id = 'XK';
     });
 
+    _pathFn = path;
+    _countries = countries;
+
     const sovereignIds = new Set(countries.map(f => effId(f)));
     setTotalCount(sovereignIds.size);
 
@@ -175,6 +207,7 @@
     }
 
     renderMicrostates();
+    updateHomeMarker(getUserProfile()?.homeCountry ?? null);
 
     const zoom = d3.zoom()
       .scaleExtent([1, 32])
@@ -212,7 +245,7 @@
   });
 </script>
 
-<div bind:this={frameEl} class="map-frame"></div>
+<div bind:this={frameEl} class="map-frame" style="cursor: url({crayonCursorUrl}) 4 28, crosshair;"></div>
 
 <style>
   .map-frame {
@@ -225,15 +258,15 @@
 
   .map-frame :global(svg) {
     display: block;
-    cursor: grab;
+    cursor: inherit;
   }
 
   .map-frame :global(svg:active) {
-    cursor: grabbing;
+    cursor: inherit;
   }
 
   .map-frame :global(svg path) {
-    cursor: pointer;
+    cursor: inherit;
   }
 
   .map-frame :global(.tooltip) {