feat: implement database schema discovery and data browser interface

frontend/src/components/NavigationRail.tsx

@@ -23,37 +23,79 @@ const NavigationRail: React.FC<NavigationRailProps> = ({ activeTab, onTabChange
 
   return (
     <Box sx={{ 
-      width: 60, 
+      width: 72, 
       height: '100vh', 
       display: 'flex', 
       flexDirection: 'column', 
       alignItems: 'center', 
-      py: 2, 
-      bgcolor: 'rgba(0,0,0,0.1)',
+      py: 4, 
+      bgcolor: (theme) => theme.palette.mode === 'dark' ? '#0a0f1d' : '#ffffff',
       borderRight: 1, 
-      borderColor: 'divider' 
+      borderColor: 'divider',
+      zIndex: 1200,
+      boxShadow: (theme) => theme.palette.mode === 'dark' ? 'none' : '4px 0 10px rgba(0,0,0,0.02)'
     }}>
-      <Stack spacing={2}>
-        {tabs.map((tab) => (
-          <Tooltip key={tab.id} title={tab.label} placement="right">
-            <IconButton 
-              onClick={() => onTabChange(tab.id)}
-              sx={{ 
-                color: activeTab === tab.id ? 'primary.main' : 'text.secondary',
-                bgcolor: activeTab === tab.id ? 'rgba(0, 97, 255, 0.1)' : 'transparent',
-                borderRadius: 2,
-                '&:hover': { bgcolor: 'rgba(0, 97, 255, 0.05)' }
-              }}
-            >
-              {tab.icon}
-            </IconButton>
-          </Tooltip>
-        ))}
+      <Stack spacing={2.5} sx={{ width: '100%' }}>
+        {tabs.map((tab) => {
+          const isActive = activeTab === tab.id;
+          return (
+            <Box key={tab.id} sx={{ position: 'relative', width: '100%', display: 'flex', justifyContent: 'center' }}>
+              {/* Active Indicator - Elegant Pill Style */}
+              {isActive && (
+                <Box 
+                  sx={{ 
+                    position: 'absolute', 
+                    left: 4, 
+                    top: '20%', 
+                    height: '60%', 
+                    width: 4, 
+                    bgcolor: 'primary.main', 
+                    borderRadius: 4,
+                    boxShadow: '0 0 12px rgba(0, 97, 255, 0.4)'
+                  }} 
+                />
+              )}
+              
+              <Tooltip title={tab.label} placement="right" arrow>
+                <IconButton 
+                  onClick={() => onTabChange(tab.id)}
+                  sx={{ 
+                    width: 48,
+                    height: 48,
+                    color: isActive ? 'primary.main' : 'text.secondary',
+                    bgcolor: isActive ? 'rgba(0, 97, 255, 0.05)' : 'transparent',
+                    borderRadius: '8px',
+                    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                    '&:hover': { 
+                      bgcolor: isActive ? 'rgba(0, 97, 255, 0.1)' : 'rgba(0, 0, 0, 0.03)',
+                      color: isActive ? 'primary.main' : 'primary.main',
+                      '& .MuiSvgIcon-root': {
+                        transform: 'scale(1.1)',
+                      }
+                    },
+                    '& .MuiSvgIcon-root': {
+                      fontSize: 26,
+                      transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                    }
+                  }}
+                >
+                  {tab.icon}
+                </IconButton>
+              </Tooltip>
+            </Box>
+          );
+        })}
       </Stack>
       
       <Box sx={{ mt: 'auto' }}>
-        <Tooltip title="Settings" placement="right">
-          <IconButton sx={{ color: 'text.secondary' }}>
+        <Tooltip title="Settings" placement="right" arrow>
+          <IconButton sx={{ 
+            width: 48,
+            height: 48,
+            color: 'text.secondary',
+            transition: 'all 0.2s',
+            '&:hover': { color: 'primary.main', bgcolor: 'rgba(0, 0, 0, 0.03)' }
+          }}>
             <Settings />
           </IconButton>
         </Tooltip>