-
-
+
+
-
+
-
{{ name }}
-
- {{ subText }}
-
-
+
+
+ {{ formattedSize }}
+
+
{{ formattedCreationDate }}
-
+
{{ formattedModifiedDate }}
@@ -71,22 +68,23 @@ import {
FolderOpenIcon,
MoreHorizontalIcon,
PackageOpenIcon,
+ PaletteIcon,
RightArrowIcon,
TrashIcon,
} from '@modrinth/assets'
import {
ButtonStyled,
- CODE_EXTENSIONS,
+ Checkbox,
+ getFileExtension,
getFileExtensionIcon,
- IMAGE_EXTENSIONS,
- TEXT_EXTENSIONS,
+ isEditableFile as isEditableFileExt,
+ isImageFile,
} from '@modrinth/ui'
import { computed, h, ref, shallowRef } from 'vue'
import { renderToString } from 'vue/server-renderer'
import { useRoute, useRouter } from 'vue-router'
import { UiServersIconsCogFolderIcon, UiServersIconsEarthIcon } from '#components'
-import PaletteIcon from '~/assets/icons/palette.svg?component'
import TeleportOverflowMenu from './TeleportOverflowMenu.vue'
@@ -98,17 +96,21 @@ interface FileItemProps {
modified: number
created: number
path: string
+ index: number
+ isLast: boolean
+ selected: boolean
}
const props = defineProps()
const emit = defineEmits<{
(
- e: 'rename' | 'move' | 'download' | 'delete' | 'edit' | 'extract',
+ e: 'rename' | 'move' | 'download' | 'delete' | 'edit' | 'extract' | 'hover',
item: { name: string; type: string; path: string },
): void
(e: 'moveDirectTo', item: { name: string; type: string; path: string; destination: string }): void
(e: 'contextmenu', x: number, y: number): void
+ (e: 'toggle-select'): void
}>()
const isDragOver = ref(false)
@@ -120,12 +122,15 @@ const route = shallowRef(useRoute())
const router = useRouter()
const containerClasses = computed(() => [
- 'group m-0 p-0 focus:!outline-none flex w-full select-none items-center justify-between overflow-hidden border-0 border-b border-solid border-bg-raised p-3 last:border-none hover:bg-bg-raised focus:bg-bg-raised',
+ 'group m-0 flex w-full select-none items-center justify-between overflow-hidden border-0 border-t border-solid border-surface-3 px-4 py-3 focus:!outline-none',
+ props.index % 2 === 0 ? 'bg-surface-2' : 'bg-surface-3',
+ props.isLast ? 'rounded-b-[20px] border-b' : '',
isEditableFile.value ? 'cursor-pointer' : props.type === 'directory' ? 'cursor-pointer' : '',
- isDragOver.value ? 'bg-brand-highlight' : '',
+ isDragOver.value ? '!bg-brand-highlight' : '',
+ 'hover:brightness-110 focus:brightness-110',
])
-const fileExtension = computed(() => props.name.split('.').pop()?.toLowerCase() || '')
+const fileExtension = computed(() => getFileExtension(props.name))
const isZip = computed(() => fileExtension.value === 'zip')
@@ -170,13 +175,6 @@ const iconComponent = computed(() => {
return getFileExtensionIcon(fileExtension.value)
})
-const subText = computed(() => {
- if (props.type === 'directory') {
- return `${props.count} ${props.count === 1 ? 'item' : 'items'}`
- }
- return formattedSize.value
-})
-
const formattedModifiedDate = computed(() => {
const date = new Date(props.modified * 1000)
return `${date.toLocaleDateString('en-US', {
@@ -206,17 +204,16 @@ const formattedCreationDate = computed(() => {
const isEditableFile = computed(() => {
if (props.type === 'file') {
const ext = fileExtension.value
- return (
- !props.name.includes('.') ||
- TEXT_EXTENSIONS.includes(ext) ||
- CODE_EXTENSIONS.includes(ext) ||
- IMAGE_EXTENSIONS.includes(ext)
- )
+ return !props.name.includes('.') || isEditableFileExt(ext) || isImageFile(ext)
}
return false
})
const formattedSize = computed(() => {
+ if (props.type === 'directory') {
+ return `${props.count} ${props.count === 1 ? 'item' : 'items'}`
+ }
+
if (props.size === undefined) return ''
const bytes = props.size
if (bytes === 0) return '0 B'
@@ -226,12 +223,16 @@ const formattedSize = computed(() => {
return `${size} ${units[exponent]}`
})
-const openContextMenu = (event: MouseEvent) => {
+function openContextMenu(event: MouseEvent) {
event.preventDefault()
emit('contextmenu', event.clientX, event.clientY)
}
-const navigateToFolder = () => {
+function handleMouseEnter() {
+ emit('hover', { name: props.name, type: props.type, path: props.path })
+}
+
+function navigateToFolder() {
const currentPath = route.value.query.path?.toString() || ''
const newPath = currentPath.endsWith('/')
? `${currentPath}${props.name}`
@@ -241,7 +242,7 @@ const navigateToFolder = () => {
const isNavigating = ref(false)
-const selectItem = () => {
+function selectItem() {
if (isNavigating.value) return
isNavigating.value = true
@@ -256,11 +257,12 @@ const selectItem = () => {
}, 500)
}
-const getDragIcon = async () => {
+async function getDragIcon() {
+ // Reuse iconComponent computed for consistency
return await renderToString(h(iconComponent.value))
}
-const handleDragStart = async (event: DragEvent) => {
+async function handleDragStart(event: DragEvent) {
if (!event.dataTransfer) return
isDragging.value = true
@@ -291,7 +293,7 @@ const handleDragStart = async (event: DragEvent) => {
})
event.dataTransfer.setData(
- 'application/pyro-file-move',
+ 'application/modrinth-file-move',
JSON.stringify({
name: props.name,
type: props.type,
@@ -301,34 +303,34 @@ const handleDragStart = async (event: DragEvent) => {
event.dataTransfer.effectAllowed = 'move'
}
-const isChildPath = (parentPath: string, childPath: string) => {
+function isChildPath(parentPath: string, childPath: string) {
return childPath.startsWith(parentPath + '/')
}
-const handleDragEnd = () => {
+function handleDragEnd() {
isDragging.value = false
}
-const handleDragEnter = () => {
+function handleDragEnter() {
if (props.type !== 'directory') return
isDragOver.value = true
}
-const handleDragOver = (event: DragEvent) => {
+function handleDragOver(event: DragEvent) {
if (props.type !== 'directory' || !event.dataTransfer) return
event.dataTransfer.dropEffect = 'move'
}
-const handleDragLeave = () => {
+function handleDragLeave() {
isDragOver.value = false
}
-const handleDrop = (event: DragEvent) => {
+function handleDrop(event: DragEvent) {
isDragOver.value = false
if (props.type !== 'directory' || !event.dataTransfer) return
try {
- const dragData = JSON.parse(event.dataTransfer.getData('application/pyro-file-move'))
+ const dragData = JSON.parse(event.dataTransfer.getData('application/modrinth-file-move'))
if (dragData.path === props.path) return
diff --git a/apps/frontend/src/components/ui/servers/FileManagerError.vue b/apps/frontend/src/components/ui/servers/FileManagerError.vue
index c9e984daf7..84adf75b66 100644
--- a/apps/frontend/src/components/ui/servers/FileManagerError.vue
+++ b/apps/frontend/src/components/ui/servers/FileManagerError.vue
@@ -2,7 +2,7 @@
-
{{ title }}
+{{ title }}
{{ message }}
diff --git a/apps/frontend/src/components/ui/servers/FileVirtualList.vue b/apps/frontend/src/components/ui/servers/FileVirtualList.vue index 9381fb77be..800783aa0e 100644 --- a/apps/frontend/src/components/ui/servers/FileVirtualList.vue +++ b/apps/frontend/src/components/ui/servers/FileVirtualList.vue @@ -1,11 +1,10 @@ -
+
@@ -49,15 +52,17 @@ import FileItem from './FileItem.vue'
const props = defineProps<{
items: any[]
+ selectedItems: Set
}>()
const emit = defineEmits<{
(
- e: 'delete' | 'rename' | 'download' | 'move' | 'edit' | 'moveDirectTo' | 'extract',
+ e: 'delete' | 'rename' | 'download' | 'move' | 'edit' | 'moveDirectTo' | 'extract' | 'hover',
item: any,
): void
(e: 'contextmenu', item: any, x: number, y: number): void
(e: 'loadMore'): void
+ (e: 'toggle-select', path: string): void
}>()
const ITEM_HEIGHT = 61
@@ -92,7 +97,7 @@ const visibleItems = computed(() => {
return props.items.slice(visibleRange.value.start, visibleRange.value.end)
})
-const handleScroll = () => {
+function handleScroll() {
windowScrollY.value = window.scrollY
if (!listContainer.value) return
@@ -105,7 +110,7 @@ const handleScroll = () => {
}
}
-const handleResize = () => {
+function handleResize() {
windowHeight.value = window.innerHeight
}
diff --git a/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue b/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue
index 165d13facf..9d02fac539 100644
--- a/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue
+++ b/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue
@@ -1,11 +1,6 @@
-
-
-
-
-
-
-
-
-
-
- {{ filterLabel }}
-
-
-
- Show all
- Files only
- Folders only
-
-
-
+
-
-
-
-
+
+
-
-
+
+
New file
New folder
Upload file
@@ -159,7 +121,6 @@ import {
CurseForgeIcon,
DropdownIcon,
FileArchiveIcon,
- FilterIcon,
FolderOpenIcon,
HomeIcon,
LinkIcon,
@@ -168,12 +129,8 @@ import {
UploadIcon,
} from '@modrinth/assets'
import { ButtonStyled, OverflowMenu } from '@modrinth/ui'
-import { useIntersectionObserver } from '@vueuse/core'
-import { computed, ref } from 'vue'
-
-import TeleportOverflowMenu from './TeleportOverflowMenu.vue'
-const props = defineProps<{
+defineProps<{
breadcrumbSegments: string[]
searchQuery: string
currentFilter: string
@@ -183,44 +140,13 @@ const props = defineProps<{
defineEmits<{
(e: 'navigate', index: number): void
(e: 'create', type: 'file' | 'directory'): void
- (e: 'upload' | 'upload-zip'): void
+ (e: 'upload' | 'upload-zip' | 'prefetch-home'): void
(e: 'unzip-from-url', cf: boolean): void
(e: 'update:searchQuery' | 'filter', value: string): void
}>()
-
-const pyroFilesSentinel = ref(null)
-const isStuck = ref(false)
-
-useIntersectionObserver(
- pyroFilesSentinel,
- ([{ isIntersecting }]) => {
- isStuck.value = !isIntersecting
- },
- { threshold: [0, 1] },
-)
-
-const filterLabel = computed(() => {
- switch (props.currentFilter) {
- case 'filesOnly':
- return 'Files only'
- case 'foldersOnly':
- return 'Folders only'
- default:
- return 'Show all'
- }
-})
+
+ ()
+const client = injectModrinthClient()
+const serverId = props.server.serverId
+
interface ErrorData {
id: string
name: string
@@ -242,7 +245,8 @@ const inspectingError = ref(null)
const inspectError = async () => {
try {
- const log = await props.server.fs?.downloadFile('logs/latest.log')
+ const blob = await client.kyros.files_v0.downloadFile('/logs/latest.log')
+ const log = await blob.text()
if (!log) return
// @ts-ignore
@@ -287,9 +291,6 @@ if (props.serverPowerState === 'crashed' && !props.powerStateDetails?.oom_killed
inspectError()
}
-const client = injectModrinthClient()
-const serverId = props.server.serverId
-
const DYNAMIC_ARG = Symbol('DYNAMIC_ARG')
const commandTree: any = {
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/index.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/index.vue
index 9f228d4bab..b7b69e34f1 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/index.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/index.vue
@@ -116,13 +116,15 @@
+
+
+
+
+
+
+
+
diff --git a/packages/ui/src/components/base/UnsavedChangesPopup.vue b/packages/ui/src/components/base/UnsavedChangesPopup.vue
index c150f5840a..8f812ea6b9 100644
--- a/packages/ui/src/components/base/UnsavedChangesPopup.vue
+++ b/packages/ui/src/components/base/UnsavedChangesPopup.vue
@@ -5,6 +5,7 @@ import { type Component, computed } from 'vue'
import { commonMessages } from '../../utils'
import ButtonStyled from './ButtonStyled.vue'
+import FloatingActionBar from './FloatingActionBar.vue'
const { formatMessage } = useVIntl()
@@ -53,64 +54,21 @@ function localizeIfPossible(message: MessageDescriptor | string) {
-
-
+
+
-
-
+
-
-
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 71ae8c6400..1ca0618b67 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -26,6 +26,7 @@ export { default as ErrorInformationCard } from './ErrorInformationCard.vue'
export { default as FileInput } from './FileInput.vue'
export type { FilterBarOption } from './FilterBar.vue'
export { default as FilterBar } from './FilterBar.vue'
+export { default as FloatingActionBar } from './FloatingActionBar.vue'
export { default as HeadingLink } from './HeadingLink.vue'
export { default as HorizontalRule } from './HorizontalRule.vue'
export { default as IconSelect } from './IconSelect.vue'
diff --git a/packages/ui/src/components/servers/files/FileNavbar.vue b/packages/ui/src/components/servers/files/FileNavbar.vue
new file mode 100644
index 0000000000..2dfcf15ea4
--- /dev/null
+++ b/packages/ui/src/components/servers/files/FileNavbar.vue
@@ -0,0 +1,232 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/ui/src/components/servers/files/editor/FileEditor.vue b/packages/ui/src/components/servers/files/editor/FileEditor.vue
new file mode 100644
index 0000000000..ad9b592082
--- /dev/null
+++ b/packages/ui/src/components/servers/files/editor/FileEditor.vue
@@ -0,0 +1,222 @@
+
+
+
+
+
+
diff --git a/packages/ui/src/components/servers/files/explorer/FileLabelBar.vue b/packages/ui/src/components/servers/files/explorer/FileLabelBar.vue
new file mode 100644
index 0000000000..e74acba2cd
--- /dev/null
+++ b/packages/ui/src/components/servers/files/explorer/FileLabelBar.vue
@@ -0,0 +1,100 @@
+
+
+
+
+
diff --git a/packages/ui/src/components/servers/files/explorer/FileManagerError.vue b/packages/ui/src/components/servers/files/explorer/FileManagerError.vue
new file mode 100644
index 0000000000..d609c92358
--- /dev/null
+++ b/packages/ui/src/components/servers/files/explorer/FileManagerError.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
diff --git a/packages/ui/src/components/servers/files/modals/FileDeleteItemModal.vue b/packages/ui/src/components/servers/files/modals/FileDeleteItemModal.vue
new file mode 100644
index 0000000000..88a9c32811
--- /dev/null
+++ b/packages/ui/src/components/servers/files/modals/FileDeleteItemModal.vue
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
diff --git a/packages/ui/src/components/servers/files/modals/FileMoveItemModal.vue b/packages/ui/src/components/servers/files/modals/FileMoveItemModal.vue
new file mode 100644
index 0000000000..d5affe6df9
--- /dev/null
+++ b/packages/ui/src/components/servers/files/modals/FileMoveItemModal.vue
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
diff --git a/packages/ui/src/components/servers/files/modals/FileRenameItemModal.vue b/packages/ui/src/components/servers/files/modals/FileRenameItemModal.vue
new file mode 100644
index 0000000000..b221be4336
--- /dev/null
+++ b/packages/ui/src/components/servers/files/modals/FileRenameItemModal.vue
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
diff --git a/packages/ui/src/components/servers/files/modals/FileUploadConflictModal.vue b/packages/ui/src/components/servers/files/modals/FileUploadConflictModal.vue
new file mode 100644
index 0000000000..e5d7f123e3
--- /dev/null
+++ b/packages/ui/src/components/servers/files/modals/FileUploadConflictModal.vue
@@ -0,0 +1,56 @@
+
+
+
+
+
+
diff --git a/packages/ui/src/components/servers/files/modals/index.ts b/packages/ui/src/components/servers/files/modals/index.ts
new file mode 100644
index 0000000000..d7610e7494
--- /dev/null
+++ b/packages/ui/src/components/servers/files/modals/index.ts
@@ -0,0 +1,5 @@
+export { default as FileCreateItemModal } from './FileCreateItemModal.vue'
+export { default as FileDeleteItemModal } from './FileDeleteItemModal.vue'
+export { default as FileMoveItemModal } from './FileMoveItemModal.vue'
+export { default as FileRenameItemModal } from './FileRenameItemModal.vue'
+export { default as FileUploadConflictModal } from './FileUploadConflictModal.vue'
diff --git a/packages/ui/src/components/servers/files/upload/FileUploadDragAndDrop.vue b/packages/ui/src/components/servers/files/upload/FileUploadDragAndDrop.vue
new file mode 100644
index 0000000000..3d03699feb
--- /dev/null
+++ b/packages/ui/src/components/servers/files/upload/FileUploadDragAndDrop.vue
@@ -0,0 +1,75 @@
+
+ >()
const renameBackupModal = ref>()
const restoreBackupModal = ref>()
const deleteBackupModal = ref>()
-// const backupSettingsModal = ref>()
const backupRestoreDisabled = computed(() => {
if (props.isServerRunning) {
@@ -400,10 +399,6 @@ const showCreateModel = () => {
createBackupModal.value?.show()
}
-// const showbackupSettingsModal = () => {
-// backupSettingsModal.value?.show()
-// }
-
function triggerDownloadAnimation() {
overTheTopDownloadAnimation.value = true
setTimeout(() => (overTheTopDownloadAnimation.value = false), 500)
diff --git a/packages/ui/src/pages/hosting/manage/files.vue b/packages/ui/src/pages/hosting/manage/files.vue
new file mode 100644
index 0000000000..e79d6e5319
--- /dev/null
+++ b/packages/ui/src/pages/hosting/manage/files.vue
@@ -0,0 +1,1231 @@
+
+
+export interface FilesystemAuth {
+ url: string
+ token: string
+}
+
export interface ModrinthServerContext {
readonly serverId: string
readonly server: Ref
@@ -26,6 +31,12 @@ export interface ModrinthServerContext {
readonly isServerRunning: ComputedRef
readonly backupsState: Reactive
markBackupCancelled: (backupId: string) => void
+
+ // Filesystem state
+ readonly fsAuth: Ref
+ readonly fsOps: Ref
+ readonly fsQueuedOps: Ref
+ refreshFsAuth: () => Promise
}
export const [injectModrinthServerContext, provideModrinthServerContext] =
diff --git a/packages/ui/src/utils/ace-theme.ts b/packages/ui/src/utils/ace-theme.ts
new file mode 100644
index 0000000000..a1cde94088
--- /dev/null
+++ b/packages/ui/src/utils/ace-theme.ts
@@ -0,0 +1,15 @@
+import cssText from '@modrinth/assets/styles/ace.css?raw'
+import ace from 'ace-builds'
+
+ace['define'](
+ 'ace/theme/modrinth',
+ ['require', 'exports', 'module', 'ace/lib/dom'],
+ function (require, exports, _module) {
+ exports.isDark = false
+ exports.cssClass = 'ace-modrinth'
+ exports.cssText = cssText
+
+ const dom = require('ace/lib/dom')
+ dom.importCssString(exports.cssText, exports.cssClass, false)
+ },
+)
diff --git a/packages/ui/src/utils/file-extensions.ts b/packages/ui/src/utils/file-extensions.ts
new file mode 100644
index 0000000000..38f11b974c
--- /dev/null
+++ b/packages/ui/src/utils/file-extensions.ts
@@ -0,0 +1,152 @@
+// File extension constants
+export const CODE_EXTENSIONS = [
+ '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 = [
+ 'txt',
+ 'md',
+ 'log',
+ 'cfg',
+ 'conf',
+ 'properties',
+ 'ini',
+ 'sk',
+] as const
+
+export const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'] as const
+
+export const ARCHIVE_EXTENSIONS = ['zip'] 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]
+
+/**
+ * Extract file extension from filename (lowercase)
+ */
+export function getFileExtension(filename: string): string {
+ return filename.split('.').pop()?.toLowerCase() ?? ''
+}
+
+/**
+ * Check if extension is a code file
+ */
+export function isCodeFile(ext: string): boolean {
+ return (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())
+}
+
+/**
+ * Check if extension is an image file
+ */
+export function isImageFile(ext: string): boolean {
+ return (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())
+}
+
+/**
+ * Check if file is editable (code or text)
+ */
+export function isEditableFile(ext: string): boolean {
+ return isCodeFile(ext) || isTextFile(ext)
+}
+
+/**
+ * Get Ace editor language mode for a file extension
+ */
+export function getEditorLanguage(ext: string): string {
+ const lowered = ext.toLowerCase()
+ switch (lowered) {
+ // Code files
+ case 'json':
+ case 'json5':
+ case 'jsonc':
+ return 'json'
+ case 'toml':
+ return 'toml'
+ case 'sh':
+ return 'sh'
+ case 'bat':
+ return 'batchfile'
+ case 'ps1':
+ return 'powershell'
+ case 'yml':
+ case 'yaml':
+ return 'yaml'
+ case 'js':
+ return 'javascript'
+ case 'ts':
+ return 'typescript'
+ case 'py':
+ return 'python'
+ case 'rb':
+ return 'ruby'
+ case 'php':
+ return 'php'
+ case 'html':
+ return 'html'
+ case 'css':
+ return 'css'
+ case 'java':
+ case 'kt':
+ case 'kts':
+ return 'java'
+ case 'cpp':
+ case 'c':
+ case 'h':
+ return 'c_cpp'
+ case 'rs':
+ return 'rust'
+ case 'go':
+ return 'golang'
+ // Text files
+ case 'md':
+ return 'markdown'
+ case 'properties':
+ return 'properties'
+ case 'ini':
+ case 'cfg':
+ case 'conf':
+ return 'ini'
+ default:
+ return 'text'
+ }
+}
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index 6d77f1b6aa..76f7a69744 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -1,5 +1,6 @@
export * from './auto-icons'
export * from './common-messages'
+export * from './file-extensions'
export * from './game-modes'
export * from './notices'
export * from './savable'
diff --git a/packages/utils/servers/types/api.ts b/packages/utils/servers/types/api.ts
index 634f79d9b0..8cc6271f10 100644
--- a/packages/utils/servers/types/api.ts
+++ b/packages/utils/servers/types/api.ts
@@ -16,4 +16,4 @@ export interface ModuleError {
timestamp: number
}
-export type ModuleName = 'general' | 'content' | 'backups' | 'network' | 'startup' | 'ws' | 'fs'
+export type ModuleName = 'general' | 'content' | 'network' | 'startup'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 426871fb39..de2ed578d4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -271,7 +271,7 @@ importers:
version: 11.1.0(vue@3.5.13(typescript@5.5.4))
ace-builds:
specifier: ^1.36.2
- version: 1.36.2
+ version: 1.43.5
ansi-to-html:
specifier: ^0.7.2
version: 0.7.2
@@ -334,7 +334,7 @@ importers:
version: 1.0.10(vue@3.5.13(typescript@5.5.4))
vue3-ace-editor:
specifier: ^2.2.4
- version: 2.2.4(ace-builds@1.36.2)(vue@3.5.13(typescript@5.5.4))
+ version: 2.2.4(ace-builds@1.43.5)(vue@3.5.13(typescript@5.5.4))
vue3-apexcharts:
specifier: ^1.5.2
version: 1.5.3(apexcharts@3.49.2)(vue@3.5.13(typescript@5.5.4))
@@ -598,6 +598,9 @@ importers:
'@vueuse/core':
specifier: ^11.1.0
version: 11.1.0(vue@3.5.13(typescript@5.5.4))
+ ace-builds:
+ specifier: ^1.36.2
+ version: 1.43.5
apexcharts:
specifier: ^3.44.0
version: 3.49.2
@@ -3436,8 +3439,8 @@ packages:
resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
engines: {node: '>=6.5'}
- ace-builds@1.36.2:
- resolution: {integrity: sha512-eqqfbGwx/GKjM/EnFu4QtQ+d2NNBu84MGgxoG8R5iyFpcVeQ4p9YlTL+ZzdEJqhdkASqoqOxCSNNGyB6lvMm+A==}
+ ace-builds@1.43.5:
+ resolution: {integrity: sha512-iH5FLBKdB7SVn9GR37UgA/tpQS8OTWIxWAuq3Ofaw+Qbc69FfPXsXd9jeW7KRG2xKpKMqBDnu0tHBrCWY5QI7A==}
acorn-import-attributes@1.9.5:
resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
@@ -11738,7 +11741,7 @@ snapshots:
dependencies:
event-target-shim: 5.0.1
- ace-builds@1.36.2: {}
+ ace-builds@1.43.5: {}
acorn-import-attributes@1.9.5(acorn@8.14.0):
dependencies:
@@ -17623,9 +17626,9 @@ snapshots:
vue-observe-visibility: 2.0.0-alpha.1(vue@3.5.13(typescript@5.5.4))
vue-resize: 2.0.0-alpha.1(vue@3.5.13(typescript@5.5.4))
- vue3-ace-editor@2.2.4(ace-builds@1.36.2)(vue@3.5.13(typescript@5.5.4)):
+ vue3-ace-editor@2.2.4(ace-builds@1.43.5)(vue@3.5.13(typescript@5.5.4)):
dependencies:
- ace-builds: 1.36.2
+ ace-builds: 1.43.5
resize-observer-polyfill: 1.5.1
vue: 3.5.13(typescript@5.5.4)
-
+ {{ localizeIfPossible(text) }}
-
-
-
-
-
-
-
-
- {{ localizeIfPossible(text) }}
+
+
+
+
+
+
+
-
+
+
+
+
+
+ New file
+ New folder
+ Upload file
+
+ Upload from .zip file
+
+
+ Upload from .zip URL
+
+
+ Install CurseForge pack
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Save
+ Save as...
+
+
+ Save & restart
+
+
+
+
+
+
+
+
+
diff --git a/packages/ui/src/components/servers/files/editor/FileImageViewer.vue b/packages/ui/src/components/servers/files/editor/FileImageViewer.vue
new file mode 100644
index 0000000000..094cbfdfdd
--- /dev/null
+++ b/packages/ui/src/components/servers/files/editor/FileImageViewer.vue
@@ -0,0 +1,178 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/ui/src/components/servers/files/editor/index.ts b/packages/ui/src/components/servers/files/editor/index.ts
new file mode 100644
index 0000000000..3f5fed318a
--- /dev/null
+++ b/packages/ui/src/components/servers/files/editor/index.ts
@@ -0,0 +1,2 @@
+export { default as FileEditor } from './FileEditor.vue'
+export { default as FileImageViewer } from './FileImageViewer.vue'
diff --git a/packages/ui/src/components/servers/files/explorer/FileItem.vue b/packages/ui/src/components/servers/files/explorer/FileItem.vue
new file mode 100644
index 0000000000..1aba5394b4
--- /dev/null
+++ b/packages/ui/src/components/servers/files/explorer/FileItem.vue
@@ -0,0 +1,340 @@
+
+
+
+ ![Viewed image]()
+
+
+
+ {{ state.errorMessage || 'Invalid or empty image file.' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ name }}
+
+
+
+
+ {{ formattedSize }}
+
+
+ {{ formattedCreationDate }}
+
+
+ {{ formattedModifiedDate }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/ui/src/components/servers/files/explorer/FileVirtualList.vue b/packages/ui/src/components/servers/files/explorer/FileVirtualList.vue
new file mode 100644
index 0000000000..ef19dc22ec
--- /dev/null
+++ b/packages/ui/src/components/servers/files/explorer/FileVirtualList.vue
@@ -0,0 +1,132 @@
+
+
+
+ {{ title }}
++ {{ message }} +
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue b/packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue
new file mode 100644
index 0000000000..05c0a5599e
--- /dev/null
+++ b/packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue
@@ -0,0 +1,415 @@
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/ui/src/components/servers/files/explorer/index.ts b/packages/ui/src/components/servers/files/explorer/index.ts
new file mode 100644
index 0000000000..a19d7a7774
--- /dev/null
+++ b/packages/ui/src/components/servers/files/explorer/index.ts
@@ -0,0 +1,5 @@
+export { default as FileItem } from './FileItem.vue'
+export { default as FileLabelBar } from './FileLabelBar.vue'
+export { default as FileManagerError } from './FileManagerError.vue'
+export { default as FileVirtualList } from './FileVirtualList.vue'
+export { default as TeleportOverflowMenu } from './TeleportOverflowMenu.vue'
diff --git a/packages/ui/src/components/servers/files/index.ts b/packages/ui/src/components/servers/files/index.ts
new file mode 100644
index 0000000000..5d9dca6113
--- /dev/null
+++ b/packages/ui/src/components/servers/files/index.ts
@@ -0,0 +1,5 @@
+export * from './editor'
+export * from './explorer'
+export * from './modals'
+export * from './upload'
+export { default as FileNavbar } from './FileNavbar.vue'
diff --git a/packages/ui/src/components/servers/files/modals/FileCreateItemModal.vue b/packages/ui/src/components/servers/files/modals/FileCreateItemModal.vue
new file mode 100644
index 0000000000..e693a1e5c0
--- /dev/null
+++ b/packages/ui/src/components/servers/files/modals/FileCreateItemModal.vue
@@ -0,0 +1,96 @@
+
+
+
+
+
+
+
+ {{ option.id }}
+
+
+ {{ option.id }}
+
+
+
+
+
+
+ + + Over 100 files will be overwritten if you proceed with extraction; here is just some of + them: + + + The following {{ files.length }} files already exist on your server, and will be + overwritten if you proceed with extraction: + +
+-
+
-
+
{{ file }} +
+
+
+
+
+
diff --git a/packages/ui/src/components/servers/files/upload/FileUploadDropdown.vue b/packages/ui/src/components/servers/files/upload/FileUploadDropdown.vue
new file mode 100644
index 0000000000..580754c31f
--- /dev/null
+++ b/packages/ui/src/components/servers/files/upload/FileUploadDropdown.vue
@@ -0,0 +1,333 @@
+
+
+
+
+
+ + Drop {{ type ? type.toLocaleLowerCase() : 'file' }}s here to upload +
+
+
+
+
+
+
+
+
+
diff --git a/packages/ui/src/components/servers/files/upload/index.ts b/packages/ui/src/components/servers/files/upload/index.ts
new file mode 100644
index 0000000000..d44ae326ac
--- /dev/null
+++ b/packages/ui/src/components/servers/files/upload/index.ts
@@ -0,0 +1,2 @@
+export { default as FileUploadDragAndDrop } from './FileUploadDragAndDrop.vue'
+export { default as FileUploadDropdown } from './FileUploadDropdown.vue'
diff --git a/packages/ui/src/components/servers/index.ts b/packages/ui/src/components/servers/index.ts
index 8a474342eb..476693f12a 100644
--- a/packages/ui/src/components/servers/index.ts
+++ b/packages/ui/src/components/servers/index.ts
@@ -1,4 +1,5 @@
export * from './backups'
+export * from './files'
export * from './icons'
export * from './labels'
export * from './marketing'
diff --git a/packages/ui/src/pages/hosting/manage/backups.vue b/packages/ui/src/pages/hosting/manage/backups.vue
index 86cd8cb21a..96e8fcd3be 100644
--- a/packages/ui/src/pages/hosting/manage/backups.vue
+++ b/packages/ui/src/pages/hosting/manage/backups.vue
@@ -350,7 +350,6 @@ const createBackupModal = ref
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.file.name }}
+ {{ item.size }}
+
+
+
+ Done
+
+
+ Failed - File already exists
+
+
+ Failed - {{ item.error?.message || 'An unexpected error occured.' }}
+
+
+ Failed - Incorrect file type
+
+
+
+ {{ item.progress }}%
+
+
+
+
+
+ Cancelled
+
+
+ {{ item.progress }}%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ selectedItems.size }} selected
+
+
+
+
+
+
+
diff --git a/packages/ui/src/pages/index.ts b/packages/ui/src/pages/index.ts
index cebba2a462..528a1761c5 100644
--- a/packages/ui/src/pages/index.ts
+++ b/packages/ui/src/pages/index.ts
@@ -1,2 +1,3 @@
export { default as ServersManageBackupsPage } from './hosting/manage/backups.vue'
+export { default as ServersManageFilesPage } from './hosting/manage/files.vue'
export { default as ServersManagePageIndex } from './hosting/manage/index.vue'
diff --git a/packages/ui/src/providers/server-context.ts b/packages/ui/src/providers/server-context.ts
index 08f3b2c627..82026ca57f 100644
--- a/packages/ui/src/providers/server-context.ts
+++ b/packages/ui/src/providers/server-context.ts
@@ -16,6 +16,11 @@ export type BackupProgressEntry = {
export type BackupsState = Map
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This folder is empty
+There are no files or folders.
+
+
+
+
+
+
+
+
+