design: neobrutalist_theme into main

html-router/assets/knowledge-graph.js

@@ -73,29 +73,29 @@
 
   function attachOverlay(container, { onSearch, onToggleLabels, onCenter }) {
     const overlay = document.createElement('div');
-    overlay.className = 'absolute top-2 left-2 z-10 flex gap-2 items-center';
+    overlay.className = 'kg-overlay';
 
     // search box
     const input = document.createElement('input');
     input.type = 'text';
     input.placeholder = 'Search nodes…';
-    input.className = 'input input-sm input-bordered';
+    input.className = 'nb-input kg-search-input';
     input.addEventListener('keydown', (e) => {
       if (e.key === 'Enter') onSearch && onSearch(input.value.trim());
     });
 
     const searchBtn = document.createElement('button');
-    searchBtn.className = 'btn btn-sm';
+    searchBtn.className = 'nb-btn btn-xs nb-cta';
     searchBtn.textContent = 'Go';
     searchBtn.addEventListener('click', () => onSearch && onSearch(input.value.trim()));
 
     const labelToggle = document.createElement('button');
-    labelToggle.className = 'btn btn-sm';
+    labelToggle.className = 'nb-btn btn-xs';
     labelToggle.textContent = 'Labels';
     labelToggle.addEventListener('click', () => onToggleLabels && onToggleLabels());
 
     const centerBtn = document.createElement('button');
-    centerBtn.className = 'btn btn-sm';
+    centerBtn.className = 'nb-btn btn-xs';
     centerBtn.textContent = 'Center';
     centerBtn.addEventListener('click', () => onCenter && onCenter());
 
@@ -112,15 +112,15 @@
 
   function attachLegends(container, typeColor, relColor) {
     const wrap = document.createElement('div');
-    wrap.className = 'absolute bottom-2 left-2 z-10 flex gap-6 flex-wrap';
+    wrap.className = 'kg-legend';
 
     function section(title, items) {
       const sec = document.createElement('div');
-      sec.className = 'rounded-box bg-base-100/80 backdrop-blur shadow p-2';
-      const h = document.createElement('div'); h.className = 'text-xs opacity-70 mb-1'; h.textContent = title; sec.appendChild(h);
+      sec.className = 'nb-card kg-legend-card';
+      const h = document.createElement('div'); h.className = 'kg-legend-heading'; h.textContent = title; sec.appendChild(h);
       items.forEach(([label, color]) => {
-        const row = document.createElement('div'); row.className = 'flex items-center gap-2 text-xs';
-        const sw = document.createElement('span'); sw.style.background = color; sw.style.width = '10px'; sw.style.height = '10px'; sw.style.borderRadius = '9999px';
+        const row = document.createElement('div'); row.className = 'kg-legend-row';
+        const sw = document.createElement('span'); sw.style.background = color; sw.style.width = '12px'; sw.style.height = '12px'; sw.style.border = '2px solid #000';
         const t = document.createElement('span'); t.textContent = label || '—';
         row.appendChild(sw); row.appendChild(t); sec.appendChild(row);
       });

html-router/assets/toast.js

@@ -6,33 +6,31 @@
         return;
       }
       const alert = document.createElement('div');
-      // Base classes for the alert
-      alert.className = `alert alert-${type} mt-2 shadow-md flex flex-col text-start`;
+      alert.className = `alert toast-alert alert-${type}`;
+      alert.style.opacity = '1';
+      alert.style.transition = 'opacity 0.5s ease-out';
 
-      // Build inner HTML based on whether title is provided
-      let innerHTML = '';
       if (title) {
-        innerHTML += `<div class="font-bold text-lg">${title}</div>`; // Title element
-        innerHTML += `<div>${description}</div>`; // Description element
-      } else {
-        // Structure without title
-        innerHTML += `<span>${description}</span>`;
+        const titleEl = document.createElement('div');
+        titleEl.className = 'toast-alert-title';
+        titleEl.textContent = title;
+        alert.appendChild(titleEl);
       }
 
-      alert.innerHTML = innerHTML;
+      const bodyEl = document.createElement(title ? 'div' : 'span');
+      bodyEl.textContent = description;
+      alert.appendChild(bodyEl);
+
       container.appendChild(alert);
 
       // Auto-remove after a delay
       setTimeout(() => {
-        // Optional: Add fade-out effect
         alert.style.opacity = '0';
-        alert.style.transition = 'opacity 0.5s ease-out';
-        setTimeout(() => alert.remove(), 500); // Remove after fade
-      }, 3000); // Start fade-out after 3 seconds
+        setTimeout(() => alert.remove(), 500);
+      }, 3000);
     };
 
     document.body.addEventListener('toast', function (event) {
-      console.log(event);
       // Extract data from the event detail, matching the Rust payload
       const detail = event.detail;
       if (detail && detail.description) {
@@ -54,4 +52,3 @@
       if (container) container.innerHTML = '';
     });
   })
-