beta New control panel

# Tab Management System Implementation

## What's Been Implemented
1. Complete Tab Management System with:
   - Drag and drop functionality for reordering tabs
   - Visual feedback during drag operations
   - Smooth animations and transitions
   - Dark mode support
   - Search functionality for tabs
   - Reset to defaults option

2. Developer Mode Features:
   - Shows ALL available tabs in developer mode
   - Maintains tab order across modes
   - Proper visibility toggles
   - Automatic inclusion of developer-specific tabs

3. User Mode Features:
   - Shows only user-configured tabs
   - Maintains separate tab configurations
   - Proper visibility management

## Key Components
- `TabManagement.tsx`: Main management interface
- `ControlPanel.tsx`: Main panel with tab display
- Integration with tab configuration store
- Proper type definitions and interfaces

## Technical Features
- React DnD for drag and drop
- Framer Motion for animations
- TypeScript for type safety
- UnoCSS for styling
- Toast notifications for user feedback

## Next Steps
1. Testing:
   - Test tab visibility in both modes
   - Verify drag and drop persistence
   - Check dark mode compatibility
   - Verify search functionality
   - Test reset functionality

2. Potential Improvements:
   - Add tab grouping functionality
   - Implement tab pinning
   - Add keyboard shortcuts
   - Improve accessibility
   - Add tab descriptions
   - Add tab icons customization

3. Documentation:
   - Add inline code comments
   - Create user documentation
   - Document API interfaces
   - Add setup instructions

4. Future Features:
   - Tab export/import
   - Custom tab creation
   - Tab templates
   - User preferences sync
   - Tab statistics

## Known Issues to Address
1. Ensure all tabs are visible in developer mode
2. Improve drag and drop performance
3. Better state persistence
4. Enhanced error handling
5. Improved type safety

## Usage Instructions
1. Switch to developer mode to see all available tabs
2. Use drag and drop to reorder tabs
3. Toggle visibility using switches
4. Use search to filter tabs
5. Reset to defaults if needed

## Technical Debt
1. Refactor tab configuration store
2. Improve type definitions
3. Add proper error boundaries
4. Implement proper loading states
5. Add comprehensive testing

## Security Considerations
1. Validate tab configurations
2. Sanitize user input
3. Implement proper access control
4. Add audit logging
5. Secure state management

app/components/settings/developer/DeveloperWindow.tsx

@@ -1,5 +1,5 @@
 import * as RadixDialog from '@radix-ui/react-dialog';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import { useState, useEffect, useMemo } from 'react';
 import { classNames } from '~/utils/classNames';
 import { TabManagement } from './TabManagement';
@@ -481,14 +481,9 @@ export const DeveloperWindow = ({ open, onClose }: DeveloperWindowProps) => {
                       'border border-[#E5E5E5] dark:border-[#1A1A1A]',
                       'flex flex-col overflow-hidden',
                     )}
-                    initial={{ opacity: 0, scale: 0.95, y: 20 }}
-                    animate={{
-                      opacity: developerMode ? 1 : 0,
-                      scale: developerMode ? 1 : 0.95,
-                      y: developerMode ? 0 : 20,
-                    }}
-                    exit={{ opacity: 0, scale: 0.95, y: 20 }}
-                    transition={{ duration: 0.2 }}
+                    initial={{ opacity: 1 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ duration: 0.15 }}
                   >
                     {/* Header */}
                     <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
@@ -592,28 +587,54 @@ export const DeveloperWindow = ({ open, onClose }: DeveloperWindowProps) => {
                         'touch-auto',
                       )}
                     >
-                      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="p-6">
+                      <motion.div
+                        key={activeTab || 'home'}
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className="p-6"
+                      >
                         {showTabManagement ? (
                           <TabManagement />
                         ) : activeTab ? (
                           getTabComponent()
                         ) : (
-                          <div className="grid grid-cols-4 gap-4">
-                            {visibleDeveloperTabs.map((tab: TabVisibilityConfig, index: number) => (
-                              <DraggableTabTile
-                                key={tab.id}
-                                tab={tab}
-                                index={index}
-                                moveTab={moveTab}
-                                onClick={() => handleTabClick(tab.id)}
-                                isActive={activeTab === tab.id}
-                                hasUpdate={getTabUpdateStatus(tab.id)}
-                                statusMessage={getStatusMessage(tab.id)}
-                                description={TAB_DESCRIPTIONS[tab.id]}
-                                isLoading={loadingTab === tab.id}
-                              />
-                            ))}
-                          </div>
+                          <motion.div
+                            className="grid grid-cols-4 gap-4"
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            transition={{ duration: 0.2 }}
+                          >
+                            <AnimatePresence mode="popLayout">
+                              {visibleDeveloperTabs.map((tab: TabVisibilityConfig, index: number) => (
+                                <motion.div
+                                  key={tab.id}
+                                  layout
+                                  initial={{ opacity: 0, scale: 0.8, y: 20 }}
+                                  animate={{ opacity: 1, scale: 1, y: 0 }}
+                                  exit={{ opacity: 0, scale: 0.8, y: -20 }}
+                                  transition={{
+                                    duration: 0.2,
+                                    delay: index * 0.05,
+                                  }}
+                                >
+                                  <DraggableTabTile
+                                    tab={tab}
+                                    index={index}
+                                    moveTab={moveTab}
+                                    onClick={() => handleTabClick(tab.id)}
+                                    isActive={activeTab === tab.id}
+                                    hasUpdate={getTabUpdateStatus(tab.id)}
+                                    statusMessage={getStatusMessage(tab.id)}
+                                    description={TAB_DESCRIPTIONS[tab.id]}
+                                    isLoading={loadingTab === tab.id}
+                                  />
+                                </motion.div>
+                              ))}
+                            </AnimatePresence>
+                          </motion.div>
                         )}
                       </motion.div>
                     </div>