From 9d5118f973bc89826bdd535ec0b796336fa8d431 Mon Sep 17 00:00:00 2001
From: N0VA <n0va@krzak.org>
Date: Tue, 6 Jan 2026 21:32:01 +0100
Subject: [PATCH] Mobile UI

---
 ui/index.html |  27 ++++++++++-
 ui/script.js  |  40 +++++++++++++++-
 ui/style.css  | 130 ++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 193 insertions(+), 4 deletions(-)
diff --git a/ui/index.html b/ui/index.html
index 697b6c3..4b462ff 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -7,9 +7,29 @@
         <link rel="stylesheet" href="/ui/style.css" />
     </head>
     <body>
+        <div class="mobile-header">
+            <div class="brand-wrapper">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="white"
+                    class="sparkle-icon"
+                >
+                    <path
+                        d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"
+                    />
+                </svg>
+                <h1 class="brand">Kreatyw</h1>
+            </div>
+            <button id="sidebar-toggle" class="btn-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+            </button>
+        </div>
         <div class="app-layout">
-            <aside class="sidebar">
-                <div class="sidebar-header">
+            <aside class="sidebar" id="sidebar">
+                <div class="sidebar-header desktop-only">
                     <div class="brand-wrapper">
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -100,6 +120,9 @@
                             autofocus
                             placeholder="Start writing something poetic..."
                         ></textarea>
+                        <button id="accept-suggestion-btn" class="btn-floating" title="Accept Suggestion">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        </button>
                     </div>
                 </div>
             </main>
diff --git a/ui/script.js b/ui/script.js
index 249fd92..f87171e 100644
--- a/ui/script.js
+++ b/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
diff --git a/ui/style.css b/ui/style.css
index 9ec3be0..4728d0b 100644
--- a/ui/style.css
+++ b/ui/style.css
@@ -30,12 +30,63 @@ body {
     overflow: hidden;
 }
 
+@media (max-width: 768px) {
+    body {
+        height: auto;
+        overflow: auto;
+    }
+}
+
+/* Mobile Header */
+.mobile-header {
+    display: none;
+    background-color: var(--card);
+    border-bottom: 1px solid var(--border);
+    padding: 0.75rem 1rem;
+    justify-content: space-between;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.btn-icon {
+    background: transparent;
+    border: none;
+    color: var(--foreground);
+    cursor: pointer;
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.desktop-only {
+    display: block;
+}
+
+@media (max-width: 768px) {
+    .mobile-header {
+        display: flex;
+    }
+    .desktop-only {
+        display: none;
+    }
+}
+
 .app-layout {
     display: flex;
     height: 100vh;
     width: 100vw;
 }
 
+@media (max-width: 768px) {
+    .app-layout {
+        flex-direction: column;
+        height: calc(100vh - 57px); /* Subtract header height */
+    }
+}
+
 /* Sidebar */
 .sidebar {
     width: 300px;
@@ -45,12 +96,63 @@ body {
     flex-direction: column;
     padding: 1.5rem;
     flex-shrink: 0;
+    transition: transform 0.3s ease-in-out;
+}
+
+@media (max-width: 768px) {
+    .sidebar {
+        position: fixed;
+        top: 57px;
+        left: 0;
+        width: 100%;
+        height: calc(100vh - 57px);
+        z-index: 90;
+        transform: translateX(-100%);
+        border-right: none;
+    }
+    .sidebar.open {
+        transform: translateX(0);
+    }
+}
+
+/* Floating Action Button for Suggestions */
+.btn-floating {
+    position: absolute;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    width: 3.5rem;
+    height: 3.5rem;
+    border-radius: 50%;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    display: none; /* Hidden by default, shown when suggestion exists */
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    transition: transform 0.2s, opacity 0.2s;
+}
+
+.btn-floating:active {
+    transform: scale(0.95);
+}
+
+.btn-floating.visible {
+    display: flex;
 }
 
 .sidebar-header {
     margin-bottom: 2.5rem;
 }
 
+@media (max-width: 768px) {
+    .sidebar-header {
+        margin-bottom: 1rem;
+    }
+}
+
 .brand-wrapper {
     display: flex;
     align-items: center;
@@ -77,6 +179,13 @@ body {
     flex-grow: 1;
 }
 
+@media (max-width: 768px) {
+    .settings {
+        gap: 1rem;
+        margin-bottom: 1rem;
+    }
+}
+
 .setting-item {
     display: flex;
     flex-direction: column;
@@ -180,6 +289,12 @@ label {
     border-top: 1px solid var(--border);
 }
 
+@media (max-width: 768px) {
+    .sidebar-footer {
+        display: none; /* Hide footer on mobile to save space */
+    }
+}
+
 .status-indicator {
     display: flex;
     align-items: center;
@@ -216,6 +331,14 @@ label {
     background-color: var(--background);
 }
 
+@media (max-width: 768px) {
+    .editor-main {
+        padding: 1rem;
+        height: 100%;
+        width: 100%;
+    }
+}
+
 .editor-container {
     width: 100%;
     max-width: 800px;
@@ -246,6 +369,13 @@ label {
     box-sizing: border-box;
 }
 
+@media (max-width: 768px) {
+    #editor, #suggestion-overlay {
+        padding: 1rem;
+        font-size: 1rem;
+    }
+}
+
 #editor {
     position: relative;
     z-index: 2;
