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 {
@@ -151,5 +212,5 @@
 }
 
 .hidden {
-    visibility: hidden;
+  visibility: hidden;
 }

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() {
-  var container = document.querySelector(".features-container");
-  var cards = Array.from(container.getElementsByClassName("feature-card"));
+function reorderCards(container) {
+  var cards = Array.from(container.querySelectorAll(".feature-card"));
+  cards.forEach(function (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,21 +111,107 @@ 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() {
-    const materialIcons = new FontFaceObserver('Material Symbols Rounded');
-    
-    materialIcons.load().then(() => {
-      document.querySelectorAll('.feature-card.hidden').forEach(el => {
-        el.classList.remove('hidden');
-      });
-    }).catch(() => {
-      console.error('Material Symbols Rounded font failed to load.');
+document.addEventListener("DOMContentLoaded", function () {
+  const materialIcons = new FontFaceObserver('Material Symbols Rounded');
+
+  materialIcons.load().then(() => {
+    document.querySelectorAll('.feature-card.hidden').forEach(el => {
+      el.classList.remove('hidden');
     });
+  }).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();
+});