clavarium 0.2.0-next.2 → 0.2.0-next.4

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "clavarium",
-  "version": "0.2.0-next.2",
+  "version": "0.2.0-next.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "clavarium",
-      "version": "0.2.0-next.2",
+      "version": "0.2.0-next.4",
       "license": "MIT",
       "dependencies": {
         "@xterm/addon-fit": "^0.11.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clavarium",
-  "version": "0.2.0-next.2",
+  "version": "0.2.0-next.4",
   "license": "MIT",
   "type": "module",
   "description": "A conversation is a VM with a terminal in it. Everything else is a folder.",

package/web/app.js

@@ -2164,7 +2164,7 @@
         if (!place) { const files = el('button', '', 'Files'); files.type = 'button'; files.dataset.act = 'files'; files.addEventListener('click', () => { embedFiles(holder, name); files.disabled = true; }); acts.prepend(files); }
         const diagram = el('div', 'as-graph'); diagram.append(el('p', 'hint', 'Drawing the branches...'));
         holder.append(facts, chapter('Branches', acts), diagram);
-        const back = place ? { label: 'Assets', go: () => { void paintAssets(); } } : { label: 'Assets', go: () => { void paintRoomAssets(); } };
+        const back = place ? { label: name, go: () => { void paintAssets(); } } : { label: 'Assets', go: () => { void paintRoomAssets(); } };
         review.addEventListener('click', () => { void openGit(name, { back }); });
         const [out, graph] = await Promise.all([getJson(`/git/${name}/outgoing`, null), getJson(`/git/${name}/graph`, null)]);
         facts.replaceChildren();
@@ -2253,6 +2253,7 @@
     function closeRoomAssets() {
         if (!assetsShown) return;
         assetsShown = false; $('cassets').hidden = true; unembedFiles(); paintViews();
+        if ($('cassets').contains($('gitview'))) shutGit();
     }
 
     /* ---- the server's ---- */
@@ -2520,7 +2521,8 @@
         $('access').hidden = which !== 'access';
         $('settings').hidden = which !== 'settings';
         $('assets').hidden = which !== 'assets';
-        if (which !== 'conversations') { closeRoomAssets(); for (const id of ['panel', 'files', 'copy', 'gitview']) $(id).hidden = true; view('room'); }
+        if (which !== 'conversations') { closeRoomAssets(); for (const id of ['panel', 'files', 'copy']) $(id).hidden = true; view('room'); }
+        if (which !== 'assets' || !$('assets').contains($('gitview'))) shutGit();
     }
     function placeAddress() {
         const q = new URLSearchParams();
@@ -2609,6 +2611,12 @@
     }
     addEventListener('popstate', (event) => {
         if (DEVICE) return;
+        /* Back while a review is shown: the review closes, as with its own "‹" link. */
+        if (reviewInHistory && !event.state?.review) {
+            reviewInHistory = false;
+            const back = gitBack; shutGit(); if (back?.go) back.go(); else focusTerminal();
+            return;
+        }
         pushed = event.state?.depth ?? 0;
         /* Walked back on purpose (Close): the address is set to what is shown. */
         if (skipPop) { skipPop = false; remember(false); return; }
@@ -3269,17 +3277,40 @@
         if (!commit && out.state === 'ahead') await runChecks();
     }
     /* `commit`: one commit of the diagram. `back`: {label, go} -- where the page goes back to. */
+    /* The review is shown inside the page it was opened from, never over it:
+       in the server's Assets (its header stays), or in a conversation's Assets
+       view (the list of conversations and the bar Chat | Terminal | Assets
+       stay, and leave it). */
     async function openGit(name, { commit = '', back = null, target = '', branch = '' } = {}) {
-        gitShown = name; gitCommit = commit; gitAsked = target; gitAskedBranch = branch; gitBack = back; gitTab = 'changes';
         for (const id of ['panel', 'files']) if (!$(id).classList.contains('embedded')) $(id).hidden = true;
-        $('gitview').hidden = false; $('gitview').scrollTop = 0;
+        let host = null;
+        if (place === 'assets') host = $('assets');
+        else if (!DEVICE && current) {
+            /* From the chat or a sheet: the Assets view opened on it; closing gives back the view it was in. */
+            if (!assetsShown) { back ??= { label: 'Back', go: () => { closeRoomAssets(); focusTerminal(); } }; roomPick = `git:${name}`; await openRoomAssets(); }
+            host = $('cassets');
+        }
+        const g = $('gitview');
+        if (host && g.parentNode !== host) host.append(g);
+        g.classList.toggle('inset', Boolean(host));
+        /* The device's own Back (a phone's gesture, the browser's button) closes the review: it is a step of its own in the history. */
+        if (!DEVICE && !reviewInHistory) { history.pushState({ depth: pushed, review: true }, '', location.href); reviewInHistory = true; }
+        gitShown = name; gitCommit = commit; gitAsked = target; gitAskedBranch = branch; gitBack = back; gitTab = 'changes';
+        g.hidden = false; g.scrollTop = 0;
         await paintGit();
     }
+    /* Left without its own button (Chat, Terminal, another conversation, another place). */
+    let reviewInHistory = false;
+    function shutGit() {
+        $('gitview').hidden = true; gitShown = ''; gitBack = null;
+        /* Closed by a click: its step in the history stays, as the place it was opened from. */
+        if (reviewInHistory) { reviewInHistory = false; if (history.state?.review) history.replaceState({ depth: history.state.depth ?? 0 }, '', location.href); }
+    }
     for (const b of $('gitview-tabs').querySelectorAll('[data-tab]')) b.addEventListener('click', () => { gitTab = b.dataset.tab; paintReviewTab(); });
     for (const b of $('gitview-layout').querySelectorAll('[data-layout]')) b.addEventListener('click', () => { gitLayout = b.dataset.layout; paintReviewTab(); drawDiff(gitText.replace(/\n$/, '')); });
     for (const b of $('gitview-picker').querySelectorAll('[data-step]')) b.addEventListener('click', () => { showFile(gitFile + Number(b.dataset.step)); $('gitview-diff').scrollIntoView({ block: 'start' }); });
-    $('gitview-set-remote').addEventListener('click', () => { const name = gitShown; $('gitview').hidden = true; gitShown = ''; void openAssetsPlace(`git:${name}`, { remote: true }); });
-    $('gitview-close').addEventListener('click', () => { $('gitview').hidden = true; gitShown = ''; const back = gitBack; gitBack = null; if (back?.go) back.go(); else focusTerminal(); });
+    $('gitview-set-remote').addEventListener('click', () => { const name = gitShown; shutGit(); void openAssetsPlace(`git:${name}`, { remote: true }); });
+    $('gitview-close').addEventListener('click', () => { const back = gitBack; shutGit(); if (back?.go) back.go(); else focusTerminal(); });
     $('gitview-again').addEventListener('click', () => { void paintGit(); });
     $('gitview-check').addEventListener('click', () => { void runChecks(); });
     $('gitview-branch').addEventListener('change', () => { gitAskedBranch = $('gitview-branch').value; gitAsked = ''; void paintGit(); });

package/web/style.css

@@ -1132,6 +1132,9 @@ header .ic, #folders .ic { width: 18px; height: 18px; fill: none; stroke: curren
 
 /* ---------- THE REVIEW (E) ---------- */
 .review { position: fixed; inset: 0; z-index: 30; overflow-y: auto; background: var(--bg); padding: 14px 20px 40px; display: flex; flex-direction: column; gap: 10px; }
+/* Inside the page it was opened from: the conversation's Assets view, or the server's Assets below its header. */
+.review.inset { position: static; inset: auto; z-index: auto; flex: 1 1 auto; min-height: 0; }
+:is(#cassets, #assets):has(> .review:not([hidden])) > .as { display: none; }
 .rv-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
 .rv-head > b { font-size: 1.375rem; overflow-wrap: anywhere; }
 .rv-branches { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }