improvement(ui): expand settings modal, remove teams tab for users that don't have access

Author: waleedlatif1

sim/app/w/components/sidebar/components/settings-modal/components/settings-navigation/settings-navigation.tsx

@@ -7,13 +7,15 @@ interface SettingsNavigationProps {
   onSectionChange: (
     section: 'general' | 'environment' | 'account' | 'credentials' | 'apikeys' | 'subscription' | 'team'
   ) => void
+  isTeam?: boolean
 }
 
 type NavigationItem = {
   id: 'general' | 'environment' | 'account' | 'credentials' | 'apikeys' | 'subscription' | 'team'
   label: string
   icon: React.ComponentType<{ className?: string }>
   hideInDev?: boolean
+  requiresTeam?: boolean
 }
 
 const allNavigationItems: NavigationItem[] = [
@@ -53,14 +55,22 @@ const allNavigationItems: NavigationItem[] = [
     label: 'Team',
     icon: Users,
     hideInDev: true,
+    requiresTeam: true,
   },
 ]
 
-export function SettingsNavigation({ activeSection, onSectionChange }: SettingsNavigationProps) {
+export function SettingsNavigation({ activeSection, onSectionChange, isTeam = false }: SettingsNavigationProps) {
   const navigationItems = allNavigationItems.filter(item => {
+    // Hide items based on development environment
     if (item.hideInDev && isDev) {
       return false
     }
+    
+    // Hide team tab if user doesn't have team subscription
+    if (item.requiresTeam && !isTeam) {
+      return false
+    }
+    
     return true
   })
 

sim/app/w/components/sidebar/components/settings-modal/settings-modal.tsx

@@ -53,6 +53,10 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
         if (response.ok) {
           const data = await response.json()
           setIsTeam(data.isTeam)
+          
+          if (!data.isTeam && activeSection === 'team') {
+            setActiveSection('general')
+          }
         }
       } catch (error) {
         logger.error('Error checking team plan:', error)
@@ -62,14 +66,14 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
     if (open) {
       checkTeamPlan()
     }
-  }, [open])
+  }, [open, activeSection])
 
   // Check if subscriptions are enabled
   const isSubscriptionEnabled = !!client.subscription
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[700px] h-[64vh] flex flex-col p-0 gap-0" hideCloseButton>
+      <DialogContent className="sm:max-w-[800px] h-[70vh] flex flex-col p-0 gap-0" hideCloseButton>
         <DialogHeader className="px-6 py-4 border-b">
           <div className="flex items-center justify-between">
             <DialogTitle className="text-lg font-medium">Settings</DialogTitle>
@@ -88,7 +92,11 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
         <div className="flex flex-1 min-h-0">
           {/* Navigation Sidebar */}
           <div className="w-[200px] border-r">
-            <SettingsNavigation activeSection={activeSection} onSectionChange={setActiveSection} />
+            <SettingsNavigation 
+              activeSection={activeSection} 
+              onSectionChange={setActiveSection} 
+              isTeam={isTeam}
+            />
           </div>
 
           {/* Content Area */}