feat: add new setting to select line height options

Author: shuuji3

components/settings/SettingsLineHeight.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { LineHeight } from '~/composables/settings'
+
+const userSettings = useUserSettings()
+
+const sizes = [
+  {
+    icon: 'i-ri-collapse-vertical-line',
+    label: 'settings.interface.narrow',
+    size: 'narrow',
+  },
+  {
+    icon: 'i-ri-line-height',
+    label: 'settings.interface.normal',
+    size: 'normal',
+  },
+  {
+    icon: 'i-ri-expand-vertical-line',
+    label: 'settings.interface.wide',
+    size: 'wide',
+  },
+] as const
+
+const currentSize = computed(() => userSettings.value.lineHeight || sizes[1])
+
+function setLineHeight(size: LineHeight) {
+  userSettings.value.lineHeight = size
+}
+</script>
+
+<template>
+  <section space-y-2>
+    <h2 id="interface-lh" font-medium>
+      {{ $t('settings.interface.line_height') }}
+    </h2>
+    <p id="interface-lh-desc" pb-2>
+      {{ $t('settings.interface.reload_app') }}
+    </p>
+    <div flex="~ gap4 wrap" p2 role="group" aria-labelledby="interface-lh" aria-describedby="interface-lh-desc">
+      <button
+        v-for="{ icon, label, size } in sizes"
+        :key="size"
+        type="button"
+        btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
+        :aria-pressed="currentSize === size ? 'true' : 'false'"
+        :class="currentSize === size ? 'pointer-events-none' : 'filter-saturate-0'"
+        @click="setLineHeight(size)"
+      >
+        <span :class="`${icon}`" />
+        {{ $t(label) }}
+      </button>
+    </div>
+  </section>
+</template>

components/status/StatusBody.vue

@@ -26,21 +26,25 @@ const vnode = computed(() => {
     inReplyToStatus: newer,
   })
 })
+
+const userSettings = useUserSettings()
+const lineHeight = userSettings.value.lineHeight
 </script>
 
 <template>
   <div class="status-body" whitespace-pre-wrap break-words :class="{ 'with-action': withAction }" relative>
     <span
       v-if="status.content"
-      class="content-rich line-compact" dir="auto"
+      class="content-rich" :class="[`line-height-${lineHeight}`]"
+      dir="auto"
       :lang="('language' in status && status.language) || undefined"
     >
       <component :is="vnode" v-if="vnode" />
     </span>
     <div v-else />
     <template v-if="translation.visible">
       <div my2 h-px border="b base" bg-base />
-      <ContentRich v-if="translation.success" class="line-compact" :content="translation.text" :emojis="status.emojis" />
+      <ContentRich v-if="translation.success" class="content-rich" :class="[`line-height-${lineHeight}`]" :content="translation.text" :emojis="status.emojis" />
       <div v-else text-red-4>
         Error: {{ translation.error }}
       </div>

components/status/StatusPreviewStackBlitz.vue

@@ -47,6 +47,9 @@ const vnodeCode = computed(() => {
   })
   return vnode
 })
+
+const userSettings = useUserSettings()
+const lineHeight = userSettings.value.lineHeight
 </script>
 
 <template>
@@ -60,7 +63,7 @@ const vnodeCode = computed(() => {
     pb-2
   >
     <div whitespace-pre-wrap break-words>
-      <span v-if="vnodeCode" class="content-rich line-compact" dir="auto">
+      <span v-if="vnodeCode" class="content-rich" :class="[`line-height-${lineHeight}`]" dir="auto">
         <component :is="vnodeCode" />
       </span>
     </div>

composables/settings/definition.ts

@@ -1,7 +1,9 @@
-import { DEFAULT_FONT_SIZE } from '~/constants'
+import { DEFAULT_FONT_SIZE, DEFAULT_LINE_HEIGHT } from '~/constants'
 
 export type FontSize = `${number}px`
 
+export type LineHeight = 'narrow' | 'normal' | 'wide'
+
 // Temporary type for backward compatibility
 export type OldFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 
@@ -38,6 +40,7 @@ export interface UserSettings {
   preferences: Partial<PreferencesSettings>
   colorMode?: ColorMode
   fontSize: FontSize
+  lineHeight: LineHeight
   language: string
   disabledTranslationLanguages: string[]
   themeColors?: ThemeColors
@@ -94,6 +97,7 @@ export function getDefaultUserSettings(locales: string[]): UserSettings {
   return {
     language: getDefaultLanguage(locales),
     fontSize: DEFAULT_FONT_SIZE,
+    lineHeight: DEFAULT_LINE_HEIGHT,
     disabledTranslationLanguages: [],
     preferences: DEFAULT__PREFERENCES_SETTINGS,
   }

constants/index.ts

@@ -4,6 +4,7 @@ export const APP_NAME = 'Elk'
 
 export const DEFAULT_POST_CHARS_LIMIT = 500
 export const DEFAULT_FONT_SIZE = '15px'
+export const DEFAULT_LINE_HEIGHT = 'normal'
 
 export const ELK_PAGE_LIFECYCLE_FROZEN = 'elk-frozen'
 

locales/en.json

@@ -462,8 +462,13 @@
       "font_size": "Font Size",
       "label": "Interface",
       "light_mode": "Light",
+      "line_height": "Line Height",
+      "narrow": "Narrow",
+      "normal": "Normal",
+      "reload_app": "Reload the app for the changes to take effect.",
       "system_mode": "System",
-      "theme_color": "Theme Color"
+      "theme_color": "Theme Color",
+      "wide": "Wide"
     },
     "language": {
       "display_language": "Display Language",

pages/settings/interface/index.vue

@@ -15,6 +15,7 @@ useHydratedHead({
     </template>
     <div px-6 pt-3 pb-6 flex="~ col gap6">
       <SettingsFontSize />
+      <SettingsLineHeight />
       <SettingsColorMode />
       <SettingsThemeColors />
       <SettingsBottomNav />

styles/global.css

@@ -125,8 +125,16 @@ em-emoji-picker {
   }
 }
 
-.line-compact {
-  line-height: calc(4 / 3 * 1em);
+.line-height-narrow {
+  line-height: 1.15;
+}
+
+.line-height-normal {
+  line-height: calc(4 / 3);
+}
+
+.line-height-wide {
+  line-height: 1.5;
 }
 
 .content-editor {