From 46c325f78acf80cb0cc39e66bd36314c5d54c9a2 Mon Sep 17 00:00:00 2001 From: Prospector <6166773+Prospector@users.noreply.github.com> Date: Thu, 28 Aug 2025 15:11:35 -0700 Subject: [PATCH] Envs v3 frontend (#4267) * New envs frontend * lint fix * Add blog post, user-facing changes, dashboard warning, project page member warning, and migration reviewing. maybe some other misc stuff * lint * lint * ignore .data in .prettierignore * i18n as fuck * fix proj page * Improve news markdown rendering * improve phrasing of initial paragraph * Fix environments not reloading after save * index.ts instead of underscored name * shrink-0 back on these icons --- apps/frontend/.prettierignore | 1 + apps/frontend/src/app.vue | 20 + apps/frontend/src/assets/styles/layout.scss | 1 + .../src/components/ui/NavStackItem.vue | 94 +-- .../ui/moderation/ModerationProjectNags.vue | 6 +- apps/frontend/src/composables/featureFlags.ts | 2 + apps/frontend/src/composables/user.js | 1 + apps/frontend/src/locales/en-US/index.json | 210 ++++++ apps/frontend/src/pages/[type]/[id].vue | 674 ++++++++++++------ .../src/pages/[type]/[id]/settings.vue | 162 +++++ .../[type]/[id]/settings/environment.vue | 165 +++++ .../pages/[type]/[id]/settings/general.vue | 192 +++++ .../src/pages/[type]/[id]/settings/index.vue | 9 + .../frontend/src/pages/dashboard/projects.vue | 28 +- .../src/pages/news/article/[slug].vue | 5 +- .../new-environments/env-settings.webp | Bin 0 -> 126996 bytes .../article/new-environments/thumbnail.webp | Bin 0 -> 29724 bytes .../src/public/news/feed/articles.json | 7 + apps/frontend/src/public/news/feed/rss.xml | 10 +- packages/blog/articles/new-environments.md | 80 +++ packages/blog/compiled/index.ts | 2 + .../blog/compiled/new_environments.content.ts | 2 + packages/blog/compiled/new_environments.ts | 11 + .../public/new-environments/env-settings.webp | Bin 0 -> 126996 bytes .../public/new-environments/thumbnail.webp | Bin 0 -> 29724 bytes packages/moderation/src/data/nags/core.ts | 10 +- .../moderation/src/locales/en-US/index.json | 6 +- .../ui/src/components/base/IconSelect.vue | 76 ++ .../src/components/base/LargeRadioButton.vue | 22 + .../ui/src/components/base/SettingsLabel.vue | 44 ++ .../components/base/UnsavedChangesPopup.vue | 106 +++ packages/ui/src/components/index.ts | 14 +- .../project/ProjectSidebarCompatibility.vue | 117 ++- packages/ui/src/components/project/index.ts | 14 + .../ProjectSettingsEnvSelector.vue | 271 +++++++ .../src/components/project/settings/index.ts | 2 + packages/ui/src/locales/en-US/index.json | 144 ++++ packages/ui/src/providers/api.ts | 5 + packages/ui/src/providers/index.ts | 1 + packages/ui/src/providers/project-page.ts | 13 + packages/ui/src/types.d.ts | 2 + packages/ui/src/utils/common-messages.ts | 224 ++++-- packages/ui/src/utils/index.ts | 1 + packages/ui/src/utils/savable.ts | 38 + packages/utils/api/default_impl.ts | 41 ++ packages/utils/api/index.ts | 7 + packages/utils/api/projects.ts | 41 ++ packages/utils/index.ts | 1 + packages/utils/types.ts | 24 +- 49 files changed, 2509 insertions(+), 397 deletions(-) create mode 100644 apps/frontend/src/pages/[type]/[id]/settings.vue create mode 100644 apps/frontend/src/pages/[type]/[id]/settings/environment.vue create mode 100644 apps/frontend/src/pages/[type]/[id]/settings/general.vue create mode 100644 apps/frontend/src/public/news/article/new-environments/env-settings.webp create mode 100644 apps/frontend/src/public/news/article/new-environments/thumbnail.webp create mode 100644 packages/blog/articles/new-environments.md create mode 100644 packages/blog/compiled/new_environments.content.ts create mode 100644 packages/blog/compiled/new_environments.ts create mode 100644 packages/blog/public/new-environments/env-settings.webp create mode 100644 packages/blog/public/new-environments/thumbnail.webp create mode 100644 packages/ui/src/components/base/IconSelect.vue create mode 100644 packages/ui/src/components/base/LargeRadioButton.vue create mode 100644 packages/ui/src/components/base/SettingsLabel.vue create mode 100644 packages/ui/src/components/base/UnsavedChangesPopup.vue create mode 100644 packages/ui/src/components/project/index.ts create mode 100644 packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue create mode 100644 packages/ui/src/components/project/settings/index.ts create mode 100644 packages/ui/src/providers/api.ts create mode 100644 packages/ui/src/providers/project-page.ts create mode 100644 packages/ui/src/types.d.ts create mode 100644 packages/ui/src/utils/savable.ts create mode 100644 packages/utils/api/default_impl.ts create mode 100644 packages/utils/api/index.ts create mode 100644 packages/utils/api/projects.ts diff --git a/apps/frontend/.prettierignore b/apps/frontend/.prettierignore index d4f9ef965..b16cc9509 100644 --- a/apps/frontend/.prettierignore +++ b/apps/frontend/.prettierignore @@ -1,6 +1,7 @@ **/.nuxt **/dist **/.output +**/.data src/generated/** src/locales/** src/public/news/feed diff --git a/apps/frontend/src/app.vue b/apps/frontend/src/app.vue index c79296bce..08c6e15e8 100644 --- a/apps/frontend/src/app.vue +++ b/apps/frontend/src/app.vue @@ -7,10 +7,30 @@ diff --git a/apps/frontend/src/assets/styles/layout.scss b/apps/frontend/src/assets/styles/layout.scss index 396481ed5..d0010f7aa 100644 --- a/apps/frontend/src/assets/styles/layout.scss +++ b/apps/frontend/src/assets/styles/layout.scss @@ -42,6 +42,7 @@ padding: 0 1.5rem; grid-template: + 'header' 'sidebar' 'content' 'info' diff --git a/apps/frontend/src/components/ui/NavStackItem.vue b/apps/frontend/src/components/ui/NavStackItem.vue index 06146758f..aff9b434e 100644 --- a/apps/frontend/src/components/ui/NavStackItem.vue +++ b/apps/frontend/src/components/ui/NavStackItem.vue @@ -1,23 +1,18 @@ @@ -42,9 +37,9 @@ export default { required: true, type: String, }, - beta: { - default: false, - type: Boolean, + badge: { + default: null, + type: String, }, chevron: { default: false, @@ -59,58 +54,11 @@ export default { diff --git a/apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue b/apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue index 772cd765c..23ffaff76 100644 --- a/apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue +++ b/apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue @@ -7,17 +7,17 @@
- + {{ getFormattedMessage(messages.required) }}
|
- + {{ getFormattedMessage(messages.warning) }}
|
- + {{ getFormattedMessage(messages.suggestion) }}
diff --git a/apps/frontend/src/composables/featureFlags.ts b/apps/frontend/src/composables/featureFlags.ts index 7d6d48272..eee07cad8 100644 --- a/apps/frontend/src/composables/featureFlags.ts +++ b/apps/frontend/src/composables/featureFlags.ts @@ -35,6 +35,8 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({ showProjectPageDownloadModalServersPromo: false, showProjectPageCreateServersTooltip: true, showProjectPageQuickServerButton: false, + newProjectGeneralSettings: false, + newProjectEnvironmentSettings: true, // advancedRendering: true, // externalLinksNewTab: true, // notUsingBlockers: false, diff --git a/apps/frontend/src/composables/user.js b/apps/frontend/src/composables/user.js index c4b4b078f..fc04a14c9 100644 --- a/apps/frontend/src/composables/user.js +++ b/apps/frontend/src/composables/user.js @@ -77,6 +77,7 @@ export const initUserProjects = async () => { if (auth.user && auth.user.id) { try { user.projects = await useBaseFetch(`user/${auth.user.id}/projects`) + user.projectsV3 = await useBaseFetch(`user/${auth.user.id}/projects`, { apiVersion: 3 }) } catch (err) { console.error(err) } diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json index a47347d79..54d39bf84 100644 --- a/apps/frontend/src/locales/en-US/index.json +++ b/apps/frontend/src/locales/en-US/index.json @@ -683,21 +683,231 @@ "project.about.details.updated": { "message": "Updated {date}" }, + "project.actions.create-server": { + "message": "Create a server" + }, + "project.actions.create-server-tooltip": { + "message": "Create a server" + }, + "project.actions.dont-show-again": { + "message": "Don't show again" + }, + "project.actions.review-project": { + "message": "Review project" + }, + "project.actions.servers-promo.description": { + "message": "Modrinth Servers is the easiest way to play with your friends without hassle!" + }, + "project.actions.servers-promo.monthly": { + "message": " / month" + }, + "project.actions.servers-promo.pricing": { + "message": "Starting at $5{monthly}" + }, + "project.actions.servers-promo.title": { + "message": "Create a server" + }, + "project.collections.create-new": { + "message": "Create new collection" + }, + "project.collections.none-found": { + "message": "No collections found." + }, "project.description.title": { "message": "Description" }, + "project.details.licensed": { + "message": "Licensed" + }, + "project.download.game-version": { + "message": "Game version: {version}" + }, + "project.download.game-version-error": { + "message": "Error: no game versions found" + }, + "project.download.game-version-tooltip": { + "message": "{title} is only available for {version}" + }, + "project.download.game-version-unsupported-tooltip": { + "message": "{title} does not support {gameVersion} for {platform}" + }, + "project.download.install-with-app": { + "message": "Install with Modrinth App" + }, + "project.download.no-app": { + "message": "Don't have Modrinth App?" + }, + "project.download.no-versions-available": { + "message": "No versions available for {gameVersion} and {platform}." + }, + "project.download.platform": { + "message": "Platform: {platform}" + }, + "project.download.platform-error": { + "message": "Error: no platforms found" + }, + "project.download.platform-tooltip": { + "message": "{title} is only available for {platform}" + }, + "project.download.platform-unsupported-tooltip": { + "message": "{title} does not support {platform} for {gameVersion}" + }, + "project.download.search-game-versions": { + "message": "Search game versions..." + }, + "project.download.search-game-versions-label": { + "message": "Search game versions..." + }, + "project.download.select-game-version": { + "message": "Select game version" + }, + "project.download.select-platform": { + "message": "Select platform" + }, + "project.download.show-all-versions": { + "message": "Show all versions" + }, + "project.download.title": { + "message": "Download {title}" + }, + "project.environment.migration.message": { + "message": "We've just overhauled the Environments system on Modrinth and new options are now available. Please visit your project's settings and verify that the metadata is correct." + }, + "project.environment.migration.review-button": { + "message": "Review environment settings" + }, + "project.environment.migration.title": { + "message": "Please review environment metadata" + }, + "project.error.loading": { + "message": "Error loading project data{message}" + }, + "project.error.page-not-found": { + "message": "The page could not be found" + }, + "project.error.project-not-found": { + "message": "Project not found" + }, "project.gallery.title": { "message": "Gallery" }, + "project.license.error": { + "message": "License text could not be retrieved." + }, + "project.license.loading": { + "message": "Loading license text..." + }, + "project.license.title": { + "message": "License" + }, "project.moderation.title": { "message": "Moderation" }, + "project.navigation.changelog": { + "message": "Changelog" + }, + "project.notification.icon-updated.message": { + "message": "Your project's icon has been updated." + }, + "project.notification.icon-updated.title": { + "message": "Project icon updated" + }, + "project.notification.updated.message": { + "message": "Your project has been updated." + }, + "project.notification.updated.title": { + "message": "Project updated" + }, + "project.settings.environment.notice.missing-env.description": { + "message": "Your project is missing environment metadata, please select the appropriate option below." + }, + "project.settings.environment.notice.missing-env.title": { + "message": "Please select an environment for your project" + }, + "project.settings.environment.notice.multiple-environments.description": { + "message": "Different versions of your project have different environments selected, so you can't edit them globally at this time." + }, + "project.settings.environment.notice.multiple-environments.title": { + "message": "Your project has multiple environments" + }, + "project.settings.environment.notice.review-options.description": { + "message": "We've just overhauled the Environments system on Modrinth and new options are now available. Please ensure the correct option is selected below and then click 'Verify' when you're done!" + }, + "project.settings.environment.notice.review-options.title": { + "message": "Please review the options below" + }, + "project.settings.environment.notice.wrong-project-type.description": { + "message": "Only mod or modpack projects can have environment metadata." + }, + "project.settings.environment.notice.wrong-project-type.title": { + "message": "This project type does not support environment metadata" + }, + "project.settings.environment.verification.verify-button": { + "message": "Verify" + }, + "project.settings.environment.verification.verify-text": { + "message": "Verify that this project's environment is set correctly." + }, + "project.settings.general.name.description": { + "message": "Avoid prefixes, suffixes, parentheticals, or added descriptions—just the project's actual name." + }, + "project.settings.general.name.placeholder.1": { + "message": "e.g. Nether Overhaul 2" + }, + "project.settings.general.name.placeholder.2": { + "message": "e.g. Construction Equipment" + }, + "project.settings.general.name.placeholder.3": { + "message": "e.g. Better than Caving" + }, + "project.settings.general.name.placeholder.4": { + "message": "e.g. Enhanced Portals" + }, + "project.settings.general.name.placeholder.5": { + "message": "e.g. Dangerous Mobs" + }, + "project.settings.general.name.title": { + "message": "Name" + }, + "project.settings.general.tagline.description": { + "message": "Summarize your project in no more than one sentence." + }, + "project.settings.general.tagline.placeholder.1": { + "message": "e.g. Overhauls game progression to revolve around the Nether." + }, + "project.settings.general.tagline.placeholder.2": { + "message": "e.g. Adds wearable construction gear." + }, + "project.settings.general.tagline.placeholder.3": { + "message": "e.g. Adds realistic mineshaft-building mechanics." + }, + "project.settings.general.tagline.placeholder.4": { + "message": "e.g. Improves how Nether portals link to each other." + }, + "project.settings.general.tagline.placeholder.5": { + "message": "e.g. Adds powerful boss versions of the normal mobs to encounter in the night." + }, + "project.settings.general.tagline.title": { + "message": "Tagline" + }, + "project.settings.general.url.title": { + "message": "URL" + }, + "project.settings.title": { + "message": "Settings" + }, + "project.settings.visit-dashboard": { + "message": "Visit projects dashboard" + }, "project.stats.downloads-label": { "message": "download{count, plural, one {} other {s}}" }, "project.stats.followers-label": { "message": "follower{count, plural, one {} other {s}}" }, + "project.status.archived.message": { + "message": "{title} has been archived. {title} will not receive any further updates unless the author decides to unarchive the project." + }, "project.version.all-versions": { "message": "All versions" }, diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue index 1615608e1..ef7a98fc4 100644 --- a/apps/frontend/src/pages/[type]/[id].vue +++ b/apps/frontend/src/pages/[type]/[id].vue @@ -2,118 +2,32 @@ -
-
- -
- -
+
+
+
- +
@@ -203,7 +127,7 @@ @@ -393,7 +340,11 @@
@@ -511,7 +467,7 @@ :color="route.name === 'type-id-version-version' ? `standard` : `brand`" >
@@ -589,13 +547,26 @@ > - + @@ -603,10 +574,12 @@
@@ -639,13 +612,14 @@
@@ -657,18 +631,27 @@ - + - + @@ -676,7 +659,7 @@