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