refactor(capabilities): centralize state management in provider and remove prop drilling

Author: junaid33

components/ui/DataTableDrawer.tsx

@@ -107,8 +107,6 @@ interface DataTableDrawerProps {
   onOpenChange: (open: boolean) => void
   data?: Transaction
   apps: any[]
-  selectedCapabilities: SelectedCapability[]
-  onSelectedCapabilitiesChange?: (capabilities: SelectedCapability[]) => void // Made optional since we use provider
 }
 
 const categories = [
@@ -696,8 +694,6 @@ export function DataTableDrawer({
   onOpenChange,
   data = defaultTransaction,
   apps,
-  selectedCapabilities, // This comes from the provider now
-  onSelectedCapabilitiesChange, // Optional fallback
 }: DataTableDrawerProps) {
   const status = expense_statuses.find(
     (item) => item.value === data?.expense_status,
@@ -706,8 +702,8 @@ export function DataTableDrawer({
   const { addCapability, removeCapability } = useCapabilityActions()
   const lastPinnedToolId = useLastPinnedTool()
 
-  // Use capabilities from provider, fallback to prop
-  const actualSelectedCapabilities = config.selectedCapabilities.length > 0 ? config.selectedCapabilities : selectedCapabilities
+  // Always use capabilities from provider - it's the source of truth
+  const actualSelectedCapabilities = config.selectedCapabilities
 
   // Starter templates (from legacy Build page)
   const starterTemplates = [
@@ -772,11 +768,11 @@ export function DataTableDrawer({
       documentationUrl: capability.documentationUrl
     }
 
-    const isAlreadySelected = selectedCapabilities.some(f => f.id === compositeId)
+    const isAlreadySelected = actualSelectedCapabilities.some(f => f.id === compositeId)
     if (isAlreadySelected) {
-      onSelectedCapabilitiesChange(selectedCapabilities.filter(f => f.id !== compositeId))
+      removeCapability(compositeId)
     } else {
-      onSelectedCapabilitiesChange([...selectedCapabilities, selectedCapability])
+      addCapability(selectedCapability)
     }
   }
 

components/ui/navbar.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { Sparkles, Info, Wand2, Leaf, Globe, Star } from "lucide-react";
+import { Wand2, Globe, Star } from "lucide-react";
 import { Logo } from "@/features/dashboard/components/Logo";
 import { Button } from "@/components/ui/button";
 import { NavbarSearch } from "@/features/public-site/components/search/NavbarSearch";
 import { DataTableDrawer } from "@/components/ui/DataTableDrawer";
 import { cn } from "@/lib/utils";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 
 interface NavbarProps {
   className?: string;
@@ -15,27 +15,6 @@ interface NavbarProps {
 
 export default function Navbar({ className, apps }: NavbarProps) {
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const [selectedCapabilities, setSelectedCapabilities] = useState([]);
-
-  useEffect(() => {
-    try {
-      const saved = localStorage.getItem('pinnedCapabilities');
-      if (saved) {
-        setSelectedCapabilities(JSON.parse(saved));
-      }
-    } catch (error) {
-      console.error('Error loading capabilities:', error);
-    }
-  }, []);
-
-  const handleSelectedCapabilitiesChange = (capabilities) => {
-    setSelectedCapabilities(capabilities);
-    try {
-      localStorage.setItem('pinnedCapabilities', JSON.stringify(capabilities));
-    } catch (error) {
-      console.error('Error saving capabilities:', error);
-    }
-  };
 
   return (
     <>
@@ -112,8 +91,6 @@ export default function Navbar({ className, apps }: NavbarProps) {
         open={drawerOpen} 
         onOpenChange={setDrawerOpen}
         apps={apps}
-        selectedCapabilities={selectedCapabilities}
-        onSelectedCapabilitiesChange={handleSelectedCapabilitiesChange}
       />
     </>
   );

features/public-site/components/landing/HeroAlternatives.tsx

@@ -11,7 +11,7 @@ import Link from 'next/link';
 import { cn } from '@/lib/utils';
 import { AnimatePresence, motion, useMotionTemplate, useMotionValue, type MotionStyle, type MotionValue, type Variants } from 'framer-motion';
 import type { MouseEvent } from 'react';
-import { useCapabilityActions, useSelectedCapabilities } from '@/hooks/use-capabilities-config';
+ import { useCapabilityActions } from '@/hooks/use-capabilities-config';
 import type { SelectedCapability } from '@/hooks/use-capabilities-config';
 import { DataTableDrawer } from '@/components/ui/DataTableDrawer';
 import { makeGraphQLRequest } from '../../lib/graphql/client';
@@ -503,7 +503,6 @@ export default function HeroAlternatives() {
   const [isTyping, setIsTyping] = useState(true);
   const [isDeleting, setIsDeleting] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const selectedCapabilities = useSelectedCapabilities();
 
   // Fetch all open source apps for the drawer
   const { data: apps = [] } = useQuery({
@@ -585,11 +584,6 @@ export default function HeroAlternatives() {
     handleStepChange(nextIndex);
   };
 
-  const handleSelectedCapabilitiesChange = (capabilities: any) => {
-    // The provider handles the sync through the context
-    console.log('Capability change handled by provider', capabilities);
-  };
-
   return (
     <>
       <div className="space-y-8">
@@ -651,8 +645,6 @@ export default function HeroAlternatives() {
         open={drawerOpen}
         onOpenChange={setDrawerOpen}
         apps={apps}
-        selectedCapabilities={selectedCapabilities}
-        onSelectedCapabilitiesChange={handleSelectedCapabilitiesChange}
       />
     </>
   );

features/public-site/screens/AlternativesPage.tsx

@@ -6,7 +6,6 @@ import { HeroSection } from '../components/alternatives/HeroSection';
 import { EventsSection } from '../components/alternatives/EventsSection';
 import StatsCard from '../components/alternatives/StatsCard';
 import { DataTableDrawer } from '@/components/ui/DataTableDrawer';
-import { useSelectedCapabilities, useCapabilityActions } from '@/hooks/use-capabilities-config';
 import { useQuery } from '@tanstack/react-query';
 import { queryKeys } from '../lib/query-keys';
 import { makeGraphQLRequest } from '../lib/graphql/client';
@@ -51,8 +50,6 @@ const GET_ALL_OPEN_SOURCE_APPS = `
 
 export function AlternativesPageClient({ slug }: AlternativesPageClientProps) {
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const selectedCapabilities = useSelectedCapabilities();
-  const { addCapability, removeCapability } = useCapabilityActions();
 
   // This data is already prefetched by server, so it loads instantly
   const { data: proprietaryApp, error: alternativesError } = useAlternatives(slug);
@@ -68,12 +65,6 @@ export function AlternativesPageClient({ slug }: AlternativesPageClientProps) {
     gcTime: 15 * 60 * 1000, // 15 minutes
   });
 
-  const handleSelectedCapabilitiesChange = (capabilities: any) => {
-    // This is called when capabilities are changed from the BuildStatsCard - but we use the provider now
-    // The provider will automatically handle the sync through the context
-    console.log('Capability change handled by provider', capabilities);
-  };
-
   // Since data is prefetched, this should never show loading
   // But handle error state  
   if (alternativesError || !proprietaryApp) {
@@ -121,8 +112,6 @@ export function AlternativesPageClient({ slug }: AlternativesPageClientProps) {
         open={drawerOpen} 
         onOpenChange={setDrawerOpen}
         apps={apps}
-        selectedCapabilities={selectedCapabilities}
-        onSelectedCapabilitiesChange={handleSelectedCapabilitiesChange}
       />
     </div>
   );

features/public-site/screens/CapabilitiesPage.tsx

@@ -6,7 +6,6 @@ import { CapabilitiesHeroSection } from '../components/alternatives/Capabilities
 import { EventsSection } from '../components/alternatives/EventsSection';
 import StatsCard from '../components/alternatives/StatsCard';
 import { DataTableDrawer } from '@/components/ui/DataTableDrawer';
-import { useSelectedCapabilities, useCapabilityActions } from '@/hooks/use-capabilities-config';
 import { useQuery } from '@tanstack/react-query';
 import { queryKeys } from '../lib/query-keys';
 import { makeGraphQLRequest } from '../lib/graphql/client';
@@ -50,8 +49,6 @@ const GET_ALL_OPEN_SOURCE_APPS = `
 
 export function CapabilitiesPageClient({ slug }: CapabilitiesPageClientProps) {
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const selectedCapabilities = useSelectedCapabilities();
-  const { addCapability, removeCapability } = useCapabilityActions();
 
   // This data is already prefetched by server, so it loads instantly
   const { data: capabilityData, error: capabilityError } = useCapabilityApplications(slug);
@@ -67,12 +64,6 @@ export function CapabilitiesPageClient({ slug }: CapabilitiesPageClientProps) {
     gcTime: 15 * 60 * 1000, // 15 minutes
   });
 
-  const handleSelectedCapabilitiesChange = (capabilities: any) => {
-    // This is called when capabilities are changed from the BuildStatsCard - but we use the provider now
-    // The provider will automatically handle the sync through the context
-    console.log('Capability change handled by provider', capabilities);
-  };
-
   // Since data is prefetched, this should never show loading
   // But handle error state  
   if (capabilityError || !capabilityData) {
@@ -123,8 +114,6 @@ export function CapabilitiesPageClient({ slug }: CapabilitiesPageClientProps) {
         open={drawerOpen} 
         onOpenChange={setDrawerOpen}
         apps={apps}
-        selectedCapabilities={selectedCapabilities}
-        onSelectedCapabilitiesChange={handleSelectedCapabilitiesChange}
       />
     </div>
   );

features/public-site/screens/OsAlternativesPage.tsx

@@ -6,7 +6,6 @@ import { OsAlternativesHeroSection } from '../components/alternatives/OsAlternat
 import { EventsSection } from '../components/alternatives/EventsSection';
 import StatsCard from '../components/alternatives/StatsCard';
 import { DataTableDrawer } from '@/components/ui/DataTableDrawer';
-import { useSelectedCapabilities, useCapabilityActions } from '@/hooks/use-capabilities-config';
 import { useQuery } from '@tanstack/react-query';
 import { queryKeys } from '../lib/query-keys';
 import { makeGraphQLRequest } from '../lib/graphql/client';
@@ -50,8 +49,6 @@ const GET_ALL_OPEN_SOURCE_APPS = `
 
 export function OsAlternativesPageClient({ slug }: OsAlternativesPageClientProps) {
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const selectedCapabilities = useSelectedCapabilities();
-  const { addCapability, removeCapability } = useCapabilityActions();
 
   // This data is already prefetched by server, so it loads instantly
   const { data: osAlternativesData, error: osAlternativesError } = useOsAlternatives(slug);
@@ -67,12 +64,6 @@ export function OsAlternativesPageClient({ slug }: OsAlternativesPageClientProps
     gcTime: 15 * 60 * 1000, // 15 minutes
   });
 
-  const handleSelectedCapabilitiesChange = (capabilities: any) => {
-    // This is called when capabilities are changed from the BuildStatsCard - but we use the provider now
-    // The provider will automatically handle the sync through the context
-    console.log('Capability change handled by provider', capabilities);
-  };
-
   // Since data is prefetched, this should never show loading
   // But handle error state  
   if (osAlternativesError || !osAlternativesData) {
@@ -123,8 +114,6 @@ export function OsAlternativesPageClient({ slug }: OsAlternativesPageClientProps
         open={drawerOpen} 
         onOpenChange={setDrawerOpen}
         apps={apps}
-        selectedCapabilities={selectedCapabilities}
-        onSelectedCapabilitiesChange={handleSelectedCapabilitiesChange}
       />
     </div>
   );

hooks/use-capabilities-config.tsx

@@ -63,10 +63,6 @@ const defaultCapabilitiesConfig: CapabilitiesConfig = {
 
 const saveToLS = (storageKey: string, config: CapabilitiesConfig) => {
   try {
-    // Save to localStorage - using same key as existing implementation
-    localStorage.setItem('pinnedCapabilities', JSON.stringify(config.selectedCapabilities))
-    
-    // Also save the complete config as JSON for easier future management
     localStorage.setItem(storageKey, JSON.stringify(config))
   } catch {
     // Unsupported
@@ -77,7 +73,6 @@ const loadFromLS = (storageKey: string, defaultConfig: CapabilitiesConfig): Capa
   if (isServer) return defaultConfig
 
   try {
-    // Try to load from new JSON format first
     const savedConfig = localStorage.getItem(storageKey)
     if (savedConfig) {
       const parsed = JSON.parse(savedConfig) as CapabilitiesConfig
@@ -94,21 +89,6 @@ const loadFromLS = (storageKey: string, defaultConfig: CapabilitiesConfig): Capa
       }
     }
 
-    // Fallback to legacy pinnedCapabilities key for backward compatibility
-    const pinnedCapabilities = localStorage.getItem('pinnedCapabilities')
-    if (pinnedCapabilities) {
-      const selectedCapabilities = JSON.parse(pinnedCapabilities) as SelectedCapability[]
-      const config: CapabilitiesConfig = {
-        ...defaultConfig,
-        selectedCapabilities,
-      }
-
-      // Migrate to new format
-      saveToLS(storageKey, config)
-
-      return config
-    }
-
     return defaultConfig
   } catch {
     return defaultConfig
@@ -182,7 +162,7 @@ const CapabilitiesRoot = ({
   // localStorage event handling for cross-tab synchronization
   React.useEffect(() => {
     const handleStorage = (e: StorageEvent) => {
-      if (e.key !== storageKey && e.key !== 'pinnedCapabilities') {
+     if (e.key !== storageKey) {
         return
       }