feat: font size preference

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')">

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>

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>