Allow compainion opening in thumbnail view

README.md

@@ -6,6 +6,8 @@ Minimal self-hosted personal wiki. Folders are pages.
 
 - **Pages** every folder is a page. Place an `index.md` inside a folder and it renders as HTML. Drop any other files (PDFs, images, etc.) alongside it and they appear in the listing below the content. Navigating to a path that does not exist shows a **[CREATE]** prompt.
 
+- **View settings** per folder, display the file listing as a list or thumbnail grid and pick the sort key/order, via the **view** button in the `Files` header. See the [View Settings](#view-settings) section.
+
 - **Search** search across all page names (folder names) in the wiki, accessible from the navigation bar.
 
 - **Wikilinks** link between pages with `[[Page Name]]` syntax. When a page is renamed or moved, all wikilinks pointing to it are rewritten automatically to reflect the new path.
@@ -42,9 +44,22 @@ go run . -dir ./wiki -addr :8080 -user me -pass secret
 | `-pass` | _(none)_ | Basic auth password |
 | `-reindex-interval` | `30m` | Periodic search index rebuild interval (`0` disables) |
 
+## View Settings
+
+The **view** button in a folder's `Files` header sets how its listing renders,
+persisting three keys to `.page-settings`:
+
+| Key | Values (default first) |
+|------|------------------------|
+| `view` | `list`, `thumbnail` |
+| `sort` | `name`, `modified`, `size` (folders always sort by name, grouped first) |
+| `order` | `asc`, `desc` |
+
 ## Special Folder Types
 
-A folder can opt into special rendering by adding a `.page-settings` file:
+A folder can opt into special rendering by adding a `.page-settings` file. The
+same file also holds the [View Settings](#view-settings) keys; only the `type`
+key selects a special renderer:
 
 ```
 type = diary

assets/companion.js

@@ -115,13 +115,15 @@
     function wireFileLinks() {
         if (!state.available) return;
         document.addEventListener('click', function (e) {
-            var item = e.target.closest && e.target.closest('.list-item');
+            if (!e.target.closest) return;
-            if (!item) return;
+            // Match both listing styles: table rows expose the file link inside
-            var anchor = e.target.closest('a');
+            // a .list-item row; thumbnail tiles are bare a.thumb-tile anchors.
+            var anchor = e.target.closest('.list-item a, a.thumb-tile');
             if (!anchor) return;
+            var item = anchor.closest('.list-item');
             // Only intercept the primary file link, and only for files (not folders).
             // Folders end with "/" — let the browser navigate normally.
-            var path = item.dataset.path || anchor.getAttribute('href');
+            var path = (item && item.dataset.path) || anchor.getAttribute('href');
             if (!path || path.endsWith('/')) return;
             // Allow modified clicks (open in new tab, etc.) to pass through.
             if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;