1st iter

frontend/src/routes/settings/connections/+page.svelte

@@ -0,0 +1,34 @@
+<!-- [DEF:ConnectionsSettingsPage:Component] -->
+<!--
+@SEMANTICS: settings, connections, page
+@PURPOSE: Page for managing database connection configurations.
+@LAYER: UI
+-->
+<script>
+    import ConnectionForm from '../../../components/tools/ConnectionForm.svelte';
+    import ConnectionList from '../../../components/tools/ConnectionList.svelte';
+
+    let listComponent;
+
+    function handleSuccess() {
+        if (listComponent) {
+            listComponent.fetchConnections();
+        }
+    }
+</script>
+
+<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+    <div class="px-4 py-6 sm:px-0">
+        <h1 class="text-2xl font-semibold text-gray-900 mb-6">Connection Management</h1>
+        
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <div>
+                <ConnectionForm on:success={handleSuccess} />
+            </div>
+            <div>
+                <ConnectionList bind:this={listComponent} />
+            </div>
+        </div>
+    </div>
+</div>
+<!-- [/DEF:ConnectionsSettingsPage:Component] -->