Upload folder using huggingface_hub

frontend/app.js

@@ -5,12 +5,18 @@ const API_BASE = ""; // "" = same origin (HF Spaces). "http://localhost:8000" fo
 let sessions = [];          // [{id, title, messages:[]}]
 let activeSessionId = null;
 let isLoading = false;
+let sidebarCollapsed = localStorage.getItem("sidebarCollapsed") === "true";
 
 // ── Init ────────────────────────────────────────────────────────
 const textarea  = document.getElementById("query-input");
 const sendBtn   = document.getElementById("send-btn");
 const msgsList  = document.getElementById("messages-list");
 
+// Apply sidebar collapsed state on load
+if (sidebarCollapsed) {
+  document.getElementById("sidebar").classList.add("collapsed");
+}
+
 textarea.addEventListener("input", () => {
   textarea.style.height = "auto";
   textarea.style.height = Math.min(textarea.scrollHeight, 140) + "px";
@@ -26,6 +32,14 @@ function showScreen(name) {
   document.getElementById("screen-" + name).classList.add("active");
 }
 
+// ── Sidebar toggle ───────────────────────────────────────────────
+function toggleSidebar() {
+  const sidebar = document.getElementById("sidebar");
+  sidebarCollapsed = !sidebarCollapsed;
+  sidebar.classList.toggle("collapsed");
+  localStorage.setItem("sidebarCollapsed", sidebarCollapsed);
+}
+
 // ── Session management ───────────────────────────────────────────
 function createSession(firstQuery) {
   const id = Date.now();

frontend/index.html

@@ -20,6 +20,13 @@
         <span class="brand-name">NyayaSetu</span>
         <span class="brand-sub">Legal Research</span>
       </div>
+      <button class="sidebar-toggle" onclick="toggleSidebar()" title="Toggle sidebar">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="3" y1="6" x2="21" y2="6"></line>
+          <line x1="3" y1="12" x2="21" y2="12"></line>
+          <line x1="3" y1="18" x2="21" y2="18"></line>
+        </svg>
+      </button>
     </div>
 
     <button class="new-chat-btn" onclick="newChat()">

frontend/style.css

@@ -52,6 +52,53 @@ body {
   flex-direction: column;
   flex-shrink: 0;
   overflow: hidden;
+  transition: width 0.3s ease;
+}
+
+.sidebar.collapsed {
+  width: 60px;
+}
+
+.sidebar.collapsed .brand-text,
+.sidebar.collapsed .new-chat-btn span:not(.new-chat-icon),
+.sidebar.collapsed .sidebar-section-label,
+.sidebar.collapsed .session-label,
+.sidebar.collapsed .session-count,
+.sidebar.collapsed .footer-disclaimer,
+.sidebar.collapsed .footer-meta {
+  display: none;
+}
+
+.sidebar.collapsed .new-chat-btn {
+  width: calc(100% - 16px);
+  margin: 12px 8px;
+  padding: 8px;
+  justify-content: center;
+}
+
+.sidebar.collapsed .analytics-btn {
+  width: calc(100% - 16px);
+  margin: 0 8px 8px;
+  padding: 10px 8px;
+  justify-content: center;
+}
+
+.sidebar.collapsed .new-chat-icon,
+.sidebar.collapsed .analytics-icon {
+  margin: 0;
+}
+
+.sidebar.collapsed .sessions-list {
+  padding: 0 8px;
+}
+
+.sidebar.collapsed .session-item {
+  padding: 9px 10px;
+  justify-content: center;
+}
+
+.sidebar.collapsed .sidebar-footer {
+  padding: 8px 8px;
 }
 
 .sidebar-brand {
@@ -60,6 +107,29 @@ body {
   gap: 12px;
   padding: 16px 16px 12px;
   border-bottom: 1px solid var(--border);
+  position: relative;
+}
+
+.sidebar-toggle {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--text-3);
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color var(--transition), background var(--transition);
+}
+
+.sidebar-toggle:hover {
+  color: var(--text-1);
+  background: var(--navy-3);
 }
 
 .brand-mark {