From 89c9e01b43b9ec63e5fa13c8767ddcc268a0738d Mon Sep 17 00:00:00 2001
From: Jannik <jannik@picoscratch.de>
Date: Sat, 30 Aug 2025 16:36:07 +0200
Subject: [PATCH] feat: add download app card on web

---
 messages/de.json                              |  7 +++++
 messages/en.json                              |  7 +++++
 .../components/lnv/sidebar/MainSidebar.svelte | 26 ++++++++++++++++++-
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/messages/de.json b/messages/de.json
index 0001373..ec795e4 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -129,6 +129,13 @@
 			"skip": "Onboarding überspringen",
 			"choose-lang": "Wählen Sie Ihre Sprache",
 			"first-vehicle": "Erstellen wir Ihr erstes Fahrzeug."
+		},
+		"main": {
+			"download-app": {
+				"title": "App herunterladen!",
+				"description": "TrafficCue ist auf Android verfügbar. Holen Sie es sich für das beste Erlebnis!",
+				"button": "Runterladen"
+			}
 		}
 	},
 	"location-selector": {
diff --git a/messages/en.json b/messages/en.json
index b44fbed..003c904 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -130,6 +130,13 @@
 			"skip": "Skip Onboarding",
 			"choose-lang": "Choose your language",
 			"first-vehicle": "Let's create your first vehicle."
+		},
+		"main": {
+			"download-app": {
+				"title": "Download the app!",
+				"description": "TrafficCue is available on Android. Get it for the best experience!",
+				"button": "Get it"
+			}
 		}
 	},
 	"unsave": "Unsave",
diff --git a/src/lib/components/lnv/sidebar/MainSidebar.svelte b/src/lib/components/lnv/sidebar/MainSidebar.svelte
index b31ab62..70b6f06 100644
--- a/src/lib/components/lnv/sidebar/MainSidebar.svelte
+++ b/src/lib/components/lnv/sidebar/MainSidebar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BriefcaseIcon, HomeIcon, SchoolIcon } from "@lucide/svelte";
+	import { BriefcaseIcon, DownloadIcon, HomeIcon, SchoolIcon } from "@lucide/svelte";
 	import { Button } from "../../ui/button";
 	import { fly } from "svelte/transition";
 	import { circInOut } from "svelte/easing";
@@ -11,6 +11,7 @@
 	import { m } from "$lang/messages";
 	import { getSaved } from "$lib/services/lnv";
 	import { view } from "../view.svelte";
+	import * as Card from "$lib/components/ui/card";
 </script>
 
 <div
@@ -98,6 +99,29 @@
 
 <VehicleSelector />
 
+{#if !window.__TAURI__}
+	<Card.Root style="margin-top: 1rem;">
+		<Card.Header>
+			<Card.Title>{m["sidebar.main.download-app.title"]()}</Card.Title>
+		</Card.Header>
+		<Card.Content>
+			{m["sidebar.main.download-app.description"]()}
+		</Card.Content>
+		<Card.Footer>
+			<a
+				href="/trafficcue.apk"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<Button>
+					<DownloadIcon />
+					{m["sidebar.main.download-app.button"]()}
+				</Button>
+			</a>
+		</Card.Footer>
+	</Card.Root>
+{/if}
+
 <RequiresCapability capability="saved-routes">
 	{#await getSaved() then saved}
 		{#if saved.length != 0}