refactor: instance export modal (#6543)

* refactor: export modal w the design system

* fix: lint

* fix: rev

* fix: lint

* fix: qa

apps/app-frontend/src/components/ui/ExportModal.vue

@@ -1,28 +1,32 @@
 <script setup>
-import { WrenchIcon, XIcon } from '@modrinth/assets'
+import { XIcon } from '@modrinth/assets'
 import {
-	Accordion,
 	ButtonStyled,
-	Checkbox,
 	commonMessages,
 	defineMessages,
+	FileTreeSelect,
 	injectNotificationManager,
+	NewModal,
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { save } from '@tauri-apps/plugin-dialog'
+import { readDir, stat } from '@tauri-apps/plugin-fs'
 import { ref } from 'vue'
 
-import { PackageIcon, VersionIcon } from '@/assets/icons'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { export_instance_mrpack, get_pack_export_candidates } from '@/helpers/instance'
+import { PackageIcon } from '@/assets/icons'
+import {
+	export_instance_mrpack,
+	get_full_path,
+	get_pack_export_candidates,
+} from '@/helpers/instance'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
 	header: { id: 'app.export-modal.header', defaultMessage: 'Export modpack' },
-	modpackNameLabel: { id: 'app.export-modal.modpack-name-label', defaultMessage: 'Modpack Name' },
+	modpackNameLabel: { id: 'app.export-modal.modpack-name-label', defaultMessage: 'Modpack name' },
 	modpackNamePlaceholder: {
 		id: 'app.export-modal.modpack-name-placeholder',
 		defaultMessage: 'Modpack name',
@@ -39,15 +43,7 @@ const messages = defineMessages({
 		id: 'app.export-modal.description-placeholder',
 		defaultMessage: 'Enter modpack description...',
 	},
-	selectFilesLabel: {
-		id: 'app.export-modal.select-files-label',
-		defaultMessage: 'Configure which files are included in this export',
-	},
 	exportButton: { id: 'app.export-modal.export-button', defaultMessage: 'Export' },
-	includeFile: {
-		id: 'app.export-modal.include-file-accessibility-label',
-		defaultMessage: 'Include "{file}"?',
-	},
 })
 
 const props = defineProps({
@@ -59,6 +55,7 @@ const props = defineProps({
 
 defineExpose({
 	show: () => {
+		resetExportState()
 		exportModal.value.show()
 		initFiles()
 	},
@@ -69,62 +66,38 @@ const nameInput = ref(props.instance.name)
 const exportDescription = ref('')
 const versionInput = ref('1.0.0')
 const files = ref([])
-const folders = ref([])
+const selectedFilePaths = ref([])
+const fileTreeKey = ref(0)
+const filesLoadId = ref(0)
 
 const initFiles = async () => {
-	const newFolders = new Map()
-	const sep = '/'
-	files.value = []
-	await get_pack_export_candidates(props.instance.id).then((filePaths) =>
-		filePaths
-			.map((folder) => ({
-				path: folder,
-				name: folder.split(sep).pop(),
-				selected:
-					folder.startsWith('mods') ||
-					folder.startsWith('datapacks') ||
-					folder.startsWith('resourcepacks') ||
-					folder.startsWith('shaderpacks') ||
-					folder.startsWith('config'),
-				disabled:
-					folder === 'profile.json' ||
-					folder.startsWith('modrinth_logs') ||
-					folder.startsWith('.fabric') ||
-					folder.startsWith('__MACOSX'),
-			}))
-			.forEach((pathData) => {
-				const parent = pathData.path.split(sep).slice(0, -1).join(sep)
-				if (parent !== '') {
-					if (newFolders.has(parent)) {
-						newFolders.get(parent).push(pathData)
-					} else {
-						newFolders.set(parent, [pathData])
-					}
-				} else {
-					files.value.push(pathData)
-				}
-			}),
-	)
-	folders.value = [...newFolders.entries()].map(([name, value]) => [
-		{
-			name,
-			showingMore: false,
-		},
-		value,
+	const loadId = ++filesLoadId.value
+	const [filePaths, instanceRoot] = await Promise.all([
+		get_pack_export_candidates(props.instance.id),
+		get_full_path(props.instance.id),
 	])
+	const expandedFiles = await Promise.all(
+		filePaths.map((path) => expandExportCandidate(instanceRoot, path)),
+	)
+	if (loadId !== filesLoadId.value) return
+
+	files.value = expandedFiles.flat()
+	selectedFilePaths.value = files.value
+		.filter(
+			(file) =>
+				!file.disabled &&
+				(file.path.startsWith('mods') ||
+					file.path.startsWith('datapacks') ||
+					file.path.startsWith('resourcepacks') ||
+					file.path.startsWith('shaderpacks') ||
+					file.path.startsWith('config')),
+		)
+		.map((file) => file.path)
 }
 
 await initFiles()
 
 const exportPack = async () => {
-	const filesToExport = files.value.filter((file) => file.selected).map((file) => file.path)
-	folders.value.forEach((args) => {
-		args[1].forEach((child) => {
-			if (child.selected) {
-				filesToExport.push(child.path)
-			}
-		})
-	})
 	const outputPath = await save({
 		defaultPath: `${nameInput.value} ${versionInput.value}.mrpack`,
 		filters: [
@@ -139,7 +112,7 @@ const exportPack = async () => {
 		export_instance_mrpack(
 			props.instance.id,
 			outputPath,
-			filesToExport,
+			selectedFilePaths.value,
 			versionInput.value,
 			exportDescription.value,
 			nameInput.value,
@@ -147,94 +120,140 @@ const exportPack = async () => {
 		exportModal.value.hide()
 	}
 }
+
+function resetExportState() {
+	nameInput.value = props.instance.name
+	exportDescription.value = ''
+	versionInput.value = '1.0.0'
+	files.value = []
+	selectedFilePaths.value = []
+	fileTreeKey.value += 1
+}
+
+async function expandExportCandidate(instanceRoot, path) {
+	try {
+		const entries = await readDir(`${instanceRoot}/${path}`)
+		if (entries.length === 0) {
+			const metadata = await getExportCandidateMetadata(instanceRoot, path)
+			return [
+				{
+					path,
+					type: 'directory',
+					disabled: true,
+					modified: metadata.modified,
+					count: 0,
+				},
+			]
+		}
+
+		const children = await Promise.all(
+			entries.map(async (entry) => {
+				const childPath = `${path}/${entry.name}`
+				if (entry.isDirectory) {
+					return expandExportCandidate(instanceRoot, childPath)
+				}
+
+				const metadata = await getExportCandidateMetadata(instanceRoot, childPath)
+				return [
+					{
+						path: childPath,
+						type: 'file',
+						disabled: isExportCandidateDisabled(childPath),
+						size: metadata.size,
+						modified: metadata.modified,
+					},
+				]
+			}),
+		)
+		return children.flat()
+	} catch {
+		const metadata = await getExportCandidateMetadata(instanceRoot, path)
+		return [
+			{
+				path,
+				type: 'file',
+				disabled: isExportCandidateDisabled(path),
+				size: metadata.size,
+				modified: metadata.modified,
+			},
+		]
+	}
+}
+
+async function getExportCandidateMetadata(instanceRoot, path) {
+	try {
+		const metadata = await stat(`${instanceRoot}/${path}`)
+		return {
+			size: metadata.size,
+			modified: metadata.mtime ? Math.floor(metadata.mtime.getTime() / 1000) : undefined,
+		}
+	} catch {
+		return {}
+	}
+}
+
+function isExportCandidateDisabled(path) {
+	return (
+		path === 'profile.json' ||
+		path.startsWith('modrinth_logs') ||
+		path.startsWith('.fabric') ||
+		path.startsWith('__MACOSX')
+	)
+}
 </script>
 
 <template>
-	<ModalWrapper ref="exportModal" :header="formatMessage(messages.header)">
-		<div class="flex flex-col gap-4 w-[40rem]">
+	<NewModal
+		ref="exportModal"
+		:header="formatMessage(messages.header)"
+		scrollable
+		width="46rem"
+		max-width="calc(100vw - 2rem)"
+	>
+		<div class="flex flex-col gap-4">
 			<div class="grid grid-cols-2 gap-4">
-				<div class="labeled_input">
-					<p>{{ formatMessage(messages.modpackNameLabel) }}</p>
+				<div class="labeled_input w-full">
+					<p class="text-contrast font-semibold">{{ formatMessage(messages.modpackNameLabel) }}</p>
 					<StyledInput
 						v-model="nameInput"
-						:icon="PackageIcon"
 						type="text"
 						:placeholder="formatMessage(messages.modpackNamePlaceholder)"
 						clearable
+						wrapper-class="w-full"
 					/>
 				</div>
-				<div class="labeled_input">
-					<p>{{ formatMessage(messages.versionNumberLabel) }}</p>
+				<div class="labeled_input w-full">
+					<p class="text-contrast font-semibold">
+						{{ formatMessage(messages.versionNumberLabel) }}
+					</p>
 					<StyledInput
 						v-model="versionInput"
-						:icon="VersionIcon"
 						type="text"
 						:placeholder="formatMessage(messages.versionNumberPlaceholder)"
 						clearable
+						wrapper-class="w-full"
 					/>
 				</div>
 			</div>
-			<div class="flex flex-col gap-2">
-				<p class="m-0">{{ formatMessage(commonMessages.descriptionLabel) }}</p>
+			<div class="flex flex-col gap-2 min-w-0">
+				<p class="m-0 text-contrast font-semibold">
+					{{ formatMessage(commonMessages.descriptionLabel) }}
+				</p>
 				<StyledInput
 					v-model="exportDescription"
 					multiline
 					:placeholder="formatMessage(messages.descriptionPlaceholder)"
+					wrapper-class="w-full"
 				/>
 			</div>
-			<Accordion
-				class="w-full bg-surface-4 border border-solid border-surface-5 rounded-2xl overflow-clip"
-				button-class="p-4 w-full border-b border-solid border-b-surface-5 bg-surface-2 -mb-px hover:brightness-[--hover-brightness] group"
-			>
-				<template #title>
-					<span class="flex items-center gap-3 text-contrast group-active:scale-[0.98]">
-						<WrenchIcon aria-hidden="true" class="size-5 text-secondary" />
-						Configure which files are included in this export
-					</span>
-				</template>
-				<div class="flex flex-col [&>*:nth-child(even)]:bg-surface-3">
-					<div v-for="[path, children] in folders" :key="path.name" class="flex flex-col">
-						<Accordion
-							class="flex flex-col"
-							button-class="flex gap-3 pr-4 hover:bg-surface-5 group"
-						>
-							<template #title>
-								<Checkbox
-									:model-value="children.every((child) => child.selected)"
-									:indeterminate="
-										!children.every((child) => child.selected) &&
-										children.some((child) => child.selected)
-									"
-									:description="formatMessage(messages.includeFile, { file: path.name })"
-									class="pl-4 py-2"
-									:disabled="children.every((x) => x.disabled)"
-									@update:model-value="
-										(newValue) => children.forEach((child) => (child.selected = newValue))
-									"
-									@click.stop
-								/>
-								<span class="ml-2 group-active:scale-95">{{ path.name }}/</span>
-							</template>
-							<div v-for="child in children" :key="child.path">
-								<Checkbox
-									v-model="child.selected"
-									:label="child.name"
-									class="w-full px-8 py-2 hover:bg-surface-4 text-primary"
-									:disabled="child.disabled"
-								/>
-							</div>
-						</Accordion>
-					</div>
-					<Checkbox
-						v-for="file in files"
-						:key="file.path"
-						v-model="file.selected"
-						:label="file.name"
-						:disabled="file.disabled"
-						class="w-full px-4 py-2 hover:bg-surface-4 text-primary"
-					/>
-				</div>
-			</Accordion>
+			<FileTreeSelect
+				:key="fileTreeKey"
+				v-model="selectedFilePaths"
+				class="min-w-0"
+				:items="files"
+			/>
+		</div>
+		<template #actions>
 			<div class="flex items-center justify-end gap-2">
 				<ButtonStyled type="outlined">
 					<button @click="exportModal.hide">
@@ -249,6 +268,6 @@ const exportPack = async () => {
 					</button>
 				</ButtonStyled>
 			</div>
-		</div>
-	</ModalWrapper>
+		</template>
+	</NewModal>
 </template>