From 69d009d02aed0658a827334d8394fadd16e2769f Mon Sep 17 00:00:00 2001
From: Shinigami <chrissi92@hotmail.de>
Date: Mon, 28 Nov 2022 23:57:27 +0100
Subject: [PATCH] feat: toggleable feature flags (#209)

---
 components/nav/NavFooter.vue              |  1 +
 components/nav/SelectFeatureFlags.vue     | 24 ++++++++++
 components/nav/SelectLanguage.vue         |  2 +-
 components/timeline/TimelinePaginator.vue | 18 ++++---
 composables/featureFlags.ts               | 57 +++++++++++++++++++++++
 composables/users.ts                      |  1 +
 constants/index.ts                        |  2 +-
 locales/de-DE.json                        |  6 ++-
 locales/en-US.json                        |  6 ++-
 locales/zh-CN.json                        |  6 ++-
 10 files changed, 111 insertions(+), 12 deletions(-)
 create mode 100644 components/nav/SelectFeatureFlags.vue
 create mode 100644 composables/featureFlags.ts

diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index 361d438b..cc353302 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -18,6 +18,7 @@ const buildTimeAgo = useTimeAgo(buildTime)
         />
       </CommonTooltip>
       <NavSelectLanguage />
+      <NavSelectFeatureFlags v-if="currentUser" />
     </div>
     <div>
       <button cursor-pointer hover:underline @click="openPreviewHelp">
diff --git a/components/nav/SelectFeatureFlags.vue b/components/nav/SelectFeatureFlags.vue
new file mode 100644
index 00000000..c2111608
--- /dev/null
+++ b/components/nav/SelectFeatureFlags.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+const featureFlags = useFeatureFlags()
+</script>
+
+<template>
+  <CommonTooltip :content="t('nav_footer.select_feature_flags')">
+    <CommonDropdown>
+      <button flex>
+        <div i-ri:flag-line text-lg />
+      </button>
+
+      <template #popper>
+        <CommonDropdownItem
+          :checked="featureFlags.experimentalVirtualScroll"
+          @click="toggleFeatureFlag('experimentalVirtualScroll')"
+        >
+          {{ t('feature_flag.virtual_scroll') }}
+        </CommonDropdownItem>
+      </template>
+    </CommonDropdown>
+  </CommonTooltip>
+</template>
diff --git a/components/nav/SelectLanguage.vue b/components/nav/SelectLanguage.vue
index 817880c0..08137c6b 100644
--- a/components/nav/SelectLanguage.vue
+++ b/components/nav/SelectLanguage.vue
@@ -10,7 +10,7 @@ const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
 </script>
 
 <template>
-  <CommonTooltip placement="bottom" :content="t('nav_footer.select_language')">
+  <CommonTooltip :content="t('nav_footer.select_language')">
     <CommonDropdown>
       <button flex>
         <div i-ri:earth-line text-lg />
diff --git a/components/timeline/TimelinePaginator.vue b/components/timeline/TimelinePaginator.vue
index 3b91389d..17e587fa 100644
--- a/components/timeline/TimelinePaginator.vue
+++ b/components/timeline/TimelinePaginator.vue
@@ -7,22 +7,26 @@ const { paginator, stream } = defineProps<{
   paginator: Paginator<any, Status[]>
   stream?: WsEvents
 }>()
+
+const virtualScroller = $(computedEager(() => useFeatureFlags().experimentalVirtualScroll))
 </script>
 
 <template>
-  <CommonPaginator v-bind="{ paginator, stream }" virtual-scroller>
+  <CommonPaginator v-bind="{ paginator, stream }" :virtual-scroller="virtualScroller">
     <template #updater="{ number, update }">
       <button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="update">
         Show {{ number }} new items
       </button>
     </template>
     <template #default="{ item, active }">
-      <DynamicScrollerItem :item="item" :active="active" tag="article">
-        <StatusCard
-          :status="item"
-          border="b base" py-3
-        />
-      </DynamicScrollerItem>
+      <template v-if="virtualScroller">
+        <DynamicScrollerItem :item="item" :active="active" tag="article">
+          <StatusCard :status="item" border="b base" py-3 />
+        </DynamicScrollerItem>
+      </template>
+      <template v-else>
+        <StatusCard :status="item" border="b base" py-3 />
+      </template>
     </template>
     <template #loading>
       <StatusCardSkeleton border="b base" py-3 />
diff --git a/composables/featureFlags.ts b/composables/featureFlags.ts
new file mode 100644
index 00000000..b706d726
--- /dev/null
+++ b/composables/featureFlags.ts
@@ -0,0 +1,57 @@
+import type { Account } from 'masto'
+import { STORAGE_KEY_FEATURE_FLAGS } from '~/constants'
+
+export interface FeatureFlags {
+  experimentalVirtualScroll: boolean
+}
+export type FeatureFlagsMap = Record<string, FeatureFlags>
+
+export const allFeatureFlags = useLocalStorage<FeatureFlagsMap>(STORAGE_KEY_FEATURE_FLAGS, {}, { deep: true })
+
+export function getDefaultFeatureFlags(): FeatureFlags {
+  return {
+    experimentalVirtualScroll: false,
+  }
+}
+
+export const currentUserFeatureFlags = computed(() => {
+  if (!currentUser.value?.account.id)
+    return {} as FeatureFlags
+
+  const id = `${currentUser.value.account.acct}@${currentUser.value.server}`
+
+  if (!allFeatureFlags.value[id])
+    allFeatureFlags.value[id] = getDefaultFeatureFlags()
+
+  return allFeatureFlags.value[id] as FeatureFlags
+})
+
+export function useFeatureFlags() {
+  const featureFlags = currentUserFeatureFlags.value
+
+  return featureFlags
+}
+
+export function toggleFeatureFlag(key: keyof FeatureFlags) {
+  const featureFlags = currentUserFeatureFlags.value
+
+  if (featureFlags[key])
+    featureFlags[key] = !featureFlags[key]
+  else
+    featureFlags[key] = true
+}
+
+export function clearUserFeatureFlags(account?: Account) {
+  if (!account)
+    account = currentUser.value?.account
+
+  if (!account)
+    return
+
+  const id = `${account.acct}@${currentUser.value?.server}`
+  if (!allFeatureFlags.value[id])
+    return
+
+  delete allFeatureFlags.value[id]
+}
+
diff --git a/composables/users.ts b/composables/users.ts
index 812b7157..b479afc9 100644
--- a/composables/users.ts
+++ b/composables/users.ts
@@ -73,6 +73,7 @@ export async function signout() {
     // Clear stale data
     delete servers.value[_currentUserId]
     clearUserDrafts()
+    clearUserFeatureFlags()
 
     // Remove the current user from the users
     users.value.splice(index, 1)
diff --git a/constants/index.ts b/constants/index.ts
index 8a7a475d..c97ed791 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -11,4 +11,4 @@ export const STORAGE_KEY_NOTIFY_TAB = 'elk-notify-tab'
 export const STORAGE_KEY_FIRST_VISIT = 'elk-first-visit'
 export const STORAGE_KEY_ZEN_MODE = 'elk-zenmode'
 export const STORAGE_KEY_LANG = 'elk-lang'
-
+export const STORAGE_KEY_FEATURE_FLAGS = 'elk-feature-flags'
diff --git a/locales/de-DE.json b/locales/de-DE.json
index 2cb5e71d..89f95aad 100644
--- a/locales/de-DE.json
+++ b/locales/de-DE.json
@@ -11,7 +11,8 @@
     "profile": "Profil"
   },
   "nav_footer": {
-    "select_language": "Sprache auswählen"
+    "select_language": "Sprache auswählen",
+    "select_feature_flags": "Feature-Flags umschalten"
   },
   "timeline": "Timeline",
   "title": {
@@ -22,5 +23,8 @@
     "posts": "{0} Beiträge",
     "following": "{0} Folge ich",
     "followers": "{0} Follower"
+  },
+  "feature_flag": {
+    "virtual_scroll": "Virtuelles Scrollen"
   }
 }
diff --git a/locales/en-US.json b/locales/en-US.json
index 7368febd..6c646ca5 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -11,7 +11,8 @@
     "profile": "Profile"
   },
   "nav_footer": {
-    "select_language": "Select Language"
+    "select_language": "Select Language",
+    "select_feature_flags": "Toggle Feature Flags"
   },
   "timeline": "Timeline",
   "title": {
@@ -22,5 +23,8 @@
     "posts": "{0} Posts",
     "following": "{0} Following",
     "followers": "{0} Followers"
+  },
+  "feature_flag": {
+    "virtual_scroll": "Virtual Scrolling"
   }
 }
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index f7eaef46..163be3bc 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -11,7 +11,8 @@
     "profile": "个人资料"
   },
   "nav_footer": {
-    "select_language": "选择语言"
+    "select_language": "选择语言",
+    "select_feature_flags": "切换功能标志"
   },
   "timeline": "时间轴",
   "title": {
@@ -22,5 +23,8 @@
     "followers": "被 {0} 人关注",
     "following": "正在关注 {0} 人",
     "posts": "{0} 条帖文"
+  },
+  "feature_flag": {
+    "virtual_scroll": "虚拟滚动"
   }
 }