Mobile UI

ui/script.js

@@ -13,6 +13,9 @@ document.addEventListener('DOMContentLoaded', () => {
     const lengthInput = document.getElementById('length');
     const lengthValDisplay = document.getElementById('length-val');
     const generateBtn = document.getElementById('generate-more-btn');
+    const sidebarToggle = document.getElementById('sidebar-toggle');
+    const sidebar = document.getElementById('sidebar');
+    const acceptSuggestionBtn = document.getElementById('accept-suggestion-btn');
 
     let currentSuggestion = '';
     let isFetching = false;
@@ -26,6 +29,16 @@ document.addEventListener('DOMContentLoaded', () => {
         lengthValDisplay.textContent = lengthInput.value;
     };
 
+    sidebarToggle.addEventListener('click', () => {
+        sidebar.classList.toggle('open');
+    });
+
+    const closeSidebarOnMobile = () => {
+        if (window.innerWidth <= 768) {
+            sidebar.classList.remove('open');
+        }
+    };
+
     tempInput.addEventListener('input', updateUI);
     lengthInput.addEventListener('input', updateUI);
     nGramSelect.addEventListener('change', () => {
@@ -40,8 +53,15 @@ document.addEventListener('DOMContentLoaded', () => {
         if (prompt.trim().length > 0) fetchPrediction(prompt);
     };
 
-    tempInput.addEventListener('change', triggerUpdate);
-    lengthInput.addEventListener('change', triggerUpdate);
+    tempInput.addEventListener('change', () => {
+        triggerUpdate();
+        // Optional: close sidebar on change if on mobile
+        // closeSidebarOnMobile();
+    });
+    
+    lengthInput.addEventListener('change', () => {
+        triggerUpdate();
+    });
 
     // --- Core Functions ---
 
@@ -88,6 +108,13 @@ document.addEventListener('DOMContentLoaded', () => {
         const editorText = editor.value;
         const space = (editorText.length > 0 && !/\s$/.test(editorText)) ? ' ' : '';
         suggestionOverlay.textContent = editorText + space + currentSuggestion;
+        
+        // Show/hide accept button
+        if (currentSuggestion) {
+            acceptSuggestionBtn.classList.add('visible');
+        } else {
+            acceptSuggestionBtn.classList.remove('visible');
+        }
     };
     
     const insertText = (text) => {
@@ -120,9 +147,18 @@ document.addEventListener('DOMContentLoaded', () => {
             fetchPrediction(editor.value);
         }
     });
+
+    acceptSuggestionBtn.addEventListener('click', () => {
+        if (currentSuggestion) {
+            insertText(currentSuggestion);
+            fetchPrediction(editor.value);
+            editor.focus();
+        }
+    });
     
     generateBtn.addEventListener('click', () => {
         fetchPrediction(editor.value, 50);
+        closeSidebarOnMobile();
     });
 
     // Sync scroll