From 32ccc9f1cc1b7f71e0d391e55ba3878eb03d42db Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Fri, 1 Nov 2024 17:06:58 +0900
Subject: [PATCH 1/2] chore: upgrade @iconify/json and @iconify/utils to use
 new icons

---
 package.json   |  4 ++--
 pnpm-lock.yaml | 29 +++++++----------------------
 2 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 88aeb6d0cc..65995ec06a 100644
--- a/package.json
+++ b/package.json
@@ -35,8 +35,8 @@
     "@emoji-mart/data": "^1.1.2",
     "@fnando/sparkline": "^0.3.10",
     "@iconify-emoji/twemoji": "^1.0.2",
-    "@iconify/json": "^2.2.170",
-    "@iconify/utils": "^2.1.22",
+    "@iconify/json": "^2.2.266",
+    "@iconify/utils": "^2.1.33",
     "@nuxt/devtools": "^1.5.2",
     "@nuxt/test-utils": "^3.14.3",
     "@nuxtjs/color-mode": "^3.4.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a09c93d96b..9d5b2ccdf0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,11 +41,11 @@ importers:
         specifier: ^1.0.2
         version: 1.0.2
       '@iconify/json':
-        specifier: ^2.2.170
-        version: 2.2.170
+        specifier: ^2.2.266
+        version: 2.2.266
       '@iconify/utils':
-        specifier: ^2.1.22
-        version: 2.1.32
+        specifier: ^2.1.33
+        version: 2.1.33
       '@nuxt/devtools':
         specifier: ^1.5.2
         version: 1.5.2(rollup@2.79.1)(vite@5.4.5(@types/node@20.8.6)(terser@5.22.0))(vue@3.5.4(typescript@5.6.2))(webpack-sources@3.2.3)
@@ -1731,15 +1731,12 @@ packages:
   '@iconify-emoji/twemoji@1.0.2':
     resolution: {integrity: sha512-C4W6ov4BkDXiVU3GzyqyVo8SBbU21KivXnZERgAnrYZEKjuiI3JwPDnu9oVJPsUkNI/Q4SM8iVnXjGW6kxt9DQ==}
 
-  '@iconify/json@2.2.170':
-    resolution: {integrity: sha512-KJQ+LPj5KOpBrTknm0vpb2A6+T12ZyIFInubW3kT/58eZRKtiDv5D87QWVXczL5/uyDr2rkRu8rAfOrGr/UFhA==}
+  '@iconify/json@2.2.266':
+    resolution: {integrity: sha512-lv+lmPjhDh5/sCaom8AX39USmneRMcQRT/SKoDsxizOjVKycZ8PRk7kNKi776YkKzuksb0Xv5Tfi/Mrr3YLQgQ==}
 
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
-  '@iconify/utils@2.1.32':
-    resolution: {integrity: sha512-LeifFZPPKu28O3AEDpYJNdEbvS4/ojAPyIW+pF/vUpJTYnbTiXUHkCh0bwgFRzKvdpb8H4Fbfd/742++MF4fPQ==}
-
   '@iconify/utils@2.1.33':
     resolution: {integrity: sha512-jP9h6v/g0BIZx0p7XGJJVtkVnydtbgTgt9mVNcGDYwaa7UhdHdI9dvoq+gKj9sijMSJKxUPEG2JyjsgXjxL7Kw==}
 
@@ -9549,25 +9546,13 @@ snapshots:
 
   '@iconify-emoji/twemoji@1.0.2': {}
 
-  '@iconify/json@2.2.170':
+  '@iconify/json@2.2.266':
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 1.1.2
 
   '@iconify/types@2.0.0': {}
 
-  '@iconify/utils@2.1.32':
-    dependencies:
-      '@antfu/install-pkg': 0.4.1
-      '@antfu/utils': 0.7.10
-      '@iconify/types': 2.0.0
-      debug: 4.3.6
-      kolorist: 1.8.0
-      local-pkg: 0.5.0
-      mlly: 1.7.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@iconify/utils@2.1.33':
     dependencies:
       '@antfu/install-pkg': 0.4.1

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 2/2] 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 0000000000..e1ac8c1c4f
--- /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 0075d4cda0..c7043d27a4 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 7110edf10f..d9357238bd 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 98f3c3371f..e1d824ff4e 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 aff99d1f3f..48874ce3cf 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 f498f5a8b1..1915bee49c 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 723859b19a..219795da98 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 1942824dca..257a6f29c5 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 {