From 500ad347ee92d233f026cd3bcba1c1e1aa240f52 Mon Sep 17 00:00:00 2001
From: haerikimmm <hari0914@gmail.com>
Date: Mon, 15 Jun 2026 17:15:51 +0900
Subject: [PATCH] changed the collapsible panel to top centered layout with
 consistent ui style

---
 src/App.svelte                      |   1 +
 src/lib/layout/Layout.svelte        |   6 +-
 src/lib/world-map/StatsPanel.svelte | 390 ++++++++++++----------------
 3 files changed, 172 insertions(+), 225 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 0f7cc2f..4baef68 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -38,6 +38,7 @@
     flex-direction: row;
     min-width: 0;
     height: 100%;
+    position: relative;
   }
 
   .map-area {
diff --git a/src/lib/layout/Layout.svelte b/src/lib/layout/Layout.svelte
index ea23cf4..90849fa 100644
--- a/src/lib/layout/Layout.svelte
+++ b/src/lib/layout/Layout.svelte
@@ -1,6 +1,5 @@
 <script>
   import TopBar from './TopBar.svelte';
-  import Footer from './Footer.svelte';
 
   let { screen, onNavigate, hideTopBar = false, children } = $props();
 </script>
@@ -12,7 +11,6 @@
   <main class="main">
     {@render children()}
   </main>
-  <Footer />
 </div>
 
 <style>
@@ -20,11 +18,11 @@
     width: 100vw;
     height: 100vh;
     display: grid;
-    grid-template-rows: auto 1fr auto;
+    grid-template-rows: auto 1fr;
     overflow: hidden;
   }
   .layout.no-topbar {
-    grid-template-rows: 1fr auto;
+    grid-template-rows: 1fr;
   }
 
   .main {
diff --git a/src/lib/world-map/StatsPanel.svelte b/src/lib/world-map/StatsPanel.svelte
index a734312..b8212f8 100644
--- a/src/lib/world-map/StatsPanel.svelte
+++ b/src/lib/world-map/StatsPanel.svelte
@@ -1,16 +1,16 @@
 <script>
   import { CONTINENTS, getContinent, continentTotals } from './continents.js';
-  import { getSelected, getTotalCount } from '../layout/selection.svelte.js';
+  import { getSelected } from '../layout/selection.svelte.js';
 
-  let collapsed = $state(false);
+  let hoveredSeg = $state(null);
 
   const continentColors = {
-    'Europe': '#3b82f6',
-    'Asia': '#ef4444',
-    'Africa': '#f97316',
-    'N. America': '#22c55e',
-    'S. America': '#eab308',
-    'Oceania': '#a855f7'
+    'Europe': '#6366f1',
+    'Asia': '#f43f5e',
+    'Africa': '#fb923c',
+    'N. America': '#06b6d4',
+    'S. America': '#f59e0b',
+    'Oceania': '#8b5cf6'
   };
 
   let counts = $derived.by(() => {
@@ -36,11 +36,9 @@
       if (angle > 0) {
         const startDeg = deg;
         const endDeg = deg + angle;
-        const midDeg = (startDeg + endDeg) / 2;
-        const rad = (midDeg - 90) * Math.PI / 180;
         const sr = (startDeg - 90) * Math.PI / 180;
         const er = (endDeg - 90) * Math.PI / 180;
-        const cx = 90, cy = 90, outerR = 65, innerR = 30;
+        const cx = 50, cy = 50, outerR = 44, innerR = 22;
         const x1 = cx + outerR * Math.cos(sr);
         const y1 = cy + outerR * Math.sin(sr);
         const x2 = cx + outerR * Math.cos(er);
@@ -51,9 +49,7 @@
         const y4 = cy + innerR * Math.sin(sr);
         const largeArc = angle > 180 ? 1 : 0;
         const path = `M ${x1} ${y1} A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2} L ${x3} ${y3} A ${innerR} ${innerR} 0 ${largeArc} 0 ${x4} ${y4} Z`;
-        const lx = cx + 82 * Math.cos(rad);
-        const ly = cy + 82 * Math.sin(rad);
-        segs.push({ cont, color: continentColors[cont], path, lx, ly, angle });
+        segs.push({ cont, color: continentColors[cont], path, angle });
         deg += angle;
       }
     }
@@ -61,247 +57,199 @@
   });
 </script>
 
-<div class="panel" class:collapsed>
-  <button class="collapse-btn" onclick={() => collapsed = !collapsed} data-tip={collapsed ? 'see statistics' : 'close statistics'}>
-    {collapsed ? '◀' : '▶'}
-  </button>
+<div class="card">
+  <!-- count -->
+  <div class="stat-block">
+    <span class="big-num">{total}</span>
+    <span class="stat-sub">countries visited</span>
+  </div>
 
-  {#if !collapsed}
-    <div class="panel-content">
-      <h2 class="headline">your statistics</h2>
+  <div class="vdivider"></div>
 
-      <span class="bar-label">visited countries</span>
-      <div class="total-bar-wrap">
-        <div class="total-bar-bg">
-          <div class="total-bar-fill" style="width: {pct}%"></div>
+  <!-- world % -->
+  <div class="stat-block">
+    <span class="big-num accent">{pct}%</span>
+    <span class="stat-sub">of the world</span>
+  </div>
+
+  <div class="vdivider"></div>
+
+  <!-- donut -->
+  <div class="donut-block">
+    <svg viewBox="0 0 100 100" class="donut-svg">
+      {#if segments.length > 0}
+        {#each segments as seg}
+          <g class="seg-group"
+             onmouseenter={() => hoveredSeg = seg}
+             onmouseleave={() => hoveredSeg = null}>
+            <path d={seg.path} fill={seg.color} />
+          </g>
+        {/each}
+        <circle cx="50" cy="50" r="22" fill="#fff" />
+      {:else}
+        <circle cx="50" cy="50" r="44" fill="#f1f5f9" />
+        <circle cx="50" cy="50" r="22" fill="#fff" />
+      {/if}
+    </svg>
+
+    <div class="donut-info">
+      <span class="section-label">by continent</span>
+      {#if hoveredSeg}
+        <div class="tooltip" style="--dot:{hoveredSeg.color}">
+          <span class="tt-name">{hoveredSeg.cont}</span>
+          <span class="tt-val">{counts[hoveredSeg.cont]} / {continentTotals[hoveredSeg.cont]}</span>
         </div>
-        <span class="total-bar-text">{total} / {grandTotal}</span>
-      </div>
-
-      <div class="divider"></div>
-
-      <span class="bar-label">by continent</span>
-      {#each CONTINENTS as continent}
-        {@const contTotal = continentTotals[continent]}
-        <div class="row">
-          <span class="dot" style="background: {continentColors[continent]}"></span>
-          <span class="label">{continent}</span>
-          <span class="value">{counts[continent]}<span class="total">/{contTotal}</span></span>
-        </div>
-      {/each}
-
-      <div class="donut-wrap">
-        {#if segments.length > 0}
-          <svg viewBox="0 0 180 180" class="donut-svg">
-            {#each segments as seg}
-              <g class="seg-group">
-                <path d={seg.path} fill={seg.color} />
-                <text x={seg.lx} y={seg.ly} text-anchor="middle" dominant-baseline="middle" class="donut-label" style="font-size: {seg.angle < 20 ? 12 : 15}px">{seg.cont}</text>
-              </g>
-            {/each}
-            <circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
-          </svg>
-        {:else}
-          <svg viewBox="0 0 180 180" class="donut-svg">
-            <circle cx="90" cy="90" r="65" fill="var(--border)" />
-            <circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
-          </svg>
-        {/if}
-      </div>
-
-      <div class="divider"></div>
-
-      <div class="disclaimer">Contains all UN countries, Kosovo, Hong Kong and Taiwan</div>
+      {:else}
+        <span class="hint">hover a slice</span>
+      {/if}
     </div>
-  {/if}
+  </div>
+
+  <div class="vdivider"></div>
+
+  <!-- progress bar -->
+  <div class="bar-block">
+      <span class="section-label" style="margin-bottom:6px">world coverage</span>
+    <div class="bar-bg">
+      <div class="bar-fill" style="width:{pct}%"></div>
+    </div>
+    <span class="disclaimer">All UN countries · Kosovo · HK · Taiwan</span>
+  </div>
 </div>
 
 <style>
-  .panel {
-    flex: 0 0 min(360px, 25vw);
-    background: var(--bg-raised);
-    border-left: 1px solid var(--border);
+  .card {
+    position: absolute;
+    top: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #fff;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
+    border: 1px solid rgba(0,0,0,0.06);
     display: flex;
     flex-direction: row;
+    align-items: center;
+    gap: 0;
+    padding: 0 4px;
+    height: 110px;
+    z-index: 10;
     font-family: var(--sans);
-    transition: flex-basis 0.25s ease;
+    white-space: nowrap;
   }
 
-  .panel.collapsed {
-    flex: 0 0 28px;
-    border-left: none;
+  .stat-block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 0 36px;
   }
 
-  .panel-content {
-    flex: 1;
-    padding: 24px 28px;
-    overflow-y: auto;
-    min-width: 0;
-  }
-
-  .collapse-btn {
-    flex: 0 0 auto;
-    align-self: flex-start;
-    background: var(--accent-bg);
-    border: none;
-    border-radius: 0 8px 8px 0;
-    padding: 14px 5px;
-    cursor: pointer;
-    font-size: 16px;
+  .big-num {
+    font-size: 40px;
+    font-weight: 300;
+    letter-spacing: -2px;
+    color: var(--text-h);
     line-height: 1;
-    color: var(--accent);
-    transition: background 0.15s ease, padding 0.15s ease;
-    margin-top: 24px;
-    position: relative;
   }
+  .big-num.accent { color: var(--accent); }
 
-  .collapse-btn:hover {
-    background: var(--lavender-bg);
-    padding-right: 8px;
-  }
-
-  .collapse-btn::after {
-    content: attr(data-tip);
-    position: absolute;
-    right: calc(100% + 8px);
-    top: 50%;
-    transform: translateY(-50%);
-    background: var(--text-h);
-    color: var(--bg-raised);
-    font-family: var(--sans);
+  .stat-sub {
     font-size: 12px;
     font-weight: 300;
-    padding: 6px 12px;
-    border-radius: 6px;
-    white-space: nowrap;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.15s ease;
-  }
-
-  .collapse-btn:hover::after {
-    opacity: 1;
-  }
-
-  .headline {
-    font-family: var(--heading);
-    font-size: var(--text-sm);
-    font-weight: 400;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--accent);
-    margin: 0 0 20px 0;
-  }
-
-  .bar-label {
-    font-family: var(--sans);
-    font-size: var(--text-xs);
-    font-weight: 400;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
     color: var(--text-sub);
-    display: block;
-    margin-bottom: 8px;
+    letter-spacing: 0.03em;
   }
 
-  .total-bar-wrap {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 4px;
-  }
-
-  .total-bar-bg {
-    flex: 1;
-    height: 18px;
-    background: var(--accent-bg);
-    border-radius: 10px;
-    overflow: hidden;
-  }
-
-  .total-bar-fill {
-    height: 100%;
-    background: linear-gradient(90deg, var(--accent-dark), var(--lavender));
-    border-radius: 10px;
-    transition: width 0.3s ease;
-    min-width: 0;
-  }
-
-  .total-bar-text {
-    font-size: var(--text-sm);
-    font-weight: 400;
-    color: var(--text-h);
-    white-space: nowrap;
-  }
-
-  .divider {
-    height: 1px;
+  .vdivider {
+    width: 1px;
+    height: 56px;
     background: var(--border);
-    margin: 16px 0;
-  }
-
-  .row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 0;
-  }
-
-  .dot {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
     flex-shrink: 0;
   }
 
-  .label {
-    flex: 1;
-    font-size: var(--text-sm);
-    font-weight: 300;
-    color: var(--text);
-  }
-
-  .value {
-    font-size: var(--text-sm);
-    font-weight: 400;
-    color: var(--text-h);
-  }
-
-  .total {
-    font-weight: 400;
-    color: var(--text-sub);
-    font-size: var(--text-xs);
-  }
-
-  .donut-wrap {
+  /* donut */
+  .donut-block {
     display: flex;
-    justify-content: center;
-    margin: 20px 0;
+    flex-direction: row;
+    align-items: center;
+    gap: 14px;
+    padding: 0 28px;
   }
-
   .donut-svg {
-    width: 160px;
-    height: 160px;
-    filter: drop-shadow(0 2px 8px rgba(99,102,241,0.15));
+    width: 72px;
+    height: 72px;
+    flex-shrink: 0;
+  }
+  .seg-group { cursor: pointer; }
+  .seg-group:hover path { opacity: 0.8; }
+
+  .donut-info {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 130px;
   }
 
-  .donut-label {
-    fill: var(--text-h);
-    font-family: var(--sans);
-    font-weight: 300;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.15s ease;
+  .tooltip {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    font-size: 13px;
   }
-
-  .seg-group:hover .donut-label {
-    opacity: 1;
+  .tooltip::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--dot);
+    flex-shrink: 0;
   }
+  .tt-name { font-weight: 400; color: var(--text-h); }
+  .tt-val  { font-weight: 300; color: var(--text-sub); }
 
-  .disclaimer {
-    font-size: var(--text-xs);
+  .section-label {
+    font-size: 10px;
+    font-weight: 500;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
     color: var(--text-sub);
-    line-height: 1.5;
-    text-align: center;
+  }
+
+  .hint {
+    font-size: 12px;
+    color: var(--text-sub);
+    opacity: 0.45;
+  }
+
+  /* bar */
+  .bar-block {
+    display: flex;
+    flex-direction: column;
+    padding: 0 28px;
+    gap: 0;
+    min-width: 160px;
+  }
+  .bar-bg {
+    width: 100%;
+    height: 5px;
+    background: var(--bg-subtle);
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 10px;
+  }
+  .bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--accent), #a78bfa);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+    min-width: 0;
+  }
+  .disclaimer {
+    font-size: 11px;
+    color: var(--text-sub);
+    opacity: 0.5;
+    letter-spacing: 0.02em;
   }
 </style>