0.9.0 release (app) (#3056)

* Debug app

* Bump version, final fixes

apps/app-frontend/src/pages/Browse.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, shallowRef, watch } from 'vue'
 import type { Ref } from 'vue'
-import { SearchIcon, XIcon } from '@modrinth/assets'
+import { SearchIcon, XIcon, ClipboardCopyIcon, GlobeIcon, ExternalIcon } from '@modrinth/assets'
 import type { Category, GameVersion, Platform, ProjectType, SortType, Tags } from '@modrinth/ui'
 import {
   SearchFilterControl,
@@ -25,6 +25,8 @@ import NavTabs from '@/components/ui/NavTabs.vue'
 import type Instance from '@/components/ui/Instance.vue'
 import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
 import { defineMessages, useVIntl } from '@vintl/vintl'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import { openUrl } from '@tauri-apps/plugin-opener'
 
 const { formatMessage } = useVIntl()
 
@@ -351,6 +353,36 @@ const messages = defineMessages({
   },
 })
 
+const options = ref(null)
+const handleRightClick = (event, result) => {
+  options.value.showMenu(event, result, [
+    {
+      name: 'install',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      name: 'open_link',
+    },
+    {
+      name: 'copy_link',
+    },
+  ])
+}
+const handleOptionsClick = (args) => {
+  switch (args.option) {
+    case 'open_link':
+      openUrl(`https://modrinth.com/${args.item.project_type}/${args.item.slug}`)
+      break
+    case 'copy_link':
+      navigator.clipboard.writeText(
+        `https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
+      )
+      break
+  }
+}
+
 await refreshSearch()
 </script>
 
@@ -477,7 +509,12 @@ await refreshSearch()
               newlyInstalled.push(id)
             }
           "
+          @contextmenu.prevent.stop="(event) => handleRightClick(event, result)"
         />
+        <ContextMenu ref="options" @option-clicked="handleOptionsClick">
+          <template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
+          <template #copy_link> <ClipboardCopyIcon /> Copy link </template>
+        </ContextMenu>
       </section>
       <div class="flex justify-end">
         <pagination

apps/app-frontend/src/pages/instance/Mods.vue

@@ -218,6 +218,15 @@
         </ButtonStyled>
       </template>
     </ContentListPanel>
+    <div class="flex justify-end mt-4">
+      <Pagination
+        v-if="search.length > 0"
+        :page="currentPage"
+        :count="Math.ceil(search.length / 20)"
+        :link-function="(page) => `?page=${page}`"
+        @switch-page="(page) => (currentPage = page)"
+      />
+    </div>
   </template>
   <div v-else class="w-full flex flex-col items-center justify-center mt-6 max-w-[48rem] mx-auto">
     <div class="top-box w-full">
@@ -416,6 +425,7 @@ const initProjects = async (cacheBehaviour?) => {
       icon: null,
       disabled: file.file_name.endsWith('.disabled'),
       outdated: false,
+      updated: dayjs(0),
       project_type: file.project_type === 'shaderpack' ? 'shader' : file.project_type,
     })
   }
@@ -541,20 +551,19 @@ const search = computed(() => {
   switch (sortColumn.value) {
     case 'Updated':
       return filtered.slice().sort((a, b) => {
-        if (a.updated < b.updated) {
-          return ascending.value ? 1 : -1
-        }
-        if (a.updated > b.updated) {
-          return ascending.value ? -1 : 1
-        }
-        return 0
+        const updated = a.updated.isAfter(b.updated) ? 1 : -1
+        return ascending.value ? -updated : updated
       })
     default:
-      return filtered.slice().sort((a, b) => a.name.localeCompare(b.name))
+      return filtered
+        .slice()
+        .sort((a, b) =>
+          ascending.value ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name),
+        )
   }
 })
 
-watch(search, () => (currentPage.value = 1))
+watch([sortColumn, ascending, selectedFilters.value, searchFilter], () => (currentPage.value = 1))
 
 const sortProjects = (filter) => {
   if (sortColumn.value === filter) {

apps/app-frontend/src/pages/project/Index.vue

@@ -31,7 +31,7 @@
         >
           <ProjectBackgroundGradient :project="data" />
         </Teleport>
-        <ProjectHeader :project="data">
+        <ProjectHeader :project="data" @contextmenu.prevent.stop="handleRightClick">
           <template #actions>
             <ButtonStyled size="large" color="brand">
               <button
@@ -118,7 +118,7 @@
           :installed-version="installedVersion"
         />
       </template>
-      <template v-else> Project data coult not be loaded. </template>
+      <template v-else> Project data couldn't not be loaded. </template>
     </div>
     <ContextMenu ref="options" @option-clicked="handleOptionsClick">
       <template #install> <DownloadIcon /> Install </template>
@@ -165,6 +165,7 @@ import { get_project, get_team, get_version_many } from '@/helpers/cache.js'
 import NavTabs from '@/components/ui/NavTabs.vue'
 import { useTheming } from '@/store/state.js'
 import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
+import { openUrl } from '@tauri-apps/plugin-opener'
 
 dayjs.extend(relativeTime)
 
@@ -172,7 +173,6 @@ const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
 const themeStore = useTheming()
 
-const options = ref(null)
 const installing = ref(false)
 const data = shallowRef(null)
 const versions = shallowRef([])
@@ -245,19 +245,30 @@ async function install(version) {
   )
 }
 
+const options = ref(null)
+const handleRightClick = (event) => {
+  options.value.showMenu(event, data.value, [
+    {
+      name: 'install',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      name: 'open_link',
+    },
+    {
+      name: 'copy_link',
+    },
+  ])
+}
 const handleOptionsClick = (args) => {
   switch (args.option) {
     case 'install':
       install(null)
       break
     case 'open_link':
-      window.__TAURI_INVOKE__('tauri', {
-        __tauriModule: 'Shell',
-        message: {
-          cmd: 'open',
-          path: `https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
-        },
-      })
+      openUrl(`https://modrinth.com/${args.item.project_type}/${args.item.slug}`)
       break
     case 'copy_link':
       navigator.clipboard.writeText(