feat(ui): interface for the experiment flags

ee/tabby-ui/app/(dashboard)/experimentalAI/components/FeatureList.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { useEnableCodeBrowserQuickActionBar } from '@/lib/experiment-flags'
+
+import { Switch } from '@/components/ui/switch'
+
+export default function FeatureList () {
+  const [quickActionBar, toggleQuickActionBar] = useEnableCodeBrowserQuickActionBar()
+
+  return (
+    <>
+      {!quickActionBar.loading &&
+        <div className="flex items-center space-x-4 rounded-md border p-4">
+          <div className="flex-1 space-y-1">
+            <p className="text-sm font-medium leading-none">Quick Action Bar</p>
+            <p className="text-sm text-muted-foreground">Enable Quick Action Bar to display a convenient toolbar when you select code, offering options to explain the code, add unit tests, and more.</p>
+          </div>
+          <Switch checked={quickActionBar.value} onCheckedChange={toggleQuickActionBar} />
+        </div>
+      }
+    </>
+  )
+}

ee/tabby-ui/app/(dashboard)/experimentalAI/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from 'next'
 
-import ExperimentalAIOption from './components/Option'
+import FeatureList from './components/FeatureList'
 
 export const metadata: Metadata = {
   title: 'Experimental AI'
@@ -12,11 +12,7 @@ export default function IndexPage() {
       <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
         Experimental AI
       </h3>
-
-      <ExperimentalAIOption
-        title="Quick Action Bar"
-        description="Enable Quick Action Bar to display a convenient toolbar when you select code, offering options to explain the code, add unit tests, and more."
-      />
+      <FeatureList />
     </div>
   )
 }

ee/tabby-ui/lib/experiment-flags.ts

@@ -1,4 +1,5 @@
-import useLocalStorage from 'use-local-storage'
+import { useState, useEffect } from 'react'
+
 
 class ExperimentFlag {
   constructor(
@@ -39,18 +40,29 @@ class ExperimentFlagFactory {
   }
 
   defineHook() {
-    return (): [{ value: boolean; description: string }, () => void] => {
-      const [storageValue, setStorageValue] = useLocalStorage(
-        this.storageKey,
-        this.defaultValue
-      )
+    return (): [{ value: boolean; description: string, loading: boolean }, () => void] => {
+      const [storageValue, setStorageValue] = useState(this.defaultValue)
+      const [loading, setLoading] = useState(true)
+
+      useEffect(() => {
+        const value = localStorage.getItem(this.storageKey)
+        if (value) {
+          setStorageValue(value === 'true')
+        }
+        setLoading(false)
+      }, [])
+
       const toggleFlag = () => {
-        setStorageValue(!storageValue)
+        const newStorageValue = !storageValue
+        setStorageValue(newStorageValue)
+        localStorage.setItem(this.storageKey, String(newStorageValue))
       }
+
       return [
         {
           value: storageValue,
-          description: this.description
+          description: this.description,
+          loading
         },
         toggleFlag
       ]