From 4ab3c2ca6d73e816199124c6407e4c148dfccad7 Mon Sep 17 00:00:00 2001
From: Ilia <istudyatuni@gmail.com>
Date: Sun, 15 Oct 2023 14:37:51 +0300
Subject: [PATCH] feat: add button with map link to current city

---
 src/components/Main.svelte                    | 24 ++++++++++++++++++-
 src/components/atoms/Tooltip.svelte           |  2 +-
 .../highlights/BaseHighlight.svelte           |  5 ++--
 src/components/highlights/UVIndex.svelte      |  1 +
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/Main.svelte b/src/components/Main.svelte
index 5376357..ac3d42d 100644
--- a/src/components/Main.svelte
+++ b/src/components/Main.svelte
@@ -1,5 +1,6 @@
 <script context="module">
 	import GithubIcon from '~icons/tabler/brand-github'
+	import MapIcon from '~icons/tabler/map'
 	import SettingsIcon from '~icons/tabler/settings'
 
 	import { settings } from 'src/stores'
@@ -12,11 +13,23 @@
 	// <a href="/" /> will open <Route path="/settings" />
 	// and vice versa
 	let settingsNotOpened = true
+
+	$: mapLinkParams = new URLSearchParams({
+		mlat: $settings.current_city.lat,
+		mlon: $settings.current_city.lon,
+	})
 </script>
 
 <div class="grid-item">
 	<div class="inline">
-		<h4 class="city">{$settings.current_city.name}</h4>
+		<div class="city">
+			<h4 class="city-name">{$settings.current_city.name}</h4>
+			<a
+				class="map"
+				href="http://www.openstreetmap.org/?{mapLinkParams.toString()}">
+				<MapIcon />
+			</a>
+		</div>
 
 		<div class="inline">
 			<a
@@ -45,8 +58,17 @@
 		background-color: var(--second-bg-color);
 	}
 	.city {
+		display: flex;
+		align-items: stretch;
+	}
+	.city-name {
 		margin-top: 0;
 	}
+	.map {
+		margin-left: 8px;
+		color: var(--second-fg-color);
+		cursor: pointer;
+	}
 	.inline {
 		display: flex;
 		justify-content: space-between;
diff --git a/src/components/atoms/Tooltip.svelte b/src/components/atoms/Tooltip.svelte
index e203496..bff0c63 100644
--- a/src/components/atoms/Tooltip.svelte
+++ b/src/components/atoms/Tooltip.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div class="tooltip">
-	<slot name="under" />
+	<slot />
 	<div class="text">{text}</div>
 </div>
 
diff --git a/src/components/highlights/BaseHighlight.svelte b/src/components/highlights/BaseHighlight.svelte
index 5e0adfa..7e77af9 100644
--- a/src/components/highlights/BaseHighlight.svelte
+++ b/src/components/highlights/BaseHighlight.svelte
@@ -5,7 +5,8 @@
 </script>
 
 <script>
-	export let title, help
+	export let title,
+		help = null
 </script>
 
 <div class="wrapper">
@@ -14,7 +15,7 @@
 		{#if help}
 			<span class="help">
 				<Tooltip text={help}>
-					<Question slot="under" width="20" height="20" />
+					<Question width="20" height="20" />
 				</Tooltip>
 			</span>
 		{/if}
diff --git a/src/components/highlights/UVIndex.svelte b/src/components/highlights/UVIndex.svelte
index e81fba5..af8fbc2 100644
--- a/src/components/highlights/UVIndex.svelte
+++ b/src/components/highlights/UVIndex.svelte
@@ -60,6 +60,7 @@
 		// (7.7, 15 + 2/5, 23.1, 30 + 4/5, 38 + 1/2, 46 + 1/5, 53.9, 61 + 3/5, 69.3, 77, 84.7, 92 + 2/5)
 		//
 		// colors from: https://www.sciencedirect.com/science/article/pii/S2666469023000210, Appendix C
+		// prettier-ignore
 		background: linear-gradient(
 			90deg,
 			#658d1b 0%, // duplicate for start