feat: integrate SvelteKit for seamless navigation and improved data loading

frontend/src/pages/Settings.svelte

@@ -1,21 +1,21 @@
+<!-- [DEF:Settings:Component] -->
 <!--
-[DEF:Settings:Component]
 @SEMANTICS: settings, ui, configuration
 @PURPOSE:   The main settings page for the application, allowing management of environments and global settings.
 @LAYER:     UI
 @RELATION:  CALLS -> api.js
 @RELATION:  USES -> stores.js
 
-@PROPS:
-None
-@EVENTS:
-None
+@PROPS: None
+@EVENTS: None
 @INVARIANT: Settings changes must be saved to the backend.
 -->
 <script>
+    // [SECTION: IMPORTS]
     import { onMount } from 'svelte';
     import { getSettings, updateGlobalSettings, getEnvironments, addEnvironment, updateEnvironment, deleteEnvironment, testEnvironmentConnection } from '../lib/api';
     import { addToast } from '../lib/toasts';
+    // [/SECTION]
 
     let settings = {
         environments: [],
@@ -36,26 +36,47 @@ None
 
     let editingEnvId = null;
 
+    // [DEF:loadSettings:Function]
+    /**
+     * @purpose Loads settings from the backend.
+     */
     async function loadSettings() {
         try {
+            console.log("[Settings.loadSettings][Action] Loading settings.");
             const data = await getSettings();
             settings = data;
+            console.log("[Settings.loadSettings][Coherence:OK] Settings loaded.");
         } catch (error) {
+            console.error("[Settings.loadSettings][Coherence:Failed] Failed to load settings:", error);
             addToast('Failed to load settings', 'error');
         }
     }
+    // [/DEF:loadSettings]
 
+    // [DEF:handleSaveGlobal:Function]
+    /**
+     * @purpose Saves global settings to the backend.
+     */
     async function handleSaveGlobal() {
         try {
+            console.log("[Settings.handleSaveGlobal][Action] Saving global settings.");
             await updateGlobalSettings(settings.settings);
             addToast('Global settings saved', 'success');
+            console.log("[Settings.handleSaveGlobal][Coherence:OK] Global settings saved.");
         } catch (error) {
+            console.error("[Settings.handleSaveGlobal][Coherence:Failed] Failed to save global settings:", error);
             addToast('Failed to save global settings', 'error');
         }
     }
+    // [/DEF:handleSaveGlobal]
 
+    // [DEF:handleAddOrUpdateEnv:Function]
+    /**
+     * @purpose Adds or updates an environment.
+     */
     async function handleAddOrUpdateEnv() {
         try {
+            console.log(`[Settings.handleAddOrUpdateEnv][Action] ${editingEnvId ? 'Updating' : 'Adding'} environment.`);
             if (editingEnvId) {
                 await updateEnvironment(editingEnvId, newEnv);
                 addToast('Environment updated', 'success');
@@ -65,41 +86,73 @@ None
             }
             resetEnvForm();
             await loadSettings();
+            console.log("[Settings.handleAddOrUpdateEnv][Coherence:OK] Environment saved.");
         } catch (error) {
+            console.error("[Settings.handleAddOrUpdateEnv][Coherence:Failed] Failed to save environment:", error);
             addToast('Failed to save environment', 'error');
         }
     }
+    // [/DEF:handleAddOrUpdateEnv]
 
+    // [DEF:handleDeleteEnv:Function]
+    /**
+     * @purpose Deletes an environment.
+     * @param {string} id - The ID of the environment to delete.
+     */
     async function handleDeleteEnv(id) {
         if (confirm('Are you sure you want to delete this environment?')) {
             try {
+                console.log(`[Settings.handleDeleteEnv][Action] Deleting environment: ${id}`);
                 await deleteEnvironment(id);
                 addToast('Environment deleted', 'success');
                 await loadSettings();
+                console.log("[Settings.handleDeleteEnv][Coherence:OK] Environment deleted.");
             } catch (error) {
+                console.error("[Settings.handleDeleteEnv][Coherence:Failed] Failed to delete environment:", error);
                 addToast('Failed to delete environment', 'error');
             }
         }
     }
+    // [/DEF:handleDeleteEnv]
 
+    // [DEF:handleTestEnv:Function]
+    /**
+     * @purpose Tests the connection to an environment.
+     * @param {string} id - The ID of the environment to test.
+     */
     async function handleTestEnv(id) {
         try {
+            console.log(`[Settings.handleTestEnv][Action] Testing environment: ${id}`);
             const result = await testEnvironmentConnection(id);
             if (result.status === 'success') {
                 addToast('Connection successful', 'success');
+                console.log("[Settings.handleTestEnv][Coherence:OK] Connection successful.");
             } else {
                 addToast(`Connection failed: ${result.message}`, 'error');
+                console.log("[Settings.handleTestEnv][Coherence:Failed] Connection failed.");
             }
         } catch (error) {
+            console.error("[Settings.handleTestEnv][Coherence:Failed] Error testing connection:", error);
             addToast('Failed to test connection', 'error');
         }
     }
+    // [/DEF:handleTestEnv]
 
+    // [DEF:editEnv:Function]
+    /**
+     * @purpose Sets the form to edit an existing environment.
+     * @param {Object} env - The environment object to edit.
+     */
     function editEnv(env) {
         newEnv = { ...env };
         editingEnvId = env.id;
     }
+    // [/DEF:editEnv]
 
+    // [DEF:resetEnvForm:Function]
+    /**
+     * @purpose Resets the environment form.
+     */
     function resetEnvForm() {
         newEnv = {
             id: '',
@@ -111,10 +164,12 @@ None
         };
         editingEnvId = null;
     }
+    // [/DEF:resetEnvForm]
 
     onMount(loadSettings);
 </script>
 
+<!-- [SECTION: TEMPLATE] -->
 <div class="container mx-auto p-4">
     <h1 class="text-2xl font-bold mb-6">Settings</h1>
 
@@ -211,4 +266,6 @@ None
         </div>
     </section>
 </div>
+<!-- [/SECTION] -->
+
 <!-- [/DEF:Settings] -->