Home page improvements (#1940)

* Add feautre group header fragment for homepage.

* Add feature group headers to feature groups.

* Style feature groups.

* Add collapsing/expanding functionality as well as a favorites section.

* Cards are now sorted in the order of update link > favorite > alphabetical on the homepage.

* Decrease space between section title and cards.

* Add filtering buttons and view options to homepage.

* Hide list view button in preparation for release.

---------

Co-authored-by: FiratUsta <ahmetfiratusta@gmail.com>

src/main/resources/static/css/home.css

@@ -10,6 +10,26 @@
   outline-color: var(--md-sys-color-outline-variant);
 }
 
+#filtersContainer {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.filter-button {
+  color: var(--md-sys-color-secondary);
+  user-select: none;
+  cursor: pointer;
+  transition: transform 0.3s;
+  transform-origin: center center;
+}
+
+.filter-button:hover {
+  transform: scale(1.08);
+}
+
 .search-icon {
   position: absolute;
   margin: 0.75rem 1rem;
@@ -17,9 +37,50 @@
 }
 
 .features-container {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.feature-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.feature-group-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  color: var(--md-sys-color-on-surface);
+  margin-bottom: 15px;
+  user-select: none;
+  cursor: pointer;
+  gap: 10px;
+}
+
+.feature-group-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(15rem, 3fr));
   gap: 30px 30px;
+  transition: 0.5s all;
+  overflow: hidden;
+  margin: -20px;
+  padding: 20px;
+}
+
+.feature-group.collapsed>.feature-group-container {
+  max-height: 0 !important;
+  margin: 0;
+  padding: 0;
+}
+
+.header-expand-button {
+  transition: 0.5s all;
+  transform: rotate(90deg);
+}
+
+.header-expand-button.collapsed {
+  transform: rotate(0deg);
 }
 
 .feature-card {

src/main/resources/static/js/homecard.js

@@ -22,6 +22,26 @@ function filterCards() {
   }
 }
 
+function updateFavoritesSection() {
+  const favoritesContainer = document.getElementById("groupFavorites").querySelector(".feature-group-container");
+  favoritesContainer.innerHTML = "";
+  const cards = Array.from(document.querySelectorAll(".feature-card"));
+  let favoritesAmount = 0;
+  cards.forEach(card => {
+    if (localStorage.getItem(card.id) === "favorite") {
+      const duplicate = card.cloneNode(true);
+      favoritesContainer.appendChild(duplicate);
+      favoritesAmount++;
+    }
+  });
+  if (favoritesAmount === 0) {
+    document.getElementById("groupFavorites").style.display = "none";
+  } else {
+    document.getElementById("groupFavorites").style.display = "flex";
+  };
+  reorderCards(favoritesContainer);
+};
+
 function toggleFavorite(element) {
   var span = element.querySelector("span.material-symbols-rounded");
   var card = element.closest(".feature-card");
@@ -37,15 +57,17 @@ function toggleFavorite(element) {
     card.classList.remove("favorite");
     localStorage.removeItem(cardId);
   }
-  reorderCards();
+  reorderCards(card.parentNode);
+  updateFavoritesSection();
   updateFavoritesDropdown();
   filterCards();
 }
 
-
+function reorderCards(container) {
-function reorderCards() {
+  var cards = Array.from(container.querySelectorAll(".feature-card"));
-  var container = document.querySelector(".features-container");
+  cards.forEach(function (card) {
-  var cards = Array.from(container.getElementsByClassName("feature-card"));
+    container.removeChild(card);
+  });
   cards.sort(function (a, b) {
     var aIsFavorite = localStorage.getItem(a.id) === "favorite";
     var bIsFavorite = localStorage.getItem(b.id) === "favorite";
@@ -55,19 +77,29 @@ function reorderCards() {
     if (b.id === "update-link") {
       return 1;
     }
+
     if (aIsFavorite && !bIsFavorite) {
       return -1;
     }
-    if (!aIsFavorite && bIsFavorite) {
+    else if (!aIsFavorite && bIsFavorite) {
       return 1;
     }
-    return 0;
+    else {
+      return a.id > b.id;
+    }
   });
   cards.forEach(function (card) {
     container.appendChild(card);
   });
 }
 
+function reorderAllCards() {
+  const containers = Array.from(document.querySelectorAll(".feature-group-container"));
+  containers.forEach(function (container) {
+    reorderCards(container);
+  })
+}
+
 function initializeCards() {
   var cards = document.querySelectorAll(".feature-card");
   cards.forEach(function (card) {
@@ -79,11 +111,74 @@ function initializeCards() {
       card.classList.add("favorite");
     }
   });
-  reorderCards();
+  reorderAllCards();
+  updateFavoritesSection();
   updateFavoritesDropdown();
   filterCards();
 }
 
+function showFavoritesOnly() {
+  const groups = Array.from(document.querySelectorAll(".feature-group"));
+  if (localStorage.getItem("favoritesOnly") === "true") {
+    groups.forEach((group) => {
+      if (group.id !== "groupFavorites") {
+        group.style.display = "none";
+      };
+    })
+  } else {
+    groups.forEach((group) => {
+      if (group.id !== "groupFavorites") {
+        group.style.display = "flex";
+      };
+    })
+  };
+}
+
+function toggleFavoritesOnly() {
+  if (localStorage.getItem("favoritesOnly") === "true") {
+    localStorage.setItem("favoritesOnly", "false");
+  } else {
+    localStorage.setItem("favoritesOnly", "true");
+  }
+  showFavoritesOnly();
+}
+
+// Expands a feature group on true, collapses it on false and toggles state on null.
+function expandCollapseToggle(group, expand = null) {
+  if (expand === null) {
+    group.classList.toggle("collapsed");
+    group.querySelector(".header-expand-button").classList.toggle("collapsed");
+  } else if (expand) {
+    group.classList.remove("collapsed");
+    group.querySelector(".header-expand-button").classList.remove("collapsed");
+  } else {
+    group.classList.add("collapsed");
+    group.querySelector(".header-expand-button").classList.add("collapsed");
+  }
+
+  const collapsed = localStorage.getItem("collapsedGroups") ? JSON.parse(localStorage.getItem("collapsedGroups")) : [];
+  const groupIndex = collapsed.indexOf(group.id);
+
+  if (group.classList.contains("collapsed")) {
+    if (groupIndex === -1) {
+      collapsed.push(group.id);
+    }
+  } else {
+    if (groupIndex !== -1) {
+      collapsed.splice(groupIndex, 1);
+    }
+  }
+
+  localStorage.setItem("collapsedGroups", JSON.stringify(collapsed));
+}
+
+function expandCollapseAll(expandAll) {
+  const groups = Array.from(document.querySelectorAll(".feature-group"));
+  groups.forEach((group) => {
+    expandCollapseToggle(group, expandAll);
+  })
+}
+
 window.onload = initializeCards;
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -96,4 +191,27 @@ window.onload = initializeCards;
   }).catch(() => {
     console.error('Material Symbols Rounded font failed to load.');
   });
+
+  Array.from(document.querySelectorAll(".feature-group-header")).forEach(header => {
+    const parent = header.parentNode;
+    const container = header.parentNode.querySelector(".feature-group-container");
+    if (parent.id !== "groupFavorites") {
+      container.style.maxHeight = container.clientHeight + "px";
+    } else {
+      container.style.maxHeight = "500px";
+    }
+    header.onclick = () => {
+      expandCollapseToggle(parent);
+    };
+  })
+
+  const collapsed = localStorage.getItem("collapsedGroups") ? JSON.parse(localStorage.getItem("collapsedGroups")) : [];
+
+  Array.from(document.querySelectorAll(".feature-group")).forEach(group => {
+    if (collapsed.indexOf(group.id) !== -1) {
+      expandCollapseToggle(group, false);
+    }
+  })
+
+  showFavoritesOnly();
 });

src/main/resources/templates/fragments/featureGroupHeader.html

@@ -0,0 +1,6 @@
+<div th:fragment="featureGroupHeader" class="feature-group-header">
+  <h3 class="menu-title" th:text="${groupTitle}"></h3>
+  <span class="material-symbols-rounded header-expand-button">
+    chevron_right
+  </span>
+</div>

src/main/resources/templates/home.html

@@ -28,9 +28,26 @@
           search
         </span>
         <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
+
+        <div id="filtersContainer">
+          <span class="material-symbols-rounded filter-button" onclick="toggleFavoritesOnly()">
+            star
+          </span>
+          <span class="material-symbols-rounded filter-button" onclick="expandCollapseAll(true)">
+            expand_all
+          </span>
+          <span class="material-symbols-rounded filter-button" onclick="expandCollapseAll(false)">
+            collapse_all
+          </span>
+          <span class="material-symbols-rounded filter-button hidden" onclick="switchViewMode()">
+            dashboard
+          </span>
+        </div>
+
         <div class="features-container">
 
-          <div th:if="${@shouldShow}" class="feature-card favorite update-notice" id="update-link" style="display: none;">
+          <div th:if="${@shouldShow}" class="feature-card favorite update-notice" id="update-link"
+            style="display: none;">
             <a href="https://github.com/Stirling-Tools/Stirling-PDF/releases" target="_blank" rel="noopener">
               <div class="d-flex align-items-center">
                 <div id="tool-icon" class="advance" alt="icon">
@@ -44,81 +61,85 @@
             </a>
           </div>
 
-          <div
+          <div id="groupFavorites" class="feature-group">
-            th:replace="~{fragments/card :: card(id='pipeline', cardTitle=#{home.pipeline.title}, cardText=#{home.pipeline.desc}, cardLink='pipeline', toolIcon='family_history', tags=#{pipeline.tags}, toolGroup='advance')}">
+            <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.favorite})}">
             </div>
-          <div
+            <div class="feature-group-container">
-            th:replace="~{fragments/card :: card(id='view-pdf', cardTitle=#{home.viewPdf.title}, cardText=#{home.viewPdf.desc}, cardLink='view-pdf', toolIcon='menu_book', tags=#{viewPdf.tags}, toolGroup='other')}">
             </div>
-          <div
-            th:replace="~{fragments/card :: card(id='multi-tool', cardTitle=#{home.multiTool.title}, cardText=#{home.multiTool.desc}, cardLink='multi-tool', toolIcon='construction', tags=#{multiTool.tags}, toolGroup='advance')}">
           </div>
+
+          <div id="groupOrganize" class="feature-group">
+            <div
+              th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.organize})}">
+            </div>
+            <div class="feature-group-container">
               <div
                 th:replace="~{fragments/card :: card(id='merge-pdfs', cardTitle=#{home.merge.title}, cardText=#{home.merge.desc}, cardLink='merge-pdfs', toolIcon='add_to_photos', tags=#{merge.tags}, toolGroup='organize')}">
               </div>
               <div
                 th:replace="~{fragments/card :: card(id='split-pdfs', cardTitle=#{home.split.title}, cardText=#{home.split.desc}, cardLink='split-pdfs', toolIcon='cut', tags=#{split.tags}, toolGroup='organize')}">
               </div>
-
               <div
                 th:replace="~{fragments/card :: card(id='rotate-pdf', cardTitle=#{home.rotate.title}, cardText=#{home.rotate.desc}, cardLink='rotate-pdf', toolIcon='rotate_right', tags=#{rotate.tags}, toolGroup='organize')}">
               </div>
               <div
                 th:replace="~{fragments/card :: card(id='crop', cardTitle=#{home.crop.title}, cardText=#{home.crop.desc}, cardLink='crop', toolIcon='crop', tags=#{crop.tags}, toolGroup='organize')}">
               </div>
-          <div
-            th:replace="~{fragments/card :: card(id='add-page-numbers', cardTitle=#{home.add-page-numbers.title}, cardText=#{home.add-page-numbers.desc}, cardLink='add-page-numbers', toolIcon='123', tags=#{add-page-numbers.tags}, toolGroup='other')}">
-          </div>
-
-          <div
-            th:replace="~{fragments/card :: card(id='adjust-contrast', cardTitle=#{home.adjust-contrast.title}, cardText=#{home.adjust-contrast.desc}, cardLink='adjust-contrast', toolIcon='palette', tags=#{adjust-contrast.tags}, toolGroup='advance')}">
-          </div>
-          <div
-            th:replace="~{fragments/card :: card(id='img-to-pdf', cardTitle=#{home.imageToPdf.title}, cardText=#{home.imageToPdf.desc}, cardLink='img-to-pdf', toolIcon='image', tags=#{imageToPdf.tags}, toolGroup='image')}">
-          </div>
-          <div
-            th:replace="~{fragments/card :: card(id='pdf-to-img', cardTitle=#{home.pdfToImage.title}, cardText=#{home.pdfToImage.desc}, cardLink='pdf-to-img', toolIcon='image', tags=#{pdfToImage.tags}, toolGroup='image')}">
-          </div>
-
               <div
                 th:replace="~{fragments/card :: card(id='pdf-organizer', cardTitle=#{home.pdfOrganiser.title}, cardText=#{home.pdfOrganiser.desc}, cardLink='pdf-organizer', toolIcon='format_list_bulleted', tags=#{pdfOrganiser.tags}, toolGroup='organize')}">
               </div>
-          <div
-            th:replace="~{fragments/card :: card(id='add-image', cardTitle=#{home.addImage.title}, cardText=#{home.addImage.desc}, cardLink='add-image', toolIcon='text_fields', tags=#{addImage.tags}, toolGroup='other')}">
-          </div>
-          <div
-            th:replace="~{fragments/card :: card(id='add-watermark', cardTitle=#{home.watermark.title}, cardText=#{home.watermark.desc}, cardLink='add-watermark', toolIcon='water_drop', tags=#{watermark.tags}, toolGroup='security')}">
-          </div>
-
-          <div
-            th:replace="~{fragments/card :: card(id='file-to-pdf', cardTitle=#{home.fileToPDF.title}, cardText=#{home.fileToPDF.desc}, cardLink='file-to-pdf', toolIcon='draft', tags=#{fileToPDF.tags}, toolGroup='convert')}">
-          </div>
               <div
                 th:replace="~{fragments/card :: card(id='remove-pages', cardTitle=#{home.removePages.title}, cardText=#{home.removePages.desc}, cardLink='remove-pages', toolIcon='delete', tags=#{removePages.tags}, toolGroup='organize')}">
               </div>
               <div
-            th:replace="~{fragments/card :: card(id='add-password', cardTitle=#{home.addPassword.title}, cardText=#{home.addPassword.desc}, cardLink='add-password', toolIcon='lock', tags=#{addPassword.tags}, toolGroup='security')}">
+                th:replace="~{fragments/card :: card(id='multi-page-layout', cardTitle=#{home.pageLayout.title}, cardText=#{home.pageLayout.desc}, cardLink='multi-page-layout', toolIcon='dashboard', tags=#{pageLayout.tags}, toolGroup='organize')}">
               </div>
               <div
-            th:replace="~{fragments/card :: card(id='remove-password', cardTitle=#{home.removePassword.title}, cardText=#{home.removePassword.desc}, cardLink='remove-password', toolIcon='lock_open_right', tags=#{removePassword.tags}, toolGroup='security')}">
+                th:replace="~{fragments/card :: card(id='scale-pages', cardTitle=#{home.scalePages.title}, cardText=#{home.scalePages.desc}, cardLink='scale-pages', toolIcon='fullscreen', tags=#{scalePages.tags}, toolGroup='organize')}">
               </div>
               <div
-            th:replace="~{fragments/card :: card(id='compress-pdf', cardTitle=#{home.compressPdfs.title}, cardText=#{home.compressPdfs.desc}, cardLink='compress-pdf', toolIcon='zoom_in_map', tags=#{compressPdfs.tags}, toolGroup='advance')}">
+                th:replace="~{fragments/card :: card(id='extract-page', cardTitle=#{home.extractPage.title}, cardText=#{home.extractPage.desc}, cardLink='extract-page', toolIcon='upload', tags=#{extractPage.tags}, toolGroup='organize')}">
               </div>
               <div
-            th:replace="~{fragments/card :: card(id='change-metadata', cardTitle=#{home.changeMetadata.title}, cardText=#{home.changeMetadata.desc}, cardLink='change-metadata', toolIcon='assignment', tags=#{changeMetadata.tags}, toolGroup='other')}">
+                th:replace="~{fragments/card :: card(id='pdf-to-single-page', cardTitle=#{home.PdfToSinglePage.title}, cardText=#{home.PdfToSinglePage.desc}, cardLink='pdf-to-single-page', toolIcon='looks_one', tags=#{PdfToSinglePage.tags}, toolGroup='organize')}">
+              </div>
+            </div>
           </div>
 
+          <div id="groupConvertTo" class="feature-group">
             <div
-            th:replace="~{fragments/card :: card(id='change-permissions', cardTitle=#{home.permissions.title}, cardText=#{home.permissions.desc}, cardLink='change-permissions', toolIcon='encrypted', tags=#{permissions.tags}, toolGroup='security')}">
+              th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
+            </div>
+            <div class="feature-group-container">
+              <div
+                th:replace="~{fragments/card :: card(id='img-to-pdf', cardTitle=#{home.imageToPdf.title}, cardText=#{home.imageToPdf.desc}, cardLink='img-to-pdf', toolIcon='image', tags=#{imageToPdf.tags}, toolGroup='image')}">
               </div>
               <div
-            th:replace="~{fragments/card :: card(id='ocr-pdf', cardTitle=#{home.ocr.title}, cardText=#{home.ocr.desc}, cardLink='ocr-pdf', toolIcon='quick_reference_all', tags=#{ocr.tags}, toolGroup='other')}">
+                th:replace="~{fragments/card :: card(id='file-to-pdf', cardTitle=#{home.fileToPDF.title}, cardText=#{home.fileToPDF.desc}, cardLink='file-to-pdf', toolIcon='draft', tags=#{fileToPDF.tags}, toolGroup='convert')}">
               </div>
               <div
-            th:replace="~{fragments/card :: card(id='extract-images', cardTitle=#{home.extractImages.title}, cardText=#{home.extractImages.desc}, cardLink='extract-images', toolIcon='photo_library', tags=#{extractImages.tags}, toolGroup='other')}">
+                th:replace="~{fragments/card :: card(id='url-to-pdf', cardTitle=#{home.URLToPDF.title}, cardText=#{home.URLToPDF.desc}, cardLink='url-to-pdf', toolIcon='link', tags=#{URLToPDF.tags}, toolGroup='convert')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='html-to-pdf', cardTitle=#{home.HTMLToPDF.title}, cardText=#{home.HTMLToPDF.desc}, cardLink='html-to-pdf', toolIcon='html', tags=#{HTMLToPDF.tags}, toolGroup='convert')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='markdown-to-pdf', cardTitle=#{home.MarkdownToPDF.title}, cardText=#{home.MarkdownToPDF.desc}, cardLink='markdown-to-pdf', toolIcon='markdown', tags=#{MarkdownToPDF.tags}, toolGroup='convert')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='book-to-pdf', cardTitle=#{home.BookToPDF.title}, cardText=#{home.BookToPDF.desc}, cardLink='book-to-pdf', toolIcon='book', tags=#{BookToPDF.tags}, toolGroup='convert')}">
+              </div>
+            </div>
           </div>
 
+          <div id="groupConvertFrom" class="feature-group">
+            <div
+              th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.convertFrom})}">
+            </div>
+            <div class="feature-group-container">
+              <div
+                th:replace="~{fragments/card :: card(id='pdf-to-img', cardTitle=#{home.pdfToImage.title}, cardText=#{home.pdfToImage.desc}, cardLink='pdf-to-img', toolIcon='image', tags=#{pdfToImage.tags}, toolGroup='image')}">
+              </div>
               <div
                 th:replace="~{fragments/card :: card(id='pdf-to-pdfa', cardTitle=#{home.pdfToPDFA.title}, cardText=#{home.pdfToPDFA.desc}, cardLink='pdf-to-pdfa', toolIcon='picture_as_pdf', tags=#{pdfToPDFA.tags}, toolGroup='convert')}">
               </div>
@@ -128,7 +149,6 @@
               <div
                 th:replace="~{fragments/card :: card(id='pdf-to-presentation', cardTitle=#{home.PDFToPresentation.title}, cardText=#{home.PDFToPresentation.desc}, cardLink='pdf-to-presentation', toolIcon='slideshow', tags=#{PDFToPresentation.tags}, toolGroup='ppt')}">
               </div>
-
               <div
                 th:replace="~{fragments/card :: card(id='pdf-to-text', cardTitle=#{home.PDFToText.title}, cardText=#{home.PDFToText.desc}, cardLink='pdf-to-text', toolIcon='text_fields', tags=#{PDFToText.tags}, toolGroup='convert')}">
               </div>
@@ -139,17 +159,79 @@
                 th:replace="~{fragments/card :: card(id='pdf-to-xml', cardTitle=#{home.PDFToXML.title}, cardText=#{home.PDFToXML.desc}, cardLink='pdf-to-xml', toolIcon='code', tags=#{PDFToXML.tags}, toolGroup='convert')}">
               </div>
               <div
-            th:replace="~{fragments/card :: card(id='extract-image-scans', cardTitle=#{home.ScannerImageSplit.title}, cardText=#{home.ScannerImageSplit.desc}, cardLink='extract-image-scans', toolIcon='scanner', tags=#{ScannerImageSplit.tags}, toolGroup='advance')}">
+                th:replace="~{fragments/card :: card(id='pdf-to-csv', cardTitle=#{home.tableExtraxt.title}, cardText=#{home.tableExtraxt.desc}, cardLink='pdf-to-csv', toolIcon='csv', tags=#{tableExtraxt.tags}, toolGroup='convert')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='pdf-to-book', cardTitle=#{home.PDFToBook.title}, cardText=#{home.PDFToBook.desc}, cardLink='pdf-to-book', toolIcon='book', tags=#{PDFToBook.tags}, toolGroup='convert')}">
+              </div>
+            </div>
+          </div>
+
+          <div id="groupSecurity" class="feature-group">
+            <div
+              th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.security})}">
+            </div>
+            <div class="feature-group-container">
+              <div
+                th:replace="~{fragments/card :: card(id='add-password', cardTitle=#{home.addPassword.title}, cardText=#{home.addPassword.desc}, cardLink='add-password', toolIcon='lock', tags=#{addPassword.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='remove-password', cardTitle=#{home.removePassword.title}, cardText=#{home.removePassword.desc}, cardLink='remove-password', toolIcon='lock_open_right', tags=#{removePassword.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='change-permissions', cardTitle=#{home.permissions.title}, cardText=#{home.permissions.desc}, cardLink='change-permissions', toolIcon='encrypted', tags=#{permissions.tags}, toolGroup='security')}">
               </div>
               <div
                 th:replace="~{fragments/card :: card(id='sign', cardTitle=#{home.sign.title}, cardText=#{home.sign.desc}, cardLink='sign', toolIcon='signature', tags=#{sign.tags}, toolGroup='sign')}">
               </div>
               <div
-            th:replace="~{fragments/card :: card(id='flatten', cardTitle=#{home.flatten.title}, cardText=#{home.flatten.desc}, cardLink='flatten', toolIcon='layers_clear', tags=#{flatten.tags}, toolGroup='other')}">
+                th:replace="~{fragments/card :: card(id='cert-sign', cardTitle=#{home.certSign.title}, cardText=#{home.certSign.desc}, cardLink='cert-sign', toolIcon='workspace_premium', tags=#{certSign.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='remove-cert-sign', cardTitle=#{home.removeCertSign.title}, cardText=#{home.removeCertSign.desc}, cardLink='remove-cert-sign', toolIcon='remove_moderator', tags=#{removeCertSign.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='sanitize-pdf', cardTitle=#{home.sanitizePdf.title}, cardText=#{home.sanitizePdf.desc}, cardLink='sanitize-pdf', toolIcon='sanitizer', tags=#{sanitizePdf.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='auto-redact', cardTitle=#{home.autoRedact.title}, cardText=#{home.autoRedact.desc}, cardLink='auto-redact', toolIcon='ink_eraser', tags=#{autoRedact.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='stamp', cardTitle=#{home.AddStampRequest.title}, cardText=#{home.AddStampRequest.desc}, cardLink='stamp', toolIcon='approval', tags=#{AddStampRequest.tags}, toolGroup='security')}">
+              </div>
+            </div>
           </div>
 
+          <div id="groupView" class="feature-group">
+            <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.edit})}">
+            </div>
+            <div class="feature-group-container">
               <div
-            th:replace="~{fragments/card :: card(id='repair', cardTitle=#{home.repair.title}, cardText=#{home.repair.desc}, cardLink='repair', toolIcon='build', tags=#{repair.tags}, toolGroup='advance')}">
+                th:replace="~{fragments/card :: card(id='view-pdf', cardTitle=#{home.viewPdf.title}, cardText=#{home.viewPdf.desc}, cardLink='view-pdf', toolIcon='menu_book', tags=#{viewPdf.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='add-page-numbers', cardTitle=#{home.add-page-numbers.title}, cardText=#{home.add-page-numbers.desc}, cardLink='add-page-numbers', toolIcon='123', tags=#{add-page-numbers.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='add-image', cardTitle=#{home.addImage.title}, cardText=#{home.addImage.desc}, cardLink='add-image', toolIcon='text_fields', tags=#{addImage.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='add-watermark', cardTitle=#{home.watermark.title}, cardText=#{home.watermark.desc}, cardLink='add-watermark', toolIcon='water_drop', tags=#{watermark.tags}, toolGroup='security')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='change-metadata', cardTitle=#{home.changeMetadata.title}, cardText=#{home.changeMetadata.desc}, cardLink='change-metadata', toolIcon='assignment', tags=#{changeMetadata.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='ocr-pdf', cardTitle=#{home.ocr.title}, cardText=#{home.ocr.desc}, cardLink='ocr-pdf', toolIcon='quick_reference_all', tags=#{ocr.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='extract-images', cardTitle=#{home.extractImages.title}, cardText=#{home.extractImages.desc}, cardLink='extract-images', toolIcon='photo_library', tags=#{extractImages.tags}, toolGroup='other')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='extract-image-scans', cardTitle=#{home.ScannerImageSplit.title}, cardText=#{home.ScannerImageSplit.desc}, cardLink='extract-image-scans', toolIcon='scanner', tags=#{ScannerImageSplit.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='flatten', cardTitle=#{home.flatten.title}, cardText=#{home.flatten.desc}, cardLink='flatten', toolIcon='layers_clear', tags=#{flatten.tags}, toolGroup='other')}">
               </div>
               <div
                 th:replace="~{fragments/card :: card(id='remove-blanks', cardTitle=#{home.removeBlanks.title}, cardText=#{home.removeBlanks.desc}, cardLink='remove-blanks', toolIcon='scan_delete', tags=#{removeBlanks.tags}, toolGroup='other')}">
@@ -161,56 +243,43 @@
                 th:replace="~{fragments/card :: card(id='compare', cardTitle=#{home.compare.title}, cardText=#{home.compare.desc}, cardLink='compare', toolIcon='compare', tags=#{compare.tags}, toolGroup='other')}">
               </div>
               <div
-            th:replace="~{fragments/card :: card(id='cert-sign', cardTitle=#{home.certSign.title}, cardText=#{home.certSign.desc}, cardLink='cert-sign', toolIcon='workspace_premium', tags=#{certSign.tags}, toolGroup='security')}">
+                th:replace="~{fragments/card :: card(id='get-info-on-pdf', cardTitle=#{home.getPdfInfo.title}, cardText=#{home.getPdfInfo.desc}, cardLink='get-info-on-pdf', toolIcon='info', tags=#{getPdfInfo.tags}, toolGroup='other')}">
               </div>
               <div
-            th:replace="~{fragments/card :: card(id='remove-cert-sign', cardTitle=#{home.removeCertSign.title}, cardText=#{home.removeCertSign.desc}, cardLink='remove-cert-sign', toolIcon='remove_moderator', tags=#{removeCertSign.tags}, toolGroup='security')}">
+                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='multi-page-layout', cardTitle=#{home.pageLayout.title}, cardText=#{home.pageLayout.desc}, cardLink='multi-page-layout', toolIcon='dashboard', tags=#{pageLayout.tags}, toolGroup='organize')}">
             </div>
-          <div
-            th:replace="~{fragments/card :: card(id='scale-pages', cardTitle=#{home.scalePages.title}, cardText=#{home.scalePages.desc}, cardLink='scale-pages', toolIcon='fullscreen', tags=#{scalePages.tags}, toolGroup='organize')}">
           </div>
 
+          <div id="groupAdvanced" class="feature-group">
+            <div
+              th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.sections.advance})}">
+            </div>
+            <div class="feature-group-container">
+              <div
+                th:replace="~{fragments/card :: card(id='pipeline', cardTitle=#{home.pipeline.title}, cardText=#{home.pipeline.desc}, cardLink='pipeline', toolIcon='family_history', tags=#{pipeline.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='multi-tool', cardTitle=#{home.multiTool.title}, cardText=#{home.multiTool.desc}, cardLink='multi-tool', toolIcon='construction', tags=#{multiTool.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='adjust-contrast', cardTitle=#{home.adjust-contrast.title}, cardText=#{home.adjust-contrast.desc}, cardLink='adjust-contrast', toolIcon='palette', tags=#{adjust-contrast.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='compress-pdf', cardTitle=#{home.compressPdfs.title}, cardText=#{home.compressPdfs.desc}, cardLink='compress-pdf', toolIcon='zoom_in_map', tags=#{compressPdfs.tags}, toolGroup='advance')}">
+              </div>
+              <div
+                th:replace="~{fragments/card :: card(id='repair', cardTitle=#{home.repair.title}, cardText=#{home.repair.desc}, cardLink='repair', toolIcon='build', tags=#{repair.tags}, toolGroup='advance')}">
+              </div>
               <div
                 th:replace="~{fragments/card :: card(id='auto-rename', cardTitle=#{home.auto-rename.title}, cardText=#{home.auto-rename.desc}, cardLink='auto-rename', toolIcon='text_fields_alt', tags=#{auto-rename.tags}, toolGroup='advance')}">
               </div>
               <div
                 th:replace="~{fragments/card :: card(id='auto-split-pdf', cardTitle=#{home.autoSplitPDF.title}, cardText=#{home.autoSplitPDF.desc}, cardLink='auto-split-pdf', toolIcon='cut', tags=#{autoSplitPDF.tags}, toolGroup='advance')}">
               </div>
-          <div
-            th:replace="~{fragments/card :: card(id='sanitize-pdf', cardTitle=#{home.sanitizePdf.title}, cardText=#{home.sanitizePdf.desc}, cardLink='sanitize-pdf', toolIcon='sanitizer', tags=#{sanitizePdf.tags}, toolGroup='security')}">
-          </div>
-
-          <div
-            th:replace="~{fragments/card :: card(id='url-to-pdf', cardTitle=#{home.URLToPDF.title}, cardText=#{home.URLToPDF.desc}, cardLink='url-to-pdf', toolIcon='link', tags=#{URLToPDF.tags}, toolGroup='convert')}">
-          </div>
-          <div
-            th:replace="~{fragments/card :: card(id='html-to-pdf', cardTitle=#{home.HTMLToPDF.title}, cardText=#{home.HTMLToPDF.desc}, cardLink='html-to-pdf', toolIcon='html', tags=#{HTMLToPDF.tags}, toolGroup='convert')}">
-          </div>
-          <div
-            th:replace="~{fragments/card :: card(id='markdown-to-pdf', cardTitle=#{home.MarkdownToPDF.title}, cardText=#{home.MarkdownToPDF.desc}, cardLink='markdown-to-pdf', toolIcon='markdown', tags=#{MarkdownToPDF.tags}, toolGroup='convert')}">
-          </div>
-          <div
-            th:replace="~{fragments/card :: card(id='get-info-on-pdf', cardTitle=#{home.getPdfInfo.title}, cardText=#{home.getPdfInfo.desc}, cardLink='get-info-on-pdf', toolIcon='info', tags=#{getPdfInfo.tags}, toolGroup='other')}">
-          </div>
-          <div
-            th:replace="~{fragments/card :: card(id='extract-page', cardTitle=#{home.extractPage.title}, cardText=#{home.extractPage.desc}, cardLink='extract-page', toolIcon='upload', tags=#{extractPage.tags}, toolGroup='organize')}">
-          </div>
-          <div
-            th:replace="~{fragments/card :: card(id='pdf-to-single-page', cardTitle=#{home.PdfToSinglePage.title}, cardText=#{home.PdfToSinglePage.desc}, cardLink='pdf-to-single-page', toolIcon='looks_one', tags=#{PdfToSinglePage.tags}, toolGroup='organize')}">
-          </div>
               <div
                 th:replace="~{fragments/card :: card(id='show-javascript', cardTitle=#{home.showJS.title}, cardText=#{home.showJS.desc}, cardLink='show-javascript', toolIcon='javascript', tags=#{showJS.tags}, toolGroup='advance')}">
               </div>
-          <div
-            th:replace="~{fragments/card :: card(id='auto-redact', cardTitle=#{home.autoRedact.title}, cardText=#{home.autoRedact.desc}, cardLink='auto-redact', toolIcon='ink_eraser', tags=#{autoRedact.tags}, toolGroup='security')}">
-          </div>
-
-          <div
-            th:replace="~{fragments/card :: card(id='pdf-to-csv', cardTitle=#{home.tableExtraxt.title}, cardText=#{home.tableExtraxt.desc}, cardLink='pdf-to-csv', toolIcon='csv', tags=#{tableExtraxt.tags}, toolGroup='convert')}">
-          </div>
               <div
                 th:replace="~{fragments/card :: card(id='split-by-size-or-count', cardTitle=#{home.autoSizeSplitPDF.title}, cardText=#{home.autoSizeSplitPDF.desc}, cardLink='split-by-size-or-count', toolIcon='vertical_split', tags=#{autoSizeSplitPDF.tags}, toolGroup='advance')}">
               </div>
@@ -220,17 +289,7 @@
               <div
                 th:replace="~{fragments/card :: card(id='split-pdf-by-sections', cardTitle=#{home.split-by-sections.title}, cardText=#{home.split-by-sections.desc}, cardLink='split-pdf-by-sections', toolIcon='grid_on', tags=#{split-by-sections.tags}, toolGroup='advance')}">
               </div>
-          <div
-            th:replace="~{fragments/card :: card(id='book-to-pdf', cardTitle=#{home.BookToPDF.title}, cardText=#{home.BookToPDF.desc}, cardLink='book-to-pdf', toolIcon='book', tags=#{BookToPDF.tags}, toolGroup='convert')}">
             </div>
-          <div
-            th:replace="~{fragments/card :: card(id='pdf-to-book', cardTitle=#{home.PDFToBook.title}, cardText=#{home.PDFToBook.desc}, cardLink='pdf-to-book', toolIcon='book', tags=#{PDFToBook.tags}, toolGroup='convert')}">
-          </div>
-          <div
-            th:replace="~{fragments/card :: card(id='stamp', cardTitle=#{home.AddStampRequest.title}, cardText=#{home.AddStampRequest.desc}, cardLink='stamp', toolIcon='approval', tags=#{AddStampRequest.tags}, toolGroup='security')}">
-          </div>
-          <div
-            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>
       </div>
@@ -240,7 +299,8 @@
 
 
   <!-- Survey Modal -->
-  <div class="modal fade" id="surveyModal" tabindex="-1" role="dialog" aria-labelledby="surveyModalLabel" aria-hidden="true">
+  <div class="modal fade" id="surveyModal" tabindex="-1" role="dialog" aria-labelledby="surveyModalLabel"
+    aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header">
@@ -248,10 +308,13 @@
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">
-          <p th:text="#{survey.description}">Stirling-PDF has no tracking so we want to hear from our users to improve Stirling-PDF!</h5>
+          <p th:text="#{survey.description}">Stirling-PDF has no tracking so we want to hear from our users to improve
+            Stirling-PDF!</h5>
           <p th:text="#{survey.please}">Please consider taking our survey!</p>
-          <p th:text="#{survey.disabled}">Survey popup will be disabled in following updates but available at foot of page)</p>
+          <p th:text="#{survey.disabled}">Survey popup will be disabled in following updates but available at foot of
-          <a href="https://stirlingpdf.info/s/clwzgtfw7000gltkmwz1n212m" target="_blank" class="btn btn-primary" id="takeSurvey"th:text="#{survey.button}" >Take Survey</a>
+            page)</p>
+          <a href="https://stirlingpdf.info/s/clwzgtfw7000gltkmwz1n212m" target="_blank" class="btn btn-primary"
+            id="takeSurvey" th:text="#{survey.button}">Take Survey</a>
         </div>
         <div class="modal-footer">
           <div class="form-check mb-3">