1st iter

frontend/src/components/tools/ConnectionList.svelte

@@ -0,0 +1,82 @@
+<!-- [DEF:ConnectionList:Component] -->
+<!--
+@SEMANTICS: connection, list, settings
+@PURPOSE: UI component for listing and deleting saved database connection configurations.
+@LAYER: UI
+@RELATION: USES -> frontend/src/services/connectionService.js
+-->
+<script>
+    // [SECTION: IMPORTS]
+    import { onMount, createEventDispatcher } from 'svelte';
+    import { getConnections, deleteConnection } from '../../services/connectionService.js';
+    import { addToast } from '../../lib/toasts.js';
+    // [/SECTION]
+
+    const dispatch = createEventDispatcher();
+
+    let connections = [];
+    let isLoading = true;
+
+    // [DEF:fetchConnections:Function]
+    // @PURPOSE: Fetches the list of connections from the backend.
+    async function fetchConnections() {
+        isLoading = true;
+        try {
+            connections = await getConnections();
+        } catch (e) {
+            addToast('Failed to fetch connections', 'error');
+        } finally {
+            isLoading = false;
+        }
+    }
+
+    // [DEF:handleDelete:Function]
+    // @PURPOSE: Deletes a connection configuration.
+    async function handleDelete(id) {
+        if (!confirm('Are you sure you want to delete this connection?')) return;
+        
+        try {
+            await deleteConnection(id);
+            addToast('Connection deleted', 'success');
+            await fetchConnections();
+        } catch (e) {
+            addToast(e.message, 'error');
+        }
+    }
+
+    onMount(fetchConnections);
+
+    // Expose fetchConnections to parent
+    export { fetchConnections };
+</script>
+
+<!-- [SECTION: TEMPLATE] -->
+<div class="bg-white shadow overflow-hidden sm:rounded-md border border-gray-200">
+    <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
+        <h3 class="text-lg leading-6 font-medium text-gray-900">Saved Connections</h3>
+    </div>
+    <ul class="divide-y divide-gray-200">
+        {#if isLoading}
+            <li class="p-4 text-center text-gray-500">Loading...</li>
+        {:else if connections.length === 0}
+            <li class="p-8 text-center text-gray-500 italic">No connections saved yet.</li>
+        {:else}
+            {#each connections as conn}
+                <li class="p-4 flex items-center justify-between hover:bg-gray-50">
+                    <div>
+                        <div class="text-sm font-medium text-indigo-600 truncate">{conn.name}</div>
+                        <div class="text-xs text-gray-500">{conn.type}://{conn.username}@{conn.host}:{conn.port}/{conn.database}</div>
+                    </div>
+                    <button
+                        on:click={() => handleDelete(conn.id)}
+                        class="ml-2 inline-flex items-center px-2 py-1 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+                    >
+                        Delete
+                    </button>
+                </li>
+            {/each}
+        {/if}
+    </ul>
+</div>
+<!-- [/SECTION] -->
+<!-- [/DEF:ConnectionList:Component] -->