You've already forked AstralRinth
forked from didirus/AstralRinth
App redesign (#2946)
* Start of app redesign * format * continue progress * Content page nearly done * Fix recursion issues with content page * Fix update all alignment * Discover page progress * Settings progress * Removed unlocked-size hack that breaks web * Revamp project page, refactor web project page to share code with app, fixed loading bar, misc UI/UX enhancements, update ko-fi logo, update arrow icons, fix web issues caused by floating-vue migration, fix tooltip issues, update web tooltips, clean up web hydration issues * Ads + run prettier * Begin auth refactor, move common messages to ui lib, add i18n extraction to all apps, begin Library refactor * fix ads not hiding when plus log in * rev lockfile changes/conflicts * Fix sign in page * Add generated * (mostly) Data driven search * Fix search mobile issue * profile fixes * Project versions page, fix typescript on UI lib and misc fixes * Remove unused gallery component * Fix linkfunction err * Search filter controls at top, localization for locked filters * Fix provided filter names * Fix navigating from instance browse to main browse * Friends frontend (#2995) * Friends system frontend * (almost) finish frontend * finish friends, fix lint * Fix lint --------- Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com> * Refresh macOS app icon * Update web search UI more * Fix link opens * Fix frontend build --------- Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me> Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
This commit is contained in:
Prospector
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
import { ref, onUnmounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import RowDisplay from '@/components/RowDisplay.vue'
|
||||
import { list } from '@/helpers/profile.js'
|
||||
@@ -8,11 +8,6 @@ import { useBreadcrumbs } from '@/store/breadcrumbs'
|
||||
import { handleError } from '@/store/notifications.js'
|
||||
import dayjs from 'dayjs'
|
||||
import { get_search_results } from '@/helpers/cache.js'
|
||||
import { hide_ads_window } from '@/helpers/ads.js'
|
||||
|
||||
onMounted(() => {
|
||||
hide_ads_window(true)
|
||||
})
|
||||
|
||||
const featuredModpacks = ref({})
|
||||
const featuredMods = ref({})
|
||||
@@ -104,7 +99,8 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="p-6 flex flex-col gap-2">
|
||||
<h1 class="m-0 text-2xl">Welcome back!</h1>
|
||||
<RowDisplay
|
||||
v-if="total > 0"
|
||||
:instances="[
|
||||
@@ -132,13 +128,3 @@ onUnmounted(() => {
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,628 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import { LogOutIcon, LogInIcon, BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
|
||||
import { Card, Slider, DropdownSelect, Toggle, Button } from '@modrinth/ui'
|
||||
import { handleError, useTheming } from '@/store/state'
|
||||
import { get, set } from '@/helpers/settings'
|
||||
import { get_java_versions, get_max_memory, set_java_version } from '@/helpers/jre'
|
||||
import { get as getCreds, logout } from '@/helpers/mr_auth.js'
|
||||
import JavaSelector from '@/components/ui/JavaSelector.vue'
|
||||
import ModrinthLoginScreen from '@/components/ui/tutorial/ModrinthLoginScreen.vue'
|
||||
import { optOutAnalytics, optInAnalytics } from '@/helpers/analytics'
|
||||
import { open } from '@tauri-apps/plugin-dialog'
|
||||
import { getOS } from '@/helpers/utils.js'
|
||||
import { getVersion } from '@tauri-apps/api/app'
|
||||
import { get_user, purge_cache_types } from '@/helpers/cache.js'
|
||||
import { hide_ads_window } from '@/helpers/ads.js'
|
||||
import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
|
||||
|
||||
onMounted(() => {
|
||||
hide_ads_window(true)
|
||||
})
|
||||
|
||||
const pageOptions = ['Home', 'Library']
|
||||
|
||||
const themeStore = useTheming()
|
||||
|
||||
const version = await getVersion()
|
||||
|
||||
const accessSettings = async () => {
|
||||
const settings = await get()
|
||||
|
||||
settings.launchArgs = settings.extra_launch_args.join(' ')
|
||||
settings.envVars = settings.custom_env_vars.map((x) => x.join('=')).join(' ')
|
||||
|
||||
return settings
|
||||
}
|
||||
|
||||
const fetchSettings = await accessSettings().catch(handleError)
|
||||
|
||||
const settings = ref(fetchSettings)
|
||||
|
||||
const maxMemory = ref(Math.floor((await get_max_memory().catch(handleError)) / 1024))
|
||||
|
||||
watch(
|
||||
settings,
|
||||
async (oldSettings, newSettings) => {
|
||||
if (oldSettings.loaded_config_dir !== newSettings.loaded_config_dir) {
|
||||
return
|
||||
}
|
||||
|
||||
const setSettings = JSON.parse(JSON.stringify(newSettings))
|
||||
|
||||
if (setSettings.telemetry) {
|
||||
optInAnalytics()
|
||||
} else {
|
||||
optOutAnalytics()
|
||||
}
|
||||
|
||||
setSettings.extra_launch_args = setSettings.launchArgs.trim().split(/\s+/).filter(Boolean)
|
||||
setSettings.custom_env_vars = setSettings.envVars
|
||||
.trim()
|
||||
.split(/\s+/)
|
||||
.filter(Boolean)
|
||||
.map((x) => x.split('=').filter(Boolean))
|
||||
|
||||
if (!setSettings.hooks.pre_launch) {
|
||||
setSettings.hooks.pre_launch = null
|
||||
}
|
||||
if (!setSettings.hooks.wrapper) {
|
||||
setSettings.hooks.wrapper = null
|
||||
}
|
||||
if (!setSettings.hooks.post_exit) {
|
||||
setSettings.hooks.post_exit = null
|
||||
}
|
||||
|
||||
if (!setSettings.custom_dir) {
|
||||
setSettings.custom_dir = null
|
||||
}
|
||||
|
||||
await set(setSettings)
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
|
||||
const javaVersions = ref(await get_java_versions().catch(handleError))
|
||||
async function updateJavaVersion(version) {
|
||||
if (version?.path === '') {
|
||||
version.path = undefined
|
||||
}
|
||||
|
||||
if (version?.path) {
|
||||
version.path = version.path.replace('java.exe', 'javaw.exe')
|
||||
}
|
||||
|
||||
await set_java_version(version).catch(handleError)
|
||||
}
|
||||
|
||||
async function fetchCredentials() {
|
||||
const creds = await getCreds().catch(handleError)
|
||||
if (creds && creds.user_id) {
|
||||
creds.user = await get_user(creds.user_id).catch(handleError)
|
||||
}
|
||||
credentials.value = creds
|
||||
}
|
||||
|
||||
const credentials = ref()
|
||||
await fetchCredentials()
|
||||
|
||||
const loginScreenModal = ref()
|
||||
|
||||
async function logOut() {
|
||||
await logout().catch(handleError)
|
||||
await fetchCredentials()
|
||||
}
|
||||
|
||||
async function signInAfter() {
|
||||
await fetchCredentials()
|
||||
}
|
||||
|
||||
async function findLauncherDir() {
|
||||
const newDir = await open({
|
||||
multiple: false,
|
||||
directory: true,
|
||||
title: 'Select a new app directory',
|
||||
})
|
||||
|
||||
if (newDir) {
|
||||
settings.value.custom_dir = newDir
|
||||
}
|
||||
}
|
||||
|
||||
async function purgeCache() {
|
||||
await purge_cache_types([
|
||||
'project',
|
||||
'version',
|
||||
'user',
|
||||
'team',
|
||||
'organization',
|
||||
'loader_manifest',
|
||||
'minecraft_manifest',
|
||||
'categories',
|
||||
'report_types',
|
||||
'loaders',
|
||||
'game_versions',
|
||||
'donation_platforms',
|
||||
'file_update',
|
||||
'search_results',
|
||||
]).catch(handleError)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="settings-page">
|
||||
<Card>
|
||||
<div class="label">
|
||||
<h3>
|
||||
<span class="label__title size-card-header">General settings</span>
|
||||
</h3>
|
||||
</div>
|
||||
<ModrinthLoginScreen ref="loginScreenModal" :callback="signInAfter" />
|
||||
<div class="adjacent-input">
|
||||
<label for="sign-in">
|
||||
<span class="label__title">Manage account</span>
|
||||
<span v-if="credentials" class="label__description">
|
||||
You are currently logged in as {{ credentials.user.username }}.
|
||||
</span>
|
||||
<span v-else> Sign in to your Modrinth account. </span>
|
||||
</label>
|
||||
<button v-if="credentials" id="sign-in" class="btn" @click="logOut">
|
||||
<LogOutIcon />
|
||||
Sign out
|
||||
</button>
|
||||
<button v-else id="sign-in" class="btn" @click="$refs.loginScreenModal.show()">
|
||||
<LogInIcon />
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
<ConfirmModalWrapper
|
||||
ref="purgeCacheConfirmModal"
|
||||
title="Are you sure you want to purge the cache?"
|
||||
description="If you proceed, your entire cache will be purged. This may slow down the app temporarily."
|
||||
:has-to-type="false"
|
||||
proceed-label="Purge cache"
|
||||
@proceed="purgeCache"
|
||||
/>
|
||||
<div class="adjacent-input">
|
||||
<label for="purge-cache">
|
||||
<span class="label__title">App cache</span>
|
||||
<span class="label__description">
|
||||
The Modrinth app stores a cache of data to speed up loading. This can be purged to force
|
||||
the app to reload data. <br />
|
||||
This may slow down the app temporarily.
|
||||
</span>
|
||||
</label>
|
||||
<button id="purge-cache" class="btn" @click="$refs.purgeCacheConfirmModal.show()">
|
||||
<TrashIcon />
|
||||
Purge cache
|
||||
</button>
|
||||
</div>
|
||||
<label for="appDir">
|
||||
<span class="label__title">App directory</span>
|
||||
<span class="label__description">
|
||||
The directory where the launcher stores all of its files. Changes will be applied after
|
||||
restarting the launcher.
|
||||
</span>
|
||||
</label>
|
||||
<div class="app-directory">
|
||||
<div class="iconified-input">
|
||||
<BoxIcon />
|
||||
<input id="appDir" v-model="settings.custom_dir" type="text" class="input" />
|
||||
<Button class="r-btn" @click="findLauncherDir">
|
||||
<FolderSearchIcon />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="label">
|
||||
<h3>
|
||||
<span class="label__title size-card-header">Display</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="adjacent-input">
|
||||
<label for="theme">
|
||||
<span class="label__title">Color theme</span>
|
||||
<span class="label__description">Change the global launcher color theme.</span>
|
||||
</label>
|
||||
<DropdownSelect
|
||||
id="theme"
|
||||
name="Theme dropdown"
|
||||
:options="themeStore.themeOptions"
|
||||
:default-value="settings.theme"
|
||||
:model-value="settings.theme"
|
||||
class="theme-dropdown"
|
||||
@change="
|
||||
(e) => {
|
||||
themeStore.setThemeState(e.option.toLowerCase())
|
||||
settings.theme = themeStore.selectedTheme
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="adjacent-input">
|
||||
<label for="advanced-rendering">
|
||||
<span class="label__title">Advanced rendering</span>
|
||||
<span class="label__description">
|
||||
Enables advanced rendering such as blur effects that may cause performance issues
|
||||
without hardware-accelerated rendering.
|
||||
</span>
|
||||
</label>
|
||||
<Toggle
|
||||
id="advanced-rendering"
|
||||
:model-value="themeStore.advancedRendering"
|
||||
:checked="themeStore.advancedRendering"
|
||||
@update:model-value="
|
||||
(e) => {
|
||||
themeStore.advancedRendering = e
|
||||
settings.advanced_rendering = themeStore.advancedRendering
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="adjacent-input">
|
||||
<label for="minimize-launcher">
|
||||
<span class="label__title">Minimize launcher</span>
|
||||
<span class="label__description"
|
||||
>Minimize the launcher when a Minecraft process starts.</span
|
||||
>
|
||||
</label>
|
||||
<Toggle
|
||||
id="minimize-launcher"
|
||||
:model-value="settings.hide_on_process_start"
|
||||
:checked="settings.hide_on_process_start"
|
||||
@update:model-value="
|
||||
(e) => {
|
||||
settings.hide_on_process_start = e
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="getOS() != 'MacOS'" class="adjacent-input">
|
||||
<label for="native-decorations">
|
||||
<span class="label__title">Native decorations</span>
|
||||
<span class="label__description">Use system window frame (app restart required).</span>
|
||||
</label>
|
||||
<Toggle
|
||||
id="native-decorations"
|
||||
:model-value="settings.native_decorations"
|
||||
:checked="settings.native_decorations"
|
||||
@update:model-value="
|
||||
(e) => {
|
||||
settings.native_decorations = e
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="adjacent-input">
|
||||
<label for="opening-page">
|
||||
<span class="label__title">Default landing page</span>
|
||||
<span class="label__description">Change the page to which the launcher opens on.</span>
|
||||
</label>
|
||||
<DropdownSelect
|
||||
id="opening-page"
|
||||
name="Opening page dropdown"
|
||||
:options="pageOptions"
|
||||
:default-value="settings.default_page"
|
||||
:model-value="settings.default_page"
|
||||
class="opening-page"
|
||||
@change="
|
||||
(e) => {
|
||||
settings.default_page = e.option
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="label">
|
||||
<h3>
|
||||
<span class="label__title size-card-header">Resource management</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="adjacent-input">
|
||||
<label for="max-downloads">
|
||||
<span class="label__title">Maximum concurrent downloads</span>
|
||||
<span class="label__description">
|
||||
The maximum amount of files the launcher can download at the same time. Set this to a
|
||||
lower value if you have a poor internet connection. (app restart required to take
|
||||
effect)
|
||||
</span>
|
||||
</label>
|
||||
<Slider
|
||||
id="max-downloads"
|
||||
v-model="settings.max_concurrent_downloads"
|
||||
:min="1"
|
||||
:max="10"
|
||||
:step="1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="adjacent-input">
|
||||
<label for="max-writes">
|
||||
<span class="label__title">Maximum concurrent writes</span>
|
||||
<span class="label__description">
|
||||
The maximum amount of files the launcher can write to the disk at once. Set this to a
|
||||
lower value if you are frequently getting I/O errors. (app restart required to take
|
||||
effect)
|
||||
</span>
|
||||
</label>
|
||||
<Slider
|
||||
id="max-writes"
|
||||
v-model="settings.max_concurrent_writes"
|
||||
:min="1"
|
||||
:max="50"
|
||||
:step="1"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="label">
|
||||
<h3>
|
||||
<span class="label__title size-card-header">Privacy</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="adjacent-input">
|
||||
<label for="opt-out-analytics">
|
||||
<span class="label__title">Personalized ads</span>
|
||||
<span class="label__description">
|
||||
Modrinth's ad provider, Aditude, shows ads based on your preferences. By disabling this
|
||||
option, you opt out and ads will no longer be shown based on your interests.
|
||||
</span>
|
||||
</label>
|
||||
<Toggle
|
||||
id="opt-out-analytics"
|
||||
:model-value="settings.personalized_ads"
|
||||
:checked="settings.personalized_ads"
|
||||
@update:model-value="
|
||||
(e) => {
|
||||
settings.personalized_ads = e
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="adjacent-input">
|
||||
<label for="opt-out-analytics">
|
||||
<span class="label__title">Telemetry</span>
|
||||
<span class="label__description">
|
||||
Modrinth collects anonymized analytics and usage data to improve our user experience and
|
||||
customize your experience. By disabling this option, you opt out and your data will no
|
||||
longer be collected.
|
||||
</span>
|
||||
</label>
|
||||
<Toggle
|
||||
id="opt-out-analytics"
|
||||
:model-value="settings.telemetry"
|
||||
:checked="settings.telemetry"
|
||||
@update:model-value="
|
||||
(e) => {
|
||||
settings.telemetry = e
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="adjacent-input">
|
||||
<label for="disable-discord-rpc">
|
||||
<span class="label__title">Discord RPC</span>
|
||||
<span class="label__description">
|
||||
Manages the Discord Rich Presence integration. Disabling this will cause 'Modrinth' to
|
||||
no longer show up as a game or app you are using on your Discord profile. This does not
|
||||
disable any instance-specific Discord Rich Presence integrations, such as those added by
|
||||
mods. (app restart required to take effect)
|
||||
</span>
|
||||
</label>
|
||||
<Toggle
|
||||
id="disable-discord-rpc"
|
||||
v-model="settings.discord_rpc"
|
||||
:checked="settings.discord_rpc"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="label">
|
||||
<h3>
|
||||
<span class="label__title size-card-header">Java settings</span>
|
||||
</h3>
|
||||
</div>
|
||||
<template v-for="javaVersion in [21, 17, 8]" :key="`java-${javaVersion}`">
|
||||
<label :for="'java-' + javaVersion">
|
||||
<span class="label__title">Java {{ javaVersion }} location</span>
|
||||
</label>
|
||||
<JavaSelector
|
||||
:id="'java-selector-' + javaVersion"
|
||||
v-model="javaVersions[javaVersion]"
|
||||
:version="javaVersion"
|
||||
@update:model-value="updateJavaVersion"
|
||||
/>
|
||||
</template>
|
||||
<hr class="card-divider" />
|
||||
<label for="java-args">
|
||||
<span class="label__title">Java arguments</span>
|
||||
</label>
|
||||
<input
|
||||
id="java-args"
|
||||
v-model="settings.launchArgs"
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
class="installation-input"
|
||||
placeholder="Enter java arguments..."
|
||||
/>
|
||||
<label for="env-vars">
|
||||
<span class="label__title">Environmental variables</span>
|
||||
</label>
|
||||
<input
|
||||
id="env-vars"
|
||||
v-model="settings.envVars"
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
class="installation-input"
|
||||
placeholder="Enter environmental variables..."
|
||||
/>
|
||||
<hr class="card-divider" />
|
||||
<div class="adjacent-input">
|
||||
<label for="max-memory">
|
||||
<span class="label__title">Java memory</span>
|
||||
<span class="label__description">
|
||||
The memory allocated to each instance when it is ran.
|
||||
</span>
|
||||
</label>
|
||||
<Slider
|
||||
id="max-memory"
|
||||
v-model="settings.memory.maximum"
|
||||
:min="8"
|
||||
:max="maxMemory"
|
||||
:step="64"
|
||||
unit="MB"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="label">
|
||||
<h3>
|
||||
<span class="label__title size-card-header">Hooks</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="adjacent-input">
|
||||
<label for="pre-launch">
|
||||
<span class="label__title">Pre launch</span>
|
||||
<span class="label__description"> Ran before the instance is launched. </span>
|
||||
</label>
|
||||
<input
|
||||
id="pre-launch"
|
||||
v-model="settings.hooks.pre_launch"
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
placeholder="Enter pre-launch command..."
|
||||
/>
|
||||
</div>
|
||||
<div class="adjacent-input">
|
||||
<label for="wrapper">
|
||||
<span class="label__title">Wrapper</span>
|
||||
<span class="label__description"> Wrapper command for launching Minecraft. </span>
|
||||
</label>
|
||||
<input
|
||||
id="wrapper"
|
||||
v-model="settings.hooks.wrapper"
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
placeholder="Enter wrapper command..."
|
||||
/>
|
||||
</div>
|
||||
<div class="adjacent-input">
|
||||
<label for="post-exit">
|
||||
<span class="label__title">Post exit</span>
|
||||
<span class="label__description"> Ran after the game closes. </span>
|
||||
</label>
|
||||
<input
|
||||
id="post-exit"
|
||||
v-model="settings.hooks.post_exit"
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
placeholder="Enter post-exit command..."
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="label">
|
||||
<h3>
|
||||
<span class="label__title size-card-header">Window size</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="adjacent-input">
|
||||
<label for="fullscreen">
|
||||
<span class="label__title">Fullscreen</span>
|
||||
<span class="label__description">
|
||||
Overwrites the options.txt file to start in full screen when launched.
|
||||
</span>
|
||||
</label>
|
||||
<Toggle
|
||||
id="fullscreen"
|
||||
:model-value="settings.force_fullscreen"
|
||||
:checked="settings.force_fullscreen"
|
||||
@update:model-value="
|
||||
(e) => {
|
||||
settings.force_fullscreen = e
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="adjacent-input">
|
||||
<label for="width">
|
||||
<span class="label__title">Width</span>
|
||||
<span class="label__description"> The width of the game window when launched. </span>
|
||||
</label>
|
||||
<input
|
||||
id="width"
|
||||
v-model="settings.game_resolution[0]"
|
||||
:disabled="settings.force_fullscreen"
|
||||
autocomplete="off"
|
||||
type="number"
|
||||
placeholder="Enter width..."
|
||||
/>
|
||||
</div>
|
||||
<div class="adjacent-input">
|
||||
<label for="height">
|
||||
<span class="label__title">Height</span>
|
||||
<span class="label__description"> The height of the game window when launched. </span>
|
||||
</label>
|
||||
<input
|
||||
id="height"
|
||||
v-model="settings.game_resolution[1]"
|
||||
:disabled="settings.force_fullscreen"
|
||||
autocomplete="off"
|
||||
type="number"
|
||||
class="input"
|
||||
placeholder="Enter height..."
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="label">
|
||||
<h3>
|
||||
<span class="label__title size-card-header">About</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<span class="label__title">App version</span>
|
||||
<span class="label__description">Modrinth App v{{ version }} </span>
|
||||
</label>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.settings-page {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.installation-input {
|
||||
width: 100% !important;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.theme-dropdown {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.app-directory {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--gap-sm);
|
||||
|
||||
.iconified-input {
|
||||
flex-grow: 1;
|
||||
|
||||
input {
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,4 @@
|
||||
import Index from './Index.vue'
|
||||
import Browse from './Browse.vue'
|
||||
import Library from './Library.vue'
|
||||
import Settings from './Settings.vue'
|
||||
|
||||
export { Index, Browse, Library, Settings }
|
||||
export { Index, Browse }
|
||||
|
||||
@@ -1,85 +1,107 @@
|
||||
<template>
|
||||
<div class="instance-container">
|
||||
<div class="side-cards pb-4" @scroll="$refs.promo.scroll()">
|
||||
<Card class="instance-card" @contextmenu.prevent.stop="handleRightClick">
|
||||
<Avatar size="md" :src="instance.icon_path ? convertFileSrc(instance.icon_path) : null" />
|
||||
<div class="instance-info">
|
||||
<h2 class="name">{{ instance.name }}</h2>
|
||||
<span class="metadata"> {{ instance.loader }} {{ instance.game_version }} </span>
|
||||
<div
|
||||
class="p-6 pr-2 pb-4"
|
||||
@contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
|
||||
>
|
||||
<ExportModal ref="exportModal" :instance="instance" />
|
||||
<ContentPageHeader>
|
||||
<template #icon>
|
||||
<Avatar :src="icon" :alt="instance.name" size="96px" />
|
||||
</template>
|
||||
<template #title>
|
||||
{{ instance.name }}
|
||||
</template>
|
||||
<template #summary> </template>
|
||||
<template #stats>
|
||||
<div class="flex items-center gap-2 font-semibold transform capitalize">
|
||||
<GameIcon class="h-6 w-6 text-secondary" />
|
||||
{{ instance.loader }} {{ instance.game_version }}
|
||||
</div>
|
||||
<span class="button-group">
|
||||
<Button v-if="instance.install_stage !== 'installed'" disabled class="instance-button">
|
||||
Installing...
|
||||
</Button>
|
||||
<Button
|
||||
v-else-if="playing === true"
|
||||
color="danger"
|
||||
class="instance-button"
|
||||
@click="stopInstance('InstancePage')"
|
||||
>
|
||||
<StopCircleIcon />
|
||||
Stop
|
||||
</Button>
|
||||
<Button
|
||||
v-else-if="playing === false && loading === false"
|
||||
color="primary"
|
||||
class="instance-button"
|
||||
@click="startInstance('InstancePage')"
|
||||
>
|
||||
<PlayIcon />
|
||||
Play
|
||||
</Button>
|
||||
<Button
|
||||
v-else-if="loading === true && playing === false"
|
||||
disabled
|
||||
class="instance-button"
|
||||
>
|
||||
Loading...
|
||||
</Button>
|
||||
<Button
|
||||
v-tooltip="'Open instance folder'"
|
||||
class="instance-button"
|
||||
@click="showProfileInFolder(instance.path)"
|
||||
>
|
||||
<FolderOpenIcon />
|
||||
Folder
|
||||
</Button>
|
||||
</span>
|
||||
<hr class="card-divider" />
|
||||
<div class="pages-list">
|
||||
<RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/`" class="btn">
|
||||
<BoxIcon />
|
||||
Content
|
||||
</RouterLink>
|
||||
<RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/logs`" class="btn">
|
||||
<FileIcon />
|
||||
Logs
|
||||
</RouterLink>
|
||||
<RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/options`" class="btn">
|
||||
<SettingsIcon />
|
||||
Options
|
||||
</RouterLink>
|
||||
</div>
|
||||
</Card>
|
||||
<PromotionWrapper ref="promo" class="mt-4" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<RouterView v-slot="{ Component }">
|
||||
<template v-if="Component">
|
||||
<Suspense @pending="loadingBar.startLoading()" @resolve="loadingBar.stopLoading()">
|
||||
<component
|
||||
:is="Component"
|
||||
:instance="instance"
|
||||
:options="options"
|
||||
:offline="offline"
|
||||
:playing="playing"
|
||||
:versions="modrinthVersions"
|
||||
:installed="instance.install_stage !== 'installed'"
|
||||
></component>
|
||||
</Suspense>
|
||||
</template>
|
||||
<template #actions>
|
||||
<ButtonStyled v-if="instance.install_stage !== 'installed'" color="brand" size="large">
|
||||
<button disabled>Installing...</button>
|
||||
</ButtonStyled>
|
||||
<template v-else>
|
||||
<div class="flex gap-2">
|
||||
<ButtonStyled v-if="playing === true" color="red" size="large">
|
||||
<button @click="stopInstance('InstancePage')">
|
||||
<StopCircleIcon />
|
||||
Stop
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled
|
||||
v-else-if="playing === false && loading === false"
|
||||
color="brand"
|
||||
size="large"
|
||||
>
|
||||
<button @click="startInstance('InstancePage')">
|
||||
<PlayIcon />
|
||||
Play
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled
|
||||
v-else-if="loading === true && playing === false"
|
||||
color="brand"
|
||||
size="large"
|
||||
>
|
||||
<button disabled>Loading...</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled size="large" circular>
|
||||
<RouterLink
|
||||
v-tooltip="'Instance settings'"
|
||||
:to="`/instance/${encodeURIComponent(route.params.id)}/options`"
|
||||
>
|
||||
<SettingsIcon />
|
||||
</RouterLink>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled size="large" type="transparent" circular>
|
||||
<OverflowMenu
|
||||
:options="[
|
||||
{
|
||||
id: 'open-folder',
|
||||
action: () => showProfileInFolder(instance.path),
|
||||
},
|
||||
{
|
||||
id: 'export-mrpack',
|
||||
action: () => $refs.exportModal.show(),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<MoreVerticalIcon />
|
||||
<template #share-instance> <UserPlusIcon /> Share instance </template>
|
||||
<template #host-a-server> <ServerIcon /> Create a server </template>
|
||||
<template #open-folder> <FolderOpenIcon /> Open folder </template>
|
||||
<template #export-mrpack> <PackageIcon /> Export modpack </template>
|
||||
</OverflowMenu>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</template>
|
||||
</RouterView>
|
||||
</div>
|
||||
</template>
|
||||
</ContentPageHeader>
|
||||
</div>
|
||||
<div class="px-6">
|
||||
<NavTabs :links="tabs" />
|
||||
</div>
|
||||
<div class="p-6 pt-4">
|
||||
<RouterView v-slot="{ Component }">
|
||||
<template v-if="Component">
|
||||
<Suspense @pending="loadingBar.startLoading()" @resolve="loadingBar.stopLoading()">
|
||||
<component
|
||||
:is="Component"
|
||||
:instance="instance"
|
||||
:options="options"
|
||||
:offline="offline"
|
||||
:playing="playing"
|
||||
:versions="modrinthVersions"
|
||||
:installed="instance.install_stage !== 'installed'"
|
||||
></component>
|
||||
<template #fallback>
|
||||
<LoadingIndicator />
|
||||
</template>
|
||||
</Suspense>
|
||||
</template>
|
||||
</RouterView>
|
||||
</div>
|
||||
<ContextMenu ref="options" @option-clicked="handleOptionsClick">
|
||||
<template #play> <PlayIcon /> Play </template>
|
||||
@@ -104,11 +126,18 @@
|
||||
</ContextMenu>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Button, Avatar, Card } from '@modrinth/ui'
|
||||
import {
|
||||
BoxIcon,
|
||||
Avatar,
|
||||
ContentPageHeader,
|
||||
ButtonStyled,
|
||||
OverflowMenu,
|
||||
LoadingIndicator,
|
||||
} from '@modrinth/ui'
|
||||
import {
|
||||
UserPlusIcon,
|
||||
ServerIcon,
|
||||
PackageIcon,
|
||||
SettingsIcon,
|
||||
FileIcon,
|
||||
PlayIcon,
|
||||
StopCircleIcon,
|
||||
EditIcon,
|
||||
@@ -122,21 +151,24 @@ import {
|
||||
XIcon,
|
||||
CheckCircleIcon,
|
||||
UpdatedIcon,
|
||||
MoreVerticalIcon,
|
||||
GameIcon,
|
||||
} from '@modrinth/assets'
|
||||
import { get, kill, run } from '@/helpers/profile'
|
||||
import { get_by_profile_path } from '@/helpers/process'
|
||||
import { process_listener, profile_listener } from '@/helpers/events'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ref, onUnmounted } from 'vue'
|
||||
import { ref, onUnmounted, computed } from 'vue'
|
||||
import { handleError, useBreadcrumbs, useLoading } from '@/store/state'
|
||||
import { showProfileInFolder } from '@/helpers/utils.js'
|
||||
import ContextMenu from '@/components/ui/ContextMenu.vue'
|
||||
import NavTabs from '@/components/ui/NavTabs.vue'
|
||||
import { trackEvent } from '@/helpers/analytics'
|
||||
import { convertFileSrc } from '@tauri-apps/api/core'
|
||||
import { handleSevereError } from '@/store/error.js'
|
||||
import { get_project, get_version_many } from '@/helpers/cache.js'
|
||||
import dayjs from 'dayjs'
|
||||
import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
|
||||
import ExportModal from '@/components/ui/ExportModal.vue'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
@@ -145,6 +177,17 @@ const breadcrumbs = useBreadcrumbs()
|
||||
|
||||
const instance = ref(await get(route.params.id).catch(handleError))
|
||||
|
||||
const tabs = computed(() => [
|
||||
{
|
||||
label: 'Content',
|
||||
href: `/instance/${encodeURIComponent(route.params.id)}`,
|
||||
},
|
||||
{
|
||||
label: 'Logs',
|
||||
href: `/instance/${encodeURIComponent(route.params.id)}/logs`,
|
||||
},
|
||||
])
|
||||
|
||||
breadcrumbs.setName(
|
||||
'Instance',
|
||||
instance.value.name.length > 40
|
||||
@@ -300,6 +343,10 @@ const unlistenProcesses = await process_listener((e) => {
|
||||
if (e.event === 'finished' && e.profile_path_id === route.params.id) playing.value = false
|
||||
})
|
||||
|
||||
const icon = computed(() =>
|
||||
instance.value.icon_path ? convertFileSrc(instance.value.icon_path) : null,
|
||||
)
|
||||
|
||||
onUnmounted(() => {
|
||||
unlistenProcesses()
|
||||
unlistenProfiles()
|
||||
|
||||
@@ -1,331 +1,227 @@
|
||||
<template>
|
||||
<Card v-if="projects.length > 0" class="mod-card">
|
||||
<div class="dropdown-input">
|
||||
<DropdownSelect
|
||||
v-model="selectedProjectType"
|
||||
:options="Object.keys(selectableProjectTypes)"
|
||||
default-value="All"
|
||||
name="project-type-dropdown"
|
||||
color="primary"
|
||||
/>
|
||||
<div class="iconified-input">
|
||||
<template v-if="projects.length > 0">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="iconified-input flex-grow">
|
||||
<SearchIcon />
|
||||
<input
|
||||
v-model="searchFilter"
|
||||
type="text"
|
||||
:placeholder="`Search ${search.length} ${(['All', 'Other'].includes(selectedProjectType)
|
||||
? 'projects'
|
||||
: selectedProjectType.toLowerCase()
|
||||
).slice(0, search.length === 1 ? -1 : 64)}...`"
|
||||
class="text-input"
|
||||
:placeholder="`Search content...`"
|
||||
class="text-input search-input"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<Button class="r-btn" @click="() => (searchFilter = '')">
|
||||
<XIcon />
|
||||
</Button>
|
||||
</div>
|
||||
<AddContentButton :instance="instance" />
|
||||
</div>
|
||||
<Button
|
||||
v-tooltip="'Refresh projects'"
|
||||
icon-only
|
||||
:disabled="refreshingProjects"
|
||||
@click="refreshProjects"
|
||||
>
|
||||
<UpdatedIcon />
|
||||
</Button>
|
||||
<Button
|
||||
v-if="canUpdatePack"
|
||||
:disabled="installing"
|
||||
color="secondary"
|
||||
@click="modpackVersionModal.show()"
|
||||
>
|
||||
<DownloadIcon />
|
||||
{{ installing ? 'Updating' : 'Update modpack' }}
|
||||
</Button>
|
||||
<Button v-else-if="!isPackLocked" @click="exportModal.show()">
|
||||
<PackageIcon />
|
||||
Export modpack
|
||||
</Button>
|
||||
<Button v-if="!isPackLocked && projects.some((m) => m.outdated)" @click="updateAll">
|
||||
<DownloadIcon />
|
||||
Update all
|
||||
</Button>
|
||||
<AddContentButton v-if="!isPackLocked" :instance="instance" />
|
||||
</Card>
|
||||
<Pagination
|
||||
v-if="projects.length > 0"
|
||||
:page="currentPage"
|
||||
:count="Math.ceil(search.length / 20)"
|
||||
class="pagination-before"
|
||||
:link-function="(page) => `?page=${page}`"
|
||||
@switch-page="switchPage"
|
||||
/>
|
||||
<Card v-if="projects.length > 0" class="list-card">
|
||||
<div class="table">
|
||||
<div class="table-row table-head" :class="{ 'show-options': selected.length > 0 }">
|
||||
<div class="table-cell table-text">
|
||||
<Checkbox v-model="selectAll" class="select-checkbox" />
|
||||
</div>
|
||||
<div v-if="selected.length === 0" class="table-cell table-text name-cell actions-cell">
|
||||
<Button class="transparent" @click="sortProjects('Name')">
|
||||
Name
|
||||
<DropdownIcon v-if="sortColumn === 'Name'" :class="{ down: ascending }" />
|
||||
</Button>
|
||||
</div>
|
||||
<div v-if="selected.length === 0" class="table-cell table-text version">
|
||||
<Button class="transparent" @click="sortProjects('Version')">
|
||||
Version
|
||||
<DropdownIcon v-if="sortColumn === 'Version'" :class="{ down: ascending }" />
|
||||
</Button>
|
||||
</div>
|
||||
<div v-if="selected.length === 0" class="table-cell table-text actions-cell">
|
||||
<Button class="transparent" @click="sortProjects('Enabled')">
|
||||
Actions
|
||||
<DropdownIcon v-if="sortColumn === 'Enabled'" :class="{ down: ascending }" />
|
||||
</Button>
|
||||
</div>
|
||||
<div v-else class="options table-cell name-cell">
|
||||
<div>
|
||||
<Button
|
||||
class="transparent share"
|
||||
@click="() => (showingOptions = !showingOptions)"
|
||||
@mouseover="selectedOption = 'Share'"
|
||||
>
|
||||
<MenuIcon :class="{ open: showingOptions }" />
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
class="transparent share"
|
||||
@click="shareNames()"
|
||||
@mouseover="selectedOption = 'Share'"
|
||||
>
|
||||
<ShareIcon />
|
||||
Share
|
||||
</Button>
|
||||
<div v-tooltip="isPackLocked ? 'Unlock this instance to remove mods' : ''">
|
||||
<Button
|
||||
:disabled="isPackLocked"
|
||||
class="transparent trash"
|
||||
@click="deleteWarning.show()"
|
||||
@mouseover="selectedOption = 'Delete'"
|
||||
>
|
||||
<TrashIcon />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
<div v-tooltip="isPackLocked ? 'Unlock this instance to update mods' : ''">
|
||||
<Button
|
||||
:disabled="isPackLocked || offline"
|
||||
class="transparent update"
|
||||
@click="updateSelected()"
|
||||
@mouseover="selectedOption = 'Update'"
|
||||
>
|
||||
<UpdatedIcon />
|
||||
Update
|
||||
</Button>
|
||||
</div>
|
||||
<div v-tooltip="isPackLocked ? 'Unlock this instance to toggle mods' : ''">
|
||||
<Button
|
||||
:disabled="isPackLocked"
|
||||
class="transparent"
|
||||
@click="toggleSelected()"
|
||||
@mouseover="selectedOption = 'Toggle'"
|
||||
>
|
||||
<ToggleIcon />
|
||||
Toggle
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showingOptions && selected.length > 0" class="more-box">
|
||||
<section v-if="selectedOption === 'Share'" class="options">
|
||||
<Button class="transparent" @click="shareNames()">
|
||||
<TextInputIcon />
|
||||
Share names
|
||||
</Button>
|
||||
<Button class="transparent" @click="shareUrls()">
|
||||
<GlobeIcon />
|
||||
Share URLs
|
||||
</Button>
|
||||
<Button class="transparent" @click="shareFileNames()">
|
||||
<FileIcon />
|
||||
Share file names
|
||||
</Button>
|
||||
<Button class="transparent" @click="shareMarkdown()">
|
||||
<CodeIcon />
|
||||
Share as markdown
|
||||
</Button>
|
||||
</section>
|
||||
<section v-if="selectedOption === 'Delete'" class="options">
|
||||
<Button class="transparent" @click="deleteWarning.show()">
|
||||
<TrashIcon />
|
||||
Delete selected
|
||||
</Button>
|
||||
<Button class="transparent" @click="deleteDisabledWarning.show()">
|
||||
<ToggleIcon />
|
||||
Delete disabled
|
||||
</Button>
|
||||
</section>
|
||||
<section v-if="selectedOption === 'Update'" class="options">
|
||||
<Button class="transparent" :disabled="offline" @click="updateAll()">
|
||||
<UpdatedIcon />
|
||||
Update all
|
||||
</Button>
|
||||
<Button class="transparent" @click="selectUpdatable()">
|
||||
<CheckIcon />
|
||||
Select updatable
|
||||
</Button>
|
||||
</section>
|
||||
<section v-if="selectedOption === 'Toggle'" class="options">
|
||||
<Button class="transparent" @click="enableAll()">
|
||||
<CheckIcon />
|
||||
Toggle on
|
||||
</Button>
|
||||
<Button class="transparent" @click="disableAll()">
|
||||
<XIcon />
|
||||
Toggle off
|
||||
</Button>
|
||||
<Button class="transparent" @click="hideShowAll()">
|
||||
<EyeIcon v-if="hideNonSelected" />
|
||||
<EyeOffIcon v-else />
|
||||
{{ hideNonSelected ? 'Show' : 'Hide' }} untoggled
|
||||
</Button>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
v-for="mod in search.slice((currentPage - 1) * 20, currentPage * 20)"
|
||||
:key="mod.file_name"
|
||||
class="table-row"
|
||||
@contextmenu.prevent.stop="(c) => handleRightClick(c, mod)"
|
||||
<div v-if="filterOptions.length > 1" class="flex flex-wrap gap-1 items-center pb-4">
|
||||
<FilterIcon class="text-secondary h-5 w-5 mr-1" />
|
||||
<button
|
||||
v-for="filter in filterOptions"
|
||||
:key="filter"
|
||||
:class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-brand-highlight text-brand' : 'bg-bg-raised text-secondary'}`"
|
||||
@click="toggleArray(selectedFilters, filter.id)"
|
||||
>
|
||||
<div class="table-cell table-text checkbox">
|
||||
<Checkbox
|
||||
:model-value="selectionMap.get(mod.path)"
|
||||
class="select-checkbox"
|
||||
@update:model-value="(newValue) => selectionMap.set(mod.path, newValue)"
|
||||
/>
|
||||
</div>
|
||||
<div class="table-cell table-text name-cell">
|
||||
<router-link
|
||||
v-if="mod.slug"
|
||||
:to="{ path: `/project/${mod.slug}/`, query: { i: props.instance.path } }"
|
||||
:disabled="offline"
|
||||
class="mod-content"
|
||||
{{ filter.formattedName }}
|
||||
</button>
|
||||
</div>
|
||||
<ContentListPanel
|
||||
v-model="selectedFiles"
|
||||
:locked="isPackLocked"
|
||||
:items="
|
||||
search.map((x) => {
|
||||
const item: ContentItem<any> = {
|
||||
path: x.path,
|
||||
disabled: x.disabled,
|
||||
filename: x.file_name,
|
||||
icon: x.icon,
|
||||
title: x.name,
|
||||
data: x,
|
||||
}
|
||||
|
||||
if (x.version) {
|
||||
item.version = x.version
|
||||
item.versionId = x.version
|
||||
}
|
||||
|
||||
if (x.id) {
|
||||
item.project = {
|
||||
id: x.id,
|
||||
link: { path: `/project/${x.id}`, query: { i: props.instance.path } },
|
||||
linkProps: {},
|
||||
}
|
||||
}
|
||||
|
||||
if (x.author) {
|
||||
item.creator = {
|
||||
name: x.author,
|
||||
type: 'user',
|
||||
id: x.author,
|
||||
link: 'https://modrinth.com/user/' + x.author,
|
||||
linkProps: { target: '_blank' },
|
||||
}
|
||||
}
|
||||
|
||||
return item
|
||||
})
|
||||
"
|
||||
:sort-column="sortColumn"
|
||||
:sort-ascending="ascending"
|
||||
:update-sort="sortProjects"
|
||||
>
|
||||
<template v-if="selectedProjects.length > 0" #headers>
|
||||
<div class="flex gap-2">
|
||||
<ButtonStyled
|
||||
v-if="!isPackLocked && selectedProjects.some((m) => m.outdated)"
|
||||
color="brand"
|
||||
color-fill="text"
|
||||
hover-color-fill="text"
|
||||
>
|
||||
<Avatar :src="mod.icon" />
|
||||
<div class="mod-text">
|
||||
<div class="title">{{ mod.name }}</div>
|
||||
<span v-if="mod.author" class="no-wrap">by {{ mod.author }}</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<div v-else class="mod-content">
|
||||
<Avatar :src="mod.icon" />
|
||||
<span v-tooltip="`${mod.name}`" class="title">{{ mod.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-cell table-text version">
|
||||
<span v-tooltip="`${mod.version}`">{{ mod.version }}</span>
|
||||
</div>
|
||||
<div class="table-cell table-text manage">
|
||||
<div v-tooltip="isPackLocked ? 'Unlock this instance to remove mods.' : 'Remove project'">
|
||||
<Button :disabled="isPackLocked" icon-only @click="removeMod(mod)">
|
||||
<TrashIcon />
|
||||
</Button>
|
||||
</div>
|
||||
<AnimatedLogo v-if="mod.updating" class="btn icon-only updating-indicator" />
|
||||
<div
|
||||
v-else
|
||||
v-tooltip="isPackLocked ? 'Unlock this instance to update mods.' : 'Update project'"
|
||||
>
|
||||
<Button
|
||||
:disabled="!mod.outdated || offline || isPackLocked"
|
||||
icon-only
|
||||
@click="updateProject(mod)"
|
||||
<button @click="updateSelected()"><DownloadIcon /> Update</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled>
|
||||
<OverflowMenu
|
||||
:options="[
|
||||
{
|
||||
id: 'share-names',
|
||||
action: () => shareNames(),
|
||||
},
|
||||
{
|
||||
id: 'share-file-names',
|
||||
action: () => shareFileNames(),
|
||||
},
|
||||
{
|
||||
id: 'share-urls',
|
||||
action: () => shareUrls(),
|
||||
},
|
||||
{
|
||||
id: 'share-markdown',
|
||||
action: () => shareMarkdown(),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<UpdatedIcon v-if="mod.outdated" />
|
||||
<CheckIcon v-else />
|
||||
</Button>
|
||||
</div>
|
||||
<div v-tooltip="isPackLocked ? 'Unlock this instance to toggle mods.' : ''">
|
||||
<input
|
||||
id="switch-1"
|
||||
:disabled="isPackLocked"
|
||||
autocomplete="off"
|
||||
type="checkbox"
|
||||
class="switch stylized-toggle"
|
||||
:checked="!mod.disabled"
|
||||
@change="toggleDisableMod(mod)"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
v-tooltip="`Show ${mod.file_name}`"
|
||||
icon-only
|
||||
@click="highlightModInProfile(instance.path, mod.path)"
|
||||
>
|
||||
<FolderOpenIcon />
|
||||
</Button>
|
||||
<ShareIcon /> Share <DropdownIcon />
|
||||
<template #share-names> <TextInputIcon /> Project names </template>
|
||||
<template #share-file-names> <FileIcon /> File names </template>
|
||||
<template #share-urls> <LinkIcon /> Project links </template>
|
||||
<template #share-markdown> <CodeIcon /> Markdown links </template>
|
||||
</OverflowMenu>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled v-if="selectedProjects.some((m) => m.disabled)">
|
||||
<button @click="enableAll()"><CheckCircleIcon /> Enable</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled v-if="selectedProjects.some((m) => !m.disabled)">
|
||||
<button @click="disableAll()"><SlashIcon /> Disable</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled color="red">
|
||||
<button @click="deleteSelected()"><TrashIcon /> Remove</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<div v-else class="empty-prompt">
|
||||
<div class="empty-icon">
|
||||
<AddProjectImage />
|
||||
</div>
|
||||
<h3>No projects found</h3>
|
||||
<p class="empty-subtitle">Add a project to get started</p>
|
||||
<AddContentButton :instance="instance" />
|
||||
</div>
|
||||
<Pagination
|
||||
v-if="projects.length > 0"
|
||||
:page="currentPage"
|
||||
:count="Math.ceil(search.length / 20)"
|
||||
class="pagination-after"
|
||||
:link-function="(page) => `?page=${page}`"
|
||||
@switch-page="switchPage"
|
||||
/>
|
||||
<ModalWrapper ref="deleteWarning" header="Are you sure?">
|
||||
<div class="modal-body">
|
||||
<div class="markdown-body">
|
||||
<p>
|
||||
Are you sure you want to remove
|
||||
<strong>{{ functionValues.length }} project(s)</strong> from {{ instance.name }}?
|
||||
<br />
|
||||
This action <strong>cannot</strong> be undone.
|
||||
</p>
|
||||
</div>
|
||||
<div class="button-group push-right">
|
||||
<Button @click="deleteWarning.hide()"> Cancel </Button>
|
||||
<Button color="danger" @click="deleteSelected">
|
||||
<TrashIcon />
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalWrapper>
|
||||
<ModalWrapper ref="deleteDisabledWarning" header="Are you sure?">
|
||||
<div class="modal-body">
|
||||
<div class="markdown-body">
|
||||
<p>
|
||||
Are you sure you want to remove
|
||||
<strong
|
||||
>{{ Array.from(projects.values()).filter((x) => x.disabled).length }} disabled
|
||||
project(s)</strong
|
||||
</template>
|
||||
<template #header-actions>
|
||||
<ButtonStyled type="transparent" color-fill="text" hover-color-fill="text">
|
||||
<button :disabled="refreshingProjects" class="w-max" @click="refreshProjects">
|
||||
<UpdatedIcon />
|
||||
Refresh
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled
|
||||
v-if="!isPackLocked && projects.some((m) => (m as any).outdated)"
|
||||
type="transparent"
|
||||
color="brand"
|
||||
color-fill="text"
|
||||
hover-color-fill="text"
|
||||
@click="updateAll"
|
||||
>
|
||||
<button class="w-max"><DownloadIcon /> Update all</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled
|
||||
v-if="canUpdatePack"
|
||||
type="transparent"
|
||||
color="brand"
|
||||
color-fill="text"
|
||||
hover-color-fill="text"
|
||||
>
|
||||
<button class="w-max" :disabled="installing" @click="modpackVersionModal.show()">
|
||||
<DownloadIcon /> Update pack
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
<template #actions="{ item }">
|
||||
<ButtonStyled
|
||||
v-if="!isPackLocked && (item.data as any).outdated"
|
||||
type="transparent"
|
||||
color="brand"
|
||||
circular
|
||||
>
|
||||
<button
|
||||
v-tooltip="`Update`"
|
||||
:disabled="(item.data as any).updating"
|
||||
@click="updateProject(item.data)"
|
||||
>
|
||||
from {{ instance.name }}?
|
||||
<br />
|
||||
This action <strong>cannot</strong> be undone.
|
||||
</p>
|
||||
</div>
|
||||
<div class="button-group push-right">
|
||||
<Button @click="deleteDisabledWarning.hide()"> Cancel </Button>
|
||||
<Button color="danger" @click="deleteDisabled">
|
||||
<TrashIcon />
|
||||
Remove
|
||||
</Button>
|
||||
<DownloadIcon />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<div v-else class="w-[36px]"></div>
|
||||
<ButtonStyled type="transparent" circular>
|
||||
<button
|
||||
v-tooltip="item.disabled ? `Enable` : `Disable`"
|
||||
@click="toggleDisableMod(item.data)"
|
||||
>
|
||||
<CheckCircleIcon v-if="item.disabled" />
|
||||
<SlashIcon v-else />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled type="transparent" circular>
|
||||
<OverflowMenu
|
||||
:options="[
|
||||
{
|
||||
id: 'show-file',
|
||||
action: () => highlightModInProfile(instance.path, item.path),
|
||||
},
|
||||
{
|
||||
id: 'copy-link',
|
||||
shown: item.project !== undefined,
|
||||
action: () => toggleDisableMod(item.data),
|
||||
},
|
||||
{
|
||||
divider: true,
|
||||
},
|
||||
{
|
||||
id: 'remove',
|
||||
color: 'red',
|
||||
action: () => removeMod(item),
|
||||
},
|
||||
]"
|
||||
direction="left"
|
||||
>
|
||||
<MoreVerticalIcon />
|
||||
<template #show-file> <ExternalIcon /> Show file </template>
|
||||
<template #copy-link> <ClipboardCopyIcon /> Copy link </template>
|
||||
<template v-if="item.disabled" #toggle> <CheckCircleIcon /> Enable </template>
|
||||
<template v-else #toggle> <SlashIcon /> Disable </template>
|
||||
<template #remove> <TrashIcon /> Remove </template>
|
||||
</OverflowMenu>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
</ContentListPanel>
|
||||
</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">
|
||||
<div class="flex items-center gap-6 w-[32rem] mx-auto">
|
||||
<img src="@/assets/sad-modrinth-bot.webp" class="h-24" />
|
||||
<span class="text-contrast font-bold text-xl"
|
||||
>You haven't added any content to this instance yet.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</ModalWrapper>
|
||||
<div class="top-box-divider"></div>
|
||||
<div class="flex items-center gap-6 py-4">
|
||||
<AddContentButton :instance="instance" />
|
||||
</div>
|
||||
</div>
|
||||
<ShareModalWrapper
|
||||
ref="shareModal"
|
||||
share-title="Sharing modpack content"
|
||||
@@ -340,34 +236,30 @@
|
||||
:versions="props.versions"
|
||||
/>
|
||||
</template>
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ExternalIcon,
|
||||
LinkIcon,
|
||||
ClipboardCopyIcon,
|
||||
TrashIcon,
|
||||
CheckIcon,
|
||||
SearchIcon,
|
||||
UpdatedIcon,
|
||||
FolderOpenIcon,
|
||||
XIcon,
|
||||
ShareIcon,
|
||||
DropdownIcon,
|
||||
GlobeIcon,
|
||||
FileIcon,
|
||||
EyeIcon,
|
||||
EyeOffIcon,
|
||||
CodeIcon,
|
||||
DownloadIcon,
|
||||
FilterIcon,
|
||||
MoreVerticalIcon,
|
||||
CheckCircleIcon,
|
||||
SlashIcon,
|
||||
} from '@modrinth/assets'
|
||||
import {
|
||||
Pagination,
|
||||
DropdownSelect,
|
||||
Checkbox,
|
||||
AnimatedLogo,
|
||||
Avatar,
|
||||
Button,
|
||||
Card,
|
||||
} from '@modrinth/ui'
|
||||
import { Button, ButtonStyled, ContentListPanel, OverflowMenu } from '@modrinth/ui'
|
||||
import { formatProjectType } from '@modrinth/utils'
|
||||
import type { ComputedRef } from 'vue'
|
||||
import { computed, onUnmounted, ref, watch } from 'vue'
|
||||
import { useVIntl, defineMessages } from '@vintl/vintl'
|
||||
import {
|
||||
add_project_from_path,
|
||||
get_projects,
|
||||
@@ -379,7 +271,7 @@ import {
|
||||
import { handleError } from '@/store/notifications.js'
|
||||
import { trackEvent } from '@/helpers/analytics'
|
||||
import { highlightModInProfile } from '@/helpers/utils.js'
|
||||
import { MenuIcon, ToggleIcon, TextInputIcon, AddProjectImage, PackageIcon } from '@/assets/icons'
|
||||
import { TextInputIcon } from '@/assets/icons'
|
||||
import ExportModal from '@/components/ui/ExportModal.vue'
|
||||
import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
|
||||
import AddContentButton from '@/components/ui/AddContentButton.vue'
|
||||
@@ -390,9 +282,9 @@ import {
|
||||
get_version_many,
|
||||
} from '@/helpers/cache.js'
|
||||
import { profile_listener } from '@/helpers/events.js'
|
||||
import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
|
||||
import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
|
||||
import { getCurrentWebview } from '@tauri-apps/api/webview'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
const props = defineProps({
|
||||
instance: {
|
||||
@@ -433,7 +325,6 @@ onUnmounted(() => {
|
||||
unlistenProfiles()
|
||||
})
|
||||
|
||||
const showingOptions = ref(false)
|
||||
const isPackLocked = computed(() => {
|
||||
return props.instance.linked_data && props.instance.linked_data.locked
|
||||
})
|
||||
@@ -444,9 +335,14 @@ const canUpdatePack = computed(() => {
|
||||
const exportModal = ref(null)
|
||||
|
||||
const projects = ref([])
|
||||
const selectedFiles = ref([])
|
||||
const selectedProjects = computed(() =>
|
||||
projects.value.filter((x) => selectedFiles.value.includes(x.file_name)),
|
||||
)
|
||||
|
||||
const selectionMap = ref(new Map())
|
||||
|
||||
const initProjects = async (cacheBehaviour) => {
|
||||
const initProjects = async (cacheBehaviour?) => {
|
||||
const newProjects = []
|
||||
|
||||
const profileProjects = await get_projects(props.instance.path, cacheBehaviour)
|
||||
@@ -504,6 +400,7 @@ const initProjects = async (cacheBehaviour) => {
|
||||
icon: project.icon_url,
|
||||
disabled: file.file_name.endsWith('.disabled'),
|
||||
updateVersion: file.update_version_id,
|
||||
updated: dayjs(version.date_published),
|
||||
outdated: !!file.update_version_id,
|
||||
project_type: project.project_type,
|
||||
id: project.id,
|
||||
@@ -545,19 +442,77 @@ await initProjects()
|
||||
const modpackVersionModal = ref(null)
|
||||
const installing = computed(() => props.instance.install_stage !== 'installed')
|
||||
|
||||
const vintl = useVIntl()
|
||||
const { formatMessage } = vintl
|
||||
|
||||
type FilterOption = {
|
||||
id: string
|
||||
formattedName: string
|
||||
}
|
||||
|
||||
const messages = defineMessages({
|
||||
updatesAvailableFilter: {
|
||||
id: 'instance.filter.updates-available',
|
||||
defaultMessage: 'Updates available',
|
||||
},
|
||||
})
|
||||
|
||||
const filterOptions: ComputedRef<FilterOption[]> = computed(() => {
|
||||
const options: FilterOption[] = []
|
||||
|
||||
const frequency = projects.value.reduce((map, item) => {
|
||||
map[item.project_type] = (map[item.project_type] || 0) + 1
|
||||
return map
|
||||
}, {})
|
||||
|
||||
const types = Object.keys(frequency).sort((a, b) => frequency[b] - frequency[a])
|
||||
|
||||
types.forEach((type) => {
|
||||
options.push({
|
||||
id: type,
|
||||
formattedName: formatProjectType(type) + 's',
|
||||
})
|
||||
})
|
||||
|
||||
if (!isPackLocked.value && projects.value.some((m) => m.outdated)) {
|
||||
options.push({
|
||||
id: 'updates',
|
||||
formattedName: formatMessage(messages.updatesAvailableFilter),
|
||||
})
|
||||
}
|
||||
|
||||
return options
|
||||
})
|
||||
|
||||
const selectedFilters = ref([])
|
||||
const filteredProjects = computed(() => {
|
||||
const updatesFilter = selectedFilters.value.includes('updates')
|
||||
|
||||
const typeFilters = selectedFilters.value.filter((filter) => filter !== 'updates')
|
||||
|
||||
return projects.value.filter((project) => {
|
||||
return (
|
||||
(typeFilters.length === 0 || typeFilters.includes(project.project_type)) &&
|
||||
(!updatesFilter || project.outdated)
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
function toggleArray(array, value) {
|
||||
if (array.includes(value)) {
|
||||
array.splice(array.indexOf(value), 1)
|
||||
} else {
|
||||
array.push(value)
|
||||
}
|
||||
}
|
||||
|
||||
const searchFilter = ref('')
|
||||
const selectAll = ref(false)
|
||||
const selectedProjectType = ref('All')
|
||||
const deleteWarning = ref(null)
|
||||
const deleteDisabledWarning = ref(null)
|
||||
const hideNonSelected = ref(false)
|
||||
const selectedOption = ref('Share')
|
||||
const shareModal = ref(null)
|
||||
const ascending = ref(true)
|
||||
const sortColumn = ref('Name')
|
||||
const currentPage = ref(1)
|
||||
|
||||
watch([searchFilter, selectedProjectType], () => (currentPage.value = 1))
|
||||
|
||||
const selected = computed(() =>
|
||||
Array.from(selectionMap.value)
|
||||
@@ -570,7 +525,7 @@ const selected = computed(() =>
|
||||
)
|
||||
|
||||
const functionValues = computed(() =>
|
||||
selected.value.length > 0 ? selected.value : Array.from(projects.value.values()),
|
||||
selectedProjects.value.length > 0 ? selectedProjects.value : Array.from(projects.value.values()),
|
||||
)
|
||||
|
||||
const selectableProjectTypes = computed(() => {
|
||||
@@ -586,7 +541,7 @@ const selectableProjectTypes = computed(() => {
|
||||
|
||||
const search = computed(() => {
|
||||
const projectType = selectableProjectTypes.value[selectedProjectType.value]
|
||||
const filtered = projects.value
|
||||
const filtered = filteredProjects.value
|
||||
.filter((mod) => {
|
||||
return (
|
||||
mod.name.toLowerCase().includes(searchFilter.value.toLowerCase()) &&
|
||||
@@ -600,43 +555,19 @@ const search = computed(() => {
|
||||
return true
|
||||
})
|
||||
|
||||
return updateSort(filtered)
|
||||
})
|
||||
|
||||
const updateSort = (projects) => {
|
||||
switch (sortColumn.value) {
|
||||
case 'Version':
|
||||
return projects.slice().sort((a, b) => {
|
||||
if (a.version < b.version) {
|
||||
return ascending.value ? -1 : 1
|
||||
}
|
||||
if (a.version > b.version) {
|
||||
case 'Updated':
|
||||
return filtered.slice().sort((a, b) => {
|
||||
if (a.updated < b.updated) {
|
||||
return ascending.value ? 1 : -1
|
||||
}
|
||||
return 0
|
||||
})
|
||||
case 'Author':
|
||||
return projects.slice().sort((a, b) => {
|
||||
if (a.author < b.author) {
|
||||
return ascending.value ? -1 : 1
|
||||
}
|
||||
if (a.author > b.author) {
|
||||
return ascending.value ? 1 : -1
|
||||
}
|
||||
return 0
|
||||
})
|
||||
case 'Enabled':
|
||||
return projects.slice().sort((a, b) => {
|
||||
if (a.disabled && !b.disabled) {
|
||||
return ascending.value ? 1 : -1
|
||||
}
|
||||
if (!a.disabled && b.disabled) {
|
||||
if (a.updated > b.updated) {
|
||||
return ascending.value ? -1 : 1
|
||||
}
|
||||
return 0
|
||||
})
|
||||
default:
|
||||
return projects.slice().sort((a, b) => {
|
||||
return filtered.slice().sort((a, b) => {
|
||||
if (a.name < b.name) {
|
||||
return ascending.value ? -1 : 1
|
||||
}
|
||||
@@ -646,7 +577,7 @@ const updateSort = (projects) => {
|
||||
return 0
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const sortProjects = (filter) => {
|
||||
if (sortColumn.value === filter) {
|
||||
@@ -690,14 +621,6 @@ const updateAll = async () => {
|
||||
})
|
||||
}
|
||||
|
||||
const selectUpdatable = () => {
|
||||
for (const project of projects.value) {
|
||||
if (project.outdated) {
|
||||
selectionMap.value.set(project.path, true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const updateProject = async (mod) => {
|
||||
mod.updating = true
|
||||
await new Promise((resolve) => setTimeout(resolve, 0))
|
||||
@@ -753,6 +676,7 @@ const toggleDisableMod = async (mod) => {
|
||||
}
|
||||
|
||||
const removeMod = async (mod) => {
|
||||
console.log(mod)
|
||||
await remove_project(props.instance.path, mod.path).catch(handleError)
|
||||
projects.value = projects.value.filter((x) => mod.path !== x.path)
|
||||
|
||||
@@ -771,20 +695,9 @@ const deleteSelected = async () => {
|
||||
}
|
||||
|
||||
projects.value = projects.value.filter((x) => !x.selected)
|
||||
deleteWarning.value.hide()
|
||||
}
|
||||
|
||||
const deleteDisabled = async () => {
|
||||
for (const project of Array.of(projects.value.values().filter((x) => x.disabled))) {
|
||||
await remove_project(props.instance.path, project.path).catch(handleError)
|
||||
}
|
||||
|
||||
projects.value = projects.value.filter((x) => !x.selected)
|
||||
deleteDisabledWarning.value.hide()
|
||||
}
|
||||
|
||||
const shareNames = async () => {
|
||||
console.log(functionValues.value)
|
||||
await shareModal.value.show(functionValues.value.map((x) => x.name).join('\n'))
|
||||
}
|
||||
|
||||
@@ -814,12 +727,6 @@ const shareMarkdown = async () => {
|
||||
)
|
||||
}
|
||||
|
||||
const toggleSelected = async () => {
|
||||
for (const project of functionValues.value) {
|
||||
await toggleDisableMod(project, !project.disabled)
|
||||
}
|
||||
}
|
||||
|
||||
const updateSelected = async () => {
|
||||
const promises = []
|
||||
for (const project of functionValues.value) {
|
||||
@@ -829,35 +736,23 @@ const updateSelected = async () => {
|
||||
}
|
||||
|
||||
const enableAll = async () => {
|
||||
const promises = []
|
||||
for (const project of functionValues.value) {
|
||||
if (project.disabled) {
|
||||
await toggleDisableMod(project, false)
|
||||
promises.push(toggleDisableMod(project))
|
||||
}
|
||||
}
|
||||
await Promise.all(promises).catch(handleError)
|
||||
}
|
||||
|
||||
const disableAll = async () => {
|
||||
const promises = []
|
||||
for (const project of functionValues.value) {
|
||||
if (!project.disabled) {
|
||||
await toggleDisableMod(project, false)
|
||||
promises.push(toggleDisableMod(project))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const hideShowAll = async () => {
|
||||
hideNonSelected.value = !hideNonSelected.value
|
||||
}
|
||||
|
||||
const handleRightClick = (event, mod) => {
|
||||
if (mod.slug && mod.project_type) {
|
||||
props.options.showMenu(
|
||||
event,
|
||||
{
|
||||
link: `https://modrinth.com/${mod.project_type}/${mod.slug}`,
|
||||
},
|
||||
[{ name: 'open_link' }, { name: 'copy_link' }],
|
||||
)
|
||||
}
|
||||
await Promise.all(promises).catch(handleError)
|
||||
}
|
||||
|
||||
watch(selectAll, () => {
|
||||
@@ -868,10 +763,6 @@ watch(selectAll, () => {
|
||||
}
|
||||
})
|
||||
|
||||
const switchPage = (page) => {
|
||||
currentPage.value = page
|
||||
}
|
||||
|
||||
const refreshingProjects = ref(false)
|
||||
async function refreshProjects() {
|
||||
refreshingProjects.value = true
|
||||
@@ -1173,16 +1064,6 @@ onUnmounted(() => {
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.updating-indicator {
|
||||
height: 2.25rem !important;
|
||||
width: 2.25rem !important;
|
||||
|
||||
svg {
|
||||
height: 1.25rem !important;
|
||||
width: 1.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select-checkbox {
|
||||
button.checkbox {
|
||||
border: none;
|
||||
@@ -1190,13 +1071,23 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-input {
|
||||
.selected {
|
||||
height: 2.5rem;
|
||||
}
|
||||
.search-input {
|
||||
min-height: 2.25rem;
|
||||
background-color: var(--color-raised-bg);
|
||||
}
|
||||
|
||||
.pagination-after {
|
||||
margin-bottom: 5rem;
|
||||
.top-box {
|
||||
background-image: radial-gradient(
|
||||
50% 100% at 50% 100%,
|
||||
var(--color-brand-highlight) 10%,
|
||||
#ffffff00 100%
|
||||
);
|
||||
}
|
||||
|
||||
.top-box-divider {
|
||||
background-image: linear-gradient(90deg, #ffffff00 0%, var(--color-brand) 50%, #ffffff00 100%);
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -897,7 +897,6 @@ async function saveGvLoaderEdits() {
|
||||
.change-versions-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
|
||||
:deep(.animated-dropdown .options) {
|
||||
|
||||
17
apps/app-frontend/src/pages/library/Custom.vue
Normal file
17
apps/app-frontend/src/pages/library/Custom.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<script setup>
|
||||
import GridDisplay from '@/components/GridDisplay.vue'
|
||||
|
||||
defineProps({
|
||||
instances: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<GridDisplay
|
||||
v-if="instances.length > 0"
|
||||
label="Instances"
|
||||
:instances="instances.filter((i) => !i.linked_data)"
|
||||
/>
|
||||
</template>
|
||||
17
apps/app-frontend/src/pages/library/Downloaded.vue
Normal file
17
apps/app-frontend/src/pages/library/Downloaded.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<script setup>
|
||||
import GridDisplay from '@/components/GridDisplay.vue'
|
||||
|
||||
defineProps({
|
||||
instances: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<GridDisplay
|
||||
v-if="instances.length > 0"
|
||||
label="Instances"
|
||||
:instances="instances.filter((i) => i.linked_data)"
|
||||
/>
|
||||
</template>
|
||||
@@ -1,20 +1,15 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, ref, shallowRef } from 'vue'
|
||||
import GridDisplay from '@/components/GridDisplay.vue'
|
||||
import { onUnmounted, ref, shallowRef } from 'vue'
|
||||
import { list } from '@/helpers/profile.js'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useBreadcrumbs } from '@/store/breadcrumbs'
|
||||
import { useBreadcrumbs } from '@/store/breadcrumbs.js'
|
||||
import { profile_listener } from '@/helpers/events.js'
|
||||
import { handleError } from '@/store/notifications.js'
|
||||
import { Button } from '@modrinth/ui'
|
||||
import { PlusIcon } from '@modrinth/assets'
|
||||
import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
|
||||
import { NewInstanceImage } from '@/assets/icons'
|
||||
import { hide_ads_window } from '@/helpers/ads.js'
|
||||
|
||||
onMounted(() => {
|
||||
hide_ads_window(true)
|
||||
})
|
||||
import NavTabs from '@/components/ui/NavTabs.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const breadcrumbs = useBreadcrumbs()
|
||||
@@ -40,17 +35,31 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<GridDisplay v-if="instances.length > 0" label="Instances" :instances="instances" />
|
||||
<div v-else class="no-instance">
|
||||
<div class="icon">
|
||||
<NewInstanceImage />
|
||||
<div class="p-6 flex flex-col gap-3">
|
||||
<h1 class="m-0 text-2xl">Library</h1>
|
||||
<NavTabs
|
||||
:links="[
|
||||
{ label: 'All instances', href: `/library` },
|
||||
{ label: 'Downloaded', href: `/library/downloaded` },
|
||||
{ label: 'Custom', href: `/library/custom` },
|
||||
{ label: 'Shared with me', href: `/library/shared`, shown: false },
|
||||
{ label: 'Saved', href: `/library/saved`, shown: false },
|
||||
]"
|
||||
/>
|
||||
<template v-if="instances.length > 0">
|
||||
<RouterView :instances="instances" />
|
||||
</template>
|
||||
<div v-else class="no-instance">
|
||||
<div class="icon">
|
||||
<NewInstanceImage />
|
||||
</div>
|
||||
<h3>No instances found</h3>
|
||||
<Button color="primary" :disabled="offline" @click="$refs.installationModal.show()">
|
||||
<PlusIcon />
|
||||
Create new instance
|
||||
</Button>
|
||||
<InstanceCreationModal ref="installationModal" />
|
||||
</div>
|
||||
<h3>No instances found</h3>
|
||||
<Button color="primary" :disabled="offline" @click="$refs.installationModal.show()">
|
||||
<PlusIcon />
|
||||
Create new instance
|
||||
</Button>
|
||||
<InstanceCreationModal ref="installationModal" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
13
apps/app-frontend/src/pages/library/Overview.vue
Normal file
13
apps/app-frontend/src/pages/library/Overview.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<script setup>
|
||||
import GridDisplay from '@/components/GridDisplay.vue'
|
||||
|
||||
defineProps({
|
||||
instances: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<GridDisplay v-if="instances.length > 0" label="Instances" :instances="instances" />
|
||||
</template>
|
||||
6
apps/app-frontend/src/pages/library/index.js
Normal file
6
apps/app-frontend/src/pages/library/index.js
Normal file
@@ -0,0 +1,6 @@
|
||||
import Index from './Index.vue'
|
||||
import Overview from './Overview.vue'
|
||||
import Downloaded from './Downloaded.vue'
|
||||
import Custom from './Custom.vue'
|
||||
|
||||
export { Index, Overview, Downloaded, Custom }
|
||||
@@ -1,12 +1,11 @@
|
||||
<template>
|
||||
<Card>
|
||||
<div class="markdown-body" v-html="renderHighlightedString(project?.body ?? '')" />
|
||||
<ProjectPageDescription :description="project.body" />
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { renderHighlightedString } from '@modrinth/utils'
|
||||
import { Card } from '@modrinth/ui'
|
||||
import { Card, ProjectPageDescription } from '@modrinth/ui'
|
||||
|
||||
defineProps({
|
||||
project: {
|
||||
@@ -21,22 +20,3 @@ export default {
|
||||
name: 'Description',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.markdown-body {
|
||||
:deep(table) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
:deep(hr),
|
||||
:deep(h1),
|
||||
:deep(h2) {
|
||||
max-width: max(60rem, 90%);
|
||||
}
|
||||
|
||||
:deep(ul),
|
||||
:deep(ol) {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -198,7 +198,7 @@ document.addEventListener('keypress', keyListener)
|
||||
|
||||
.expanded-image-modal {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
z-index: 11;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
@@ -1,248 +1,151 @@
|
||||
<template>
|
||||
<div class="root-container">
|
||||
<div v-if="data" class="project-sidebar" @scroll="$refs.promo.scroll()">
|
||||
<Card v-if="instance" class="small-instance">
|
||||
<router-link class="instance" :to="`/instance/${encodeURIComponent(instance.path)}`">
|
||||
<Avatar
|
||||
:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
|
||||
:alt="instance.name"
|
||||
size="sm"
|
||||
/>
|
||||
<div class="small-instance_info">
|
||||
<span class="title">{{
|
||||
instance.name.length > 20 ? instance.name.substring(0, 20) + '...' : instance.name
|
||||
}}</span>
|
||||
<span>
|
||||
{{ instance.loader.charAt(0).toUpperCase() + instance.loader.slice(1) }}
|
||||
{{ instance.game_version }}
|
||||
</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</Card>
|
||||
<Card class="sidebar-card" @contextmenu.prevent.stop="handleRightClick">
|
||||
<Avatar size="md" :src="data.icon_url" />
|
||||
<div class="instance-info">
|
||||
<h2 class="name">{{ data.title }}</h2>
|
||||
{{ data.description }}
|
||||
</div>
|
||||
<Categories
|
||||
class="tags"
|
||||
:categories="
|
||||
categories.filter(
|
||||
(cat) => data.categories.includes(cat.name) && cat.project_type === 'mod',
|
||||
)
|
||||
"
|
||||
type="ignored"
|
||||
>
|
||||
<EnvironmentIndicator
|
||||
:client-side="data.client_side"
|
||||
:server-side="data.server_side"
|
||||
:type="data.project_type"
|
||||
/>
|
||||
</Categories>
|
||||
<hr class="card-divider" />
|
||||
<div class="button-group">
|
||||
<Button
|
||||
color="primary"
|
||||
class="instance-button"
|
||||
:disabled="installed === true || installing === true"
|
||||
@click="install(null)"
|
||||
>
|
||||
<DownloadIcon v-if="!installed && !installing" />
|
||||
<CheckIcon v-else-if="installed" />
|
||||
{{ installing ? 'Installing...' : installed ? 'Installed' : 'Install' }}
|
||||
</Button>
|
||||
<a
|
||||
:href="`https://modrinth.com/${data.project_type}/${data.slug}`"
|
||||
rel="external"
|
||||
class="btn"
|
||||
>
|
||||
<ExternalIcon />
|
||||
Site
|
||||
</a>
|
||||
</div>
|
||||
</Card>
|
||||
<PromotionWrapper ref="promo" />
|
||||
<Card class="sidebar-card">
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<DownloadIcon aria-hidden="true" />
|
||||
<p>
|
||||
<strong>{{ formatNumber(data.downloads) }}</strong>
|
||||
<span class="stat-label"> download<span v-if="data.downloads !== '1'">s</span></span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<HeartIcon aria-hidden="true" />
|
||||
<p>
|
||||
<strong>{{ formatNumber(data.followers) }}</strong>
|
||||
<span class="stat-label"> follower<span v-if="data.followers !== '1'">s</span></span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="stat date">
|
||||
<CalendarIcon aria-hidden="true" />
|
||||
<span
|
||||
><span class="date-label">Created </span> {{ dayjs(data.published).fromNow() }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="stat date">
|
||||
<UpdatedIcon aria-hidden="true" />
|
||||
<span
|
||||
><span class="date-label">Updated </span> {{ dayjs(data.updated).fromNow() }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="card-divider" />
|
||||
<div class="button-group">
|
||||
<Button class="instance-button" disabled>
|
||||
<ReportIcon />
|
||||
Report
|
||||
</Button>
|
||||
<Button class="instance-button" disabled>
|
||||
<HeartIcon />
|
||||
Follow
|
||||
</Button>
|
||||
</div>
|
||||
<hr class="card-divider" />
|
||||
<div class="links">
|
||||
<a
|
||||
v-if="data.issues_url"
|
||||
:href="data.issues_url"
|
||||
class="title"
|
||||
rel="noopener nofollow ugc external"
|
||||
>
|
||||
<IssuesIcon aria-hidden="true" />
|
||||
<span>Issues</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="data.source_url"
|
||||
:href="data.source_url"
|
||||
class="title"
|
||||
rel="noopener nofollow ugc external"
|
||||
>
|
||||
<CodeIcon aria-hidden="true" />
|
||||
<span>Source</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="data.wiki_url"
|
||||
:href="data.wiki_url"
|
||||
class="title"
|
||||
rel="noopener nofollow ugc external"
|
||||
>
|
||||
<WikiIcon aria-hidden="true" />
|
||||
<span>Wiki</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="data.discord_url"
|
||||
:href="data.discord_url"
|
||||
class="title"
|
||||
rel="noopener nofollow ugc external"
|
||||
>
|
||||
<DiscordIcon aria-hidden="true" />
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
<a
|
||||
v-for="(donation, index) in data.donation_urls"
|
||||
:key="index"
|
||||
:href="donation.url"
|
||||
rel="noopener nofollow ugc external"
|
||||
>
|
||||
<BuyMeACoffeeIcon v-if="donation.id === 'bmac'" aria-hidden="true" />
|
||||
<PatreonIcon v-else-if="donation.id === 'patreon'" aria-hidden="true" />
|
||||
<KoFiIcon v-else-if="donation.id === 'ko-fi'" aria-hidden="true" />
|
||||
<PaypalIcon v-else-if="donation.id === 'paypal'" aria-hidden="true" />
|
||||
<OpenCollectiveIcon v-else-if="donation.id === 'open-collective'" aria-hidden="true" />
|
||||
<HeartIcon v-else-if="donation.id === 'github'" />
|
||||
<CoinsIcon v-else />
|
||||
<span v-if="donation.id === 'bmac'">Buy Me a Coffee</span>
|
||||
<span v-else-if="donation.id === 'patreon'">Patreon</span>
|
||||
<span v-else-if="donation.id === 'paypal'">PayPal</span>
|
||||
<span v-else-if="donation.id === 'ko-fi'">Ko-fi</span>
|
||||
<span v-else-if="donation.id === 'github'">GitHub Sponsors</span>
|
||||
<span v-else>Donate</span>
|
||||
</a>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div v-if="data" class="content-container">
|
||||
<Card class="tabs">
|
||||
<NavRow
|
||||
v-if="data.gallery.length > 0"
|
||||
<div>
|
||||
<Teleport to="#sidebar-teleport-target">
|
||||
<ProjectSidebarCompatibility
|
||||
:project="data"
|
||||
:tags="{ loaders: allLoaders, gameVersions: allGameVersions }"
|
||||
class="project-sidebar-section"
|
||||
/>
|
||||
<ProjectSidebarLinks link-target="_blank" :project="data" class="project-sidebar-section" />
|
||||
<ProjectSidebarCreators
|
||||
:organization="null"
|
||||
:members="members"
|
||||
:org-link="(slug) => `https://modrinth.com/organization/${slug}`"
|
||||
:user-link="(username) => `https://modrinth.com/user/${username}`"
|
||||
link-target="_blank"
|
||||
class="project-sidebar-section"
|
||||
/>
|
||||
<ProjectSidebarDetails
|
||||
:project="data"
|
||||
:has-versions="versions.length > 0"
|
||||
:link-target="`_blank`"
|
||||
class="project-sidebar-section"
|
||||
/>
|
||||
</Teleport>
|
||||
<div class="flex flex-col gap-4 p-6">
|
||||
<InstanceIndicator v-if="instance" :instance="instance" />
|
||||
<template v-if="data">
|
||||
<Teleport v-if="themeStore.featureFlag_projectBackground" to="#background-teleport-target">
|
||||
<ProjectBackgroundGradient :project="data" />
|
||||
</Teleport>
|
||||
<ProjectHeader :project="data">
|
||||
<template #actions>
|
||||
<ButtonStyled size="large" color="brand">
|
||||
<button
|
||||
v-tooltip="installed ? `This project is already installed` : null"
|
||||
:disabled="installed || installing"
|
||||
@click="install(null)"
|
||||
>
|
||||
<DownloadIcon v-if="!installed && !installing" />
|
||||
<CheckIcon v-else-if="installed" />
|
||||
{{ installing ? 'Installing...' : installed ? 'Installed' : 'Install' }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled size="large" circular type="transparent">
|
||||
<OverflowMenu
|
||||
:tooltip="`More options`"
|
||||
:options="[
|
||||
{
|
||||
id: 'follow',
|
||||
disabled: true,
|
||||
tooltip: 'Coming soon',
|
||||
action: () => {},
|
||||
},
|
||||
{
|
||||
id: 'save',
|
||||
disabled: true,
|
||||
tooltip: 'Coming soon',
|
||||
action: () => {},
|
||||
},
|
||||
{
|
||||
id: 'open-in-browser',
|
||||
link: `https://modrinth.com/${data.project_type}/${data.slug}`,
|
||||
external: true,
|
||||
},
|
||||
{
|
||||
divider: true,
|
||||
},
|
||||
{
|
||||
id: 'report',
|
||||
color: 'red',
|
||||
hoverFilled: true,
|
||||
link: `https://modrinth.com/report?item=project&itemID=${data.id}`,
|
||||
},
|
||||
]"
|
||||
aria-label="More options"
|
||||
>
|
||||
<MoreVerticalIcon aria-hidden="true" />
|
||||
<template #open-in-browser> <ExternalIcon /> Open in browser </template>
|
||||
<template #follow> <HeartIcon /> Follow </template>
|
||||
<template #save> <BookmarkIcon /> Save </template>
|
||||
<template #report> <ReportIcon /> Report </template>
|
||||
</OverflowMenu>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
</ProjectHeader>
|
||||
<NavTabs
|
||||
:links="[
|
||||
{
|
||||
label: 'Description',
|
||||
href: `/project/${$route.params.id}/`,
|
||||
href: `/project/${$route.params.id}`,
|
||||
},
|
||||
{
|
||||
label: 'Versions',
|
||||
href: `/project/${$route.params.id}/versions`,
|
||||
subpages: ['version'],
|
||||
},
|
||||
{
|
||||
label: 'Gallery',
|
||||
href: `/project/${$route.params.id}/gallery`,
|
||||
shown: data.gallery.length > 0,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<NavRow
|
||||
v-else
|
||||
:links="[
|
||||
{
|
||||
label: 'Description',
|
||||
href: `/project/${$route.params.id}/`,
|
||||
},
|
||||
{
|
||||
label: 'Versions',
|
||||
href: `/project/${$route.params.id}/versions`,
|
||||
},
|
||||
]"
|
||||
<RouterView
|
||||
:project="data"
|
||||
:versions="versions"
|
||||
:members="members"
|
||||
:instance="instance"
|
||||
:install="install"
|
||||
:installed="installed"
|
||||
:installing="installing"
|
||||
:installed-version="installedVersion"
|
||||
/>
|
||||
</Card>
|
||||
<RouterView
|
||||
:project="data"
|
||||
:versions="versions"
|
||||
:members="members"
|
||||
:instance="instance"
|
||||
:install="install"
|
||||
:installed="installed"
|
||||
:installing="installing"
|
||||
:installed-version="installedVersion"
|
||||
/>
|
||||
</template>
|
||||
<template v-else> Project data coult not be loaded. </template>
|
||||
</div>
|
||||
<ContextMenu ref="options" @option-clicked="handleOptionsClick">
|
||||
<template #install> <DownloadIcon /> Install </template>
|
||||
<template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
|
||||
<template #copy_link> <ClipboardCopyIcon /> Copy link </template>
|
||||
</ContextMenu>
|
||||
</div>
|
||||
<ContextMenu ref="options" @option-clicked="handleOptionsClick">
|
||||
<template #install> <DownloadIcon /> Install </template>
|
||||
<template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
|
||||
<template #copy_link> <ClipboardCopyIcon /> Copy link </template>
|
||||
</ContextMenu>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
BookmarkIcon,
|
||||
MoreVerticalIcon,
|
||||
DownloadIcon,
|
||||
ReportIcon,
|
||||
HeartIcon,
|
||||
UpdatedIcon,
|
||||
CalendarIcon,
|
||||
IssuesIcon,
|
||||
WikiIcon,
|
||||
CoinsIcon,
|
||||
CodeIcon,
|
||||
ExternalIcon,
|
||||
CheckIcon,
|
||||
GlobeIcon,
|
||||
ClipboardCopyIcon,
|
||||
} from '@modrinth/assets'
|
||||
import { Categories, EnvironmentIndicator, Card, Avatar, Button, NavRow } from '@modrinth/ui'
|
||||
import { formatNumber } from '@modrinth/utils'
|
||||
import {
|
||||
BuyMeACoffeeIcon,
|
||||
DiscordIcon,
|
||||
PatreonIcon,
|
||||
PaypalIcon,
|
||||
KoFiIcon,
|
||||
OpenCollectiveIcon,
|
||||
} from '@/assets/external'
|
||||
import { get_categories } from '@/helpers/tags'
|
||||
ProjectHeader,
|
||||
ProjectSidebarCompatibility,
|
||||
ButtonStyled,
|
||||
OverflowMenu,
|
||||
ProjectSidebarLinks,
|
||||
ProjectSidebarCreators,
|
||||
ProjectSidebarDetails,
|
||||
ProjectBackgroundGradient,
|
||||
} from '@modrinth/ui'
|
||||
|
||||
import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
|
||||
import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile'
|
||||
import dayjs from 'dayjs'
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
@@ -250,16 +153,18 @@ import { useRoute } from 'vue-router'
|
||||
import { ref, shallowRef, watch } from 'vue'
|
||||
import { useBreadcrumbs } from '@/store/breadcrumbs'
|
||||
import { handleError } from '@/store/notifications.js'
|
||||
import { convertFileSrc } from '@tauri-apps/api/core'
|
||||
import ContextMenu from '@/components/ui/ContextMenu.vue'
|
||||
import { install as installVersion } from '@/store/install.js'
|
||||
import { get_project, get_team, get_version_many } from '@/helpers/cache.js'
|
||||
import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
|
||||
import NavTabs from '@/components/ui/NavTabs.vue'
|
||||
import { useTheming } from '@/store/state.js'
|
||||
import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
|
||||
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
const route = useRoute()
|
||||
const breadcrumbs = useBreadcrumbs()
|
||||
const themeStore = useTheming()
|
||||
|
||||
const options = ref(null)
|
||||
const installing = ref(false)
|
||||
@@ -273,6 +178,11 @@ const instanceProjects = ref(null)
|
||||
const installed = ref(false)
|
||||
const installedVersion = ref(null)
|
||||
|
||||
const [allLoaders, allGameVersions] = await Promise.all([
|
||||
get_loaders().catch(handleError).then(ref),
|
||||
get_game_versions().catch(handleError).then(ref),
|
||||
])
|
||||
|
||||
async function fetchProjectData() {
|
||||
const project = await get_project(route.params.id, 'must_revalidate').catch(handleError)
|
||||
|
||||
@@ -331,15 +241,6 @@ async function install(version) {
|
||||
)
|
||||
}
|
||||
|
||||
const handleRightClick = (e) => {
|
||||
options.value.showMenu(e, data.value, [
|
||||
{ name: 'install' },
|
||||
{ type: 'divider' },
|
||||
{ name: 'open_link' },
|
||||
{ name: 'copy_link' },
|
||||
])
|
||||
}
|
||||
|
||||
const handleOptionsClick = (args) => {
|
||||
switch (args.option) {
|
||||
case 'install':
|
||||
@@ -520,27 +421,7 @@ const handleOptionsClick = (args) => {
|
||||
}
|
||||
}
|
||||
|
||||
.small-instance {
|
||||
padding: var(--gap-lg);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--gap-md);
|
||||
|
||||
.instance {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
color: var(--color-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
.small-instance_info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
.project-sidebar-section {
|
||||
@apply p-4 flex flex-col gap-2 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,165 +1,82 @@
|
||||
<template>
|
||||
<Card class="filter-header">
|
||||
<div class="manage">
|
||||
<multiselect
|
||||
v-model="filterLoader"
|
||||
:options="
|
||||
versions
|
||||
.flatMap((value) => value.loaders)
|
||||
.filter((value, index, self) => self.indexOf(value) === index)
|
||||
"
|
||||
:multiple="true"
|
||||
:searchable="true"
|
||||
:show-no-results="false"
|
||||
:close-on-select="false"
|
||||
:clear-search-on-select="false"
|
||||
:show-labels="false"
|
||||
:selectable="() => versions.length <= 6"
|
||||
placeholder="Filter loader..."
|
||||
:custom-label="(option) => option.charAt(0).toUpperCase() + option.slice(1)"
|
||||
/>
|
||||
<multiselect
|
||||
v-model="filterGameVersions"
|
||||
:options="
|
||||
versions
|
||||
.flatMap((value) => value.game_versions)
|
||||
.filter((value, index, self) => self.indexOf(value) === index)
|
||||
"
|
||||
:multiple="true"
|
||||
:searchable="true"
|
||||
:show-no-results="false"
|
||||
:close-on-select="false"
|
||||
:clear-search-on-select="false"
|
||||
:show-labels="false"
|
||||
:selectable="() => versions.length <= 6"
|
||||
placeholder="Filter versions..."
|
||||
:custom-label="(option) => option.charAt(0).toUpperCase() + option.slice(1)"
|
||||
/>
|
||||
<multiselect
|
||||
v-model="filterVersions"
|
||||
:options="
|
||||
versions
|
||||
.map((value) => value.version_type)
|
||||
.filter((value, index, self) => self.indexOf(value) === index)
|
||||
"
|
||||
:multiple="true"
|
||||
:searchable="true"
|
||||
:show-no-results="false"
|
||||
:close-on-select="false"
|
||||
:clear-search-on-select="false"
|
||||
:show-labels="false"
|
||||
:selectable="() => versions.length <= 6"
|
||||
placeholder="Filter release channel..."
|
||||
:custom-label="(option) => option.charAt(0).toUpperCase() + option.slice(1)"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
class="no-wrap clear-filters"
|
||||
:disabled="
|
||||
filterVersions.length === 0 && filterLoader.length === 0 && filterGameVersions.length === 0
|
||||
"
|
||||
:action="clearFilters"
|
||||
<div>
|
||||
<ProjectPageVersions
|
||||
:loaders="loaders"
|
||||
:game-versions="gameVersions"
|
||||
:versions="versions"
|
||||
:project="project"
|
||||
:version-link="(version) => `/project/${project.id}/version/${version.id}`"
|
||||
>
|
||||
<ClearIcon />
|
||||
Clear filters
|
||||
</Button>
|
||||
</Card>
|
||||
<Pagination
|
||||
:page="currentPage"
|
||||
:count="Math.ceil(filteredVersions.length / 20)"
|
||||
class="pagination-before"
|
||||
:link-function="(page) => `?page=${page}`"
|
||||
@switch-page="switchPage"
|
||||
/>
|
||||
<Card class="mod-card">
|
||||
<div class="table">
|
||||
<div class="table-row table-head">
|
||||
<div class="table-cell table-text download-cell" />
|
||||
<div class="name-cell table-cell table-text">Name</div>
|
||||
<div class="table-cell table-text">Supports</div>
|
||||
<div class="table-cell table-text">Stats</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="version in filteredVersions.slice((currentPage - 1) * 20, currentPage * 20)"
|
||||
:key="version.id"
|
||||
class="table-row selectable"
|
||||
@click="$router.push(`/project/${$route.params.id}/version/${version.id}`)"
|
||||
>
|
||||
<div class="table-cell table-text">
|
||||
<Button
|
||||
:color="installed && version.id === installedVersion ? '' : 'primary'"
|
||||
icon-only
|
||||
<template #actions="{ version }">
|
||||
<ButtonStyled circular type="transparent">
|
||||
<button
|
||||
v-tooltip="`Install`"
|
||||
:class="{
|
||||
'group-hover:!bg-brand group-hover:[&>svg]:!text-brand-inverted':
|
||||
!installed || version.id !== installedVersion,
|
||||
}"
|
||||
:disabled="installing || (installed && version.id === installedVersion)"
|
||||
@click.stop="() => install(version.id)"
|
||||
>
|
||||
<DownloadIcon v-if="!installed" />
|
||||
<SwapIcon v-else-if="installed && version.id !== installedVersion" />
|
||||
<CheckIcon v-else />
|
||||
</Button>
|
||||
</div>
|
||||
<div class="name-cell table-cell table-text">
|
||||
<div class="version-link">
|
||||
{{ version.name.charAt(0).toUpperCase() + version.name.slice(1) }}
|
||||
<div class="version-badge">
|
||||
<div class="channel-indicator">
|
||||
<Badge
|
||||
:color="releaseColor(version.version_type)"
|
||||
:type="
|
||||
version.version_type.charAt(0).toUpperCase() + version.version_type.slice(1)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{{ version.version_number }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-cell table-text stacked-text">
|
||||
<span>
|
||||
{{
|
||||
version.loaders.map((str) => str.charAt(0).toUpperCase() + str.slice(1)).join(', ')
|
||||
}}
|
||||
</span>
|
||||
<span>
|
||||
{{ version.game_versions.join(', ') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="table-cell table-text stacked-text">
|
||||
<div>
|
||||
<span> Published on </span>
|
||||
<strong>
|
||||
{{
|
||||
new Date(version.date_published).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})
|
||||
}}
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
<strong>
|
||||
{{ formatNumber(version.downloads) }}
|
||||
</strong>
|
||||
<span> Downloads </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled circular type="transparent">
|
||||
<OverflowMenu
|
||||
v-if="false"
|
||||
class="group-hover:!bg-button-bg"
|
||||
:options="[
|
||||
{
|
||||
id: 'install-elsewhere',
|
||||
action: () => {},
|
||||
shown: false && !!instance,
|
||||
color: 'primary',
|
||||
hoverFilled: true,
|
||||
},
|
||||
{
|
||||
id: 'open-in-browser',
|
||||
link: `https://modrinth.com/${project.project_type}/${project.slug}/version/${version.id}`,
|
||||
},
|
||||
]"
|
||||
aria-label="More options"
|
||||
>
|
||||
<MoreVerticalIcon aria-hidden="true" />
|
||||
<template #install-elsewhere>
|
||||
<DownloadIcon aria-hidden="true" />
|
||||
Add to another instance
|
||||
</template>
|
||||
<template #open-in-browser> <ExternalIcon /> Open in browser </template>
|
||||
</OverflowMenu>
|
||||
<a
|
||||
v-else
|
||||
v-tooltip="`Open in browser`"
|
||||
class="group-hover:!bg-button-bg"
|
||||
:href="`https://modrinth.com/${project.project_type}/${project.slug}/version/${version.id}`"
|
||||
target="_blank"
|
||||
>
|
||||
<ExternalIcon />
|
||||
</a>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
</ProjectPageVersions>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Card, Button, Pagination, Badge } from '@modrinth/ui'
|
||||
import { CheckIcon, ClearIcon, DownloadIcon } from '@modrinth/assets'
|
||||
import { formatNumber } from '@modrinth/utils'
|
||||
import Multiselect from 'vue-multiselect'
|
||||
import { releaseColor } from '@/helpers/utils'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { ProjectPageVersions, ButtonStyled, OverflowMenu } from '@modrinth/ui'
|
||||
import { CheckIcon, DownloadIcon, ExternalIcon, MoreVerticalIcon } from '@modrinth/assets'
|
||||
import { ref, watch } from 'vue'
|
||||
import { SwapIcon } from '@/assets/icons/index.js'
|
||||
import { get_game_versions, get_loaders } from '@/helpers/tags.js'
|
||||
import { handleError } from '@/store/notifications.js'
|
||||
|
||||
const props = defineProps({
|
||||
project: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
versions: {
|
||||
type: Array,
|
||||
required: true,
|
||||
@@ -186,36 +103,17 @@ const props = defineProps({
|
||||
},
|
||||
})
|
||||
|
||||
const [loaders, gameVersions] = await Promise.all([
|
||||
get_loaders().catch(handleError).then(ref),
|
||||
get_game_versions().catch(handleError).then(ref),
|
||||
])
|
||||
|
||||
const filterVersions = ref([])
|
||||
const filterLoader = ref(props.instance ? [props.instance?.loader] : [])
|
||||
const filterGameVersions = ref(props.instance ? [props.instance?.game_version] : [])
|
||||
|
||||
const currentPage = ref(1)
|
||||
|
||||
const clearFilters = () => {
|
||||
filterVersions.value = []
|
||||
filterLoader.value = []
|
||||
filterGameVersions.value = []
|
||||
}
|
||||
|
||||
const filteredVersions = computed(() => {
|
||||
return props.versions.filter(
|
||||
(projectVersion) =>
|
||||
(filterGameVersions.value.length === 0 ||
|
||||
filterGameVersions.value.some((gameVersion) =>
|
||||
projectVersion.game_versions.includes(gameVersion),
|
||||
)) &&
|
||||
(filterLoader.value.length === 0 ||
|
||||
filterLoader.value.some((loader) => projectVersion.loaders.includes(loader))) &&
|
||||
(filterVersions.value.length === 0 ||
|
||||
filterVersions.value.includes(projectVersion.version_type)),
|
||||
)
|
||||
})
|
||||
|
||||
function switchPage(page) {
|
||||
currentPage.value = page
|
||||
}
|
||||
|
||||
//watch all the filters and if a value changes, reset to page 1
|
||||
watch([filterVersions, filterLoader, filterGameVersions], () => {
|
||||
currentPage.value = 1
|
||||
|
||||
Reference in New Issue
Block a user