From 41ef1873798ec4096a475760c42fc480cfc10ad9 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Fri, 23 Dec 2022 23:47:13 +0100
Subject: [PATCH] feat: font size preference

---
 app.vue                           |  1 +
 components/nav/NavFooter.vue      |  7 +++++++
 components/nav/SelectFontSize.vue | 21 +++++++++++++++++++++
 components/status/StatusCard.vue  |  2 +-
 composables/fontSize.ts           | 21 +++++++++++++++++++++
 composables/setups.ts             |  7 +++++++
 constants/index.ts                |  1 +
 styles/global.css                 |  4 ++++
 styles/vars.css                   |  2 ++
 9 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 components/nav/SelectFontSize.vue
 create mode 100644 composables/fontSize.ts

diff --git a/app.vue b/app.vue
index 3f261dcb..e0ffddf9 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 setupI18n()
+setupFontSize()
 setupPageHeader()
 provideGlobalCommands()
 
diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index fe59734d..a35e516e 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -30,6 +30,13 @@ const buildTimeAgo = useTimeAgo(buildTime, timeAgoOptions)
           </button>
         </CommonTooltip>
       </NavSelectLanguage>
+      <NavSelectFontSize>
+        <CommonTooltip :content="$t('nav_footer.select_font_size')">
+          <button flex :aria-label="$t('nav_footer.select_font_size')">
+            <div i-ri:font-size text-lg />
+          </button>
+        </CommonTooltip>
+      </NavSelectFontSize>
       <NavSelectFeatureFlags v-if="isMastoInitialised && currentUser">
         <CommonTooltip :content="$t('nav_footer.select_feature_flags')">
           <button flex :aria-label="$t('nav_footer.select_feature_flags')">
diff --git a/components/nav/SelectFontSize.vue b/components/nav/SelectFontSize.vue
new file mode 100644
index 00000000..f26509b6
--- /dev/null
+++ b/components/nav/SelectFontSize.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { FontSize } from 'composables/fontSize'
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
+</script>
+
+<template>
+  <CommonDropdown>
+    <slot />
+
+    <template #popper>
+      <CommonDropdownItem
+        v-for="size in sizes"
+        :key="size"
+        :checked="size === fontSize"
+        @click="setFontSize(size as FontSize)"
+      >
+        {{ size }}
+      </CommonDropdownItem>
+    </template>
+  </CommonDropdown>
+</template>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index cfd399d2..5d6320c9 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -81,7 +81,7 @@ const isDM = $computed(() => status.visibility === 'direct')
             <AccountAvatar w-12 h-12 :account="status.account" />
           </NuxtLink>
         </AccountHoverWrapper>
-        <div v-if="showRebloggedByAvatarOnAvatar" absolute class="-top-2 -left-2" w-9 h-9 border-bg-base border-3 rounded-full>
+        <div v-if="showRebloggedByAvatarOnAvatar" absolute class="-top-1 -left-2" w-9 h-9 border-bg-base border-3 rounded-full>
           <AccountAvatar :account="rebloggedBy" />
         </div>
       </div>
diff --git a/composables/fontSize.ts b/composables/fontSize.ts
new file mode 100644
index 00000000..dc9a0df3
--- /dev/null
+++ b/composables/fontSize.ts
@@ -0,0 +1,21 @@
+import { STORAGE_KEY_FONT_SIZE } from '~/constants'
+
+export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export const fontSize = useLocalStorage<FontSize>(STORAGE_KEY_FONT_SIZE, 'md')
+
+export function setFontSize(size: FontSize) {
+  fontSize.value = size
+}
+
+export const fontSizeMap = {
+  xs: '13px',
+  sm: '14px',
+  md: '15px',
+  lg: '16px',
+  xl: '17px',
+}
+
+export function setFontSizeCSSVar() {
+  document.documentElement.style.setProperty('--font-size', fontSizeMap[fontSize.value])
+}
diff --git a/composables/setups.ts b/composables/setups.ts
index 4c2a9304..b524eae7 100644
--- a/composables/setups.ts
+++ b/composables/setups.ts
@@ -66,3 +66,10 @@ export async function setupI18n() {
     })
   })
 }
+
+export async function setupFontSize() {
+  if (!process.server) {
+    setFontSizeCSSVar()
+    watch(fontSize, setFontSizeCSSVar)
+  }
+}
diff --git a/constants/index.ts b/constants/index.ts
index 9b9e225c..51ca5239 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -11,6 +11,7 @@ export const STORAGE_KEY_NOTIFY_TAB = 'elk-notify-tab'
 export const STORAGE_KEY_FIRST_VISIT = 'elk-first-visit'
 export const STORAGE_KEY_ZEN_MODE = 'elk-zenmode'
 export const STORAGE_KEY_LANG = 'elk-lang'
+export const STORAGE_KEY_FONT_SIZE = 'elk-font-size'
 export const STORAGE_KEY_FEATURE_FLAGS = 'elk-feature-flags'
 export const STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS = 'elk-hide-explore-posts-tips'
 export const STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS = 'elk-hide-explore-news-tips'
diff --git a/styles/global.css b/styles/global.css
index fba73d15..6f9e34d2 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,3 +1,7 @@
+html {
+  font-size: var(--font-size);
+}
+
 @font-face {
   font-display: swap;
   font-family: "DM Mono";
diff --git a/styles/vars.css b/styles/vars.css
index 2fbbd9ab..cf69b850 100644
--- a/styles/vars.css
+++ b/styles/vars.css
@@ -1,4 +1,6 @@
 :root {
+  --font-size: 15px;
+  
   --c-primary: #EA9E44;
   --c-primary-active: #C16929;
   --c-primary-light: #EA9E4466;