feat: content tab rewrite for worlds (#5136)
* 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.
@@ -5,6 +5,7 @@ import {
|
||||
CalendarIcon,
|
||||
CardIcon,
|
||||
CurrencyIcon,
|
||||
DiscordIcon,
|
||||
FileArchiveIcon,
|
||||
FileCodeIcon,
|
||||
FileIcon,
|
||||
@@ -32,6 +33,13 @@ import {
|
||||
import type { ProjectStatus, ProjectType } from '@modrinth/utils'
|
||||
import type { Component } from 'vue'
|
||||
|
||||
import {
|
||||
FILE_ARCHIVE_EXTENSIONS,
|
||||
FILE_CODE_EXTENSIONS,
|
||||
FILE_IMAGE_EXTENSIONS,
|
||||
FILE_TEXT_EXTENSIONS,
|
||||
} from './file-extensions'
|
||||
|
||||
export const PROJECT_TYPE_ICONS: Record<ProjectType, Component> = {
|
||||
mod: BoxIcon,
|
||||
modpack: PackageOpenIcon,
|
||||
@@ -49,7 +57,7 @@ export const PAYMENT_METHOD_ICONS: Record<string, Component> = {
|
||||
}
|
||||
|
||||
export const SOCIAL_PLATFORM_ICONS: Record<string, Component> = {
|
||||
discord: GithubIcon,
|
||||
discord: DiscordIcon,
|
||||
github: GithubIcon,
|
||||
}
|
||||
|
||||
@@ -88,53 +96,6 @@ const BLOCKCHAIN_CONFIG: Record<string, { icon: Component; color: string }> = {
|
||||
polygon: { icon: PolygonIcon, color: 'text-purple' },
|
||||
}
|
||||
|
||||
export const CODE_EXTENSIONS: readonly string[] = [
|
||||
'json',
|
||||
'json5',
|
||||
'jsonc',
|
||||
'java',
|
||||
'kt',
|
||||
'kts',
|
||||
'sh',
|
||||
'bat',
|
||||
'ps1',
|
||||
'yml',
|
||||
'yaml',
|
||||
'toml',
|
||||
'js',
|
||||
'ts',
|
||||
'py',
|
||||
'rb',
|
||||
'php',
|
||||
'html',
|
||||
'css',
|
||||
'cpp',
|
||||
'c',
|
||||
'h',
|
||||
'rs',
|
||||
'go',
|
||||
] as const
|
||||
|
||||
export const TEXT_EXTENSIONS: readonly string[] = [
|
||||
'txt',
|
||||
'md',
|
||||
'log',
|
||||
'cfg',
|
||||
'conf',
|
||||
'properties',
|
||||
'ini',
|
||||
'sk',
|
||||
] as const
|
||||
export const IMAGE_EXTENSIONS: readonly string[] = [
|
||||
'png',
|
||||
'jpg',
|
||||
'jpeg',
|
||||
'gif',
|
||||
'svg',
|
||||
'webp',
|
||||
] as const
|
||||
const ARCHIVE_EXTENSIONS: string[] = ['zip', 'jar', 'tar', 'gz', 'rar', '7z'] as const
|
||||
|
||||
export function getProjectTypeIcon(projectType: ProjectType): Component {
|
||||
return PROJECT_TYPE_ICONS[projectType] ?? BoxIcon
|
||||
}
|
||||
@@ -162,16 +123,16 @@ export function getDirectoryIcon(name: string): Component {
|
||||
export function getFileExtensionIcon(extension: string): Component {
|
||||
const ext: string = extension.toLowerCase()
|
||||
|
||||
if (CODE_EXTENSIONS.includes(ext)) {
|
||||
if ((FILE_CODE_EXTENSIONS as readonly string[]).includes(ext)) {
|
||||
return FileCodeIcon
|
||||
}
|
||||
if (TEXT_EXTENSIONS.includes(ext)) {
|
||||
if ((FILE_TEXT_EXTENSIONS as readonly string[]).includes(ext)) {
|
||||
return FileTextIcon
|
||||
}
|
||||
if (IMAGE_EXTENSIONS.includes(ext)) {
|
||||
if ((FILE_IMAGE_EXTENSIONS as readonly string[]).includes(ext)) {
|
||||
return FileImageIcon
|
||||
}
|
||||
if (ARCHIVE_EXTENSIONS.includes(ext)) {
|
||||
if ((FILE_ARCHIVE_EXTENSIONS as readonly string[]).includes(ext)) {
|
||||
return FileArchiveIcon
|
||||
}
|
||||
|
||||
|
||||
@@ -333,6 +333,83 @@ export const commonMessages = defineMessages({
|
||||
id: 'label.yes',
|
||||
defaultMessage: 'Yes',
|
||||
},
|
||||
platformLabel: {
|
||||
id: 'label.platform',
|
||||
defaultMessage: 'Platform',
|
||||
},
|
||||
gameVersionLabel: {
|
||||
id: 'label.game-version',
|
||||
defaultMessage: 'Game version',
|
||||
},
|
||||
selectVersionPlaceholder: {
|
||||
id: 'input.select-version.placeholder',
|
||||
defaultMessage: 'Select version',
|
||||
},
|
||||
searchVersionPlaceholder: {
|
||||
id: 'input.search-version.placeholder',
|
||||
defaultMessage: 'Search version...',
|
||||
},
|
||||
unknownLabel: {
|
||||
id: 'label.unknown',
|
||||
defaultMessage: 'Unknown',
|
||||
},
|
||||
modpackLabel: {
|
||||
id: 'label.modpack',
|
||||
defaultMessage: 'Modpack',
|
||||
},
|
||||
repairButton: {
|
||||
id: 'button.repair',
|
||||
defaultMessage: 'Repair',
|
||||
},
|
||||
repairingButton: {
|
||||
id: 'button.repairing',
|
||||
defaultMessage: 'Repairing...',
|
||||
},
|
||||
showAllVersionsButton: {
|
||||
id: 'button.show-all-versions',
|
||||
defaultMessage: 'Show all versions',
|
||||
},
|
||||
hideSnapshotsButton: {
|
||||
id: 'button.hide-snapshots',
|
||||
defaultMessage: 'Hide snapshots',
|
||||
},
|
||||
installationInfoTitle: {
|
||||
id: 'label.installation-info',
|
||||
defaultMessage: 'Installation info',
|
||||
},
|
||||
installedModpackTitle: {
|
||||
id: 'label.installed-modpack',
|
||||
defaultMessage: 'Installed modpack',
|
||||
},
|
||||
changeVersionButton: {
|
||||
id: 'button.change-version',
|
||||
defaultMessage: 'Change version',
|
||||
},
|
||||
unlinkModpackButton: {
|
||||
id: 'button.unlink-modpack',
|
||||
defaultMessage: 'Unlink modpack',
|
||||
},
|
||||
reinstallModpackButton: {
|
||||
id: 'button.reinstall-modpack',
|
||||
defaultMessage: 'Re-install modpack',
|
||||
},
|
||||
resetServerButton: {
|
||||
id: 'button.reset-server',
|
||||
defaultMessage: 'Reset server',
|
||||
},
|
||||
clientOnlyWarning: {
|
||||
id: 'label.client-only-warning',
|
||||
defaultMessage:
|
||||
"This is a client-side mod and may cause issues. We've kept it enabled because some authors mislabel environments, and the loader should resolve the conflict.",
|
||||
},
|
||||
selectAllLabel: {
|
||||
id: 'label.select-all',
|
||||
defaultMessage: 'Select all',
|
||||
},
|
||||
selectionActionsLabel: {
|
||||
id: 'label.selection-actions',
|
||||
defaultMessage: 'Selection actions',
|
||||
},
|
||||
updateAvailableLabel: {
|
||||
id: 'label.update-available',
|
||||
defaultMessage: 'Update available',
|
||||
@@ -365,6 +442,10 @@ export const commonMessages = defineMessages({
|
||||
id: 'label.no-items',
|
||||
defaultMessage: 'No items',
|
||||
},
|
||||
switchVersionButton: {
|
||||
id: 'button.switch-version',
|
||||
defaultMessage: 'Switch version',
|
||||
},
|
||||
projectCreated: {
|
||||
id: 'project.about.details.created',
|
||||
defaultMessage: 'Created {date}',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// File extension constants
|
||||
export const CODE_EXTENSIONS = [
|
||||
export const FILE_CODE_EXTENSIONS = [
|
||||
'json',
|
||||
'json5',
|
||||
'jsonc',
|
||||
@@ -26,7 +26,7 @@ export const CODE_EXTENSIONS = [
|
||||
'go',
|
||||
] as const
|
||||
|
||||
export const TEXT_EXTENSIONS = [
|
||||
export const FILE_TEXT_EXTENSIONS = [
|
||||
'txt',
|
||||
'md',
|
||||
'log',
|
||||
@@ -37,15 +37,15 @@ export const TEXT_EXTENSIONS = [
|
||||
'sk',
|
||||
] as const
|
||||
|
||||
export const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'] as const
|
||||
export const FILE_IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'] as const
|
||||
|
||||
export const ARCHIVE_EXTENSIONS = ['zip'] as const
|
||||
export const FILE_ARCHIVE_EXTENSIONS = ['zip', 'jar', 'tar', 'gz', 'rar', '7z'] as const
|
||||
|
||||
// Type for extension strings
|
||||
export type CodeExtension = (typeof CODE_EXTENSIONS)[number]
|
||||
export type TextExtension = (typeof TEXT_EXTENSIONS)[number]
|
||||
export type ImageExtension = (typeof IMAGE_EXTENSIONS)[number]
|
||||
export type ArchiveExtension = (typeof ARCHIVE_EXTENSIONS)[number]
|
||||
export type CodeExtension = (typeof FILE_CODE_EXTENSIONS)[number]
|
||||
export type TextExtension = (typeof FILE_TEXT_EXTENSIONS)[number]
|
||||
export type ImageExtension = (typeof FILE_IMAGE_EXTENSIONS)[number]
|
||||
export type ArchiveExtension = (typeof FILE_ARCHIVE_EXTENSIONS)[number]
|
||||
|
||||
/**
|
||||
* Extract file extension from filename (lowercase)
|
||||
@@ -58,28 +58,28 @@ export function getFileExtension(filename: string): string {
|
||||
* Check if extension is a code file
|
||||
*/
|
||||
export function isCodeFile(ext: string): boolean {
|
||||
return (CODE_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
|
||||
return (FILE_CODE_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if extension is a text file
|
||||
*/
|
||||
export function isTextFile(ext: string): boolean {
|
||||
return (TEXT_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
|
||||
return (FILE_TEXT_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if extension is an image file
|
||||
*/
|
||||
export function isImageFile(ext: string): boolean {
|
||||
return (IMAGE_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
|
||||
return (FILE_IMAGE_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if extension is an archive file
|
||||
*/
|
||||
export function isArchiveFile(ext: string): boolean {
|
||||
return (ARCHIVE_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
|
||||
return (FILE_ARCHIVE_EXTENSIONS as readonly string[]).includes(ext.toLowerCase())
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -3,6 +3,7 @@ export * from './common-messages'
|
||||
export * from './events'
|
||||
export * from './file-extensions'
|
||||
export * from './game-modes'
|
||||
export * from './loaders'
|
||||
export * from './notices'
|
||||
export * from './savable'
|
||||
export * from './search'
|
||||
|
||||
13
packages/ui/src/utils/loaders.ts
Normal file
13
packages/ui/src/utils/loaders.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
export const loaderDisplayNames: Record<string, string> = {
|
||||
fabric: 'Fabric',
|
||||
neoforge: 'NeoForge',
|
||||
neo_forge: 'NeoForge',
|
||||
forge: 'Forge',
|
||||
quilt: 'Quilt',
|
||||
paper: 'Paper',
|
||||
purpur: 'Purpur',
|
||||
vanilla: 'Vanilla',
|
||||
}
|
||||
|
||||
export const formatLoaderLabel = (item: string) =>
|
||||
loaderDisplayNames[item] ?? item.charAt(0).toUpperCase() + item.slice(1)
|
||||
@@ -478,6 +478,8 @@ export function useSearch(
|
||||
/*
|
||||
Add environment facets, separate from the rest because it oddly depends on the combination
|
||||
of filters selected to determine which facets to add.
|
||||
Uses filterValues (merged user + provided filters) so server-provided environment
|
||||
filters are respected.
|
||||
*/
|
||||
const client = filterValues.some(
|
||||
(filter) => filter.type === 'environment' && filter.option === 'client',
|
||||
|
||||
Reference in New Issue
Block a user