chore: Add basic feature flags support

src/components/Feature.tsx

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react'
+
+import { useFeature } from '@/store/features'
+import type { Feature as FeatureType } from '@/types/features'
+
+interface FeatureProps {
+  feature: FeatureType
+}
+
+export function Feature({
+  children,
+  feature,
+}: PropsWithChildren<FeatureProps>) {
+  const [isEnabled] = useFeature(feature)
+
+  if (!isEnabled) {
+    return null
+  }
+
+  return <>{children}</>
+}

src/components/Layout/Sidebar/Sidebar.tsx

@@ -9,6 +9,7 @@ import { getRoutePath } from '@/routeMap'
 import { useCreateGenerator } from '@/hooks/useCreateGenerator'
 import { SearchField } from '@/components/SearchField'
 import { useState } from 'react'
+import { Feature } from '@/components/Feature'
 
 interface SidebarProps {
   isExpanded?: boolean
@@ -17,7 +18,7 @@ interface SidebarProps {
 
 export function Sidebar({ isExpanded, onCollapseSidebar }: SidebarProps) {
   const [searchTerm, setSearchTerm] = useState('')
-  const { recordings, generators, scripts } = useFiles(searchTerm)
+  const { recordings, generators, scripts, dataFiles } = useFiles(searchTerm)
 
   const createNewGenerator = useCreateGenerator()
 
@@ -100,6 +101,13 @@ export function Sidebar({ isExpanded, onCollapseSidebar }: SidebarProps) {
               files={scripts}
               noFilesMessage="No scripts found"
             />
+            <Feature feature="data-files">
+              <FileTree
+                label="Data files"
+                files={dataFiles}
+                noFilesMessage="No data files found"
+              />
+            </Feature>
           </Flex>
         </ScrollArea>
       </Flex>

src/store/features/index.ts

@@ -0,0 +1 @@
+export * from './useFeaturesStore'

src/store/features/useFeaturesStore.ts

@@ -0,0 +1,36 @@
+import { Feature } from '@/types/features'
+import { create } from 'zustand'
+import { immer } from 'zustand/middleware/immer'
+import { persist } from 'zustand/middleware'
+
+interface FeaturesStore {
+  features: Record<Feature, boolean>
+  toggleFeature: (feature: Feature) => void
+}
+
+const defaultFeatures: Record<Feature, boolean> = {
+  'data-files': false,
+}
+
+export const useFeaturesStore = create<FeaturesStore>()(
+  persist(
+    immer((set) => ({
+      features: {
+        ...defaultFeatures,
+      },
+      toggleFeature: (feature) =>
+        set((state) => {
+          state.features[feature] = !state.features[feature]
+        }),
+    })),
+    { name: 'features-storage' }
+  )
+)
+
+export function useFeature(feature: Feature) {
+  const toggleFeature = useFeaturesStore((state) => state.toggleFeature)
+  const isEnabled = useFeaturesStore((state) => state.features[feature])
+  const toggleEnabled = () => toggleFeature(feature)
+
+  return [isEnabled, toggleEnabled] as const
+}

src/types/features.ts

@@ -0,0 +1 @@
+export type Feature = 'data-files'