feat: toggleable feature flags (#209)

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

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>

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

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