add user accounts and OSM peak catalog with zoom-based notability

src/routes/+page.svelte

@@ -48,12 +48,15 @@
 			<div class="card peak-progress">
 				<div class="meter-nums">
 					<span class="big">{data.peaksClimbed}</span>
-					<span class="of">of {data.peaksTotal} peaks climbed</span>
+					<span class="of">peak{data.peaksClimbed === 1 ? '' : 's'} climbed</span>
 				</div>
-				<div class="meter" role="meter" aria-valuemin="0" aria-valuemax={data.peaksTotal} aria-valuenow={data.peaksClimbed} aria-label="Peaks climbed">
-					<div class="fill" style:width="{(data.peaksClimbed / data.peaksTotal) * 100}%"></div>
-				</div>
-				<a class="btn ghost" href="/peaks">Open the checklist</a>
+				{#if data.highestAscent}
+					<p class="highest">
+						Highest so far: <strong>{data.highestAscent.name}</strong>
+						({Math.round(data.highestAscent.elevation_m ?? 0).toLocaleString('en-US')} m)
+					</p>
+				{/if}
+				<a class="btn ghost" href="/peaks">Open the peak map</a>
 			</div>
 		</section>
 	</div>
@@ -115,16 +118,9 @@
 		font-size: 0.9rem;
 		margin-left: 0.4rem;
 	}
-	.meter {
-		width: 100%;
-		height: 8px;
-		border-radius: 999px;
-		background: var(--accent-track);
-	}
-	.fill {
-		height: 100%;
-		border-radius: 999px;
-		background: var(--accent);
-		min-width: 2px;
+	.highest {
+		margin: 0;
+		font-size: 0.88rem;
+		color: var(--text-secondary);
 	}
 </style>