feat: managing project versions #4811

tdgao · 2025-11-23T08:10:06Z

Feature:

New create version flow, located in project settings page

Added:

MultiStageModal component
DropzoneFileInput component
Versions labrinth type
Versions labrinth calls for api-client
folder-up icon
Tailwind preset (though only used by ui package for now)

packages/ui/src/components/base/MultiStageModal.vue

apps/frontend/src/components/ui/create-project-version/MultiStageModal.vue

apps/frontend/src/providers/versions.ts

apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue

…etected data

…ys being "required"

IMB11

Very good! Just a few nitpicks and changes that could be considered

IMB11 · 2025-12-08T09:25:14Z

apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue

+import AddLoadersStage from './stages/AddLoadersStage.vue'
+import AddMcVersionsStage from './stages/AddMcVersionsStage.vue'
+
+const { newDraftVersion, draftVersion, detectedLoaders, detectedVersions, projectType } =


This might better suited for DI? - see creator-withdraw.ts for an example.

IMB11 · 2025-12-08T09:25:27Z

apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue

+
+const modal = useTemplateRef<InstanceType<typeof MultiStageModal>>('modal')
+
+provide('createVersionModal', modal)


Should go through our DI framework - could merge with the manage stuff

IMB11 · 2025-12-08T09:27:08Z

apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue

+			text: 'The version has been successfully added to your project.',
+			type: 'success',
+		})
+		// TODO: refetch versions here for project versions table


You can use tanstack mutations for this - https://tanstack.com/query/v5/docs/framework/vue/guides/mutations

IMB11 · 2025-12-08T09:31:19Z

apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue

+	window.addEventListener('keydown', handleKeyDown)
+	window.addEventListener('keyup', handleKeyUp)
+})
+onUnmounted(() => {


https://vueuse.org/core/useMagicKeys/

IMB11 · 2025-12-08T09:33:00Z

apps/frontend/src/components/ui/create-project-version/components/ModSelect.vue

+const searchLoading = ref(false)
+const options = ref<DropdownOption<string>[]>([])
+
+const client = injectModrinthClient()


Suggested change

const client = injectModrinthClient()

const { labrinth } = injectModrinthClient()

IMB11 · 2025-12-08T09:38:16Z

packages/api-client/src/modules/labrinth/projects/v2.ts

 	 * const results = await client.labrinth.projects_v2.search({
 	 *   query: 'optimization',
-	 *   facets: [['categories:optimization'], ['project_type:mod']],
+	 *   facets: "[['categories:optimization'], ['project_type:mod']]",


see prev comment about typing this properly

IMB11 · 2025-12-08T09:39:39Z

packages/api-client/src/modules/labrinth/types.ts

+			}
+
+			/**
+			 * Request data object for Modrinth “Create Version” API.


nitpick: Sounds counter intuitive but we haven't usually done comments for these types because the backend has comments already/it'll probably go out of date over time

@aecsocket is working on slowly adding utoipa support on labrinth, like is already done for some internal services

IMB11 · 2025-12-08T09:40:39Z

packages/api-client/src/modules/labrinth/versions/v3.ts

@@ -0,0 +1,238 @@
+import type { DraftVersion } from '../../../../../../apps/frontend/src/composables/versions/manage-version'


Dont do this - put DraftVersion into api-client types

IMB11 · 2025-12-08T09:43:09Z

packages/ui/src/components/project/ProjectPageVersions.vue

 import { useRoute, useRouter } from 'vue-router'

+import { PlusIcon } from '@modrinth/assets'
+import { ButtonStyled } from '@modrinth/ui'


Generally we try not to use @modrinth/ui self-imports because it can sometimes cause cyclic dependencies as some of the older components are exported a bit weirdly.

I see, so instead better to import directly like this?

import ButtonStyled from '@modrinth/ui/src/components/base/ButtonStyled.vue'

IMB11 · 2025-12-08T09:43:23Z

packages/ui/tailwind-preset.js

@@ -0,0 +1,267 @@
+module.exports = {


This should probably be in packages/tooling-config though.

tdgao added 3 commits November 20, 2025 20:52

start modal, working show modal

2b549a4

add stages and implement MultiModalStage component

183a64b

add project versions context and add file button

d758b4e

IMB11 reviewed Nov 23, 2025

View reviewed changes

packages/ui/src/components/base/MultiStageModal.vue Show resolved Hide resolved

apps/frontend/src/components/ui/create-project-version/MultiStageModal.vue Outdated Show resolved Hide resolved

apps/frontend/src/providers/versions.ts Outdated Show resolved Hide resolved

IMB11 reviewed Nov 23, 2025

View reviewed changes

apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue Show resolved Hide resolved

tdgao added 25 commits November 24, 2025 11:12

implement add files stage

1166496

export interfaces

1bd5bf9

move MultiStageModal to /base

ed682c4

small update to file input

4960604

add version types to api-client

3a58d6e

wrap version namespace under v3

f63e653

implement add details stage fields and loaders component

5c898f7

start create MC versions stage

e16c49e

implement changelog stage and bring width into a per stage concern

99534b5

implement loader picker with grouping

9747517

improve grouping and sorting for loader picker

19d1cf6

use chips component

d540a88

small updaets

dbdeeea

fix loader icon color

2626e67

componentize mc version picker

47bd4a8

initial version of shift click to select range

4f12c41

use newModal for markdown editor

8ff4e55

start add dependencies stage with search

7f3708c

implement showing mod options in search

ecc9d9d

componentize modselect and add version/dependency relation select

667a84c

hide version and dependency relation when no project selected

12ac0bb

fix project facet search

a069fa0

implement api-client versions requests

aa177c3

fix search api request facet type to be string

118f781

fix new modal outer container scroll

50b3baa

tdgao added 23 commits December 4, 2025 13:47

implement new all releases grouping

045e322

implement better shift click for version select

94b77b4

small fixes

0e173de

fix search input style

0dc8f0c

delete versions provider and start project type inferring

a718df4

implement getting project type

db00234

add versions empty state, add folder up icon and pnpm run fix

ded36c4

implement create version in project versions table

a6f121c

update side nav

a0fda62

implement dynamic create version flow depending on project type and d…

d4808fc

…etected data

add id to stages and fix calling setStage not working

5ffc633

move added loaded out of loader picker

658b03b

remove selected and detected MC versions

1d96973

add loading message to dependency search and fix dependency type alwa…

3d33829

…ys being "required"

fix components in ref

34838bc

fix width on dropdown

1f278ad

implement toggle all mc versions based on state of last in range

d8386c4

fix mc version text colour

5e24341

do proper clean up

43b7b97

update loaders to use tag item

242a60f

update UI to use TagItem and better match styles

7dd927f

handle detected data when setting primary file

56fe89c

add progress bar

ff0753f

tdgao marked this pull request as ready for review December 8, 2025 09:23

hide progress bar for non-progress stage

72040c9

IMB11 requested changes Dec 8, 2025

View reviewed changes

tdgao added 4 commits December 8, 2025 10:43

add loading state on submit

c086155

properly cache dependencies projects/versions

08617f5

pnpm run fix

ce913ba

add dragover show purple border on dropzone file input

2b6c14e


		const modal = useTemplateRef<InstanceType<typeof MultiStageModal>>('modal')

		provide('createVersionModal', modal)

	const client = injectModrinthClient()
	const { labrinth } = injectModrinthClient()

		@@ -0,0 +1,238 @@
		import type { DraftVersion } from '../../../../../../apps/frontend/src/composables/versions/manage-version'

feat: managing project versions #4811

Are you sure you want to change the base?

feat: managing project versions #4811

Conversation

tdgao commented Nov 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

IMB11 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

tdgao commented Nov 23, 2025 •

edited

Loading