From 841959b51f1d5ae62c4a99993d32de1e17e167a3 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 27 Dec 2022 18:38:38 +0100
Subject: [PATCH] feat: move flags to settings

---
 components/nav/NavFooter.vue           | 16 +++++-----
 components/nav/NavSide.vue             |  1 -
 components/nav/SelectFeatureFlags.vue  | 31 -------------------
 components/settings/SettingsToggle.vue | 42 ++++++++++++++++++++++++++
 components/user/UserSwitcher.vue       |  1 -
 locales/ar-EG.json                     | 14 +++++----
 locales/cs-CZ.json                     | 14 +++++----
 locales/de-DE.json                     | 14 +++++----
 locales/en-US.json                     | 13 ++++----
 locales/es-ES.json                     | 14 +++++----
 locales/fr-FR.json                     | 14 +++++----
 locales/ja-JP.json                     | 12 +++++---
 locales/zh-CN.json                     | 13 ++++----
 pages/settings/preferences/index.vue   | 36 +++++++++++++++++-----
 14 files changed, 140 insertions(+), 95 deletions(-)
 delete mode 100644 components/nav/SelectFeatureFlags.vue
 create mode 100644 components/settings/SettingsToggle.vue

diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index 6b251684..15bcccae 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -22,6 +22,15 @@ const buildTimeAgo = useTimeAgo(buildTimeDate, timeAgoOptions)
           @click="toggleZenMode()"
         />
       </CommonTooltip>
+      <CommonTooltip :content="$t('nav_side.settings')">
+        <NuxtLink
+          flex
+          text-lg
+          to="/settings"
+          i-ri:settings-4-line
+          :aria-label="$t('nav_side.settings')"
+        />
+      </CommonTooltip>
       <NavSelectLanguage>
         <CommonTooltip :content="$t('nav_footer.select_language')">
           <button flex :aria-label="$t('nav_footer.select_language')">
@@ -36,13 +45,6 @@ const buildTimeAgo = useTimeAgo(buildTimeDate, timeAgoOptions)
           </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')">
-            <div i-ri:flag-line text-lg />
-          </button>
-        </CommonTooltip>
-      </NavSelectFeatureFlags>
     </div>
     <div>
       <button cursor-pointer hover:underline @click="openPreviewHelp">
diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index 29485f3e..133d23ac 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -21,6 +21,5 @@ const { notifications } = useNotifications()
     <NavSideItem :text="$t('nav_side.conversations')" to="/conversations" icon="i-ri:at-line" user-only />
     <NavSideItem :text="$t('nav_side.favourites')" to="/favourites" icon="i-ri:heart-3-line" user-only />
     <NavSideItem :text="$t('nav_side.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line " user-only />
-    <NavSideItem :text="$t('nav_side.settings')" to="/settings" icon="i-ri:settings-4-line " user-only />
   </nav>
 </template>
diff --git a/components/nav/SelectFeatureFlags.vue b/components/nav/SelectFeatureFlags.vue
deleted file mode 100644
index 0aa18737..00000000
--- a/components/nav/SelectFeatureFlags.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <CommonDropdown placement="top">
-    <slot />
-    <template #popper>
-      <CommonDropdownItem
-        :checked="currentUserFeatureFlags.experimentalVirtualScroll"
-        @click="toggleFeatureFlag('experimentalVirtualScroll')"
-      >
-        {{ $t('feature_flag.virtual_scroll') }}
-      </CommonDropdownItem>
-      <CommonDropdownItem
-        :checked="currentUserFeatureFlags.experimentalAvatarOnAvatar"
-        @click="toggleFeatureFlag('experimentalAvatarOnAvatar')"
-      >
-        {{ $t('feature_flag.avatar_on_avatar') }}
-      </CommonDropdownItem>
-      <CommonDropdownItem
-        :checked="currentUserFeatureFlags.experimentalGitHubCards"
-        @click="toggleFeatureFlag('experimentalGitHubCards')"
-      >
-        {{ $t('feature_flag.github_cards') }}
-      </CommonDropdownItem>
-      <CommonDropdownItem
-        :checked="currentUserFeatureFlags.experimentalUserSwitcherSidebar"
-        @click="toggleFeatureFlag('experimentalUserSwitcherSidebar')"
-      >
-        {{ $t('feature_flag.user_switcher_sidebar') }}
-      </CommonDropdownItem>
-    </template>
-  </CommonDropdown>
-</template>
diff --git a/components/settings/SettingsToggle.vue b/components/settings/SettingsToggle.vue
new file mode 100644
index 00000000..a35eff79
--- /dev/null
+++ b/components/settings/SettingsToggle.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+defineProps<{
+  icon?: string
+  text?: string
+  checked: boolean
+}>()
+</script>
+
+<template>
+  <button
+    exact-active-class="text-primary"
+    block w-full group focus:outline-none
+  >
+    <div
+      w-full flex w-fit px5 py3 md:gap2 gap4 items-center
+      transition-250 group-hover:bg-active
+      group-focus-visible:ring="2 current"
+    >
+      <div flex-1 flex items-center md:gap2 gap4>
+        <div
+          flex items-center justify-center flex-shrink-0
+          :class="$slots.description ? 'w-12 h-12' : ''"
+        >
+          <slot name="icon">
+            <div v-if="icon" :class="icon" md:text-size-inherit text-xl />
+          </slot>
+        </div>
+        <div space-y-1>
+          <p :class="checked ? 'text-base' : 'text-secondary'">
+            <slot>
+              <span>{{ text }}</span>
+            </slot>
+          </p>
+          <p v-if="$slots.description" text-sm text-secondary>
+            <slot name="description" />
+          </p>
+        </div>
+      </div>
+      <div text-lg :class="checked ? 'i-ri-checkbox-line text-primary' : 'i-ri-checkbox-blank-line text-secondary'" />
+    </div>
+  </button>
+</template>
diff --git a/components/user/UserSwitcher.vue b/components/user/UserSwitcher.vue
index 006cf3d6..97107d04 100644
--- a/components/user/UserSwitcher.vue
+++ b/components/user/UserSwitcher.vue
@@ -44,7 +44,6 @@ const switchUser = (user: UserLogin) => {
         icon="i-ri:user-add-line"
         @click="openSigninDialog"
       />
-
       <NuxtLink to="/settings">
         <CommonDropdownItem
           :text="$t('nav_side.settings')"
diff --git a/locales/ar-EG.json b/locales/ar-EG.json
index a52512ff..72812cac 100644
--- a/locales/ar-EG.json
+++ b/locales/ar-EG.json
@@ -83,12 +83,6 @@
     "sign_in_error": "لا يمكن الاتصال بالموقع",
     "status_not_found": "لا يمكن إيجاد المنشور"
   },
-  "feature_flag": {
-    "avatar_on_avatar": "الصورة الرمزية على الصورة الرمزية",
-    "github_cards": "GitHub بطاقات",
-    "user_switcher_sidebar": "الشريط الجانبي لمبدل المستخدم",
-    "virtual_scroll": "التمرير الافتراضي"
-  },
   "help": {
     "desc_highlight": "توقع بعض الأخطاء والميزات المفقودة هنا وهناك.",
     "desc_para1": "نشكرك على اهتمامك بتجربة Elk ، عميل ماستدون العام!",
@@ -199,6 +193,14 @@
   "search": {
     "search_desc": "ابحث عن الأشخاص والهاشتاج"
   },
+  "settings": {
+    "feature_flags": {
+      "avatar_on_avatar": "الصورة الرمزية على الصورة الرمزية",
+      "github_cards": "GitHub بطاقات",
+      "user_switcher_sidebar": "الشريط الجانبي لمبدل المستخدم",
+      "virtual_scroll": "التمرير الافتراضي"
+    }
+  },
   "state": {
     "edited": "(معدل)",
     "editing": "تعديل",
diff --git a/locales/cs-CZ.json b/locales/cs-CZ.json
index 6feefc00..5be5b488 100644
--- a/locales/cs-CZ.json
+++ b/locales/cs-CZ.json
@@ -79,12 +79,6 @@
     "sign_in_error": "Nemohu se připojit k serveru.",
     "status_not_found": "Status nenalezen"
   },
-  "feature_flag": {
-    "avatar_on_avatar": "Avatar on Avatar",
-    "github_cards": "GitHub Cards",
-    "user_switcher_sidebar": "User Switcher Sidebar",
-    "virtual_scroll": "Virtual Scrolling"
-  },
   "help": {
     "desc_highlight": "Z toho důvodu může tu a tam nastat chyba nebo chybět nějaká ta funkce.",
     "desc_para1": "Těší nás váš zájem o Elk - Mastodoní klient na kterém právě pracujeme.",
@@ -153,6 +147,14 @@
     "replying": "Sem napište odpověď",
     "the_thread": "vlákno"
   },
+  "settings": {
+    "feature_flags": {
+      "avatar_on_avatar": "Avatar on Avatar",
+      "github_cards": "GitHub Cards",
+      "user_switcher_sidebar": "User Switcher Sidebar",
+      "virtual_scroll": "Virtual Scrolling"
+    }
+  },
   "state": {
     "edited": "(Upraveno)",
     "editing": "Upravuje se",
diff --git a/locales/de-DE.json b/locales/de-DE.json
index f841018d..c82217d8 100644
--- a/locales/de-DE.json
+++ b/locales/de-DE.json
@@ -79,12 +79,6 @@
     "sign_in_error": "Kann nicht zu Server verbinden",
     "status_not_found": "Beitrag nicht gefunden"
   },
-  "feature_flag": {
-    "avatar_on_avatar": "Avatar auf Avatar",
-    "github_cards": "GitHub Cards",
-    "user_switcher_sidebar": "User Switcher Sidebar",
-    "virtual_scroll": "Virtuelles Scrollen"
-  },
   "help": {
     "desc_highlight": "Erwarte hier und da einige Bugs und fehlende Funktionen.",
     "desc_para1": "Danke für dein Interesse in Elk, unser noch in der Bearbeitung befindliche, generische Mastodon Client!",
@@ -158,6 +152,14 @@
   "search": {
     "search_desc": "Suche nach Nutzern & Hashtags"
   },
+  "settings": {
+    "feature_flags": {
+      "avatar_on_avatar": "Avatar auf Avatar",
+      "github_cards": "GitHub Cards",
+      "user_switcher_sidebar": "User Switcher Sidebar",
+      "virtual_scroll": "Virtuelles Scrollen"
+    }
+  },
   "state": {
     "edited": "(bearbeitet)",
     "editing": "Bearbeiten",
diff --git a/locales/en-US.json b/locales/en-US.json
index d2e3b327..c3aed523 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -102,12 +102,6 @@
     "status_not_found": "Post not found",
     "unsupported_file_format": "Unsupported file format"
   },
-  "feature_flag": {
-    "avatar_on_avatar": "Avatar on Avatar",
-    "github_cards": "GitHub Cards",
-    "user_switcher_sidebar": "User Switcher Sidebar",
-    "virtual_scroll": "Virtual Scrolling"
-  },
   "help": {
     "desc_highlight": "Expect some bugs and missing features here and there.",
     "desc_para1": "Thanks for your interest in trying out Elk, our work-in-progress generic Mastodon client!",
@@ -228,6 +222,13 @@
     "about": {
       "label": "About"
     },
+    "feature_flags": {
+      "avatar_on_avatar": "Avatar on Avatar",
+      "github_cards": "GitHub Cards",
+      "title": "Experimental Feature Flags",
+      "user_switcher_sidebar": "User Switcher Sidebar",
+      "virtual_scroll": "Virtual Scrolling"
+    },
     "interface": {
       "label": "Interface"
     },
diff --git a/locales/es-ES.json b/locales/es-ES.json
index ff5a8540..49876348 100644
--- a/locales/es-ES.json
+++ b/locales/es-ES.json
@@ -98,12 +98,6 @@
     "sign_in_error": "No se ha podido conectar con el servidor.",
     "status_not_found": "Estado no encontrado"
   },
-  "feature_flag": {
-    "avatar_on_avatar": "Avatar en Avatar",
-    "github_cards": "GitHub Cards",
-    "user_switcher_sidebar": "User Switcher Sidebar",
-    "virtual_scroll": "Virtual Scrolling"
-  },
   "help": {
     "desc_highlight": "Es normal encontrar algunos errores y características faltantes aquí y allá.",
     "desc_para1": "¡Gracias por el interés en probar Elk, nuestro cliente genérico en desarrollo para Mastodon!",
@@ -216,6 +210,14 @@
   "search": {
     "search_desc": "Buscar personas y etiquetas"
   },
+  "settings": {
+    "feature_flags": {
+      "avatar_on_avatar": "Avatar en Avatar",
+      "github_cards": "GitHub Cards",
+      "user_switcher_sidebar": "User Switcher Sidebar",
+      "virtual_scroll": "Virtual Scrolling"
+    }
+  },
   "state": {
     "edited": "(Editado)",
     "editing": "Editando",
diff --git a/locales/fr-FR.json b/locales/fr-FR.json
index c9b1f58f..dff881fe 100644
--- a/locales/fr-FR.json
+++ b/locales/fr-FR.json
@@ -97,12 +97,6 @@
     "sign_in_error": "Impossible de se connecter au serveur.",
     "status_not_found": "Message non trouvé"
   },
-  "feature_flag": {
-    "avatar_on_avatar": "Avatar sur avatar",
-    "github_cards": "GitHub Cards",
-    "user_switcher_sidebar": "User Switcher Sidebar",
-    "virtual_scroll": "Défilement virtuel"
-  },
   "help": {
     "desc_highlight": "Il est possible de rencontrer, par-ci par-là, quelques bugs et fonctionnalités manquantes.",
     "desc_para1": "Merci de l'intérêt pour Elk, notre client Mastodon en cours de développement !",
@@ -216,6 +210,14 @@
   "search": {
     "search_desc": "Recherche de personnes & hashtags"
   },
+  "settings": {
+    "feature_flags": {
+      "avatar_on_avatar": "Avatar sur avatar",
+      "github_cards": "GitHub Cards",
+      "user_switcher_sidebar": "User Switcher Sidebar",
+      "virtual_scroll": "Défilement virtuel"
+    }
+  },
   "state": {
     "edited": "(Édité)",
     "editing": "Édition",
diff --git a/locales/ja-JP.json b/locales/ja-JP.json
index 8a167890..6c12642d 100644
--- a/locales/ja-JP.json
+++ b/locales/ja-JP.json
@@ -31,11 +31,6 @@
     "error": "ERROR",
     "not_found": "404 Not Found"
   },
-  "feature_flag": {
-    "github_cards": "GitHub Cards",
-    "user_switcher_sidebar": "User Switcher Sidebar",
-    "virtual_scroll": "仮想スクロール"
-  },
   "menu": {
     "block_account": "{0}さんをブロックする",
     "block_domain": "{0}をドメインブロック",
@@ -76,6 +71,13 @@
     "request_to_follow": "さんがあなたへフォローをリクエストしました",
     "update_status": "さんが投稿を更新しました"
   },
+  "settings": {
+    "feature_flags": {
+      "github_cards": "GitHub Cards",
+      "user_switcher_sidebar": "User Switcher Sidebar",
+      "virtual_scroll": "仮想スクロール"
+    }
+  },
   "state": {
     "editing": "編集中",
     "uploading": "更新中..."
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index 94744b37..4d9254cd 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -89,12 +89,7 @@
     "status_not_found": "未找到帖文",
     "unsupported_file_format": "不支持的文件格式"
   },
-  "feature_flag": {
-    "avatar_on_avatar": "头像堆叠",
-    "github_cards": "Github 卡片",
-    "user_switcher_sidebar": "用户切换侧边栏",
-    "virtual_scroll": "虚拟滚动"
-  },
+
   "help": {
     "desc_highlight": "可能会在某些地方出现一些 bug 或缺失的功能。",
     "desc_para1": "感谢你有兴趣尝试鹿鸣，一个我们正在积极开发的通用 Mastodon 客户端。",
@@ -208,6 +203,12 @@
     "search_desc": "搜索用户或话题标签"
   },
   "settings": {
+    "feature_flags": {
+      "avatar_on_avatar": "头像堆叠",
+      "github_cards": "Github 卡片",
+      "user_switcher_sidebar": "用户切换侧边栏",
+      "virtual_scroll": "虚拟滚动"
+    },
     "preferences": {
       "label": "首选项"
     },
diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
index 3f079fc9..3d66e0df 100644
--- a/pages/settings/preferences/index.vue
+++ b/pages/settings/preferences/index.vue
@@ -9,13 +9,33 @@ const { lg } = breakpoints
         <span>{{ $t('settings.preferences.label') }}</span>
       </div>
     </template>
-    <div text-center mt-10>
-      <h1 text-4xl>
-        🚧
-      </h1>
-      <h3 text-xl>
-        {{ $t('settings.preferences.label') }}
-      </h3>
-    </div>
+    <h3 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
+      <div i-ri-flask-line />
+      {{ $t('settings.feature_flags.title') }}
+    </h3>
+    <SettingsToggle
+      :checked="currentUserFeatureFlags.experimentalVirtualScroll"
+      @click="toggleFeatureFlag('experimentalVirtualScroll')"
+    >
+      {{ $t('settings.feature_flags.virtual_scroll') }}
+    </SettingsToggle>
+    <SettingsToggle
+      :checked="currentUserFeatureFlags.experimentalAvatarOnAvatar"
+      @click="toggleFeatureFlag('experimentalAvatarOnAvatar')"
+    >
+      {{ $t('settings.feature_flags.avatar_on_avatar') }}
+    </SettingsToggle>
+    <SettingsToggle
+      :checked="currentUserFeatureFlags.experimentalGitHubCards"
+      @click="toggleFeatureFlag('experimentalGitHubCards')"
+    >
+      {{ $t('settings.feature_flags.github_cards') }}
+    </SettingsToggle>
+    <SettingsToggle
+      :checked="currentUserFeatureFlags.experimentalUserSwitcherSidebar"
+      @click="toggleFeatureFlag('experimentalUserSwitcherSidebar')"
+    >
+      {{ $t('settings.feature_flags.user_switcher_sidebar') }}
+    </SettingsToggle>
   </MainContent>
 </template>