From c1940edeba894691965266d2cf7d072cd7c9e70a Mon Sep 17 00:00:00 2001
From: MickaelK <mickael@kerjean.me>
Date: Thu, 16 May 2024 21:27:13 +1000
Subject: [PATCH] chore (rewrite): filesystem

---
 .../decorator_shell_filemanager.css           |   9 +-
 .../components/decorator_shell_filemanager.js |  18 +-
 public/assets/components/menubar.css          |   6 +-
 public/assets/components/menubar.js           |   2 +-
 .../assets/pages/filespage/ctrl_filesystem.js |  64 ++++--
 .../assets/pages/filespage/ctrl_newitem.css   |   2 +-
 public/assets/pages/filespage/ctrl_newitem.js |   5 +-
 .../assets/pages/filespage/ctrl_submenu.css   |   3 +-
 public/assets/pages/filespage/ctrl_submenu.js |  34 ++-
 .../assets/pages/filespage/state_selection.js |  32 ++-
 public/assets/pages/filespage/thing.css       | 209 ++++++------------
 public/assets/pages/filespage/thing.js        | 105 +++++----
 12 files changed, 260 insertions(+), 229 deletions(-)

diff --git a/public/assets/components/decorator_shell_filemanager.css b/public/assets/components/decorator_shell_filemanager.css
index bdd62007..7fabfbce 100644
--- a/public/assets/components/decorator_shell_filemanager.css
+++ b/public/assets/components/decorator_shell_filemanager.css
@@ -72,13 +72,14 @@
     background: rgba(100,100,100,.05);
 }
 
-.component_filemanager_shell [data-bind="filemanager-children"] .container,
-.component_filemanager_shell [is="component-breadcrumb"] .container {
-    max-width: 2100px;
-}
+/* .component_filemanager_shell [data-bind="filemanager-children"] .container, */
+/* .component_filemanager_shell [is="component-breadcrumb"] .container { */
+/*     max-width: 2100px; */
+/* } */
 
 .component_filemanager_shell [data-bind="sidebar"] ~ div [is="component_filesystem"],
 .component_filemanager_shell [data-bind="sidebar"] ~ div [is="component_newitem"],
+.component_filemanager_shell [data-bind="sidebar"] ~ div component-menubar,
 .component_filemanager_shell [data-bind="sidebar"] ~ div [is="component-breadcrumb"],
 .component_filemanager_shell [data-bind="sidebar"] ~ div [is="component_submenu"] .component_submenu{
     padding: 0 30px;
diff --git a/public/assets/components/decorator_shell_filemanager.js b/public/assets/components/decorator_shell_filemanager.js
index 3e870d0b..5bf6fea6 100644
--- a/public/assets/components/decorator_shell_filemanager.js
+++ b/public/assets/components/decorator_shell_filemanager.js
@@ -1,5 +1,6 @@
 import { createElement, createRender } from "../lib/skeleton/index.js";
-import rxjs, { effect } from "../lib/rx.js";
+import { navigate } from "../lib/skeleton/router.js";
+import rxjs, { effect, preventDefault } from "../lib/rx.js";
 import { onDestroy } from "../lib/skeleton/lifecycle.js";
 import { animate, slideYOut } from "../lib/animate.js";
 import { qs } from "../lib/dom.js";
@@ -22,7 +23,8 @@ export default function(ctrl) {
         render($page);
 
         // feature1: setup the breadcrumb path
-        qs($page, `[is="component-breadcrumb"]`).setAttribute("path", urlToPath(location.pathname + location.hash));
+        const $breadcrumb = qs($page, `[is="component-breadcrumb"]`);
+        $breadcrumb.setAttribute("path", urlToPath(location.pathname + location.hash));
 
         // feature2: setup the childrens
         const $main = qs($page, `[data-bind="filemanager-children"]`);
@@ -44,6 +46,16 @@ export default function(ctrl) {
             rxjs.mapTo($page.firstElementChild),
             rxjs.tap(($sidebar) => document.body.clientWidth > 1250 ? $sidebar.classList.remove("hidden") : $sidebar.classList.add("hidden")),
         ));
+
+        // feature4: key shortcut
+        effect(rxjs.fromEvent(window, "keydown").pipe(
+            rxjs.filter((e) => new RegExp("^/files/.+").test(location.pathname) && e.keyCode === 8), // backspace in filemanager
+            rxjs.tap(() => {
+                const p = location.pathname.replace(new RegExp("/$"), "").split("/");
+                p.pop();
+                navigate(p.join("/") + "/" + location.hash);
+            }),
+        ));
     };
 }
 
@@ -56,7 +68,7 @@ async function ctrlSidebar(render) {
     // Tags:
     // - name + color
     const $comp = createElement(`
-        <div class="component_sidebar">
+        <div class="component_sidebar" style="display:none">
             <br>
 
             <h3>Quick Access</h3>
diff --git a/public/assets/components/menubar.css b/public/assets/components/menubar.css
index cdf70ab3..70fdb208 100644
--- a/public/assets/components/menubar.css
+++ b/public/assets/components/menubar.css
@@ -7,12 +7,12 @@
     z-index: 4;
     text-align: left;
 }
-.component_menubar .component_container {
+.component_menubar .container {
     padding: 0;
     color: var(--bg-color);
     font-size: 0.9em;
 }
-.component_menubar .component_container > span {
+.component_menubar .container > span {
     display: flex;
 }
 .component_menubar .titlebar {
@@ -37,7 +37,7 @@
 .dark-mode .component_menubar {
     background: var(--bg-color);
 }
-.dark-mode .component_menubar .component_container {
+.dark-mode .component_menubar .container {
     color: inherit;
 }
 
diff --git a/public/assets/components/menubar.js b/public/assets/components/menubar.js
index 42afc663..da830527 100644
--- a/public/assets/components/menubar.js
+++ b/public/assets/components/menubar.js
@@ -11,7 +11,7 @@ export default class ComponentMenubar extends window.HTMLElement {
 
         this.classList.add("component_menubar");
         this.innerHTML = `
-            <div class="component_container">
+            <div class="container">
                 <span>
                     <div class="titlebar">
                         ${basename(decodeURIComponent(location.pathname + location.hash)) || "&nbsp;"}
diff --git a/public/assets/pages/filespage/ctrl_filesystem.js b/public/assets/pages/filespage/ctrl_filesystem.js
index fcd0a796..21fa0aa0 100644
--- a/public/assets/pages/filespage/ctrl_filesystem.js
+++ b/public/assets/pages/filespage/ctrl_filesystem.js
@@ -18,6 +18,10 @@ const ICONS = {
     EMPTY_SEARCH: "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjE3MCIgdmlld0JveD0iMCAwIDMwMCAxNzAiIGZpbGw9Im5vbmUiPgogIDxwYXRoCiAgICAgZD0ibSAxODUuNzkzNjksNTguNTYxOTY0IGMgMi4yNjQsMCA0LjEsLTEuODM1NiA0LjEsLTQuMSAwLC0yLjI2NDQgLTEuODM2LC00LjEgLTQuMSwtNC4xIC0yLjI2NSwwIC00LjEsMS44MzU2IC00LjEsNC4xIDAsMi4yNjQ0IDEuODM1LDQuMSA0LjEsNC4xIHoiCiAgICAgZmlsbD0iIzkwOTA5MCIKICAgICBpZD0icGF0aDUwNjUiCiAgICAgc3R5bGU9ImZpbGw6IzkwOTA5MDtmaWxsLW9wYWNpdHk6MC4yIiAvPgogIDxwYXRoCiAgICAgZD0ibSAxOTEuNzkzNjksNDIuNTYyMDY0IGMgMS41NDYsMCAyLjgsLTEuMjUzNiAyLjgsLTIuOCAwLC0xLjU0NjQgLTEuMjU0LC0yLjggLTIuOCwtMi44IC0xLjU0NywwIC0yLjgsMS4yNTM2IC0yLjgsMi44IDAsMS41NDY0IDEuMjUzLDIuOCAyLjgsMi44IHoiCiAgICAgZmlsbD0iIzkwOTA5MCIKICAgICBpZD0icGF0aDUwNjciCiAgICAgc3R5bGU9ImZpbGw6IzkwOTA5MDtmaWxsLW9wYWNpdHk6MC4yIiAvPgogIDxwYXRoCiAgICAgZD0ibSA5MC4zOTM1OTUsNTguNDYxOTY0IGMgMS41NDY0LDAgMi44LC0xLjI1MzYgMi44LC0yLjggMCwtMS41NDY0IC0xLjI1MzYsLTIuOCAtMi44LC0yLjggLTEuNTQ2NCwwIC0yLjgsMS4yNTM2IC0yLjgsMi44IDAsMS41NDY0IDEuMjUzNiwyLjggMi44LDIuOCB6IgogICAgIGZpbGw9IiM5MDkwOTAiCiAgICAgaWQ9InBhdGg1MDY5IgogICAgIHN0eWxlPSJmaWxsOiM5MDkwOTA7ZmlsbC1vcGFjaXR5OjAuMiIgLz4KICA8cGF0aAogICAgIGQ9Im0gNzMuMjkzNTY1LDExMi40NjIxNiBjIDIuODcxODksMCA1LjIwMDAzLC0yLjMyODEgNS4yMDAwMywtNS4yIDAsLTIuODcxOSAtMi4zMjgxNCwtNS4yIC01LjIwMDAzLC01LjIgLTIuODcxODgsMCAtNS4xOTk5OTUsMi4zMjgxIC01LjE5OTk5NSw1LjIgMCwyLjg3MTkgMi4zMjgxMTUsNS4yIDUuMTk5OTk1LDUuMiB6IgogICAgIGZpbGw9IiM5MDkwOTAiCiAgICAgaWQ9InBhdGg1MDcxIgogICAgIHN0eWxlPSJmaWxsOiM5MDkwOTA7ZmlsbC1vcGFjaXR5OjAuMiIgLz4KICA8ZwogICAgIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2QpIgogICAgIGlkPSJnNTA3NSIKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2Ny41NDY2OTUsMjIuMzE1NTY0KSI+CiAgICA8cGF0aAogICAgICAgZD0ibSAxMDguMDc2LDQ2LjI1NzUgMC44LDY0LjQwMDUgYyAwLDIuMiAtMS44LDMuOSAtNCwzLjkgSCA0Mi4wNzYyIGMgLTIuMiwwIC00LC0xLjggLTQsLTMuOSBWIDI3Ljg1NzUgYyAwLC0yLjIgMS44LC0zLjkgNCwtMy45IGggNDUuNSB6IgogICAgICAgZmlsbD0iI2ZmZmZmZiIKICAgICAgIGlkPSJwYXRoNTA3MyIgLz4KICA8L2c+CiAgPHBhdGgKICAgICBkPSJtIDEzOC4zMjI3OSw1OS43NzI5NjQgaCAtMjIuMSBjIC0wLjcsMCAtMS4zLC0wLjYgLTEuMywtMS4zIDAsLTAuNyAwLjYsLTEuMyAxLjMsLTEuMyBoIDIyLjEgYyAwLjcsMCAxLjMsMC42IDEuMywxLjMgMCwwLjcgLTAuNiwxLjMgLTEuMywxLjMgeiIKICAgICBmaWxsPSIjZjJmM2Y1IgogICAgIGlkPSJwYXRoNTA3NyIKICAgICBzdHlsZT0iZmlsbDojZjJmM2Y1O2ZpbGwtb3BhY2l0eToxIiAvPgogIDxwYXRoCiAgICAgZD0ibSAxMjcuODIyNzksNjYuOTczMTY0IGggLTExLjYgYyAtMC43LDAgLTEuMywtMC42IC0xLjMsLTEuMyAwLC0wLjcgMC42LC0xLjMgMS4zLC0xLjMgaCAxMS41IGMgMC43LDAgMS4zLDAuNiAxLjMsMS4zIDAsMC43IC0wLjYsMS4zIC0xLjIsMS4zIHoiCiAgICAgZmlsbD0iI2YyZjNmNSIKICAgICBpZD0icGF0aDUwNzkiIC8+CiAgPHBhdGgKICAgICBkPSJtIDE1NS4xMjI4OSw0Ni4yNzMwNjQgdiAxNy44IGMgMCwyLjUgMi4yLDQuNSA0LjcsNC41IGggMTUuNzk5OCIKICAgICBmaWxsPSIjZjJmM2Y1IgogICAgIGlkPSJwYXRoNTA4MSIgLz4KICA8cGF0aAogICAgIGQ9Im0gMTI0Ljg1NjA5LDU5LjUzODI2NCA0Ljc1MTYsLTE2Ljc2IDE5LjUxNjYsMi4yNDggLTYuODEzOSwxMC45MjI0IDUuMjc3OCw0LjIxNjcgLTExLjM2MjgsMjQuODUzNyAwLjYzMzEsLTE5LjI0MTYgeiIKICAgICBmaWxsPSJ2YXIoLS1iZy1jb2xvcl8iCiAgICAgaWQ9InBhdGg1MDgzIiAvPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM1MTE3Ij4KICAgIDxmaWx0ZXIKICAgICAgIGlkPSJmaWx0ZXIwX2QiCiAgICAgICB4PSIxNi4wNzYyIgogICAgICAgeT0iMTIuOTU3NSIKICAgICAgIHdpZHRoPSIxMTQuOCIKICAgICAgIGhlaWdodD0iMTM0LjYwMDAxIgogICAgICAgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIgogICAgICAgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KICAgICAgPGZlRmxvb2QKICAgICAgICAgZmxvb2Qtb3BhY2l0eT0iMCIKICAgICAgICAgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiCiAgICAgICAgIGlkPSJmZUZsb29kNTA5NyIgLz4KICAgICAgPGZlQ29sb3JNYXRyaXgKICAgICAgICAgaW49IlNvdXJjZUFscGhhIgogICAgICAgICB0eXBlPSJtYXRyaXgiCiAgICAgICAgIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiCiAgICAgICAgIGlkPSJmZUNvbG9yTWF0cml4NTA5OSIgLz4KICAgICAgPGZlT2Zmc2V0CiAgICAgICAgIGR5PSIxMSIKICAgICAgICAgaWQ9ImZlT2Zmc2V0NTEwMSIgLz4KICAgICAgPGZlR2F1c3NpYW5CbHVyCiAgICAgICAgIHN0ZERldmlhdGlvbj0iMTEiCiAgICAgICAgIGlkPSJmZUdhdXNzaWFuQmx1cjUxMDMiIC8+CiAgICAgIDxmZUNvbG9yTWF0cml4CiAgICAgICAgIHR5cGU9Im1hdHJpeCIKICAgICAgICAgdmFsdWVzPSIwIDAgMCAwIDAuMzk3NzA4IDAgMCAwIDAgMC40Nzc0OSAwIDAgMCAwIDAuNTc1IDAgMCAwIDAuMjcgMCIKICAgICAgICAgaWQ9ImZlQ29sb3JNYXRyaXg1MTA1IiAvPgogICAgICA8ZmVCbGVuZAogICAgICAgICBtb2RlPSJub3JtYWwiCiAgICAgICAgIGluMj0iQmFja2dyb3VuZEltYWdlRml4IgogICAgICAgICByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvdyIKICAgICAgICAgaWQ9ImZlQmxlbmQ1MTA3IiAvPgogICAgICA8ZmVCbGVuZAogICAgICAgICBtb2RlPSJub3JtYWwiCiAgICAgICAgIGluPSJTb3VyY2VHcmFwaGljIgogICAgICAgICBpbjI9ImVmZmVjdDFfZHJvcFNoYWRvdyIKICAgICAgICAgcmVzdWx0PSJzaGFwZSIKICAgICAgICAgaWQ9ImZlQmxlbmQ1MTA5IiAvPgogICAgPC9maWx0ZXI+CiAgICA8bGluZWFyR3JhZGllbnQKICAgICAgIGlkPSJwYWludDBfbGluZWFyIgogICAgICAgeDE9IjczLjQ1MzEwMiIKICAgICAgIHkxPSIyMS44NjE5IgogICAgICAgeDI9IjczLjQ1MzEwMiIKICAgICAgIHkyPSIxMTUuNTM0IgogICAgICAgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcAogICAgICAgICBzdG9wLWNvbG9yPSIjRkRGRUZGIgogICAgICAgICBpZD0ic3RvcDUxMTIiIC8+CiAgICAgIDxzdG9wCiAgICAgICAgIG9mZnNldD0iMC45OTY0IgogICAgICAgICBzdG9wLWNvbG9yPSIjRUNGMEY1IgogICAgICAgICBpZD0ic3RvcDUxMTQiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cGF0aAogICAgIGQ9Im0gMTgwLjE4MzM3LDE0My4xNTA0NiBjIC0xLDAgLTIsLTAuNCAtMi44LC0xLjMgbCAtMTYuNjk5NiwtMTYuNzAwMyAtMC42LDAuNCBjIC01LjQsNCAtMTEuNyw2LjEgLTE4LjEsNi4xIC03LjcsMCAtMTUuNCwtMy4xIC0yMS4xLC04LjUgLTUuOTk5OTksLTUuNjk5OTkgLTkuMjk5OTksLTEzLjM5OTk5IC05LjI5OTk5LC0yMS43OTk5OSAwLC0xNi43MDAwMDMgMTMuNTk5OTksLTMwLjMwMDAwMyAzMC4yOTk5OSwtMzAuMzAwMDAzIDExLjQsMCAyMS40LDYgMjYuOCwxNi4yIDUuMjk5NiwxMC4xIDQuNTk5NiwyMS45MDAwMDMgLTEuOSwzMS40MDAwMDMgbCAtMC40LDAuNiAxNi43OTk2LDE2Ljc5OTk5IGMgMS43LDEuNyAxLjMsMy40MDAzIDEsNC4zMDAzIC0wLjgsMS42IC0yLjQsMi44IC00LDIuOCB6IG0gLTM4LjI5OTYsLTYzLjgwMDI5MyBjIC0xMi4yLDAgLTIxLjk5OTk5LDkuOSAtMjEuOTk5OTksMjIuMDAwMDAzIDAsMTMuOCAxMS4yOTk5OSwyMi4wOTk5OSAyMi4yOTk5OSwyMi4wOTk5OSA2LjcsMCAxMi44LC0yLjk5OTk5IDE3LjEsLTguMzk5OTkgNS4zLC02LjYgNi4yLC0xNS41MDAwMDMgMi41LC0yMy4yMDAwMDMgLTMuOCwtNy43IC0xMS40LC0xMi41IC0xOS45LC0xMi41IHoiCiAgICAgZmlsbD0iIzU3NTk1YSIKICAgICBpZD0icGF0aDQ1MjMiIC8+CiAgPHBhdGgKICAgICBkPSJtIDEzMi4zODM3NywxMDQuOTUwMjcgYyAxLjMsMCAyLjQsLTEuMSAyLjQsLTIuNCAwLC0xLjMgLTEuMSwtMi40IC0yLjQsLTIuNCAtMS4zLDAgLTIuNCwxLjEgLTIuNCwyLjQgMCwxLjMgMS4xLDIuNCAyLjQsMi40IHoiCiAgICAgZmlsbD0iIzkwOTA5MCIKICAgICBpZD0icGF0aDQ1MjUiIC8+CiAgPHBhdGgKICAgICBkPSJtIDE1MC43ODM3NywxMDQuOTUwMjcgYyAxLjMsMCAyLjQsLTEuMSAyLjQsLTIuNCAwLC0xLjMgLTEuMSwtMi40IC0yLjQsLTIuNCAtMS4zLDAgLTIuNCwxLjEgLTIuNCwyLjQgMCwxLjQgMS4xLDIuNCAyLjQsMi40IHoiCiAgICAgZmlsbD0iIzkwOTA5MCIKICAgICBpZD0icGF0aDQ1MjciIC8+CiAgPHBhdGgKICAgICBkPSJtIDEzMi4yODk5Nyw5NC42MTAwNjcgLTUuMjc5NSwyLjg1MDUgMC43MTI3LDEuMzE5OSA1LjI3OTQsLTIuODUwNiB6IgogICAgIGZpbGw9IiM5MDkwOTAiCiAgICAgaWQ9InBhdGg0NTI5IiAvPgogIDxwYXRoCiAgICAgZD0ibSAxNTAuNDU3MzcsOTQuNTcyMjY3IC0wLjcxMjUsMS4zMiA1LjI4LDIuODUgMC43MTI1LC0xLjMyIHoiCiAgICAgZmlsbD0iIzkwOTA5MCIKICAgICBpZD0icGF0aDQ1MzEiIC8+CiAgPHBhdGgKICAgICBkPSJtIDE0MS41ODM2NywxMTAuNTUwMjcgYyAxLjU0NjQsMCAyLjgsLTAuOTQwMiAyLjgsLTIuMSAwLC0xLjE1OTggLTEuMjUzNiwtMi4xIC0yLjgsLTIuMSAtMS41NDY0LDAgLTIuOCwwLjk0MDIgLTIuOCwyLjEgMCwxLjE1OTggMS4yNTM2LDIuMSAyLjgsMi4xIHoiCiAgICAgZmlsbD0iIzkwOTA5MCIKICAgICBpZD0icGF0aDQ1MzMiIC8+CiAgPHBhdGgKICAgICBkPSJNIDEyLjA4MjE1NCwxNDEuNTQ0MDggSCA3LjE4MjE1NDQgYyAtMC4zLDAgLTAuNiwwLjEgLTAuNywwLjQgbCAtMi40LDQuMyBjIC0wLjEsMC4zIC0wLjEsMC42IDAsMC45IGwgMi40LDQuMyBjIDAuMSwwLjMgMC40LDAuNCAwLjcsMC40IGggNC44OTk5OTk2IGMgMC4zLDAgMC42LC0wLjEgMC43LC0wLjQgbCAyLjQsLTQuMyBjIDAuMSwtMC4zIDAuMSwtMC42IDAsLTAuOSBsIC0yLjQsLTQuMyBjIC0wLjEsLTAuMyAtMC40LC0wLjQgLTAuNywtMC40IHoiCiAgICAgaWQ9InBhdGg0IgogICAgIHN0eWxlPSJmaWxsOiM5MDkwOTA7ZmlsbC1vcGFjaXR5OjAuMiIgLz4KICA8cGF0aAogICAgIGNsYXNzPSJmaWxlIgogICAgIGQ9Im0gMjcxLjA5MjU5LDExLjY1MjMxMiAtNy4zNzAxOSwzLjU4MzkxOCBjIC0wLjc2MTk0LDAuNDMxMTE2IC0xLjcwNDkxLDAuNTgzNTAxIC0yLjU3MjQ2LDAuNjA1MjIyIC0wLjg2NzU0LDAuMDIxNzIgLTEuNzg3OTEsLTAuMTYxMjQ0IC0yLjYzMjg1LC0wLjQ3NDg2NyAtMS42MTQ0NCwtMC43NTc4OTggLTMuMDU1NCwtMi4xMTI0NDIgLTMuOTM4MTUsLTMuODQxNTA5IDAsMCAtMS41MDg5NiwtMy4zMTAwMzcyIC0zLjA3MDc1LC02LjgyNDc3NDUgbCAtMC4yMzM4OCwtMC40ODM0MzY4IC0xNS45NjI1Myw3LjUwNzQ2OTMgYyAtMi41NDIyMywxLjE0NTI3MSAtMy42MTMyOSw0LjE4NTE0NCAtMi41MTkyOCw2LjczMjk5OCBsIDExLjUyODU1LDI1LjY0NDA3NCBjIDEuMDk0MDIsMi41NDc4NTUgNC4wODksMy41ODAyMDUgNi42MzEyNSwyLjQzNDkzMSBsIDI1LjU5NTg0LC0xMi4wNDk0MDIgYyAyLjU0MjI0LC0xLjE0NTI3NSAzLjYxMzMxLC00LjE4NTE0MyAyLjUxOTMsLTYuNzMyOTk4IEwgMjcxLjcwMzY1LDExLjQ4MjQ5IFoiCiAgICAgc3R5bGU9ImNsaXAtcnVsZTpldmVub2RkO2ZpbGw6IzkwOTA5MDtmaWxsLW9wYWNpdHk6MC4yO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZS13aWR0aDoxLjQ5NDcxIgogICAgIGlkPSJwYXRoNiIgLz4KICA8cGF0aAogICAgIGNsYXNzPSJmaWxlIgogICAgIGQ9Im0gMjU5LjQxNDY4LDEyLjkyMzM2OCBjIC0xLjEwMTQ0LC0wLjQ2MTcxMyAtMS45NzY1OSwtMS4zMTUzOCAtMi42MjU0MywtMi41NjEwMDUgbCAtMC4wNTI4LC0wLjIwNDcgLTAuMjg2NjgsLTAuNjg4MTQ3MiAtMS4wNDExOSwtMi4zNDMxNTggLTAuNTczNDEsLTEuMzc2Mjc2IDEzLjAwNTk5LDQuNzIxNzcwMiAtNS4xNTk5MywyLjQyMTIwMiBjIC0wLjQ4Mjc3LDAuMjQzODY2IC0xLjAxODQxLDAuMjgzMDI4IC0xLjU1NDAxLDAuMzIyMTk2IC0wLjUzNTY0LDAuMDM5MTYgLTEuMTI0MDYsLTAuMTI2MzY0IC0xLjcxMjQ5LC0wLjI5MTg5OSB6IgogICAgIHN0eWxlPSJjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOiM5MDkwOTA7ZmlsbC1vcGFjaXR5OjAuMjtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2Utd2lkdGg6MS40OTQ3MSIKICAgICBpZD0icGF0aDgiIC8+CiAgPHBhdGgKICAgICBkPSJtIDIzLjk0NDQwMywxNy42MzU1NjMgYyAtMi4wNzc0MTksMS4xOTk0MTUgLTIuNDc0NjY5LDMuODMyNzk4IC0xLjMwMzU3OSw1Ljg2MTIwMiBsIDExLjE1Nzk2OSwxOS4zMjYxMzMgYyAxLjI2ODY5LDIuMTk3NDM1IDMuNTMxOTYsMi45MTkxMzUgNS42NjI2NCwxLjY4ODk3NSBsIDI0LjM0MzEyLC0xNC4wNTQ0OTEgYyAxLjM4NDk2LC0wLjc5OTYxIDEuOTI0MTEsLTMuMDY0MTY5IDAuNjIyODgsLTUuMzE3OTM5IEwgNTQuOTI4NTQzLDguNjg2ODYyNyBjIC0xLjA0MDk5LC0xLjgwMzAxMSAtMy4wNzY1NCwtMi4xMzAzMTMgLTQuNDYxNDYsLTEuMzMwNzM0IGwgLTEyLjUxNzgyLDcuMjI3MTY5MyAtNC45NDk0NCwtMi4xNzU4NjkgeiIKICAgICBpZD0icGF0aDE2IgogICAgIHN0eWxlPSJmaWxsOiM5MDkwOTA7ZmlsbC1vcGFjaXR5OjAuMjtzdHJva2Utd2lkdGg6MC42MzI1OTQiIC8+CiAgPGcKICAgICBpZD0iZzIwIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0My4yODEwNCwxMzEuMDczNDYpIgogICAgIHN0eWxlPSJmaWxsOiM5MDkwOTA7ZmlsbC1vcGFjaXR5OjAuMiI+CiAgICA8cGF0aAogICAgICAgZD0ibSA0Mi40LDIzLjIgOC42LDkuOSBjIDAuMywwLjMgMC4xLDAuOCAtMC4zLDAuOSBMIDM4LDM2LjIgYyAtMC40LDAuMSAtMC43LC0wLjMgLTAuNiwtMC43IGwgNC4xLC0xMi4xIGMgMC4xLC0wLjQgMC43LC0wLjUgMC45LC0wLjIgeiIKICAgICAgIGlkPSJwYXRoMTgiCiAgICAgICBzdHlsZT0iZmlsbDojOTA5MDkwO2ZpbGwtb3BhY2l0eTowLjIiIC8+CiAgPC9nPgogIDxwYXRoCiAgICAgZD0ibSAyMjMuMDczMyw5Mi4zNzMwMzEgLTIsMSBjIC0wLjMsMC4xIC0wLjYsMCAtMC44LC0wLjMgbCAtMSwtMiBjIC0wLjEsLTAuMyAwLC0wLjYgMC4zLC0wLjggbCAyLC0xIGMgMC4zLC0wLjEgMC42LDAgMC44LDAuMyBsIDEsMiBjIDAuMSwwLjMgMCwwLjcgLTAuMywwLjggeiIKICAgICBpZD0icGF0aDEwIgogICAgIHN0eWxlPSJmaWxsOiM5MDkwOTA7ZmlsbC1vcGFjaXR5OjAuMiIgLz4KPC9zdmc+Cg==",
 };
 
+const VIRTUAL_SCROLL_MINIMUM_TRIGGER = 100;
+
+export const files$ = new rxjs.BehaviorSubject(null);
+
 export default async function(render) {
     const $page = createElement(`
         <div class="component_filesystem container">
@@ -30,22 +34,22 @@ export default async function(render) {
         </div>
     `);
     render($page);
-    let _files = [];
+    onDestroy(() => files$.next(null));
 
     // feature: virtual scrolling
     const path = location.pathname.replace(new RegExp("^/files"), "");
-    const refreshOnResize$ = rxjs.fromEvent(window, "resize").pipe(
-        rxjs.startWith(null),
-        rxjs.map(() => [gridSize(qs($page, `[data-target="list"]`).clientWidth), document.body.clientHeight]),
-        rxjs.distinctUntilChanged((prev, curr) => {
-            return prev[0] === curr[0] && prev[1] && curr[1]
-        }),
-    );
     const $header = qs($page, `[data-target="header"]`);
     const $list = qs($page, `[data-target="list"]`);
     const removeLoader = createLoader($header);
     const $listBefore = qs($page, ".ifscroll-before");
     const $listAfter = qs($page, ".ifscroll-after");
+    const refreshOnResize$ = rxjs.fromEvent(window, "resize").pipe(
+        rxjs.startWith(null),
+        rxjs.map(() => [gridSize($list.clientWidth), document.body.clientHeight]),
+        rxjs.distinctUntilChanged((prev, curr) => {
+            return prev[0] === curr[0] && prev[1] && curr[1]
+        }),
+    );
 
     effect(ls(path).pipe(
         rxjs.switchMap(({ files, ...rest }) => getState$().pipe(rxjs.switchMap((state) => {
@@ -59,7 +63,6 @@ export default async function(render) {
                     ...rest, files, ...state, read_only: true,
                 })), removeLoader);
             }
-            _files = files;
             return rxjs.of({ ...rest, files, ...state, read_only: false });
         }))),
         rxjs.mergeMap(({ show_hidden, files, ...rest }) => {
@@ -69,6 +72,7 @@ export default async function(render) {
         }),
         removeLoader,
         rxjs.mergeMap(({ files, search, ...rest }) => {
+            files$.next(files);
             if (files.length === 0) {
                 renderEmpty(createRender(qs($page, `[data-target="header"]`)), !!search ? ICONS.EMPTY_SEARCH : ICONS.EMPTY_FILES);
                 return rxjs.EMPTY;
@@ -83,17 +87,18 @@ export default async function(render) {
             case "grid":
                 FILE_HEIGHT = 160;
                 COLUMN_PER_ROW = gridSize($list.clientWidth);
-                $list.style.gridTemplateColumns = `repeat(auto-fill, ${100 / COLUMN_PER_ROW}%)`;
+                $list.style.gridTemplateColumns = `repeat(${COLUMN_PER_ROW}, 1fr)`;
+                $list.style.gridGap = "4px";
                 break;
             case "list":
                 FILE_HEIGHT = 47;
                 COLUMN_PER_ROW = 1;
-                $list.style.gridTemplateColumns = `repeat(auto-fill, 100%)`;
+                $list.style.gridTemplateColumns = `repeat(1, 1fr)`;
+                $list.style.gridGap = "2px";
                 break;
             default:
                 throw new Error("Not Implemented");
             }
-            const VIRTUAL_SCROLL_MINIMUM_TRIGGER = 100;
             const BLOCK_SIZE = Math.ceil(document.body.clientHeight / FILE_HEIGHT) + 1;
 
             let size = files.length;
@@ -238,12 +243,24 @@ export default async function(render) {
         rxjs.tap(() => clearSelection()),
     ));
     effect(rxjs.fromEvent(window, "keydown").pipe(
-        rxjs.filter((e) => e.key === "a" && e.ctrlKey && _files.length > 0),
+        rxjs.filter((e) => e.key === "a" && (e.ctrlKey || e.metaKey) && (files$.value || []).length > 0),
         preventDefault(),
         rxjs.tap(() => {
             clearSelection();
-            addSelection({ n: 0 });
-            addSelection({ n: _files.length, shift: true });
+            if (!Array.isArray(files$.value) || files$.value.length === 0) return;
+            const path = location.pathname.replace(new RegExp("/files/"), "/");
+            const el0 = files$.value[0];
+            const elm1 = files$.value.slice(-1)[0];
+            addSelection({
+                n: 0,
+                path: path + el0.name + (el0.type === "directory" ? "/" : ""),
+                shift: false, files: [],
+            });
+            if (elm1) addSelection({
+                n: (files$.value || []).length,
+                path: path + elm1.name + (elm1.type === "directory" ? "/" : ""),
+                shift: true, files: (files$.value || []),
+            });
         }),
     ));
     effect(getSelection$().pipe(rxjs.tap((a) => {
@@ -256,15 +273,12 @@ export default async function(render) {
     })));
 
     // feature: remove long touch popup on mobile
-    const disableLongTouch = (e) => { // TODO: use lib for mobile detect
-        if(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent) === false) {
-            return;
-        }
+    const disableLongTouch = (e) => {
+        if(isMobile === false) return;
         e.preventDefault();
-    }
+    };
     document.addEventListener("contextmenu", disableLongTouch);
     onDestroy(() => document.removeEventListener("contextmenu", disableLongTouch));
-
 }
 
 function renderEmpty(render, base64Icon) {
@@ -286,10 +300,14 @@ export function init() {
 }
 
 function createLink(file, currentPath) {
-    let path = file.path ? file.path : currentPath + file.name;
+    let path = file.path;
+    if (!path) path = currentPath + file.name;
     if (file.type === "directory") path += "/";
     const link = file.type === "directory" ? "/files" + path : "/view" + path;
-    return { path, link };
+    return {
+        path: path,
+        link: link,
+    };
 }
 
 function gridSize(size) {
diff --git a/public/assets/pages/filespage/ctrl_newitem.css b/public/assets/pages/filespage/ctrl_newitem.css
index db0c7970..4e24371e 100644
--- a/public/assets/pages/filespage/ctrl_newitem.css
+++ b/public/assets/pages/filespage/ctrl_newitem.css
@@ -2,7 +2,7 @@
     overflow: hidden;
 }
 .component_newitem .component_thing {
-    margin: 2px;
+    margin: 2px 0;
 }
 .component_newitem .component_thing .box {
     margin: 0;
diff --git a/public/assets/pages/filespage/ctrl_newitem.js b/public/assets/pages/filespage/ctrl_newitem.js
index 6ca1a7ec..aeb18328 100644
--- a/public/assets/pages/filespage/ctrl_newitem.js
+++ b/public/assets/pages/filespage/ctrl_newitem.js
@@ -13,7 +13,7 @@ export default async function(render) {
                 <div class="mouse-is-hover highlight box">
                     <img class="component_icon" draggable="false" alt="directory">
                     <span class="file-details">
-                        <form><input type="text" value=""></form>
+                        <form><input type="text" name="name" value=""><input type="hidden" name="type" value=""></form>
                     </span>
                     <span class="component_action">
                         <div class="action">
@@ -52,6 +52,7 @@ export default async function(render) {
             $icon.setAttribute("src", `data:image/svg+xml;base64,${img}`);
             $icon.setAttribute("alt", alt);
             $input.value = "";
+            $input.nextSibling.setAttribute("name", alt);
             if ($node.classList.contains("hidden")) animate($node, {
                 keyframes: [{ height: `0px` }, { height: "50px" }],
                 time: 100, fill: "forwards",
@@ -83,7 +84,7 @@ export default async function(render) {
     // feature3: submit form
     effect(rxjs.fromEvent($node, "submit").pipe(
         preventDefault(),
-        rxjs.tap(() => console.log("SUBMIT")),
+        rxjs.tap(() => console.log("SUBMIT", $input.value, "type", $input.nextSibling.getAttribute("name"))),
     ));
 }
 
diff --git a/public/assets/pages/filespage/ctrl_submenu.css b/public/assets/pages/filespage/ctrl_submenu.css
index dca67708..4d20e1d8 100644
--- a/public/assets/pages/filespage/ctrl_submenu.css
+++ b/public/assets/pages/filespage/ctrl_submenu.css
@@ -10,7 +10,7 @@
 }
 .scrolling [is="component_submenu"] {
     box-shadow: 0 5px 10px rgba(100,100,100,.05);
-    background: rgba(245,245,245,0.75);
+    background: rgba(245,245,245,0.9);
 }
 [is="component_submenu"] .component_submenu {
     display: flex;
@@ -36,6 +36,7 @@
     margin-left: 2px;
     overflow: hidden;
     white-space: nowrap;
+    text-overflow: ellipsis;
 }
 [is="component_submenu"] .component_submenu .action.right {
     margin-right:2px;
diff --git a/public/assets/pages/filespage/ctrl_submenu.js b/public/assets/pages/filespage/ctrl_submenu.js
index 5c4cabb6..3038e6ce 100644
--- a/public/assets/pages/filespage/ctrl_submenu.js
+++ b/public/assets/pages/filespage/ctrl_submenu.js
@@ -3,6 +3,7 @@ import rxjs, { effect, applyMutation, onClick, preventDefault } from "../../lib/
 import { animate, slideXIn, slideYIn } from "../../lib/animate.js";
 import { loadCSS } from "../../helpers/loader.js";
 import { qs, qsa } from "../../lib/dom.js";
+import { basename } from "../../lib/path.js";
 
 import "../../components/dropdown.js";
 import "../../components/icon.js";
@@ -14,7 +15,7 @@ import componentTag from "./modal_tag.js";
 import componentRename from "./modal_rename.js";
 import componentDelete from "./modal_delete.js";
 
-import { getSelection$, clearSelection, lengthSelection } from "./state_selection.js";
+import { getSelection$, clearSelection, lengthSelection, expandSelection } from "./state_selection.js";
 import { getAction$, setAction } from "./state_event.js";
 import { setState, getState$ } from "./state_filesystem.js";
 
@@ -72,7 +73,9 @@ function componentLeft(render, { $scroll }) {
     effect(getSelection$().pipe(
         rxjs.filter((selections) => selections.length === 1),
         rxjs.map(() => render(createFragment(`
-            <a><button data-action="download">Download</button></a>
+            <a ${generateLinkAttributes(expandSelection())}>
+                <button data-action="download">Download</button>
+            </a>
             <button data-action="delete">Delete</button>
             <button data-action="share">Share</button>
             <button data-action="embed">Embed</button>
@@ -99,22 +102,18 @@ function componentLeft(render, { $scroll }) {
             onClick(qs($page, `[data-action="delete"]`)).pipe(rxjs.tap(() => {
                 componentDelete(createModal(modalOpt));
             })),
-            // getSelection$().pipe(rxjs.tap((a) => {
-            //     console.log("HH", a);
-            // })),
         )),
     ));
 
     effect(getSelection$().pipe(
         rxjs.filter((selections) => selections.length > 1),
         rxjs.map(() => render(createFragment(`
-            <button data-action="download">Download</button>
+            <a ${generateLinkAttributes(expandSelection())}>
+                <button data-action="download">Download</button>
+            </a>
             <button data-action="delete">Delete</button>
         `))),
         rxjs.mergeMap(($page) => rxjs.merge(
-            onClick(qs($page, `[data-action="download"]`)).pipe(
-                rxjs.mergeMap(() => rxjs.EMPTY),
-            ),
             onClick(qs($page, `[data-action="delete"]`)).pipe(rxjs.tap(() => {
                 componentDelete(createModal(modalOpt));
             })),
@@ -235,7 +234,7 @@ function componentRight(render) {
                 rxjs.merge(
                     onClick(qs($page, `[data-action="search"]`)),
                     rxjs.fromEvent(window, "keydown").pipe(
-                        rxjs.filter((e) => e.ctrlKey && e.key === "f"),
+                        rxjs.filter((e) => (e.ctrlKey || e.metaKey) && e.key === "f"),
                         preventDefault(),
                     ),
                 ).pipe(rxjs.map(($el) => qs($page, "input").classList.contains("hidden"))),
@@ -320,3 +319,18 @@ export function init() {
         loadCSS(import.meta.url, "./ctrl_submenu.css"),
     ]);
 }
+
+function generateLinkAttributes(selections) {
+    let filename = "archive.zip";
+    let href = "/api/files/zip?";
+    if (selections.length === 1) {
+        const path = selections[0].path;
+        const regDir = new RegExp("/$");
+        filename = regDir.test(path) ?
+            basename(path.replace(regDir, "")) + ".zip" :
+            basename(path);
+        href = "/api/files/cat?"
+    }
+    href += selections.map(({path}) => "path=" + encodeURIComponent(path)).join("&");
+    return `href="${href}" download="${filename}"`
+}
diff --git a/public/assets/pages/filespage/state_selection.js b/public/assets/pages/filespage/state_selection.js
index e11a5037..ca4cbf5e 100644
--- a/public/assets/pages/filespage/state_selection.js
+++ b/public/assets/pages/filespage/state_selection.js
@@ -1,11 +1,12 @@
 import rxjs from "../../lib/rx.js";
 import { onDestroy } from "../../lib/skeleton/index.js";
+import { ApplicationError } from "../../lib/error.js";
 
 const selection$ = new rxjs.BehaviorSubject([]);
 
 onDestroy(() => selection$.next([]));
 
-export function addSelection({ shift = false, n = 0 }) {
+export function addSelection({ shift = false, n = 0, ...rest }) {
     const newSelection = selection$.value;
     let alreadyKnown = false;
     for (let i=0; i<newSelection.length; i++) {
@@ -22,7 +23,7 @@ export function addSelection({ shift = false, n = 0 }) {
 
     if (alreadyKnown === false) selection$.next(
         selection$.value
-            .concat({ shift, n })
+            .concat({ shift, n, ...rest })
             .sort((prev, curr) => prev.n - curr.n)
     );
 }
@@ -40,7 +41,7 @@ export function isSelected(n) {
     for (let i=0;i<selection$.value.length;i++) {
         if (selection$.value[i]["n"] === n) isChecked = !isChecked;
         else if (selection$.value[i]["shift"]
-                 && isBetween(n, selection$.value[i-1]["n"], selection$.value[i]["n"]))
+                 && isBetween(n, selection$.value[i-1]?.n, selection$.value[i]?.n))
             isChecked = !isChecked
     }
     return isChecked;
@@ -57,6 +58,31 @@ export function lengthSelection() {
     return l;
 }
 
+export function expandSelection() {
+    const selections = [];
+    for (let i=0; i<selection$.value.length; i++) {
+        const curr = selection$.value[i];
+        if (curr.shift === false) {
+            selections.push({ path: curr.path });
+            continue;
+        }
+        let prev = selection$.value[i-1];
+        if (!prev) prev = { n: 0 };
+        for (let i=1; i<= curr.n - prev.n; i++) {
+            if (i > 100000) throw new ApplicationError(
+                "Internal error",
+                `pages::state_selection.js curr=${curr.n} prev=${prev.n}`,
+            );
+            const path = location.pathname.replace(new RegExp("^/files"), "");
+            const f = curr.files[prev.n + i];
+            console.log(f)
+            selections.push({
+                path: path + f.name + (f.type === "directory" ? "/" : ""),
+            });
+        }
+    }
+    return selections;
+}
 
 function isBetween(n, lowerBound, higherBound) {
     return n < higherBound && n > lowerBound;
diff --git a/public/assets/pages/filespage/thing.css b/public/assets/pages/filespage/thing.css
index 8be2ed14..559268ed 100644
--- a/public/assets/pages/filespage/thing.css
+++ b/public/assets/pages/filespage/thing.css
@@ -1,20 +1,14 @@
-.component_thing {
-    clear: both;
-}
-.component_thing:hover .box, .component_thing .highlight.box,
-.component_thing.hover .box, .component_thing .highlight.box {
+.component_thing:hover, .component_thing .highlight,
+.component_thing.hover, .component_thing .highlight {
     transition: 0.1s ease-out background;
     background: var(--border);
     border-color: var(--super-light);
     border-radius: 5px;
 }
-.component_thing:hover .box:not(.loading) .component_datetime {
+.component_thing:not(.loading):hover .component_datetime {
     display: none;
 }
-.component_thing:hover .box:not(.loading) .component_action {
-    display: block;
-}
-.component_thing .component_action, .component_thing .component_checkbox {
+.component_thing .component_checkbox {
     display: none;
 }
 .component_thing .file-is-hover {
@@ -48,22 +42,6 @@
     border-bottom: 2px solid var(--emphasis-primary);
     color: var(--color);
 }
-.component_thing .component_icon {
-    width: 25px;
-    height: 25px;
-}
-.component_thing .component_filesize span {
-    color: var(--light);
-    font-size: 0.85em;
-}
-.component_thing .component_datetime {
-    float: right;
-    color: var(--light);
-    line-height: 25px;
-    margin: 0 -10px;
-    padding: 0 10px;
-    position: relative;
-}
 .component_thing .component_action {
     float: right;
     color: #6f6f6f;
@@ -72,9 +50,22 @@
     padding: 0 10px;
     position: relative;
 }
-.component_thing .component_action .component_icon {
-    padding: 1px 0;
-    box-sizing: border-box;
+.component_thing .component_icon {
+    width: 25px;
+    height: 25px;
+}
+.component_thing .component_filesize {
+    color: var(--light);
+    font-size: 0.85em;
+    padding-left: 3px;
+}
+.component_thing .component_datetime {
+    float: right;
+    color: var(--light);
+    line-height: 25px;
+    margin: 0 -10px;
+    padding: 0 10px;
+    position: relative;
 }
 .component_thing .component_checkbox {
     opacity: 0;
@@ -87,9 +78,10 @@
 }
 .component_thing .component_checkbox .indicator {
     top: 7px;
-    left: 7px;
+    left: 6px;
 }
-.touch-no .component_thing:hover .component_checkbox, .component_thing.selected .component_checkbox {
+.touch-no .component_thing:hover .component_checkbox,
+.component_thing.selected .component_checkbox {
     transition-delay: 0.1s;
     opacity: 1;
 }
@@ -114,73 +106,22 @@
 }
 .list > .component_thing {
     width: 100%;
-}
-.list > .component_thing .box {
-    margin: 0px 0 2px 0;
+    position: relative;
+    box-sizing: border-box;
 }
 .list > .component_thing.view-grid {
-    width: 100%;
-    text-align: center;
-    transition: 0.1s ease transform;
-}
-.list > .component_thing.view-grid .box {
-    height: 156px;
-}
-/* @media (max-width: 699px) { */
-/*     .list > .component_thing.view-grid { */
-/*         width: 33.33%; */
-/*     } */
-/*     .list > .component_thing.view-grid .box { */
-/*         height: 200px; */
-/*     } */
-/* } */
-/* @media (max-width: 670px) { */
-/*     .list > .component_thing.view-grid .box { */
-/*         height: 170px; */
-/*     } */
-/* } */
-/* @media (max-width: 550px) { */
-/*     .list > .component_thing.view-grid { */
-/*         width: 50%; */
-/*     } */
-/*     .list > .component_thing.view-grid .box { */
-/*         height: 200px; */
-/*     } */
-/* } */
-/* @media (max-width: 480px) { */
-/*     .list > .component_thing.view-grid .box { */
-/*         height: 170px; */
-/*     } */
-/* } */
-/* @media (max-width: 400px) { */
-/*     .list > .component_thing.view-grid .box { */
-/*         height: 140px; */
-/*     } */
-/*     .list > .component_thing.view-grid .box .info_extension { */
-/*         font-size: 0.8em !important; */
-/*         padding: 3px 10px; */
-/*     } */
-/* } */
-/* @media (max-width: 340px) { */
-/*     .list > .component_thing.view-grid .box { */
-/*         height: 130px; */
-/*     } */
-/* } */
-.list > .component_thing.view-grid .box {
-    margin: 2px;
-    padding: 0;
-    position: relative;
-    border-width: 0;
-    box-sizing: border-box;
     border: 2px solid var(--border);
     border-radius: 5px;
+    text-align: center;
+    height: 160px;
+    box-sizing: border-box;
 }
-.list > .component_thing.view-grid .box > span > img {
+.list > .component_thing.view-grid > img {
     padding: 0;
     margin: 0;
     display: block;
 }
-.list > .component_thing.view-grid .box > span > img.component_icon {
+.list > .component_thing.view-grid > img.component_icon {
     padding: 30px;
     box-sizing: border-box;
     width: 100%;
@@ -189,7 +130,7 @@
     margin: 0 auto;
     z-index: 0;
 }
-.list > .component_thing.view-grid .box > span > img.thumbnail {
+.list > .component_thing.view-grid > img.thumbnail {
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -197,7 +138,7 @@
     background: var(--dark);
     z-index: 0;
 }
-.list > .component_thing.view-grid .box .info_extension {
+.list > .component_thing.view-grid .info_extension {
     position: absolute;
     top: 45%;
     text-align: right;
@@ -208,7 +149,7 @@
     font-size: 0.95em;
     text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
 }
-.list > .component_thing.view-grid .box .info_extension span {
+.list > .component_thing.view-grid .info_extension span {
     background: var(--color);
     color: var(--bg-color);
     border-radius: 4px;
@@ -221,10 +162,10 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.list > .component_thing.view-list .info_extension {
+.list > .component_thing .info_extension span:empty {
     display: none;
 }
-.list > .component_thing.view-grid .box .component_filename {
+.list > .component_thing.view-grid .component_filename {
     letter-spacing: -0.5px;
     z-index: 2;
     position: absolute;
@@ -234,20 +175,20 @@
     border-radius: 2px;
     padding: 3px 0px;
 }
-.list > .component_thing.view-grid .box .component_filename .file-details {
+.list > .component_thing.view-grid .component_filename .file-details {
     width: calc(100% - 10px);
     display: block;
 }
-.list > .component_thing.view-grid .box .component_filename .file-details > span {
+.list > .component_thing.view-grid .component_filename .file-details > span {
     width: 100%;
 }
-.list > .component_thing.view-grid .box .component_filename .file-details > span form input {
+.list > .component_thing.view-grid .component_filename .file-details > span form input {
     letter-spacing: -0.5px;
     text-align: center;
     width: 100%;
     padding: 0;
 }
-.list > .component_thing.view-grid .box .image_layer {
+.list > .component_thing.view-grid .image_layer {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -257,42 +198,27 @@
     background: rgba(0, 0, 0, 0);
     transition: 0.2s ease-out background;
 }
-.list > .component_thing.view-grid .box .component_filesize, .list > .component_thing.view-grid .box .component_datetime {
+.list > .component_thing.view-grid .component_filesize,
+.list > .component_thing.view-grid .component_datetime {
     display: none;
 }
-.list > .component_thing.view-grid .box .component_action {
-    transform: translateX(5px);
-    transition: 0.15s ease-out all;
-    z-index: 2;
-    display: block;
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    border-radius: 5px;
-    margin-right: 0px;
-    padding: 0px;
-}
-.list > .component_thing.view-grid .box img.thumbnail {
+.list > .component_thing.view-grid img.thumbnail {
     transition: 0.2s ease-out transform;
 }
-.list > .component_thing.view-grid.not-selected .box:hover .component_action {
-    transition-delay: 0.1s;
-    transform: translateX(0);
-}
-.list > .component_thing.view-grid.not-selected .box:hover img.thumbnail {
+.list > .component_thing.view-grid.not-selected:hover img.thumbnail {
     transform: scale(0.6);
 }
-.list > .component_thing.view-grid.not-selected .box:hover .image_layer {
+.list > .component_thing.view-grid.not-selected:hover .image_layer {
     background: var(--border);
 }
-.list > .component_thing.view-grid.not-selected .box.preview:hover .component_filename {
+.list > .component_thing.view-grid.not-selected.preview:hover .component_filename {
     opacity: 1;
 }
-.list > .component_thing.view-grid.not-selected .box.preview .component_filename {
+.list > .component_thing.view-grid.not-selected.preview .component_filename {
     transition: 0.2s ease-out opacity;
     opacity: 0;
 }
-.list > .component_thing.view-grid.selected .box img.thumbnail {
+.list > .component_thing.view-grid.selected img.thumbnail {
     transform: scale(0.6);
 }
 .list > .component_thing.view-grid .component_checkbox {
@@ -301,9 +227,17 @@
     left: 3px;
     transform: translateX(-5px);
 }
-.list > .component_thing.view-grid:hover .component_checkbox, .list > .component_thing.view-grid.selected .component_checkbox {
+.list > .component_thing.view-grid:hover .component_checkbox,
+.list > .component_thing.view-grid.selected .component_checkbox {
     transform: translateX(0px);
 }
+
+.list > .component_thing.view-list {
+    padding: 10px;
+}
+.list > .component_thing.view-list .info_extension {
+    display: none;
+}
 .list > .component_thing.view-list .component_checkbox {
     top: 8px;
     left: 8px;
@@ -313,42 +247,39 @@
 .list > .component_thing.view-list .component_checkbox:hover {
     background: rgba(0, 0, 0, 0.1);
 }
-.list > .component_thing.view-list:hover .component_checkbox, .list > .component_thing.view-list.selected .component_checkbox {
+.list > .component_thing.view-list:hover .component_checkbox,
+.list > .component_thing.view-list.selected .component_checkbox {
     display: block;
 }
-.list > .component_thing.view-list:hover .component_checkbox ~ span > .component_icon, .list > .component_thing.view-list.selected .component_checkbox ~ span > .component_icon {
+.list > .component_thing.view-list:hover .component_checkbox ~ .component_icon,
+.list > .component_thing.view-list.selected .component_checkbox ~ .component_icon {
     visibility: hidden;
 }
-.list > .component_thing.view-list:hover .component_checkbox .indicator, .list > .component_thing.view-list.selected .component_checkbox .indicator {
+.list > .component_thing.view-list:hover .component_checkbox .indicator,
+.list > .component_thing.view-list.selected .component_checkbox .indicator {
     border-color: var(--color);
 }
-.list > .component_thing.view-list:hover .component_checkbox input ~ span, .list > .component_thing.view-list.selected .component_checkbox input ~ span {
+.list > .component_thing.view-list:hover .component_checkbox input ~ span,
+.list > .component_thing.view-list.selected .component_checkbox input ~ span {
     background-color: rgba(255, 255, 255, 0.4);
 }
-.list > .component_thing.view-list:hover .component_checkbox input:checked ~ span, .list > .component_thing.view-list.selected .component_checkbox input:checked ~ span {
+.list > .component_thing.view-list:hover .component_checkbox input:checked ~ span,
+.list > .component_thing.view-list.selected .component_checkbox input:checked ~ span {
     background-color: var(--color);
 }
-.list .not-selected .box:hover .component_action {
-    opacity: 1;
-}
-.list .not-selected .box .component_action {
-    opacity: 0;
-}
-.list .selected .box .component_action {
-    opacity: 0;
-}
 
-.dark-mode .component_thing:hover .box {
+/* Dark Mode */
+.dark-mode .component_thing:hover {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 2px;
 }
-.dark-mode .component_thing .box {
+.dark-mode .component_thing {
     background: inherit;
 }
 .dark-mode .component_thing .component_filename {
     color: var(--light);
 }
-.dark-mode .component_thing .box.highlight {
+.dark-mode .component_thing.highlight {
     background: rgba(255, 255, 255, 0.05);
 }
 .dark-mode .component_thing form input {
diff --git a/public/assets/pages/filespage/thing.js b/public/assets/pages/filespage/thing.js
index ee9bdc20..50cf268f 100644
--- a/public/assets/pages/filespage/thing.js
+++ b/public/assets/pages/filespage/thing.js
@@ -1,7 +1,8 @@
-import { createElement } from "../../lib/skeleton/index.js";
+import { createElement, createFragment } from "../../lib/skeleton/index.js";
 import { qs } from "../../lib/dom.js";
 import assert from "../../lib/assert.js";
 
+import { files$ } from "./ctrl_filesystem.js";
 import { addSelection, isSelected } from "./state_selection.js";
 
 const IMAGE = {
@@ -10,25 +11,18 @@ const IMAGE = {
 };
 
 const $tmpl = createElement(`
-    <div class="component_thing no-select" draggable="true">
-        <a href="__TEMPLATE__" data-link>
-            <div class="box">
-                <div class="component_checkbox"><input type="checkbox"><span class="indicator"></span></div>
-                <span>
-                    <img class="component_icon" draggable="false" src="__TEMPLATE__" alt="directory">
-                    <div class="info_extension"></div>
-                </span>
-                <span class="component_filename">
-                    <span class="file-details">
-                        <span>__TEMPLATE__<span class="extension"></span></span>
-                    </span>
-                </span>
-                <span class="component_datetime"></span>
-                <div class="component_action"></div>
-                <div class="selectionOverlay"></div>
-            </div>
-        </a>
-    </div>
+    <a href="__TEMPLATE__" class="component_thing no-select" draggable="true" data-link>
+        <div class="component_checkbox"><input type="checkbox"><span class="indicator"></span></div>
+        <img class="component_icon" draggable="false" src="__TEMPLATE__" alt="directory">
+        <div class="info_extension"><span></span></div>
+        <span class="component_filename">
+            <span class="file-details"><span>
+                <span class="component_filesize">(281B)</span>
+            </span></span>
+        </span>
+        <span class="component_datetime"></span>
+        <div class="selectionOverlay"></div>
+    </a>
 `);
 
 // a filesystem "thing" is typically either a file or folder which have a lot of behavior builtin.
@@ -41,7 +35,7 @@ export function createThing({
     type = "N/A",
     time = 0,
     path = null,
-    // size = 0,
+    size = 0,
     // time = null,
     link = "",
     // permissions = {}
@@ -51,23 +45,36 @@ export function createThing({
 }) {
     const $thing = $tmpl.cloneNode(true);
     assert.type($thing, window.HTMLElement);
-    const $time = qs($thing, ".component_datetime");
-    const $label = qs($thing, ".component_filename .file-details > span");
-    const $extension = qs($thing, ".info_extension");
 
-    $thing.querySelector("a").setAttribute("href", link);
-    $thing.querySelector("img").setAttribute("src", (type === "file" ? IMAGE.FILE : IMAGE.FOLDER));
+    // querySelector is nicer but slower and this is the hot path so we want
+    // it fast!
+    const $link = $thing;
+    const $checkbox = $thing.children[0]; // = qs($thing, ".component_checkbox");
+    const $img = $thing.children[1]; // = qs($thing, "img")
+    const $extension = $thing.children[2].firstElementChild; // = qs($thing, ".info_extension > span");
+    const $label = $thing.children[3].firstElementChild.firstElementChild; // = qs($thing, ".component_filename .file-details > span");
+    const $time = $thing.children[4]; // = qs($thing, ".component_datetime");
+
+    $link.setAttribute("href", link);
+    $img.setAttribute("src", (type === "file" ? IMAGE.FILE : IMAGE.FOLDER));
     $thing.setAttribute("data-droptarget", type === "directory");
     $thing.setAttribute("data-n", n);
+    $thing.setAttribute("data-path", path);
     $thing.classList.add("view-" + view);
     $time.textContent = formatTime(new Date(time));
 
     const [filename, ext] = formatFile(name);
-    $label.innerHTML = type === "file" ? `${filename}<span class="extension">${formatDot(ext)}</span>` : name;
-    if (type === "file" && !!ext) $extension.innerHTML = `<span>${ext}</span>`;
+    $label.textContent = name;
+    if (type === "file") {
+        $extension.textContent = ext;
+        const $filesize = document.createElement("span");
+        $filesize.classList.add("component_filesize");
+        $filesize.textContent = formatSize(size);
+        $label.appendChild($filesize);
+    }
 
     if (read_only === true) {
-        qs($thing, ".component_checkbox").classList.add("hidden");
+        $checkbox.classList.add("hidden");
         return $thing;
     } else if (type === "hidden") {
         $thing.classList.add("hidden");
@@ -76,14 +83,15 @@ export function createThing({
 
     const checked = isSelected(n);
     $thing.classList.add(checked ? "selected" : "not-selected");
-    qs($thing, `input[type="checkbox"]`).checked = checked;
+    $checkbox.firstElementChild.checked = checked;
 
-    $thing.querySelector(".component_checkbox").onclick = function(e) {
+    $checkbox.onclick = (e) => {
         e.preventDefault();
         e.stopPropagation();
         addSelection({
-            name, type,
-            shift: e.shiftKey, n,
+            n,
+            path: $thing.getAttribute("data-path"),
+            shift: (e.shiftKey || e.metaKey), files: (files$.value || []),
         });
     };
     $thing.ondragstart = (e) => {
@@ -92,7 +100,7 @@ export function createThing({
 
         const crt = $thing.cloneNode(true);
         $thing.style.opacity = "0.7";
-        const $box = crt.querySelector(".box");
+        const $box = crt;
         crt.style.opacity = "0.2";
         crt.style.backgroundColor = "var(--border)";
         $box.style.backgroundColor = "inherit";
@@ -119,11 +127,14 @@ export function createThing({
 
 function formatTime(date) {
     if (!date) return "";
-    return new Intl.DateTimeFormat(navigator.language || "en-US")
-        .format(date)
-        .split("/")
-        .map((chunk) => chunk.padStart(2, "0"))
-        .join("/");
+    // Intl.DateTimeFormat is slow and in the hot path, so
+    // let's render date manually if possible
+    if (navigator.language.substr(0, 2) === "en") {
+        return date.getFullYear() + "/" +
+            (date.getMonth() + 1).toString().padStart(2, "0") + "/" +
+            date.getDate().toString().padStart(2, "0");
+    }
+    return new Intl.DateTimeFormat(navigator.language).format(date);
 }
 
 function formatFile(filename) {
@@ -139,3 +150,19 @@ function formatDot(ext) {
     if (!ext) return "";
     return "." + ext;
 }
+
+function formatSize(bytes) {
+    if (Number.isNaN(bytes) || bytes < 0 || bytes === undefined) {
+        return "";
+    } else if (bytes < 1024) {
+        return "("+bytes+"B)";
+    } else if (bytes < 1048576) {
+        return "("+Math.round(bytes/1024*10)/10+"KB)";
+    } else if (bytes < 1073741824) {
+        return "("+Math.round(bytes/(1024*1024)*10)/10+"MB)";
+    } else if (bytes < 1099511627776) {
+        return "("+Math.round(bytes/(1024*1024*1024)*10)/10+"GB)";
+    } else {
+        return "("+Math.round(bytes/(1024*1024*1024*1024))+"TB)";
+    }
+}