Improve feed UI (#66)

* Reduce spacing

* Implement wide-mode option

Toggle wide or narrow layout via /wide

services/web/requirements.txt

@@ -2,4 +2,4 @@ flask
 flask_limiter
 python-dotenv
 requests
-gunicorn
+gunicorn

services/web/src/static/js/chatCommandHandler.js

@@ -1,10 +1,11 @@
 export class ChatCommandHandler {
-  constructor(onModelChange, onIndexChange, onStreamChange, onClear, onToggleTheme, urlParamsHandler) {
+  constructor(onModelChange, onIndexChange, onStreamChange, onClear, onToggleTheme, onToggleWide, urlParamsHandler) {
     this.onModelChange = onModelChange;
     this.onIndexChange = onIndexChange;
     this.onStreamChange = onStreamChange;
     this.onClear = onClear;
     this.onToggleTheme = onToggleTheme;
+    this.onToggleWide = onToggleWide;
     this.urlParamsHandler = urlParamsHandler;
   }
 
@@ -56,6 +57,14 @@ export class ChatCommandHandler {
         }
         return { type: "system", content: "Theme toggled" };
       },
+      "/wide": () => {
+        this.onToggleWide();
+        if (this.urlParamsHandler) {
+          const isWide = document.documentElement.classList.contains('wide-mode');
+          this.urlParamsHandler.updateURL('wide', isWide ? "1" : "0");
+        }
+        return { type: "system", content: "Wide mode toggled" };
+      },
     };
 
     const command = commands[parts[0]];
@@ -70,9 +79,10 @@ export class ChatCommandHandler {
   \`/stream [0/1]\` - Enable or disable response streaming
   \`/clear\` - Clear chat history
   \`/theme\` - Toggle theme
+  \`/wide\` - Toggle wide mode
   \`/help\` - Show this help message
   
   You can also set initial values using URL parameters:
-  \`?model=name&index=name&stream=1&theme=dark\``;
+  \`?model=name&index=name&stream=1&theme=dark&wide=1\``;
   }
-}
+}

services/web/src/static/js/main.js

@@ -35,12 +35,20 @@ document.addEventListener("DOMContentLoaded", () => {
       elements.chatMessages.innerHTML = "";
     },
     () => uiManager.toggleTheme(),
+    () => uiManager.toggleWideMode(),
     null
   );
 
   urlParamsHandler = new URLParamsHandler(chatCommandHandler);
   chatCommandHandler.urlParamsHandler = urlParamsHandler;
 
+  if (localStorage.wideMode === 'true' || urlParamsHandler.getParam('wide') === '1') {
+    document.documentElement.classList.add('wide-mode');
+    const mainContainer = document.getElementById('main');
+    mainContainer.classList.remove('max-w-3xl');
+    mainContainer.classList.add('max-w-full');
+  }
+
   urlParamsHandler.handleURLParams();
 
   elements.messageInput.addEventListener("keydown", (e) => {

services/web/src/static/js/messageRenderer.js

@@ -30,7 +30,7 @@ export class MessageRenderer {
     messageContainer.className = `flex ${type === "user" ? "justify-end" : "justify-start"} mb-4`;
 
     const messageDiv = document.createElement("div");
-    messageDiv.className = "message p-4 rounded-3xl min-w-48 max-w-3xl";
+    messageDiv.className = "message p-4 rounded-3xl min-w-48";
 
     const typeClasses = {
       user: "bg-brand-b-900 selection:bg-brand-b-700 text-white user-message",

services/web/src/static/js/uiManager.js

@@ -103,6 +103,21 @@ export class UIManager {
     }
   }
 
+  toggleWideMode() {
+    const mainContainer = document.getElementById('main');
+    if (document.documentElement.classList.contains('wide-mode')) {
+      document.documentElement.classList.remove('wide-mode');
+      mainContainer.classList.remove('max-w-full');
+      mainContainer.classList.add('max-w-3xl');
+      localStorage.wideMode = 'false';
+    } else {
+      document.documentElement.classList.add('wide-mode');
+      mainContainer.classList.remove('max-w-3xl');
+      mainContainer.classList.add('max-w-full');
+      localStorage.wideMode = 'true';
+    }
+  }
+
   isInProcessingState() {
     return this.isProcessing;
   }

services/web/src/static/js/urlParamsHandler.js

@@ -21,6 +21,11 @@ export class URLParamsHandler {
     }
   }
 
+  getParam(param) {
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get(param);
+  }
+
   updateURL(param, value) {
     const url = new URL(window.location);
     if (value === null || value === '') {
@@ -30,4 +35,4 @@ export class URLParamsHandler {
     }
     window.history.replaceState({}, '', url);
   }
-}
+}

services/web/src/static/site.webmanifest

@@ -18,4 +18,4 @@
   "theme_color": "#ffffff",
   "background_color": "#ffffff",
   "display": "standalone"
-}
+}

services/web/src/tailwind.config.js

@@ -39,4 +39,4 @@ module.exports = {
     }
   },
   plugins: [],
-};
+};

services/web/src/templates/index.html

@@ -27,7 +27,7 @@
 </head>
 
 <body class="bg-brand-a-50 dark:bg-brand-b-900 h-screen flex flex-col">
-    <div class="max-w-3xl mx-auto w-full h-full p-4 flex flex-col">
+    <div id="main" class="max-w-3xl mx-auto w-full h-full p-4 flex flex-col">
         <header class="w-full">
             <div class="flex h-14 items-center px-4 md:px-6">
                 <!-- project name -->
@@ -78,7 +78,7 @@
         <!-- user input -->
         <div
             class="flex-none bg-white dark:bg-brand-b-800 ring-1 ring-brand-a-900/5 dark:ring-brand-b-100/10 rounded-3xl p-3">
-            <div class="flex space-x-3">
+            <div class="flex space-x-2">
                 <textarea
                     class="max-h-72 min-h-12 h-12 flex-1 border dark:border-brand-b-600 rounded-2xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-brand-b-900 dark:focus:ring-brand-b-100 resize-none overflow-hidden bg-white dark:bg-brand-b-700 text-brand-a-900 dark:text-brand-b-100 selection:bg-brand-b-400 selection:dark:bg-brand-b-600 touch-manipulation text-ellipsis whitespace-nowrap"
                     enterkeyhint="send" id="message-input" placeholder="How can Chipper help you today?"
@@ -106,4 +106,4 @@
     <script src="static/js/main.js" type="module"></script>
 </body>
 
-</html>
+</html>