Add stats panel, reorganise controls, update empty state

- Add trips-per-year chart and continent coverage stats panel (recharts)
- Move date range filter and controls into a unified toolbar
- Extract useDarkMode hook and countryCodeToFlag utility to shared modules
- Add fly-to-home on home label click
- Update visit list empty state copy
- Update screenshots and Playwright snapshots

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jdamcd

e2e/app.spec.ts-snapshots/empty-map-chromium-darwin.png

@@ -22,6 +22,7 @@
     "react-dom": "^19.2.0",
     "react-map-gl": "^8.1.0",
     "react-markdown": "^10.1.0",
+    "recharts": "^3.7.0",
     "uuid": "^13.0.0"
   },
   "devDependencies": {

e2e/app.spec.ts-snapshots/populated-map-chromium-darwin.png

@@ -5,6 +5,8 @@ import { WorldMap } from './components/WorldMap';
 import { VisitList } from './components/VisitList';
 import { CalendarInput } from './components/CalendarInput';
 import { AddVisitForm } from './components/AddVisitForm';
+import { StatsPanel } from './components/StatsPanel';
+import { DateRangeFilter } from './components/DateRangeFilter';
 import { LegalPage } from './components/LegalPage';
 import {
   saveVisits,
@@ -36,10 +38,18 @@ function App() {
   });
   const [showAddForm, setShowAddForm] = useState(false);
   const [showCalendarInput, setShowCalendarInput] = useState(false);
+  const [showStats, setShowStats] = useState(false);
   const [highlightedCountry, setHighlightedCountry] = useState<string>();
   const [homeCountry, setHomeCountry] = useState<string>(() => loadHomeCountry());
+  const [flyHomeCounter, setFlyHomeCounter] = useState(0);
   const [page, setPage] = useState<Page>(() => parseHash(window.location.hash));
 
+  const statsAvailable = dateRange.end.getFullYear() - dateRange.start.getFullYear() >= 2;
+
+  useEffect(() => {
+    if (!statsAvailable) setShowStats(false);
+  }, [statsAvailable]);
+
   // Listen for hash changes
   useEffect(() => {
     const onHashChange = () => setPage(parseHash(window.location.hash));
@@ -180,7 +190,7 @@ function App() {
         <div className="max-w-7xl mx-auto flex items-center justify-between">
           <h1 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white">tripm.app</h1>
           <p className="text-xs md:text-sm text-gray-500 dark:text-gray-400">
-            Extract travel history from your calendar
+            Visualise your travel history
           </p>
         </div>
       </header>
@@ -190,49 +200,64 @@ function App() {
       ) : (
         <main className="flex-1 max-w-7xl mx-auto w-full p-4 space-y-4">
           {/* Controls */}
-          <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
-            <div className="flex flex-wrap items-center justify-between gap-4">
-              <div className="flex flex-wrap gap-2">
-                <button
-                  onClick={() => setShowCalendarInput(!showCalendarInput)}
-                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm"
-                >
-                  {showCalendarInput ? 'Cancel' : 'Import calendar'}
-                </button>
-                <button
-                  onClick={() => setShowAddForm(!showAddForm)}
-                  className="px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 text-sm"
-                >
-                  {showAddForm ? 'Cancel' : 'Add trip manually'}
-                </button>
+          <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+            {/* Row 1: Action buttons */}
+            <div className="flex flex-wrap gap-2 p-4">
+              <button
+                onClick={() => setShowCalendarInput(!showCalendarInput)}
+                className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm"
+              >
+                {showCalendarInput ? 'Cancel' : 'Import calendar'}
+              </button>
+              <button
+                onClick={() => setShowAddForm(!showAddForm)}
+                className="px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 text-sm"
+              >
+                {showAddForm ? 'Cancel' : 'Add trip'}
+              </button>
+              <button
+                onClick={() => setShowStats(!showStats)}
+                disabled={!statsAvailable || visits.length === 0}
+                className="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 text-sm disabled:opacity-40"
+              >
+                {showStats ? 'Hide stats' : 'Stats'}
+              </button>
+              <button
+                onClick={handleExport}
+                disabled={visits.length === 0}
+                className="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 text-sm disabled:opacity-40"
+              >
+                Export
+              </button>
+              <label className="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 text-sm cursor-pointer">
+                Import
+                <input
+                  type="file"
+                  accept=".json"
+                  onChange={handleImportJson}
+                  className="hidden"
+                />
+              </label>
+              {visits.length > 0 && (
                 <button
-                  onClick={handleExport}
-                  disabled={visits.length === 0}
-                  className="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 text-sm disabled:bg-gray-300 dark:disabled:bg-gray-600"
+                  onClick={handleClearAll}
+                  className="px-4 py-2 bg-red-700 text-white rounded-md hover:bg-red-800 text-sm"
                 >
-                  Export
+                  Reset
                 </button>
-                <label className="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 text-sm cursor-pointer">
-                  Import
-                  <input
-                    type="file"
-                    accept=".json"
-                    onChange={handleImportJson}
-                    className="hidden"
-                  />
-                </label>
-                {visits.length > 0 && (
-                  <button
-                    onClick={handleClearAll}
-                    className="px-4 py-2 bg-red-700 text-white rounded-md hover:bg-red-800 text-sm"
-                  >
-                    Reset
-                  </button>
-                )}
-              </div>
+              )}
+            </div>
+
+            {/* Row 2: Period filter, home selector, stats */}
+            <div className="flex flex-wrap items-center justify-between gap-4 border-t border-gray-200 dark:border-gray-700 px-4 py-3">
+              <DateRangeFilter dateRange={dateRange} onChange={setDateRange} />
               <div className="flex items-center gap-4">
                 <div className="flex items-center gap-2">
-                  <label htmlFor="home-country" className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                  <label
+                    htmlFor="home-country"
+                    className={`text-sm text-gray-700 dark:text-gray-300 ${homeCountry ? 'cursor-pointer hover:text-gray-900 dark:hover:text-white' : ''}`}
+                    onClick={() => { if (homeCountry) setFlyHomeCounter((c) => c + 1); }}
+                  >
                     Home
                   </label>
                   <div className="relative">
@@ -287,14 +312,17 @@ function App() {
             />
           )}
 
+          {/* Stats panel */}
+          {showStats && (
+            <StatsPanel visits={filteredVisits} />
+          )}
+
           {/* List and map */}
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:h-[600px]">
             {/* Visit list */}
             <div className="h-[400px] lg:h-auto bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
               <VisitList
                 visits={filteredVisits}
-                dateRange={dateRange}
-                onDateRangeChange={setDateRange}
                 onDeleteVisit={handleDeleteEntry}
                 onDeleteCountry={handleDeleteCountry}
                 onEditEntry={handleEditEntry}
@@ -307,6 +335,7 @@ function App() {
               <WorldMap
                 visits={visitsInDateRange}
                 homeCountry={homeCountry}
+                flyHomeTrigger={flyHomeCounter}
                 onCountryClick={setHighlightedCountry}
               />
             </div>

package-lock.json

@@ -80,8 +80,6 @@ export function DateRangeFilter({ dateRange, onChange }: DateRangeFilterProps) {
   return (
     <div className="flex flex-wrap items-center gap-2">
       <div className="flex items-center gap-2">
-        <span className="w-12 shrink-0 text-sm text-gray-500 dark:text-gray-400">Period</span>
-
         <div className="flex flex-wrap gap-2">
           {presets.map(({ value, label, shortLabel }) => (
             <button
@@ -101,7 +99,7 @@ export function DateRangeFilter({ dateRange, onChange }: DateRangeFilterProps) {
       </div>
 
       {showCustom && (
-        <div className="flex items-center gap-2 ml-14">
+        <div className="flex items-center gap-2">
           <input
             type="date"
             value={format(dateRange.start, 'yyyy-MM-dd')}

package.json

@@ -0,0 +1,142 @@
+import { useMemo } from 'react';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts';
+import type { CountryVisit } from '../types';
+import { tripsPerYear, continentCoverage, type YearTrips } from '../lib/stats';
+import { countryCodeToFlag } from '../lib/format';
+import { useDarkMode } from '../lib/useDarkMode';
+
+interface StatsPanelProps {
+  visits: CountryVisit[];
+}
+
+export function StatsPanel({ visits }: StatsPanelProps) {
+  const isDark = useDarkMode();
+
+  const yearData = useMemo(() => tripsPerYear(visits), [visits]);
+  const continentData = useMemo(() => continentCoverage(visits), [visits]);
+
+  if (visits.length === 0) {
+    return (
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 text-center text-gray-500 dark:text-gray-400">
+        No trip data to show
+      </div>
+    );
+  }
+
+  const axisColor = isDark ? '#9ca3af' : '#6b7280';
+  const gridColor = isDark ? '#374151' : '#e5e7eb';
+  const tooltipBg = isDark ? '#1f2937' : '#ffffff';
+  const tooltipBorder = isDark ? '#374151' : '#e5e7eb';
+  const lineColor = '#3b82f6';
+
+  return (
+    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-2">
+      {/* Trips per year */}
+      {yearData.length > 0 && (
+        <div>
+          <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+            Trips per year
+          </h3>
+          <div className="h-40 [&_.recharts-surface]:outline-none">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={yearData} margin={{ top: 8, right: 8, left: -20 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
+                <XAxis
+                  dataKey="year"
+                  tick={{ fill: axisColor, fontSize: 12 }}
+                  tickLine={{ stroke: axisColor }}
+                  axisLine={{ stroke: gridColor }}
+                />
+                <YAxis
+                  allowDecimals={false}
+                  domain={[0, (max: number) => max]}
+                  tick={{ fill: axisColor, fontSize: 12 }}
+                  tickLine={{ stroke: axisColor }}
+                  axisLine={{ stroke: gridColor }}
+                  tickFormatter={(value: number) => (value === 0 ? '' : String(value))}
+                />
+                <Tooltip
+                  content={({ active, payload }) => {
+                    if (!active || !payload?.length) return null;
+                    const data = payload[0].payload as YearTrips;
+                    return (
+                      <div
+                        style={{
+                          backgroundColor: tooltipBg,
+                          border: `1px solid ${tooltipBorder}`,
+                          borderRadius: '0.375rem',
+                          color: isDark ? '#f3f4f6' : '#111827',
+                          padding: '0.5rem 0.75rem',
+                          fontSize: '0.75rem',
+                        }}
+                      >
+                        <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>
+                          {data.year} — {data.trips} {data.trips === 1 ? 'trip' : 'trips'}
+                        </div>
+                        <div>
+                          {data.countries.map((c) => (
+                            <div key={c.code}>
+                              {c.name}{c.count > 1 ? ` x${c.count}` : ''}
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    );
+                  }}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="trips"
+                  stroke={lineColor}
+                  strokeWidth={2}
+                  dot={{ fill: lineColor, r: 3 }}
+                  activeDot={{ r: 5 }}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      )}
+
+      {/* Continents */}
+      {continentData.length > 0 && (
+        <div>
+          <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+            Continents
+          </h3>
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+            {continentData.map((c) => (
+              <div
+                key={c.continent}
+                className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3"
+              >
+                <div className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                  {c.continent}
+                </div>
+                <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                  {c.visited} {c.visited === 1 ? 'country' : 'countries'}, {c.trips}{' '}
+                  {c.trips === 1 ? 'trip' : 'trips'}
+                </div>
+                <div className="mt-1.5 leading-relaxed">
+                  {c.countryCodes.map((code) => (
+                    <span key={code} title={code} className="text-sm">
+                      {countryCodeToFlag(code)}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}