From e662c6ba6b664cc7a930a391db59ab9a3d16c38c Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Fri, 12 Jan 2024 08:18:14 -0800
Subject: feat(layout): disable animations setting

---
 src/lib/Settings/Categories/Display.svelte |  4 ++++
 src/routes/+layout.svelte                  | 28 ++++++++++++++++------------
 src/stores/settings.ts                     |  2 ++
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index 4dbe356d..952a1123 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -65,6 +65,10 @@
 />
 <SettingCheckboxToggle setting="displayMangaCollapsed" text="Collapse manga panel by default" />
 <SettingCheckboxToggle setting="displayLimitListHeight" text="Limit panel area to screen height" />
+<SettingCheckboxToggle
+	setting="displayDisableAnimations"
+	text="Disable page transition animations"
+/>
 <SettingCheckboxToggle
 	setting="displayHoverCover"
 	text="Show media cover when hovering on supported media titles"
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 52d1b8ba..91d22613 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -102,18 +102,22 @@
 	<p />
 
 	<Notifications item={Notification} zIndex={5000}>
-		{#key data.url}
-			<div
-				in:fly={{
-					x: way,
-					duration: animationDelay,
-					delay: animationDelay
-				}}
-				out:fly={{ x: -way, duration: animationDelay }}
-			>
-				<slot />
-			</div>
-		{/key}
+		{#if $settings.displayDisableAnimations}
+			<slot />
+		{:else}
+			{#key data.url}
+				<div
+					in:fly={{
+						x: way,
+						duration: animationDelay,
+						delay: animationDelay
+					}}
+					out:fly={{ x: -way, duration: animationDelay }}
+				>
+					<slot />
+				</div>
+			{/key}
+		{/if}
 	</Notifications>
 </div>
 
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 06b8a13f..ce41b9d9 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -30,6 +30,7 @@ export interface Settings {
 	displayCountdownRightAligned: boolean;
 	displayNativeCountdown: boolean;
 	displayHoverCover: boolean;
+	displayDisableAnimations: boolean;
 }
 
 const defaultSettings: Settings = {
@@ -56,6 +57,7 @@ const defaultSettings: Settings = {
 	displayCountdownRightAligned: false,
 	displayNativeCountdown: false,
 	displayHoverCover: false,
+	displayDisableAnimations: false,
 
 	// Calculation
 	calculateChaptersRoundedDown: true,
-- 
cgit v1.2.3