Update static/js/script.js

static/js/script.js

@@ -1,6 +1,6 @@
 /**
  * ORBIT – Educational Research Assistant
- * FULL V-MASTER SCRIPT - DEEP ANALYZED, CACHE BUSTED, FORCED FREE MODELS
+ * FULL V-MASTER SCRIPT - TOAST FIXED (VANILLA CSS), BUTTON SPINNER, DEEP ANALYZED
  */
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -14,7 +14,7 @@ document.addEventListener('DOMContentLoaded', () => {
     let isBusy = false;
     let pdfText = ""; let pdfFilename = "";
 
-    // 14 MODEL FREE SESUAI LIST LU
+    // 14 MODEL FREE
     const DEFAULT_OR_MODELS = [
         "nvidia/nemotron-3-nano-omni-30b-a3b-reasoning:free",
         "baidu/cobuddy:free",
@@ -32,21 +32,37 @@ document.addEventListener('DOMContentLoaded', () => {
         "meta-llama/llama-3.3-70b-instruct:free"
     ];
 
-    // TOAST NOTIFICATION (Sistem Pop-Up Sukses)
+    // TOAST NOTIFICATION (DIJAMIN MUNCUL - MURNI VANILLA CSS)
     function showToast(message, isError = false) {
         let toast = $('orbit-toast');
         if (!toast) {
             toast = document.createElement('div');
             toast.id = 'orbit-toast';
+            // Styling murni JS biar nggak diblokir Tailwind CDN
+            toast.style.cssText = `
+                position: fixed; top: 24px; left: 50%; transform: translate(-50%, -20px);
+                padding: 12px 24px; border-radius: 50px; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+                font-size: 14px; font-weight: 600; color: white; z-index: 99999;
+                opacity: 0; transition: all 0.3s ease-in-out; display: flex; align-items: center; gap: 8px;
+                pointer-events: none;
+            `;
             document.body.appendChild(toast);
         }
-        const bgClass = isError ? 'bg-red-500' : 'bg-emerald-500';
-        toast.className = `fixed top-6 left-1/2 transform -translate-x-1/2 px-5 py-2.5 rounded-full shadow-2xl text-sm font-semibold z-[9999] transition-all duration-300 flex items-center gap-2 text-white ${bgClass}`;
-        toast.style.opacity = '0';
-        toast.style.transform = 'translate(-50%, -20px)';
-        toast.innerHTML = `<span>${message}</span>`;
-        requestAnimationFrame(() => { toast.style.opacity = '1'; toast.style.transform = 'translate(-50%, 0)'; });
-        setTimeout(() => { toast.style.opacity = '0'; toast.style.transform = 'translate(-50%, -20px)'; }, 3000);
+        
+        toast.style.backgroundColor = isError ? '#ef4444' : '#10b981'; // Merah / Hijau
+        toast.innerHTML = isError ? `<span>❌</span> <span>${message}</span>` : `<span>✅</span> <span>${message}</span>`;
+        
+        // Animasi Masuk
+        setTimeout(() => {
+            toast.style.opacity = '1';
+            toast.style.transform = 'translate(-50%, 0)';
+        }, 10);
+        
+        // Animasi Keluar
+        setTimeout(() => {
+            toast.style.opacity = '0';
+            toast.style.transform = 'translate(-50%, -20px)';
+        }, 3000);
     }
 
     // 1. DATA RECOVERY
@@ -79,10 +95,9 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
-    // 3. BOOT & INIT (DENGAN CACHE BUSTER API)
+    // 3. BOOT & INIT (CACHE BUSTER AKTIF)
     async function init() {
         try {
-            // cache: 'no-store' WAJIB biar gak baca API nyangkut
             const me = await fetch('/api/me', { cache: 'no-store' });
             if(me.status === 401) { window.location.href = '/login'; return; }
             if(me.ok) {
@@ -100,12 +115,10 @@ document.addEventListener('DOMContentLoaded', () => {
                 appSettings.models_agentrouter = safeArr(appSettings.models_agentrouter);
                 appSettings.models_openai = safeArr(appSettings.models_openai);
 
-                // PAKSA TIMPA MODEL OPENROUTER DENGAN 14 MODEL FREE (Jalan 1x saja)
-                if (!localStorage.getItem('orbit_force_free_v4')) {
+                if (!localStorage.getItem('orbit_force_free_v5')) {
                     appSettings.models_openrouter = [...DEFAULT_OR_MODELS];
-                    localStorage.setItem('orbit_force_free_v4', 'true');
+                    localStorage.setItem('orbit_force_free_v5', 'true');
                     
-                    // Langsung tembak ke backend biar nyimpen
                     fetch('/api/settings', { 
                         method: 'POST', 
                         headers: {'Content-Type': 'application/json'}, 
@@ -299,11 +312,13 @@ document.addEventListener('DOMContentLoaded', () => {
     bindAdd('btn-add-ar', 'inp-ar', 'models_agentrouter');
     bindAdd('btn-add-oai', 'inp-oai', 'models_openai');
 
-    // SAVE SETTINGS & TOAST & CACHE BUST API
+    // MANTAP: ANIMASI BUTTON SAVE + TOAST IJO + AUTO CLOSE
     addEvt('btn-save-settings', async () => {
         const btn = $('btn-save-settings');
         const originalText = btn.textContent;
-        btn.textContent = "Saving...";
+        
+        // Ubah tombol jadi "Saving..." plus spinner bulet
+        btn.innerHTML = `<svg class="w-4 h-4 animate-spin inline mr-2" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>Saving...`;
         btn.disabled = true;
 
         const payload = {
@@ -317,26 +332,35 @@ document.addEventListener('DOMContentLoaded', () => {
             models_openai: safeArr(appSettings.models_openai),
             current_model: $('model-select').value
         };
+
         try {
             const res = await fetch('/api/settings', { 
                 method: 'POST', 
                 headers: {'Content-Type': 'application/json'}, 
                 body: JSON.stringify(payload) 
             });
+            
             if(res.ok) { 
                 appSettings = await res.json(); 
                 populateModelSelect(); 
-                $('settings-modal').classList.add('hidden');
-                showToast("Settings saved successfully!"); 
+                
+                // Kasih delay dikit biar kerasa "kerja", terus tutup & munculin Notif
+                setTimeout(() => {
+                    $('settings-modal').classList.add('hidden');
+                    showToast("Settings saved successfully!");
+                }, 300);
+
             } else {
-                throw new Error("Gagal menyimpan ke server");
+                throw new Error("Gagal terhubung ke database server");
             }
         } catch(e) { 
             console.error(e);
             showToast(`Error: ${e.message}`, true); 
         } finally {
-            btn.textContent = originalText;
-            btn.disabled = false;
+            setTimeout(() => {
+                btn.textContent = originalText;
+                btn.disabled = false;
+            }, 300);
         }
     });