From db1ebd78be70da42933c2a9069934625cce4b7d9 Mon Sep 17 00:00:00 2001
From: Kevin Oh <kevoh1516@gmail.com>
Date: Wed, 14 Jun 2023 14:20:01 -0400
Subject: [PATCH 1/3] sort by on user projects page

---
 pages/user/[id].vue | 67 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 65 insertions(+), 2 deletions(-)

diff --git a/pages/user/[id].vue b/pages/user/[id].vue
index ea2f320e31..ca6c18e55f 100644
--- a/pages/user/[id].vue
+++ b/pages/user/[id].vue
@@ -141,6 +141,29 @@
             </a>
           </template>
         </div>
+        <div class="card search-controls">
+          <div class="sort-controls">
+            <div class="labeled-control">
+              <span class="labeled-control__label">Sort by</span>
+              <Multiselect
+                v-model="sortType"
+                placeholder="Select one"
+                class="search-controls__sorting labeled-control__control"
+                track-by="display"
+                label="display"
+                :options="sortTypes"
+                :searchable="false"
+                :close-on-select="true"
+                :show-labels="false"
+                :allow-empty="false"
+              >
+                <template #singleLabel="{ option }">
+                  {{ option.display }}
+                </template>
+              </Multiselect>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="normal-page__content">
         <Promotion />
@@ -195,7 +218,7 @@
               : projects
             )
               .slice()
-              .sort((a, b) => b.downloads - a.downloads)"
+              .sort(sortProjects)"
             :id="project.slug || project.id"
             :key="project.id"
             :name="project.title"
@@ -238,6 +261,7 @@
   </div>
 </template>
 <script setup>
+import { Multiselect } from 'vue-multiselect'
 import ProjectCard from '~/components/ui/ProjectCard.vue'
 import Badge from '~/components/ui/Badge.vue'
 import Promotion from '~/components/ads/Promotion.vue'
@@ -266,6 +290,13 @@ import Avatar from '~/components/ui/Avatar.vue'
 
 const data = useNuxtApp()
 const route = useRoute()
+const sortTypes = shallowReadonly([
+  { display: 'Downloads', name: 'downloads' },
+  { display: 'Follow count', name: 'follows' },
+  { display: 'Recently published', name: 'newest' },
+  { display: 'Recently updated', name: 'updated' },
+])
+const sortType = ref({ display: 'Downloads', name: 'downloads' })
 
 let user, projects
 try {
@@ -322,7 +353,18 @@ const metaDescription = ref(
     ? `${user.value.bio} - Download ${user.value.username}'s projects on Modrinth`
     : `Download ${user.value.username}'s projects on Modrinth`
 )
-
+const sortProjects = (a, b) => {
+  switch (sortType.value.name) {
+    case 'downloads':
+      return b.downloads - a.downloads
+    case 'newest':
+      return Date.parse(b.published) - Date.parse(a.published)
+    case 'updated':
+      return Date.parse(b.updated) - Date.parse(a.updated)
+    case 'follows':
+      return b.followers - a.followers
+  }
+}
 const projectTypes = computed(() => {
   const obj = {}
 
@@ -445,6 +487,27 @@ export default defineNuxtComponent({
   }
 }
 
+.sort-controls {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-card-md);
+  flex-wrap: wrap;
+  align-items: center;
+
+  .labeled-control {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+
+    .labeled-control__label {
+      white-space: nowrap;
+    }
+  }
+}
+
 .mobile-username {
   margin: 0.25rem 0;
 }

From 773956aa43ece890563002e27cb8bfca8f383ee8 Mon Sep 17 00:00:00 2001
From: Kevin Oh <kevoh1516@gmail.com>
Date: Wed, 14 Jun 2023 14:39:06 -0400
Subject: [PATCH 2/3] add alphabetical

---
 pages/user/[id].vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pages/user/[id].vue b/pages/user/[id].vue
index ca6c18e55f..a3043b6b8b 100644
--- a/pages/user/[id].vue
+++ b/pages/user/[id].vue
@@ -295,6 +295,7 @@ const sortTypes = shallowReadonly([
   { display: 'Follow count', name: 'follows' },
   { display: 'Recently published', name: 'newest' },
   { display: 'Recently updated', name: 'updated' },
+  { display: 'Alphabetical', name: 'alphabetical' },
 ])
 const sortType = ref({ display: 'Downloads', name: 'downloads' })
 
@@ -363,6 +364,8 @@ const sortProjects = (a, b) => {
       return Date.parse(b.updated) - Date.parse(a.updated)
     case 'follows':
       return b.followers - a.followers
+    case 'alphabetical':
+      return b.title < a.title
   }
 }
 const projectTypes = computed(() => {

From 75e14dc894ffea776605ad9bc6631a6d81a130a3 Mon Sep 17 00:00:00 2001
From: Kevin Oh <kevoh1516@gmail.com>
Date: Tue, 20 Jun 2023 17:08:13 -0400
Subject: [PATCH 3/3] move controls to top

---
 pages/user/[id].vue | 50 ++++++++++++++++++++++++---------------------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/pages/user/[id].vue b/pages/user/[id].vue
index a3043b6b8b..be37902cf3 100644
--- a/pages/user/[id].vue
+++ b/pages/user/[id].vue
@@ -141,29 +141,6 @@
             </a>
           </template>
         </div>
-        <div class="card search-controls">
-          <div class="sort-controls">
-            <div class="labeled-control">
-              <span class="labeled-control__label">Sort by</span>
-              <Multiselect
-                v-model="sortType"
-                placeholder="Select one"
-                class="search-controls__sorting labeled-control__control"
-                track-by="display"
-                label="display"
-                :options="sortTypes"
-                :searchable="false"
-                :close-on-select="true"
-                :show-labels="false"
-                :allow-empty="false"
-              >
-                <template #singleLabel="{ option }">
-                  {{ option.display }}
-                </template>
-              </Multiselect>
-            </div>
-          </div>
-        </div>
       </div>
       <div class="normal-page__content">
         <Promotion />
@@ -203,6 +180,29 @@
             </button>
           </div>
         </nav>
+        <div class="card search-controls">
+          <div class="sort-controls">
+            <div class="labeled-control">
+              <span class="labeled-control__label">Sort by</span>
+              <Multiselect
+                v-model="sortType"
+                placeholder="Select one"
+                class="search-controls__sorting labeled-control__control"
+                track-by="display"
+                label="display"
+                :options="sortTypes"
+                :searchable="false"
+                :close-on-select="true"
+                :show-labels="false"
+                :allow-empty="false"
+              >
+                <template #singleLabel="{ option }">
+                  {{ option.display }}
+                </template>
+              </Multiselect>
+            </div>
+          </div>
+        </div>
         <div
           v-if="projects.length > 0"
           class="project-list"
@@ -508,6 +508,10 @@ export default defineNuxtComponent({
     .labeled-control__label {
       white-space: nowrap;
     }
+
+    .search-controls__sorting {
+      width: 15rem;
+    }
   }
 }