feat(ui): interface for the experiment flags

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

@@ -22,6 +22,7 @@ import {
   IconLightingBolt,
   IconNetwork,
   IconScrollText,
+  IconSparkles,
   IconUser
 } from '@/components/ui/icons'
 
@@ -61,6 +62,9 @@ export default function Sidebar({ children, className }: SidebarProps) {
               <SidebarButton href="/profile">
                 <IconUser /> Profile
               </SidebarButton>
+              <SidebarButton href="/experiments">
+                <IconSparkles /> Experimental AI
+              </SidebarButton>
               {isAdmin && (
                 <>
                   <SidebarButton href="/cluster">

ee/tabby-ui/app/(dashboard)/experiments/components/feature-list.tsx

@@ -0,0 +1,30 @@
+'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)/experiments/page.tsx

@@ -0,0 +1,18 @@
+import { Metadata } from 'next'
+
+import FeatureList from './components/feature-list'
+
+export const metadata: Metadata = {
+  title: 'Experimental AI'
+}
+
+export default function IndexPage() {
+  return (
+    <div className="mx-auto flex max-w-xl flex-col gap-3">
+      <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
+        Experimental AI
+      </h3>
+      <FeatureList />
+    </div>
+  )
+}

ee/tabby-ui/components/ui/icons.tsx

@@ -1188,6 +1188,28 @@ function IconFolderGit({ className, ...props }: React.ComponentProps<'svg'>) {
   )
 }
 
+function IconSparkles({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('h-4 w-4', className)}
+      {...props}
+    >
+      <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
+      <path d="M5 3v4" />
+      <path d="M19 17v4" />
+      <path d="M3 5h4" />
+      <path d="M17 19h4" />
+    </svg>
+  )
+}
+
 export {
   IconEdit,
   IconNextChat,
@@ -1248,5 +1270,6 @@ export {
   IconCheckCircled,
   IconCrossCircled,
   IconInfoCircled,
-  IconFolderGit
+  IconFolderGit,
+  IconSparkles
 }

ee/tabby-ui/components/ui/switch.tsx

@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
       className
     )}
     {...props}

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

@@ -1,4 +1,4 @@
-import useLocalStorage from 'use-local-storage'
+import { useEffect, useState } from 'react'
 
 class ExperimentFlag {
   constructor(
@@ -39,18 +39,32 @@ 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
       ]