From 2ed07e3fcb5964cd5e49b77f092d991e4a838206 Mon Sep 17 00:00:00 2001
From: reecebrowne <74901996+reecebrowne@users.noreply.github.com>
Date: Thu, 6 Feb 2025 10:38:14 +0000
Subject: [PATCH] Homepage hotfix (#2894)

# Description of Changes

Fix replace-and-invert-color-pdf nav
Fix legacy homepage search
Closes #(2888)

---

## Checklist

### General

- [ x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
---
 .../templates/fragments/navElements.html      | 142 +++++++++---------
 src/main/resources/templates/home-legacy.html |  27 ++--
 2 files changed, 83 insertions(+), 86 deletions(-)

diff --git a/src/main/resources/templates/fragments/navElements.html b/src/main/resources/templates/fragments/navElements.html
index 42fb34e6..5b4e1b9e 100644
--- a/src/main/resources/templates/fragments/navElements.html
+++ b/src/main/resources/templates/fragments/navElements.html
@@ -1,19 +1,19 @@
 <th:block th:fragment="navElements">
-    <div id="groupOrganize" class="feature-group">
+  <div id="groupOrganize" class="feature-group">
+    <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.organize})}">
+    </div>
+    <div class="nav-group-container">
       <div
-        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.organize})}">
-      </div>
-      <div class="nav-group-container">
-        <div
         th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
-        </div>
+      </div>
 
-        <div
+      <div
         th:replace="~{fragments/navbarEntry :: navbarEntry ('merge-pdfs', 'add_to_photos', 'home.merge.title', 'home.merge.desc', 'merge.tags', 'organize')}">
-        </div>
-        <div
-        th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdfs', 'cut', 'home.split.title', 'home.split.desc', 'split.tags', 'organize')}"></div>
-        <div
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdfs', 'cut', 'home.split.title', 'home.split.desc', 'split.tags', 'organize')}">
+      </div>
+      <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('rotate-pdf', 'rotate_right', 'home.rotate.title', 'home.rotate.desc', 'rotate.tags', 'organize')}">
       </div>
       <div
@@ -37,15 +37,14 @@
       <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-single-page', 'looks_one', 'home.PdfToSinglePage.title', 'home.PdfToSinglePage.desc', 'PdfToSinglePage.tags', 'organize')}">
       </div>
-      </div>
     </div>
+  </div>
 
-    <div id="groupConvertTo"  class="feature-group">
+  <div id="groupConvertTo" class="feature-group">
+    <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
+    </div>
+    <div class="nav-group-container">
       <div
-        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
-      </div>
-      <div class="nav-group-container">
-        <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('img-to-pdf', 'picture_as_pdf', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'convertto')}">
       </div>
       <div
@@ -63,14 +62,13 @@
       <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('book-to-pdf', 'book', 'home.BookToPDF.title', 'home.BookToPDF.desc', 'BookToPDF.tags', 'convertto')}">
       </div>
-      </div>
     </div>
-    <div id="groupConvertFrom" class="feature-group">
+  </div>
+  <div id="groupConvertFrom" class="feature-group">
+    <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertFrom})}">
+    </div>
+    <div class="nav-group-container">
       <div
-        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertFrom})}">
-      </div>
-      <div class="nav-group-container">
-        <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-img', 'photo_library', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'convert')}">
       </div>
       <div
@@ -98,17 +96,16 @@
         th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-book', 'book', 'home.PDFToBook.title', 'home.PDFToBook.desc', 'PDFToBook.tags', 'convert')}">
       </div>
       <div
-      th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-markdown', 'markdown_copy', 'home.PDFToMarkdown.title', 'home.PDFToMarkdown.desc', 'PDFToMarkdown.tags', 'convert')}">
-         </div>
+        th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-markdown', 'markdown_copy', 'home.PDFToMarkdown.title', 'home.PDFToMarkdown.desc', 'PDFToMarkdown.tags', 'convert')}">
+      </div>
 
     </div>
+  </div>
+  <div id="convertGroup" class="feature-group">
+    <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
     </div>
-    <div id="convertGroup"  class="feature-group">
+    <div class="nav-group-container">
       <div
-        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
-      </div>
-      <div class="nav-group-container">
-        <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('img-to-pdf', 'picture_as_pdf', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'convertto')}">
       </div>
       <div
@@ -126,12 +123,11 @@
       <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('book-to-pdf', 'book', 'home.BookToPDF.title', 'home.BookToPDF.desc', 'BookToPDF.tags', 'convertto')}">
       </div>
-      </div>
+    </div>
+    <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertFrom})}">
+    </div>
+    <div class="nav-group-container">
       <div
-        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertFrom})}">
-      </div>
-      <div class="nav-group-container">
-        <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-img', 'photo_library', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'convert')}">
       </div>
       <div
@@ -159,13 +155,12 @@
         th:replace="~{fragments/navbarEntry :: navbarEntry('pdf-to-book', 'book', 'home.PDFToBook.title', 'home.PDFToBook.desc', 'PDFToBook.tags', 'convert')}">
       </div>
     </div>
+  </div>
+  <div id="groupSecurity" class="feature-group">
+    <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.security})}">
     </div>
-    <div id="groupSecurity" class="feature-group">
+    <div class="nav-group-container">
       <div
-        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.security})}">
-      </div>
-      <div class="nav-group-container">
-        <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('add-password', 'lock', 'home.addPassword.title', 'home.addPassword.desc', 'addPassword.tags', 'security')}">
       </div>
       <div
@@ -182,34 +177,34 @@
       </div>
 
       <div
-      th:replace="~{fragments/navbarEntry :: navbarEntry('validate-signature', 'verified', 'home.validateSignature.title', 'home.validateSignature.desc', 'validateSignature.tags', 'security')}">
-    </div>
-  <div
-  th:replace="~{fragments/navbarEntry :: navbarEntry('remove-cert-sign', 'remove_moderator', 'home.removeCertSign.title', 'home.removeCertSign.desc', 'removeCertSign.tags', 'security')}">
-</div>
-<div
-  th:replace="~{fragments/navbarEntry :: navbarEntry('sanitize-pdf', 'sanitizer', 'home.sanitizePdf.title', 'home.sanitizePdf.desc', 'sanitizePdf.tags', 'security')}">
-</div>
-<div
-  th:replace="~{fragments/navbarEntryCustom :: navbarEntry('auto-redact', '/images/redact-auto.svg#icon-redact-auto', 'home.autoRedact.title', 'home.autoRedact.desc', 'autoRedact.tags', 'security')}">
-</div>
-<div
-th:replace="~{fragments/navbarEntryCustom :: navbarEntry('redact', '/images/redact-manual.svg#icon-redact-manual', 'home.redact.title', 'home.redact.desc', 'redact.tags', 'security')}">
-</div>
-<div
-  th:replace="~{fragments/navbarEntry :: navbarEntry('stamp', 'approval', 'home.AddStampRequest.title', 'home.AddStampRequest.desc', 'AddStampRequest.tags', 'security')}">
-</div>
-<div
-  th:replace="~{fragments/navbarEntry :: navbarEntry('add-watermark', 'water_drop', 'home.watermark.title', 'home.watermark.desc', 'watermark.tags', 'security')}">
-</div>
+        th:replace="~{fragments/navbarEntry :: navbarEntry('validate-signature', 'verified', 'home.validateSignature.title', 'home.validateSignature.desc', 'validateSignature.tags', 'security')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('remove-cert-sign', 'remove_moderator', 'home.removeCertSign.title', 'home.removeCertSign.desc', 'removeCertSign.tags', 'security')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('sanitize-pdf', 'sanitizer', 'home.sanitizePdf.title', 'home.sanitizePdf.desc', 'sanitizePdf.tags', 'security')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntryCustom :: navbarEntry('auto-redact', '/images/redact-auto.svg#icon-redact-auto', 'home.autoRedact.title', 'home.autoRedact.desc', 'autoRedact.tags', 'security')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntryCustom :: navbarEntry('redact', '/images/redact-manual.svg#icon-redact-manual', 'home.redact.title', 'home.redact.desc', 'redact.tags', 'security')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('stamp', 'approval', 'home.AddStampRequest.title', 'home.AddStampRequest.desc', 'AddStampRequest.tags', 'security')}">
+      </div>
+      <div
+        th:replace="~{fragments/navbarEntry :: navbarEntry('add-watermark', 'water_drop', 'home.watermark.title', 'home.watermark.desc', 'watermark.tags', 'security')}">
       </div>
     </div>
+  </div>
 
-    <div id="groupView" class="feature-group">
-      <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.edit})}">
-      </div>
-      <div class="nav-group-container">
-        <div
+  <div id="groupView" class="feature-group">
+    <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.edit})}">
+    </div>
+    <div class="nav-group-container">
+      <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('view-pdf', 'menu_book', 'home.viewPdf.title', 'home.viewPdf.desc', 'viewPdf.tags', 'other')}">
       </div>
       <div
@@ -246,16 +241,15 @@ th:replace="~{fragments/navbarEntryCustom :: navbarEntry('redact', '/images/reda
         th:replace="~{fragments/navbarEntry :: navbarEntry('remove-image-pdf', 'remove_selection', 'home.removeImagePdf.title', 'home.removeImagePdf.desc', 'removeImagePdf.tags', 'other')}">
       </div>
       <div
-        th:replace="~{fragments/navbarEntry :: navbarEntry('replace-color-pdf', 'format_color_fill', 'home.replaceColorPdf.title', 'home.replaceColorPdf.desc', 'replaceColorPdf.tags', 'other')}">
-      </div>
+        th:replace="~{fragments/navbarEntry :: navbarEntry('replace-and-invert-color-pdf', 'format_color_fill', 'home.replaceColorPdf.title', 'home.replaceColorPdf.desc', 'replaceColorPdf.tags', 'other')}">
       </div>
     </div>
-    <div id="groupAdvanced" class="feature-group">
+  </div>
+  <div id="groupAdvanced" class="feature-group">
+    <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.advance})}">
+    </div>
+    <div class="nav-group-container">
       <div
-        th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.advance})}">
-      </div>
-      <div class="nav-group-container">
-        <div
         th:replace="~{fragments/navbarEntry :: navbarEntry('pipeline', 'family_history', 'home.pipeline.title', 'home.pipeline.desc', 'pipeline.tags', 'advance')}">
       </div>
       <div
@@ -291,6 +285,6 @@ th:replace="~{fragments/navbarEntryCustom :: navbarEntry('redact', '/images/reda
       <div
         th:replace="~{fragments/navbarEntryCustom :: navbarEntry('split-pdf-by-chapters', '/images/split-chapters.svg#icon-split-chapters', 'home.splitPdfByChapters.title', 'home.splitPdfByChapters.desc', 'splitPdfByChapters.tags', 'advance')}">
       </div>
-      </div>
+    </div>
   </div>
-  </th:block>
\ No newline at end of file
+</th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/home-legacy.html b/src/main/resources/templates/home-legacy.html
index f2a048d1..e1f2ee36 100644
--- a/src/main/resources/templates/home-legacy.html
+++ b/src/main/resources/templates/home-legacy.html
@@ -27,15 +27,16 @@
         <span class="material-symbols-rounded search-icon">
           search
         </span>
-        <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
+        <input type="text" id="searchBar" onkeyup="filterCardsLegacy()" th:placeholder="#{home.searchBar}" autofocus>
         <div style="display: flex; align-items: center;">
-        <a href="home" onclick="setAsDefault('home')" style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center;">
-          <span th:text="#{home.newHomePage}">
-          </span>
-        <span class="material-symbols-rounded toggle-favourites"  style="font-size: 2rem; margin-left: 0.2rem;" >
-          home
-        </span>
-        </a>
+          <a href="home" onclick="setAsDefault('home')"
+            style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center;">
+            <span th:text="#{home.newHomePage}">
+            </span>
+            <span class="material-symbols-rounded toggle-favourites" style="font-size: 2rem; margin-left: 0.2rem;">
+              home
+            </span>
+          </a>
         </div>
         <div id="filtersContainer">
           <span class="material-symbols-rounded filter-button" onclick="toggleFavoritesOnly()">
@@ -70,7 +71,8 @@
           </div>
 
           <div id="groupFavorites" class="feature-group-legacy">
-            <div th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.favorite})}">
+            <div
+              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.favorite})}">
             </div>
             <div class="feature-group-container">
             </div>
@@ -248,7 +250,8 @@
           </div>
 
           <div id="groupView" class="feature-group-legacy">
-            <div th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.edit})}">
+            <div
+              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.edit})}">
             </div>
             <div class="feature-group-container">
               <div
@@ -289,7 +292,7 @@
                 th:replace="~{fragments/card :: card(id='remove-image-pdf', cardTitle=#{home.removeImagePdf.title}, cardText=#{home.removeImagePdf.desc}, cardLink='remove-image-pdf', toolIcon='remove_selection', tags=#{removeImagePdf.tags}, toolGroup='other')}">
               </div>
               <div
-                th:replace="~{fragments/card :: card(id='replace-color-pdf', cardTitle=#{home.replaceColorPdf.title}, cardText=#{home.replaceColorPdf.desc}, cardLink='replace-and-invert-color-pdf', toolIcon='format_color_fill', tags=#{replaceColorPdf.tags}, toolGroup='other')}">
+                th:replace="~{fragments/card :: card(id='replace-and-invert-color-pdf', cardTitle=#{home.replaceColorPdf.title}, cardText=#{home.replaceColorPdf.desc}, cardLink='replace-and-invert-color-pdf', toolIcon='format_color_fill', tags=#{replaceColorPdf.tags}, toolGroup='other')}">
               </div>
 
             </div>
@@ -513,7 +516,7 @@
     function setAsDefault(value) {
       localStorage.setItem('defaultView', value);
       console.log(`Default view set to: ${value}`);
-      }
+    }
   </script>