Update the intro to the new version

- Force a reinstall in standalone mode
Dlurak · Jul 22, 2024 · 8f3f95c · 8f3f95c
1 parent 211fb49
commit 8f3f95c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 14 deletions.
diff --git a/src/lib/components/layout/Version.svelte b/src/lib/components/layout/Version.svelte
@@ -1,35 +1,36 @@
 <script lang="ts">
 	import { svocal } from '$lib/utils/store/svocal';
-	import { clickOutside } from 'nutzlich';
+	import { clickOutside, mediaQuery } from 'nutzlich';
 	import { browser } from '$app/environment';
 	import { enableScrolling } from '$lib/utils/dom/scroll';
-	import { ArrowDown, Icon, RocketLaunch } from 'svelte-hero-icons';
+	import { ArrowDown, Icon, RocketLaunch, ExclamationCircle } from 'svelte-hero-icons';
 	import { gradientText } from '$lib/utils/actions/gradientText';
 	import SettingsButton from '../buttons/SettingsButton.svelte';
 	import Store from '../utils/Store.svelte';
 	import { i } from '$lib/i18n/store';
 
+	export let isApple = false;
 	let showUpdateIntro = false;
 	let secondEle: HTMLDivElement | undefined = undefined;
 
+	const isStandalone = mediaQuery('(display-mode: standalone)');
+
 	const reset = () => {
+		if ($isStandalone) return;
 		showUpdateIntro = false;
 		enableScrolling(true);
+		window.localStorage.clear();
 	};
 
 	const version = svocal('dlool-version');
-
 	const textStore = i('into.text');
 
 	$: {
 		if ($version === '1') showUpdateIntro = true;
 	}
 
 	$: {
-		if ($version === '1' && browser) {
-			enableScrolling(false);
-			version.set('2');
-		}
+		if ($version === '1' && browser) enableScrolling(false);
 	}
 </script>
 
@@ -66,7 +67,7 @@
 				<p>{@html $textStore}</p>
 
 				<button
-					class="absolute bottom-4 right-4 animate-bounce rounded-full bg-zinc-300 p-2 shadow-lg"
+					class="absolute bottom-4 right-4 animate-bounce rounded-full bg-zinc-300 p-2 shadow-lg dark:bg-zinc-700"
 					on:click={() => {
 						if (!secondEle) return;
 
@@ -88,11 +89,26 @@
 					{/each}
 				</ul>
 
-				<div class="flex">
-					<SettingsButton icon={RocketLaunch} on:click={reset}>
-						<Store store={i('intro.start')} />
-					</SettingsButton>
-				</div>
+				{#if $isStandalone}
+					<div
+						class="flex items-center gap-1 rounded border-2 border-red-500 bg-red-400 bg-opacity-30 px-3"
+					>
+						<Icon src={ExclamationCircle} class="h-6 w-6 flex-shrink-0" />
+						<span>
+							{#if isApple}
+								<Store store={i('intro.reinstall.apple')} />
+							{:else}
+								<Store store={i('intro.reinstall')} />
+							{/if}
+						</span>
+					</div>
+				{:else}
+					<div class="flex">
+						<SettingsButton icon={RocketLaunch} on:click={reset}>
+							<Store store={i('intro.start')} />
+						</SettingsButton>
+					</div>
+				{/if}
 			</div>
 		</div>
 	</div>

diff --git a/src/lib/locales/de.ts b/src/lib/locales/de.ts
@@ -630,6 +630,8 @@ Deine bisherigen Einstellungen sind leider nicht mit der neuen Version kompatibe
 		}
 	},
 	'intro.start': "Los geht's!",
+	'intro.reinstall': "Installiere Dlool neu, um es nutzen zu können.",
+	'intro.reinstall.apple': "Füge Dlool erneut auf deinen Homebildschirm hinzu um es nutzen zu können.",
 
 	'tags.choose': 'Wähle Tags aus',
 	'tags.choose.choose': 'Wähle Tags aus',

diff --git a/src/lib/locales/en.ts b/src/lib/locales/en.ts
@@ -617,6 +617,8 @@ Your current settings sadly won't be compatible withthe new version. But you can
 		}
 	},
 	'intro.start': "Let's go!",
+	'intro.reinstall': "Reinstall Dlool to use it.",
+	'intro.reinstall.apple': "Readd Dlool to your homescreen to use it.",
 
 	'tags.choose': 'Choose a tag',
 	'tags.choose.choose': 'Choose tags',

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -42,7 +42,7 @@
 	<ToastContainer />
 	<Confirmation />
 	<Launcher />
-	<Version />
+	<Version isApple={data.isApple} />
 	<Style />
 	<KeyboardHelper isApple={data.isApple} />
 </div>