feat: modrinth hosting - files tab refactor (#4912)

* feat: api-client module for content v0

* feat: delete unused components + modules + setting

* feat: xhr uploading

* feat: fs module -> api-client

* feat: migrate files.vue to use tanstack

* fix: mem leak + other issues

* fix: build

* feat: switch to monaco

* fix: go back to using ace, but improve preloading + theme

* fix: styling + dead attrs

* feat: match figma

* fix: padding

* feat: files-new for ui page structure

* feat: finalize files.vue

* fix: lint

* fix: qa

* fix: dep

* fix: lint

* fix: lockfile merge

* feat: icons on navtab

* fix: surface alternating on table

* fix: hover surface color

---------

Signed-off-by: Calum H. <contact@cal.engineer>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

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)
+	},
+)

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'
+	}
+}

packages/ui/src/utils/index.ts

@@ -1,6 +1,7 @@
 export * from './auto-icons'
 export * from './common-messages'
 export * from './events'
+export * from './file-extensions'
 export * from './game-modes'
 export * from './notices'
 export * from './savable'