Noo site: match avatar menu to app, add external storage highlight

Co-Authored-By: Claude Code <noreply@anthropic.com>

noo/index.html

@@ -175,6 +175,30 @@
           <div class="sheet" id="shareDemo"></div>
         </div>
       </div>
+
+      <!-- External storage -->
+      <div class="showcase">
+        <div class="showcase-copy">
+          <span class="feat-ic"><svg class="i" width="22" height="22"><use href="icons.svg#i-folder"/></svg></span>
+          <h3>Mounted external storage, built in</h3>
+          <p>Folders your admin mounts through Nextcloud's External storage
+          app — SMB shares, S3 buckets, SFTP, even another cloud — show up
+          in Files like any other folder. Browse, preview, upload and share
+          them exactly the same way; Noo only ever talks to your Nextcloud,
+          which does the rest.</p>
+        </div>
+        <div class="showcase-demo">
+          <div class="mock-card">
+            <h5 class="mock-title">Files</h5>
+            <div class="mock-group">
+              <div class="srow"><span class="srow-ic"><svg class="i" width="20" height="20"><use href="icons.svg#i-folder"/></svg></span><span class="srow-main"><b>Documents</b><i>Nextcloud storage</i></span></div>
+              <div class="srow"><span class="srow-ic"><svg class="i" width="20" height="20"><use href="icons.svg#i-folder"/></svg></span><span class="srow-main"><b>NAS (SMB)</b><i>External storage</i></span></div>
+              <div class="srow"><span class="srow-ic"><svg class="i" width="20" height="20"><use href="icons.svg#i-folder"/></svg></span><span class="srow-main"><b>Archive (S3)</b><i>External storage</i></span></div>
+              <div class="srow"><span class="srow-ic"><svg class="i" width="20" height="20"><use href="icons.svg#i-folder"/></svg></span><span class="srow-main"><b>Work drive (SFTP)</b><i>External storage</i></span></div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </section>
 

noo/script.js

@@ -218,12 +218,11 @@
         hidden.map((id) => `<button class="np-dr" data-tab="${id}">${ic(TABS[id].icon, 20)}<span>${TABS[id].label}</span></button>`).join("") +
         `<div class="np-sep"></div><button class="np-dr">${ic("settings", 20)}<span>Settings</span></button></nav>`;
     } else if (s.overlay === "avatar") {
-      overlay = `<div class="np-scrim" data-act="close"></div><div class="np-pop" role="menu">` +
+      const rows = hidden.map((id) => `<button class="np-dr" data-tab="${id}">${ic(TABS[id].icon, 20)}<span>${TABS[id].label}</span></button>`).join("");
-        `<div class="np-acct">${avatar("A", "#DA9AC7", 32, true)}<span><b>ayushya</b><i>cloud.example.com</i></span>${ic("check", 18, "b-sync")}</div>` +
+      overlay = `<div class="np-scrim np-scrim-clear" data-act="close"></div><div class="np-pop" role="menu">` +
-        `<div class="np-acct">${avatar("D", "#8DCDE2", 32)}<span><b>ayushya.dev</b><i>drive.ayushya.dev</i></span></div>` +
+        `<button class="np-acct" data-act="close"><span><b>ayushya</b><i>cloud.example.com</i></span>${avatar("A", "#DA9AC7", 40, true)}</button>` +
-        `<div class="np-sep"></div>` +
+        (rows ? `<div class="np-sep"></div>${rows}` : "") +
-        hidden.map((id) => `<button class="np-dr" data-tab="${id}">${ic(TABS[id].icon, 20)}<span>${TABS[id].label}</span></button>`).join("") +
+        `<div class="np-sep"></div><button class="np-dr" data-act="close">${ic("settings", 20)}<span>Settings</span></button></div>`;
-        `<div class="np-sep"></div><button class="np-dr">${ic("settings", 20)}<span>Settings</span></button></div>`;
     }
 
     host.innerHTML =

noo/styles.css

@@ -971,20 +971,25 @@ button.srow:hover { filter: brightness(0.98); }
 }
 .np-dr:hover { background: var(--sf2); }
 .np-sep { height: 1px; background: var(--ln); margin: 8px 8px; }
+.np-scrim-clear { background: transparent; }
 .np-pop {
-  position: absolute; top: 80px; right: 12px; width: 260px;
+  position: absolute; top: 28px; left: 16px; right: 16px;
   background: var(--sf);
   border: 1px solid var(--ln);
   border-radius: var(--radius-card);
   padding: 8px;
   z-index: 7;
-  box-shadow: 0 24px 48px rgba(30, 0, 47, 0.14);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 24px 48px rgba(30, 0, 47, 0.14);
-  animation: drawerIn var(--motion-base) var(--ease);
+  transform-origin: top right;
+  animation: popIn var(--motion-fast, 150ms) var(--ease);
 }
-.np-acct { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
+@keyframes popIn { from { transform: scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
-.np-acct span:not(.av) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.np-pop .np-dr { height: 48px; }
-.np-acct b { font-size: 14px; font-weight: 600; }
+.np-acct { display: flex; align-items: center; gap: 12px; padding: 8px 12px; width: 100%; text-align: left; }
+.np-acct span:not(.av) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.np-acct b { font-size: 16px; font-weight: 600; }
 .np-acct i { font-style: normal; font-size: 12px; color: var(--fg3); }
+.np-pop .np-sep { margin: 6px 4px; }
 .np-pop .av-current { box-shadow: none; }
 
 /* ---------- motion ---------- */