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.
@@ -1,6 +1,6 @@
|
||||
import type { AbstractModrinthClient } from '@modrinth/api-client'
|
||||
|
||||
import { createContext } from './index'
|
||||
import { createContext } from './create-context'
|
||||
|
||||
export const [injectModrinthClient, provideModrinthClient] = createContext<AbstractModrinthClient>(
|
||||
'root',
|
||||
|
||||
10
packages/ui/src/providers/app-backup.ts
Normal file
10
packages/ui/src/providers/app-backup.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { createContext } from './create-context'
|
||||
|
||||
export interface AppBackupContext {
|
||||
createBackup: () => Promise<void>
|
||||
}
|
||||
|
||||
export const [injectAppBackup, provideAppBackup] = createContext<AppBackupContext>(
|
||||
'AppBackupContext',
|
||||
'appBackupContext',
|
||||
)
|
||||
7
packages/ui/src/providers/content-manager.ts
Normal file
7
packages/ui/src/providers/content-manager.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export {
|
||||
type ContentManagerContext,
|
||||
type ContentModpackData,
|
||||
injectContentManager,
|
||||
provideContentManager,
|
||||
type UploadState,
|
||||
} from '../layouts/shared/content-tab/providers/content-manager'
|
||||
79
packages/ui/src/providers/create-context.ts
Normal file
79
packages/ui/src/providers/create-context.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* MIT License
|
||||
*
|
||||
* Copyright (c) 2023 UnoVue
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*
|
||||
* @source https://github.com/unovue/reka-ui/blob/53b4734734f8ebef9a344b1e62db291177c59bfe/packages/core/src/shared/createContext.ts
|
||||
*/
|
||||
|
||||
import type { InjectionKey } from 'vue'
|
||||
import { inject, provide } from 'vue'
|
||||
|
||||
/**
|
||||
* @param providerComponentName - The name(s) of the component(s) providing the context.
|
||||
*
|
||||
* There are situations where context can come from multiple components. In such cases, you might need to give an array of component names to provide your context, instead of just a single string.
|
||||
*
|
||||
* @param contextName The description for injection key symbol.
|
||||
*/
|
||||
export function createContext<ContextValue>(
|
||||
providerComponentName: string | string[],
|
||||
contextName?: string,
|
||||
) {
|
||||
const symbolDescription =
|
||||
typeof providerComponentName === 'string' && !contextName
|
||||
? `${providerComponentName}Context`
|
||||
: contextName
|
||||
|
||||
const injectionKey: InjectionKey<ContextValue | null> = Symbol(symbolDescription)
|
||||
|
||||
/**
|
||||
* @param fallback The context value to return if the injection fails.
|
||||
*
|
||||
* @throws When context injection failed and no fallback is specified.
|
||||
* This happens when the component injecting the context is not a child of the root component providing the context.
|
||||
*/
|
||||
const injectContext = <T extends ContextValue | null | undefined = ContextValue>(
|
||||
fallback?: T,
|
||||
): T extends null ? ContextValue | null : ContextValue => {
|
||||
const context = inject(injectionKey, fallback)
|
||||
if (context) return context
|
||||
|
||||
if (context === null)
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
return context as any
|
||||
|
||||
throw new Error(
|
||||
`Injection \`${injectionKey.toString()}\` not found. Component must be used within ${
|
||||
Array.isArray(providerComponentName)
|
||||
? `one of the following components: ${providerComponentName.join(', ')}`
|
||||
: `\`${providerComponentName}\``
|
||||
}`,
|
||||
)
|
||||
}
|
||||
|
||||
const provideContext = (contextValue: ContextValue) => {
|
||||
provide(injectionKey, contextValue)
|
||||
return contextValue
|
||||
}
|
||||
|
||||
return [injectContext, provideContext] as const
|
||||
}
|
||||
19
packages/ui/src/providers/file-picker.ts
Normal file
19
packages/ui/src/providers/file-picker.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { createContext } from '.'
|
||||
|
||||
export interface PickedFile {
|
||||
/** Browser File object */
|
||||
file: File
|
||||
/** Native file system path (available on Tauri, undefined on web) */
|
||||
path?: string
|
||||
/** URL suitable for display (blob URL on web, convertFileSrc URL on Tauri) */
|
||||
previewUrl: string
|
||||
}
|
||||
|
||||
export interface FilePickerProvider {
|
||||
/** Pick an image file (for icons) */
|
||||
pickImage: () => Promise<PickedFile | null>
|
||||
/** Pick a .mrpack modpack file */
|
||||
pickModpackFile: () => Promise<PickedFile | null>
|
||||
}
|
||||
|
||||
export const [injectFilePicker, provideFilePicker] = createContext<FilePickerProvider>('FilePicker')
|
||||
@@ -1,88 +1,15 @@
|
||||
/**
|
||||
* MIT License
|
||||
*
|
||||
* Copyright (c) 2023 UnoVue
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*
|
||||
* @source https://github.com/unovue/reka-ui/blob/53b4734734f8ebef9a344b1e62db291177c59bfe/packages/core/src/shared/createContext.ts
|
||||
*/
|
||||
|
||||
import type { InjectionKey } from 'vue'
|
||||
import { inject, provide } from 'vue'
|
||||
|
||||
/**
|
||||
* @param providerComponentName - The name(s) of the component(s) providing the context.
|
||||
*
|
||||
* There are situations where context can come from multiple components. In such cases, you might need to give an array of component names to provide your context, instead of just a single string.
|
||||
*
|
||||
* @param contextName The description for injection key symbol.
|
||||
*/
|
||||
export function createContext<ContextValue>(
|
||||
providerComponentName: string | string[],
|
||||
contextName?: string,
|
||||
) {
|
||||
const symbolDescription =
|
||||
typeof providerComponentName === 'string' && !contextName
|
||||
? `${providerComponentName}Context`
|
||||
: contextName
|
||||
|
||||
const injectionKey: InjectionKey<ContextValue | null> = Symbol(symbolDescription)
|
||||
|
||||
/**
|
||||
* @param fallback The context value to return if the injection fails.
|
||||
*
|
||||
* @throws When context injection failed and no fallback is specified.
|
||||
* This happens when the component injecting the context is not a child of the root component providing the context.
|
||||
*/
|
||||
const injectContext = <T extends ContextValue | null | undefined = ContextValue>(
|
||||
fallback?: T,
|
||||
): T extends null ? ContextValue | null : ContextValue => {
|
||||
const context = inject(injectionKey, fallback)
|
||||
if (context) return context
|
||||
|
||||
if (context === null)
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
return context as any
|
||||
|
||||
throw new Error(
|
||||
`Injection \`${injectionKey.toString()}\` not found. Component must be used within ${
|
||||
Array.isArray(providerComponentName)
|
||||
? `one of the following components: ${providerComponentName.join(', ')}`
|
||||
: `\`${providerComponentName}\``
|
||||
}`,
|
||||
)
|
||||
}
|
||||
|
||||
const provideContext = (contextValue: ContextValue) => {
|
||||
provide(injectionKey, contextValue)
|
||||
return contextValue
|
||||
}
|
||||
|
||||
return [injectContext, provideContext] as const
|
||||
}
|
||||
|
||||
export * from './api-client'
|
||||
export * from './app-backup'
|
||||
export * from './content-manager'
|
||||
export { createContext } from './create-context'
|
||||
export * from './file-picker'
|
||||
export * from './i18n'
|
||||
export * from './instance-import'
|
||||
export * from './modal-behavior'
|
||||
export * from './page-context'
|
||||
export * from './popup-notifications'
|
||||
export * from './project-page'
|
||||
export * from './project-page-new'
|
||||
export * from './server-context'
|
||||
export * from './tags'
|
||||
export * from './web-notifications'
|
||||
|
||||
23
packages/ui/src/providers/instance-import.ts
Normal file
23
packages/ui/src/providers/instance-import.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { createContext } from '.'
|
||||
|
||||
export interface ImportableLauncher {
|
||||
name: string
|
||||
path: string
|
||||
instances: string[]
|
||||
}
|
||||
|
||||
export interface InstanceImportProvider {
|
||||
/** Returns launchers with instances already populated (one round trip on mount) */
|
||||
getDetectedLaunchers: () => Promise<ImportableLauncher[]>
|
||||
/** Only needed for manually-added launcher paths */
|
||||
getImportableInstances: (launcherName: string, path: string) => Promise<string[]>
|
||||
/** Perform the actual import */
|
||||
importInstances: (
|
||||
selections: { launcher: string; path: string; instanceNames: string[] }[],
|
||||
) => Promise<void>
|
||||
/** Open a directory picker (platform-specific) */
|
||||
selectDirectory: () => Promise<string | null>
|
||||
}
|
||||
|
||||
export const [injectInstanceImport, provideInstanceImport] =
|
||||
createContext<InstanceImportProvider>('InstanceImport')
|
||||
14
packages/ui/src/providers/modal-behavior.ts
Normal file
14
packages/ui/src/providers/modal-behavior.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import type { Ref } from 'vue'
|
||||
|
||||
import { createContext } from './create-context'
|
||||
|
||||
export interface ModalBehavior {
|
||||
noblur: Ref<boolean>
|
||||
onShow?: () => void
|
||||
onHide?: () => void
|
||||
}
|
||||
|
||||
export const [injectModalBehavior, provideModalBehavior] = createContext<ModalBehavior>(
|
||||
'root',
|
||||
'modalBehavior',
|
||||
)
|
||||
@@ -1,8 +1,14 @@
|
||||
import type { Archon } from '@modrinth/api-client'
|
||||
import type { ComputedRef, Reactive, Ref } from 'vue'
|
||||
|
||||
import type { MessageDescriptor } from '#ui/composables/i18n'
|
||||
|
||||
import { createContext } from '.'
|
||||
|
||||
export interface BusyReason {
|
||||
reason: MessageDescriptor
|
||||
}
|
||||
|
||||
export type BackupTaskState = {
|
||||
progress: number
|
||||
state: Archon.Backups.v1.BackupState
|
||||
@@ -23,6 +29,7 @@ export interface FilesystemAuth {
|
||||
|
||||
export interface ModrinthServerContext {
|
||||
readonly serverId: string
|
||||
readonly worldId: Ref<string | null>
|
||||
readonly server: Ref<Archon.Servers.v0.Server>
|
||||
|
||||
// Websocket state
|
||||
@@ -32,6 +39,12 @@ export interface ModrinthServerContext {
|
||||
readonly backupsState: Reactive<BackupsState>
|
||||
markBackupCancelled: (backupId: string) => void
|
||||
|
||||
// Content sync state
|
||||
readonly isSyncingContent: Ref<boolean>
|
||||
|
||||
// Busy state — when non-empty, all write operations should be disabled
|
||||
readonly busyReasons: ComputedRef<BusyReason[]>
|
||||
|
||||
// Filesystem state
|
||||
readonly fsAuth: Ref<FilesystemAuth | null>
|
||||
readonly fsOps: Ref<Archon.Websocket.v0.FilesystemOperation[]>
|
||||
|
||||
11
packages/ui/src/providers/tags.ts
Normal file
11
packages/ui/src/providers/tags.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import type { Labrinth } from '@modrinth/api-client'
|
||||
import type { Ref } from 'vue'
|
||||
|
||||
import { createContext } from './create-context'
|
||||
|
||||
export interface TagsContext {
|
||||
gameVersions: Ref<Labrinth.Tags.v2.GameVersion[]>
|
||||
loaders: Ref<Labrinth.Tags.v2.Loader[]>
|
||||
}
|
||||
|
||||
export const [injectTags, provideTags] = createContext<TagsContext>('root', 'tags')
|
||||
Reference in New Issue
Block a user