From 09035a71dc16b3d503fde448fd9cb954e99f2db5 Mon Sep 17 00:00:00 2001
From: DarokCx <77368869+DarokCx@users.noreply.github.com>
Date: Mon, 7 Oct 2024 10:02:11 -0400
Subject: [PATCH] Added sort by date Added

---
 public/index.html                |  2 ++
 public/scripts/textgen-models.js |  8 ++++++--
 public/style.css                 | 14 +++++++-------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/public/index.html b/public/index.html
index db0f77b3f..1901806ae 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2273,6 +2273,8 @@
                                                 <option value="search" data-i18n="Search" hidden>A-Z</option>
                                                 <option value="asc">A-Z</option>
                                                 <option value="desc">Z-A</option>
+                                                <option value="date_asc">Date Asc</option>
+                                                <option value="date_desc">Date Desc</option>
                                             </select>
                                             <select id="category_selection">
                                                 <option value="" disabled selected data-i18n="category">category</option>
diff --git a/public/scripts/textgen-models.js b/public/scripts/textgen-models.js
index af447d254..918022884 100644
--- a/public/scripts/textgen-models.js
+++ b/public/scripts/textgen-models.js
@@ -293,7 +293,7 @@ export async function loadFeatherlessModels(data) {
     populateClassSelection(data);
 
     // Retrieve the stored number of items per page or default to 5
-    const perPage = Number(localStorage.getItem(storageKey)) || 5;
+    const perPage = Number(localStorage.getItem(storageKey)) || 6;
 
     // Initialize pagination with the full set of models
     setupPagination(originalModels, perPage);
@@ -303,7 +303,7 @@ export async function loadFeatherlessModels(data) {
         paginationContainer.pagination({
             dataSource: models,
             pageSize: perPage,
-            sizeChangerOptions: [5, 10, 25, 50, 100, 250, 500, 1000],
+            sizeChangerOptions: [6, 10, 26, 50, 100, 250, 500, 1000],
             pageRange: 1,
             pageNumber: 1,
             showPageNumbers: true,
@@ -450,6 +450,10 @@ export async function loadFeatherlessModels(data) {
             filteredModels.sort((a, b) => a.id.localeCompare(b.id));
         } else if (selectedSortOrder === 'desc') {
             filteredModels.sort((a, b) => b.id.localeCompare(a.id));
+        } else if (selectedSortOrder === 'date_asc') {
+            filteredModels.sort((a, b) => a.updated_at.localeCompare(b.updated_at));
+        } else if (selectedSortOrder === 'date_desc') {
+            filteredModels.sort((a, b) => b.updated_at.localeCompare(a.updated_at));
         }
 
         // Reinitialize pagination with the filtered and sorted models
diff --git a/public/style.css b/public/style.css
index 1a200fe3a..9e0f90ffa 100644
--- a/public/style.css
+++ b/public/style.css
@@ -5495,22 +5495,22 @@ body:not(.movingUI) .drawer-content.maximized {
     border-radius: 8px;  /* Rounded corners for the card */
     background-color: #222;  /* Card background color */
     color: #fff;  /* Text color */
-    margin: 10px;  /* Space between cards */
-    width: calc(100% - 20px);  /* Full width minus margin */
+    margin: 7px;  /* Space between cards */
+    width: calc(100% - 7px);  /* Full width minus margin */
     box-sizing: border-box;  /* Include padding and border in the width */
     transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out;
 }
 
 .model-card:hover {
-    transform: scale(1.025);  /* Grow the card slightly on hover */
+    transform: scale(1.02);  /* Grow the card slightly on hover */
     background-color: #444;  /* Highlight background on hover */
     transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;  /* Smooth transition */
 }
 
 /* Highlight the selected model card */
 .model-card.selected {
-    border: 2px solid #00f;  /* Add a blue border to indicate selection */
-    background-color: #333;  /* Slightly darker background for selected state */
+    border: 2px solid var(--okGreen70a);  /* Add a blue border to indicate selection */
+    background-color: var(--okGreen70a);  /* Slightly darker background for selected state */
 }
 
 /* Model title information */
@@ -5550,7 +5550,7 @@ body:not(.movingUI) .drawer-content.maximized {
     grid-template-columns: repeat(2, 1fr);
     display: flex;
     flex-wrap: wrap;  /* Cards wrap onto new lines when necessary */
-    gap: 15px;  /* Space between grid items */
+    gap: 5px;  /* Space between grid items */
     justify-content: flex-start;  /* Align cards to the left */
 }
 
@@ -5558,7 +5558,7 @@ body:not(.movingUI) .drawer-content.maximized {
 #model_card_block.grid-view .model-card {
     flex-direction: column; /* Stack title, class, and context length vertically for grid */
     flex: 1 1 calc(50% - 30px); /* 3 cards per row with spacing */
-    margin-bottom: 10px;
+    /* margin-bottom: 10px; */
 }
 
 /* Ensure the search bar takes most of the width */