From b24b53c20c25000bfbc59d51d37da8cc78c17132 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Tue, 29 Oct 2024 19:25:32 +0900
Subject: [PATCH] feat: add new setting to select line height options

---
 components/settings/SettingsLineHeight.vue    | 54 +++++++++++++++++++
 components/status/StatusBody.vue              |  8 ++-
 components/status/StatusPreviewStackBlitz.vue |  5 +-
 composables/settings/definition.ts            |  6 ++-
 constants/index.ts                            |  1 +
 locales/en.json                               |  7 ++-
 pages/settings/interface/index.vue            |  1 +
 styles/global.css                             | 12 ++++-
 8 files changed, 87 insertions(+), 7 deletions(-)
 create mode 100644 components/settings/SettingsLineHeight.vue

diff --git a/components/settings/SettingsLineHeight.vue b/components/settings/SettingsLineHeight.vue
new file mode 100644
index 00000000..e1ac8c1c
--- /dev/null
+++ b/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>
diff --git a/components/status/StatusBody.vue b/components/status/StatusBody.vue
index 0075d4cd..c7043d27 100644
--- a/components/status/StatusBody.vue
+++ b/components/status/StatusBody.vue
@@ -26,13 +26,17 @@ 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" />
@@ -40,7 +44,7 @@ const vnode = computed(() => {
     <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>
diff --git a/components/status/StatusPreviewStackBlitz.vue b/components/status/StatusPreviewStackBlitz.vue
index 7110edf1..d9357238 100644
--- a/components/status/StatusPreviewStackBlitz.vue
+++ b/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>
diff --git a/composables/settings/definition.ts b/composables/settings/definition.ts
index 98f3c337..e1d824ff 100644
--- a/composables/settings/definition.ts
+++ b/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,
   }
diff --git a/constants/index.ts b/constants/index.ts
index aff99d1f..48874ce3 100644
--- a/constants/index.ts
+++ b/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'
 
diff --git a/locales/en.json b/locales/en.json
index f498f5a8..1915bee4 100644
--- a/locales/en.json
+++ b/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",
diff --git a/pages/settings/interface/index.vue b/pages/settings/interface/index.vue
index 723859b1..219795da 100644
--- a/pages/settings/interface/index.vue
+++ b/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 />
diff --git a/styles/global.css b/styles/global.css
index 1942824d..257a6f29 100644
--- a/styles/global.css
+++ b/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 {