feat: move flags to settings

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

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>

components/nav/SelectFeatureFlags.vue

@@ -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>

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>

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

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": "تعديل",

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",

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",

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"
     },

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",

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",

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": "更新中..."

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": "首选项"
     },

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>
+    <h3 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
-      <h1 text-4xl>
+      <div i-ri-flask-line />
-        🚧
+      {{ $t('settings.feature_flags.title') }}
-      </h1>
-      <h3 text-xl>
-        {{ $t('settings.preferences.label') }}
     </h3>
-    </div>
+    <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>