feat: add TableList component with styles and functionality for displaying database tables

feat: implement NewConnectionDialog component for creating and editing database connections with form validation

chore: generate TypeScript definitions and JavaScript bindings for app functions

chore: add models for configuration, connection requests, and database entities

frontend/src/components/Layout/ToolBar.css

@@ -92,6 +92,11 @@
   box-shadow: 0 0 4px var(--success);
 }
 
+.toolbar-connection.disconnected {
+  opacity: 0.5;
+  cursor: default;
+}
+
 .connection-name {
   font-size: var(--text-sm);
   font-weight: 500;
@@ -121,4 +126,4 @@
   .connection-name {
     display: none;
   }
-}
+}

frontend/src/components/Layout/ToolBar.tsx

@@ -24,6 +24,8 @@ export interface ToolBarProps {
   children?: React.ReactNode;
   /** Handler when button is clicked */
   onButtonClick?: (buttonId: string) => void;
+  /** Active connection info for display */
+  activeConnection?: { name: string; type: string } | null;
 }
 
 /**
@@ -63,6 +65,7 @@ export const ToolBar: React.FC<ToolBarProps> = ({
   buttons = defaultButtons,
   children,
   onButtonClick,
+  activeConnection,
 }) => {
   const handleButtonClick = (button: ToolButton) => {
     button.onClick?.();
@@ -92,10 +95,13 @@ export const ToolBar: React.FC<ToolBarProps> = ({
       <div className="toolbar-spacer" />
 
       {/* Connection indicator */}
-      <div className="toolbar-connection">
-        <span className="connection-status-dot connected"></span>
-        <span className="connection-name">🗄️ MySQL @ localhost</span>
-        <span className="dropdown-arrow">▼</span>
+      <div className={`toolbar-connection ${activeConnection ? 'connected' : 'disconnected'}`}>
+        <span className={`connection-status-dot ${activeConnection ? 'connected' : ''}`}></span>
+        <span className="connection-name">
+          {activeConnection
+            ? `${activeConnection.type === 'postgresql' ? '🐘' : activeConnection.type === 'mysql' ? '🗄️' : '📁'} ${activeConnection.name}`
+            : 'No connection'}
+        </span>
       </div>
     </div>
   );