mirror of
https://github.com/modrinth/code.git
synced 2026-08-31 03:55:59 +00:00
feat: app onboarding and library (#6923)
* refactor: remove unused legacy onboarded flag * sqlx prepare * feat: add onboarding checklist app db and add vue provider * feat: add welcome page * feat: add onboarding checklist component * feat: move checklist visibility source of truth in app db * feat: split up import modpack button * feat-small: style tweak * feat: remove discover section from homepage and add library * refactor: move welcome screen to component * refactor: move grid display into /library * refactor: rename existing components * refactor: split up the current library page files * feat: add create group modal * feat: add instance group definitions * feat: update accordian for instance groups * feat: add delete group * feat: implement rename instance groups * refactor: move instance group api out * feat: add context menu for groups * feat: style instance items in library * feat: add selected instance item state * feat: implement action bar for selection * feat: drag and drop to move between groups * feat: show ungrouped with header * feat: improve edit group name * small fix * small style fixes * feat: improve selection behaviour * fix: dont toggle group when context menu open * feat: drag and drop multiple selected * small * feat: add remove from group in action bar * feat: add delay on icon hiding in inline input * feat: improve icon hiding delay * fix: bad routes.js * feat: implement sort and filter options * refactor: dont prefix filenames * feat: change open/collapse group target * feat: improve ungrouped behaviour * feat: add shift to select multiple instances * fix: icon disappear transition * feat: add esc while dragging to cancel * feat: update sorting and moved label * feat: update context menu * fix: multiple context menus can be opened * refactor: instance groups to be identified by ID instead of name, names become display data * feat: creating new group always adds instance * feat: create group button, fix instance selection, and increase group name max length * feat: strokes * fix: show getting started checklist in all sidebar * feat: set size on microsoft login screen * fix: use ButtonStyled in Chips component * feat: creating groups with selected instances and fix some moving selection and duplication bugs * pnpm prepr * feat: add tooltip for instance already in group * feat: create instance with content in creation flow modal - search modpack becomes search projects - creation flow modal context receives prepareProjectInstall and createProjectInstall callbacks, from content-install.ts (shared with ContentInstallModal) * feat: update instance card styles * refactor: separate out instance card content * update styles * refactor: instance card * fix: width of instance * feat: update empty state * feat: update sort and grouping dropdowns * feat: better context menu options * feat: add group action buttons * feat: add/remove favourites group * remove manual sort * feat: improve the "New group" jank * feat: add group by instance type and change group sorting * feat: welcome screen styles match figma * feat: not signed in skins demo * feat: new hosting empty state * feat: new instance card style * feat: add tooltip and spice up animation more * feat: improve the transitions for groups after dropping many instances * feat: set instance group membership for bulk moving * feat: remove fade out * fix: allow dragging from buttons inside instance card * fix: library page load in behaviour * small fix * feat: add group ordering and reordering * feat: add drag to reorder groups * fix: switching page not clearing selected instances * style fixes * style fix * fix spacing * feat: jump in changes * feat: add styled newly created instances * feat: improve jump in cards styles * fix: welcome screen style * fix: empty state styles * feat: max 5 jump in items * feat: max new instances to 3 * fix: search icon * feat: clear selection after move * feat: skins list use check icon styles * feat: list will be deleted instances and default sort last played * fix: stroke * remove: no more group settings in instance general settings * fix: resolving modpack server install * feat: icon editor * feat: add three hue shifted variants * fix: surprise me doesnt pick symbol * feat: add customize icon to create instance modal * feat: skins loading state style * fix: welcome logo * fix: copy * fix: left over usage of ButtonStyled from main's refactor * feat: some leaked merge stuff * feat: server empty state styles * remove: instance helper text * remove: auto link in set up stage * feat: auto focus on search when modal open * fix: delete instance modal style * remove: modpack meta repeating * fix: icon * fix: font weight * fix: dropdown filter preview heights * pnpm prepr * fix: sign into modrinth flashing change in position * feat: add avatar transparent corner gets padding * feat: drag and hold over group opens group * feat: add random icon for custom instance * feat: update loading icon * polish: empty state for search * polish: jump in cards * fix: avatar could skip checking for image if tauri loads it first * feat: add icon customize and randomizer in content install modal for add to new instances * fix: avatar cannot read image pixels due to cors * refactor: popup notifications toast type for instance sharing notifications * feat: apply random icons modal and add popup notification for it * polish: style * fix: set_webview_visible * QA * qa * feat: add inner white 15 opacity stroke around avatar * add to catalog * pnpm prepr * fix: app event import * feat: add new icons and backgrounds for icon editor * feat: recents list generate from randomized icons and save icon in editor + icon editor modal fixes * qa * refactor: recipe -> config * fix: event bus * polish * feat: add safe guard against randomizing empty icons * feat: navigate to instance after creation * fix: icon file names * i18n on welcome screen * i18n pass on PR * fix: inconsistent max group name length * refactor: use sqlx macro * feat: add instance icon background selection drag * feat: update catalog order * fix: remove gradient for welcome screen * remove: frog * fix: min width * feat: update corner size * fix: context menu styles * prepr * fix: instance name trimming * reorder * fix: instance card loading state stayed until hovering * feat: add icon randomizer blacklist * blog * prepr --------- Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
This commit is contained in:
Truman Gao
Prospector
@@ -4,30 +4,32 @@ import {
|
||||
FolderOpenIcon,
|
||||
MoreVerticalIcon,
|
||||
PlayIcon,
|
||||
SparklesIcon,
|
||||
SpinnerIcon,
|
||||
StopCircleIcon,
|
||||
} from '@modrinth/assets'
|
||||
import {
|
||||
Avatar,
|
||||
BulletDivider,
|
||||
Button,
|
||||
commonMessages,
|
||||
defineMessages,
|
||||
injectNotificationManager,
|
||||
SmartClickable,
|
||||
TagItem,
|
||||
TeleportOverflowMenu,
|
||||
useFormatDateTime,
|
||||
useRelativeTime,
|
||||
useVIntl,
|
||||
} from '@modrinth/ui'
|
||||
import { capitalizeString } from '@modrinth/utils'
|
||||
import { convertFileSrc } from '@tauri-apps/api/core'
|
||||
import type { Dayjs } from 'dayjs'
|
||||
import { computed, nextTick, onMounted, ref } from 'vue'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { useAppEvent } from '@/composables/use-app-event'
|
||||
import { trackEvent } from '@/helpers/analytics'
|
||||
import { get_project } from '@/helpers/cache'
|
||||
import { kill, run } from '@/helpers/instance'
|
||||
import { getInstanceIconUrl, kill, run } from '@/helpers/instance'
|
||||
import { get_by_instance_id } from '@/helpers/process'
|
||||
import type { GameInstance } from '@/helpers/types'
|
||||
import { showInstanceInFolder } from '@/helpers/utils'
|
||||
@@ -50,18 +52,35 @@ const emit = defineEmits<{
|
||||
const props = defineProps<{
|
||||
instance: GameInstance
|
||||
last_played: Dayjs
|
||||
newlyAdded?: boolean
|
||||
}>()
|
||||
|
||||
const loadingModpack = ref(!!props.instance.link)
|
||||
|
||||
const modpack = ref()
|
||||
|
||||
if (props.instance.link) {
|
||||
nextTick().then(async () => {
|
||||
modpack.value = await get_project(props.instance.link?.project_id, 'must_revalidate')
|
||||
loadingModpack.value = false
|
||||
})
|
||||
}
|
||||
const messages = defineMessages({
|
||||
newInstance: {
|
||||
id: 'app.home.jump-back-in.new-instance',
|
||||
defaultMessage: 'New instance',
|
||||
},
|
||||
neverPlayed: {
|
||||
id: 'app.home.jump-back-in.never-played',
|
||||
defaultMessage: 'Never played',
|
||||
},
|
||||
lockedTooltip: {
|
||||
id: 'app.home.jump-back-in.instance-locked',
|
||||
defaultMessage: 'This instance has been locked',
|
||||
},
|
||||
alreadyOpenTooltip: {
|
||||
id: 'app.home.jump-back-in.instance-open',
|
||||
defaultMessage: 'Instance is already open',
|
||||
},
|
||||
moreOptions: {
|
||||
id: 'app.home.jump-back-in.more-options',
|
||||
defaultMessage: 'More options',
|
||||
},
|
||||
viewInstance: {
|
||||
id: 'app.home.jump-back-in.view-instance',
|
||||
defaultMessage: 'View instance',
|
||||
},
|
||||
})
|
||||
|
||||
const instanceIcon = computed(() => props.instance.icon_path)
|
||||
|
||||
@@ -82,8 +101,12 @@ const play = async (event: MouseEvent) => {
|
||||
event?.stopPropagation()
|
||||
if (props.instance.quarantined) return
|
||||
loading.value = true
|
||||
await run(props.instance.id)
|
||||
.catch((err) => handleSevereError(err, { instanceId: props.instance.id }))
|
||||
const launched = await run(props.instance.id)
|
||||
.then(() => true)
|
||||
.catch((err) => {
|
||||
handleSevereError(err, { instanceId: props.instance.id })
|
||||
return false
|
||||
})
|
||||
.finally(() => {
|
||||
trackEvent('InstanceStart', {
|
||||
loader: props.instance.loader,
|
||||
@@ -91,7 +114,7 @@ const play = async (event: MouseEvent) => {
|
||||
source: 'InstanceItem',
|
||||
})
|
||||
})
|
||||
emit('play')
|
||||
if (launched) emit('play')
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
@@ -123,7 +146,7 @@ onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<SmartClickable>
|
||||
<SmartClickable class="[--active-scale:0.99]">
|
||||
<template #clickable>
|
||||
<router-link
|
||||
class="no-click-animation"
|
||||
@@ -131,56 +154,53 @@ onMounted(() => {
|
||||
/>
|
||||
</template>
|
||||
<div
|
||||
class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised card-shadow rounded-xl smart-clickable:highlight-on-hover"
|
||||
class="clickable-card grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 border border-surface-4 rounded-[20px] smart-clickable:highlight-on-hover transition-[filter] ease-out [--hover-brightness:1.1] min-h-20 p-3"
|
||||
:class="newlyAdded ? 'border-dashed bg-surface-2' : 'bg-bg-raised border-solid'"
|
||||
>
|
||||
<Avatar
|
||||
:src="instanceIcon ? convertFileSrc(instanceIcon) : undefined"
|
||||
:src="getInstanceIconUrl(instanceIcon)"
|
||||
:tint-by="instance.id"
|
||||
no-shadow
|
||||
class="!rounded-[14px]"
|
||||
size="48px"
|
||||
/>
|
||||
<div class="flex flex-col col-span-2 justify-between h-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="text-lg text-contrast font-bold truncate smart-clickable:underline-on-hover">
|
||||
<div class="flex flex-col col-span-2 justify-center gap-1 h-full">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="text-contrast truncate text-base font-semibold">
|
||||
{{ instance.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm text-secondary">
|
||||
<div
|
||||
v-tooltip="instance.last_played ? formatDateTime(instance.last_played) : null"
|
||||
class="w-fit shrink-0"
|
||||
:class="{ 'cursor-help smart-clickable:allow-pointer-events': last_played }"
|
||||
<TagItem
|
||||
v-if="newlyAdded"
|
||||
class="!border-green !bg-bg-green !px-2 !font-medium !text-green"
|
||||
>
|
||||
<template v-if="last_played">
|
||||
{{
|
||||
formatMessage(commonMessages.playedLabel, {
|
||||
ago: formatRelativeTime(last_played.toISOString?.()),
|
||||
})
|
||||
}}
|
||||
</template>
|
||||
<template v-else> Not played yet </template>
|
||||
</div>
|
||||
•
|
||||
<span v-if="modpack" class="flex items-center gap-1 truncate text-secondary">
|
||||
<router-link
|
||||
class="inline-flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events"
|
||||
:to="`/project/${modpack.id}`"
|
||||
>
|
||||
<Avatar :src="modpack.icon_url" size="16px" class="shrink-0" />
|
||||
<span class="truncate">{{ modpack.title }}</span>
|
||||
</router-link>
|
||||
({{ loader }} {{ instance.game_version }})
|
||||
</span>
|
||||
<span v-else-if="loadingModpack" class="flex items-center gap-1 truncate text-secondary">
|
||||
<SpinnerIcon class="animate-spin shrink-0" />
|
||||
<span class="truncate">Loading modpack...</span>
|
||||
</span>
|
||||
<span v-else class="flex items-center gap-1 truncate text-secondary">
|
||||
<SparklesIcon aria-hidden="true" />
|
||||
{{ formatMessage(messages.newInstance) }}
|
||||
</TagItem>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 text-sm text-secondary">
|
||||
<span class="flex items-center gap-1 truncate text-secondary">
|
||||
{{ loader }}
|
||||
{{ instance.game_version }}
|
||||
</span>
|
||||
<BulletDivider class="shrink-0" />
|
||||
<div
|
||||
v-tooltip="!newlyAdded ? formatDateTime(last_played.toDate()) : null"
|
||||
class="w-fit shrink-0"
|
||||
:class="{
|
||||
'cursor-help smart-clickable:allow-pointer-events': !newlyAdded,
|
||||
}"
|
||||
>
|
||||
<template v-if="newlyAdded">
|
||||
{{ formatMessage(messages.neverPlayed) }}
|
||||
</template>
|
||||
<template v-else-if="last_played">
|
||||
{{ formatRelativeTime(last_played.toISOString?.()) }}
|
||||
</template>
|
||||
<template v-else>{{ formatMessage(messages.neverPlayed) }}</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
|
||||
<div data-no-card-click class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
|
||||
<Button v-if="playing && !loading" type="colored" color="red" @click="stop">
|
||||
<StopCircleIcon aria-hidden="true" />
|
||||
{{ formatMessage(commonMessages.stopButton) }}
|
||||
@@ -189,12 +209,14 @@ onMounted(() => {
|
||||
v-else
|
||||
v-tooltip="
|
||||
instance.quarantined
|
||||
? 'This instance has been locked'
|
||||
? formatMessage(messages.lockedTooltip)
|
||||
: playing
|
||||
? 'Instance is already open'
|
||||
? formatMessage(messages.alreadyOpenTooltip)
|
||||
: null
|
||||
"
|
||||
:disabled="instance.quarantined || playing || loading"
|
||||
type="colored"
|
||||
color="green"
|
||||
@click="play"
|
||||
>
|
||||
<SpinnerIcon v-if="loading" class="animate-spin" />
|
||||
@@ -203,11 +225,11 @@ onMounted(() => {
|
||||
</Button>
|
||||
<TeleportOverflowMenu
|
||||
type="quiet"
|
||||
label="More options"
|
||||
:label="formatMessage(messages.moreOptions)"
|
||||
:options="[
|
||||
{
|
||||
id: 'open-instance',
|
||||
label: 'View instance',
|
||||
label: formatMessage(messages.viewInstance),
|
||||
shown: !!instance.id,
|
||||
action: () => router.push(encodeURI(`/instance/${instance.id}`)),
|
||||
},
|
||||
@@ -221,7 +243,7 @@ onMounted(() => {
|
||||
<MoreVerticalIcon aria-hidden="true" />
|
||||
<template #open-instance>
|
||||
<EyeIcon aria-hidden="true" />
|
||||
View instance
|
||||
{{ formatMessage(messages.viewInstance) }}
|
||||
</template>
|
||||
<template #open-folder>
|
||||
<FolderOpenIcon aria-hidden="true" />
|
||||
@@ -232,3 +254,8 @@ onMounted(() => {
|
||||
</div>
|
||||
</SmartClickable>
|
||||
</template>
|
||||
<style scoped>
|
||||
.clickable-card:has([data-no-card-click]:hover) {
|
||||
--hover-brightness: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { LoaderCircleIcon } from '@modrinth/assets'
|
||||
import type { GameVersion } from '@modrinth/ui'
|
||||
import { GAME_MODES, injectNotificationManager } from '@modrinth/ui'
|
||||
import { defineMessages, GAME_MODES, injectNotificationManager, useVIntl } from '@modrinth/ui'
|
||||
import { platform } from '@tauri-apps/plugin-os'
|
||||
import type { Dayjs } from 'dayjs'
|
||||
import dayjs from 'dayjs'
|
||||
@@ -33,6 +33,10 @@ import { handleSevereError } from '@/store/error'
|
||||
import { useTheming } from '@/store/theme.ts'
|
||||
|
||||
const { handleError } = injectNotificationManager()
|
||||
const { formatMessage } = useVIntl()
|
||||
const messages = defineMessages({
|
||||
jumpIn: { id: 'app.home.jump-back-in.title', defaultMessage: 'Jump in' },
|
||||
})
|
||||
|
||||
const props = defineProps<{
|
||||
recentInstances: GameInstance[]
|
||||
@@ -44,11 +48,11 @@ const jumpBackInItems = ref<JumpBackInItem[]>([])
|
||||
const loading = ref(true)
|
||||
const serverData = ref<Record<string, ServerData>>({})
|
||||
const protocolVersions = ref<Record<string, ProtocolVersion | null>>({})
|
||||
const locallyPlayedInstances = ref<Record<string, Dayjs>>({})
|
||||
const gameVersions = ref<GameVersion[]>(await get_game_versions().catch(() => []))
|
||||
|
||||
const MIN_JUMP_BACK_IN = 3
|
||||
const MAX_JUMP_BACK_IN = 6
|
||||
const TWO_WEEKS_AGO = dayjs().subtract(14, 'day')
|
||||
const MAX_JUMP_BACK_IN = 5
|
||||
const MAX_NEW_INSTANCES = 3
|
||||
const MAX_LINUX_POPULATES = 3
|
||||
|
||||
// Track populate calls on Linux to prevent server ping spam
|
||||
@@ -56,8 +60,9 @@ const isLinux = platform() === 'linux'
|
||||
const linuxPopulateCount = ref(0)
|
||||
|
||||
type BaseJumpBackInItem = {
|
||||
last_played: Dayjs
|
||||
sort_time: Dayjs
|
||||
instance: GameInstance
|
||||
newly_added?: boolean
|
||||
}
|
||||
|
||||
type InstanceJumpBackInItem = BaseJumpBackInItem & {
|
||||
@@ -108,7 +113,7 @@ async function populateJumpBackIn() {
|
||||
|
||||
worldItems.push({
|
||||
type: 'world',
|
||||
last_played: dayjs(world.last_played ?? 0),
|
||||
sort_time: dayjs(world.last_played ?? 0),
|
||||
world: world,
|
||||
instance: instance,
|
||||
})
|
||||
@@ -153,24 +158,44 @@ async function populateJumpBackIn() {
|
||||
const instanceItems: InstanceJumpBackInItem[] = []
|
||||
for (const instance of props.recentInstances) {
|
||||
const worldItem = worldItems.find((item) => item.instance.id === instance.id)
|
||||
if ((worldItem && worldItem.last_played.isAfter(TWO_WEEKS_AGO)) || !instance.last_played) {
|
||||
continue
|
||||
}
|
||||
const lastPlayed = instance.last_played
|
||||
? dayjs(instance.last_played)
|
||||
: locallyPlayedInstances.value[instance.id]
|
||||
const newlyAdded = !lastPlayed
|
||||
if (worldItem && (!lastPlayed || !lastPlayed.isAfter(worldItem.sort_time))) continue
|
||||
if (worldItem) worldItems.splice(worldItems.indexOf(worldItem), 1)
|
||||
|
||||
instanceItems.push({
|
||||
type: 'instance',
|
||||
last_played: dayjs(instance.last_played ?? 0),
|
||||
sort_time: lastPlayed ?? dayjs(instance.created),
|
||||
instance: instance,
|
||||
newly_added: newlyAdded,
|
||||
})
|
||||
}
|
||||
|
||||
const items: JumpBackInItem[] = [...worldItems, ...instanceItems]
|
||||
items.sort((a, b) => dayjs(b.last_played ?? 0).diff(dayjs(a.last_played ?? 0)))
|
||||
items.sort((a, b) => b.sort_time.diff(a.sort_time))
|
||||
let newInstanceCount = 0
|
||||
jumpBackInItems.value = items
|
||||
.filter((item, index) => index < MIN_JUMP_BACK_IN || item.last_played.isAfter(TWO_WEEKS_AGO))
|
||||
.filter((item) => {
|
||||
if (item.type !== 'instance' || !item.newly_added) return true
|
||||
if (newInstanceCount >= MAX_NEW_INSTANCES) return false
|
||||
newInstanceCount++
|
||||
return true
|
||||
})
|
||||
.slice(0, MAX_JUMP_BACK_IN)
|
||||
}
|
||||
|
||||
function markInstancePlayed(item: InstanceJumpBackInItem) {
|
||||
const lastPlayed = dayjs()
|
||||
locallyPlayedInstances.value = {
|
||||
...locallyPlayedInstances.value,
|
||||
[item.instance.id]: lastPlayed,
|
||||
}
|
||||
item.sort_time = lastPlayed
|
||||
item.newly_added = false
|
||||
}
|
||||
|
||||
function refreshServer(address: string, instanceId: string) {
|
||||
refreshServerData(serverData.value[address], protocolVersions.value[instanceId], address)
|
||||
}
|
||||
@@ -255,18 +280,22 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div v-if="loading" class="flex flex-col gap-2">
|
||||
<span class="flex mt-1 mb-3 leading-none items-center gap-1 text-primary text-lg font-bold">
|
||||
Jump back in
|
||||
<span
|
||||
class="flex mt-1 mb-3 leading-none items-center gap-1 text-2xl font-semibold text-contrast"
|
||||
>
|
||||
{{ formatMessage(messages.jumpIn) }}
|
||||
</span>
|
||||
<div class="text-center py-4">
|
||||
<LoaderCircleIcon class="mx-auto size-8 animate-spin text-contrast" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="jumpBackInItems.length > 0" class="flex flex-col gap-2">
|
||||
<span class="flex mt-1 mb-3 leading-none items-center gap-1 text-primary text-lg font-bold">
|
||||
Jump back in
|
||||
<span
|
||||
class="flex mt-1 mb-3 leading-none items-center gap-1 text-2xl font-semibold text-contrast"
|
||||
>
|
||||
{{ formatMessage(messages.jumpIn) }}
|
||||
</span>
|
||||
<div class="grid-when-huge flex flex-col w-full gap-2">
|
||||
<div class="grid-when-huge flex flex-col w-full gap-3">
|
||||
<template
|
||||
v-for="item in jumpBackInItems"
|
||||
:key="`${item.instance.id}-${item.type === 'world' ? getWorldIdentifier(item.world) : 'instance'}`"
|
||||
@@ -327,7 +356,13 @@ onMounted(() => {
|
||||
"
|
||||
@stop="() => stopInstance(item.instance.id)"
|
||||
/>
|
||||
<InstanceItem v-else :instance="item.instance" :last_played="item.last_played" />
|
||||
<InstanceItem
|
||||
v-else
|
||||
:instance="item.instance"
|
||||
:last_played="item.sort_time"
|
||||
:newly-added="item.newly_added"
|
||||
@play="() => markInstancePlayed(item)"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,6 @@ import {
|
||||
MoreVerticalIcon,
|
||||
NoSignalIcon,
|
||||
PlayIcon,
|
||||
SignalIcon,
|
||||
SkullIcon,
|
||||
SpinnerIcon,
|
||||
StopCircleIcon,
|
||||
@@ -21,26 +20,25 @@ import {
|
||||
import type { MessageDescriptor } from '@modrinth/ui'
|
||||
import {
|
||||
Avatar,
|
||||
BulletDivider,
|
||||
Button,
|
||||
commonMessages,
|
||||
defineMessages,
|
||||
injectNotificationManager,
|
||||
ServerOnlinePlayers,
|
||||
SmartClickable,
|
||||
TagItem,
|
||||
TeleportOverflowMenu,
|
||||
useFormatDateTime,
|
||||
useFormatNumber,
|
||||
useRelativeTime,
|
||||
useVIntl,
|
||||
} from '@modrinth/ui'
|
||||
import { getPingLevel } from '@modrinth/utils'
|
||||
import { convertFileSrc } from '@tauri-apps/api/core'
|
||||
import dayjs from 'dayjs'
|
||||
import { Tooltip } from 'floating-vue'
|
||||
import type { Component } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { getInstanceIconUrl } from '@/helpers/instance'
|
||||
import { copyToClipboard, createInstanceShortcut } from '@/helpers/utils'
|
||||
import type {
|
||||
ProtocolVersion,
|
||||
@@ -55,7 +53,6 @@ import { LockIcon } from '../../../../../../packages/assets/generated-icons'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
const formatRelativeTime = useRelativeTime()
|
||||
const formatNumber = useFormatNumber()
|
||||
const formatDateTime = useFormatDateTime({
|
||||
timeStyle: 'short',
|
||||
dateStyle: 'long',
|
||||
@@ -124,9 +121,6 @@ const props = withDefaults(
|
||||
)
|
||||
|
||||
const playingOtherWorld = computed(() => props.playingInstance && !props.playingWorld)
|
||||
const hasPlayersTooltip = computed(
|
||||
() => !!props.serverStatus?.players?.sample && props.serverStatus.players?.sample?.length > 0,
|
||||
)
|
||||
const serverIncompatible = computed(
|
||||
() =>
|
||||
!!props.serverStatus &&
|
||||
@@ -155,18 +149,31 @@ async function createShortcut() {
|
||||
|
||||
addNotification({
|
||||
type: 'success',
|
||||
title: 'Shortcut created',
|
||||
title: formatMessage(messages.shortcutCreated),
|
||||
})
|
||||
} catch (error) {
|
||||
addNotification({
|
||||
type: 'error',
|
||||
title: 'Failed to create shortcut',
|
||||
title: formatMessage(messages.shortcutCreationFailed),
|
||||
text: error instanceof Error ? error.message : '',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const messages = defineMessages({
|
||||
shortcutCreated: {
|
||||
id: 'instance.worlds.shortcut-created',
|
||||
defaultMessage: 'Shortcut created',
|
||||
},
|
||||
shortcutCreationFailed: {
|
||||
id: 'instance.worlds.shortcut-creation-failed',
|
||||
defaultMessage: 'Failed to create shortcut',
|
||||
},
|
||||
moreOptions: { id: 'instance.worlds.more-options', defaultMessage: 'More options' },
|
||||
instanceLocked: {
|
||||
id: 'instance.worlds.instance-locked',
|
||||
defaultMessage: 'This instance has been locked',
|
||||
},
|
||||
hardcore: {
|
||||
id: 'instance.worlds.hardcore',
|
||||
defaultMessage: 'Hardcore mode',
|
||||
@@ -231,10 +238,6 @@ const messages = defineMessages({
|
||||
id: 'app.world.world-item.incompatible-version',
|
||||
defaultMessage: 'Incompatible version {version}',
|
||||
},
|
||||
playersOnline: {
|
||||
id: 'app.world.world-item.players-online',
|
||||
defaultMessage: '{count} online',
|
||||
},
|
||||
offline: {
|
||||
id: 'app.world.world-item.offline',
|
||||
defaultMessage: 'Offline',
|
||||
@@ -246,7 +249,7 @@ const messages = defineMessages({
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<SmartClickable>
|
||||
<SmartClickable class="[--active-scale:0.985]">
|
||||
<template v-if="instanceId" #clickable>
|
||||
<router-link
|
||||
class="no-click-animation"
|
||||
@@ -254,7 +257,7 @@ const messages = defineMessages({
|
||||
/>
|
||||
</template>
|
||||
<div
|
||||
class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised card-shadow smart-clickable:highlight-on-hover rounded-xl"
|
||||
class="clickable-card grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised border border-solid border-surface-4 smart-clickable:highlight-on-hover rounded-[20px] transition-[filter] ease-out [--hover-brightness:1.25] min-h-20"
|
||||
:class="{
|
||||
'world-item-highlighted': highlighted,
|
||||
}"
|
||||
@@ -266,10 +269,12 @@ const messages = defineMessages({
|
||||
: world.icon
|
||||
"
|
||||
size="48px"
|
||||
no-shadow
|
||||
class="!rounded-[14px]"
|
||||
/>
|
||||
<div class="flex flex-col justify-between h-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="text-lg text-contrast font-bold truncate smart-clickable:underline-on-hover">
|
||||
<div class="flex flex-col justify-center gap-0.5 h-full">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="text-base text-contrast font-semibold truncate">
|
||||
{{ world.name }}
|
||||
</div>
|
||||
<TagItem
|
||||
@@ -310,34 +315,13 @@ const messages = defineMessages({
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<SignalIcon
|
||||
v-tooltip="serverStatus ? `${serverStatus.ping}ms` : null"
|
||||
aria-hidden="true"
|
||||
:style="`--_signal-${getPingLevel(serverStatus.ping || 0)}: var(--color-green)`"
|
||||
stroke-width="3px"
|
||||
class="shrink-0"
|
||||
:class="{
|
||||
'smart-clickable:allow-pointer-events': serverStatus,
|
||||
}"
|
||||
<div v-else class="flex items-center gap-2">
|
||||
<ServerOnlinePlayers
|
||||
:online="serverStatus.players?.online ?? 0"
|
||||
status-online
|
||||
hide-label
|
||||
/>
|
||||
<Tooltip :disabled="!hasPlayersTooltip">
|
||||
<span :class="{ 'cursor-help': hasPlayersTooltip }">
|
||||
{{
|
||||
formatMessage(messages.playersOnline, {
|
||||
count: formatNumber(serverStatus.players?.online ?? 0),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<template #popper>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span v-for="player in serverStatus.players?.sample" :key="player.name">
|
||||
{{ player.name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<NoSignalIcon aria-hidden="true" stroke-width="3px" class="shrink-0" />
|
||||
@@ -345,7 +329,24 @@ const messages = defineMessages({
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm text-secondary">
|
||||
<div class="flex items-center gap-1.5 text-sm text-secondary">
|
||||
<template v-if="instanceId">
|
||||
<router-link
|
||||
data-no-card-click
|
||||
class="flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events"
|
||||
:to="`/instance/${instanceId}`"
|
||||
>
|
||||
<Avatar
|
||||
:src="getInstanceIconUrl(instanceIcon)"
|
||||
size="16px"
|
||||
:tint-by="instanceId"
|
||||
class="shrink-0"
|
||||
no-shadow
|
||||
/>
|
||||
<span class="truncate">{{ instanceName }}</span>
|
||||
</router-link>
|
||||
<BulletDivider class="shrink-0" />
|
||||
</template>
|
||||
<div
|
||||
v-tooltip="world.last_played ? formatDateTime(world.last_played) : null"
|
||||
class="w-fit shrink-0"
|
||||
@@ -354,29 +355,10 @@ const messages = defineMessages({
|
||||
}"
|
||||
>
|
||||
<template v-if="world.last_played">
|
||||
{{
|
||||
formatMessage(commonMessages.playedLabel, {
|
||||
ago: formatRelativeTime(dayjs(world.last_played).toISOString()),
|
||||
})
|
||||
}}
|
||||
{{ formatRelativeTime(dayjs(world.last_played).toISOString()) }}
|
||||
</template>
|
||||
<template v-else> {{ formatMessage(messages.notPlayedYet) }} </template>
|
||||
</div>
|
||||
<template v-if="instanceId">
|
||||
•
|
||||
<router-link
|
||||
class="flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events"
|
||||
:to="`/instance/${instanceId}`"
|
||||
>
|
||||
<Avatar
|
||||
:src="instanceIcon ? convertFileSrc(instanceIcon) : undefined"
|
||||
size="16px"
|
||||
:tint-by="instanceId"
|
||||
class="shrink-0"
|
||||
/>
|
||||
<span class="truncate">{{ instanceName }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -425,7 +407,7 @@ const messages = defineMessages({
|
||||
v-else
|
||||
v-tooltip="
|
||||
quarantined
|
||||
? 'This instance has been locked'
|
||||
? formatMessage(messages.instanceLocked)
|
||||
: world.type === 'server'
|
||||
? !supportsServerQuickPlay
|
||||
? formatMessage(messages.noServerQuickPlay)
|
||||
@@ -449,6 +431,8 @@ const messages = defineMessages({
|
||||
(world.type == 'server' && !supportsServerQuickPlay) ||
|
||||
(world.type == 'singleplayer' && !supportsWorldQuickPlay)
|
||||
"
|
||||
type="colored"
|
||||
color="brand"
|
||||
@click="emit('play')"
|
||||
>
|
||||
<SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
|
||||
@@ -457,7 +441,7 @@ const messages = defineMessages({
|
||||
</Button>
|
||||
<TeleportOverflowMenu
|
||||
type="quiet"
|
||||
label="More options"
|
||||
:label="formatMessage(messages.moreOptions)"
|
||||
:options="[
|
||||
{
|
||||
id: 'play-instance',
|
||||
@@ -595,6 +579,10 @@ const messages = defineMessages({
|
||||
</SmartClickable>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.clickable-card:has([data-no-card-click]:hover) {
|
||||
--hover-brightness: 1;
|
||||
}
|
||||
|
||||
.world-item-highlighted {
|
||||
position: relative;
|
||||
animation: fade-highlight 4s ease-out;
|
||||
|
||||
Reference in New Issue
Block a user