View switching feature

assets/style.css

@@ -192,6 +192,8 @@ footer {
 .btn-fab:hover { background: var(--bg-panel-hover); color: var(--primary-hover); }
 .danger { color: var(--danger); }
 .danger:hover { color: var(--danger-hover); }
+/* Selected segmented-toggle button (view-settings modal). */
+.btn.is-active { color: var(--primary-hover); }
 
 /* === Form controls ===
    .input baseline is shared by search-input, modal inputs, and the editor
@@ -435,6 +437,43 @@ button.fab { display: none; }
     background: var(--bg-panel) url("/_/icons/thumb-placeholder.svg") center/2rem no-repeat;
 }
 
+/* === Thumbnail listing grid ===
+   File-listing variant of .photo-grid: responsive tiles that pair a thumbnail
+   (or a file/folder icon for non-thumbnailable entries) with a truncated
+   name label beneath. */
+.thumb-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: var(--space-3);
+    margin-top: var(--space-3);
+}
+.thumb-tile {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    color: var(--text);
+    border: var(--border);
+    background: var(--bg-panel);
+    padding: var(--space-2);
+}
+.thumb-tile:hover { background: var(--bg-panel-hover); color: var(--primary-hover); }
+.thumb-img {
+    width: 100%;
+    height: 150px;
+    object-fit: cover;
+    display: block;
+    background: var(--bg) url("/_/icons/thumb-placeholder.svg") center/2rem no-repeat;
+}
+.thumb-icon {
+    height: 150px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 3rem;
+    color: var(--secondary);
+}
+.thumb-label { font-size: var(--font-sm); }
+
 .empty { padding: var(--space-4); text-align: center; }
 
 /* === Scrollbars === */