From 2a0722d0d0ec756215e423a72da4d7be7143da4f Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Wed, 8 Jan 2025 17:41:17 -0800
Subject: [PATCH] Remove old prop and fix error with card actions on pages with
 instance context

---
 .../src/components/ui/ProjectCardActions.vue  | 53 +++++++++++--------
 .../src/pages/search/[searchProjectType].vue  |  1 -
 .../src/components/project/ProjectsList.vue   | 11 ++--
 3 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/ProjectCardActions.vue b/apps/app-frontend/src/components/ui/ProjectCardActions.vue
index b03c6cce8..ebfa3100b 100644
--- a/apps/app-frontend/src/components/ui/ProjectCardActions.vue
+++ b/apps/app-frontend/src/components/ui/ProjectCardActions.vue
@@ -32,15 +32,10 @@ const installing = ref(false)
 
 const installed: Ref<boolean> = ref(false)
 
-checkInstallStatus()
-
 function checkInstallStatus() {
   if (props.instanceContent) {
-    installed.value = Object.values(props.instanceContent).some((content) => {
-      if (content.metadata?.project_id === projectId.value) {
-        return true
-      }
-    })
+    installed.value = Object.values(props.instanceContent)
+      .some((content) => content.metadata?.project_id === projectId.value)
   }
 }
 
@@ -64,7 +59,9 @@ async function install(toInstance: boolean) {
 
 const modpack = computed(() => props.project.project_type === 'modpack')
 
-const projectWebUrl = computed(() => `https://modrinth.com/${props.project.project_type}/${props.project.slug}`)
+const projectWebUrl = computed(
+  () => `https://modrinth.com/${props.project.project_type}/${props.project.slug}`,
+)
 
 const tooltip = defineMessages({
   installing: {
@@ -88,23 +85,41 @@ const messages = defineMessages({
   },
 })
 
-const projectId = computed(() => isSearchResult(props.project) ? props.project.project_id : props.project.id)
+const projectId = computed(() =>
+  isSearchResult(props.project) ? props.project.project_id : props.project.id,
+)
 
 const copyText = (text: string) => {
-  navigator.clipboard.writeText(text);
+  navigator.clipboard.writeText(text)
 }
+
+checkInstallStatus()
 </script>
 
 <template>
   <ButtonStyled color="brand">
-    <button v-tooltip="installing ? formatMessage(tooltip.installing) : installed ? formatMessage(tooltip.installed) : null" :disabled="installing || installed" @click="() => install(true)">
+    <button
+      v-tooltip="
+        installing
+          ? formatMessage(tooltip.installing)
+          : installed
+            ? formatMessage(tooltip.installed)
+            : null
+      "
+      :disabled="installing || installed"
+      @click="() => install(true)"
+    >
       <SpinnerIcon v-if="installing" />
       <CheckIcon v-else-if="installed" />
       <DownloadIcon v-else />
-      {{ formatMessage(
-        installing ? commonMessages.installingButton :
-        installed ? commonMessages.installedButton :
-        commonMessages.installButton)
+      {{
+        formatMessage(
+          installing
+            ? commonMessages.installingButton
+            : installed
+              ? commonMessages.installedButton
+              : commonMessages.installButton,
+        )
       }}
     </button>
   </ButtonStyled>
@@ -164,12 +179,8 @@ const copyText = (text: string) => {
       <template #install-elsewhere>
         <DownloadIcon /> {{ formatMessage(commonMessages.installToButton) }}
       </template>
-      <template #versions>
-        <VersionIcon /> {{ formatMessage(messages.viewVersions) }}
-      </template>
-      <template #gallery>
-        <ImageIcon /> {{ formatMessage(messages.viewGallery) }}
-      </template>
+      <template #versions> <VersionIcon /> {{ formatMessage(messages.viewVersions) }} </template>
+      <template #gallery> <ImageIcon /> {{ formatMessage(messages.viewGallery) }} </template>
       <template #open-link>
         <ExternalIcon /> {{ formatMessage(commonMessages.openInBrowserButton) }}
       </template>
diff --git a/apps/frontend/src/pages/search/[searchProjectType].vue b/apps/frontend/src/pages/search/[searchProjectType].vue
index 86ecb7477..94e473705 100644
--- a/apps/frontend/src/pages/search/[searchProjectType].vue
+++ b/apps/frontend/src/pages/search/[searchProjectType].vue
@@ -287,7 +287,6 @@
                 :categories="result.display_categories"
                 :link="`/${projectType.id}/${result.slug ? result.slug : result.project_id}`"
                 :creator-link="`/user/${result.author}`"
-                :platform-tags="tags.loaders"
               >
                 <template v-if="false" #actions> </template>
               </NewProjectCard>
diff --git a/packages/ui/src/components/project/ProjectsList.vue b/packages/ui/src/components/project/ProjectsList.vue
index b5be4a098..d11316408 100644
--- a/packages/ui/src/components/project/ProjectsList.vue
+++ b/packages/ui/src/components/project/ProjectsList.vue
@@ -44,7 +44,6 @@
         <NewProjectCard
           :project="project"
           :link="projectLink(project)"
-          :platform-tags="platformTags"
           :experimental-colors="experimentalColors"
           :date-type="sortBy.id === 'published' ? 'published' : 'updated'"
         >
@@ -75,7 +74,7 @@
 <script setup lang="ts">
 import { useVIntl, defineMessages, defineMessage } from '@vintl/vintl'
 import { XCircleIcon, SearchIcon, XIcon } from '@modrinth/assets'
-import type { PlatformTag, Project, VirtualProjectType } from '@modrinth/utils'
+import type { Project, VirtualProjectType } from '@modrinth/utils'
 import NewProjectCard from './NewProjectCard.vue'
 import { ref, computed, type Ref } from 'vue'
 import { Button, DropdownSelect } from '../index'
@@ -121,11 +120,9 @@ const props = withDefaults(
   defineProps<{
     projects: Project[]
     projectLink: (project: Project) => Linkish
-    platformTags?: PlatformTag[]
     experimentalColors?: boolean
   }>(),
   {
-    platformTags: undefined,
     experimentalColors: false,
   },
 )
@@ -136,6 +133,8 @@ const sortedProjects = computed(() => props.projects.slice().sort(sortBy.value.s
 
 const projectType: Ref<VirtualProjectType | null> = ref(null)
 
+const PROJECT_TYPES_ORDER = ['mod', 'resourcepack', 'datapack', 'shader', 'modpack', 'plugin']
+
 const availableProjectTypes = computed(() => {
   const types = new Set<VirtualProjectType>()
 
@@ -143,7 +142,9 @@ const availableProjectTypes = computed(() => {
     types.add(project.project_type)
   }
 
-  return [...types]
+  const typesArray = [...types]
+  typesArray.sort((a, b) => PROJECT_TYPES_ORDER.indexOf(a) - PROJECT_TYPES_ORDER.indexOf(b))
+  return typesArray
 })
 
 const filteredProjects = computed(() =>