From 823058e335db9bd7492d8c396f5570f78831c0df Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Tue, 13 May 2025 14:31:34 -0700
Subject: [PATCH] Add setting for font size

---
 src/app/components/ReactionSummary.svelte |  2 +-
 src/app/state.ts                          |  2 ++
 src/lib/components/Field.svelte           | 20 ++++++++++++++------
 src/routes/+layout.svelte                 | 14 +++++++++++++-
 src/routes/settings/+page.svelte          | 18 ++++++++++++++++++
 5 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/src/app/components/ReactionSummary.svelte b/src/app/components/ReactionSummary.svelte
index b1381ba..14fac6e 100644
--- a/src/app/components/ReactionSummary.svelte
+++ b/src/app/components/ReactionSummary.svelte
@@ -105,7 +105,7 @@
     {#if url && $reports.length > 0}
       <button
         type="button"
-        data-tip="{`This content has been reported as "${displayList(reportReasons)}".`}}"
+        data-tip={`This content has been reported as "${displayList(reportReasons)}".`}
         class="btn btn-error btn-xs tooltip-right flex items-center gap-1 rounded-full"
         class:tooltip={!noTooltip && !isMobile}
         onclick={stopPropagation(preventDefault(onReportClick))}>
diff --git a/src/app/state.ts b/src/app/state.ts
index e2d3859..7332fea 100644
--- a/src/app/state.ts
+++ b/src/app/state.ts
@@ -296,6 +296,7 @@ export type Settings = {
     report_usage: boolean
     report_errors: boolean
     send_delay: number
+    font_size: number
   }
 }
 
@@ -305,6 +306,7 @@ export const defaultSettings = {
   report_usage: true,
   report_errors: true,
   send_delay: 3000,
+  font_size: 1,
 }
 
 export const settings = deriveEventsMapped<Settings>(repository, {
diff --git a/src/lib/components/Field.svelte b/src/lib/components/Field.svelte
index 4f81e57..a2f31f1 100644
--- a/src/lib/components/Field.svelte
+++ b/src/lib/components/Field.svelte
@@ -3,20 +3,28 @@
 
   interface Props {
     label?: Snippet
+    secondary?: Snippet
     input?: Snippet
     info?: Snippet
     [key: string]: any
   }
 
-  const {label, input, info, ...props}: Props = $props()
+  const {label, secondary, input, info, ...props}: Props = $props()
 </script>
 
 <div class="flex flex-col gap-2 {props.class}">
-  {#if label}
-    <label class="flex items-center gap-2 font-bold">
-      {@render label()}
-    </label>
-  {/if}
+  <div class="flex items-center justify-between">
+    {#if label}
+      <label class="flex items-center gap-2 font-bold">
+        {@render label()}
+      </label>
+    {/if}
+    {#if secondary}
+      <label class="flex items-center gap-2">
+        {@render secondary()}
+      </label>
+    {/if}
+  </div>
   {@render input?.()}
   {#if info}
     <p class="text-sm">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b3a851b..652ac39 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -51,7 +51,13 @@
   import {setupTracking} from "@app/tracking"
   import {setupAnalytics} from "@app/analytics"
   import {nsecDecode} from "@lib/util"
-  import {INDEXER_RELAYS, userMembership, ensureUnwrapped, canDecrypt} from "@app/state"
+  import {
+    INDEXER_RELAYS,
+    userMembership,
+    userSettingValues,
+    ensureUnwrapped,
+    canDecrypt,
+  } from "@app/state"
   import {loadUserData, listenForNotifications} from "@app/requests"
   import {theme} from "@app/theme"
   import * as commands from "@app/commands"
@@ -126,6 +132,12 @@
       document.body.setAttribute("data-theme", $theme)
     })
 
+    // Sync font size
+    userSettingValues.subscribe($userSettingValues => {
+      // @ts-ignore
+      document.documentElement.style["font-size"] = `${$userSettingValues.font_size}rem`
+    })
+
     if (!db) {
       setupTracking()
       setupAnalytics()
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index d0038f2..5b81af2 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -166,6 +166,24 @@
         <p>Choose a media server type and url for files you upload to {PLATFORM_NAME}.</p>
       {/snippet}
     </Field>
+    <strong class="text-lg">Accessibility</strong>
+    <Field>
+      {#snippet label()}
+        <p>Font size</p>
+      {/snippet}
+      {#snippet secondary()}
+        <p>{Math.round(settings.font_size * 100)}%</p>
+      {/snippet}
+      {#snippet input()}
+        <input
+          class="range range-primary"
+          type="range"
+          min="0.8"
+          max="1.3"
+          step="0.05"
+          bind:value={settings.font_size} />
+      {/snippet}
+    </Field>
     <div class="mt-4 flex flex-row items-center justify-between gap-4">
       <Button class="btn btn-neutral" onclick={reset}>Discard Changes</Button>
       <Button type="submit" class="btn btn-primary">Save Changes</Button>