From d374b79b86f61f06ec6b2074b926b206234d0eb8 Mon Sep 17 00:00:00 2001
From: CharlieS1103 <someonelikeswindows@gmail.com>
Date: Wed, 5 Jul 2023 21:30:51 -0400
Subject: [PATCH 01/15] Begin implementing sortbox

---
 src/app.tsx                      | 1 +
 src/components/Grid.tsx          | 7 ++++++-
 src/logic/Utils.ts               | 9 +++++++++
 src/types/marketplace-types.d.ts | 1 +
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/app.tsx b/src/app.tsx
index 0deeae85..6833884c 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -133,6 +133,7 @@ class App extends React.Component<{
         schemes,
         activeScheme,
       },
+      sort: getLocalStorageDataFromKey(LOCALSTORAGE_KEYS.sortBy, "stars"),
     };
 
     if (!this.CONFIG.activeTab || !this.CONFIG.tabs.filter(tab => tab.name === this.CONFIG.activeTab).length) {
diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index 6180bd0a..b7d5563f 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -5,7 +5,7 @@ import { Option } from "react-dropdown";
 const Spicetify = window.Spicetify;
 
 import { CardItem, CardType, Config, SchemeIni, Snippet, TabItemConfig } from "../types/marketplace-types";
-import { getLocalStorageDataFromKey, generateSchemesOptions, injectColourScheme } from "../logic/Utils";
+import { getLocalStorageDataFromKey, generateSchemesOptions, injectColourScheme, generateSortOptions } from "../logic/Utils";
 import { LOCALSTORAGE_KEYS, ITEMS_PER_REQUEST, MARKETPLACE_VERSION, LATEST_RELEASE } from "../constants";
 import { openModal } from "../logic/LaunchModals";
 import {
@@ -534,6 +534,11 @@ class Grid extends React.Component<
                   this.setState({ searchValue: event.target.value });
                 }} />
             </div>
+            {/* Generate a new box for sorting options, the options should be newest, stars, a-z, oldest, and z-a*/}
+            <SortBox
+              onChange={(value) => this.updateSort(value)}
+              sortBoxOptions={generateSortOptions()}
+              sortBySelectedFn={(a) => a.key === this.CONFIG.sort} />
             <Spicetify.ReactComponent.TooltipWrapper label={t("settings.title")} renderInline={true} placement="bottom">
               <button type="button" aria-label={t("settings.title")} className="marketplace-header-icon-button" id="marketplace-settings-button"
                 onClick={() => openModal("SETTINGS", this.CONFIG, this.updateAppConfig)}
diff --git a/src/logic/Utils.ts b/src/logic/Utils.ts
index 5d608f34..da1c3ffa 100644
--- a/src/logic/Utils.ts
+++ b/src/logic/Utils.ts
@@ -191,6 +191,15 @@ export const generateSchemesOptions = (schemes: SchemeIni) => {
   ));
 };
 
+export const generateSortOptions = () => {
+  return [
+    { key: "newest", value: "Newest" },
+    { key: "stars", value: "Stars" },
+    { key: "a-z", value: "A-Z" },
+    { key: "oldest", value: "Oldest" },
+    { key: "z-a", value: "Z-A" },
+  ];
+};
 /**
  * Reset Marketplace localStorage keys
  * @param categories The categories to reset. If none provided, reset everything.
diff --git a/src/types/marketplace-types.d.ts b/src/types/marketplace-types.d.ts
index b9f42dea..d01c2e46 100644
--- a/src/types/marketplace-types.d.ts
+++ b/src/types/marketplace-types.d.ts
@@ -161,4 +161,5 @@ export type Config = {
     schemes?: SchemeIni;
     activeScheme?: string | null;
   },
+  sort: string;
 };

From c7b917a9baa19c5dbb7ac2b711b9928285249426 Mon Sep 17 00:00:00 2001
From: CharlieS1103 <someonelikeswindows@gmail.com>
Date: Thu, 6 Jul 2023 17:49:14 -0400
Subject: [PATCH 02/15] Finish sorting options for extensions

---
 src/app.tsx                      |  2 +-
 src/components/Grid.tsx          | 33 ++++++++++++++++----------------
 src/constants.ts                 |  2 +-
 src/logic/FetchRemotes.ts        | 25 ++++++++++++++++++++++--
 src/types/marketplace-types.d.ts | 25 +++++++++++++++++++++++-
 5 files changed, 66 insertions(+), 21 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 6833884c..527345a4 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -133,7 +133,7 @@ class App extends React.Component<{
         schemes,
         activeScheme,
       },
-      sort: getLocalStorageDataFromKey(LOCALSTORAGE_KEYS.sortBy, "stars"),
+      sort: getLocalStorageDataFromKey(LOCALSTORAGE_KEYS.sort, "stars"),
     };
 
     if (!this.CONFIG.activeTab || !this.CONFIG.tabs.filter(tab => tab.name === this.CONFIG.activeTab).length) {
diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index b7d5563f..116124b3 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -12,6 +12,7 @@ import {
   getTaggedRepos,
   fetchExtensionManifest, fetchThemeManifest, fetchAppManifest,
   fetchCssSnippets, getBlacklist,
+  sortExtensions,
 } from "../logic/FetchRemotes";
 import LoadMoreIcon from "./Icons/LoadMoreIcon";
 import LoadingIcon from "./Icons/LoadingIcon";
@@ -52,7 +53,7 @@ class Grid extends React.Component<
 
     // Fetches the sorting options, fetched from SortBox.js
     this.sortConfig = {
-      by: getLocalStorageDataFromKey(LOCALSTORAGE_KEYS.sortBy, "top"),
+      by: getLocalStorageDataFromKey(LOCALSTORAGE_KEYS.sort, "top"),
     };
 
     this.state = {
@@ -133,7 +134,7 @@ class Grid extends React.Component<
   updateSort(sortByValue) {
     if (sortByValue) {
       this.sortConfig.by = sortByValue;
-      localStorage.setItem(LOCALSTORAGE_KEYS.sortBy, sortByValue);
+      localStorage.setItem(LOCALSTORAGE_KEYS.sort, sortByValue);
     }
 
     // this.requestPage = null;
@@ -188,27 +189,26 @@ class Grid extends React.Component<
     switch (activeTab) {
     case "Extensions": {
       const pageOfRepos = await getTaggedRepos("spicetify-extensions", this.requestPage, this.BLACKLIST);
+      const extensions: CardItem[] = [];
       for (const repo of pageOfRepos.items) {
-        const extensions = await fetchExtensionManifest(
+        const repoExtensions = await fetchExtensionManifest(
           repo.contents_url,
           repo.default_branch,
           repo.stargazers_count,
-          this.CONFIG.visual.hideInstalled,
+          true,
         );
 
-        // I believe this stops the requests when switching tabs?
-        if (this.requestQueue.length > 1 && queue !== this.requestQueue[0]) {
-          // Stop this queue from continuing to fetch and append to cards list
-          return -1;
+        if (repoExtensions && repoExtensions.length) {
+          extensions.push(...repoExtensions.map((extension) => ({
+            ...extension, lastUpdated: repo.pushed_at,
+          })));
         }
+      }
 
-        if (extensions && extensions.length) {
-          // console.log(`${repo.name} has ${extensions.length} extensions:`, extensions);
-          extensions.forEach((extension) => {
-            Object.assign(extension, { lastUpdated: repo.pushed_at });
-            this.appendCard(extension, "extension", activeTab);
-          });
-        }
+      sortExtensions(extensions, localStorage.getItem("marketplace:sort") || "stars");
+
+      for (const extension of extensions) {
+        this.appendCard(extension, "extension", activeTab);
       }
 
       // First result is null or -1 so it coerces to 1
@@ -534,11 +534,12 @@ class Grid extends React.Component<
                   this.setState({ searchValue: event.target.value });
                 }} />
             </div>
-            {/* Generate a new box for sorting options, the options should be newest, stars, a-z, oldest, and z-a*/}
+            {/* Generate a new box for sorting options */}
             <SortBox
               onChange={(value) => this.updateSort(value)}
               sortBoxOptions={generateSortOptions()}
               sortBySelectedFn={(a) => a.key === this.CONFIG.sort} />
+
             <Spicetify.ReactComponent.TooltipWrapper label={t("settings.title")} renderInline={true} placement="bottom">
               <button type="button" aria-label={t("settings.title")} className="marketplace-header-icon-button" id="marketplace-settings-button"
                 onClick={() => openModal("SETTINGS", this.CONFIG, this.updateAppConfig)}
diff --git a/src/constants.ts b/src/constants.ts
index 0ce5a3ac..acedc827 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -9,7 +9,7 @@ export const LOCALSTORAGE_KEYS = {
   installedThemes: "marketplace:installed-themes",
   activeTab: "marketplace:active-tab",
   tabs: "marketplace:tabs",
-  sortBy: "marketplace:sort-by",
+  sort: "marketplace:sort",
   // Theme installed store the localsorage key of the theme (e.g. marketplace:installed:NYRI4/Comfy-spicetify/user.css)
   themeInstalled: "marketplace:theme-installed",
   albumArtBasedColor: "marketplace:albumArtBasedColors",
diff --git a/src/logic/FetchRemotes.ts b/src/logic/FetchRemotes.ts
index 7627b529..5487e182 100644
--- a/src/logic/FetchRemotes.ts
+++ b/src/logic/FetchRemotes.ts
@@ -1,8 +1,8 @@
 import { BLACKLIST_URL, ITEMS_PER_REQUEST } from "../constants";
-import { CardItem, Snippet } from "../types/marketplace-types";
+import { CardItem, Manifest, Snippet } from "../types/marketplace-types";
 import { addToSessionStorage, processAuthors } from "./Utils";
 
-import { RepoTopic } from "../types/marketplace-types";
+import { RepoTopic, Extension } from "../types/marketplace-types";
 import snippetsJSON from "../resources/snippets";
 
 // TODO: add sort type, order, etc?
@@ -300,3 +300,24 @@ export const fetchCssSnippets = async () => {
   }, []);
   return snippets;
 };
+
+export const sortExtensions = (extensions: Extension[], sortOption: string) => {
+  switch (sortOption) {
+  case "a-z":
+    extensions.sort((a, b) => a.manifest.name.localeCompare(b.manifest.name));
+    break;
+  case "z-a":
+    extensions.sort((a, b) => b.manifest.name.localeCompare(a.manifest.name));
+    break;
+  case "newest":
+    extensions.sort((a, b) => new Date(b.lastUpdated).getTime() - new Date(a.lastUpdated).getTime());
+    break;
+  case "oldest":
+    extensions.sort((a, b) => new Date(a.lastUpdated).getTime() - new Date(b.lastUpdated).getTime());
+    break;
+  case "stars":
+  default:
+    extensions.sort((a, b) => b.stars - a.stars);
+    break;
+  }
+};
\ No newline at end of file
diff --git a/src/types/marketplace-types.d.ts b/src/types/marketplace-types.d.ts
index d01c2e46..269bb4a4 100644
--- a/src/types/marketplace-types.d.ts
+++ b/src/types/marketplace-types.d.ts
@@ -91,7 +91,9 @@ export type CardItem = {
   stars: number;
   tags: string[];
   lastUpdated: string;
-
+  name: string;
+  lastUpdated: string;
+   stargazers_count: number;
   // For themes only
   cssURL?: string;
   schemesURL?: string;
@@ -104,6 +106,27 @@ export type CardItem = {
   description: undefined;
 };
 
+export type Extension = {
+  manifest: {
+    name: string;
+    description: string;
+    preview: string;
+    main: string;
+    readme: string;
+  };
+  title: string;
+  subtitle: string;
+  authors: { name: string; url: string }[];
+  user: string;
+  repo: string;
+  branch: string;
+  imageURL: string;
+  extensionURL: string;
+  readmeURL: string;
+  stars: number;
+  lastUpdated: string;
+};
+
 // TODO: use this in `fetchThemeManifest()`
 // export type ThemeCardItem = CardItem & {
 //   cssURL?: string;

From e9642e1ee88a638a30b7612a9630406955163d9e Mon Sep 17 00:00:00 2001
From: CharlieS1103 <someonelikeswindows@gmail.com>
Date: Sat, 8 Jul 2023 00:59:04 -0400
Subject: [PATCH 03/15] Add support for themes

---
 src/components/Grid.tsx   | 32 ++++++++++++++---------------
 src/logic/FetchRemotes.ts | 20 ------------------
 src/logic/Utils.ts        | 43 ++++++++++++++++++++++++++++++++++++++-
 src/types/Manifest.ts     |  0
 4 files changed, 57 insertions(+), 38 deletions(-)
 create mode 100644 src/types/Manifest.ts

diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index 116124b3..7e86b53a 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -5,14 +5,13 @@ import { Option } from "react-dropdown";
 const Spicetify = window.Spicetify;
 
 import { CardItem, CardType, Config, SchemeIni, Snippet, TabItemConfig } from "../types/marketplace-types";
-import { getLocalStorageDataFromKey, generateSchemesOptions, injectColourScheme, generateSortOptions } from "../logic/Utils";
+import { getLocalStorageDataFromKey, generateSchemesOptions, injectColourScheme, generateSortOptions, sortExtensions, sortThemes } from "../logic/Utils";
 import { LOCALSTORAGE_KEYS, ITEMS_PER_REQUEST, MARKETPLACE_VERSION, LATEST_RELEASE } from "../constants";
 import { openModal } from "../logic/LaunchModals";
 import {
   getTaggedRepos,
   fetchExtensionManifest, fetchThemeManifest, fetchAppManifest,
   fetchCssSnippets, getBlacklist,
-  sortExtensions,
 } from "../logic/FetchRemotes";
 import LoadMoreIcon from "./Icons/LoadMoreIcon";
 import LoadingIcon from "./Icons/LoadingIcon";
@@ -250,30 +249,28 @@ class Grid extends React.Component<
       // installed extension do them all in one go, since it's local
     } case "Themes": {
       const pageOfRepos = await getTaggedRepos("spicetify-themes", this.requestPage, this.BLACKLIST);
+      const themes: CardItem[] = [];
       for (const repo of pageOfRepos.items) {
-
-        const themes = await fetchThemeManifest(
+        const repoThemes = await fetchThemeManifest(
           repo.contents_url,
           repo.default_branch,
           repo.stargazers_count,
         );
-        // I believe this stops the requests when switching tabs?
-        if (this.requestQueue.length > 1 && queue !== this.requestQueue[0]) {
-          // Stop this queue from continuing to fetch and append to cards list
-          return -1;
-        }
 
-        if (themes && themes.length) {
-          themes.forEach((theme) => {
-            Object.assign(theme, { lastUpdated: repo.pushed_at });
-            this.appendCard(theme, "theme", activeTab);
-          });
+        if (repoThemes && repoThemes.length) {
+          themes.push(...repoThemes.map((theme) => ({
+            ...theme, lastUpdated: repo.pushed_at,
+          })));
         }
       }
 
-      // First request is null, so coerces to 1
+      sortThemes(themes, localStorage.getItem("marketplace:sort") || "stars");
+
+      for (const theme of themes) {
+        this.appendCard(theme, "theme", activeTab);
+      }
+
       const currentPage = this.requestPage > -1 && this.requestPage ? this.requestPage : 1;
-      // -1 because the page number is 1-indexed
       const soFarResults = ITEMS_PER_REQUEST * (currentPage - 1) + pageOfRepos.page_count;
       const remainingResults = pageOfRepos.total_count - soFarResults;
 
@@ -281,7 +278,8 @@ class Grid extends React.Component<
       if (remainingResults > 0) return currentPage + 1;
       else console.debug("No more theme results");
       break;
-    } case "Apps": {
+    }
+    case "Apps": {
       const pageOfRepos = await getTaggedRepos("spicetify-apps", this.requestPage, this.BLACKLIST);
       for (const repo of pageOfRepos.items) {
 
diff --git a/src/logic/FetchRemotes.ts b/src/logic/FetchRemotes.ts
index 5487e182..91fea209 100644
--- a/src/logic/FetchRemotes.ts
+++ b/src/logic/FetchRemotes.ts
@@ -301,23 +301,3 @@ export const fetchCssSnippets = async () => {
   return snippets;
 };
 
-export const sortExtensions = (extensions: Extension[], sortOption: string) => {
-  switch (sortOption) {
-  case "a-z":
-    extensions.sort((a, b) => a.manifest.name.localeCompare(b.manifest.name));
-    break;
-  case "z-a":
-    extensions.sort((a, b) => b.manifest.name.localeCompare(a.manifest.name));
-    break;
-  case "newest":
-    extensions.sort((a, b) => new Date(b.lastUpdated).getTime() - new Date(a.lastUpdated).getTime());
-    break;
-  case "oldest":
-    extensions.sort((a, b) => new Date(a.lastUpdated).getTime() - new Date(b.lastUpdated).getTime());
-    break;
-  case "stars":
-  default:
-    extensions.sort((a, b) => b.stars - a.stars);
-    break;
-  }
-};
\ No newline at end of file
diff --git a/src/logic/Utils.ts b/src/logic/Utils.ts
index da1c3ffa..9ec9b58f 100644
--- a/src/logic/Utils.ts
+++ b/src/logic/Utils.ts
@@ -1,5 +1,5 @@
 import { CardProps } from "../components/Card/Card";
-import { Author, CardItem, ColourScheme, SchemeIni, Snippet, SortBoxOption } from "../types/marketplace-types";
+import { Author, CardItem, ColourScheme, Extension, SchemeIni, Snippet, SortBoxOption } from "../types/marketplace-types";
 import Chroma from "chroma-js";
 import { LOCALSTORAGE_KEYS } from "../constants";
 /**
@@ -588,3 +588,44 @@ export const addExtensionToSpicetifyConfig = (main?: string) => {
   }
 };
 
+export const sortExtensions = (extensions: Extension[], sortOption: string) => {
+  switch (sortOption) {
+  case "a-z":
+    extensions.sort((a, b) => a.manifest.name.localeCompare(b.manifest.name));
+    break;
+  case "z-a":
+    extensions.sort((a, b) => b.manifest.name.localeCompare(a.manifest.name));
+    break;
+  case "newest":
+    extensions.sort((a, b) => new Date(b.lastUpdated).getTime() - new Date(a.lastUpdated).getTime());
+    break;
+  case "oldest":
+    extensions.sort((a, b) => new Date(a.lastUpdated).getTime() - new Date(b.lastUpdated).getTime());
+    break;
+  case "stars":
+  default:
+    extensions.sort((a, b) => b.stars - a.stars);
+    break;
+  }
+};
+// TODO: Create theme type
+export const sortThemes = (themes: CardItem[], sortOption: string) => {
+  switch (sortOption) {
+  case "a-z":
+    themes.sort((a, b) => a.manifest.name.localeCompare(b.manifest.name));
+    break;
+  case "z-a":
+    themes.sort((a, b) => b.manifest.name.localeCompare(a.manifest.name));
+    break;
+  case "newest":
+    themes.sort((a, b) => new Date(b.lastUpdated).getTime() - new Date(a.lastUpdated).getTime());
+    break;
+  case "oldest":
+    themes.sort((a, b) => new Date(a.lastUpdated).getTime() - new Date(b.lastUpdated).getTime());
+    break;
+  case "stars":
+  default:
+    themes.sort((a, b) => b.stars - a.stars);
+    break;
+  }
+};
\ No newline at end of file
diff --git a/src/types/Manifest.ts b/src/types/Manifest.ts
new file mode 100644
index 00000000..e69de29b

From 2e343ee77b4d65809b4438aa5c45264e74c1fbb0 Mon Sep 17 00:00:00 2001
From: Charlie <60494758+CharlieS1103@users.noreply.github.com>
Date: Sun, 23 Jul 2023 07:43:30 -0400
Subject: [PATCH 04/15] Update src/components/Grid.tsx

Co-authored-by: Isaac <padspambox@gmail.com>
---
 src/components/Grid.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index 7e86b53a..7350dcac 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -258,9 +258,12 @@ class Grid extends React.Component<
         );
 
         if (repoThemes && repoThemes.length) {
-          themes.push(...repoThemes.map((theme) => ({
-            ...theme, lastUpdated: repo.pushed_at,
-          })));
+          themes.push(...repoThemes.map(
+            (theme) => ({
+              ...theme, 
+              lastUpdated: repo.pushed_at,
+            })
+          ));
         }
       }
 

From 34d2bb77471d3103b596756722bb8875d9fe0549 Mon Sep 17 00:00:00 2001
From: Isaac Maier <padspambox@gmail.com>
Date: Tue, 10 Oct 2023 20:19:40 -0400
Subject: [PATCH 05/15] =?UTF-8?q?=F0=9F=9A=A7=20Add=20SortMode=20type,=20m?=
 =?UTF-8?q?ake=20`sortCardItems`=20generic,=20add=20back=20in=20`this.requ?=
 =?UTF-8?q?estQueue.length...`=20bit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Grid.tsx          | 31 ++++++++++++++++++++------
 src/logic/FetchRemotes.ts        |  4 ++--
 src/logic/Utils.ts               | 37 +++++++-------------------------
 src/types/marketplace-types.d.ts | 25 +++------------------
 4 files changed, 38 insertions(+), 59 deletions(-)

diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index ae0abd40..52e3540a 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -5,7 +5,12 @@ import { Option } from "react-dropdown";
 const Spicetify = window.Spicetify;
 
 import { CardItem, CardType, Config, SchemeIni, Snippet, TabItemConfig } from "../types/marketplace-types";
-import { getLocalStorageDataFromKey, generateSchemesOptions, injectColourScheme, generateSortOptions, sortExtensions, sortThemes } from "../logic/Utils";
+import { getLocalStorageDataFromKey,
+  generateSchemesOptions,
+  injectColourScheme,
+  generateSortOptions,
+  sortCardItems,
+} from "../logic/Utils";
 import { LOCALSTORAGE_KEYS, ITEMS_PER_REQUEST, MARKETPLACE_VERSION, LATEST_RELEASE } from "../constants";
 import { openModal } from "../logic/LaunchModals";
 import {
@@ -193,9 +198,15 @@ class Grid extends React.Component<
           repo.contents_url,
           repo.default_branch,
           repo.stargazers_count,
-          true,
+          this.CONFIG.visual.hideInstalled,
         );
 
+        // I believe this stops the requests when switching tabs?
+        if (this.requestQueue.length > 1 && queue !== this.requestQueue[0]) {
+          // Stop this queue from continuing to fetch and append to cards list
+          return -1;
+        }
+
         if (repoExtensions && repoExtensions.length) {
           extensions.push(...repoExtensions.map((extension) => ({
             ...extension, lastUpdated: repo.pushed_at,
@@ -203,7 +214,7 @@ class Grid extends React.Component<
         }
       }
 
-      sortExtensions(extensions, localStorage.getItem("marketplace:sort") || "stars");
+      sortCardItems(extensions, localStorage.getItem("marketplace:sort") || "stars");
 
       for (const extension of extensions) {
         this.appendCard(extension, "extension", activeTab);
@@ -258,24 +269,32 @@ class Grid extends React.Component<
           repo.stargazers_count,
         );
 
+        // I believe this stops the requests when switching tabs?
+        if (this.requestQueue.length > 1 && queue !== this.requestQueue[0]) {
+          // Stop this queue from continuing to fetch and append to cards list
+          return -1;
+        }
+
         if (repoThemes && repoThemes.length) {
           themes.push(...repoThemes.map(
             (theme) => ({
-              ...theme, 
+              ...theme,
               lastUpdated: repo.pushed_at,
-            })
+            }),
           ));
         }
       }
       this.setState({ cards: this.cardList });
 
-      sortThemes(themes, localStorage.getItem("marketplace:sort") || "stars");
+      sortCardItems(themes, localStorage.getItem("marketplace:sort") || "stars");
 
       for (const theme of themes) {
         this.appendCard(theme, "theme", activeTab);
       }
 
+      // First request is null, so coerces to 1
       const currentPage = this.requestPage > -1 && this.requestPage ? this.requestPage : 1;
+      // -1 because the page number is 1-indexed
       const soFarResults = ITEMS_PER_REQUEST * (currentPage - 1) + pageOfRepos.page_count;
       const remainingResults = pageOfRepos.total_count - soFarResults;
 
diff --git a/src/logic/FetchRemotes.ts b/src/logic/FetchRemotes.ts
index 9494fe4e..04554478 100644
--- a/src/logic/FetchRemotes.ts
+++ b/src/logic/FetchRemotes.ts
@@ -1,8 +1,8 @@
 import { BLACKLIST_URL, ITEMS_PER_REQUEST } from "../constants";
-import { CardItem, Manifest, Snippet } from "../types/marketplace-types";
+import { CardItem, Snippet } from "../types/marketplace-types";
 import { addToSessionStorage, processAuthors } from "./Utils";
 
-import { RepoTopic, Extension } from "../types/marketplace-types";
+import { RepoTopic } from "../types/marketplace-types";
 import snippetsJSON from "../resources/snippets";
 
 // TODO: add sort type, order, etc?
diff --git a/src/logic/Utils.ts b/src/logic/Utils.ts
index 69c6e616..449f745c 100644
--- a/src/logic/Utils.ts
+++ b/src/logic/Utils.ts
@@ -1,5 +1,5 @@
 import { CardProps } from "../components/Card/Card";
-import { Author, CardItem, ColourScheme, Extension, SchemeIni, Snippet, SortBoxOption } from "../types/marketplace-types";
+import { Author, CardItem, ColourScheme, SchemeIni, Snippet, SortBoxOption } from "../types/marketplace-types";
 import Chroma from "chroma-js";
 import { LOCALSTORAGE_KEYS } from "../constants";
 /**
@@ -591,44 +591,23 @@ export const addExtensionToSpicetifyConfig = (main?: string) => {
   }
 };
 
-export const sortExtensions = (extensions: Extension[], sortOption: string) => {
-  switch (sortOption) {
+export const sortCardItems = (cardItems: CardItem[], sortMode: string) => {
+  switch (sortMode) {
   case "a-z":
-    extensions.sort((a, b) => a.manifest.name.localeCompare(b.manifest.name));
+    cardItems.sort((a, b) => a.manifest.name.localeCompare(b.manifest.name));
     break;
   case "z-a":
-    extensions.sort((a, b) => b.manifest.name.localeCompare(a.manifest.name));
+    cardItems.sort((a, b) => b.manifest.name.localeCompare(a.manifest.name));
     break;
   case "newest":
-    extensions.sort((a, b) => new Date(b.lastUpdated).getTime() - new Date(a.lastUpdated).getTime());
+    cardItems.sort((a, b) => new Date(b.lastUpdated).getTime() - new Date(a.lastUpdated).getTime());
     break;
   case "oldest":
-    extensions.sort((a, b) => new Date(a.lastUpdated).getTime() - new Date(b.lastUpdated).getTime());
+    cardItems.sort((a, b) => new Date(a.lastUpdated).getTime() - new Date(b.lastUpdated).getTime());
     break;
   case "stars":
   default:
-    extensions.sort((a, b) => b.stars - a.stars);
-    break;
-  }
-};
-// TODO: Create theme type
-export const sortThemes = (themes: CardItem[], sortOption: string) => {
-  switch (sortOption) {
-  case "a-z":
-    themes.sort((a, b) => a.manifest.name.localeCompare(b.manifest.name));
-    break;
-  case "z-a":
-    themes.sort((a, b) => b.manifest.name.localeCompare(a.manifest.name));
-    break;
-  case "newest":
-    themes.sort((a, b) => new Date(b.lastUpdated).getTime() - new Date(a.lastUpdated).getTime());
-    break;
-  case "oldest":
-    themes.sort((a, b) => new Date(a.lastUpdated).getTime() - new Date(b.lastUpdated).getTime());
-    break;
-  case "stars":
-  default:
-    themes.sort((a, b) => b.stars - a.stars);
+    cardItems.sort((a, b) => b.stars - a.stars);
     break;
   }
 };
diff --git a/src/types/marketplace-types.d.ts b/src/types/marketplace-types.d.ts
index 269bb4a4..861ad8ac 100644
--- a/src/types/marketplace-types.d.ts
+++ b/src/types/marketplace-types.d.ts
@@ -106,27 +106,6 @@ export type CardItem = {
   description: undefined;
 };
 
-export type Extension = {
-  manifest: {
-    name: string;
-    description: string;
-    preview: string;
-    main: string;
-    readme: string;
-  };
-  title: string;
-  subtitle: string;
-  authors: { name: string; url: string }[];
-  user: string;
-  repo: string;
-  branch: string;
-  imageURL: string;
-  extensionURL: string;
-  readmeURL: string;
-  stars: number;
-  lastUpdated: string;
-};
-
 // TODO: use this in `fetchThemeManifest()`
 // export type ThemeCardItem = CardItem & {
 //   cssURL?: string;
@@ -174,6 +153,8 @@ export type SchemeIni = {
   [key: string]: ColourScheme;
 };
 
+export type SortMode = "a-z" | "z-a" | "newest" | "oldest" | "stars";
+
 export type Config = {
   // Fetch the settings and set defaults. Used in Settings.js
   visual: VisualConfig,
@@ -184,5 +165,5 @@ export type Config = {
     schemes?: SchemeIni;
     activeScheme?: string | null;
   },
-  sort: string;
+  sort: SortMode;
 };

From e23b9e00159d13e03f6caca0ccbf8b3ee7794af9 Mon Sep 17 00:00:00 2001
From: Isaac Maier <padspambox@gmail.com>
Date: Tue, 10 Oct 2023 20:20:42 -0400
Subject: [PATCH 06/15] =?UTF-8?q?=F0=9F=94=A5=20Remove=20empty=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/Manifest.ts | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 src/types/Manifest.ts

diff --git a/src/types/Manifest.ts b/src/types/Manifest.ts
deleted file mode 100644
index e69de29b..00000000

From 4eaa8f11fadfc3968bc8093512caef9804abbdad Mon Sep 17 00:00:00 2001
From: Isaac Maier <padspambox@gmail.com>
Date: Tue, 10 Oct 2023 20:44:45 -0400
Subject: [PATCH 07/15] Fix grid header not being sticky

---
 src/styles/components/_grid.scss | 7 +------
 src/types/marketplace-types.d.ts | 2 +-
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/styles/components/_grid.scss b/src/styles/components/_grid.scss
index 38eb3a6f..148c3a72 100644
--- a/src/styles/components/_grid.scss
+++ b/src/styles/components/_grid.scss
@@ -1,10 +1,5 @@
 @use "../constants.scss";
 
-// Compatibility with new Spotify layout
-.Root__fixed-top-bar ~ .Root__main-view .marketplace-header {
-  padding-top: 64px;
-}
-
 .marketplace-header {
   -webkit-box-pack: justify;
   -webkit-box-align: center;
@@ -18,7 +13,7 @@
   // To position the settings button + colour schemes
   position: sticky;
   flex-direction: row-reverse;
-  // top: 80px;
+  top: 80px;
   z-index: 1;
 }
 
diff --git a/src/types/marketplace-types.d.ts b/src/types/marketplace-types.d.ts
index 861ad8ac..e1f31192 100644
--- a/src/types/marketplace-types.d.ts
+++ b/src/types/marketplace-types.d.ts
@@ -93,7 +93,7 @@ export type CardItem = {
   lastUpdated: string;
   name: string;
   lastUpdated: string;
-   stargazers_count: number;
+  stargazers_count: number;
   // For themes only
   cssURL?: string;
   schemesURL?: string;

From 4edd6f452c9d6248cb4c82bf6311910218ce7391 Mon Sep 17 00:00:00 2001
From: Isaac Maier <padspambox@gmail.com>
Date: Tue, 10 Oct 2023 20:45:30 -0400
Subject: [PATCH 08/15] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Remove=20"spicetify?=
 =?UTF-8?q?=20marketplace"=20text=20in=20grid=20header,=20add=20"sort=20by?=
 =?UTF-8?q?"=20label,=20and=20move=20sort=20box=20to=20left?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Grid.tsx          | 13 ++++++-------
 src/styles/components/_grid.scss |  5 +++++
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index 52e3540a..e48a3e4f 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -521,7 +521,6 @@ class Grid extends React.Component<
       <section className="contentSpacing">
         <div className="marketplace-header">
           <div className="marketplace-header__left">
-            <h1>{this.props.title}</h1>
             {this.state.newUpdate
               ? <button type="button" title={t("grid.newUpdate")} className="marketplace-header-icon-button" id="marketplace-update"
                 onClick={() => window.location.href = "https://github.com/spicetify/spicetify-marketplace/releases/latest"}
@@ -530,6 +529,12 @@ class Grid extends React.Component<
                 &nbsp;{this.state.version}
               </button>
               : null}
+            {/* Generate a new box for sorting options */}
+            <h2 className="marketplace-header__label">Sort by:</h2>
+            <SortBox
+              onChange={(value) => this.updateSort(value)}
+              sortBoxOptions={generateSortOptions()}
+              sortBySelectedFn={(a) => a.key === this.CONFIG.sort} />
           </div>
           <div className="marketplace-header__right">
             {/* Show theme developer tools button if themeDevTools is enabled */}
@@ -559,12 +564,6 @@ class Grid extends React.Component<
                   this.setState({ searchValue: event.target.value });
                 }} />
             </div>
-            {/* Generate a new box for sorting options */}
-            <SortBox
-              onChange={(value) => this.updateSort(value)}
-              sortBoxOptions={generateSortOptions()}
-              sortBySelectedFn={(a) => a.key === this.CONFIG.sort} />
-
             <Spicetify.ReactComponent.TooltipWrapper label={t("settings.title")} renderInline={true} placement="bottom">
               <button type="button" aria-label={t("settings.title")} className="marketplace-header-icon-button" id="marketplace-settings-button"
                 onClick={() => openModal("SETTINGS", this.CONFIG, this.updateAppConfig)}
diff --git a/src/styles/components/_grid.scss b/src/styles/components/_grid.scss
index 148c3a72..4d8d0763 100644
--- a/src/styles/components/_grid.scss
+++ b/src/styles/components/_grid.scss
@@ -30,6 +30,11 @@
   left: 0;
 }
 
+.marketplace-header__label {
+  display: inline-flex;
+  align-self: center;
+}
+
 .marketplace-grid {
   --minimumColumnWidth: 180px;
   --column-width: minmax(var(--minimumColumnWidth), 1fr);

From 9bb3b954ebbc4ee6c9bedb527d2a21d2cefcd8c1 Mon Sep 17 00:00:00 2001
From: Isaac Maier <padspambox@gmail.com>
Date: Tue, 10 Oct 2023 20:45:46 -0400
Subject: [PATCH 09/15] Change order of sort by dropdown options

---
 src/logic/Utils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/logic/Utils.ts b/src/logic/Utils.ts
index 449f745c..e4bdd8e3 100644
--- a/src/logic/Utils.ts
+++ b/src/logic/Utils.ts
@@ -193,10 +193,10 @@ export const generateSchemesOptions = (schemes: SchemeIni) => {
 
 export const generateSortOptions = () => {
   return [
-    { key: "newest", value: "Newest" },
     { key: "stars", value: "Stars" },
-    { key: "a-z", value: "A-Z" },
+    { key: "newest", value: "Newest" },
     { key: "oldest", value: "Oldest" },
+    { key: "a-z", value: "A-Z" },
     { key: "z-a", value: "Z-A" },
   ];
 };

From 5883833f25fb02f2563cf7254db76c5f45519080 Mon Sep 17 00:00:00 2001
From: Isaac Maier <padspambox@gmail.com>
Date: Tue, 10 Oct 2023 20:49:24 -0400
Subject: [PATCH 10/15] Add jsdocs for "hideInstalled" param

---
 src/logic/FetchRemotes.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/logic/FetchRemotes.ts b/src/logic/FetchRemotes.ts
index 04554478..5f156841 100644
--- a/src/logic/FetchRemotes.ts
+++ b/src/logic/FetchRemotes.ts
@@ -107,6 +107,7 @@ async function getRepoManifest(user: string, repo: string, branch: string) {
 * @param contents_url The repo's GitHub API contents_url (e.g. "https://api.github.com/repos/theRealPadster/spicetify-hide-podcasts/contents/{+path}")
 * @param branch The repo's default branch (e.g. main or master)
 * @param stars The number of stars the repo has
+* @param hideInstalled Whether to hide installed items or not (defaults to `false`)
 * @returns Extension info for card (or null)
 */
 export async function fetchExtensionManifest(contents_url: string, branch: string, stars: number, hideInstalled = false) {

From 1187c78239d9df4ed333758dfb62d0b1b3f0c961 Mon Sep 17 00:00:00 2001
From: Isaac Maier <padspambox@gmail.com>
Date: Tue, 10 Oct 2023 20:55:04 -0400
Subject: [PATCH 11/15] =?UTF-8?q?=E2=9C=A8=20Add=20sort=20functionality=20?=
 =?UTF-8?q?to=20apps=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Grid.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index e48a3e4f..fc0528a9 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -305,9 +305,10 @@ class Grid extends React.Component<
     }
     case "Apps": {
       const pageOfRepos = await getTaggedRepos("spicetify-apps", this.requestPage, this.BLACKLIST);
-      for (const repo of pageOfRepos.items) {
+      const apps: CardItem[] = [];
 
-        const apps = await fetchAppManifest(
+      for (const repo of pageOfRepos.items) {
+        const repoApps = await fetchAppManifest(
           repo.contents_url,
           repo.default_branch,
           repo.stargazers_count,
@@ -318,15 +319,21 @@ class Grid extends React.Component<
           return -1;
         }
 
-        if (apps && apps.length) {
-          apps.forEach((app) => {
-            Object.assign(app, { lastUpdated: repo.pushed_at });
-            this.appendCard(app, "app", activeTab);
-          });
+        if (repoApps && repoApps.length) {
+          apps.push(...repoApps.map((app) => ({
+            ...app,
+            lastUpdated: repo.pushed_at,
+          })));
         }
       }
       this.setState({ cards: this.cardList });
 
+      sortCardItems(apps, localStorage.getItem("marketplace:sort") || "stars");
+
+      for (const app of apps) {
+        this.appendCard(app, "app", activeTab);
+      }
+
       // First request is null, so coerces to 1
       const currentPage = this.requestPage > -1 && this.requestPage ? this.requestPage : 1;
       // -1 because the page number is 1-indexed

From c120cf92c5ecb770263adcc3ddc6a8437dc92be2 Mon Sep 17 00:00:00 2001
From: Isaac Maier <padspambox@gmail.com>
Date: Tue, 10 Oct 2023 21:16:46 -0400
Subject: [PATCH 12/15] =?UTF-8?q?=E2=9C=A8=20Add=20sort=20support=20for=20?=
 =?UTF-8?q?Installed=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Grid.tsx | 11 +++++++++--
 src/logic/Utils.ts      | 34 +++++++++++++++++++++++++++++-----
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index fc0528a9..553a9310 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -241,17 +241,24 @@ class Grid extends React.Component<
 
       for (const type in installedStuff) {
         if (installedStuff[type].length) {
+          const installedOfType: CardItem[] = [];
           installedStuff[type].forEach(async (itemKey) => {
             // TODO: err handling
-            const extension = getLocalStorageDataFromKey(itemKey);
+            const installedItem = getLocalStorageDataFromKey(itemKey);
             // I believe this stops the requests when switching tabs?
             if (this.requestQueue.length > 1 && queue !== this.requestQueue[0]) {
               // Stop this queue from continuing to fetch and append to cards list
               return -1;
             }
 
-            this.appendCard(extension, type as CardType, activeTab);
+            installedOfType.push(installedItem);
           });
+
+          sortCardItems(installedOfType, localStorage.getItem("marketplace:sort") || "stars");
+
+          for (const item of installedOfType) {
+            this.appendCard(item, type as CardType, activeTab);
+          }
         }
       }
       this.setState({ cards: this.cardList });
diff --git a/src/logic/Utils.ts b/src/logic/Utils.ts
index e4bdd8e3..6f93fb99 100644
--- a/src/logic/Utils.ts
+++ b/src/logic/Utils.ts
@@ -591,19 +591,43 @@ export const addExtensionToSpicetifyConfig = (main?: string) => {
   }
 };
 
-export const sortCardItems = (cardItems: CardItem[], sortMode: string) => {
+/**
+ * Compare two card items/snippets by name.
+ * This will use `title` for snippets and `manifest.name` for everything else.
+ */
+const compareNames = (a: CardItem | Snippet, b: CardItem | Snippet) => {
+  // Snippets have a title, but no manifest
+  const aName = a.title || a?.manifest?.name || "";
+  const bName = b.title || b?.manifest?.name || "";
+  return aName.localeCompare(bName);
+};
+
+/**
+ * Compare two card items/snippets by lastUpdated.
+ * This is skipped for snippets, since they don't have a lastUpdated property.
+ */
+const compareUpdated = (a: CardItem | Snippet, b: CardItem | Snippet) => {
+  // Abort compare if items are missing lastUpdated
+  if (a.lastUpdated === undefined || b.lastUpdated === undefined) return 0;
+
+  const aDate = new Date(a.lastUpdated);
+  const bDate = new Date(b.lastUpdated);
+  return bDate.getTime() - aDate.getTime();
+};
+
+export const sortCardItems = (cardItems: CardItem[] | Snippet[], sortMode: string) => {
   switch (sortMode) {
   case "a-z":
-    cardItems.sort((a, b) => a.manifest.name.localeCompare(b.manifest.name));
+    cardItems.sort((a, b) => compareNames(a, b));
     break;
   case "z-a":
-    cardItems.sort((a, b) => b.manifest.name.localeCompare(a.manifest.name));
+    cardItems.sort((a, b) => compareNames(b, a));
     break;
   case "newest":
-    cardItems.sort((a, b) => new Date(b.lastUpdated).getTime() - new Date(a.lastUpdated).getTime());
+    cardItems.sort((a, b) => compareUpdated(a, b));
     break;
   case "oldest":
-    cardItems.sort((a, b) => new Date(a.lastUpdated).getTime() - new Date(b.lastUpdated).getTime());
+    cardItems.sort((a, b) => compareUpdated(b, a));
     break;
   case "stars":
   default:

From 425b8302484412e03af93b129957b72f1cf3cd4e Mon Sep 17 00:00:00 2001
From: Isaac Maier <padspambox@gmail.com>
Date: Tue, 10 Oct 2023 21:20:18 -0400
Subject: [PATCH 13/15] =?UTF-8?q?=E2=9C=A8=20Add=20sort=20functionality=20?=
 =?UTF-8?q?to=20Snippets=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Grid.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index 553a9310..6cd22b60 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -358,7 +358,9 @@ class Grid extends React.Component<
         // Stop this queue from continuing to fetch and append to cards list
         return -1;
       }
+
       if (snippets && snippets.length) {
+        sortCardItems(snippets, localStorage.getItem("marketplace:sort") || "stars");
         snippets.forEach((snippet) => this.appendCard(snippet, "snippet", activeTab));
         this.setState({ cards: this.cardList });
       }

From 4b406987db9d9ed1c7cacb3762c3f415228d743b Mon Sep 17 00:00:00 2001
From: Isaac Maier <padspambox@gmail.com>
Date: Tue, 10 Oct 2023 21:30:23 -0400
Subject: [PATCH 14/15] Add note about hiding sort options for snippets

---
 src/logic/Utils.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/logic/Utils.ts b/src/logic/Utils.ts
index 6f93fb99..6da92a92 100644
--- a/src/logic/Utils.ts
+++ b/src/logic/Utils.ts
@@ -192,6 +192,12 @@ export const generateSchemesOptions = (schemes: SchemeIni) => {
 };
 
 export const generateSortOptions = () => {
+  // TODO: It would be great if I could disable the options that don't apply for snippets
+  // But it looks like that's not supported by the library
+  // https://github.com/fraserxu/react-dropdown/pull/176
+  // TODO: I could also just remove the options for snippets,
+  // but then the sort resets when you switch tabs and it's disruptive
+
   return [
     { key: "stars", value: "Stars" },
     { key: "newest", value: "Newest" },

From c572e3a89fe669037bd75e582f655bb330444b90 Mon Sep 17 00:00:00 2001
From: Isaac Maier <padspambox@gmail.com>
Date: Tue, 10 Oct 2023 21:42:23 -0400
Subject: [PATCH 15/15] =?UTF-8?q?=E2=9C=A8=20=F0=9F=8C=90=20Add=20i18n=20s?=
 =?UTF-8?q?upport=20for=20sort=20dropdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Grid.tsx       |  4 ++--
 src/logic/Utils.ts            | 17 +++++++++++------
 src/resources/locales/en.json | 10 +++++++++-
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index 6cd22b60..9d95ad11 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -546,10 +546,10 @@ class Grid extends React.Component<
               </button>
               : null}
             {/* Generate a new box for sorting options */}
-            <h2 className="marketplace-header__label">Sort by:</h2>
+            <h2 className="marketplace-header__label">{t("grid.sort.label")}</h2>
             <SortBox
               onChange={(value) => this.updateSort(value)}
-              sortBoxOptions={generateSortOptions()}
+              sortBoxOptions={generateSortOptions(t)}
               sortBySelectedFn={(a) => a.key === this.CONFIG.sort} />
           </div>
           <div className="marketplace-header__right">
diff --git a/src/logic/Utils.ts b/src/logic/Utils.ts
index 6da92a92..a117d978 100644
--- a/src/logic/Utils.ts
+++ b/src/logic/Utils.ts
@@ -191,7 +191,12 @@ export const generateSchemesOptions = (schemes: SchemeIni) => {
   ));
 };
 
-export const generateSortOptions = () => {
+/**
+ * Generate a list of options for the sort dropdown
+ * @param t The string translation function
+ * @returns The sort options for the sort dropdown
+ */
+export const generateSortOptions = (t: (key: string) => string) => {
   // TODO: It would be great if I could disable the options that don't apply for snippets
   // But it looks like that's not supported by the library
   // https://github.com/fraserxu/react-dropdown/pull/176
@@ -199,11 +204,11 @@ export const generateSortOptions = () => {
   // but then the sort resets when you switch tabs and it's disruptive
 
   return [
-    { key: "stars", value: "Stars" },
-    { key: "newest", value: "Newest" },
-    { key: "oldest", value: "Oldest" },
-    { key: "a-z", value: "A-Z" },
-    { key: "z-a", value: "Z-A" },
+    { key: "stars", value: t("grid.sort.stars") },
+    { key: "newest", value: t("grid.sort.newest") },
+    { key: "oldest", value: t("grid.sort.oldest") },
+    { key: "a-z", value: t("grid.sort.aToZ") },
+    { key: "z-a", value: t("grid.sort.zToA") },
   ];
 };
 /**
diff --git a/src/resources/locales/en.json b/src/resources/locales/en.json
index c08ac075..ee3be9fa 100644
--- a/src/resources/locales/en.json
+++ b/src/resources/locales/en.json
@@ -81,7 +81,15 @@
       "lastUpdated": "Last updated {{val, datetime}}",
       "externalJS": "external JS",
       "dark": "dark",
-      "light": "light"
+      "light": "light",
+      "sort": {
+        "label": "Sort by:",
+        "stars": "Stars",
+        "newest": "Newest",
+        "oldest": "Oldest",
+        "aToZ": "A-Z",
+        "zToA": "Z-A"
+      }
     },
     "readmePage": {
       "title": "$t(grid.spicetifyMarketplace) - Readme",