-
-
-
+
+
+
+ {{ formatNumber(project.downloads) }}
+
+
+
+
+ {{ formatNumber(project.followers) }}
+
+
+
@@ -63,6 +65,7 @@
diff --git a/packages/ui/src/components/project/ProjectPageVersions.vue b/packages/ui/src/components/project/ProjectPageVersions.vue
index 769c782811..91aa3f4622 100644
--- a/packages/ui/src/components/project/ProjectPageVersions.vue
+++ b/packages/ui/src/components/project/ProjectPageVersions.vue
@@ -180,7 +180,7 @@
class="z-[1] flex cursor-help items-center gap-1 text-nowrap font-medium xl:self-center"
>
- {{ formatRelativeTime(version.date_published) }}
+ {{ formatRelativeTime(new Date(version.date_published)) }}
+
+
+
+
+
+ {{ project.title }}
+
+
+
+
+
+ {{ project.description }}
+
+
+
+
![Server region]()
+
+
+ {{ serverPlayersOnline }}/{{ serverMaxPlayers }}
+
+
+
+
+
+
+
+ {{ formatNumber(project.followers) }}
+
+
+
+
+
+ {{ serverLinkedModpack }}
+
+
+
+
diff --git a/packages/ui/src/components/project/index.ts b/packages/ui/src/components/project/index.ts
index e6afa3b052..acecdd6cd9 100644
--- a/packages/ui/src/components/project/index.ts
+++ b/packages/ui/src/components/project/index.ts
@@ -3,8 +3,10 @@ export * from './settings'
// Other
export { default as ProjectCard } from './card/ProjectCard.vue'
+export { default as CreateServerVersionModal } from './CreateServerVersionModal.vue'
export { default as ProjectBackgroundGradient } from './ProjectBackgroundGradient.vue'
export { default as ProjectCardList } from './ProjectCardList.vue'
+export { default as ProjectCombobox } from './ProjectCombobox.vue'
export { default as ProjectHeader } from './ProjectHeader.vue'
export { default as ProjectPageDescription } from './ProjectPageDescription.vue'
export { default as ProjectPageVersions } from './ProjectPageVersions.vue'
@@ -13,4 +15,5 @@ export { default as ProjectSidebarCreators } from './ProjectSidebarCreators.vue'
export { default as ProjectSidebarDetails } from './ProjectSidebarDetails.vue'
export { default as ProjectSidebarLinks } from './ProjectSidebarLinks.vue'
export { default as ProjectStatusBadge } from './ProjectStatusBadge.vue'
+export { default as ServerProjectHeader } from './ServerProjectHeader.vue'
export { default as TagsOverflow } from './TagsOverflow.vue'
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 37502c870d..2dc6d254db 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -170,6 +170,84 @@
"collections.label.private": {
"defaultMessage": "Private"
},
+ "create-version-modal.active-version-tooltip": {
+ "defaultMessage": "This version will be used when players join the server."
+ },
+ "create-version-modal.cancel": {
+ "defaultMessage": "Cancel"
+ },
+ "create-version-modal.creating-version": {
+ "defaultMessage": "Creating version"
+ },
+ "create-version-modal.custom-modpack": {
+ "defaultMessage": "Custom modpack"
+ },
+ "create-version-modal.dropzone-primary": {
+ "defaultMessage": "Drag and drop files or click to browse"
+ },
+ "create-version-modal.dropzone-secondary": {
+ "defaultMessage": "You can try to drag files or folder or click this area to select it"
+ },
+ "create-version-modal.learn-more": {
+ "defaultMessage": "Learn more"
+ },
+ "create-version-modal.license-checkbox": {
+ "defaultMessage": "Do you have the appropriate licenses to redistribute all content in this Modpack?"
+ },
+ "create-version-modal.loading": {
+ "defaultMessage": "Loading..."
+ },
+ "create-version-modal.modded-content-label": {
+ "defaultMessage": "Modded content"
+ },
+ "create-version-modal.no-results": {
+ "defaultMessage": "No results found"
+ },
+ "create-version-modal.project-label": {
+ "defaultMessage": "Project"
+ },
+ "create-version-modal.project-placeholder": {
+ "defaultMessage": "Select modpack"
+ },
+ "create-version-modal.project-search-placeholder": {
+ "defaultMessage": "Search by name or paste ID..."
+ },
+ "create-version-modal.published-modpack": {
+ "defaultMessage": "Published modpack"
+ },
+ "create-version-modal.replace-file": {
+ "defaultMessage": "Replace file"
+ },
+ "create-version-modal.select-modpack": {
+ "defaultMessage": "Select modpack"
+ },
+ "create-version-modal.set-active-version": {
+ "defaultMessage": "Set as the active version."
+ },
+ "create-version-modal.set-primary-version": {
+ "defaultMessage": "Set as the primary version."
+ },
+ "create-version-modal.title": {
+ "defaultMessage": "Create new version"
+ },
+ "create-version-modal.uploading": {
+ "defaultMessage": "Uploading"
+ },
+ "create-version-modal.version-label": {
+ "defaultMessage": "Version"
+ },
+ "create-version-modal.version-name-label": {
+ "defaultMessage": "Name"
+ },
+ "create-version-modal.version-number-placeholder": {
+ "defaultMessage": "Enter version number"
+ },
+ "create-version-modal.version-placeholder": {
+ "defaultMessage": "Select version"
+ },
+ "create-version-modal.version-search-placeholder": {
+ "defaultMessage": "Search versions..."
+ },
"form.label.address-line": {
"defaultMessage": "Address line"
},
@@ -500,6 +578,30 @@
"modal.add-payment-method.title": {
"defaultMessage": "Adding a payment method"
},
+ "modal.open-in-app.benefit.install": {
+ "defaultMessage": "Automatically install required content"
+ },
+ "modal.open-in-app.benefit.launch": {
+ "defaultMessage": "Launch the game straight into the server"
+ },
+ "modal.open-in-app.benefit.update": {
+ "defaultMessage": "Keep files updated when the server changes"
+ },
+ "modal.open-in-app.close": {
+ "defaultMessage": "Close"
+ },
+ "modal.open-in-app.get-app": {
+ "defaultMessage": "Get Modrinth App"
+ },
+ "modal.open-in-app.opening-automatically": {
+ "defaultMessage": "The Modrinth App will open automatically..."
+ },
+ "modal.open-in-app.title": {
+ "defaultMessage": "Opening Modrinth App"
+ },
+ "modal.open-in-app.why-use": {
+ "defaultMessage": "Why use the Modrinth App"
+ },
"notification.error.title": {
"defaultMessage": "An error occurred"
},
@@ -896,6 +998,9 @@
"project.settings.analytics.title": {
"defaultMessage": "Analytics"
},
+ "project.settings.content.title": {
+ "defaultMessage": "Content"
+ },
"project.settings.description.title": {
"defaultMessage": "Description"
},
diff --git a/packages/ui/src/providers/index.ts b/packages/ui/src/providers/index.ts
index 8281575551..3555eb021a 100644
--- a/packages/ui/src/providers/index.ts
+++ b/packages/ui/src/providers/index.ts
@@ -81,6 +81,7 @@ export function createContext
(
export * from './api-client'
export * from './i18n'
export * from './page-context'
+export * from './popup-notifications'
export * from './project-page'
export * from './server-context'
export * from './web-notifications'
diff --git a/packages/ui/src/providers/popup-notifications.ts b/packages/ui/src/providers/popup-notifications.ts
new file mode 100644
index 0000000000..8f2ff65ead
--- /dev/null
+++ b/packages/ui/src/providers/popup-notifications.ts
@@ -0,0 +1,79 @@
+import { createContext } from '.'
+
+export interface PopupNotificationButton {
+ label: string
+ action: () => void
+ color?: 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'standard'
+}
+
+export interface PopupNotification {
+ id: string | number
+ title: string
+ text?: string
+ type?: 'error' | 'warning' | 'success' | 'info'
+ buttons?: PopupNotificationButton[]
+ autoCloseMs?: number | null
+ timer?: NodeJS.Timeout
+}
+
+export abstract class AbstractPopupNotificationManager {
+ protected readonly DEFAULT_AUTO_CLOSE_MS = 30 * 1000
+
+ abstract getNotifications(): PopupNotification[]
+
+ protected abstract addNotificationToStorage(notification: PopupNotification): void
+ protected abstract removeNotificationFromStorage(id: string | number): void
+ protected abstract clearAllNotificationsFromStorage(): void
+
+ addPopupNotification = (
+ notification: Omit,
+ ): PopupNotification => {
+ const newNotification: PopupNotification = {
+ ...notification,
+ id: Date.now() + Math.random(),
+ }
+ this.setNotificationTimer(newNotification)
+ this.addNotificationToStorage(newNotification)
+ return newNotification
+ }
+
+ removeNotification = (id: string | number): void => {
+ const notifications = this.getNotifications()
+ const notification = notifications.find((n) => n.id === id)
+ if (notification) {
+ this.clearNotificationTimer(notification)
+ this.removeNotificationFromStorage(id)
+ }
+ }
+
+ clearAllNotifications = (): void => {
+ this.getNotifications().forEach((n) => this.clearNotificationTimer(n))
+ this.clearAllNotificationsFromStorage()
+ }
+
+ setNotificationTimer = (notification: PopupNotification): void => {
+ if (!notification) return
+ this.clearNotificationTimer(notification)
+
+ if (notification.autoCloseMs === null) return
+
+ const delay = notification.autoCloseMs ?? this.DEFAULT_AUTO_CLOSE_MS
+ notification.timer = setTimeout(() => {
+ this.removeNotification(notification.id)
+ }, delay)
+ }
+
+ stopNotificationTimer = (notification: PopupNotification): void => {
+ this.clearNotificationTimer(notification)
+ }
+
+ private clearNotificationTimer(notification: PopupNotification): void {
+ if (notification.timer) {
+ clearTimeout(notification.timer)
+ notification.timer = undefined
+ }
+ }
+}
+
+export const [injectPopupNotificationManager, providePopupNotificationManager] =
+ createContext('root', 'popupNotificationManager')
diff --git a/packages/ui/src/stories/base/Combobox.stories.ts b/packages/ui/src/stories/base/Combobox.stories.ts
index 5ed52f9a3b..ca781dbf02 100644
--- a/packages/ui/src/stories/base/Combobox.stories.ts
+++ b/packages/ui/src/stories/base/Combobox.stories.ts
@@ -1,11 +1,3 @@
-import {
- DownloadIcon,
- HeartIcon,
- SettingsIcon,
- ShareIcon,
- TrashIcon,
- UserIcon,
-} from '@modrinth/assets'
import type { Meta, StoryObj } from '@storybook/vue3-vite'
import Combobox from '../../components/base/Combobox.vue'
@@ -53,60 +45,26 @@ export const Disabled: Story = {
},
}
-export const IconSlot: 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 IconSlotSearchable: 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 = {
+export const WithSubLabels: Story = {
args: {
+ modelValue: '2',
options: [
- { value: '1', label: 'Option 1' },
- { value: '2', label: 'Option 2' },
- { value: '3', label: 'Option 3' },
+ { value: '1', label: 'Fabric', subLabel: 'Lightweight modding toolchain' },
+ { value: '2', label: 'Forge', subLabel: 'The original Minecraft modding API' },
+ { value: '3', label: 'NeoForge', subLabel: 'Community-driven Forge fork' },
+ { value: '4', label: 'Quilt', subLabel: 'The mod-loader that cares' },
],
- modelValue: '2',
},
}
-export const WithSelectedOptionAndIcon: Story = {
+export const MixedSubLabels: 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: '1', label: 'Minecraft', subLabel: 'The base game' },
+ { value: '2', label: 'Fabric' },
+ { value: '3', label: 'Forge', subLabel: 'Supports most mods' },
+ { value: '4', label: 'NeoForge' },
+ { value: '5', label: 'Quilt', subLabel: 'Fabric-compatible' },
],
- modelValue: 'favorite',
- showIconInSelected: true,
},
}
diff --git a/packages/ui/src/stories/base/DropzoneFileInput.stories.ts b/packages/ui/src/stories/base/DropzoneFileInput.stories.ts
index 2c3e123dcb..ddf6e71345 100644
--- a/packages/ui/src/stories/base/DropzoneFileInput.stories.ts
+++ b/packages/ui/src/stories/base/DropzoneFileInput.stories.ts
@@ -18,6 +18,18 @@ export const Small: Story = {
},
}
+export const Medium: Story = {
+ args: {
+ size: 'medium',
+ },
+}
+
+export const Large: Story = {
+ args: {
+ size: 'large',
+ },
+}
+
export const MultipleFiles: Story = {
args: {
multiple: true,
diff --git a/packages/ui/src/stories/nav/NotificationPanel.stories.ts b/packages/ui/src/stories/nav/NotificationPanel.stories.ts
new file mode 100644
index 0000000000..0c585ccdee
--- /dev/null
+++ b/packages/ui/src/stories/nav/NotificationPanel.stories.ts
@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import NotificationPanel from '../../components/nav/NotificationPanel.vue'
+import { injectNotificationManager } from '../../providers'
+
+const meta = {
+ title: 'Nav/NotificationPanel',
+ component: NotificationPanel,
+} satisfies Meta
+
+export default meta
+
+export const Default: StoryObj = {
+ render: () => ({
+ components: { NotificationPanel, ButtonStyled },
+ setup() {
+ const notificationManager = injectNotificationManager()
+
+ const showSuccess = () => {
+ notificationManager.addNotification({
+ title: 'Success',
+ text: 'Your project has been published successfully.',
+ type: 'success',
+ })
+ }
+
+ const showError = () => {
+ notificationManager.addNotification({
+ title: 'An error occurred',
+ text: 'Failed to upload file. Please try again.',
+ type: 'error',
+ errorCode: 'ERR_UPLOAD_FAILED',
+ })
+ }
+
+ const showWarning = () => {
+ notificationManager.addNotification({
+ title: 'Warning',
+ text: 'Your session is about to expire.',
+ type: 'warning',
+ })
+ }
+
+ const showInfo = () => {
+ notificationManager.addNotification({
+ title: 'Info',
+ text: 'A new version of the modpack is available.',
+ type: 'info',
+ })
+ }
+
+ const clearAll = () => {
+ notificationManager.clearAllNotifications()
+ }
+
+ return { showSuccess, showError, showWarning, showInfo, clearAll }
+ },
+ template: /* html */ `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+