Add collapsable bottom bar to chat screen.

app.js

@@ -63,6 +63,18 @@ function setupEventListeners() {
         sendMessage();
     });
 
+    elements.chatBottomBar.style.height = `${elements.chatInputPanel.offsetHeight}px`;
+    const observer = new ResizeObserver(() => {
+        elements.chatBottomBar.style.height =
+            `${elements.chatInputPanel.offsetHeight}px`;
+    });
+
+    observer.observe(elements.chatInputPanel);
+    elements.chatBottomBarBtn.addEventListener('click', ui.toggleChatBottomBar);
+    elements.chatBottomBar.addEventListener('click', (e) => {
+        if (e.target == e.currentTarget) ui.toggleChatBottomBar();
+    });
+
     elements.backToSidebarBtn.addEventListener('click', () => {
         elements.sidebar.classList.remove('hidden');
         elements.activeChatContainer.classList.add('hidden');

index.html

@@ -105,10 +105,9 @@
                 </div>
 
                 <!-- Input Panel -->
-                <footer class="chat-input-panel">
+                <footer id="chat-input-panel" class="chat-input-panel">
                     <div class="input-actions-left">
-                        <button class="icon-btn send-btn mif-attachment mif-3x" title="Attach file"></button>
+                        <button id="chat-bottom-bar-btn" class="icon-btn mif-expand-less mif-3x" title="Expand"></button>
-                        <!-- <button class="icon-btn" title="Add emoji"><i data-lucide="smile"></i></button> -->
                     </div>
                     <form class="input-form" id="message-form">
                         <input type="text" id="message-input" placeholder="Type a message..." autocomplete="off">
@@ -116,6 +115,10 @@
                         </button>
                     </form>
                 </footer>
+                <!-- Bottom Bar -->
+                <footer id="chat-bottom-bar" class="chat-expanded-panel alternate-panel collapsed">
+                    <button class="icon-btn send-btn mif-attachment mif-2x" title="Attach file"></button>
+                </footer>
             </div>
         </main>
     </div>

style.css

@@ -448,6 +448,8 @@ input:focus {
     display: flex;
     flex-direction: column;
     height: 100%;
+    position: relative;
+    overflow: hidden;
 }
 
 .chat-header {
@@ -590,12 +592,44 @@ input:focus {
 
 /* Chat Input Panel */
 .chat-input-panel {
-    padding: 20px 24px;
+    padding: .8rem;
     display: flex;
     align-items: center;
     gap: 16px;
 }
 
+.alternate-panel {
+    background-color: var(--bg-secondary);
+    padding: .4em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: .6em;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transform: translateY(0);
+    transition: transform .3s;
+    flex: 1;
+}
+
+.alternate-panel.collapsed {
+    transform: translateY(100%);
+}
+
+.alternate-panel button {
+    border: medium solid white;
+    border-radius: 100%;
+    background-color: transparent;
+}
+
+.alternate-panel button:hover {
+    border-color: white;
+    background-color: white;
+    color: black;
+}
+
 .chat-input-panel button {
     background-color: transparent;
 }

ui.js

@@ -28,7 +28,9 @@ export const elements = {
     inputSession: document.getElementById('settings-session'),
     inputApiKey: document.getElementById('settings-api-key'),
     loggedUserName: document.getElementById('pandora-username'),
-    // userIcon: document.getElementById('pandora-user-icon')
+    chatBottomBar: document.getElementById('chat-bottom-bar'),
+    chatBottomBarBtn: document.getElementById('chat-bottom-bar-btn'),
+    chatInputPanel: document.getElementById('chat-input-panel'),
 };
 
 export const ui = {
@@ -242,5 +244,9 @@ export const ui = {
         groupDiv.appendChild(bubble);
         
         elements.messagesContainer.appendChild(groupDiv);
+    },
+
+    toggleChatBottomBar() {
+        elements.chatBottomBar.classList.toggle("collapsed");
     }
 };