@sksoftofficial/mindroot 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sksoftofficial/mindroot",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Long-term memory for AI agents: hybrid-searched memories over human-editable markdown notes. 100% local — offline ONNX embeddings, SQLite FTS5, MCP server, REST API, CLI, dashboard. No cloud, no API keys.",
   "homepage": "https://skbilisim.com/en/projects/mindroot",
   "type": "module",

package/src/dashboard/index.html

@@ -44,7 +44,16 @@
   #gate { margin:auto; text-align:center; display:flex; flex-direction:column; gap:14px; width:min(420px, calc(100% - 32px)); padding:28px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.28) }
   #gate input { width:100% }
   main { display:flex; flex:1; overflow:hidden }
-  aside { position:relative; z-index:1; width:230px; background:var(--bg2); border-right:1px solid var(--border-soft); overflow-y:auto; padding:10px 8px; box-shadow:8px 0 20px rgba(0,0,0,.12) }
+  aside { position:relative; z-index:1; width:230px; background:var(--bg2); border-right:1px solid var(--border-soft); overflow-y:auto; padding:10px 14px; box-shadow:8px 0 20px rgba(0,0,0,.12); display:flex; flex-direction:column; gap:8px; transition:width 160ms ease-out }
+  .sidebar-toggle { flex:none; height:34px; padding:0; display:flex; align-items:center; justify-content:center }
+  .sidebar-toggle svg { width:17px; height:17px; stroke:currentColor; transition:transform 160ms ease-out }
+  @media (min-width:701px) {
+    aside.collapsed { width:56px; padding:10px 12px }
+    aside.collapsed .sidebar-toggle svg { transform:rotate(180deg) }
+    aside.collapsed .proj { padding:7px 0; text-align:center; font-size:0 }
+    aside.collapsed .proj::before { content:attr(data-initial); font-size:12px; line-height:inherit }
+  }
+  #projList { display:flex; flex-direction:column; gap:2px }
   .proj { padding:7px 10px; border-radius:5px; cursor:pointer; color:var(--dim) }
   .proj:hover { background:var(--hover); color:var(--fg) }
   .proj.active { background:var(--accent-soft); color:#f2b46f }
@@ -89,7 +98,7 @@
   .editor-document { min-width:0 }
   .editor-title { max-width:320px; color:var(--fg); font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
   .editor-actions { justify-self:end }
-  .viewmode { display:inline-flex; gap:0; padding:2px; background:#191919; border:1px solid var(--border); border-radius:6px }
+  .viewmode { display:inline-flex; gap:2px; padding:2px; background:#191919; border:1px solid var(--border); border-radius:6px }
   .viewmode button { padding:4px 10px; background:transparent; border-color:transparent }
   .viewmode button:hover { background:var(--hover); border-color:transparent }
   .viewmode button.on { background:var(--accent-soft); color:#f2b46f; border-color:transparent }
@@ -141,12 +150,13 @@
     .header-lock-label { display:none }
     main { flex-direction:column }
     aside { width:100%; max-height:112px; border-right:0; border-bottom:1px solid var(--border-soft); padding:7px 8px; box-shadow:0 8px 20px rgba(0,0,0,.12) }
-    #projList { display:flex; gap:4px; overflow-x:auto }
+    #projList { flex-direction:row; gap:4px; overflow-x:auto }
     .proj { flex:none; white-space:nowrap }
     #content { padding:14px }
     .workspace-head { align-items:flex-start; flex-wrap:wrap; gap:8px; margin-bottom:12px; padding-bottom:10px }
     button, input { min-height:44px; touch-action:manipulation }
     .header-lock, .back-button { width:44px; height:44px }
+    .sidebar-toggle { display:none }
     .proj, .tab { min-height:44px; display:flex; align-items:center }
     .tab { padding:5px 8px }
     .delete-project { padding:5px 9px }
@@ -202,7 +212,14 @@
 </div>
 
 <main id="app" style="display:none">
-  <aside><div id="projList"></div></aside>
+  <aside>
+    <button class="sidebar-toggle" type="button" title="Shrink menu" aria-label="Shrink menu" aria-expanded="true" onclick="toggleSidebar()">
+      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="m14 7-5 5 5 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </button>
+    <div id="projList"></div>
+  </aside>
   <section id="content"></section>
 </main>
 
@@ -300,6 +317,7 @@ async function renderProjects() {
   for (const r of rows) {
     const div = document.createElement("div");
     div.className = "proj" + (r.slug === currentProject ? " active" : "");
+    div.dataset.initial = r.slug.slice(0, 2).toUpperCase();
     div.textContent = r.slug;
     div.title = r.docs + " notes, " + r.memories + " memories";
     div.onclick = () => selectProject(r.slug);
@@ -382,6 +400,24 @@ async function renderNotes(view) {
 
 let mdMode = localStorage.getItem("mindroot_mdmode") || "preview";
 
+let sidebarCollapsed = localStorage.getItem("mindroot_sidebar") === "collapsed";
+function toggleSidebar() { setSidebar(!sidebarCollapsed); }
+function setSidebar(collapsed) {
+  sidebarCollapsed = collapsed;
+  localStorage.setItem("mindroot_sidebar", collapsed ? "collapsed" : "expanded");
+  applySidebar();
+}
+function applySidebar() {
+  const aside = document.querySelector("main aside");
+  const btn = $(".sidebar-toggle");
+  aside.classList.toggle("collapsed", sidebarCollapsed);
+  btn.setAttribute("aria-expanded", String(!sidebarCollapsed));
+  const label = sidebarCollapsed ? "Expand menu" : "Shrink menu";
+  btn.title = label;
+  btn.setAttribute("aria-label", label);
+}
+applySidebar();
+
 function renderMd(text) {
   if (window.marked && window.DOMPurify) {
     marked.setOptions({ gfm: true, breaks: true });