Merge remote-tracking branch 'upstream/main' into skin-manager

Jakobabs · Dec 15, 2024 · 6d43bb7 · 6d43bb7
2 parents 48e8a66 + 9aa7035
commit 6d43bb7
Show file tree

Hide file tree

Showing 47 changed files with 4,598 additions and 9,428 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -19,6 +19,3 @@ strip = true # Remove debug symbols
 
 [profile.dev.package.sqlx-macros]
 opt-level = 3
-
-[patch.crates-io]
-wry = { git = "https://github.com/modrinth/wry", rev = "27fb16b" }
diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@modrinth/app-frontend",
   "private": true,
-  "version": "0.8.9",
+  "version": "0.9.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,12 +16,12 @@
     "@modrinth/ui": "workspace:*",
     "@modrinth/utils": "workspace:*",
     "@sentry/vue": "^8.27.0",
-    "@tauri-apps/api": "^2.0.0-rc.3",
-    "@tauri-apps/plugin-dialog": "^2.0.0-rc.0",
-    "@tauri-apps/plugin-os": "^2.0.0-rc.0",
-    "@tauri-apps/plugin-shell": "^2.0.0-rc.0",
-    "@tauri-apps/plugin-updater": "^2.0.0-rc.0",
-    "@tauri-apps/plugin-window-state": "^2.0.0-rc.0",
+    "@tauri-apps/api": "^2.1.1",
+    "@tauri-apps/plugin-dialog": "^2.2.0",
+    "@tauri-apps/plugin-os": "^2.2.0",
+    "@tauri-apps/plugin-opener": "^2.2.1",
+    "@tauri-apps/plugin-updater": "^2.3.0",
+    "@tauri-apps/plugin-window-state": "^2.2.0",
     "@vintl/vintl": "^4.4.1",
     "dayjs": "^1.11.10",
     "floating-vue": "^5.2.2",
@@ -36,8 +36,8 @@
     "vue-virtual-scroller": "v2.0.0-beta.8"
   },
   "devDependencies": {
-    "@formatjs/cli": "^6.2.12",
     "@eslint/compat": "^1.1.1",
+    "@formatjs/cli": "^6.2.12",
     "@nuxt/eslint-config": "^0.5.6",
     "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.19",

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
@@ -58,7 +58,7 @@ import dayjs from 'dayjs'
 import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
 import FriendsList from '@/components/ui/friends/FriendsList.vue'
-import { open as openURL } from '@tauri-apps/plugin-shell'
+import { openUrl } from '@tauri-apps/plugin-opener'
 
 const themeStore = useTheming()
 
@@ -135,8 +135,8 @@ async function setupApp() {
     default_page,
   } = await get()
 
-  if (default_page && default_page !== 'Home') {
-    await router.push({ name: default_page })
+  if (default_page === 'Library') {
+    await router.push('/library')
   }
 
   os.value = await getOS()
@@ -193,6 +193,7 @@ async function setupApp() {
 
   get_opening_command().then(handleCommand)
   checkUpdates()
+  fetchCredentials()
 }
 
 const stateFailed = ref(false)
@@ -286,8 +287,6 @@ onMounted(() => {
   install.setIncompatibilityWarningModal(incompatibilityWarningModal)
   install.setInstallConfirmModal(installConfirmModal)
   install.setModInstallModal(modInstallModal)
-
-  fetchCredentials()
 })
 
 const accounts = ref(null)
@@ -333,10 +332,9 @@ function handleClick(e) {
         !target.classList.contains('router-link-active') &&
         !target.href.startsWith('http://localhost') &&
         !target.href.startsWith('https://tauri.localhost') &&
-        !target.href.startsWith('http://tauri.localhost') &&
-        target.target !== '_blank'
+        !target.href.startsWith('http://tauri.localhost')
       ) {
-        openURL(target.href)
+        openUrl(target.href)
       }
       e.preventDefault()
       break
@@ -362,21 +360,13 @@ function handleAuxClick(e) {
 
 <template>
   <SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
-  <Suspense>
-    <AppSettingsModal ref="settingsModal" />
-  </Suspense>
-  <RouterLink
-    v-if="!offline"
-    v-tooltip="'Skin Manager'"
-    to="/SkinManager"
-    class="btn icon-only collapsed-button"
-  >
-    <SkinManagerIcon />
-  </RouterLink>
-  <Suspense>
-    <InstanceCreationModal ref="installationModal" />
-  </Suspense>
   <div v-if="stateInitialized" class="app-grid-layout relative">
+    <Suspense>
+      <AppSettingsModal ref="settingsModal" />
+    </Suspense>
+    <Suspense>
+      <InstanceCreationModal ref="installationModal" />
+    </Suspense>
     <div
       class="app-grid-navbar bg-bg-raised flex flex-col p-[1rem] pt-0 gap-[0.5rem] z-10 w-[--left-bar-width]"
     >
@@ -404,6 +394,10 @@ function handleAuxClick(e) {
         <LibraryIcon />
         <template #label>Library</template>
       </NavButton>
+      <NavButton v-if="!offline" to="/SkinManager">
+        <SkinManagerIcon />
+        <template #label>Skin Manager</template>
+      </NavButton>
       <div class="h-px w-6 mx-auto my-2 bg-button-bg"></div>
       <NavButton :to="() => $refs.installationModal.show()" :disabled="offline">
         <PlusIcon />
@@ -948,3 +942,4 @@ function handleAuxClick(e) {
   }
 }
 </style>
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
diff --git a/apps/app-frontend/src/components/ui/AccountsCard.vue b/apps/app-frontend/src/components/ui/AccountsCard.vue
@@ -174,6 +174,7 @@ function toggleMenu(override = true) {
   } else {
     showCard.value = true
   }
+  console.log(account_heads.value)
 }
 
 const unlisten = await process_listener(async (e) => {

diff --git a/apps/app-frontend/src/components/ui/JavaDetectionModal.vue b/apps/app-frontend/src/components/ui/JavaDetectionModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <ModalWrapper ref="detectJavaModal" header="Select java version">
+  <ModalWrapper ref="detectJavaModal" header="Select java version" :show-ad-on-close="false">
     <div class="auto-detect-modal">
       <div class="table">
         <div class="table-row table-head">

diff --git a/apps/app-frontend/src/components/ui/PromotionWrapper.vue b/apps/app-frontend/src/components/ui/PromotionWrapper.vue
@@ -4,20 +4,29 @@ import { ChevronRightIcon } from '@modrinth/assets'
 import { init_ads_window, open_ads_link, record_ads_click } from '@/helpers/ads.js'
 
 const adsWrapper = ref(null)
+
+let devicePixelRatioWatcher = null
+
+function initDevicePixelRatioWatcher() {
+  if (devicePixelRatioWatcher) {
+    devicePixelRatioWatcher.removeEventListener('change', updateAdPosition)
+  }
+
+  devicePixelRatioWatcher = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
+  devicePixelRatioWatcher.addEventListener('change', updateAdPosition)
+}
+
 onMounted(() => {
   updateAdPosition()
 
   window.addEventListener('resize', updateAdPosition)
+  initDevicePixelRatioWatcher()
 })
 
 function updateAdPosition() {
   if (adsWrapper.value) {
-    const rect = adsWrapper.value.getBoundingClientRect()
-
-    const x = rect.left + window.scrollX
-    const y = rect.top + window.scrollY
-
-    init_ads_window(x, y, 300, 250, true)
+    init_ads_window(true)
+    initDevicePixelRatioWatcher()
   }
 }
 

diff --git a/apps/app-frontend/src/components/ui/SearchCard.vue b/apps/app-frontend/src/components/ui/SearchCard.vue
@@ -11,14 +11,28 @@
       }
     "
   >
-    <div class="icon">
-      <Avatar :src="project.icon_url" size="96px" class="search-icon" />
+    <div class="icon w-[96px] h-[96px] relative">
+      <Avatar
+        :src="project.icon_url"
+        size="96px"
+        class="search-icon origin-top transition-all"
+        :class="{ 'scale-[0.85]': installed, 'brightness-50': installing }"
+      />
+      <div v-if="installing" class="rounded-2xl absolute inset-0 flex items-center justify-center">
+        <SpinnerIcon class="h-8 w-8 animate-spin" />
+      </div>
+      <div
+        v-if="installed"
+        class="absolute shadow-sm font-semibold bottom-0 w-full p-1 bg-button-bg rounded-full text-xs justify-center items-center flex gap-1 text-brand border-[1px] border-solid border-[--color-button-border]"
+      >
+        <CheckIcon class="shrink-0 stroke-[3px]" /> Installed
+      </div>
     </div>
     <div class="flex flex-col gap-2 overflow-hidden">
       <div class="gap-2 overflow-hidden no-wrap text-ellipsis">
-        <span class="text-lg font-extrabold text-contrast m-0 leading-none">{{
-          project.title
-        }}</span>
+        <span class="text-lg font-extrabold text-contrast m-0 leading-none">
+          {{ project.title }}
+        </span>
         <span v-if="project.author" class="text-secondary"> by {{ project.author }}</span>
       </div>
       <div class="m-0 line-clamp-2">
@@ -93,6 +107,7 @@
 
 <script setup>
 import {
+  SpinnerIcon,
   TagsIcon,
   DownloadIcon,
   HeartIcon,

diff --git a/apps/app-frontend/src/components/ui/friends/FriendsList.vue b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Avatar, ButtonStyled, NewModal, OverflowMenu } from '@modrinth/ui'
+import { Avatar, ButtonStyled, OverflowMenu } from '@modrinth/ui'
 import {
   UserPlusIcon,
   MoreVerticalIcon,
@@ -16,6 +16,7 @@ import { handleError } from '@/store/notifications.js'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const props = defineProps<{
   credentials: unknown | null
@@ -140,7 +141,6 @@ async function loadFriends(timeout = false) {
 watch(
   userCredentials,
   () => {
-    console.log('watch', userCredentials.value)
     if (userCredentials.value === undefined) {
       userFriends.value = []
     } else if (userCredentials.value === null) {
@@ -160,7 +160,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <NewModal ref="manageFriendsModal" header="Manage friends">
+  <ModalWrapper ref="manageFriendsModal" header="Manage friends">
     <p v-if="acceptedFriends.length === 0">You have no friends :C</p>
     <div v-else class="flex flex-col gap-4 min-w-[20rem]">
       <input v-model="search" type="text" placeholder="Search friends..." class="w-full" />
@@ -189,8 +189,8 @@ onUnmounted(() => {
         </div>
       </div>
     </div>
-  </NewModal>
-  <NewModal ref="friendInvitesModal" header="View friend requests">
+  </ModalWrapper>
+  <ModalWrapper ref="friendInvitesModal" header="View friend requests">
     <p v-if="pendingFriends.length === 0">You have no pending friend requests :C</p>
     <div v-else class="flex flex-col gap-4">
       <div v-for="friend in pendingFriends" :key="friend.username" class="flex gap-2">
@@ -234,8 +234,8 @@ onUnmounted(() => {
         </div>
       </div>
     </div>
-  </NewModal>
-  <NewModal ref="addFriendModal" header="Add a friend">
+  </ModalWrapper>
+  <ModalWrapper ref="addFriendModal" header="Add a friend">
     <div class="mb-4">
       <h2 class="m-0 text-xl">Username</h2>
       <p class="m-0 mt-1 leading-tight">You can add friends with their Modrinth username.</p>
@@ -247,7 +247,7 @@ onUnmounted(() => {
         Add friend
       </button>
     </ButtonStyled>
-  </NewModal>
+  </ModalWrapper>
   <div class="flex justify-between items-center">
     <h3 class="text-lg m-0">Friends</h3>
     <ButtonStyled type="transparent" circular>

diff --git a/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue b/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
@@ -7,37 +7,41 @@
         installed.
       </p>
       <table>
-        <tr class="header">
-          <th>{{ instance?.name }}</th>
-          <th>{{ project.title }}</th>
-        </tr>
-        <tr class="content">
-          <td class="data">{{ instance?.loader }} {{ instance?.game_version }}</td>
-          <td>
-            <DropdownSelect
-              v-if="versions?.length > 1"
-              v-model="selectedVersion"
-              :options="versions"
-              placeholder="Select version"
-              name="Version select"
-              :display-name="
-                (version) =>
-                  `${version?.name} (${version?.loaders
-                    .map((name) => formatCategory(name))
-                    .join(', ')} - ${version?.game_versions.join(', ')})`
-              "
-              render-up
-            />
-            <span v-else>
-              <span>
-                {{ selectedVersion?.name }} ({{
-                  selectedVersion?.loaders.map((name) => formatCategory(name)).join(', ')
-                }}
-                - {{ selectedVersion?.game_versions.join(', ') }})
+        <thead>
+          <tr class="header">
+            <th>{{ instance?.name }}</th>
+            <th>{{ project.title }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="content">
+            <td class="data">{{ instance?.loader }} {{ instance?.game_version }}</td>
+            <td>
+              <DropdownSelect
+                v-if="versions?.length > 1"
+                v-model="selectedVersion"
+                :options="versions"
+                placeholder="Select version"
+                name="Version select"
+                :display-name="
+                  (version) =>
+                    `${version?.name} (${version?.loaders
+                      .map((name) => formatCategory(name))
+                      .join(', ')} - ${version?.game_versions.join(', ')})`
+                "
+                render-up
+              />
+              <span v-else>
+                <span>
+                  {{ selectedVersion?.name }} ({{
+                    selectedVersion?.loaders.map((name) => formatCategory(name)).join(', ')
+                  }}
+                  - {{ selectedVersion?.game_versions.join(', ') }})
+                </span>
               </span>
-            </span>
-          </td>
-        </tr>
+            </td>
+          </tr>
+        </tbody>
       </table>
       <div class="button-group">
         <Button @click="() => incompatibleModal.hide()"><XIcon />Cancel</Button>

diff --git a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { NewModal } from '@modrinth/ui'
 import {
   ReportIcon,
   ModrinthIcon,
@@ -21,6 +20,7 @@ import { getVersion } from '@tauri-apps/api/app'
 import { version as getOsVersion, platform as getOsPlatform } from '@tauri-apps/plugin-os'
 import { useTheming } from '@/store/state'
 import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const themeStore = useTheming()
 
@@ -100,7 +100,7 @@ const osVersion = getOsVersion()
 </script>
 /
 <template>
-  <NewModal ref="modal">
+  <ModalWrapper ref="modal">
     <template #title>
       <span class="flex items-center gap-2 text-lg font-extrabold text-contrast">
         <SettingsIcon /> Settings
@@ -157,5 +157,5 @@ const osVersion = getOsVersion()
         <component :is="tabs[selectedTab].content" />
       </div>
     </div>
-  </NewModal>
+  </ModalWrapper>
 </template>