Expand Settings with Display and About sections and a reduce-motion override for the leaf scene

1 files changed, 57 insertions, 0 deletions

diff --git a/lib/screens/SettingsScreen.svelte b/lib/screens/SettingsScreen.svelte
index 3d502f1..434b9c9 100644
--- a/lib/screens/SettingsScreen.svelte
+++ b/lib/screens/SettingsScreen.svelte
@@ -2,6 +2,8 @@
   import Slider from '@hollowdark/lib/components/Slider.svelte'
   import ToggleSwitch from '@hollowdark/lib/components/ToggleSwitch.svelte'
   import { ambientVolume, masterMuted } from '@hollowdark/lib/audio/state'
+  import { reduceMotion } from '@hollowdark/lib/display/state'
+  import { APP_VERSION_FULL } from '@hollowdark/lib/version/version'
 
   interface Props {
     onBack: () => void
@@ -18,6 +20,10 @@
   function setVolume(next: number): void {
     ambientVolume.set(next)
   }
+
+  function setReduceMotion(next: boolean): void {
+    reduceMotion.set(next)
+  }
 </script>
 
 <section class="settings">
@@ -56,6 +62,35 @@
         </div>
       </div>
     </section>
+
+    <section class="group">
+      <h2 class="group-label">Display</h2>
+
+      <div class="row">
+        <div class="row-label">
+          <p class="row-name">Reduce motion</p>
+          <p class="row-hint">
+            Hide the falling leaves and trim long transitions. Overrides
+            the system preference.
+          </p>
+        </div>
+        <ToggleSwitch
+          value={$reduceMotion}
+          label="Reduce motion"
+          onChange={setReduceMotion}
+        />
+      </div>
+    </section>
+
+    <section class="group">
+      <h2 class="group-label">About</h2>
+
+      <div class="about">
+        <p class="about-title">Hollowdark</p>
+        <p class="about-line">Version {APP_VERSION_FULL}</p>
+        <p class="about-line">A literary life simulation.</p>
+      </div>
+    </section>
   </div>
 </section>
 
@@ -163,4 +198,26 @@
     min-width: 3.5ch;
     text-align: right;
   }
+
+  .about {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    padding: var(--space-3) 0;
+  }
+
+  .about-title {
+    font-family: var(--font-body);
+    font-size: var(--text-md);
+    font-style: italic;
+    color: var(--color-text);
+    margin: 0;
+  }
+
+  .about-line {
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    color: var(--color-text-tertiary);
+    margin: 0;
+  }
 </style>