MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: content tab rewrite for worlds (#5136)

Browse Source 
* feat: base content card component

* fix: tooltips + colors

* feat: fix orgs

* feat: base content tab internals rewrite

* feat: fix invalidmodal

* feat: add ContentModpackCard

* fix: extract types

* draft: layout

* feat: unlink modal

* feat: impl content tab

* fix: lint

* fix: toggling

* temp: disable updating stuff

* feat: selection v-model

* feat: bulk selection

* feat: mods tab rough draft

* feat: use fuse.js

* feat: add project combobox

* clean up project combobox

* feat: start install to play modal

* fix: events

* feat: use v-on

* feat: bulk actions + fix floating action bar width

* feat: figma alignments

* feat: migrate toggle to tailwind

* fix: row borders

* feat: disabled state

* feat: virtual list impl for card table based on window scroll

* fix: lint

* feat: virtualization + smaller contentcard items

* feat: use ContentCardTable + ContentCardItems

* feat: fix gap + border issues on last elm

* feat: cleanup + use proper searching

* fix: use TeleportOverflowMenu

* fix: fallback to svg if src is invalid on avatar component

* fix: storybook

* feat: start on updater modal

* feat: finish content updater modal

* feat: i18n pass

* feat: impl modal

* feat(app): backend changes for content tab refactor (#5237)

* feat: include_changelog=false for updater modal

* fix: hash overrides

* feat: update checking for modpack

* feat: qa

* feat: modpack content modal

* fix: padding in table to match modals + tightness

* fix: lint

* feat: delete modal

* feat: fix toggle bugs

* fix: prepr

* fix: duplicate messages

* qa: full width search

* qa: use bg-surface-1.5

* qa: animation for filter pills

* qa: standardize hover colors

* fix: border-[1px] is border

* qa: mass de-select actually mass selecting

* qa: match figma designs for floating action bar

* qa: modal fixes

* q: modal fixes x2

* fix: table border

* qa: confirm modals

* qa: modal alignment

* qa: re-add stuck heading + dedupe logic

* qa: dedupe virtual scrolling + remove dead components

* qa: responsiveness for content table + link fixes

* qa: version column link, tooltips + lint fixes

* qa: instance busy protections

* fix: installation freeze bug

* chore: remove old mods page

* refactor: deduplicate layout

* chore: delete old content page(s)

* qa

* qa

* qa

* feat: sort btn - to iterate

* fix: ml

* feat: date added

* fix: lint

* fix: formatting.ts removal

* feat: get_dependencies_as_content_items

* qa: final QA changes

* refactor: deduplicate + polish content.rs

* feat: hook up content.vue with v1

* feat: hide v1 content api behind frontend feature flag

* fix: query keys + copy on empty state

* chore: i18n pass

* feat: reimpl unlink + upload endpoint

* feat: use bulk endpoints v1

* fix: lint

* fix: flags

* fix: responsiveness via container queries

* fix: lint

* qa: 1

* qa: fixes

* qa: fix ssr issues with browse content

* qa: header page divider

* qa: modals

* fix: prepr

* fix: issues

* fix: lint

* fix: toggle v1 ff

* qa: 5

* qa: delete modal copy

* feat: creation flow modals (#5383)

* refactor: delete content v0 usages + impl

* feat: qa + fixes

* feat: installing banner using state event

* feat: fix modpack card bugs + filtering issues

* refactor: delete backups v0 api module

* feat: v1 servers GET endpoint

* fix: backups

* feat: swap to kyros upload v1 addon

* fix: use tanstack for loader.vue

* feat: finish install from discovery modal

* qa: bug fixes

* feat: set up installation settings

* fix: lint

* fix: typos

* fix: bugs

* fix: disable inline content

* feat: content tab improvements — upload UX, installation settings, and client-only indicators

   Upload cancellation and navigation guard:
   - Add ConfirmLeaveModal that prompts when navigating away during upload
   - Cancel in-flight XHR uploads when user confirms leaving the page
   - Add beforeunload handler to warn on browser/tab close during upload
   - Track uploadedBytes/totalBytes in UploadState for progress display
   - Replace Collapsible with Transition for upload progress admonition
   - Show byte progress and percentage in upload banner
   - Clamp upload progress to prevent exceeding 100%

   Installation settings (server.properties):
   - Add KnownPropertiesFields and PropertiesFields types to Archon types
   - Add buildProperties() to creation flow context to collect gamemode,
     difficulty, seed, world type, structures, and generator settings
   - Pass properties through installContent on onboarding, discovery, and
     ServerSetupModal flows

   Server setup and discovery flow improvements:
   - Migrate ServerSetupModal from servers_v0.reinstall to content_v1.installContent
   - Replace loaderApiNames lookup with toApiLoader() helper
   - Remove eraseDataOnInstall toggle — always use soft_override: false
   - Simplify modpack install on discovery page to use first available version
     and route through creation flow modal for both onboarding and non-onboarding
   - Differentiate post-install navigation: content page for onboarding,
     loader options for existing servers

   Modpack update flow:
   - Replace updateModpack() call with installContent() using soft_override: true
     to support version selection in the content updater modal

   Client-only mod indicators:
   - Add environment field to AddonVersion (reuses Labrinth.Projects.v3.Environment)
   - Add environment to ContentItem and isClientOnly to ContentCardTableItem
   - Show orange TriangleAlertIcon with tooltip on client-only mods in content table
   - Add "Client-only" filter pill to content filtering (controlled via
     showClientOnlyFilter on ContentManagerContext)
   - Apply client-only indicators in both ContentPageLayout and ModpackContentModal

   Misc:
   - Add CLAUDE.md note about using prepr commands for lint checks
   - Export ConfirmLeaveModal from instances barrel

* fix: piping

* fix: switch content disable for linked server instances

* feat: client only filter

* fix: prepr

* feat: hasUpdate shape update

* feat: bulk update endpoint impl for content in panel

* feat: websocket state impl again with new phases

* fix: ws

* fix: use timeout fn for sync admon + fix content card layout scroll for browsers with overflow anchor bug

* fix: qa bugs

* fix: lint, a11y and i18n

* refactor: set up layouts folder properly

* fix: linked data cache stuff + lint

* feat: move installationsettings to shared layout

* fix: lint

* fix: issues

* feat: temp fuck staging up

* fix: lockfile

* fix: data sync issues on loader.vue

* fix: lint

* Hide shader configuration files from content list (#5499)

* feat: workaround search problem + split out reset

* fix: qa

* fix: changelog not showing on first open

* fix: qa + optimistic updating improvements

* fix: prepr+lint

* fix: qa

* feat: qa

* fix: lint

* fix: lint

* fix: build

* fix: build

* fix: type errors

* fix: fade and JAVA_HOME passthrough

* feat: qa

* feat: impl diff shit

* fix: qa

* fix: app qa

* feat: update diff modal

* fix: endpoint

* fix: qa

* fix: qa

* fix: use bulk in modpack modal

* feat: abort signal impl + fix issues

* fix: diff modal trunc

* feat: qa

* fix: qa

* feat: tooltip content tab

* fix: prepr

* fix: dismiss on settings btn

* feat: qa

* feat: dont clear handlers on disconnect

* fix: lint

* fix: wrangler + introduce staging-archon env file

---------

Signed-off-by: Calum H. <calum@modrinth.com>
Co-authored-by: tdgao <mr.trumgao@gmail.com>
Co-authored-by: Artyom Ezri <61311568+Artezon@users.noreply.github.com>
This commit is contained in:
Calum H.
2026-03-12 20:24:32 +00:00
committed by GitHub
parent f0224dfff7
commit 7d92e4ec7f
302 changed files with 20016 additions and 12142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
packages/ui/src/stories/base/Combobox.stories.ts
View File

@@ -1,3 +1,13 @@
import {
DownloadIcon,
EyeIcon,
EyeOffIcon,
HeartIcon,
SettingsIcon,
ShareIcon,
TrashIcon,
UserIcon,
} from '@modrinth/assets'
import type { Meta, StoryObj } from '@storybook/vue3-vite'
import Combobox from '../../components/base/Combobox.vue'
@@ -31,7 +41,6 @@ export const Searchable: Story = {
{ value: '4', label: 'NeoForge' },
{ value: '5', label: 'Quilt' },
],
triggerText: 'Select a loader',
searchable: true,
searchPlaceholder: 'Search loaders...',
},
@@ -46,6 +55,39 @@ export const Disabled: Story = {
}
export const WithSubLabels: Story = {
args: {
options: [
{ value: 'download', label: 'Download', icon: DownloadIcon },
{ value: 'share', label: 'Share', icon: ShareIcon },
{ value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
{ type: 'divider' },
{ value: 'settings', label: 'Settings', icon: SettingsIcon },
{ value: 'profile', label: 'Profile', icon: UserIcon },
{ type: 'divider' },
{ value: 'delete', label: 'Delete', icon: TrashIcon, disabled: true },
],
placeholder: 'Select an action',
listbox: false,
},
}
export const SearchableWithIcons: Story = {
args: {
options: [
{ value: 'download', label: 'Download', icon: DownloadIcon },
{ value: 'share', label: 'Share', icon: ShareIcon },
{ value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
{ value: 'settings', label: 'Settings', icon: SettingsIcon },
{ value: 'profile', label: 'Profile', icon: UserIcon },
{ value: 'delete', label: 'Delete', icon: TrashIcon },
],
placeholder: 'Select an action',
searchable: true,
searchPlaceholder: 'Search actions...',
},
}
export const WithSelectedOption: Story = {
args: {
modelValue: '2',
options: [
@@ -57,6 +99,83 @@ export const WithSubLabels: Story = {
},
}
export const SearchableNoFilter: Story = {
args: {
options: [
{ value: 'download', label: 'Download', icon: DownloadIcon },
{ value: 'share', label: 'Share', icon: ShareIcon },
{ value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
{ value: 'settings', label: 'Settings', icon: SettingsIcon },
{ value: 'profile', label: 'Profile', icon: UserIcon },
],
searchable: true,
searchPlaceholder: 'Search actions...',
disableSearchFilter: true,
},
}
export const SearchableModpacks: Story = {
args: {
options: [
{ value: 'download', label: 'Download', icon: DownloadIcon },
{ value: 'share', label: 'Share', icon: ShareIcon },
{ value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
{ value: 'settings', label: 'Settings', icon: SettingsIcon },
],
searchable: true,
searchPlaceholder: 'Search modpacks...',
noOptionsMessage: 'No modpacks found',
},
}
export const WithDropdownFooter: StoryObj = {
render: () => ({
components: { Combobox, EyeIcon, EyeOffIcon },
data: () => ({
selected: '1.20.4',
showAll: false,
}),
computed: {
options() {
const releases = [
{ value: '1.20.4', label: '1.20.4' },
{ value: '1.20.3', label: '1.20.3' },
{ value: '1.20.2', label: '1.20.2' },
{ value: '1.20.1', label: '1.20.1' },
{ value: '1.20', label: '1.20' },
]
const snapshots = [
{ value: '24w03a', label: '24w03a' },
{ value: '23w51b', label: '23w51b' },
]
// @ts-ignore
return this.showAll ? [...releases, ...snapshots] : releases
},
},
template: /*html*/ `
<Combobox
v-model="selected"
:options="options"
searchable
placeholder="Select game version"
search-placeholder="Search game versions"
>
<template #dropdown-footer>
<button
style="width: 100%; cursor: pointer; border: none; border-top: 1px solid var(--color-surface-5); background: transparent; padding: 0.75rem; text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--color-secondary); transition: color 0.15s; display: flex; align-items: center; justify-content: center; gap: 0.375rem;"
@mousedown.prevent
@click="showAll = !showAll"
>
<EyeOffIcon v-if="showAll" style="width: 1rem; height: 1rem;" />
<EyeIcon v-else style="width: 1rem; height: 1rem;" />
{{ showAll ? 'Hide snapshots' : 'Show all versions' }}
</button>
</template>
</Combobox>
`,
}),
}
export const MixedSubLabels: Story = {
args: {
options: [

90
packages/ui/src/stories/base/EmptyState.stories.ts Normal file
View File

@@ -0,0 +1,90 @@
import type { Meta, StoryObj } from '@storybook/vue3-vite'
import ButtonStyled from '../../components/base/ButtonStyled.vue'
import EmptyState from '../../components/base/EmptyState.vue'
const meta = {
title: 'Base/EmptyState',
component: EmptyState,
argTypes: {
type: {
control: 'select',
options: [
undefined,
'done',
'empty',
'empty-inbox',
'error',
'no-connection',
'no-credit-card',
'no-documents',
'no-gps',
'no-images',
'no-items-cart',
'no-messages',
'no-search-result',
'no-tasks',
],
},
},
} satisfies Meta<typeof EmptyState>
export default meta
type Story = StoryObj<typeof meta>
export const Default: Story = {
args: {
type: 'empty-inbox',
heading: 'No content installed',
description: 'Browse or upload mods to get started',
},
}
export const WithActions: StoryObj = {
render: () => ({
components: { EmptyState, ButtonStyled },
template: /*html*/ `
<EmptyState
type="empty-inbox"
heading="No backups yet"
description="Create your first backup"
>
<template #actions>
<ButtonStyled color="brand">
<button>Create backup</button>
</ButtonStyled>
</template>
</EmptyState>
`,
}),
}
export const TextOnly: Story = {
args: {
heading: 'No transactions',
description: 'Your transaction history will appear here.',
},
}
export const AllIllustrations: StoryObj = {
render: () => ({
components: { EmptyState },
template: /*html*/ `
<div class="grid grid-cols-2 gap-8">
<EmptyState type="done" heading="Done" />
<EmptyState type="empty" heading="Empty" />
<EmptyState type="empty-inbox" heading="Empty Inbox" />
<EmptyState type="error" heading="Error" />
<EmptyState type="no-connection" heading="No Connection" />
<EmptyState type="no-credit-card" heading="No Credit Card" />
<EmptyState type="no-documents" heading="No Documents" />
<EmptyState type="no-gps" heading="No GPS" />
<EmptyState type="no-images" heading="No Images" />
<EmptyState type="no-items-cart" heading="No Items in Cart" />
<EmptyState type="no-messages" heading="No Messages" />
<EmptyState type="no-search-result" heading="No Search Results" />
<EmptyState type="no-tasks" heading="No Tasks" />
</div>
`,
}),
}

1094
packages/ui/src/stories/instances/ContentCardTable.stories.ts
View File

File diff suppressed because it is too large Load Diff

8
packages/ui/src/stories/instances/ContentModpackCard.stories.ts
View File

@@ -2,15 +2,15 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { fn } from 'storybook/test'
import { ref } from 'vue'
import ContentCardItem from '../../components/instances/ContentCardItem.vue'
import ContentModpackCard from '../../components/instances/ContentModpackCard.vue'
import NewModal from '../../components/modal/NewModal.vue'
import ContentCardItem from '../../layouts/shared/content-tab/components/ContentCardItem.vue'
import ContentModpackCard from '../../layouts/shared/content-tab/components/ContentModpackCard.vue'
import type {
ContentModpackCardCategory,
ContentModpackCardProject,
ContentModpackCardVersion,
ContentOwner,
} from '../../components/instances/types'
import NewModal from '../../components/modal/NewModal.vue'
} from '../../layouts/shared/content-tab/types'
// Real project data from Modrinth API
const fabulouslyOptimizedProject: ContentModpackCardProject = {

2
packages/ui/src/stories/instances/ContentUpdaterModal.stories.ts
View File

@@ -4,7 +4,7 @@ import { fn } from 'storybook/test'
import { ref } from 'vue'
import ButtonStyled from '../../components/base/ButtonStyled.vue'
import ContentUpdaterModal from '../../components/instances/modals/ContentUpdaterModal.vue'
import ContentUpdaterModal from '../../layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue'
// Real version data from Modrinth API - Sodium (mod)
const sodiumVersions: Labrinth.Versions.v2.Version[] = [

4
packages/ui/src/stories/instances/ModpackContentModal.stories.ts
View File

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { ref } from 'vue'
import ButtonStyled from '../../components/base/ButtonStyled.vue'
import ModpackContentModal from '../../components/instances/modals/ModpackContentModal.vue'
import type { ContentItem } from '../../components/instances/types'
import ModpackContentModal from '../../layouts/shared/content-tab/components/modals/ModpackContentModal.vue'
import type { ContentItem } from '../../layouts/shared/content-tab/types'
// Sample modpack content items (representing mods included in a modpack)
const sodiumItem: ContentItem = {

128
packages/ui/src/stories/servers/CreationFlowModal.stories.ts Normal file
View File

@@ -0,0 +1,128 @@
import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { ref } from 'vue'
import ButtonStyled from '../../components/base/ButtonStyled.vue'
import type { CreationFlowContextValue } from '../../components/flows/creation-flow-modal/creation-flow-context'
import CreationFlowModal from '../../components/flows/creation-flow-modal/index.vue'
const meta = {
title: 'Servers/CreationFlowModal',
component: CreationFlowModal,
parameters: {
layout: 'centered',
},
} satisfies Meta<typeof CreationFlowModal>
export default meta
type Story = StoryObj<typeof meta>
// ============================================
// Create World (Hosting)
// ============================================
export const CreateWorld: Story = {
name: 'Create World (Hosting)',
render: () => ({
components: { CreationFlowModal, ButtonStyled },
setup() {
const modalRef = ref<InstanceType<typeof CreationFlowModal> | null>(null)
const lastEvent = ref('')
const openModal = () => modalRef.value?.show()
const onCreate = (config: CreationFlowContextValue) => {
lastEvent.value = `create emitted — name: "${config.worldName.value}", mode: ${config.gamemode.value}`
}
return { modalRef, openModal, lastEvent, onCreate }
},
template: /*html*/ `
<div class="flex flex-col gap-4 items-center">
<ButtonStyled color="brand">
<button @click="openModal">Create World</button>
</ButtonStyled>
<p v-if="lastEvent" class="text-sm text-secondary mt-2">Last event: {{ lastEvent }}</p>
<CreationFlowModal
ref="modalRef"
type="world"
:show-snapshot-toggle="true"
@hide="() => {}"
@browse-modpacks="() => console.log('browse-modpacks emitted')"
@create="onCreate"
/>
</div>
`,
}),
}
// ============================================
// Server Setup (Legacy) (Hosting)
// ============================================
export const ServerOnboarding: Story = {
name: 'Server Setup (Legacy) (Hosting)',
render: () => ({
components: { CreationFlowModal, ButtonStyled },
setup() {
const modalRef = ref<InstanceType<typeof CreationFlowModal> | null>(null)
const lastEvent = ref('')
const openModal = () => modalRef.value?.show()
const onCreate = (config: CreationFlowContextValue) => {
lastEvent.value = `create emitted — loader: ${config.selectedLoader.value}, version: ${config.selectedGameVersion.value}`
}
return { modalRef, openModal, lastEvent, onCreate }
},
template: /*html*/ `
<div class="flex flex-col gap-4 items-center">
<ButtonStyled color="brand">
<button @click="openModal">Set Up Server</button>
</ButtonStyled>
<p v-if="lastEvent" class="text-sm text-secondary mt-2">Last event: {{ lastEvent }}</p>
<CreationFlowModal
ref="modalRef"
type="server-onboarding"
:show-snapshot-toggle="true"
@hide="() => {}"
@browse-modpacks="() => console.log('browse-modpacks emitted')"
@create="onCreate"
/>
</div>
`,
}),
}
// ============================================
// Create Instance (App)
// ============================================
export const Instance: Story = {
name: 'Create Instance (App)',
render: () => ({
components: { CreationFlowModal, ButtonStyled },
setup() {
const modalRef = ref<InstanceType<typeof CreationFlowModal> | null>(null)
const lastEvent = ref('')
const openModal = () => modalRef.value?.show()
const onCreate = (config: CreationFlowContextValue) => {
lastEvent.value = `create emitted — loader: ${config.selectedLoader.value}, version: ${config.selectedGameVersion.value}`
}
return { modalRef, openModal, lastEvent, onCreate }
},
template: /*html*/ `
<div class="flex flex-col gap-4 items-center">
<ButtonStyled color="brand">
<button @click="openModal">Create Instance</button>
</ButtonStyled>
<p v-if="lastEvent" class="text-sm text-secondary mt-2">Last event: {{ lastEvent }}</p>
<CreationFlowModal
ref="modalRef"
type="instance"
:show-snapshot-toggle="true"
@hide="() => {}"
@browse-modpacks="() => console.log('browse-modpacks emitted')"
@create="onCreate"
/>
</div>
`,
}),
}