feature/refactor ui (#1205)

* fix: correct HTTP error handling in gateway * refactor: migrate database and ORM to internal modules * feat: introduce taskfile build system for improved workflow management * refactor: update taskfiles to use relative paths * feat: add profile status field * refactor: move rendering logic to context package * fix: improve error handling in credentials retrieval * refactor: optimize HTTP request handling in Wasm environment * refactor: refactor config loading in motr command * chore: add process-compose for service management * chore: remove default task and update gum format command * fix: update project dependencies * refactor: improve code readability and maintainability * refactor: consolidate error handling components * refactor: update index handler to use new context package * refactor: consolidate database scripts and move to deploy directory * feat: Update flake.nix with development tools and environment configuration * fix: ignore flake.lock file * refactor: migrate build process to use taskfiles for improved modularity and maintainability * refactor: improve GatewayContext and reorganize handlers * refactor: Remove unused profile creation functions * (chore): templ generation * test: add test file for vaults.go * maintenance: remove defunct Discord server link * docs: update checks workflow documentation * test: remove obsolete vaults test file * refactor: move version bumping logic to release workflow
2026-08-03 09:51:39 +00:00 · 2024-12-22 17:01:11 -05:00
parent c9004e75df
commit d69c2a9d53
153 changed files with 3515 additions and 2428 deletions
@@ -0,0 +1,152 @@
+// MessageChannel for WASM communication
+let wasmChannel;
+let wasmPort;
+
+async function initWasmChannel() {
+  wasmChannel = new MessageChannel();
+  wasmPort = wasmChannel.port1;
+
+  // Setup message handling from WASM
+  wasmPort.onmessage = (event) => {
+    const { type, data } = event.data;
+    switch (type) {
+      case 'WASM_READY':
+        console.log('WASM is ready');
+        document.dispatchEvent(new CustomEvent('wasm-ready'));
+        break;
+      case 'RESPONSE':
+        handleWasmResponse(data);
+        break;
+      case 'SYNC_COMPLETE':
+        handleSyncComplete(data);
+        break;
+    }
+  };
+}
+
+// Initialize WebAssembly and Service Worker
+async function init() {
+  try {
+    // Register service worker
+    if ('serviceWorker' in navigator) {
+      const registration = await navigator.serviceWorker.register('./sw.js');
+      console.log('ServiceWorker registered');
+
+      // Wait for the service worker to be ready
+      await navigator.serviceWorker.ready;
+
+      // Initialize MessageChannel
+      await initWasmChannel();
+
+      // Send the MessageChannel port to the service worker
+      navigator.serviceWorker.controller.postMessage({
+        type: 'PORT_INITIALIZATION',
+        port: wasmChannel.port2
+      }, [wasmChannel.port2]);
+
+      // Register for periodic sync if available
+      if ('periodicSync' in registration) {
+        try {
+          await registration.periodicSync.register('wasm-sync', {
+            minInterval: 24 * 60 * 60 * 1000 // 24 hours
+          });
+        } catch (error) {
+          console.log('Periodic sync could not be registered:', error);
+        }
+      }
+    }
+
+    // Initialize HTMX with custom config
+    htmx.config.withCredentials = true;
+    htmx.config.wsReconnectDelay = 'full-jitter';
+
+    // Override HTMX's internal request handling
+    htmx.config.beforeRequest = function (config) {
+      // Add request ID for tracking
+      const requestId = 'req_' + Date.now();
+      config.headers['X-Wasm-Request-ID'] = requestId;
+
+      // If offline, handle through service worker
+      if (!navigator.onLine) {
+        return false; // Let service worker handle it
+      }
+      return true;
+    };
+
+    // Handle HTMX after request
+    htmx.config.afterRequest = function (config) {
+      // Additional processing after request if needed
+    };
+
+    // Handle HTMX errors
+    htmx.config.errorHandler = function (error) {
+      console.error('HTMX Error:', error);
+    };
+
+  } catch (error) {
+    console.error('Initialization failed:', error);
+  }
+}
+
+function handleWasmResponse(data) {
+  const { requestId, response } = data;
+  // Process the WASM response
+  // This might update the UI or trigger HTMX swaps
+  const targetElement = document.querySelector(`[data-request-id="${requestId}"]`);
+  if (targetElement) {
+    htmx.process(targetElement);
+  }
+}
+
+function handleSyncComplete(data) {
+  const { url } = data;
+  // Handle successful sync
+  // Maybe refresh the relevant part of the UI
+  htmx.trigger('body', 'sync:complete', { url });
+}
+
+// Handle offline status changes
+window.addEventListener('online', () => {
+  document.body.classList.remove('offline');
+  // Trigger sync when back online
+  if (wasmPort) {
+    wasmPort.postMessage({ type: 'SYNC_REQUEST' });
+  }
+});
+
+window.addEventListener('offline', () => {
+  document.body.classList.add('offline');
+});
+
+// Custom event handlers for HTMX
+document.addEventListener('htmx:beforeRequest', (event) => {
+  const { elt, xhr } = event.detail;
+  // Add request tracking
+  const requestId = xhr.headers['X-Wasm-Request-ID'];
+  elt.setAttribute('data-request-id', requestId);
+});
+
+document.addEventListener('htmx:afterRequest', (event) => {
+  const { elt, successful } = event.detail;
+  if (successful) {
+    elt.removeAttribute('data-request-id');
+  }
+});
+
+// Initialize everything when the page loads
+document.addEventListener('DOMContentLoaded', init);
+
+// Export functions that might be needed by WASM
+window.wasmBridge = {
+  triggerUIUpdate: function (selector, content) {
+    const target = document.querySelector(selector);
+    if (target) {
+      htmx.process(htmx.parse(content).forEach(node => target.appendChild(node)));
+    }
+  },
+
+  showNotification: function (message, type = 'info') {
+    // Implement notification system
+    console.log(`${type}: ${message}`);
+  }
+};