View switching feature

assets/page/main.html

@@ -8,7 +8,17 @@
 <div class="content">{{.SpecialContent}}</div>
 {{end}}
 {{if .Entries}}
-<h2 id="files">Files <button class="btn btn-small" data-companion-reveal hidden title="Open folder in file manager">open</button></h2>
+<h2 id="files">Files <button class="btn btn-small" data-companion-reveal hidden title="Open folder in file manager">open</button>{{if .CanEdit}} <button class="btn btn-small" id="view-settings-btn" onclick="openViewSettings()" title="View &amp; sorting" data-view="{{.View}}" data-sort="{{.Sort}}" data-order="{{.Order}}">view</button>{{end}}</h2>
+{{if eq .View "thumbnail"}}
+<div class="thumb-grid">
+    {{range .Entries}}
+    <a class="thumb-tile" href="{{.URL}}" title="{{.Name}}">
+        {{if .ThumbURL}}<img class="thumb-img" src="{{.ThumbURL}}" alt="" loading="lazy" width="300">{{else}}<span class="thumb-icon">{{.Icon}}</span>{{end}}
+        <span class="thumb-label truncate">{{.Name}}</span>
+    </a>
+    {{end}}
+</div>
+{{else}}
 <table class="data-table panel">
     <tbody>
     {{range .Entries}}
@@ -20,6 +30,8 @@
     {{end}}
     </tbody>
 </table>
+{{end}}
+{{if .CanEdit}}<script src="/_/page/view-settings.js"></script>{{end}}
 {{else if not .Content}}
 {{if not .SpecialContent}}
 <p class="empty">Empty folder — <a href="?edit">[CREATE]</a></p>

assets/page/view-settings.js

@@ -0,0 +1,85 @@
+// View-settings modal: lets the user pick the folder listing's view style,
+// sort key, and order, then persists them by POSTing to the folder with
+// ?settings. Reuses openModal/closeModal and postReplace from page/actions.js.
+function openViewSettings() {
+    var btn = document.getElementById('view-settings-btn');
+    var state = {
+        view: (btn && btn.dataset.view) || 'list',
+        sort: (btn && btn.dataset.sort) || 'name',
+        order: (btn && btn.dataset.order) || 'asc'
+    };
+
+    // segmented builds a row of mutually-exclusive .btn toggles bound to a
+    // single state key, marking the current choice with .is-active.
+    function segmented(key, options) {
+        var wrap = document.createElement('div');
+        wrap.className = 'row gap-1';
+        options.forEach(function (opt) {
+            var b = document.createElement('button');
+            b.type = 'button';
+            b.className = 'btn btn-small';
+            b.textContent = opt.label;
+            if (state[key] === opt.value) b.classList.add('is-active');
+            b.addEventListener('click', function () {
+                state[key] = opt.value;
+                wrap.querySelectorAll('button').forEach(function (x) {
+                    x.classList.remove('is-active');
+                });
+                b.classList.add('is-active');
+            });
+            wrap.appendChild(b);
+        });
+        return wrap;
+    }
+
+    function field(labelText, control) {
+        var row = document.createElement('div');
+        row.className = 'col gap-1';
+        var label = document.createElement('span');
+        label.className = 'caption';
+        label.textContent = labelText;
+        row.appendChild(label);
+        row.appendChild(control);
+        return row;
+    }
+
+    var sortSelect = document.createElement('select');
+    sortSelect.className = 'input';
+    [['name', 'Name'], ['modified', 'Modified'], ['size', 'Size']].forEach(function (o) {
+        var opt = document.createElement('option');
+        opt.value = o[0];
+        opt.textContent = o[1];
+        if (state.sort === o[0]) opt.selected = true;
+        sortSelect.appendChild(opt);
+    });
+    sortSelect.addEventListener('change', function () { state.sort = sortSelect.value; });
+
+    var body = document.createElement('div');
+    body.className = 'col';
+    body.appendChild(field('View style', segmented('view', [
+        { value: 'list', label: 'List' },
+        { value: 'thumbnail', label: 'Thumbnail' }
+    ])));
+    body.appendChild(field('Sort by', sortSelect));
+    body.appendChild(field('Order', segmented('order', [
+        { value: 'asc', label: 'Asc' },
+        { value: 'desc', label: 'Desc' }
+    ])));
+
+    openModal({
+        title: 'View settings',
+        body: body,
+        confirm: {
+            label: 'SAVE',
+            onConfirm: function () {
+                var action = window.location.pathname + '?settings';
+                var formBody = 'view=' + encodeURIComponent(state.view) +
+                    '&sort=' + encodeURIComponent(state.sort) +
+                    '&order=' + encodeURIComponent(state.order);
+                var target = window.location.pathname;
+                closeModal();
+                postReplace(action, formBody, target);
+            }
+        }
+    });
+}