From 3802f1fc238413d43ab8de88902e4a0d0f8222dc Mon Sep 17 00:00:00 2001
From: Zaki <18zaki18@gmail.com>
Date: Sat, 9 May 2026 23:23:30 +0100
Subject: [PATCH] Grid view: arrow up/down moves vertically by column count;
 left/right moves linearly

---
 js/app.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/js/app.js b/js/app.js
index db16b52..efc4a76 100644
--- a/js/app.js
+++ b/js/app.js
@@ -672,6 +672,14 @@ function getFilteredEntries(noFolder) {
     return entries.filter(e => (e.folder || 'All') === selectedFolder);
 }
 
+function getGridCols() {
+    const c = document.getElementById('entriesContainer');
+    if (!c || !c.firstElementChild) return 1;
+    const w = c.firstElementChild.offsetWidth;
+    const gap = parseInt(getComputedStyle(c).columnGap) || 0;
+    return Math.max(1, Math.round(c.offsetWidth / (w + gap)));
+}
+
 // ==================== RENDER ====================
 function render() {
     const c = document.getElementById('entriesContainer');
@@ -1420,8 +1428,13 @@ document.addEventListener('keydown', function(e) {
             const firstId = [...selectedIds][0];
             idx = filtered.findIndex(e => e.id == firstId);
         }
-        if (isNext) idx = idx < filtered.length - 1 ? idx + 1 : 0;
-        else idx = idx > 0 ? idx - 1 : filtered.length - 1;
+        if (view === 'grid' && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+            if (idx < 0) idx = 0;
+            else { const cols = getGridCols(); if (e.key === 'ArrowDown') { const next = idx + cols; idx = next < filtered.length ? next : idx; } else { const prev = idx - cols; idx = prev >= 0 ? prev : idx; } }
+        } else {
+            if (isNext) idx = idx < filtered.length - 1 ? idx + 1 : 0;
+            else idx = idx > 0 ? idx - 1 : filtered.length - 1;
+        }
         if (e.shiftKey) {
             const anchorId = lastSelectedId !== null ? lastSelectedId : filtered[idx].id;
             const anchor = filtered.findIndex(e => e.id == anchorId);