From 566f98d91bb08903823995825e5e9c64f79820f7 Mon Sep 17 00:00:00 2001
From: Vladimir Mandic <mandic00@live.com>
Date: Fri, 1 Nov 2024 09:02:35 -0400
Subject: [PATCH] changelog search improvements

Signed-off-by: Vladimir Mandic <mandic00@live.com>
---
 javascript/changelog.js | 8 ++++++--
 javascript/sdnext.css   | 5 +++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/javascript/changelog.js b/javascript/changelog.js
index 410ec8cfb..80c9956b8 100644
--- a/javascript/changelog.js
+++ b/javascript/changelog.js
@@ -22,17 +22,20 @@ let currentElement = -1;
 function changelogNavigate(found) {
   const result = gradioApp().getElementById('changelog_result');
   result.innerHTML = '';
+  const text = document.createElement('p');
 
   const onPrev = () => {
     if (currentElement > 0) {
       currentElement--;
       found[currentElement].scrollIntoView();
+      text.innerHTML = ` &nbsp search item ${currentElement + 1} of ${found.length}`;
     }
   };
   const onNext = () => {
     if (currentElement < found.length - 1) {
       currentElement++;
       found[currentElement].scrollIntoView();
+      text.innerHTML = ` &nbsp search item ${currentElement + 1} of ${found.length}`;
     }
   };
 
@@ -40,15 +43,16 @@ function changelogNavigate(found) {
   prev.innerHTML = ' ⇦ ';
   prev.className = 'changelog_arrow';
   prev.onclick = onPrev;
+  prev.title = 'Search previous';
   result.appendChild(prev);
 
   const next = document.createElement('p');
   next.innerHTML = ' ⇨ ';
   next.className = 'changelog_arrow';
+  next.title = 'Search next';
   next.onclick = onNext;
   result.appendChild(next);
 
-  const text = document.createElement('p');
   text.innerHTML = ` &nbsp found ${found.length} items`;
   result.appendChild(text);
 }
@@ -60,7 +64,7 @@ async function initChangelog() {
     if (changelogElements.length < 100) changelogElements = getAllChildren(md);
     const found = [];
     for (const el of changelogElements) {
-      if (getText(el).toLowerCase().includes(search.value.toLowerCase())) {
+      if (search.value.length > 1 && getText(el).toLowerCase().includes(search.value.toLowerCase())) {
         el.classList.add('changelog_highlight');
         found.push(el);
       } else {
diff --git a/javascript/sdnext.css b/javascript/sdnext.css
index c0192235c..1b2a6b3c8 100644
--- a/javascript/sdnext.css
+++ b/javascript/sdnext.css
@@ -321,8 +321,9 @@ div:has(>#tab-gallery-folders) { flex-grow: 0 !important; background-color: var(
 
 /* changelog */
 #changelog_markdown { max-height: 55vh; margin-top: 1em; }
-#changelog_result { display: flex; cursor: pointer; margin-left: 1em; }
-.changelog_arrow { font-size: 2em; margin-right: 0.5em; }
+#changelog_result { display: flex; margin-left: 1em; align-items: center; }
+.changelog_arrow { font-size: 2em; padding: 0.1em; cursor: pointer; height: 1em; background-color: var(--button-secondary-background-fill); }
+.changelog_arrow:hover { background-color: var(--button-primary-border-color-hover); }
 .changelog_highlight { background-color: var(--color-warning); }
 
 /* loader */