diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json index 18ff367db0..5a88bd2d92 100644 --- a/apps/app-frontend/package.json +++ b/apps/app-frontend/package.json @@ -14,6 +14,7 @@ "test": "vue-tsc --noEmit" }, "dependencies": { + "@dnd-kit/vue": "^0.5.0", "@modrinth/api-client": "workspace:^", "@modrinth/assets": "workspace:*", "@modrinth/ui": "workspace:*", diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue index c85852fd5b..2f1f550b66 100644 --- a/apps/app-frontend/src/App.vue +++ b/apps/app-frontend/src/App.vue @@ -13,11 +13,10 @@ import { ChevronLeftIcon, ChevronRightIcon, CompassIcon, - HomeIcon, - LibraryIcon, LogInIcon, LogOutIcon, NewspaperIcon, + PlayIcon, PlusIcon, RefreshCwIcon, RightArrowIcon, @@ -57,7 +56,7 @@ import { import { renderString } from '@modrinth/utils' import { useQuery, useQueryClient } from '@tanstack/vue-query' import { getVersion } from '@tauri-apps/api/app' -import { invoke } from '@tauri-apps/api/core' +import { convertFileSrc, invoke } from '@tauri-apps/api/core' import { getCurrentWindow } from '@tauri-apps/api/window' import { fetch as tauriFetch } from '@tauri-apps/plugin-http' import { openUrl } from '@tauri-apps/plugin-opener' @@ -73,6 +72,7 @@ import ErrorModal from '@/components/ui/ErrorModal.vue' import FriendsList from '@/components/ui/friends/FriendsList.vue' import AddServerToInstanceModal from '@/components/ui/install_flow/AddServerToInstanceModal.vue' import UnknownPackWarningModal from '@/components/ui/install_flow/UnknownPackWarningModal.vue' +import IconEditorModal from '@/components/ui/instance_settings/icon-editor-modal/index.vue' import MinecraftAuthErrorModal from '@/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue' import MinecraftRequiredModal from '@/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue' import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue' @@ -81,6 +81,9 @@ import ModpackAlreadyInstalledModal from '@/components/ui/modal/ModpackAlreadyIn import ModrinthAccountRequiredModal from '@/components/ui/modal/ModrinthAccountRequiredModal.vue' import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue' import NavButton from '@/components/ui/NavButton.vue' +import NewIconEditorNotification from '@/components/ui/new-icon-editor-notification/index.vue' +import { shouldShowNewIconEditorNotification } from '@/components/ui/new-icon-editor-notification/show-notification' +import OnboardingChecklist from '@/components/ui/onboarding-checklist/index.vue' import PrideFundraiserBanner from '@/components/ui/PrideFundraiserBanner.vue' import PromotionWrapper from '@/components/ui/PromotionWrapper.vue' import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue' @@ -314,13 +317,64 @@ const { fetchExistingInstanceNames, handleCreate, handleBrowseModpacks, - searchModpacks, - getProjectVersions, + searchProjects, getLoaderManifest, setModpackAlreadyInstalledModal, handleModpackDuplicateCreateAnyway, handleModpackDuplicateGoToInstance, + onboardingChecklist, } = setupProviders(tauriApiClient, notificationManager, popupNotificationManager) +const { hasLoggedIntoMinecraft, hasLoggedIntoModrinth, showChecklist } = onboardingChecklist +const showFriendsList = computed(() => !showChecklist.value || hasLoggedIntoModrinth.value) +const creationIconEditorModal = ref(null) +const creationIconRecipe = ref(null) +const creationIconTarget = ref('creation-flow') + +async function randomizeCreationIcon() { + const generated = await creationIconEditorModal.value?.randomizeAndSave() + if (!generated) return null + + creationIconRecipe.value = generated.recipe + return { + path: generated.iconPath, + previewUrl: convertFileSrc(generated.iconPath), + } +} + +function customizeCreationIcon() { + creationIconTarget.value = 'creation-flow' + creationIconEditorModal.value?.show() +} + +onMounted(async () => { + if (!shouldShowNewIconEditorNotification()) return + + addPopupNotification({ + contentType: 'custom', + component: NewIconEditorNotification, + autoCloseMs: null, + }) +}) + +function customizeContentInstallIcon() { + creationIconTarget.value = 'content-install' + creationIconEditorModal.value?.show() +} + +function onCreationIconSaved(iconPath, recipe) { + creationIconRecipe.value = recipe + if (creationIconTarget.value === 'content-install') { + modInstallModal.value?.setIcon(iconPath, convertFileSrc(iconPath)) + return + } + + const context = installationModal.value?.ctx + if (!context) return + + context.instanceIcon.value = null + context.instanceIconUrl.value = convertFileSrc(iconPath) + context.instanceIconPath.value = iconPath +} const news = ref([]) const displayedServerInviteNotifications = new Set() @@ -336,7 +390,6 @@ window.addEventListener('online', () => { offline.value = false }) -const showOnboarding = ref(false) const nativeDecorations = ref(false) const os = ref('') @@ -445,10 +498,6 @@ const messages = defineMessages({ id: 'app.nav.home', defaultMessage: 'Home', }, - library: { - id: 'app.nav.library', - defaultMessage: 'Library', - }, modrinthHosting: { id: 'app.nav.modrinth-hosting', defaultMessage: 'Modrinth Hosting', @@ -508,6 +557,7 @@ function handleAdsConsentRequired(required) { } const notification = addPopupNotification({ + contentType: 'standard', title: formatMessage(messages.adsConsentTitle), text: formatMessage(messages.adsConsentBody), type: 'info', @@ -540,6 +590,8 @@ function handleAdsConsentRequired(required) { } async function setupApp() { + await onboardingChecklist.initialize() + const { native_decorations, theme, @@ -548,8 +600,6 @@ async function setupApp() { collapsed_navigation, hide_nametag_skins_page, advanced_rendering, - onboarded, - default_page, toggle_sidebar, developer_mode, feature_flags, @@ -561,16 +611,10 @@ async function setupApp() { i18n.global.locale.value = locale } - if (default_page === 'Library') { - await router.push('/library') - } - os.value = await getOS() const dev = await isDev() isDevEnvironment.value = dev const version = await getVersion() - showOnboarding.value = !onboarded - nativeDecorations.value = native_decorations if (os.value !== 'MacOS') await getCurrentWindow().setDecorations(native_decorations) @@ -592,7 +636,7 @@ async function setupApp() { if (telemetry) { initAnalytics() if (dev) debugAnalytics() - trackEvent('Launched', { version, dev, onboarded }) + trackEvent('Launched', { version, dev }) } if (!dev) document.addEventListener('contextmenu', (event) => event.preventDefault()) @@ -804,6 +848,7 @@ const { projectInfo: contentInstallProjectInfo, handleInstallToInstance, handleCreateAndInstall, + prepareNewInstance, handleNavigate: handleContentInstallNavigate, handleCancel: handleContentInstallCancel, setContentInstallModal, @@ -823,6 +868,35 @@ const { handleIncompatibilityWarningCancel: handleContentInstallIncompatibilityWarningCancel, } = contentInstall +async function prepareCreationProjectInstall(projectId, projectType) { + if (projectType === 'modpack') { + await contentInstall.install( + projectId, + null, + null, + 'CreationModalProject', + undefined, + (instanceId) => void router.push(`/instance/${encodeURIComponent(instanceId)}`), + ) + return null + } + + await prepareNewInstance(projectId) + const info = contentInstallProjectInfo.value + if (!info) throw new Error(`Project information is unavailable: '${projectId}'`) + + return { + projectId, + title: info.title, + iconUrl: info.iconUrl, + link: info.link, + owner: info.owner, + compatibleLoaders: [...contentInstallLoaders.value], + gameVersions: [...contentInstallGameVersions.value], + releaseGameVersions: new Set(contentInstallReleaseGameVersions.value), + } +} + const serverInstall = createServerInstall({ router, handleError, popupNotificationManager }) provideServerInstall(serverInstall) const { @@ -1071,17 +1145,16 @@ async function handleLiveNotification(notification) { if (generation !== liveNotificationGeneration) return const popupNotification = addPopupNotification({ + contentType: 'toast', title: serverName, + type: 'server-invite', + actorName: invitedBy?.username ?? null, + actorAvatarUrl: invitedBy?.avatar_url ?? null, + entityName: serverName, autoCloseMs: null, - toast: { - type: 'server-invite', - actorName: invitedBy?.username ?? null, - actorAvatarUrl: invitedBy?.avatar_url ?? null, - entityName: serverName, - onAccept: () => acceptServerInviteNotification(notification), - onDecline: () => declineServerInviteNotification(notification), - onOpenActor: () => openServerInviteInviterProfile(invitedBy?.username ?? null), - }, + onAccept: () => acceptServerInviteNotification(notification), + onDecline: () => declineServerInviteNotification(notification), + onOpenActor: () => openServerInviteInviterProfile(invitedBy?.username ?? null), }) serverInvitePopupNotificationIds.add(popupNotification.id) } @@ -1258,6 +1331,7 @@ function showDelayedUpdatePopup() { if (metered.value && !finishedDownloading.value) { addPopupNotification({ + contentType: 'standard', title: formatMessage(updatePopupMessages.updateAvailable), text: formatMessage(updatePopupMessages.meteredBody, { version: update.version }), type: 'info', @@ -1279,6 +1353,7 @@ function showDelayedUpdatePopup() { }) } else if (finishedDownloading.value) { addPopupNotification({ + contentType: 'standard', title: formatMessage(updatePopupMessages.downloadComplete), text: formatMessage(updatePopupMessages.downloadedBody, { version: update.version, @@ -1377,6 +1452,7 @@ async function checkLinuxUpdates() { const nextPopupTime = getNextAppUpdatePopupTime(latestVersion) if (nextPopupTime !== null && Date.now() >= nextPopupTime) { addPopupNotification({ + contentType: 'standard', title: formatMessage(updatePopupMessages.updateAvailable), text: formatMessage(updatePopupMessages.linuxBody, { version: latestVersion }), type: 'info', @@ -1559,18 +1635,34 @@ provideAppUpdateDownloadProgress(appUpdateDownload) type="instance" show-snapshot-toggle :fetch-existing-instance-names="fetchExistingInstanceNames" - :search-modpacks="searchModpacks" - :get-project-versions="getProjectVersions" + :search-projects="searchProjects" + :prepare-project-install="prepareCreationProjectInstall" + :create-project-install="handleCreateAndInstall" :get-loader-manifest="getLoaderManifest" + :randomize-instance-icon="randomizeCreationIcon" + :customize-instance-icon="customizeCreationIcon" @create="handleCreate" @browse-modpacks="handleBrowseModpacks" /> +
- - + + - - - @@ -1802,9 +1883,17 @@ provideAppUpdateDownloadProgress(appUpdateDownload) :class="{ 'pb-12': !hasPlus }" data-overlayscrollbars-initialize > +
-
+

{{ formatMessage(messages.playingAs) }}

@@ -1812,7 +1901,10 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
-
+
@@ -1876,6 +1968,8 @@ provideAppUpdateDownloadProgress(appUpdateDownload) :preferred-game-version="contentInstallPreferredGameVersion" :release-game-versions="contentInstallReleaseGameVersions" :project-info="contentInstallProjectInfo" + :randomize-icon="randomizeCreationIcon" + :customize-icon="customizeContentInstallIcon" @install="handleInstallToInstance" @create-and-install="handleCreateAndInstall" @navigate="handleContentInstallNavigate" diff --git a/apps/app-frontend/src/assets/icons/instance-file.svg b/apps/app-frontend/src/assets/icons/instance-file.svg new file mode 100644 index 0000000000..437ade0188 --- /dev/null +++ b/apps/app-frontend/src/assets/icons/instance-file.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/app-frontend/src/assets/instance-icons/dusk-block-gold-test.png b/apps/app-frontend/src/assets/instance-icons/dusk-block-gold-test.png new file mode 100644 index 0000000000..1f7f7f9a00 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/dusk-block-gold-test.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/dusk-block-rose-test.png b/apps/app-frontend/src/assets/instance-icons/dusk-block-rose-test.png new file mode 100644 index 0000000000..20a70a0620 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/dusk-block-rose-test.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/dusk-block-teal-test.png b/apps/app-frontend/src/assets/instance-icons/dusk-block-teal-test.png new file mode 100644 index 0000000000..7382a3a86e Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/dusk-block-teal-test.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/dusk-block.png b/apps/app-frontend/src/assets/instance-icons/dusk-block.png new file mode 100644 index 0000000000..2386f85323 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/dusk-block.png differ diff --git a/apps/app-frontend/src/assets/welcome/modrinth-social-icon.png b/apps/app-frontend/src/assets/welcome/modrinth-social-icon.png new file mode 100644 index 0000000000..09b5dc8e56 Binary files /dev/null and b/apps/app-frontend/src/assets/welcome/modrinth-social-icon.png differ diff --git a/apps/app-frontend/src/components/GridDisplay.vue b/apps/app-frontend/src/components/GridDisplay.vue deleted file mode 100644 index 5004b927b5..0000000000 --- a/apps/app-frontend/src/components/GridDisplay.vue +++ /dev/null @@ -1,360 +0,0 @@ - - - diff --git a/apps/app-frontend/src/components/RowDisplay.vue b/apps/app-frontend/src/components/RowDisplay.vue deleted file mode 100644 index 982b2ad0b1..0000000000 --- a/apps/app-frontend/src/components/RowDisplay.vue +++ /dev/null @@ -1,371 +0,0 @@ - - - - diff --git a/apps/app-frontend/src/components/ui/AccountsCard.vue b/apps/app-frontend/src/components/ui/AccountsCard.vue index 766f234026..33b51bff65 100644 --- a/apps/app-frontend/src/components/ui/AccountsCard.vue +++ b/apps/app-frontend/src/components/ui/AccountsCard.vue @@ -185,6 +185,7 @@ defineExpose({ refreshValues, setEquippedSkin, setLoginDisabled, + login, loginDisabled, }) diff --git a/apps/app-frontend/src/components/ui/AppActionBar.vue b/apps/app-frontend/src/components/ui/AppActionBar.vue index 6790167f3d..5c9325eef0 100644 --- a/apps/app-frontend/src/components/ui/AppActionBar.vue +++ b/apps/app-frontend/src/components/ui/AppActionBar.vue @@ -137,8 +137,8 @@ import { defineMessages, injectNotificationManager, injectPopupNotificationManager, - type PopupNotification, type PopupNotificationProgressItem, + type PopupNotificationStandard, useVIntl, } from '@modrinth/ui' import { convertFileSrc } from '@tauri-apps/api/core' @@ -149,6 +149,7 @@ import { useRouter } from 'vue-router' import AppUpdateButton from '@/components/ui/app-update-button/index.vue' import { useInstallJobNotifications } from '@/composables/browse/install-job-notifications' import { trackEvent } from '@/helpers/analytics' +import { toError } from '@/helpers/errors' import { loading_listener, process_listener } from '@/helpers/events' import { get_many as getInstances } from '@/helpers/instance' import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process' @@ -352,14 +353,16 @@ function getDisplayIconUrl(icon: string | null | undefined): string | null { return convertFileSrc(icon) } -function getNotification(): PopupNotification | null { +function getNotification(): PopupNotificationStandard | null { if (!notificationId.value) { return null } const notification = popupNotificationManager .getNotifications() .find((notification) => notification.id === notificationId.value) - return notification ?? null + return notification?.contentType === 'standard' && notification.type === 'download' + ? notification + : null } function removeNotification(): void { @@ -377,11 +380,17 @@ function syncTerminalNotifications(): void { for (const terminal of terminalNotifications) { const popupId = terminalNotificationIds.get(terminal.id) let notification = popupId - ? popupNotificationManager.getNotifications().find((candidate) => candidate.id === popupId) + ? popupNotificationManager + .getNotifications() + .find( + (candidate): candidate is PopupNotificationStandard => + candidate.id === popupId && candidate.contentType === 'standard', + ) : undefined if (!notification) { notification = popupNotificationManager.addPopupNotification({ + contentType: 'standard', title: terminal.title, text: terminal.text, type: terminal.type, @@ -411,7 +420,7 @@ function syncTerminalNotifications(): void { function buildDownloadItems(): PopupNotificationProgressItem[] { return [ ...installJobNotifications.progressItems.value, - ...currentLoadingBars.value.map((bar) => ({ + ...currentLoadingBars.value.map((bar) => ({ id: getLoadingBarKey(bar), title: bar.title ?? '', text: getLoadingText(bar), @@ -451,7 +460,7 @@ function updateNotification(resummon = false): void { return } - let notif = getNotification() + const notif = getNotification() const progressItems = buildDownloadItems() if (notif) { @@ -463,7 +472,8 @@ function updateNotification(resummon = false): void { notif.progress = undefined notif.waiting = undefined } else { - notif = popupNotificationManager.addPopupNotification({ + const notification = popupNotificationManager.addPopupNotification({ + contentType: 'standard', title: installJobNotifications.active.value ? installJobNotifications.title.value : formatMessage(messages.downloads), @@ -471,7 +481,7 @@ function updateNotification(resummon = false): void { autoCloseMs: null, progressItems, }) - notificationId.value = notif.id + notificationId.value = notification.id } } @@ -548,7 +558,7 @@ async function refreshLoadingBars() { const installJobNotifications = await useInstallJobNotifications({ router, - handleError, + handleError: (error) => handleError(toError(error)), onChange: updateNotification, }) diff --git a/apps/app-frontend/src/components/ui/ContextMenu.vue b/apps/app-frontend/src/components/ui/ContextMenu.vue index 5a74d7a8f7..06f925d21b 100644 --- a/apps/app-frontend/src/components/ui/ContextMenu.vue +++ b/apps/app-frontend/src/components/ui/ContextMenu.vue @@ -34,9 +34,18 @@ const options = ref([]) const left = ref('0px') const top = ref('0px') const shown = ref(false) +const contextMenuId = Symbol() +const contextMenuOpenEvent = 'modrinth-context-menu-open' + +const hideContextMenu = () => { + shown.value = false + emit('menu-closed') +} defineExpose({ showMenu: (event, passedItem, passedOptions) => { + window.dispatchEvent(new CustomEvent(contextMenuOpenEvent, { detail: contextMenuId })) + item.value = passedItem options.value = passedOptions @@ -62,6 +71,7 @@ defineExpose({ } }) }, + hideMenu: hideContextMenu, }) const isInstanceLink = (item) => { @@ -73,11 +83,6 @@ const isInstanceLink = (item) => { return false } -const hideContextMenu = () => { - shown.value = false - emit('menu-closed') -} - const optionClicked = (option) => { emit('option-clicked', { item: item.value, @@ -92,6 +97,12 @@ const onEscKeyRelease = (event) => { } } +const handleContextMenuOpen = (event) => { + if (shown.value && event.detail !== contextMenuId) { + hideContextMenu() + } +} + const handleClickOutside = (event) => { const elements = document.elementsFromPoint(event.clientX, event.clientY) if ( @@ -105,11 +116,13 @@ const handleClickOutside = (event) => { onMounted(() => { window.addEventListener('click', handleClickOutside) + window.addEventListener(contextMenuOpenEvent, handleContextMenuOpen) document.body.addEventListener('keyup', onEscKeyRelease) }) onBeforeUnmount(() => { window.removeEventListener('click', handleClickOutside) + window.removeEventListener(contextMenuOpenEvent, handleContextMenuOpen) document.removeEventListener('keyup', onEscKeyRelease) }) @@ -145,19 +158,19 @@ onBeforeUnmount(() => { &.primary { background-color: var(--color-brand); color: var(--color-accent-contrast); - font-weight: bold; + font-weight: 500; } &.danger { background-color: var(--color-red); color: var(--color-accent-contrast); - font-weight: bold; + font-weight: 500; } &.contrast { background-color: var(--color-orange); color: var(--color-accent-contrast); - font-weight: bold; + font-weight: 500; } } } diff --git a/apps/app-frontend/src/components/ui/Instance.vue b/apps/app-frontend/src/components/ui/Instance.vue index 7c82504eb1..18d4757bfe 100644 --- a/apps/app-frontend/src/components/ui/Instance.vue +++ b/apps/app-frontend/src/components/ui/Instance.vue @@ -8,7 +8,6 @@ import { TimerIcon, } from '@modrinth/assets' import { Avatar, IconButton, injectNotificationManager, useRelativeTime } from '@modrinth/ui' -import { convertFileSrc } from '@tauri-apps/api/core' import dayjs from 'dayjs' import { computed, onMounted, onUnmounted, ref } from 'vue' import { useRouter } from 'vue-router' @@ -16,7 +15,7 @@ import { useRouter } from 'vue-router' import { trackEvent } from '@/helpers/analytics' import { process_listener } from '@/helpers/events' import { install_existing_instance, install_pack_to_existing_instance } from '@/helpers/install' -import { kill, run } from '@/helpers/instance' +import { getInstanceIconUrl, kill, run } from '@/helpers/instance' import { get_by_instance_id } from '@/helpers/process' import { showInstanceInFolder } from '@/helpers/utils.js' import { handleSevereError } from '@/store/error.js' @@ -160,7 +159,7 @@ onUnmounted(() => unlisten()) > @@ -220,7 +219,7 @@ onUnmounted(() => unlisten())
import { GameIcon, LeftArrowIcon } from '@modrinth/assets' import { Avatar, ButtonLink, FormattedTag } from '@modrinth/ui' -import { convertFileSrc } from '@tauri-apps/api/core' import { computed } from 'vue' +import { getInstanceIconUrl } from '@/helpers/instance' + type Instance = { game_version: string loader: string @@ -31,11 +32,7 @@ const instanceLink = computed(() => {
- + {{ instance.name }} diff --git a/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue b/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue index 9a60c3d435..b4184fc421 100644 --- a/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue +++ b/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue @@ -2,13 +2,12 @@ import { SpinnerIcon } from '@modrinth/assets' import { Avatar, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui' import { useQueryClient } from '@tanstack/vue-query' -import { convertFileSrc } from '@tauri-apps/api/core' import dayjs from 'dayjs' import { computed, onMounted, onUnmounted, ref } from 'vue' import NavButton from '@/components/ui/NavButton.vue' import { instance_listener } from '@/helpers/events.js' -import { list } from '@/helpers/instance' +import { getInstanceIconUrl, list } from '@/helpers/instance' import { instanceKeys } from '@/pages/instance/query-options' const ITEM_SIZE = 52 @@ -202,7 +201,7 @@ const dividerTooltip = computed(() => { > +import { ImportIcon, PlusIcon } from '@modrinth/assets' +import { Button } from '@modrinth/ui' +import frog from '@modrinth/ui/src/assets/welcome/frog.png' +import { inject, onMounted, onUnmounted, ref } from 'vue' + +import modrinthSocialIcon from '../../assets/welcome/modrinth-social-icon.png' + +const showCreationModal = inject<() => void>('showCreationModal') +const showImportModal = inject<() => void>('showImportModal') + +const offline = ref(!navigator.onLine) + +function handleOffline() { + offline.value = true +} + +function handleOnline() { + offline.value = false +} + +function handleQuickCreate(event: KeyboardEvent) { + const target = event.target as HTMLElement | null + if ( + event.key.toLowerCase() !== 'n' || + event.repeat || + event.metaKey || + event.ctrlKey || + event.altKey || + target?.isContentEditable || + ['INPUT', 'TEXTAREA', 'SELECT'].includes(target?.tagName ?? '') + ) { + return + } + + if (!offline.value) { + event.preventDefault() + showCreationModal?.() + } +} + +onMounted(() => { + window.addEventListener('offline', handleOffline) + window.addEventListener('online', handleOnline) + window.addEventListener('keydown', handleQuickCreate) +}) + +onUnmounted(() => { + window.removeEventListener('offline', handleOffline) + window.removeEventListener('online', handleOnline) + window.removeEventListener('keydown', handleQuickCreate) +}) + + + + + diff --git a/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue b/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue index 9845331baf..6f86c33e24 100644 --- a/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue +++ b/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue @@ -2,12 +2,11 @@ import { CheckIcon, PlusIcon, SearchIcon } from '@modrinth/assets' import { Admonition, Avatar, Button, injectNotificationManager, StyledInput } from '@modrinth/ui' import { useQueryClient } from '@tanstack/vue-query' -import { convertFileSrc } from '@tauri-apps/api/core' import { computed, ref } from 'vue' import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue' import { trackEvent } from '@/helpers/analytics' -import { list } from '@/helpers/instance' +import { getInstanceIconUrl, list } from '@/helpers/instance' import { add_server_to_instance, get_instance_worlds } from '@/helpers/worlds.ts' import { instanceKeys } from '@/pages/instance/query-options' @@ -98,10 +97,7 @@ async function addServer(instance) { :to="`/instance/${encodeURIComponent(instance.id)}`" @click="modal.hide()" > - + {{ instance.name }}