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 3db155776b..eeb37273f6 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' @@ -74,6 +73,7 @@ import FriendsList from '@/components/ui/friends/FriendsList.vue' import HostingUpdateRequired from '@/components/ui/HostingUpdateRequired.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' @@ -82,6 +82,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' @@ -248,7 +251,7 @@ useAppEvent( 'warning', (event) => addNotification({ - title: 'Warning', + title: formatMessage(messages.warning), text: event.message, type: 'warning', }), @@ -332,19 +335,68 @@ provideModalBehavior({ onHide: () => release_ads_window_hold(), }) +const creationIconEditorModal = ref(null) +const creationGeneratedIcon = ref(null) +const creationIconTarget = ref('creation-flow') + const { installationModal, unknownPackWarningModal, fetchExistingInstanceNames, handleCreate, handleBrowseModpacks, - searchModpacks, - getProjectVersions, + searchProjects, getLoaderManifest, setModpackAlreadyInstalledModal, handleModpackDuplicateCreateAnyway, handleModpackDuplicateGoToInstance, -} = setupProviders(tauriApiClient, notificationManager, popupNotificationManager) + onboardingChecklist, +} = setupProviders( + tauriApiClient, + notificationManager, + popupNotificationManager, + appEvents, + (iconPath) => + creationGeneratedIcon.value?.path === iconPath ? creationGeneratedIcon.value.config : null, +) +const { hasLoggedIntoMinecraft, hasLoggedIntoModrinth, showChecklist } = onboardingChecklist +const showFriendsList = computed(() => !showChecklist.value || hasLoggedIntoModrinth.value) + +async function randomizeCreationIcon() { + const generated = await creationIconEditorModal.value?.randomizeAndSave() + if (!generated) return null + + creationGeneratedIcon.value = { path: generated.iconPath, config: generated.config } + return { + path: generated.iconPath, + previewUrl: convertFileSrc(generated.iconPath), + } +} + +function customizeCreationIcon() { + creationIconTarget.value = 'creation-flow' + creationIconEditorModal.value?.show() +} + +function customizeContentInstallIcon() { + creationIconTarget.value = 'content-install' + creationIconEditorModal.value?.show() +} + +function onCreationIconSaved(iconPath, config) { + creationGeneratedIcon.value = { path: iconPath, config } + 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() @@ -360,7 +412,6 @@ window.addEventListener('online', () => { offline.value = false }) -const showOnboarding = ref(false) const nativeDecorations = ref(false) const os = ref('') @@ -425,6 +476,15 @@ const { formatMessage } = useVIntl() const formatBytes = useFormatBytes() const messages = defineMessages({ + warning: { id: 'app.notification.warning', defaultMessage: 'Warning' }, + moreOptions: { id: 'app.navigation.more-options', defaultMessage: 'More options' }, + goBack: { id: 'app.navigation.go-back', defaultMessage: 'Go back' }, + goForward: { id: 'app.navigation.go-forward', defaultMessage: 'Go forward' }, + nextImage: { id: 'app.navigation.next-image', defaultMessage: 'Next image' }, + updateDownloadMissingVersion: { + id: 'app.update.download-error.missing-version', + defaultMessage: 'Failed to download update: no version available', + }, updateInstalledToastTitle: { id: 'app.update.complete-toast.title', defaultMessage: 'Version {version} was successfully installed!', @@ -467,10 +527,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', @@ -530,6 +586,7 @@ function handleAdsConsentRequired(required) { } const notification = addPopupNotification({ + contentType: 'standard', title: formatMessage(messages.adsConsentTitle), text: formatMessage(messages.adsConsentBody), type: 'info', @@ -562,6 +619,16 @@ function handleAdsConsentRequired(required) { } async function setupApp() { + await onboardingChecklist.initialize() + + if (shouldShowNewIconEditorNotification(showChecklist.value)) { + addPopupNotification({ + contentType: 'custom', + component: NewIconEditorNotification, + autoCloseMs: null, + }) + } + const { native_decorations, theme, @@ -570,8 +637,6 @@ async function setupApp() { collapsed_navigation, hide_nametag_skins_page, advanced_rendering, - onboarded, - default_page, toggle_sidebar, developer_mode, feature_flags, @@ -583,16 +648,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) @@ -614,7 +673,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()) @@ -818,6 +877,7 @@ const { projectInfo: contentInstallProjectInfo, handleInstallToInstance, handleCreateAndInstall, + prepareNewInstance, handleNavigate: handleContentInstallNavigate, handleCancel: handleContentInstallCancel, setContentInstallModal, @@ -837,6 +897,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, @@ -1090,17 +1179,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) } @@ -1277,6 +1365,7 @@ function showDelayedUpdatePopup() { if (metered.value && !finishedDownloading.value) { addPopupNotification({ + contentType: 'standard', title: formatMessage(updatePopupMessages.updateAvailable), text: formatMessage(updatePopupMessages.meteredBody, { version: update.version }), type: 'info', @@ -1298,6 +1387,7 @@ function showDelayedUpdatePopup() { }) } else if (finishedDownloading.value) { addPopupNotification({ + contentType: 'standard', title: formatMessage(updatePopupMessages.downloadComplete), text: formatMessage(updatePopupMessages.downloadedBody, { version: update.version, @@ -1396,6 +1486,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', @@ -1415,7 +1506,7 @@ async function downloadAvailableUpdate() { async function downloadUpdate(versionToDownload) { if (!versionToDownload) { - handleError(`Failed to download update: no version available`) + handleError(formatMessage(messages.updateDownloadMissingVersion)) return } @@ -1579,18 +1670,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" /> +
- - + + - - - @@ -1823,9 +1919,17 @@ provideAppUpdateDownloadProgress(appUpdateDownload) :class="{ 'pb-12': !hasPlus }" data-overlayscrollbars-initialize > +
-
+

{{ formatMessage(messages.playingAs) }}

@@ -1833,7 +1937,10 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
-
+
@@ -1897,6 +2004,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/backpack.png b/apps/app-frontend/src/assets/instance-icons/backpack.png new file mode 100755 index 0000000000..48e085a82c Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/backpack.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/beacon.png b/apps/app-frontend/src/assets/instance-icons/beacon.png new file mode 100755 index 0000000000..f292990c45 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/beacon.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/blue-shark.png b/apps/app-frontend/src/assets/instance-icons/blue-shark.png new file mode 100755 index 0000000000..b2be9cbe6d Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/blue-shark.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/bookshelf.png b/apps/app-frontend/src/assets/instance-icons/bookshelf.png new file mode 100755 index 0000000000..8b5cd311ef Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/bookshelf.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/brown-bear.png b/apps/app-frontend/src/assets/instance-icons/brown-bear.png new file mode 100755 index 0000000000..7d79594bad Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/brown-bear.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/cake.png b/apps/app-frontend/src/assets/instance-icons/cake.png new file mode 100755 index 0000000000..ad91e8b7e0 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/cake.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/campfire.png b/apps/app-frontend/src/assets/instance-icons/campfire.png new file mode 100755 index 0000000000..812af89118 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/campfire.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/chest.png b/apps/app-frontend/src/assets/instance-icons/chest.png new file mode 100755 index 0000000000..afb215e61d Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/chest.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/cogwheel.png b/apps/app-frontend/src/assets/instance-icons/cogwheel.png new file mode 100755 index 0000000000..aac5766e5c Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/cogwheel.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/command-block.png b/apps/app-frontend/src/assets/instance-icons/command-block.png new file mode 100755 index 0000000000..63970a023d Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/command-block.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/cooking-pot.png b/apps/app-frontend/src/assets/instance-icons/cooking-pot.png new file mode 100755 index 0000000000..afc8b37262 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/cooking-pot.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/couch.png b/apps/app-frontend/src/assets/instance-icons/couch.png new file mode 100755 index 0000000000..ad38323aae Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/couch.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/crafting-table.png b/apps/app-frontend/src/assets/instance-icons/crafting-table.png new file mode 100755 index 0000000000..d167c30a0b Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/crafting-table.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/creeper.png b/apps/app-frontend/src/assets/instance-icons/creeper.png new file mode 100755 index 0000000000..861875269b Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/creeper.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/enchanting-table.png b/apps/app-frontend/src/assets/instance-icons/enchanting-table.png new file mode 100755 index 0000000000..4d1c29a0b7 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/enchanting-table.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/ender-chest.png b/apps/app-frontend/src/assets/instance-icons/ender-chest.png new file mode 100755 index 0000000000..4bf9085ab8 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/ender-chest.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/ender-dragon.png b/apps/app-frontend/src/assets/instance-icons/ender-dragon.png new file mode 100755 index 0000000000..d0b9048e2d Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/ender-dragon.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/engine.png b/apps/app-frontend/src/assets/instance-icons/engine.png new file mode 100755 index 0000000000..438e17a270 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/engine.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/furnace.png b/apps/app-frontend/src/assets/instance-icons/furnace.png new file mode 100755 index 0000000000..207f2e8580 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/furnace.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/gizmo.png b/apps/app-frontend/src/assets/instance-icons/gizmo.png new file mode 100755 index 0000000000..ce11f1d199 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/gizmo.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/globe.png b/apps/app-frontend/src/assets/instance-icons/globe.png new file mode 100755 index 0000000000..e58bc94b76 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/globe.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/grass-block.png b/apps/app-frontend/src/assets/instance-icons/grass-block.png new file mode 100755 index 0000000000..2f4c618bde Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/grass-block.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/lantern.png b/apps/app-frontend/src/assets/instance-icons/lantern.png new file mode 100755 index 0000000000..770f066545 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/lantern.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/moobloom.png b/apps/app-frontend/src/assets/instance-icons/moobloom.png new file mode 100755 index 0000000000..52a54566d6 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/moobloom.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/mr-pack.png b/apps/app-frontend/src/assets/instance-icons/mr-pack.png new file mode 100755 index 0000000000..2d8d99bc3c Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/mr-pack.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/orb.png b/apps/app-frontend/src/assets/instance-icons/orb.png new file mode 100755 index 0000000000..0d3236c696 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/orb.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/oxygen-distributor.png b/apps/app-frontend/src/assets/instance-icons/oxygen-distributor.png new file mode 100755 index 0000000000..ecaf7635f9 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/oxygen-distributor.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/pancakes.png b/apps/app-frontend/src/assets/instance-icons/pancakes.png new file mode 100755 index 0000000000..b2cf89ac6d Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/pancakes.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/pickaxe.png b/apps/app-frontend/src/assets/instance-icons/pickaxe.png new file mode 100755 index 0000000000..5b4cc24916 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/pickaxe.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/poke-ball.png b/apps/app-frontend/src/assets/instance-icons/poke-ball.png new file mode 100755 index 0000000000..1e2a847368 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/poke-ball.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/redstone-block.png b/apps/app-frontend/src/assets/instance-icons/redstone-block.png new file mode 100755 index 0000000000..74a5203dec Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/redstone-block.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/sculk-sensor.png b/apps/app-frontend/src/assets/instance-icons/sculk-sensor.png new file mode 100755 index 0000000000..1eda1df523 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/sculk-sensor.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/skeleton.png b/apps/app-frontend/src/assets/instance-icons/skeleton.png new file mode 100644 index 0000000000..8446bf7bd9 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/skeleton.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/skillet.png b/apps/app-frontend/src/assets/instance-icons/skillet.png new file mode 100755 index 0000000000..5b19a39e09 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/skillet.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/slime-block.png b/apps/app-frontend/src/assets/instance-icons/slime-block.png new file mode 100755 index 0000000000..e2eae3fdb5 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/slime-block.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/space-helmet.png b/apps/app-frontend/src/assets/instance-icons/space-helmet.png new file mode 100644 index 0000000000..b31f746909 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/space-helmet.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/sticky-piston.png b/apps/app-frontend/src/assets/instance-icons/sticky-piston.png new file mode 100755 index 0000000000..47627f0fd5 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/sticky-piston.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/sword.png b/apps/app-frontend/src/assets/instance-icons/sword.png new file mode 100755 index 0000000000..edb12fd95e Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/sword.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/terminal.png b/apps/app-frontend/src/assets/instance-icons/terminal.png new file mode 100755 index 0000000000..7b1e91244b Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/terminal.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/tiny-potato.png b/apps/app-frontend/src/assets/instance-icons/tiny-potato.png new file mode 100755 index 0000000000..f696894ae7 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/tiny-potato.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/tire.png b/apps/app-frontend/src/assets/instance-icons/tire.png new file mode 100755 index 0000000000..0ea6ad995f Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/tire.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/tnt.png b/apps/app-frontend/src/assets/instance-icons/tnt.png new file mode 100755 index 0000000000..9848ad076d Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/tnt.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/wrench-rinth.png b/apps/app-frontend/src/assets/instance-icons/wrench-rinth.png new file mode 100755 index 0000000000..f710969fb4 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/wrench-rinth.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/wrench.png b/apps/app-frontend/src/assets/instance-icons/wrench.png new file mode 100755 index 0000000000..c504bcd620 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/wrench.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/zombie.png b/apps/app-frontend/src/assets/instance-icons/zombie.png new file mode 100644 index 0000000000..b69c6b3ffa Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/zombie.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..d9e8d54759 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 f1cb5fa479..ac9136f6c2 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 9eca5548f4..49101df43b 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' @@ -150,6 +150,7 @@ import AppUpdateButton from '@/components/ui/app-update-button/index.vue' import { useInstallJobNotifications } from '@/composables/browse/install-job-notifications' import { useAppEvent } from '@/composables/use-app-event' import { trackEvent } from '@/helpers/analytics' +import { toError } from '@/helpers/errors' import { get_many as getInstances } from '@/helpers/instance' import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process' import type { LoadingBar } from '@/helpers/state' @@ -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..42d34cda4b 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) }) @@ -128,15 +141,24 @@ onBeforeUnmount(() => { .item { align-items: center; - color: var(--color-base); + color: var(--color-text-primary); + font-weight: 500; cursor: pointer; display: flex; gap: var(--gap-sm); padding: var(--gap-sm); border-radius: var(--radius-sm); + :deep(svg) { + color: var(--color-base); + } + &:hover, &:active { + :deep(svg) { + color: inherit; + } + &.base { background-color: var(--color-button-bg); color: var(--color-contrast); @@ -145,19 +167,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 7540fb5865..2bc32b67fc 100644 --- a/apps/app-frontend/src/components/ui/Instance.vue +++ b/apps/app-frontend/src/components/ui/Instance.vue @@ -7,8 +7,14 @@ import { StopCircleIcon, TimerIcon, } from '@modrinth/assets' -import { Avatar, IconButton, injectNotificationManager, useRelativeTime } from '@modrinth/ui' -import { convertFileSrc } from '@tauri-apps/api/core' +import { + Avatar, + defineMessages, + IconButton, + injectNotificationManager, + useRelativeTime, + useVIntl, +} from '@modrinth/ui' import dayjs from 'dayjs' import { computed, onMounted, ref } from 'vue' import { useRouter } from 'vue-router' @@ -16,13 +22,24 @@ import { useRouter } from 'vue-router' import { useAppEvent } from '@/composables/use-app-event' import { trackEvent } from '@/helpers/analytics' 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' const { handleError } = injectNotificationManager() +const { formatMessage } = useVIntl() const formatRelativeTime = useRelativeTime() +const messages = defineMessages({ + instanceIcon: { id: 'app.instance.card.icon-alt', defaultMessage: 'Instance icon' }, + stop: { id: 'app.instance.card.stop', defaultMessage: 'Stop' }, + loading: { id: 'app.instance.card.loading', defaultMessage: 'Instance is loading...' }, + installing: { id: 'app.instance.card.installing', defaultMessage: 'Installing...' }, + play: { id: 'app.instance.card.play', defaultMessage: 'Play' }, + repair: { id: 'app.instance.card.repair', defaultMessage: 'Repair' }, + played: { id: 'app.instance.card.played', defaultMessage: 'Played {relativeTime}' }, + neverPlayed: { id: 'app.instance.card.never-played', defaultMessage: 'Never played' }, +}) const props = defineProps({ instance: { @@ -159,9 +176,9 @@ onMounted(() => { >
{{ instance.name }} @@ -169,10 +186,10 @@ onMounted(() => {
@@ -180,18 +197,18 @@ onMounted(() => { @@ -203,9 +220,13 @@ onMounted(() => { - +
@@ -219,19 +240,19 @@ onMounted(() => {
{ @@ -259,11 +280,11 @@ onMounted(() => { import { GameIcon, LeftArrowIcon } from '@modrinth/assets' -import { Avatar, ButtonLink, FormattedTag } from '@modrinth/ui' -import { convertFileSrc } from '@tauri-apps/api/core' +import { Avatar, ButtonLink, defineMessages, FormattedTag, useVIntl } from '@modrinth/ui' import { computed } from 'vue' +import { getInstanceIconUrl } from '@/helpers/instance' + +const { formatMessage } = useVIntl() +const messages = defineMessages({ + backToInstance: { + id: 'app.instance.navigation.back-to-instance', + defaultMessage: 'Back to instance', + }, +}) + type Instance = { game_version: string loader: string @@ -31,11 +40,7 @@ const instanceLink = computed(() => {
- + {{ instance.name }} @@ -48,7 +53,9 @@ const instanceLink = computed(() => { - Back to instance + + {{ formatMessage(messages.backToInstance) }} +
diff --git a/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue b/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue index fdf1de976b..0bbabbf9c1 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 { useAppEvent } from '@/composables/use-app-event' -import { list } from '@/helpers/instance' +import { getInstanceIconUrl, list } from '@/helpers/instance' import { instanceKeys } from '@/pages/instance/query-options' const ITEM_SIZE = 52 @@ -201,7 +200,7 @@ const dividerTooltip = computed(() => { > +import { ImportIcon, PlusIcon } from '@modrinth/assets' +import { Button, defineMessages, IntlFormatted, useVIntl } from '@modrinth/ui' +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 { formatMessage } = useVIntl() + +const messages = defineMessages({ + welcomeTitle: { + id: 'app.welcome-screen.title', + defaultMessage: 'Welcome to Modrinth', + }, + welcomeDescription: { + id: 'app.welcome-screen.description', + defaultMessage: 'Ready to start playing?', + }, + createInstance: { + id: 'app.welcome-screen.create-instance', + defaultMessage: 'Create an instance', + }, + quickCreateHint: { + id: 'app.welcome-screen.quick-create-hint', + defaultMessage: 'Press N to quick create an instance', + }, + importPrompt: { + id: 'app.welcome-screen.import-prompt', + defaultMessage: 'Escaping another launcher?', + }, + importFromLauncher: { + id: 'app.welcome-screen.import-from-launcher', + defaultMessage: 'Import from launcher', + }, +}) + +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..b61ea81cbc 100644 --- a/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue +++ b/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue @@ -1,17 +1,40 @@