From 8b3996272f82aa7e90440a5dc00e95946f9d5209 Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Wed, 30 Sep 2026 18:54:07 -0500
Subject: [PATCH 01/18] feat: Start Refactors for Sidebar Style file browser
 mode for file tab

- Use DockView for split pane of the sidebar and main file/folder browser
- Start work on sidebar folder browser and the needed layout changes
- Add ability to toggle expanded view for file browser to instead of being within centered column, adjust it to take all the width possible.
- Add ability to make modals into pullout containers
- Fix issues with small resolutions allowing for the background elements to be scrolled leading to double scrolling with modal.
- Resolve minor sizing bug that lead to gap at the bottom or clipping of bottom element on odd scaling and resolutions.
---
 .../src/pages/instance/files/index.vue        |  21 +-
 apps/frontend/package.json                    |   7 +-
 apps/frontend/src/app.vue                     |  35 +-
 .../src/pages/hosting/manage/[id].vue         |   6 +-
 .../src/pages/hosting/manage/[id]/files.vue   |   6 +
 packages/ui/package.json                      |  15 +-
 packages/ui/src/components/base/NavTabs.vue   |   6 +-
 .../ui/src/components/floating/Tooltip.vue    |  24 +-
 packages/ui/src/components/modal/NewModal.vue | 125 +++++-
 .../components/servers/backups/BackupItem.vue | 178 ++++----
 packages/ui/src/composables/modal-stack.ts    |  13 +-
 .../ui/src/composables/use-ready-state.ts     |   4 +-
 packages/ui/src/composables/virtual-scroll.ts |   4 +-
 .../files-tab/components/FileActionBar.vue    | 326 ++++++++++++++
 .../files-tab/components/FileBrowserPanel.vue | 235 ++++++++++
 .../files-tab/components/FileNavbar.vue       | 421 +++++-------------
 .../files-tab/components/FileSideBar.vue      | 132 ++++++
 .../components/FileSidebarHeader.vue          |  73 +++
 .../files-tab/components/FileTableHeader.vue  |  17 +-
 .../files-tab/components/FileTableRow.vue     | 187 +++++---
 .../components/editor/FileEditor.vue          |   2 +-
 .../src/layouts/shared/files-tab/layout.vue   | 414 +++++++++--------
 .../files-tab/providers/file-browser-ui.ts    |  88 ++++
 .../files-tab/providers/file-manager.ts       |  24 +-
 .../layouts/wrapped/hosting/manage/files.vue  |  93 ++--
 .../layouts/wrapped/hosting/manage/root.vue   |  42 +-
 packages/ui/src/locales.eager.ts              |   2 +-
 packages/ui/src/providers/app-root.ts         |   8 +
 packages/ui/src/providers/tooltip.ts          |  37 +-
 packages/ui/src/utils/common-messages.ts      |   4 +
 30 files changed, 1817 insertions(+), 732 deletions(-)
 create mode 100644 packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
 create mode 100644 packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
 create mode 100644 packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
 create mode 100644 packages/ui/src/layouts/shared/files-tab/components/FileSidebarHeader.vue
 create mode 100644 packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
 create mode 100644 packages/ui/src/providers/app-root.ts

diff --git a/apps/app-frontend/src/pages/instance/files/index.vue b/apps/app-frontend/src/pages/instance/files/index.vue
index be579b82737..a75268ede23 100644
--- a/apps/app-frontend/src/pages/instance/files/index.vue
+++ b/apps/app-frontend/src/pages/instance/files/index.vue
@@ -12,7 +12,7 @@ import {
 } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 import { invoke } from '@tauri-apps/api/core'
-import { computed, ref, watch } from 'vue'
+import {computed, Ref, ref, watch} from 'vue'
 
 import { useAppEvent } from '@/composables/use-app-event'
 import { get_full_path } from '@/helpers/instance'
@@ -113,9 +113,13 @@ await instanceRootQuery.suspense()
 await directoryQuery.refetch()
 firstPaintPending.value = false
 
+const isRefreshing = ref<boolean>(false)
+
 async function refresh() {
 	debug('refresh: called, currentPath =', currentPath.value, 'instanceRoot =', instanceRoot.value)
+	isRefreshing.value = true;
 	await directoryQuery.refetch()
+	isRefreshing.value = false;
 }
 
 function navigateTo(path: string) {
@@ -302,10 +306,22 @@ watch(instanceId, async () => {
 	await refresh()
 })
 
+const directories: Record<string, Ref<FileItem[]>> = {};
+const expandedDirectories: Ref<string[]> = ref([]);
+
 provideFileManager({
 	isReadOnly,
 	readOnlyReason: computed(() => formatMessage(messages.readOnly)),
-	items,
+	currentItems: items,
+	directoryTree: {
+		prefetch(path: string) {
+
+		},
+		getEntries(path: string) {
+
+		},
+		expandedEntries: expandedDirectories
+	},
 	loading,
 	error,
 	currentPath,
@@ -325,6 +341,7 @@ provideFileManager({
 	uploadState,
 	extractFile: handleExtractFile,
 	refresh,
+	isRefreshing,
 	basePath: instanceRoot,
 	openInFolder: (path: string) => highlightInFolder(path),
 	downloadButtonLabel: formatMessage(messages.saveAs),
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 638a52f8e8a..6c1c71b24b9 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -39,6 +39,7 @@
 	},
 	"dependencies": {
 		"@contentauth/c2pa-web": "^0.13.1",
+		"@floating-ui/vue": "^2.0.1",
 		"@formatjs/intl-localematcher": "^0.5.4",
 		"@ltd/j-toml": "^1.38.0",
 		"@modrinth/api-client": "workspace:*",
@@ -47,6 +48,9 @@
 		"@modrinth/moderation": "workspace:*",
 		"@modrinth/ui": "workspace:*",
 		"@modrinth/utils": "workspace:*",
+		"@run-slicer/cfr": "0.1.8-0.152",
+		"@run-slicer/procyon": "0.1.2-0.6.0",
+		"@run-slicer/vf": "0.6.4-1.12.0",
 		"@sentry/nuxt": "^10.33.0",
 		"@tanstack/vue-query": "5.101.4",
 		"@types/three": "^0.172.0",
@@ -60,7 +64,7 @@
 		"chart.js": "^4.5.1",
 		"dayjs": "^1.11.7",
 		"dompurify": "^3.1.7",
-		"@floating-ui/vue": "^2.0.1",
+		"file-type": "^22.1.0",
 		"fuse.js": "^6.6.2",
 		"highlight.js": "^11.7.0",
 		"intl-messageformat": "^10.7.7",
@@ -68,6 +72,7 @@
 		"jose": "^6.2.2",
 		"js-yaml": "^4.1.0",
 		"jszip": "^3.10.1",
+		"krakatau-web": "1.1.0-beta",
 		"lru-cache": "^11.2.4",
 		"markdown-it": "14.1.0",
 		"pathe": "^1.1.2",
diff --git a/apps/frontend/src/app.vue b/apps/frontend/src/app.vue
index 3741d3f1027..dbb3cad299c 100644
--- a/apps/frontend/src/app.vue
+++ b/apps/frontend/src/app.vue
@@ -1,16 +1,18 @@
 <template>
-	<NuxtLayout>
-		<NuxtRouteAnnouncer />
-		<ClientOnly>
-			<LoadingBar />
-		</ClientOnly>
-		<NotificationPanel />
-		<AccountSwitchOverlay :show="isSwitchingAccount" />
-		<AdsConsentNotification />
-		<I18nDebugPanel />
-		<NuxtPage />
-		<div id="teleports"></div>
-	</NuxtLayout>
+	<div id="root" ref="root">
+		<NuxtLayout>
+			<NuxtRouteAnnouncer />
+			<ClientOnly>
+				<LoadingBar />
+			</ClientOnly>
+			<NotificationPanel />
+			<AccountSwitchOverlay :show="isSwitchingAccount" />
+			<AdsConsentNotification />
+			<I18nDebugPanel />
+			<NuxtPage/>
+			<div id="teleports"></div>
+		</NuxtLayout>
+	</div>
 </template>
 <script setup lang="ts">
 import {
@@ -31,6 +33,15 @@ import {
 	useIsSwitchingAccount,
 } from './composables/accounts'
 import { useAuth } from './composables/auth'
+import {provideAppRoot} from "@modrinth/ui/src/providers/app-root";
+import type {MaybeElement} from "@vueuse/core";
+import {ref, watch, computed} from "vue";
+
+const root = ref<MaybeElement>(null);
+
+provideAppRoot({
+	root: computed(() => root.value)
+})
 
 const auth = await useAuth()
 const { userPreferences } = setupProviders(auth)
diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index 5f6d5245f42..2730e7f9cba 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -11,7 +11,7 @@
 		:auth-user="authUser"
 		:navigate-to-billing="() => router.push('/settings/billing')"
 		:navigate-to-servers="() => router.push('/hosting/manage')"
-		constrain-width
+
 		:browse-modpacks="
 			({ serverId: sid, worldId: wid, from }) => {
 				navigateTo({
@@ -29,8 +29,8 @@
 			}
 		"
 	>
-		<template #default="{ onReinstall, onReinstallFailed }">
-			<NuxtPage :route="route" @reinstall="onReinstall" @reinstall-failed="onReinstallFailed" />
+		<template #default="{ onReinstall, onReinstallFailed, constrainWidth}">
+			<NuxtPage :route="route" @reinstall="onReinstall" @reinstall-failed="onReinstallFailed" :constrain-width="constrainWidth"/>
 		</template>
 	</ServersManageRootLayout>
 </template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/files.vue b/apps/frontend/src/pages/hosting/manage/[id]/files.vue
index 9bd6cfd3fab..f188432eef9 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/files.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/files.vue
@@ -24,11 +24,17 @@ try {
 useHead({
 	title: computed(() => `Files - ${server.value?.name ?? 'Server'} - Modrinth`),
 })
+
+defineProps<{
+	constrainWidth?: boolean
+}>()
+
 </script>
 
 <template>
 	<ServersManageFilesPage
 		:show-debug-info="flags.advancedDebugInfo"
 		:show-refresh-button="flags.FilesRefreshButton"
+		:constrain-width="constrainWidth"
 	/>
 </template>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 8978e7a6f7c..dca78062dcf 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -61,11 +61,15 @@
 		"@codemirror/language": "^6.9.3",
 		"@codemirror/state": "^6.3.2",
 		"@codemirror/view": "^6.22.1",
+		"@floating-ui/vue": "^2.0.1",
 		"@intercom/messenger-js-sdk": "^0.0.14",
 		"@modrinth/api-client": "workspace:*",
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/blog": "workspace:*",
 		"@modrinth/utils": "workspace:*",
+		"@run-slicer/cfr": "0.1.8-0.152",
+		"@run-slicer/procyon": "0.1.2-0.6.0",
+		"@run-slicer/vf": "0.6.4-1.12.0",
 		"@tanstack/vue-query": "5.101.4",
 		"@tresjs/cientos": "^4.3.0",
 		"@tresjs/core": "^4.3.4",
@@ -78,25 +82,32 @@
 		"@xterm/addon-fit": "^0.11.0",
 		"@xterm/addon-search": "^0.16.0",
 		"@xterm/xterm": "^6.0.0",
+		"@zip.js/zip.js": "^2.8.34",
 		"ace-builds": "^1.43.5",
 		"apexcharts": "^4.0.0",
 		"colord": "^2.9.3",
 		"dayjs": "^1.11.10",
+		"dockview": "^8.3.1",
+		"dockview-vue": "^8.2.0",
 		"dompurify": "^3.1.7",
 		"es-toolkit": "^1.44.0",
-		"flatpickr": "^4.6.13",
 		"fabric": "^7.4.0",
-		"@floating-ui/vue": "^2.0.1",
+		"file-type": "^22.1.0",
+		"flatpickr": "^4.6.13",
 		"fuse.js": "^6.6.2",
 		"highlight.js": "^11.9.0",
 		"intl-messageformat": "^10.7.7",
+		"js-yaml": "^4.1.1",
 		"jszip": "^3.10.1",
+		"krakatau-web": "1.1.0-beta",
 		"lru-cache": "^11.2.4",
 		"markdown-it": "^13.0.2",
+		"mime": "^4.1.0",
 		"motion-v": "^2.2.1",
 		"overlayscrollbars": "^2.15.1",
 		"postprocessing": "^6.37.6",
 		"qrcode.vue": "^3.4.1",
+		"smol-toml": "^1.8.0",
 		"three": "^0.172.0",
 		"vue-i18n": "^10.0.0",
 		"vue-select": "4.0.0-beta.6",
diff --git a/packages/ui/src/components/base/NavTabs.vue b/packages/ui/src/components/base/NavTabs.vue
index 1958a4498b8..ff37cac63e5 100644
--- a/packages/ui/src/components/base/NavTabs.vue
+++ b/packages/ui/src/components/base/NavTabs.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-if="filteredLinks.length > 1"
-		:class="pageNav ? '-mx-6 -mt-2 mb-1 overflow-x-auto px-6 py-2' : 'contents'"
+		:class="pageNav ? [noMargin ? '' : '-mx-6 -mt-2 mb-1', noPadding ? '' : 'px-6 py-2', 'overflow-x-auto'] : 'contents'"
 		v-bind="pageNav ? $attrs : {}"
 	>
 		<nav
@@ -100,12 +100,16 @@ const props = withDefaults(
 		mode?: 'navigation' | 'local'
 		activeIndex?: number
 		pageNav?: boolean
+		noPadding?: boolean
+		noMargin?: boolean
 	}>(),
 	{
 		mode: 'navigation',
 		query: undefined,
 		activeIndex: undefined,
 		pageNav: false,
+		noPadding: false,
+		noMargin: false
 	},
 )
 
diff --git a/packages/ui/src/components/floating/Tooltip.vue b/packages/ui/src/components/floating/Tooltip.vue
index f07b648aeeb..ea3519b177f 100644
--- a/packages/ui/src/components/floating/Tooltip.vue
+++ b/packages/ui/src/components/floating/Tooltip.vue
@@ -6,13 +6,13 @@ import {
 	onBeforeUnmount,
 	type PropType,
 	ref,
-	useSlots,
 	useTemplateRef,
+	type VNode,
 	watch,
 } from 'vue'
 
 import {
-	bindTooltipSource,
+	bindTooltipSource, preventTooltipClosure,
 	type TooltipContent,
 	tooltipEnter,
 	tooltipFocusIn,
@@ -50,11 +50,12 @@ const props = withDefaults(
 		text?: string | null
 		content?: TooltipContent | null
 		panelClass?: string
+		allowHover?: boolean
 	}>(),
 	{ disabled: false, theme: 'tooltip', placement: 'top' },
 )
 
-const slots = useSlots()
+const slots = defineSlots<{popper?: () => VNode}>();
 const trigger = useTemplateRef<HTMLElement>('trigger')
 const floating = useTemplateRef<HTMLElement>('floating')
 const arrowEl = useTemplateRef<HTMLElement>('arrowEl')
@@ -204,9 +205,16 @@ function onEnter() {
 	tooltipEnter(trigger.value)
 }
 
+function onTooltipEnter() {
+	if (props.reference) {
+		preventTooltipClosure(props.reference);
+	}
+}
+
 function onLeave() {
-	if (trigger.value) {
-		tooltipLeave(trigger.value)
+	const triggerEl = trigger.value ?? props.reference;
+	if (triggerEl) {
+		tooltipLeave(triggerEl, props.allowHover ? 500 : undefined);
 	}
 }
 
@@ -247,9 +255,11 @@ function onFocusOut(event: FocusEvent) {
 				v-if="isOpen"
 				:key="jumpKey"
 				ref="floating"
-				class="v-popper__inner pointer-events-none z-[100010] rounded-lg border border-solid border-surface-5 bg-surface-3 px-3 py-1.5 text-sm font-medium text-contrast card-shadow"
-				:class="[`v-popper--theme-${theme}`, moving && 'tooltip-moving', panelClass]"
+				class="`v-popper__inner z-[100010] rounded-lg border border-solid border-surface-5 bg-surface-3 px-3 py-1.5 text-sm font-medium text-contrast card-shadow`"
+				:class="[`v-popper--theme-${theme}`, moving && 'tooltip-moving', panelClass, allowHover ? 'pointer-events-none' : '']"
 				:style="[floatingStyles, { transformOrigin }]"
+				@mouseenter="onTooltipEnter"
+				@mouseleave="onLeave"
 			>
 				<TooltipSlot v-if="content" :render="content" />
 				<template v-else>{{ text }}</template>
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index ae8801e6214..a54e92c8c89 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -27,14 +27,18 @@
 				:style="{ zIndex: stackOverlayZ }"
 				@click="() => (closeOnClickOutside && closable ? hide() : {})"
 			/>
-			<div class="modal-container" :class="{ shown: visible }" :style="{ zIndex: stackContainerZ }">
+			<div
+				class="modal-container"
+				:class="[{ shown: visible }, pulloutContainerClass, fillWidthWhenSmall ? 'fill-width-when-small' : '']"
+				:style="{ zIndex: stackContainerZ }"
+			>
 				<div
 					ref="modalBodyRef"
 					role="dialog"
 					aria-modal="true"
 					tabindex="-1"
 					:aria-labelledby="headerId"
-					class="modal-body flex flex-col bg-bg-raised rounded-2xl border border-solid border-surface-5 outline-none"
+					:class="['modal-body flex flex-col bg-bg-raised outline-none', pulloutBorderClass]"
 					v-bind="$attrs"
 				>
 					<div
@@ -196,12 +200,15 @@ const props = withDefaults(
 		noPadding?: boolean
 		/** Max width for the modal (e.g., '460px', '600px'). Defaults to '60rem'. */
 		maxWidth?: string
+		maxWidthMinCheck?: boolean
 		/** Width for the modal body (e.g., '460px', '600px'). */
 		width?: string
 		animateResize?: boolean
 		/** Disables all close actions (close button, ESC key, click outside). */
 		disableClose?: boolean
 		actionsDivider?: boolean
+		pulloutDirection?: 'left' | 'right' | 'top' | 'bottom'
+		fillWidthWhenSmall?: boolean,
 	}>(),
 	{
 		type: true,
@@ -225,10 +232,13 @@ const props = withDefaults(
 		maxContentHeight: '70vh',
 		noPadding: false,
 		maxWidth: undefined,
+		maxWidthMinCheck: true,
 		width: undefined,
 		animateResize: true,
 		disableClose: false,
 		actionsDivider: false,
+		pulloutDirection: undefined,
+		fillWidthWhenSmall: true,
 	},
 )
 
@@ -511,9 +521,38 @@ const stackOverlayZ = computed(() => stackZBase.value + MODAL_OVERLAY_Z_OFFSET)
 const stackTauriZ = computed(() => stackZBase.value + MODAL_TAURI_Z_OFFSET)
 const stackContainerZ = computed(() => stackZBase.value + MODAL_CONTAINER_Z_OFFSET)
 const resolvedMaxWidth = computed(() => props.maxWidth ?? '60rem')
+const modelBodyMaxWidth = computed(() => props.maxWidthMinCheck ? `min(${resolvedMaxWidth.value}, calc(100% - 2 * var(--gap-lg)))` : resolvedMaxWidth.value)
 const resolvedWidth = computed(() => props.width ?? 'fit-content')
-const mouseXOffset = computed(() => `calc((-50vw + ${mouseX.value}px) / 16)`)
-const mouseYOffset = computed(() => `calc((-50vh + ${mouseY.value}px) / 16)`)
+
+// The mouse-tilt parallax only makes sense for a centered, floating modal - a pulled-out
+// drawer stays pinned flush to its edge, so keep the offset inert while pulloutDirection is set.
+const mouseXOffset = computed(() =>
+	props.pulloutDirection ? '0px' : `calc((-50vw + ${mouseX.value}px) / 16)`,
+)
+const mouseYOffset = computed(() =>
+	props.pulloutDirection ? '0px' : `calc((-50vh + ${mouseY.value}px) / 16)`,
+)
+
+const pulloutContainerClass = computed(() =>
+	props.pulloutDirection ? `pullout-${props.pulloutDirection}` : '',
+)
+
+// Only the edge facing into the screen (opposite the pullout direction) keeps a border -
+// the other edges sit flush against the viewport, so a border/radius there would look broken.
+const pulloutBorderClass = computed(() => {
+	switch (props.pulloutDirection) {
+		case 'left':
+			return 'border-0 border-r border-solid border-surface-5'
+		case 'right':
+			return 'border-0 border-l border-solid border-surface-5'
+		case 'top':
+			return 'border-0 border-b border-solid border-surface-5'
+		case 'bottom':
+			return 'border-0 border-t border-solid border-surface-5'
+		default:
+			return 'rounded-2xl border border-solid border-surface-5'
+	}
+})
 
 function updateMousePosition(event: { clientX: number; clientY: number }) {
 	mouseX.value = event.clientX
@@ -532,6 +571,7 @@ onUnmounted(() => {
 		hideTimeout = null
 	}
 	if (open.value) {
+		props.onHide?.()
 		popModal()
 		window.removeEventListener('keydown', handleWindowKeyDown)
 		window.removeEventListener('mousedown', updateMousePosition)
@@ -677,6 +717,30 @@ defineOptions({
 	transform: translate(v-bind(mouseXOffset), v-bind(mouseYOffset));
 	transition: none;
 
+	// Pull the main axis toward the target edge so the (fixed-position) modal body's static
+	// position sits flush against it instead of centered. top/bottom flip the main axis to
+	// vertical so justify-content controls top/bottom instead of left/right.
+	&.pullout-top,
+	&.pullout-bottom {
+		flex-direction: column;
+	}
+
+	&.pullout-left {
+		justify-content: flex-start;
+	}
+
+	&.pullout-right {
+		justify-content: flex-end;
+	}
+
+	&.pullout-top {
+		justify-content: flex-start;
+	}
+
+	&.pullout-bottom {
+		justify-content: flex-end;
+	}
+
 	&.shown {
 		visibility: visible;
 		transform: translate(0, 0);
@@ -686,6 +750,23 @@ defineOptions({
 			opacity: 1;
 			visibility: visible;
 			scale: 1;
+			translate: 0 0;
+		}
+
+		&.pullout-left > .modal-body {
+			translate: 0 0;
+		}
+
+		&.pullout-right > .modal-body {
+			translate: 0 0;
+		}
+
+		&.pullout-top > .modal-body {
+			translate: 0 0;
+		}
+
+		&.pullout-bottom > .modal-body {
+			translate: 0 0;
 		}
 	}
 
@@ -693,7 +774,7 @@ defineOptions({
 		position: fixed;
 		box-shadow: 4px 4px 26px 10px rgba(0, 0, 0, 0.08);
 		max-height: calc(100% - 2 * var(--gap-lg));
-		max-width: min(v-bind(resolvedMaxWidth), calc(100% - 2 * var(--gap-lg)));
+		max-width: v-bind(modelBodyMaxWidth);
 		overflow-y: hidden;
 		overflow-x: hidden;
 		width: v-bind(resolvedWidth);
@@ -707,10 +788,44 @@ defineOptions({
 		@media (prefers-reduced-motion) {
 			transition: none !important;
 		}
+	}
 
+	&.fill-width-when-small > .modal-body {
 		@media screen and (max-width: 640px) {
 			width: calc(100% - 2 * var(--gap-lg));
 		}
 	}
+
+	// Pulled-out panels don't zoom in - they slide in flush from their edge, and are
+	// full-height (left/right) or full-width (top/bottom) with no gap along that axis.
+	&.pullout-left > .modal-body,
+	&.pullout-right > .modal-body {
+		height: 100%;
+		max-height: 100%;
+		scale: 1;
+	}
+
+	&.pullout-top > .modal-body,
+	&.pullout-bottom > .modal-body {
+		width: 100%;
+		max-width: 100%;
+		scale: 1;
+	}
+
+	&.pullout-left > .modal-body {
+		translate: -100% 0;
+	}
+
+	&.pullout-right > .modal-body {
+		translate: 100% 0;
+	}
+
+	&.pullout-top > .modal-body {
+		translate: 0 -100%;
+	}
+
+	&.pullout-bottom > .modal-body {
+		translate: 0 100%;
+	}
 }
 </style>
diff --git a/packages/ui/src/components/servers/backups/BackupItem.vue b/packages/ui/src/components/servers/backups/BackupItem.vue
index 629da5609a0..0de9eb5dcc9 100644
--- a/packages/ui/src/components/servers/backups/BackupItem.vue
+++ b/packages/ui/src/components/servers/backups/BackupItem.vue
@@ -189,25 +189,26 @@ const creatorAvatarSrc = computed(() =>
 </script>
 <template>
 	<div
-		class="flex items-center gap-4 rounded-[20px] border border-solid bg-surface-3 p-4 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.3),0px_1px_3px_0px_rgba(0,0,0,0.15)]"
+		class="flex items-center justify-center gap-4 rounded-[20px] border border-solid bg-surface-3 p-4 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.3),0px_1px_3px_0px_rgba(0,0,0,0.15)]"
 		:class="itemBorderClass"
 	>
-		<div class="flex min-w-0 flex-1 items-center gap-4">
-			<!-- Icon tile -->
-			<div
-				class="flex shrink-0 items-center justify-center rounded-2xl border border-solid border-surface-5 bg-surface-4"
-				:class="preview ? 'size-10' : 'size-14'"
-			>
-				<component
-					:is="backupIcon"
-					class="text-secondary"
-					:class="preview ? 'size-6' : 'size-10'"
-				/>
-			</div>
+		<div class="flex items-center gap-4" :class="[showDebugInfo ? 'flex-col' : '']">
+			<div class="flex min-w-0 flex-1 items-center gap-4" >
+				<!-- Icon tile -->
+				<div
+					class="flex shrink-0 items-center justify-center rounded-2xl border border-solid border-surface-5 bg-surface-4"
+					:class="preview ? 'size-10' : 'size-14'"
+				>
+					<component
+						:is="backupIcon"
+						class="text-secondary"
+						:class="preview ? 'size-6' : 'size-10'"
+					/>
+				</div>
 
-			<!-- Name + badge + subtitle -->
-			<div class="flex min-w-0 flex-col gap-1.5">
-				<div class="flex min-w-0 items-center gap-2">
+				<!-- Name + badge + subtitle -->
+				<div class="flex min-w-0 flex-col gap-1.5">
+					<div class="flex min-w-0 items-center gap-2">
 					<span
 						ref="nameRef"
 						v-tooltip="truncatedTooltip(nameRef, backup.name)"
@@ -215,95 +216,96 @@ const creatorAvatarSrc = computed(() =>
 					>
 						{{ backup.name }}
 					</span>
-					<span
-						v-if="backup.automated"
-						class="shrink-0 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1 text-sm font-medium text-secondary"
-					>
+						<span
+							v-if="backup.automated"
+							class="shrink-0 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1 text-sm font-medium text-secondary"
+						>
 						{{ formatMessage(messages.auto) }}
 					</span>
-				</div>
-				<div class="flex items-center gap-2 text-sm font-medium text-secondary">
-					<template v-if="preview">
-						<span>{{ formatDateTime(backup.created_at) }}</span>
-					</template>
-					<template v-else-if="backupCreator">
-						<AutoLink
-							:to="creatorProfileLink"
-							class="group flex min-w-0 items-center gap-1.5"
-							:class="creatorProfileLink ? 'text-secondary hover:underline' : 'text-primary'"
-						>
-							<Avatar
-								:src="creatorAvatarSrc"
-								:alt="formatMessage(messages.creatorAvatarAlt, { username: creatorName })"
-								:tint-by="creatorName"
-								size="24px"
-								circle
-								no-shadow
-								class="shrink-0 transition"
-								:class="creatorProfileLink ? 'group-hover:brightness-125' : ''"
-							/>
-							<span
-								class="min-w-0 truncate font-medium"
-								:class="backupCreator.id === 'support' ? 'text-blue' : ''"
+					</div>
+					<div class="flex items-center gap-2 text-sm font-medium text-secondary">
+						<template v-if="preview">
+							<span>{{ formatDateTime(backup.created_at) }}</span>
+						</template>
+						<template v-else-if="backupCreator">
+							<AutoLink
+								:to="creatorProfileLink"
+								class="group flex min-w-0 items-center gap-1.5"
+								:class="creatorProfileLink ? 'text-secondary hover:underline' : 'text-primary'"
 							>
+								<Avatar
+									:src="creatorAvatarSrc"
+									:alt="formatMessage(messages.creatorAvatarAlt, { username: creatorName })"
+									:tint-by="creatorName"
+									size="24px"
+									circle
+									no-shadow
+									class="shrink-0 transition"
+									:class="creatorProfileLink ? 'group-hover:brightness-125' : ''"
+								/>
+								<span
+									class="min-w-0 truncate font-medium"
+									:class="backupCreator.id === 'support' ? 'text-blue' : ''"
+								>
 								{{ creatorName }}
 							</span>
-						</AutoLink>
-					</template>
-					<template v-else>
+							</AutoLink>
+						</template>
+						<template v-else>
 						<span>
 							{{
 								formatMessage(backup.automated ? messages.backupSchedule : messages.manualBackup)
 							}}
 						</span>
-					</template>
+						</template>
+					</div>
 				</div>
 			</div>
-		</div>
 
-		<!-- Date (middle column) -->
-		<div v-if="!preview" class="flex shrink-0 items-center">
+			<!-- Date (middle column) -->
+			<div v-if="!preview" class="flex shrink-0 items-center">
 			<span class="whitespace-nowrap font-medium text-contrast">{{
-				formatDateTime(backup.created_at)
-			}}</span>
-		</div>
+					formatDateTime(backup.created_at)
+				}}</span>
+			</div>
 
-		<!-- Right side actions -->
-		<div v-if="!preview" class="flex min-w-0 flex-1 items-center justify-end gap-2">
-			<Button
-				v-tooltip="props.restoreDisabled"
-				type="outlined"
-				class="!border !text-brand [&>svg]:!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)]"
-				:disabled="!!props.restoreDisabled"
-				@click="() => emit('restore')"
-			>
-				<RotateCounterClockwiseIcon class="size-5" />
-				{{ formatMessage(messages.restore) }}
-			</Button>
-			<TeleportOverflowMenu
-				type="quiet"
-				label="More options"
-				:options="overflowMenuOptions"
-				@select="(option) => option.id === 'download' && emit('download')"
-			>
-				<MoreVerticalIcon class="size-5" />
-				<template #copy-id>
-					<ClipboardCopyIcon class="size-5" />
-					{{ formatMessage(commonMessages.copyIdButton) }}
-				</template>
-				<template #download>
-					<DownloadIcon class="size-5" /> {{ formatMessage(commonMessages.downloadButton) }}
-				</template>
-				<template #rename>
-					<EditIcon class="size-5" /> {{ formatMessage(messages.rename) }}
-				</template>
-				<template #delete>
-					<TrashIcon class="size-5" /> {{ formatMessage(commonMessages.deleteLabel) }}
-				</template>
-			</TeleportOverflowMenu>
+			<!-- Right side actions -->
+			<div v-if="!preview" class="flex min-w-0 flex-1 items-center justify-end gap-2">
+				<Button
+					v-tooltip="props.restoreDisabled"
+					type="outlined"
+					class="!border !text-brand [&>svg]:!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)]"
+					:disabled="!!props.restoreDisabled"
+					@click="() => emit('restore')"
+				>
+					<RotateCounterClockwiseIcon class="size-5" />
+					{{ formatMessage(messages.restore) }}
+				</Button>
+				<TeleportOverflowMenu
+					type="quiet"
+					label="More options"
+					:options="overflowMenuOptions"
+					@select="(option) => option.id === 'download' && emit('download')"
+				>
+					<MoreVerticalIcon class="size-5" />
+					<template #copy-id>
+						<ClipboardCopyIcon class="size-5" />
+						{{ formatMessage(commonMessages.copyIdButton) }}
+					</template>
+					<template #download>
+						<DownloadIcon class="size-5" /> {{ formatMessage(commonMessages.downloadButton) }}
+					</template>
+					<template #rename>
+						<EditIcon class="size-5" /> {{ formatMessage(messages.rename) }}
+					</template>
+					<template #delete>
+						<TrashIcon class="size-5" /> {{ formatMessage(commonMessages.deleteLabel) }}
+					</template>
+				</TeleportOverflowMenu>
+			</div>
 		</div>
 
-		<pre v-if="!preview && showDebugInfo" class="w-full rounded-xl bg-surface-4 p-2 text-xs">{{
+		<pre v-if="!preview && showDebugInfo" class="w-fit rounded-xl bg-surface-4 p-2 text-xs">{{
 			backup
 		}}</pre>
 	</div>
diff --git a/packages/ui/src/composables/modal-stack.ts b/packages/ui/src/composables/modal-stack.ts
index fc01edf999c..e457ad2a66c 100644
--- a/packages/ui/src/composables/modal-stack.ts
+++ b/packages/ui/src/composables/modal-stack.ts
@@ -2,6 +2,8 @@ import { computed, type Ref, ref } from 'vue'
 
 import { dismissFloatingMenus } from '../providers/floating-menu'
 import { dismissTooltip } from '../providers/tooltip'
+import {useScrollLock} from "@vueuse/core";
+import {injectAppRoot} from "#ui/providers/app-root.ts";
 
 const isClient = typeof window !== 'undefined'
 
@@ -33,7 +35,14 @@ export function getModalStackZBase(stackDepth: number) {
 }
 
 export function useModalStack() {
-	const id = Symbol()
+	const id = Symbol();
+
+	let isLocked: ReturnType<typeof useScrollLock> | undefined = undefined;
+
+	if (isClient) {
+		const ctx = injectAppRoot(null)!
+		if (ctx) isLocked = useScrollLock(ctx.root as any);
+	}
 
 	function push() {
 		if (isClient && !stack.includes(id)) {
@@ -41,6 +50,7 @@ export function useModalStack() {
 			dismissFloatingMenus()
 			stack.push(id)
 			stackSizeRef.value = stack.length
+			if (isLocked) isLocked.value = true;
 		}
 	}
 
@@ -51,6 +61,7 @@ export function useModalStack() {
 			stack.splice(idx, 1)
 			stackSizeRef.value = stack.length
 		}
+		if (stackSizeRef.value <= 0 && isLocked) isLocked.value = false;
 	}
 
 	function isTopmost() {
diff --git a/packages/ui/src/composables/use-ready-state.ts b/packages/ui/src/composables/use-ready-state.ts
index 8c2ca22feeb..38c018ce938 100644
--- a/packages/ui/src/composables/use-ready-state.ts
+++ b/packages/ui/src/composables/use-ready-state.ts
@@ -1,5 +1,5 @@
 import type { DefaultError, UseQueryReturnType } from '@tanstack/vue-query'
-import type { Ref } from 'vue'
+import type {ComputedRef, Ref} from 'vue'
 import { computed } from 'vue'
 
 /** Subset of {@link UseQueryReturnType} passed to {@link useReadyState}. */
@@ -19,6 +19,6 @@ export type ReadyStateQuery<TData, TError = DefaultError> = Pick<
  */
 export function useReadyState<TData, TError = DefaultError>(
 	query: ReadyStateQuery<TData, TError>,
-): Readonly<Ref<boolean>> {
+): ComputedRef<boolean> {
 	return computed(() => query.isLoading.value && query.data.value === undefined)
 }
diff --git a/packages/ui/src/composables/virtual-scroll.ts b/packages/ui/src/composables/virtual-scroll.ts
index 9bfbfc1456c..d507e369d8a 100644
--- a/packages/ui/src/composables/virtual-scroll.ts
+++ b/packages/ui/src/composables/virtual-scroll.ts
@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import type {ComputedRef, Ref} from 'vue'
 import { computed, ref, watch, watchEffect } from 'vue'
 
 export interface ScrollViewportOptions {
@@ -131,7 +131,7 @@ export function useScrollViewport(options: ScrollViewportOptions = {}) {
 	}
 }
 
-export function useVirtualScroll<T>(items: Ref<T[]>, options: VirtualScrollOptions) {
+export function useVirtualScroll<T>(items: ComputedRef<T[]>, options: VirtualScrollOptions) {
 	const {
 		itemHeight,
 		bufferSize = 5,
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
new file mode 100644
index 00000000000..5571fb62185
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
@@ -0,0 +1,326 @@
+<template>
+	<header
+		class="@container flex select-none flex-col"
+		:class="[hasNav ? 'gap-4' : 'gap-3']"
+		:aria-label="formatMessage(messages.fileNavigation)"
+	>
+		<div class="flex items-center justify-between gap-2">
+			<div
+				:aria-label="formatMessage(messages.breadcrumbNavigation)"
+				class="m-0 flex min-w-0 flex-shrink items-center p-0 text-contrast"
+			>
+				<div class="m-0 flex min-w-0 flex-shrink list-none items-center p-0">
+					<div v-if="hasNav ? (smallMode ? true : !sidebarOpen) : true" class="mr-2 flex flex-shrink-0 gap-3">
+						<IconButton
+							v-tooltip="formatMessage(sidebarOpen ? messages.collapse : messages.expand)"
+							:label="formatMessage(sidebarOpen ? messages.collapse : messages.expand)"
+							native-type="button"
+							class="bg-surface-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+							@click="() => $emit('toggleSidebar')"
+						>
+							<PanelLeftCloseIcon v-if="sidebarOpen && !smallMode" />
+							<PanelLeftOpenIcon v-else />
+							<span class="sr-only">{{ formatMessage(messages.expand) }}</span>
+						</IconButton>
+					</div>
+					<div class="ml-2">
+						<slot/>
+					</div>
+				</div>
+			</div>
+
+			<div v-if="!isEditing" class="flex flex-shrink-0 items-center gap-2">
+				<Input
+					v-if="hasNav ? !sidebarOpen : false"
+					id="search-folder"
+					:model-value="searchQuery"
+					:icon="SearchIcon"
+					type="search"
+					name="search"
+					autocomplete="off"
+					:placeholder="formatMessage(messages.searchFiles)"
+					:class="[
+						hasNav ? 'hidden @[800px]:inline-flex' : 'hidden @[400px]:inline-flex'
+					]"
+					size="medium"
+					wrapper-class="w-full sm:w-[280px]"
+					@update:model-value="$emit('update:searchQuery', $event)"
+				/>
+
+				<TeleportOverflowMenu
+					type="outlined"
+					:label="formatMessage(messages.createNew)"
+					:disabled="disabled"
+					:tooltip="disabled ? disabledTooltip : undefined"
+					size="lg"
+					class="justify-center gap-2 !w-auto !px-2.5 !rounded-xl"
+					:options="[
+						{
+							id: 'file',
+							label: formatMessage(messages.newFile),
+							action: () => $emit('create', 'file'),
+						},
+						{
+							id: 'directory',
+							label: formatMessage(messages.newFolder),
+							action: () => $emit('create', 'directory'),
+						},
+						{
+							id: 'upload',
+							label: formatMessage(messages.uploadFile),
+							action: () => $emit('upload'),
+						},
+						{ type: 'divider', shown: showInstallFromUrl ?? false },
+						{
+							id: 'upload-zip',
+							label: formatMessage(messages.uploadFromZip),
+							shown: false,
+							action: () => $emit('uploadZip'),
+						},
+						{
+							id: 'install-from-url',
+							label: formatMessage(messages.uploadFromZipUrl),
+							shown: showInstallFromUrl ?? false,
+							action: () => $emit('unzipFromUrl', false),
+						},
+						{
+							id: 'install-cf-pack',
+							label: formatMessage(messages.installCurseForgePack),
+							shown: showInstallFromUrl ?? false,
+							action: () => $emit('unzipFromUrl', true),
+						},
+						{ type: 'divider', shown: showInstallFromUrl ?? false },
+						{
+							id: 'refresh',
+							label: formatMessage(commonMessages.refreshButton),
+							shown: showRefreshButton ?? false,
+							action: () => handleRefresh(),
+							disabled: isRefreshing,
+						},
+					]"
+				>
+					<PlusIcon aria-hidden="true" class="h-5 w-5" />
+					<DropdownIcon aria-hidden="true" class="h-5 w-5" />
+					<template #file>
+						<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newFile) }}
+					</template>
+					<template #directory>
+						<FolderOpenIcon aria-hidden="true" /> {{ formatMessage(messages.newFolder) }}
+					</template>
+					<template #upload>
+						<UploadIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFile) }}
+					</template>
+					<template #upload-zip>
+						<FileArchiveIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFromZip) }}
+					</template>
+					<template #install-from-url>
+						<LinkIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFromZipUrl) }}
+					</template>
+					<template #install-cf-pack>
+						<CurseForgeIcon aria-hidden="true" />
+						{{ formatMessage(messages.installCurseForgePack) }}
+					</template>
+					<template #refresh>
+						<RefreshCwIcon
+							aria-hidden="true"
+							class="h-5 w-5 transition-transform"
+							:class="refreshing ? 'animate-spin' : ''"
+						/>
+						{{ formatMessage(commonMessages.refreshButton) }}
+					</template>
+				</TeleportOverflowMenu>
+			</div>
+
+			<div v-else-if="!isEditingImage" class="flex gap-2">
+				<IconButton
+					v-if="isLogFile"
+					v-tooltip="formatMessage(messages.shareToMclogs)"
+					type="quiet"
+					:label="formatMessage(messages.shareToMclogs)"
+					@click="$emit('share')"
+				>
+					<ShareIcon />
+				</IconButton>
+				<IconButton
+					v-tooltip="formatMessage(messages.findInFile)"
+					:type="isEditorFindOpen ? 'colored' : 'quiet'"
+					:color="isEditorFindOpen ? 'brand' : undefined"
+					:label="formatMessage(messages.findInFile)"
+					:aria-pressed="isEditorFindOpen"
+					@click="$emit('find')"
+				>
+					<SearchIcon />
+				</IconButton>
+			</div>
+		</div>
+		<div v-if="!isEditing && !hasNav" class="flex items-center gap-2"
+			 :class="[
+
+			]"
+		>
+			<Input
+				:model-value="searchQuery"
+				:icon="SearchIcon"
+				type="search"
+				name="search"
+				autocomplete="off"
+				:placeholder="formatMessage(messages.searchFiles)"
+				size="medium"
+				wrapper-class="flex-1 min-w-0"
+				@update:model-value="$emit('update:searchQuery', $event)"
+			/>
+		</div>
+	</header>
+</template>
+
+<script setup lang="ts">
+import {
+	BoxIcon,
+	CurseForgeIcon,
+	DropdownIcon,
+	FileArchiveIcon,
+	FolderOpenIcon,
+	PanelLeftOpenIcon,
+	PanelLeftCloseIcon,
+	LinkIcon,
+	PlusIcon,
+	RefreshCwIcon,
+	SearchIcon,
+	ShareIcon,
+	UploadIcon,
+} from '@modrinth/assets'
+import { computed, ref } from 'vue'
+
+import { IconButton, TeleportOverflowMenu } from '#ui/components/base/buttons'
+import Input from '../../../../components/base/inputs/Input.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n.ts'
+import { commonMessages } from '#ui/utils/common-messages.ts'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	fileNavigation: {
+		id: 'files.navbar.file-navigation',
+		defaultMessage: 'File navigation',
+	},
+	breadcrumbNavigation: {
+		id: 'files.navbar.breadcrumb-navigation',
+		defaultMessage: 'Breadcrumb navigation',
+	},
+	backToHome: {
+		id: 'files.navbar.back-to-home',
+		defaultMessage: 'Back to home',
+	},
+	home: {
+		id: 'files.navbar.home',
+		defaultMessage: 'Home',
+	},
+	expand: {
+		id: 'files.navbar.expand',
+		defaultMessage: 'Expand',
+	},
+	collapse: {
+		id: 'files.navbar.collapse',
+		defaultMessage: 'Collapse',
+	},
+	searchFiles: {
+		id: 'files.navbar.search-files',
+		defaultMessage: 'Search files',
+	},
+	createNew: {
+		id: 'files.navbar.create-new',
+		defaultMessage: 'Create new...',
+	},
+	newFile: {
+		id: 'files.navbar.new-file',
+		defaultMessage: 'New file',
+	},
+	newFolder: {
+		id: 'files.navbar.new-folder',
+		defaultMessage: 'New folder',
+	},
+	uploadFile: {
+		id: 'files.navbar.upload-file',
+		defaultMessage: 'Upload file',
+	},
+	uploadFromZip: {
+		id: 'files.navbar.upload-from-zip',
+		defaultMessage: 'Upload from .zip file',
+	},
+	uploadFromZipUrl: {
+		id: 'files.navbar.upload-from-zip-url',
+		defaultMessage: 'Upload from .zip URL',
+	},
+	installCurseForgePack: {
+		id: 'files.navbar.install-curseforge-pack',
+		defaultMessage: 'Install CurseForge pack',
+	},
+	shareToMclogs: {
+		id: 'files.navbar.share-to-mclogs',
+		defaultMessage: 'Share to mclo.gs',
+	},
+	findInFile: {
+		id: 'files.navbar.find-in-file',
+		defaultMessage: 'Find in file',
+	},
+})
+
+export type Properties = {
+	isEditing: boolean
+	sidebarOpen: boolean
+	editingFilePath?: string
+	isEditingImage?: boolean
+	isEditorFindOpen?: boolean
+	searchQuery: string
+	showRefreshButton?: boolean
+	showInstallFromUrl?: boolean
+	disabled?: boolean
+	disabledTooltip?: string
+	hasNav?: boolean,
+	smallMode?: boolean,
+	isRefreshing?: boolean
+};
+
+const props = withDefaults(
+	defineProps<Properties>(),
+	{
+		hasNav: false,
+		smallMode: false,
+	}
+)
+
+console.log(`Test: [hasNav: ${props.hasNav}, smallMode: ${props.smallMode}, sidebarOpen: ${props.sidebarOpen}]`);
+
+const smallMode = computed(() => {
+	if (props.hasNav) console.log(`Test: [${props.smallMode}, ${props.sidebarOpen}]`);
+	return props.smallMode;
+})
+
+export type EmitCallbacks = {
+	toggleSidebar: []
+	'update:searchQuery': [value: string]
+	create: [type: 'file' | 'directory']
+	upload: []
+	uploadZip: []
+	unzipFromUrl: [cf: boolean]
+	refresh: [],
+	share: []
+	find: []
+};
+
+const emit = defineEmits<EmitCallbacks>()
+
+const refreshing = computed(() => props.isRefreshing)
+
+function handleRefresh() {
+	emit('refresh')
+}
+
+const isLogFile = computed(() => {
+	return (
+		props.editingFilePath?.startsWith('logs') ||
+		props.editingFilePath?.startsWith('crash-reports') ||
+		props.editingFilePath?.endsWith('.log')
+	)
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
new file mode 100644
index 00000000000..0d27f60b3a0
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
@@ -0,0 +1,235 @@
+
+<template>
+	<div class="flex flex-col p-1 pl-2 gap-3 w-full">
+		<FileNavbar
+			:sidebar-open="sidebarOpen"
+			:breadcrumbs="ui.breadcrumbSegments.value"
+			:is-editing="ui.isEditing.value"
+			:editing-file-name="ctx.editingFile.value?.name"
+			:editing-file-path="ctx.editingFile.value?.path"
+			:is-editing-image="fileEditorRef?.isEditingImage"
+			:is-editor-find-open="fileEditorRef?.isFindOpen"
+			:search-query="ui.searchQuery.value"
+			:show-refresh-button="ui.showRefreshButton.value"
+			:show-install-from-url="ctx.showInstallFromUrl"
+			:base-id="ui.baseId"
+			:disabled="ui.isBusy.value"
+			:disabled-tooltip="ui.busyTooltip.value"
+			:small-mode="props.smallMode"
+			@navigate="ui.navigateToSegment"
+			@navigate-home="() => {
+				ui.navigateToSegment(-1)
+			}"
+			@prefetch-home="ui.handlePrefetchHome"
+			@update:search-query="(value) => (ui.searchQuery.value = value)"
+			@create="ui.showCreateModal"
+			@upload="ui.initiateFileUpload"
+			@upload-zip="() => {}"
+			@unzip-from-url="ui.showUnzipFromUrlModal"
+			@refresh="ctx.refresh"
+			@share="() => fileEditorRef?.shareToMclogs()"
+			@find="() => fileEditorRef?.toggleFind()"
+			@toggle-sidebar="() => ui.setSidebarOpen(!sidebarOpen)"
+		/>
+		<div class="@container relative flex flex-col overflow-clip rounded-[20px] border border-solid border-surface-4 shadow-sm">
+			<div v-if="!ui.isEditing.value">
+				<FileUploadDragAndDrop
+					ref="fileUploadRef"
+					class=""
+					:disabled="ui.isBusy.value"
+					@drop-error="ui.handleDropError"
+					@files-dropped="ui.handleDroppedFiles"
+				>
+					<FileTableHeader
+						:sort-field="ui.sortField.value"
+						:sort-desc="ui.sortDesc.value"
+						:all-selected="ui.allSelected.value"
+						:some-selected="ui.someSelected.value"
+						:is-stuck="isLabelBarStuck"
+						:show-details="!ui.sidebarOpen.value"
+						@sort="ui.handleSort"
+						@toggle-all="ui.toggleSelectAll"
+					/>
+					<div
+						v-if="filteredItems.length > 0"
+						ref="virtualListContainer"
+						class="relative w-full"
+						:style="{ minHeight: `${totalHeight}px`, overflowAnchor: 'none' }"
+					>
+						<div class="absolute w-full" :style="{ top: `${visibleTop}px` }">
+							<FileTableRow
+								v-for="(item, idx) in visibleItems"
+								:key="item.path"
+								:count="item.count"
+								:created="item.created"
+								:modified="item.modified"
+								:name="item.name"
+								:path="item.path"
+								:type="item.type"
+								:size="item.size"
+								:index="visibleRange.start + idx"
+								:is-last="visibleRange.start + idx === filteredItems.length - 1"
+								:selected="ui.selectedItems.value.has(item.path)"
+								:write-disabled="ui.isBusy.value || !!ctx.isReadOnly?.(item.path)"
+								:write-disabled-tooltip="ctx.isReadOnly?.(item.path) ? ctx.readOnlyReason?.value : ui.busyTooltip.value"
+								:show-details="!ui.sidebarOpen.value"
+								:container-width="ui.containerWidth.value"
+								@extract="() => ui.handleExtractItem(item)"
+								@delete="() => ui.showDeleteModal(item)"
+								@rename="() => ui.showRenameModal(item)"
+								@download="() => ui.handleDownload(item)"
+								@zip="() => ui.handleZip(item)"
+								@move="() => ui.showMoveModal(item)"
+								@move-direct-to="ui.handleDirectMove"
+								@edit="() => ui.handleEditFile(item)"
+								@navigate="() => ui.handleNavigateToFolder(item)"
+								@hover="() => ui.handleItemHover(item)"
+								@contextmenu="ui.handleContextMenu"
+								@toggle-select="() => ui.toggleItemSelection(item.path)"
+							/>
+						</div>
+					</div>
+					<div
+						v-else-if="ui.items.value.length === 0 && !ctx.error.value"
+						class="flex h-full w-full items-center justify-center rounded-b-[20px] bg-surface-2 p-20"
+					>
+						<div class="flex flex-col items-center gap-4 text-center">
+							<FolderOpenIcon class="h-16 w-16 text-secondary" />
+							<h3 class="m-0 text-2xl font-bold text-contrast">
+								{{ formatMessage(messages.emptyFolderTitle) }}
+							</h3>
+							<p class="m-0 text-sm text-secondary">
+								{{ formatMessage(messages.emptyFolderDescription) }}
+							</p>
+						</div>
+					</div>
+				</FileUploadDragAndDrop>
+			</div>
+			<FileManagerError
+				v-else-if="ctx.error.value"
+				class="rounded-b-[20px]"
+				:title="formatMessage(messages.errorTitle)"
+				:message="formatMessage(messages.errorMessage)"
+				@refetch="ctx.refresh"
+				@home="() => ui.navigateToSegment(-1)"
+			/>
+			<FileEditor
+				v-else
+				ref="fileEditorRef"
+				:file="ctx.editingFile.value"
+				:editor-component="ui.editorComponent.value"
+				@close="handleEditorClose"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { FolderOpenIcon } from '@modrinth/assets'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+import { defineMessages, useVIntl } from '#ui/composables'
+import { useStickyObserver } from '#ui/composables/sticky-observer'
+import { useVirtualScroll } from '#ui/composables/virtual-scroll.ts'
+import { injectFileManager } from '#ui/layouts'
+
+import { injectFileBrowserUI } from '../providers/file-browser-ui'
+import FileEditor from './editor/FileEditor.vue'
+import FileManagerError from './FileManagerError.vue'
+import FileNavbar from './FileNavbar.vue'
+import FileActionBar from './FileActionBar.vue'
+import FileTableHeader from './FileTableHeader.vue'
+import FileTableRow from './FileTableRow.vue'
+import FileUploadDragAndDrop from './upload/FileUploadDragAndDrop.vue'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	emptyFolderTitle: {
+		id: 'files.layout.empty-folder-title',
+		defaultMessage: 'This folder is empty',
+	},
+	emptyFolderDescription: {
+		id: 'files.layout.empty-folder-description',
+		defaultMessage: 'There are no files or folders.',
+	},
+	errorTitle: {
+		id: 'files.layout.error-title',
+		defaultMessage: 'Unable to load files',
+	},
+	errorMessage: {
+		id: 'files.layout.error-message',
+		defaultMessage: 'The folder may not exist.',
+	},
+})
+
+const ctx = injectFileManager()
+const ui = injectFileBrowserUI()
+
+const props = withDefaults(defineProps<{
+	smallMode?: boolean
+}>(), {
+	smallMode: false
+});
+
+const sidebarOpen = computed(() => ui.sidebarOpen.value);
+
+const fileEditorRef = ref<InstanceType<typeof FileEditor>>()
+
+const filteredItems = computed(() => ui.filteredItems.value)
+
+// Virtual scroll
+const {
+	listContainer: virtualListContainer,
+	totalHeight,
+	visibleRange,
+	visibleTop,
+	visibleItems,
+} = useVirtualScroll(filteredItems, {
+	itemHeight: 52.8,
+	bufferSize: 5,
+})
+
+// Sticky observer for the table header
+const fileUploadRef = ref<InstanceType<typeof FileUploadDragAndDrop>>()
+const fileUploadEl = computed(() => fileUploadRef.value?.$el as HTMLElement | null)
+const { isStuck: isLabelBarStuck } = useStickyObserver(fileUploadEl)
+
+async function handleEditorClose() {
+	await ui.handleEditorClose()
+}
+
+const hasUnsavedChanges = computed(() => fileEditorRef.value?.hasUnsavedChanges ?? false)
+const isEditingImage = computed(() => fileEditorRef.value?.isEditingImage ?? false)
+const isFindOpen = computed(() => fileEditorRef.value?.isFindOpen ?? false)
+const saveFileContent = async (exit = false) => {
+	await fileEditorRef.value?.saveFileContent(exit)
+}
+const revertChanges = () => fileEditorRef.value?.revertChanges()
+const shareToMclogs = async () => {
+	await fileEditorRef.value?.shareToMclogs()
+}
+const toggleFind = () => fileEditorRef.value?.toggleFind()
+
+// Register this panel's editor API on the shared context so layout.vue and FileSideBar
+// (which can no longer hold a template ref to a dockview-hosted panel) can reach it.
+const fileEditorApi = {
+	hasUnsavedChanges,
+	isEditingImage,
+	isFindOpen,
+	saveFileContent,
+	revertChanges,
+	shareToMclogs,
+	toggleFind,
+}
+
+onMounted(() => {
+	ui.fileEditorApi.value = fileEditorApi
+})
+
+onUnmounted(() => {
+	if (ui.fileEditorApi.value === fileEditorApi) {
+		ui.fileEditorApi.value = null
+	}
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
index cde35aa9df2..5b706296565 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
@@ -1,252 +1,107 @@
 <template>
-	<header
-		class="@container flex select-none flex-col gap-4"
-		:aria-label="formatMessage(messages.fileNavigation)"
-	>
-		<div v-if="!isEditing" class="flex items-center gap-2 @[800px]:hidden">
-			<Input
-				:model-value="searchQuery"
-				:icon="SearchIcon"
-				type="search"
-				name="search"
-				autocomplete="off"
-				:placeholder="formatMessage(messages.searchFiles)"
-				size="medium"
-				wrapper-class="flex-1 min-w-0"
-				@update:model-value="$emit('update:searchQuery', $event)"
-			/>
-		</div>
-		<div class="flex items-center justify-between gap-2">
-			<nav
-				:aria-label="formatMessage(messages.breadcrumbNavigation)"
-				class="m-0 flex min-w-0 flex-shrink items-center p-0 text-contrast"
-			>
-				<ol class="m-0 flex min-w-0 flex-shrink list-none items-center p-0">
-					<li class="mr-4 flex-shrink-0">
-						<IconButton
-							v-tooltip="formatMessage(messages.backToHome)"
-							:label="formatMessage(messages.backToHome)"
-							native-type="button"
-							class="bg-surface-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
-							@click="$emit('navigateHome')"
-							@mouseenter="$emit('prefetchHome')"
-						>
-							<HomeIcon />
-							<span class="sr-only">{{ formatMessage(messages.home) }}</span>
-						</IconButton>
-					</li>
-					<li class="m-0 -ml-2 min-w-0 flex-shrink p-0">
-						<ol
-							ref="breadcrumbOuter"
-							class="m-0 flex min-w-0 flex-shrink items-center overflow-hidden p-0"
-							:class="{ 'breadcrumb-fade-mask': isBreadcrumbOverflowing }"
-							:style="
+	<FileActionBar  ref="baseRef" v-bind="{ ...$props, ...$attrs }">
+		<nav v-if="breadcrumbs != null"
+		 	:aria-label="formatMessage(messages.breadcrumbNavigation)"
+		 	class="m-0 -ml-2 min-w-0 flex-shrink p-0"
+		>
+			<ol
+				ref="breadcrumbOuter"
+				class="m-0 flex min-w-0 flex-shrink items-center overflow-hidden p-0"
+				:class="{ 'breadcrumb-fade-mask': isBreadcrumbOverflowing }"
+				:style="
 								isBreadcrumbOverflowing
 									? { '--scroll-distance': `-${breadcrumbOverflowAmount}px` }
 									: undefined
 							"
-							@mouseenter="onBreadcrumbMouseEnter"
-							@mouseleave="onBreadcrumbMouseLeave"
-						>
-							<TransitionGroup
-								ref="breadcrumbInner"
-								name="breadcrumb"
-								tag="span"
-								class="relative flex w-fit items-center"
-								:class="{ 'breadcrumbs-scroll': isBreadcrumbAnimating }"
-								@animationiteration="onBreadcrumbAnimationIteration"
+				@mouseenter="onBreadcrumbMouseEnter"
+				@mouseleave="onBreadcrumbMouseLeave"
+			>
+				<TransitionGroup
+					ref="breadcrumbInner"
+					name="breadcrumb"
+					tag="span"
+					class="relative flex w-fit items-center"
+					:class="{ 'breadcrumbs-scroll': isBreadcrumbAnimating }"
+					@animationiteration="onBreadcrumbAnimationIteration"
+				>
+					<li
+						:key="`home`"
+						class="relative flex shrink-0 items-center text-sm"
+					>
+						<div class="flex shrink-0 items-center">
+							<Button
+								v-tooltip="formatMessage(messages.backToHome)"
+								:label="formatMessage(messages.backToHome)"
+								type="quiet"
+								class="cursor-pointer whitespace-nowrap focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+								:aria-current="
+												!isEditing && breadcrumbs.length == 0 ? 'location' : undefined
+											"
+								:class="{
+												'!text-contrast': !isEditing && breadcrumbs.length == 0,
+											}"
+								@click="$emit('navigateHome')"
+								@mouseenter="$emit('prefetchHome')"
 							>
-								<li
-									v-for="(segment, index) in breadcrumbs"
-									:key="`${segment || index}-group`"
-									class="relative flex shrink-0 items-center text-sm"
-								>
-									<div class="flex shrink-0 items-center">
-										<Button
-											type="quiet"
-											class="cursor-pointer whitespace-nowrap focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
-											:aria-current="
+								<HomeIcon />
+								<span>Home</span>
+							</Button>
+							<ChevronRightIcon
+								v-if="breadcrumbs.length != 0 || isEditing"
+								class="size-4 flex-shrink-0 text-secondary"
+								aria-hidden="true"
+							/>
+						</div>
+					</li>
+					<li
+						v-for="(segment, index) in breadcrumbs"
+						:key="`${segment || index}-group`"
+						class="relative flex shrink-0 items-center text-sm"
+					>
+						<div class="flex shrink-0 items-center">
+							<Button
+								type="quiet"
+								class="cursor-pointer whitespace-nowrap focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+								:aria-current="
 												!isEditing && index === breadcrumbs.length - 1 ? 'location' : undefined
 											"
-											:class="{
+								:class="{
 												'!text-contrast': !isEditing && index === breadcrumbs.length - 1,
 											}"
-											@click="$emit('navigate', index)"
-										>
-											{{ segment || '' }}
-										</Button>
-										<ChevronRightIcon
-											v-if="index < breadcrumbs.length - 1 || isEditing"
-											class="size-4 flex-shrink-0 text-secondary"
-											aria-hidden="true"
-										/>
-									</div>
-								</li>
-							</TransitionGroup>
-							<li v-if="isEditing && editingFileName" class="flex items-center px-3 text-base">
-								<span class="font-semibold !text-contrast" aria-current="location">
-									{{ editingFileName }}
-								</span>
-							</li>
-						</ol>
+								@click="$emit('navigate', 0)"
+							>
+								{{ segment || '' }}
+							</Button>
+							<ChevronRightIcon
+								v-if="index < breadcrumbs.length - 1 || isEditing"
+								class="size-4 flex-shrink-0 text-secondary"
+								aria-hidden="true"
+							/>
+						</div>
 					</li>
-				</ol>
-			</nav>
-
-			<div v-if="!isEditing" class="flex flex-shrink-0 items-center gap-2">
-				<Input
-					id="search-folder"
-					:model-value="searchQuery"
-					:icon="SearchIcon"
-					type="search"
-					name="search"
-					autocomplete="off"
-					:placeholder="formatMessage(messages.searchFiles)"
-					class="hidden @[800px]:inline-flex"
-					size="medium"
-					wrapper-class="w-full sm:w-[280px]"
-					@update:model-value="$emit('update:searchQuery', $event)"
-				/>
-
-				<Button
-					v-if="showRefreshButton"
-					type="outlined"
-					native-type="button"
-					size="lg"
-					:disabled="refreshing"
-					@click="handleRefresh"
-				>
-					<RefreshCwIcon
-						aria-hidden="true"
-						class="h-5 w-5 transition-transform"
-						:class="refreshing ? 'animate-spin' : ''"
-					/>
-					{{ formatMessage(commonMessages.refreshButton) }}
-				</Button>
-
-				<TeleportOverflowMenu
-					type="outlined"
-					:label="formatMessage(messages.createNew)"
-					:disabled="disabled"
-					:tooltip="disabled ? disabledTooltip : undefined"
-					size="lg"
-					class="justify-center gap-2 !w-auto !px-2.5 !rounded-xl"
-					:options="[
-						{
-							id: 'file',
-							label: formatMessage(messages.newFile),
-							action: () => $emit('create', 'file'),
-						},
-						{
-							id: 'directory',
-							label: formatMessage(messages.newFolder),
-							action: () => $emit('create', 'directory'),
-						},
-						{
-							id: 'upload',
-							label: formatMessage(messages.uploadFile),
-							action: () => $emit('upload'),
-						},
-						{ type: 'divider', shown: showInstallFromUrl ?? false },
-						{
-							id: 'upload-zip',
-							label: formatMessage(messages.uploadFromZip),
-							shown: false,
-							action: () => $emit('uploadZip'),
-						},
-						{
-							id: 'install-from-url',
-							label: formatMessage(messages.uploadFromZipUrl),
-							shown: showInstallFromUrl ?? false,
-							action: () => $emit('unzipFromUrl', false),
-						},
-						{
-							id: 'install-cf-pack',
-							label: formatMessage(messages.installCurseForgePack),
-							shown: showInstallFromUrl ?? false,
-							action: () => $emit('unzipFromUrl', true),
-						},
-					]"
-				>
-					<PlusIcon aria-hidden="true" class="h-5 w-5" />
-					<DropdownIcon aria-hidden="true" class="h-5 w-5" />
-					<template #file>
-						<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newFile) }}
-					</template>
-					<template #directory>
-						<FolderOpenIcon aria-hidden="true" /> {{ formatMessage(messages.newFolder) }}
-					</template>
-					<template #upload>
-						<UploadIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFile) }}
-					</template>
-					<template #upload-zip>
-						<FileArchiveIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFromZip) }}
-					</template>
-					<template #install-from-url>
-						<LinkIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFromZipUrl) }}
-					</template>
-					<template #install-cf-pack>
-						<CurseForgeIcon aria-hidden="true" />
-						{{ formatMessage(messages.installCurseForgePack) }}
-					</template>
-				</TeleportOverflowMenu>
-			</div>
-
-			<div v-else-if="!isEditingImage" class="flex gap-2">
-				<IconButton
-					v-if="isLogFile"
-					v-tooltip="formatMessage(messages.shareToMclogs)"
-					type="quiet"
-					:label="formatMessage(messages.shareToMclogs)"
-					@click="$emit('share')"
-				>
-					<ShareIcon />
-				</IconButton>
-				<IconButton
-					v-tooltip="formatMessage(messages.findInFile)"
-					:type="isEditorFindOpen ? 'colored' : 'quiet'"
-					:color="isEditorFindOpen ? 'brand' : undefined"
-					:label="formatMessage(messages.findInFile)"
-					:aria-pressed="isEditorFindOpen"
-					@click="$emit('find')"
-				>
-					<SearchIcon />
-				</IconButton>
-			</div>
-		</div>
-	</header>
+				</TransitionGroup>
+				<li v-if="isEditing && editingFileName" class="flex items-center px-3 text-base">
+					<span class="font-semibold !text-contrast" aria-current="location">
+						{{ editingFileName }}
+					</span>
+				</li>
+			</ol>
+		</nav>
+	</FileActionBar>
 </template>
 
 <script setup lang="ts">
-import {
-	BoxIcon,
-	ChevronRightIcon,
-	CurseForgeIcon,
-	DropdownIcon,
-	FileArchiveIcon,
-	FolderOpenIcon,
-	HomeIcon,
-	LinkIcon,
-	PlusIcon,
-	RefreshCwIcon,
-	SearchIcon,
-	ShareIcon,
-	UploadIcon,
-} from '@modrinth/assets'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-import { Button, IconButton, TeleportOverflowMenu } from '#ui/components/base/buttons'
-import Input from '#ui/components/base/inputs/Input.vue'
-import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { commonMessages } from '#ui/utils/common-messages'
+import FileActionBar from "#ui/layouts/shared/files-tab/components/FileActionBar.vue";
+import type {Properties, EmitCallbacks} from "#ui/layouts/shared/files-tab/components/FileActionBar.vue";
+import {Button} from "#ui/components/base/buttons";
+import {ChevronRightIcon, HomeIcon} from "@modrinth/assets";
+import {onBeforeUnmount, onMounted, ref, watch} from "vue";
+import {defineMessages, useVIntl} from "#ui/composables";
 
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
-	fileNavigation: {
-		id: 'files.navbar.file-navigation',
-		defaultMessage: 'File navigation',
-	},
 	breadcrumbNavigation: {
 		id: 'files.navbar.breadcrumb-navigation',
 		defaultMessage: 'Breadcrumb navigation',
@@ -259,86 +114,35 @@ const messages = defineMessages({
 		id: 'files.navbar.home',
 		defaultMessage: 'Home',
 	},
-	searchFiles: {
-		id: 'files.navbar.search-files',
-		defaultMessage: 'Search files',
-	},
-	createNew: {
-		id: 'files.navbar.create-new',
-		defaultMessage: 'Create new...',
-	},
-	newFile: {
-		id: 'files.navbar.new-file',
-		defaultMessage: 'New file',
-	},
-	newFolder: {
-		id: 'files.navbar.new-folder',
-		defaultMessage: 'New folder',
-	},
-	uploadFile: {
-		id: 'files.navbar.upload-file',
-		defaultMessage: 'Upload file',
-	},
-	uploadFromZip: {
-		id: 'files.navbar.upload-from-zip',
-		defaultMessage: 'Upload from .zip file',
-	},
-	uploadFromZipUrl: {
-		id: 'files.navbar.upload-from-zip-url',
-		defaultMessage: 'Upload from .zip URL',
-	},
-	installCurseForgePack: {
-		id: 'files.navbar.install-curseforge-pack',
-		defaultMessage: 'Install CurseForge pack',
-	},
-	shareToMclogs: {
-		id: 'files.navbar.share-to-mclogs',
-		defaultMessage: 'Share to mclo.gs',
-	},
-	findInFile: {
-		id: 'files.navbar.find-in-file',
-		defaultMessage: 'Find in file',
-	},
 })
 
-const props = defineProps<{
-	breadcrumbs: string[]
-	isEditing: boolean
-	editingFileName?: string
-	editingFilePath?: string
-	isEditingImage?: boolean
-	isEditorFindOpen?: boolean
-	searchQuery: string
-	showRefreshButton?: boolean
-	showInstallFromUrl?: boolean
-	baseId: string
-	disabled?: boolean
-	disabledTooltip?: string
-}>()
+defineOptions({
+	inheritAttrs: false
+})
 
-const emit = defineEmits<{
-	navigate: [index: number]
-	navigateHome: []
-	prefetchHome: []
-	'update:searchQuery': [value: string]
-	create: [type: 'file' | 'directory']
-	upload: []
-	uploadZip: []
-	unzipFromUrl: [cf: boolean]
-	refresh: []
-	share: []
-	find: []
-}>()
+const baseRef = ref<typeof FileActionBar | null>(null)
 
-const refreshing = ref(false)
+// Expose the base component instance so parent refs can call BaseButton methods
+defineExpose({
+	baseRef
+})
 
-function handleRefresh() {
-	emit('refresh')
-	refreshing.value = true
-	setTimeout(() => {
-		refreshing.value = false
-	}, 1000)
-}
+const props = withDefaults(
+	defineProps<{
+		breadcrumbs: string[]
+		isEditing: boolean
+		editingFileName?: string
+	} & Properties>(),
+	{
+		hasNav: true,
+	}
+)
+
+defineEmits<{
+	navigate: [index: number]
+	navigateHome?: []
+	prefetchHome?: []
+} /*& EmitCallbacks*/>()
 
 const breadcrumbOuter = ref<HTMLElement | null>(null)
 const breadcrumbInner = ref<{ $el: HTMLElement } | null>(null)
@@ -400,13 +204,6 @@ watch(
 	},
 )
 
-const isLogFile = computed(() => {
-	return (
-		props.editingFilePath?.startsWith('logs') ||
-		props.editingFilePath?.startsWith('crash-reports') ||
-		props.editingFilePath?.endsWith('.log')
-	)
-})
 </script>
 
 <style scoped>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
new file mode 100644
index 00000000000..ad332b34e80
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
@@ -0,0 +1,132 @@
+<template>
+	<div
+		class="flex flex-col p-1 gap-2 h-full"
+		:class="[
+			addBorder ? 'border-r border-0 border-solid border-surface-5 pr-2' : '',
+			constrainWidth ? 'w-[24rem]' : 'w-full'
+		]"
+	>
+		<FileActionBar
+			:sidebar-open="ui.sidebarOpen.value"
+			:is-editing="ui.isEditing.value"
+			:editing-file-path="ctx.editingFile.value?.path"
+			:is-editing-image="ui.fileEditorApi.value?.isEditingImage.value ?? false"
+			:is-editor-find-open="ui.fileEditorApi.value?.isFindOpen.value ?? false"
+			:search-query="ui.searchQuery.value"
+			:show-refresh-button="ui.showRefreshButton.value"
+			:show-install-from-url="ctx.showInstallFromUrl"
+			:disabled="ui.isBusy.value"
+			:disabled-tooltip="ui.busyTooltip.value"
+			:is-refreshing="ctx.isRefreshing.value"
+			@update:search-query="(value) => (ui.searchQuery.value = value)"
+			@create="ui.showCreateModal"
+			@upload="ui.initiateFileUpload"
+			@upload-zip="() => {}"
+			@unzip-from-url="ui.showUnzipFromUrlModal"
+			@refresh="() => {
+				ctx.refresh();
+			}"
+			@share="() => ui.shareToMclogs()"
+			@find="() => ui.toggleFind()"
+			@toggle-sidebar="() => ui.setSidebarOpen(!ui.sidebarOpen.value)"
+		/>
+		<div :class="scrollFileEntries ? 'overflow-y-auto' : ''" :style="scrollFileEntries ? 'height: calc(100dvh - 92px - 32px)' : ''">
+			<div
+				v-if="filteredItems.length > 0"
+				class="relative h-fit"
+				:style="{ overflowAnchor: 'none'}"
+			>
+				<div>
+					<FileTableRow
+						v-for="(item, idx) in filteredItems"
+						:key="item.path"
+						:count="item.count"
+						:created="item.created"
+						:modified="item.modified"
+						:name="item.name"
+						:path="item.path"
+						:type="item.type"
+						:size="item.size"
+						:index="idx"
+						:is-last="idx === filteredItems.length - 1"
+						:selected="ui.selectedItems.value.has(item.path)"
+						:write-disabled="ui.isBusy.value || !!ctx.isReadOnly?.(item.path)"
+						:write-disabled-tooltip="ctx.isReadOnly?.(item.path) ? ctx.readOnlyReason?.value : ui.busyTooltip.value"
+						:show-details="false"
+						:selection-within-action-menu="true"
+						@extract="() => ui.handleExtractItem(item)"
+						@delete="() => ui.showDeleteModal(item)"
+						@rename="() => ui.showRenameModal(item)"
+						@download="() => ui.handleDownload(item)"
+						@zip="() => ui.handleZip(item)"
+						@move="() => ui.showMoveModal(item)"
+						@move-direct-to="ui.handleDirectMove"
+						@edit="() => ui.handleEditFile(item)"
+						@navigate="() => ui.handleNavigateToFolder(item)"
+						@hover="() => ui.handleItemHover(item)"
+						@contextmenu="ui.handleContextMenu"
+						@toggle-select="() => ui.toggleItemSelection(item.path)"
+					/>
+				</div>
+			</div>
+			<div
+				v-else-if="ui.items.value.length === 0 && !ctx.error.value"
+				class="flex h-full w-full items-center justify-center rounded-b-[20px] bg-surface-2 px-5 py-20"
+			>
+				<div class="flex flex-col items-center gap-4 text-center">
+					<FolderOpenIcon class="h-16 w-16 text-secondary" />
+					<h3 class="m-0 text-2xl font-bold text-contrast">
+						{{ formatMessage(messages.emptyFolderTitle) }}
+					</h3>
+					<p class="m-0 text-sm text-secondary">
+						{{ formatMessage(messages.emptyFolderDescription) }}
+					</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { FolderOpenIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { defineMessages, useVIntl } from '#ui/composables/index.ts'
+import { injectFileManager } from '#ui/layouts/index.ts'
+
+import { injectFileBrowserUI } from '../providers/file-browser-ui'
+import FileActionBar from './FileActionBar.vue'
+import FileTableRow from './FileTableRow.vue'
+
+const ctx = injectFileManager()
+const ui = injectFileBrowserUI()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	emptyFolderTitle: {
+		id: 'files.layout.empty-folder-title',
+		defaultMessage: 'This folder is empty',
+	},
+	emptyFolderDescription: {
+		id: 'files.layout.empty-folder-description',
+		defaultMessage: 'There are no files or folders.',
+	},
+})
+
+const filteredItems = computed(() => ui.filteredItems.value)
+
+withDefaults(
+	defineProps<{
+		constrainWidth?: boolean
+		scrollFileEntries?: boolean,
+		addBorder?: boolean
+	}>(),
+	{
+		constrainWidth: false,
+		scrollFileEntries: false,
+		addBorder: true,
+	}
+)
+
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileSidebarHeader.vue b/packages/ui/src/layouts/shared/files-tab/components/FileSidebarHeader.vue
new file mode 100644
index 00000000000..3f84e4e6bc2
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileSidebarHeader.vue
@@ -0,0 +1,73 @@
+<template>
+	<div
+		aria-hidden="true"
+		class="sticky top-0 z-10 flex h-12 w-full select-none flex-row items-center justify-between bg-surface-3 pl-3 pr-4 font-medium transition-[border-radius] duration-100"
+		:class="
+			isStuck
+				? 'rounded-none border-0 border-y border-solid border-surface-4 shadow-md before:pointer-events-none before:absolute before:inset-x-0 before:-top-4 before:h-5 before:bg-surface-3'
+				: ''
+		"
+	>
+		<div class="flex flex-1 items-center gap-3">
+			<Checkbox
+				:model-value="allSelected"
+				:indeterminate="someSelected && !allSelected"
+				@update:model-value="$emit('toggle-all')"
+			/>
+			<button
+				class="flex appearance-none items-center gap-1.5 border-0 bg-transparent p-0 font-semibold hover:text-primary"
+				:class="sortFieldByName ? 'text-contrast' : 'text-secondary'"
+				@click="$emit('sortByName')"
+			>
+				<span>{{ formatMessage(messages.name) }}</span>
+				<ChevronUpIcon
+					v-if="sortFieldByName && !sortDesc"
+					class="h-4 w-4"
+					aria-hidden="true"
+				/>
+				<ChevronDownIcon
+					v-if="sortFieldByName && sortDesc"
+					class="h-4 w-4"
+					aria-hidden="true"
+				/>
+			</button>
+		</div>
+		<div class="flex shrink-0 items-center gap-4 @[800px]:gap-12">
+			<span class="min-w-[51px] shrink-0 text-nowrap text-right font-semibold text-secondary">{{
+				formatMessage(commonMessages.actionsLabel)
+			}}</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
+
+import Checkbox from '#ui/components/base/Checkbox.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import type { FileSortField } from '../types'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	name: {
+		id: 'files.table-header.name',
+		defaultMessage: 'Name',
+	}
+})
+
+defineProps<{
+	sortFieldByName: boolean
+	sortDesc: boolean
+	allSelected: boolean
+	someSelected: boolean
+	isStuck: boolean
+}>()
+
+defineEmits<{
+	sortByName: []
+	'toggle-all': []
+}>()
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
index 8f99c82746a..6d66d34f78f 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
@@ -5,7 +5,7 @@
 		:class="
 			isStuck
 				? 'rounded-none border-0 border-y border-solid border-surface-4 shadow-md before:pointer-events-none before:absolute before:inset-x-0 before:-top-4 before:h-5 before:bg-surface-3'
-				: 'rounded-t-[20px]'
+				: ''
 		"
 	>
 		<div class="flex flex-1 items-center gap-3">
@@ -32,9 +32,9 @@
 				/>
 			</button>
 		</div>
-		<div class="flex shrink-0 items-center gap-4 @[800px]:gap-12">
-			<button
-				class="hidden w-[100px] appearance-none items-center justify-start gap-1 border-0 bg-transparent p-0 font-semibold hover:text-primary @[800px]:flex"
+		<div class="flex shrink-0 items-center gap-4 @[900px]:gap-12">
+			<button v-if="showDetails"
+							class="hidden w-[100px] appearance-none items-center justify-start gap-1 border-0 bg-transparent p-0 font-semibold hover:text-primary @[900px]:flex"
 				:class="sortField === 'size' ? 'text-contrast' : 'text-secondary'"
 				@click="$emit('sort', 'size')"
 			>
@@ -50,8 +50,8 @@
 					aria-hidden="true"
 				/>
 			</button>
-			<button
-				class="hidden w-[160px] appearance-none items-center justify-start gap-1 border-0 bg-transparent p-0 font-semibold hover:text-primary @[800px]:flex"
+			<button v-if="showDetails"
+							class="hidden w-[160px] appearance-none items-center justify-start gap-1 border-0 bg-transparent p-0 font-semibold hover:text-primary @[900px]:flex"
 				:class="sortField === 'created' ? 'text-contrast' : 'text-secondary'"
 				@click="$emit('sort', 'created')"
 			>
@@ -67,8 +67,8 @@
 					aria-hidden="true"
 				/>
 			</button>
-			<button
-				class="hidden w-[160px] appearance-none items-center justify-start gap-1 border-0 bg-transparent p-0 font-semibold hover:text-primary @[800px]:flex"
+			<button v-if="showDetails"
+							class="hidden w-[160px] appearance-none items-center justify-start gap-1 border-0 bg-transparent p-0 font-semibold hover:text-primary @[900px]:flex"
 				:class="sortField === 'modified' ? 'text-contrast' : 'text-secondary'"
 				@click="$emit('sort', 'modified')"
 			>
@@ -127,6 +127,7 @@ defineProps<{
 	allSelected: boolean
 	someSelected: boolean
 	isStuck: boolean
+	showDetails: boolean
 }>()
 
 defineEmits<{
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue
index aebdfaba442..938bbd30646 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue
@@ -1,72 +1,100 @@
 <template>
-	<li
-		role="button"
-		:class="[containerClasses, isDragSource ? 'opacity-50' : '']"
-		tabindex="0"
-		:data-file-path="path"
-		:data-file-type="type"
-		@click="selectItem"
-		@contextmenu="openContextMenu"
-		@keydown="(e) => e.key === 'Enter' && selectItem()"
-		@mouseenter="handleMouseEnter"
-		@pointerdown="handlePointerDown"
-	>
-		<div class="pointer-events-none flex flex-1 items-center gap-3 truncate">
-			<Checkbox
-				class="pointer-events-auto"
-				:model-value="selected"
-				@click.stop
-				@update:model-value="emit('toggle-select')"
-			/>
-			<div class="pointer-events-none flex size-5 items-center justify-center">
-				<component
-					:is="iconComponent"
-					class="size-5 group-hover:text-contrast group-focus:text-contrast"
+	<Tooltip :disabled="containerWidth != null ? (containerWidth > 900 ? showDetails : false) : showDetails" :allow-hover="true">
+		<li
+			role="option"
+			:class="[containerClasses, isDragSource ? 'opacity-50' : '']"
+			tabindex="0"
+			:data-file-path="path"
+			:data-file-type="type"
+			@click="selectItem"
+			@contextmenu="openContextMenu"
+			@keydown="(e) => e.key === 'Enter' && selectItem()"
+			@mouseenter="handleMouseEnter"
+			@mouseleave="handleMouseLeave"
+			@pointerdown="handlePointerDown"
+			class="h-[52.8px]"
+		>
+			<div class="pointer-events-none flex flex-1 items-center gap-3 truncate">
+				<Checkbox v-if="!selectionWithinActionMenu"
+					class="pointer-events-auto"
+					:model-value="selected"
+					@click.stop
+					@update:model-value="emit('toggle-select')"
 				/>
+				<div class="pointer-events-none flex size-5 items-center justify-center">
+					<component
+						:is="iconComponent"
+						class="size-5 group-hover:text-contrast group-focus:text-contrast"
+					/>
+				</div>
+				<div class="pointer-events-none flex flex-col truncate">
+					<span class="pointer-events-none truncate group-hover:text-contrast group-focus:text-contrast">
+						{{ name }}
+					</span>
+				</div>
+				<EditIcon v-if="hoveringToEdit && isEditableFile" />
 			</div>
-			<div class="pointer-events-none flex flex-col truncate">
-				<span
-					class="pointer-events-none truncate group-hover:text-contrast group-focus:text-contrast"
-				>
-					{{ name }}
+			<div class="pointer-events-auto flex w-fit flex-shrink-0 items-center gap-4 @[900px]:gap-12">
+				<span v-if="showDetails" class="hidden w-[100px] text-nowrap text-sm text-secondary @[900px]:block">
+					{{ formattedSize }}
 				</span>
-			</div>
-		</div>
-		<div class="pointer-events-auto flex w-fit flex-shrink-0 items-center gap-4 @[800px]:gap-12">
-			<span class="hidden w-[100px] text-nowrap text-sm text-secondary @[800px]:block">
-				{{ formattedSize }}
-			</span>
-			<span class="hidden w-[160px] text-nowrap text-sm text-secondary @[800px]:block">
-				{{ formattedCreationDate }}
-			</span>
-			<span class="hidden w-[160px] text-nowrap text-sm text-secondary @[800px]:block">
-				{{ formattedModifiedDate }}
-			</span>
-			<div class="grid min-w-[51px] shrink-0 items-center justify-items-end">
-				<span
-					aria-hidden="true"
-					class="invisible col-start-1 row-start-1 text-nowrap font-semibold"
-				>
-					{{ formatMessage(commonMessages.actionsLabel) }}
+				<span v-if="showDetails" class="hidden w-[160px] text-nowrap text-sm text-secondary @[900px]:block">
+					{{ formattedCreationDate }}
 				</span>
-				<div
-					class="col-start-1 row-start-1 flex justify-end"
-					@click.stop
-					@contextmenu.stop
-					@keydown.stop
-					@pointerdown.stop
-				>
-					<TeleportOverflowMenu
-						type="quiet"
-						:label="formatMessage(commonMessages.actionsLabel)"
-						:options="menuOptions"
+				<span v-if="showDetails" class="hidden w-[160px] text-nowrap text-sm text-secondary @[900px]:block">
+					{{ formattedModifiedDate }}
+				</span>
+				<div class="grid min-w-[51px] shrink-0 items-center justify-items-end">
+					<span
+						aria-hidden="true"
+						class="invisible col-start-1 row-start-1 text-nowrap font-semibold"
+					>
+						{{ formatMessage(commonMessages.actionsLabel) }}
+					</span>
+					<div
+						class="col-start-1 row-start-1 flex justify-end"
+						@click.stop
+						@contextmenu.stop
+						@keydown.stop
+						@pointerdown.stop
 					>
-						<MoreHorizontalIcon class="h-5 w-5 bg-transparent" />
-					</TeleportOverflowMenu>
+						<TeleportOverflowMenu
+							type="quiet"
+							:label="formatMessage(commonMessages.actionsLabel)"
+							:options="menuOptions"
+						>
+							<MoreHorizontalIcon class="h-5 w-5 bg-transparent" />
+						</TeleportOverflowMenu>
+					</div>
 				</div>
 			</div>
-		</div>
-	</li>
+		</li>
+		<template #popper>
+			<div class="flex flex-col w-fit">
+				<h3 class="mb-2 pb-1 mt-0 text-base font-semibold border-0 border-b-[1px] border-solid border-divider">Details</h3>
+				<div class="gap-1 grid grid-cols-2">
+					<span class="text-nowrap text-sm text-secondary">
+						{{ formatMessage(messages.size) }}
+					</span>
+					<span class="text-nowrap text-sm text-secondary">
+						{{ formattedSize }}
+					</span>
+					<span class="text-nowrap text-sm text-secondary">
+						{{ formatMessage(messages.created) }}
+					</span>
+					<span class="text-nowrap text-sm text-secondary">
+						{{ formattedCreationDate }}
+					</span>
+					<span class="text-nowrap text-sm text-secondary">
+						{{ formatMessage(messages.modified) }}
+					</span>
+					<span class="text-nowrap text-sm text-secondary">
+						{{ formattedModifiedDate }}
+					</span>
+				</div>
+			</div>
+		</template>
+	</Tooltip>
 </template>
 
 <script setup lang="ts">
@@ -110,6 +138,7 @@ import {
 import { injectFileManager } from '../providers/file-manager'
 import type { FileItem } from '../types'
 import { joinDisplayPath } from '../utils'
+import {Tooltip} from "#ui/components";
 
 const { formatMessage } = useVIntl()
 const { addNotification } = injectNotificationManager()
@@ -124,6 +153,18 @@ const messages = defineMessages({
 		id: 'files.row.create-zip',
 		defaultMessage: 'Create ZIP',
 	},
+	size: {
+		id: 'files.table-header.size',
+		defaultMessage: 'Size',
+	},
+	created: {
+		id: 'files.table-header.created',
+		defaultMessage: 'Created',
+	},
+	modified: {
+		id: 'files.table-header.modified',
+		defaultMessage: 'Modified',
+	},
 })
 
 const props = defineProps<
@@ -133,6 +174,9 @@ const props = defineProps<
 		selected: boolean
 		writeDisabled?: boolean
 		writeDisabledTooltip?: string
+		showDetails: boolean
+		containerWidth?: number | undefined
+		selectionWithinActionMenu?: boolean
 	}
 >()
 
@@ -162,6 +206,7 @@ const isDropTarget = computed(
 	() => fileDragActive.value && fileDragTarget.value === props.path && props.type === 'directory',
 )
 const isDragSource = computed(() => fileDragActive.value && fileDragData.value?.path === props.path)
+const hoveringToEdit = ref<boolean>(false);
 
 const formatDateTime = useFormatDateTime({
 	year: '2-digit',
@@ -175,7 +220,7 @@ const formatBytes = useFormatBytes()
 const containerClasses = computed(() => {
 	const dropTarget = isDropTarget.value
 	return [
-		'group m-0 flex w-full select-none items-center justify-between overflow-hidden border-0 border-t border-solid border-surface-4 pl-3 pr-4 py-3 focus:!outline-none',
+		'group m-0 flex w-full select-none items-center justify-between overflow-hidden border-0 border-t border-solid border-surface-4 pl-3 pr-3 py-2 focus:!outline-none',
 		dropTarget
 			? '!bg-brand-highlight'
 			: props.selected
@@ -183,7 +228,7 @@ const containerClasses = computed(() => {
 				: props.index % 2 === 0
 					? 'bg-surface-2'
 					: 'bg-surface-1.5',
-		props.isLast ? 'rounded-b-[20px]' : '',
+		props.isLast ? '' : '',
 		isEditableFile.value || props.type === 'directory' ? 'cursor-pointer hover:bg-surface-2.5' : '',
 		'transition-colors duration-100 focus:!outline-none',
 	]
@@ -202,6 +247,15 @@ const menuOptions = computed<ButtonMenuOption[]>(() => {
 	const wd = props.writeDisabled
 	const wdTooltip = props.writeDisabledTooltip
 	return [
+		{
+			id: 'copy-filename',
+			label: formatMessage(commonMessages.selectEntryLabel),
+			icon: iconComponent.value,
+			action: () => {
+				emit('toggle-select')
+			},
+			shown: props.selectionWithinActionMenu,
+		},
 		{
 			id: 'copy-filename',
 			label: formatMessage(commonMessages.copyFilenameButton),
@@ -224,7 +278,7 @@ const menuOptions = computed<ButtonMenuOption[]>(() => {
 			},
 		},
 		{
-			id: 'open-in-folder',
+			id: 'select-entry',
 			label: formatMessage(commonMessages.openInFolderButton),
 			icon: FolderOpenIcon,
 			shown: !!ctx.openInFolder,
@@ -332,9 +386,14 @@ function openContextMenu(event: MouseEvent) {
 }
 
 function handleMouseEnter() {
+	hoveringToEdit.value = true;
 	emit('hover', { name: props.name, type: props.type, path: props.path })
 }
 
+function handleMouseLeave() {
+	hoveringToEdit.value = false;
+}
+
 const isNavigating = ref(false)
 
 function selectItem() {
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
index e2c7b9cfb24..701d251e730 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		ref="editorContainer"
-		class="relative flex flex-col overflow-hidden rounded-[20px] border border-solid border-surface-4 shadow-sm"
+		class="relative flex flex-col overflow-hidden"
 	>
 		<EditorFindReplace
 			ref="findReplaceRef"
diff --git a/packages/ui/src/layouts/shared/files-tab/layout.vue b/packages/ui/src/layouts/shared/files-tab/layout.vue
index 31633527de2..f21686bac55 100644
--- a/packages/ui/src/layouts/shared/files-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/files-tab/layout.vue
@@ -24,133 +24,43 @@
 	/>
 	<FileDeleteItemModal ref="deleteItemModal" :item="selectedItem" @delete="handleDeleteItem" />
 	<ContextMenu ref="contextMenuRef" :label="formatMessage(commonMessages.actionsLabel)" />
-	<div v-if="!(ctx.loading.value && items.length === 0)" class="contents">
-		<div class="relative flex w-full flex-col">
-			<div class="relative isolate flex w-full flex-col gap-4">
-				<FileNavbar
-					:breadcrumbs="breadcrumbSegments"
-					:is-editing="isEditing"
-					:editing-file-name="ctx.editingFile.value?.name"
-					:editing-file-path="ctx.editingFile.value?.path"
-					:is-editing-image="fileEditorRef?.isEditingImage"
-					:is-editor-find-open="fileEditorRef?.isFindOpen"
-					:search-query="searchQuery"
-					:show-refresh-button="showRefreshButton"
-					:show-install-from-url="ctx.showInstallFromUrl"
-					:base-id="baseId"
-					:disabled="isBusy"
-					:disabled-tooltip="busyTooltip"
-					@navigate="navigateToSegment"
-					@navigate-home="() => navigateToSegment(-1)"
-					@prefetch-home="handlePrefetchHome"
-					@update:search-query="searchQuery = $event"
-					@create="showCreateModal"
-					@upload="initiateFileUpload"
-					@upload-zip="() => {}"
-					@unzip-from-url="showUnzipFromUrlModal"
-					@refresh="ctx.refresh"
-					@share="() => fileEditorRef?.shareToMclogs()"
-					@find="() => fileEditorRef?.toggleFind()"
-				/>
-
-				<div v-if="!isEditing">
-					<FileUploadDragAndDrop
-						ref="fileUploadRef"
-						class="@container relative flex flex-col overflow-clip rounded-[20px] border border-solid border-surface-4 shadow-sm"
-						:disabled="isBusy"
-						@drop-error="handleDropError"
-						@files-dropped="handleDroppedFiles"
-					>
-						<FileTableHeader
-							:sort-field="sortField"
-							:sort-desc="sortDescValue"
-							:all-selected="allSelected"
-							:some-selected="someSelected"
-							:is-stuck="isLabelBarStuck"
-							@sort="handleSort"
-							@toggle-all="toggleSelectAll"
-						/>
-						<div
-							v-if="filteredItems.length > 0"
-							ref="virtualListContainer"
-							class="relative w-full"
-							:style="{ minHeight: `${totalHeight}px`, overflowAnchor: 'none' }"
-						>
-							<div class="absolute w-full" :style="{ top: `${visibleTop}px` }">
-								<FileTableRow
-									v-for="(item, idx) in visibleItems"
-									:key="item.path"
-									:count="item.count"
-									:created="item.created"
-									:modified="item.modified"
-									:name="item.name"
-									:path="item.path"
-									:type="item.type"
-									:size="item.size"
-									:index="visibleRange.start + idx"
-									:is-last="visibleRange.start + idx === filteredItems.length - 1"
-									:selected="selectedItems.has(item.path)"
-									:write-disabled="isBusy || !!ctx.isReadOnly?.(item.path)"
-									:write-disabled-tooltip="
-										ctx.isReadOnly?.(item.path) ? ctx.readOnlyReason?.value : busyTooltip
-									"
-									@extract="() => handleExtractItem(item)"
-									@delete="() => showDeleteModal(item)"
-									@rename="() => showRenameModal(item)"
-									@download="() => handleDownload(item)"
-									@zip="() => handleZip(item)"
-									@move="() => showMoveModal(item)"
-									@move-direct-to="handleDirectMove"
-									@edit="() => handleEditFile(item)"
-									@navigate="() => handleNavigateToFolder(item)"
-									@hover="() => handleItemHover(item)"
-									@contextmenu="
-										(event, options) => contextMenuRef?.open(event as MouseEvent, options)
-									"
-									@toggle-select="() => toggleItemSelection(item.path)"
-								/>
-							</div>
-						</div>
-						<div
-							v-else-if="items.length === 0 && !ctx.error.value"
-							class="flex h-full w-full items-center justify-center rounded-b-[20px] bg-surface-2 p-20"
-						>
-							<div class="flex flex-col items-center gap-4 text-center">
-								<FolderOpenIcon class="h-16 w-16 text-secondary" />
-								<h3 class="m-0 text-2xl font-bold text-contrast">
-									{{ formatMessage(messages.emptyFolderTitle) }}
-								</h3>
-								<p class="m-0 text-sm text-secondary">
-									{{ formatMessage(messages.emptyFolderDescription) }}
-								</p>
-							</div>
-						</div>
-						<FileManagerError
-							v-else-if="ctx.error.value"
-							class="rounded-b-[20px]"
-							:title="formatMessage(messages.errorTitle)"
-							:message="formatMessage(messages.errorMessage)"
-							@refetch="ctx.refresh"
-							@home="navigateToSegment(-1)"
-						/>
-					</FileUploadDragAndDrop>
+
+	<div ref="fileViewer" v-if="!(ctx.loading.value && items.length === 0)" :class="[!smallMode ? 'h-[50rem]' : '']">
+		<KeepAlive>
+			<SplitviewVue v-if="!smallMode" class="h-[50rem]"
+				:theme="themeDark"
+				:orientation="Orientation.HORIZONTAL"
+				:components="{ fileSideBar: FileSideBar, fileBrowserPanel: FileBrowserPanel }"
+				@ready="onReady"
+			/>
+		</KeepAlive>
+		<template v-if="smallMode">
+			<FileBrowserPanel :small-mode="true"/>
+			<NewModal ref="sidebarModal"
+				:on-hide="() => {
+					if (smallMode) sidebarOpen = false;
+				}"
+				:noblur="true"
+				:no-padding="true"
+				:hideHeader="true"
+				:fill-width-when-small="false"
+				:maxWidth="fullWidthSidebar ? '100dvw' : 'fit-content'"
+				:max-width-min-check="false"
+				:scrollable="false"
+				pullout-direction="left"
+			>
+				<div class="p-2 h-full " :class="[fullWidthSidebar ? 'w-full' : '']">
+					<FileSideBar :constrain-width="!fullWidthSidebar" :scroll-file-entries="true" :add-border="false"/>
 				</div>
-				<FileEditor
-					v-else
-					ref="fileEditorRef"
-					:file="ctx.editingFile.value"
-					:editor-component="editorComponent"
-					@close="handleEditorClose"
-				/>
-			</div>
-		</div>
+			</NewModal>
+		</template>
 
 		<FloatingActionBar :shown="hasUnsavedChanges">
 			<p class="m-0 text-sm font-semibold md:text-base">
 				{{ formatMessage(messages.unsavedChanges) }}
 			</p>
 			<div class="ml-auto flex gap-2">
-				<Button type="quiet" @click="fileEditorRef?.revertChanges()">
+				<Button type="quiet" @click="revertChanges()">
 					<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
 				</Button>
 				<Button
@@ -158,7 +68,7 @@
 					type="colored"
 					color="brand"
 					:disabled="isBusy"
-					@click="fileEditorRef?.saveFileContent(false)"
+					@click="saveFileContent(false)"
 				>
 					<SaveIcon /> {{ formatMessage(commonMessages.saveButton) }}
 				</Button>
@@ -203,31 +113,31 @@
 </template>
 
 <script setup lang="ts">
+import 'dockview-vue/dist/styles/dockview.css'
+
+import {FolderArchiveIcon, HistoryIcon, SaveIcon, TrashIcon,} from '@modrinth/assets'
 import {
-	FolderArchiveIcon,
-	FolderOpenIcon,
-	HistoryIcon,
-	SaveIcon,
-	TrashIcon,
-} from '@modrinth/assets'
-import type { Component } from 'vue'
-import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
-
-import { Button, ContextMenu } from '#ui/components/base/buttons'
+	type ISplitviewPanel,
+	LayoutPriority,
+	Orientation,
+	type SplitviewReadyEvent,
+	SplitviewVue,
+	themeDark
+} from 'dockview-vue'
+import type {Component} from 'vue'
+import {computed, onMounted, onUnmounted, ref, shallowRef, watch} from 'vue'
+
+import {type ButtonMenuOption, NewModal} from '#ui/components'
+import {Button, ContextMenu} from '#ui/components/base/buttons'
 import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
-import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { useStickyObserver } from '#ui/composables/sticky-observer'
-import { useVirtualScroll } from '#ui/composables/virtual-scroll'
-import { injectFilePicker } from '#ui/providers/file-picker'
-import { injectNotificationManager } from '#ui/providers/web-notifications'
-import { commonMessages } from '#ui/utils/common-messages'
-import { canOpenInFileEditor } from '#ui/utils/file-extensions'
-
-import FileEditor from './components/editor/FileEditor.vue'
-import FileManagerError from './components/FileManagerError.vue'
-import FileNavbar from './components/FileNavbar.vue'
-import FileTableHeader from './components/FileTableHeader.vue'
-import FileTableRow from './components/FileTableRow.vue'
+import {defineMessages, useVIntl} from '#ui/composables/i18n'
+import {injectFilePicker} from '#ui/providers/file-picker'
+import {injectNotificationManager} from '#ui/providers/web-notifications'
+import {commonMessages} from '#ui/utils/common-messages'
+import {canOpenInFileEditor} from '#ui/utils/file-extensions'
+
+import FileBrowserPanel from './components/FileBrowserPanel.vue'
+import FileSideBar from './components/FileSideBar.vue'
 import FileCreateItemModal from './components/modals/FileCreateItemModal.vue'
 import FileCreateZipModal from './components/modals/FileCreateZipModal.vue'
 import FileDeleteItemModal from './components/modals/FileDeleteItemModal.vue'
@@ -236,13 +146,15 @@ import FileRenameItemModal from './components/modals/FileRenameItemModal.vue'
 import FileUnsavedChangesModal from './components/modals/FileUnsavedChangesModal.vue'
 import FileUploadConflictModal from './components/modals/FileUploadConflictModal.vue'
 import FileUploadZipUrlModal from './components/modals/FileUploadZipUrlModal.vue'
-import FileUploadDragAndDrop from './components/upload/FileUploadDragAndDrop.vue'
-import { useFileSearch } from './composables/file-search'
-import { useFileSelection } from './composables/file-selection'
-import { useFileSorting } from './composables/file-sorting'
-import { useFileUndoRedo } from './composables/file-undo-redo'
-import { injectFileManager } from './providers/file-manager'
-import type { FileItem } from './types'
+import {useFileSearch} from './composables/file-search'
+import {useFileSelection} from './composables/file-selection'
+import {useFileSorting} from './composables/file-sorting'
+import {useFileUndoRedo} from './composables/file-undo-redo'
+import type {FileEditorBridge} from './providers/file-browser-ui'
+import {provideFileBrowserUI} from './providers/file-browser-ui'
+import {injectFileManager} from './providers/file-manager'
+import type {FileItem} from './types'
+import {type MaybeElement, useLocalStorage, useResizeObserver} from "@vueuse/core";
 
 const { formatMessage } = useVIntl()
 
@@ -289,9 +201,10 @@ const messages = defineMessages({
 	},
 })
 
-defineProps<{
+const props = defineProps<{
 	showDebugInfo?: boolean
 	showRefreshButton?: boolean
+	constrainWidth?: boolean
 }>()
 
 const { addNotification } = injectNotificationManager()
@@ -306,14 +219,10 @@ import('vue3-ace-editor').then(async (mod) => {
 
 const baseId = `files-${Math.random().toString(36).slice(2, 9)}`
 
-const items = computed(() => ctx.items.value)
+const items = computed(() => ctx.currentItems.value)
 const isEditing = computed(() => ctx.editingFile.value !== null)
-const isBusy = computed(
-	() => (ctx.isBusy?.value ?? false) || (ctx.isReadOnly?.(ctx.currentPath.value) ?? false),
-)
-const busyTooltip = computed(() =>
-	ctx.isReadOnly?.(ctx.currentPath.value) ? ctx.readOnlyReason?.value : ctx.busyTooltip?.value,
-)
+const isBusy = computed(() => (ctx.isBusy?.value ?? false) || (ctx.isReadOnly?.(ctx.currentPath.value) ?? false),)
+const busyTooltip = computed(() => ctx.isReadOnly?.(ctx.currentPath.value) ? ctx.readOnlyReason?.value : ctx.busyTooltip?.value,)
 
 const breadcrumbSegments = computed(() => {
 	const path = ctx.currentPath.value
@@ -327,7 +236,7 @@ const breadcrumbSegments = computed(() => {
 const { searchQuery, searchedItems } = useFileSearch(items)
 const {
 	sortField,
-	sortDesc: sortDescValue,
+	sortDesc,
 	handleSort,
 	sortedItems: filteredItems,
 	resetSort,
@@ -353,25 +262,32 @@ const { recordOperation, onKeydown } = useFileUndoRedo(
 	(title, text, type) => addNotification({ title, text, type }),
 )
 
-// Virtual scroll
-const {
-	listContainer: virtualListContainer,
-	totalHeight,
-	visibleRange,
-	visibleTop,
-	visibleItems,
-} = useVirtualScroll(filteredItems, {
-	itemHeight: 61,
-	bufferSize: 5,
-})
+// Bridge to whichever panel currently hosts the file editor (FileBrowserPanel).
+// Dockview mounts that panel itself, so there's no template ref to reach it through -
+// it registers its exposed API here on mount instead. See providers/file-browser-ui.ts.
+const fileEditorApi = shallowRef<FileEditorBridge | null>(null)
+
+const hasUnsavedChanges = computed(() => fileEditorApi.value?.hasUnsavedChanges?.value ?? false)
+
+async function saveFileContent(exit = false) {
+	await fileEditorApi.value?.saveFileContent(exit)
+}
 
-// Sticky observer for the table header
-const fileUploadRef = ref<InstanceType<typeof FileUploadDragAndDrop>>()
-const fileUploadEl = computed(() => fileUploadRef.value?.$el as HTMLElement | null)
-const { isStuck: isLabelBarStuck } = useStickyObserver(fileUploadEl)
+function revertChanges() {
+	fileEditorApi.value?.revertChanges()
+}
+
+async function shareToMclogs() {
+	await fileEditorApi.value?.shareToMclogs()
+}
+
+function toggleFind() {
+	fileEditorApi.value?.toggleFind()
+}
 
 // Refs
-const fileEditorRef = ref<InstanceType<typeof FileEditor>>()
+const fileViewer = ref<MaybeElement>();
+const sidebarModal = ref<InstanceType<typeof NewModal>>();
 const createItemModal = ref<InstanceType<typeof FileCreateItemModal>>()
 const createZipModal = ref<InstanceType<typeof FileCreateZipModal>>()
 const renameItemModal = ref<InstanceType<typeof FileRenameItemModal>>()
@@ -386,14 +302,83 @@ const selectedItem = ref<FileItem | null>(null)
 
 const unsavedChangesModal = ref<InstanceType<typeof FileUnsavedChangesModal>>()
 
-const hasUnsavedChanges = computed(() => fileEditorRef.value?.hasUnsavedChanges ?? false)
+const sidebar = ref<ISplitviewPanel | null>(null);
+const browser = ref<ISplitviewPanel | null>(null);
+
+// Initialize panels dynamically once the component mounts
+function onReady({api}: SplitviewReadyEvent) {
+	console.log("Split Ready")
+
+	// Render the left panel
+	sidebar.value = api.addPanel({
+		index: 0,
+		id: 'panel_left',
+		component: 'fileSideBar',
+		minimumSize: 300, // Initial width in pixels
+		size: 300,
+		priority: LayoutPriority.Low
+	});
+
+	if (!sidebarOpen.value) sidebar.value.api.setVisible(false);
+
+	// Render the right panel
+	browser.value = api.addPanel({
+		index: 1,
+		id: 'panel_right',
+		component: 'fileBrowserPanel',
+		minimumSize: browserMinSize.value,
+		priority: LayoutPriority.High
+	});
+}
+
+const constrainWidth = computed(() => props.constrainWidth);
+const browserMinSize = computed(() => constrainWidth.value ? 700 : 1200)
+
+watch(browserMinSize, (value) => browser.value?.api?.setConstraints({ minimumSize: value }))
+
+const sidebarOpenSetting = useLocalStorage('file-layout-sidebar-open', false, { initOnMounted: true });
+const sidebarOpen = ref(sidebarOpenSetting.value);
+
+watch(sidebarOpen, (value) => {
+	if(!smallMode.value) {
+		sidebar.value?.api?.setVisible(value);
+	} else {
+		if (value) {
+			sidebarModal.value?.show()
+		} else {
+			sidebarModal.value?.hide()
+		}
+	}
+})
+
+const containerWidth = ref<number>()
+
+useResizeObserver(fileViewer, (entries) => {
+	const entry = entries[0]
+	containerWidth.value = entry.contentRect.width
+})
+
+const smallMode = computed(() => containerWidth.value == null || containerWidth.value < 1100);
+const fullWidthSidebar = computed(() => containerWidth.value == null || containerWidth.value < 400); //356
+
+let pastInitialSetup = false;
+
+watch(smallMode, (value) => {
+	if (pastInitialSetup) {
+		sidebarOpen.value = !value;
+	} else {
+		pastInitialSetup = true;
+	}
+
+	browser.value?.api?.setConstraints({ minimumSize: constrainWidth ? 700 : 1200 })
+})
 
 async function confirmDiscardChanges(): Promise<boolean> {
 	if (!hasUnsavedChanges.value) return true
 	const result = await unsavedChangesModal.value?.prompt()
 	if (result === 'save') {
 		if (isBusy.value) return false
-		await fileEditorRef.value?.saveFileContent(false)
+		await saveFileContent(false)
 		return true
 	}
 	return result === 'discard'
@@ -690,6 +675,79 @@ function handlePrefetchHome() {
 	}, 150)
 }
 
+function handleContextMenu(event: MouseEvent, options: ButtonMenuOption[]) {
+	contextMenuRef.value?.open(event, options)
+}
+
+// Shared UI state/handlers for the dockview-hosted panels (FileSideBar, FileBrowserPanel).
+// Dockview mounts those panels itself via the `components` map + `addPanel()`, so they're
+// no longer direct template children - normal prop/emit/ref bindings can't reach them. They
+// stay true descendants in the Vue tree though (dockview-vue teleports them), so provide/inject
+// still works and is what they use instead. See providers/file-browser-ui.ts.
+provideFileBrowserUI({
+	baseId,
+	showDebugInfo: computed(() => props.showDebugInfo ?? false),
+	showRefreshButton: computed(() => props.showRefreshButton ?? false),
+
+	items,
+	filteredItems,
+	isEditing,
+	isBusy,
+	busyTooltip,
+	breadcrumbSegments,
+	sidebarOpen: computed(() => sidebarOpen.value),
+	setSidebarOpen: (value) => {
+		sidebarOpen.value = value;
+		sidebarOpenSetting.value = value;
+	},
+	containerWidth,
+
+	searchQuery,
+	sortField,
+	sortDesc,
+	handleSort,
+
+	selectedItems,
+	toggleItemSelection,
+	deselectAll,
+	toggleSelectAll,
+	allSelected,
+	someSelected,
+
+	editorComponent,
+	fileEditorApi,
+	hasUnsavedChanges,
+	saveFileContent,
+	revertChanges,
+	shareToMclogs,
+	toggleFind,
+
+	navigateToSegment,
+	handleNavigateToFolder,
+	handleEditFile,
+	handleEditorClose,
+	handlePrefetchHome,
+	handleItemHover,
+
+	showCreateModal,
+	showRenameModal,
+	showMoveModal,
+	showDeleteModal,
+	showBulkDeleteModal,
+	showUnzipFromUrlModal,
+
+	handleDownload,
+	handleZip,
+	handleDirectMove,
+	handleExtractItem,
+
+	handleDroppedFiles,
+	handleDropError,
+	initiateFileUpload,
+
+	handleContextMenu,
+})
+
 // Reset search/sort/selection on path change
 watch(
 	() => ctx.currentPath.value,
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts b/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
new file mode 100644
index 00000000000..490d0b03fe1
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
@@ -0,0 +1,88 @@
+import type { Component, ComputedRef, Ref, ShallowRef } from 'vue'
+
+import type { ButtonMenuOption } from '#ui/components'
+import { createContext } from '#ui/providers/create-context'
+
+import type { FileItem, FileSortField } from '../types'
+
+export type FileInfo = Pick<FileItem, 'name' | 'type' | 'path'>
+
+/**
+ * API exposed by whichever panel currently hosts the file editor (FileBrowserPanel),
+ * registered here on mount since dockview panels aren't reachable via template refs.
+ */
+export interface FileEditorBridge {
+	hasUnsavedChanges: Ref<boolean> | ComputedRef<boolean>
+	isEditingImage: Ref<boolean> | ComputedRef<boolean>
+	isFindOpen: Ref<boolean> | ComputedRef<boolean>
+	saveFileContent: (exit?: boolean) => Promise<void>
+	revertChanges: () => void
+	shareToMclogs: () => Promise<void>
+	toggleFind: () => void
+}
+
+export interface FileBrowserUIContext {
+	baseId: string
+	showDebugInfo: ComputedRef<boolean>
+	showRefreshButton: ComputedRef<boolean>
+
+	items: ComputedRef<FileItem[]>
+	filteredItems: ComputedRef<FileItem[]>
+	isEditing: ComputedRef<boolean>
+	isBusy: ComputedRef<boolean>
+	busyTooltip: ComputedRef<string | undefined>
+	breadcrumbSegments: ComputedRef<string[]>
+	sidebarOpen: ComputedRef<boolean>
+	setSidebarOpen: (value: boolean) => void;
+	containerWidth: Ref<number | undefined>
+
+	searchQuery: Ref<string>
+	sortField: Ref<FileSortField>
+	sortDesc: Ref<boolean>
+	handleSort: (field: FileSortField) => void
+
+	selectedItems: Ref<Set<string>>
+	toggleItemSelection: (path: string) => void
+	deselectAll: () => void
+	toggleSelectAll: () => void
+	allSelected: ComputedRef<boolean>
+	someSelected: ComputedRef<boolean>
+
+	editorComponent: ShallowRef<Component | null>
+	fileEditorApi: ShallowRef<FileEditorBridge | null>
+	hasUnsavedChanges: ComputedRef<boolean>
+	saveFileContent: (exit?: boolean) => Promise<void>
+	revertChanges: () => void
+	shareToMclogs: () => Promise<void>
+	toggleFind: () => void
+
+	navigateToSegment: (index: number) => void
+	handleNavigateToFolder: (item: FileItem) => void
+	handleEditFile: (item: FileInfo) => void
+	handleEditorClose: () => Promise<void>
+	handlePrefetchHome: () => void
+	handleItemHover: (item: FileInfo) => void
+
+	showCreateModal: (type: 'file' | 'directory') => void
+	showRenameModal: (item: FileItem) => void
+	showMoveModal: (item: FileItem) => void
+	showDeleteModal: (item: FileItem) => void
+	showBulkDeleteModal: () => void
+	showUnzipFromUrlModal: (cf: boolean) => void
+
+	handleDownload: (item: FileItem) => Promise<void>
+	handleZip: (item: FileItem) => Promise<void>
+	handleDirectMove: (moveData: FileInfo & { destination: string }) => void
+	handleExtractItem: (item: FileInfo) => Promise<void>
+
+	handleDroppedFiles: (files: File[]) => void
+	handleDropError: (error: unknown) => void
+	initiateFileUpload: () => Promise<void>
+
+	handleContextMenu: (event: MouseEvent, options: ButtonMenuOption[]) => void
+}
+
+export const [injectFileBrowserUI, provideFileBrowserUI] = createContext<FileBrowserUIContext>(
+	'FilePageLayout',
+	'fileBrowserUIContext',
+)
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts b/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
index 096d4247c17..6ab505d3ccb 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
@@ -11,10 +11,25 @@ import type {
 	UploadState,
 } from '../types'
 
+export interface DirectoryQuery {
+	items: ComputedRef<FileItem[]>,
+	isLoading: Ref<boolean>,
+	filesReadyPending: ComputedRef<boolean>
+	loadError: Ref<Error | null>,
+}
+
+export interface DirectoryTree {
+	getEntries: (path: string) => Ref<FileItem[]>
+	prefetch: (path: string) => void;
+	expandedEntries: Ref<string[]>
+}
+
 export interface FileManagerContext {
-	items: Ref<FileItem[]>
-	loading: Ref<boolean>
-	error: Ref<Error | null>
+	currentItems: ComputedRef<FileItem[]>
+	directoryTree: DirectoryTree
+
+	loading: ComputedRef<boolean>
+	error: ComputedRef<Error | null>
 
 	currentPath: Ref<string>
 	navigateTo: (path: string) => void
@@ -40,7 +55,8 @@ export interface FileManagerContext {
 	cancelUpload?: () => void
 	uploadState?: Ref<UploadState> | ComputedRef<UploadState>
 
-	refresh: () => void
+	isRefreshing: Ref<boolean>
+	refresh: () => Promise<void>
 
 	isBusy?: Ref<boolean> | ComputedRef<boolean>
 	busyTooltip?: Ref<string | undefined> | ComputedRef<string | undefined>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
index 8bc1608f79f..7c7aaf3242d 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Kyros } from '@modrinth/api-client'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, onMounted, ref, watch } from 'vue'
+import {computed, onMounted, type Ref, ref, watch} from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
@@ -17,12 +17,17 @@ import {
 import { commonMessages } from '#ui/utils/common-messages'
 
 import FilePageLayout from '../../../shared/files-tab/layout.vue'
-import { provideFileManager } from '../../../shared/files-tab/providers/file-manager'
+import {
+	type DirectoryTree,
+	type DirectoryQuery,
+	provideFileManager
+} from '../../../shared/files-tab/providers/file-manager'
 import type { EditingFile, FileItem } from '../../../shared/files-tab/types'
 
 const props = defineProps<{
 	showDebugInfo?: boolean
 	showRefreshButton?: boolean
+	constrainWidth?: boolean
 }>()
 
 const client = injectModrinthClient()
@@ -136,28 +141,32 @@ function initializeFileEdit() {
 	}
 }
 
-// Directory listing query
-const {
-	data: directoryData,
-	isLoading,
-	error: loadError,
-} = useQuery({
-	queryKey: computed(() => ['files', serverId, currentPath.value]),
-	queryFn: async () => {
-		return client.kyros.files_v0.listDirectory(currentPath.value, 1, 2000)
-	},
-	staleTime: 30_000,
-})
-
 function isVisibleFileItem(item: Kyros.Files.v0.DirectoryItem) {
 	return !item.path.split('/').includes('.modrinth-staged')
 }
 
-const items = computed<FileItem[]>(() =>
-	(directoryData.value?.items ?? []).filter(isVisibleFileItem),
-)
+function queryDirectoryEntries(path: string): DirectoryQuery{
+	const {
+		data: directoryData,
+		isLoading,
+		error: loadError,
+	} = useQuery({
+		queryKey: computed(() => ['files', serverId, path]),
+		queryFn: async () => {
+			return client.kyros.files_v0.listDirectory(path, 1, 2000)
+		},
+		staleTime: 30_000,
+	})
 
-const filesReadyPending = useReadyState({ isLoading, data: directoryData })
+	return {
+		items: computed<FileItem[]>(() =>
+			(directoryData.value?.items ?? []).filter(isVisibleFileItem),
+		),
+		isLoading: isLoading,
+		filesReadyPending: useReadyState({ isLoading, data: directoryData }),
+		loadError: loadError,
+	}
+}
 
 // Prefetching
 function prefetchDirectory(path: string) {
@@ -193,8 +202,12 @@ function getQueryKey() {
 	return ['files', serverId, currentPath.value]
 }
 
-function refreshList() {
-	queryClient.invalidateQueries({ queryKey: ['files', serverId] })
+const isRefreshing = ref<boolean>(false)
+
+async function refreshList() {
+	isRefreshing.value = true;
+	await queryClient.invalidateQueries({ queryKey: ['files', serverId] })
+	isRefreshing.value = false;
 }
 
 // Mutations
@@ -434,7 +447,7 @@ async function createZip(data: Kyros.Files.v1.ZipRequest, destination?: string):
 				: undefined,
 			type: 'success',
 		})
-		refreshList()
+		await refreshList()
 	} catch (error) {
 		updateOperation(
 			{ progress: 0, error: error instanceof Error ? error.message : undefined },
@@ -488,7 +501,7 @@ async function uploadFiles(files: File[]) {
 				filename: getSessionUploadFilename(file.name),
 			})),
 		)
-		if (result === 'completed') refreshList()
+		if (result === 'completed') await refreshList()
 	} catch (err) {
 		addNotification({
 			title: formatMessage(commonMessages.uploadFailedLabel),
@@ -502,11 +515,35 @@ function cancelUpload() {
 	fileUploadSession.cancelUpload()
 }
 
+const directories: Record<string, DirectoryQuery> = {};
+const expandedDirectories: Ref<string[]> = ref([]);
+
+const directoryTree = {
+	prefetch: (path: string) => {
+		if (directories[path] == null) {
+			prefetchDirectory(path);
+		}
+	},
+	get: (path: string) => {
+		let query = directories[path];
+		if (query == null) {
+			query = queryDirectoryEntries(path);
+			directories[path] = query;
+		}
+		return query
+	},
+	getEntries(path: string) {
+		return this.get(path).items;
+	},
+	expandedEntries: expandedDirectories
+};
+
 // Provide the file manager context
 provideFileManager({
-	items,
-	loading: computed(() => isLoading.value),
-	error: computed(() => loadError.value ?? null),
+	currentItems: computed(() => directoryTree.get(currentPath.value).items.value),
+	directoryTree,
+	loading: computed(() => directoryTree.get(currentPath.value).isLoading.value),
+	error: computed(() => directoryTree.get(currentPath.value).loadError.value ?? null),
 	currentPath,
 	navigateTo,
 	editingFile,
@@ -540,6 +577,7 @@ provideFileManager({
 	cancelUpload,
 	uploadState,
 	refresh: refreshList,
+	isRefreshing,
 	isBusy: fileWriteDisabled,
 	busyTooltip: fileWriteDisabledTooltip,
 	busyWarning,
@@ -554,10 +592,11 @@ provideFileManager({
 </script>
 
 <template>
-	<ReadyTransition :pending="filesReadyPending">
+	<ReadyTransition :pending="directoryTree.get(currentPath).filesReadyPending.value">
 		<FilePageLayout
 			:show-debug-info="props.showDebugInfo"
 			:show-refresh-button="props.showRefreshButton"
+			:constrain-width="constrainWidth"
 		/>
 	</ReadyTransition>
 </template>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index 9ccd656e70b..40cc0b767fc 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -2,9 +2,6 @@
 	<div
 		v-if="filteredNotices.length > 0"
 		class="relative mx-auto mb-4 flex w-full min-w-0 flex-col gap-3 px-6"
-		:class="{
-			'max-w-[1280px]': constrainWidth,
-		}"
 	>
 		<ServerNotice
 			v-for="notice in filteredNotices"
@@ -98,6 +95,7 @@
 	<!-- SERVER START -->
 	<div
 		v-else-if="serverData"
+		ref="serverDataContainer"
 		data-pyro-server-manager-root
 		class="relative mx-auto box-border flex w-full min-w-0 flex-col gap-4 px-6 transition-all duration-300"
 		:style="{
@@ -110,7 +108,7 @@
 			containedLayout
 				? 'h-full min-h-0 overflow-hidden pb-6'
 				: constrainWidth
-					? 'min-h-[100svh] max-w-[1280px] pb-16'
+					? ['min-h-[100svh] pb-16', centerEntries ? 'max-w-[1280px]' : '']
 					: 'min-h-[calc(100svh-100px)] pb-6',
 		]"
 	>
@@ -227,15 +225,29 @@
 			<ServerOnboardingPanelPage v-if="isOnboarding" :browse-modpacks="handleBrowseModpacks" />
 
 			<template v-else>
-				<div class="server-stagger-item -mb-3">
+				<div class="server-stagger-item flex items-center">
 					<NavTabs
 						:links="navLinks"
 						replace
 						page-nav
+						:no-padding="true"
+						:no-margin="true"
 						data-pyro-navigation
-						:class="containedLayout ? 'shrink-0' : ''"
+						:class="[containedLayout ? 'shrink-0' : '', 'px-0 py-0']"
 						:style="{ '--si': 1 }"
 					/>
+					<IconButton v-if="allowConstrainWidthToggle"
+						v-tooltip="constrainWidth ? 'Expand View' : 'Collapse View'"
+						size="md"
+						:label="constrainWidth ? 'Expand View' : 'Collapse View'"
+						native-type="button"
+						@click="() => constrainWidth = !constrainWidth"
+						class="ml-2"
+						:style="{ '--si': 1 }"
+					>
+						<ExpandIcon v-if="constrainWidth" />
+						<CollapseIcon v-else />
+					</IconButton>
 				</div>
 
 				<div
@@ -275,7 +287,7 @@
 						class="mb-4 shrink-0"
 						@installation-retry="handleInstallationRetry"
 					/>
-					<slot :on-reinstall="onReinstall" :on-reinstall-failed="onReinstallFailed" />
+					<slot :on-reinstall="onReinstall" :on-reinstall-failed="onReinstallFailed" :constrain-width="constrainWidth"/>
 				</div>
 			</template>
 		</template>
@@ -320,6 +332,8 @@ import {
 	MoreVerticalIcon,
 	ServerIcon as ServerAssetIcon,
 	SettingsIcon,
+	ExpandIcon,
+	CollapseIcon,
 	TimerIcon,
 	TransferIcon,
 	TriangleAlertIcon,
@@ -327,7 +341,7 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { useStorage } from '@vueuse/core'
+import {useLocalStorage, useStorage} from '@vueuse/core'
 import DOMPurify from 'dompurify'
 import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
@@ -378,6 +392,7 @@ import { commonMessages } from '#ui/utils/common-messages'
 import { formatLoaderLabel } from '#ui/utils/loaders'
 
 import ServerOnboardingPanelPage from './[id]/onboarding.vue'
+import {useResizeObserver} from "@vueuse/core/index";
 
 interface Tab {
 	label: string
@@ -412,6 +427,7 @@ const props = withDefaults(
 			type: 'mod' | 'plugin' | 'datapack'
 		}) => void | Promise<void>
 		constrainWidth?: boolean
+		centerEntries?: boolean
 		layoutMode?: 'page' | 'contained'
 	}>(),
 	{
@@ -428,6 +444,7 @@ const props = withDefaults(
 		browseModpacks: undefined,
 		browseContent: undefined,
 		constrainWidth: false,
+		centerEntries: true,
 		layoutMode: 'page',
 	},
 )
@@ -465,7 +482,14 @@ const DISABLE_LOADING_ANIM = true
 
 const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
-const constrainWidth = computed(() => props.constrainWidth)
+const serverDataContainer = ref<InstanceType<typeof HTMLDivElement>>()
+const allowConstrainWidthToggle = ref<boolean>(false);
+useResizeObserver(serverDataContainer, (entries) => {
+	const entry = entries[0]
+	allowConstrainWidthToggle.value = entry.contentRect.width > 1200
+})
+const constrainWidth = useLocalStorage('server-layout-constrained-width', props.constrainWidth, { initOnMounted: true })
+const centerEntries = computed(() => props.centerEntries);
 const containedLayout = computed(() => props.layoutMode === 'contained')
 const isNuxt = computed(() => client instanceof NuxtModrinthClient)
 const queryClient = useQueryClient()
diff --git a/packages/ui/src/locales.eager.ts b/packages/ui/src/locales.eager.ts
index 035d25e146e..9bd32331c72 100644
--- a/packages/ui/src/locales.eager.ts
+++ b/packages/ui/src/locales.eager.ts
@@ -1,4 +1,4 @@
-import type { CrowdinMessages } from './composables/i18n'
+import type { CrowdinMessages } from '#ui/composables'
 
 export const uiLocaleModulesEager = import.meta.glob<{ default: CrowdinMessages }>(
 	'./locales/*/index.json',
diff --git a/packages/ui/src/providers/app-root.ts b/packages/ui/src/providers/app-root.ts
new file mode 100644
index 00000000000..67730faf360
--- /dev/null
+++ b/packages/ui/src/providers/app-root.ts
@@ -0,0 +1,8 @@
+import { createContext } from './create-context'
+import type {MaybeElement} from "@vueuse/core";
+import type {ComputedRef} from "vue";
+
+export const [injectAppRoot, provideAppRoot] = createContext<{root: ComputedRef<MaybeElement>}>(
+	'root',
+	'appRoot',
+)
diff --git a/packages/ui/src/providers/tooltip.ts b/packages/ui/src/providers/tooltip.ts
index a4d60988563..cb80eb765a0 100644
--- a/packages/ui/src/providers/tooltip.ts
+++ b/packages/ui/src/providers/tooltip.ts
@@ -187,11 +187,43 @@ export function tooltipEnter(el: HTMLElement) {
 	if (!hasTooltipContent(el)) {
 		return
 	}
+	closeWaitingTimeout();
 	hovered = el
 	show(false)
 }
 
-export function tooltipLeave(el: HTMLElement) {
+type TimeoutId = ReturnType<typeof setTimeout>;
+
+let hideTimeoutData: { id: TimeoutId | undefined, el: HTMLElement } | undefined = undefined;
+
+export function preventTooltipClosure(el: HTMLElement) {
+	if (hideTimeoutData?.el !== el) return;
+	clearTimeout(hideTimeoutData.id);
+	hideTimeoutData = undefined;
+}
+
+export function tooltipLeave(el: HTMLElement, timeout?: number): void {
+	if (timeout != undefined) {
+		// TODO: SHOULD ATTEMPT TO HIDE ANY PREVIOUS CALLS RIGHT AWAY?
+		let timeoutId = setTimeout(() => {
+			if (hideTimeoutData) tooltipLeaveBase(hideTimeoutData.el)
+		}, timeout);
+
+		hideTimeoutData = { id: timeoutId, el: el }
+	} else {
+		tooltipLeaveBase(el)
+	}
+}
+
+function closeWaitingTimeout() {
+	if (hideTimeoutData) {
+		clearTimeout(hideTimeoutData.id);
+		tooltipLeaveBase(hideTimeoutData.el);
+		hideTimeoutData = undefined;
+	}
+}
+
+function tooltipLeaveBase(el: HTMLElement) {
 	if (hovered === el) {
 		hovered = undefined
 	}
@@ -205,6 +237,7 @@ export function tooltipFocusIn(el: HTMLElement) {
 	if (!isFocusVisible(el) || !hasTooltipContent(el)) {
 		return
 	}
+	closeWaitingTimeout();
 	focused = el
 	show(true)
 }
@@ -260,7 +293,7 @@ export function installTooltipDirective(app: App) {
 		},
 	} satisfies TooltipDirective)
 
-	function sync(el: HTMLElement, value: TooltipProps, modifiers: Record<string, boolean>) {
+	function sync(el: HTMLElement, value: TooltipProps, modifiers: Partial<Record<string, boolean>>) {
 		const text = tooltipText(value)
 		if (!text) {
 			releaseFocusable(el, addedTabIndex)
diff --git a/packages/ui/src/utils/common-messages.ts b/packages/ui/src/utils/common-messages.ts
index d64cbc42b59..087909d10f8 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -506,6 +506,10 @@ export const commonMessages = defineMessages({
 		id: 'label.select-all',
 		defaultMessage: 'Select all',
 	},
+	selectEntryLabel: {
+		id: 'label.select-entry',
+		defaultMessage: 'Select Entry',
+	},
 	selectionActionsLabel: {
 		id: 'label.selection-actions',
 		defaultMessage: 'Selection actions',

From 6f691016760bf44280e04ad0c5547b67f4893ba1 Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Wed, 30 Sep 2026 22:20:22 -0500
Subject: [PATCH 02/18] refactor: Treeview SIdebar, tabbed file view, pivot to
 use custom grid layout for sidebar and browser

Mainly done due to issues with DockView requiring set dimensions to layout elements and such not really being possible for concept of how virtual scroll container and sticky sidebar works.

- Fix issues with not being able to select files/folders not in active directory view
- Implement lazy directory handling for server panel
---
 .idea/modules.xml                             |  25 +-
 .../src/pages/instance/files/index.vue        |  88 +++-
 .../files-tab/components/FileBrowserPanel.vue | 151 ++++---
 .../files-tab/components/FileNavbar.vue       |  40 +-
 .../files-tab/components/FileSideBar.vue      |  91 +---
 .../files-tab/components/FileTableRow.vue     | 134 +++++-
 .../shared/files-tab/components/FileTree.vue  | 187 +++++++++
 .../components/editor/FileEditor.vue          |  22 +-
 .../files-tab/components/tabs/FileTab.vue     |  90 ++++
 .../components/tabs/FileTabPanel.vue          |  54 +++
 .../files-tab/components/tabs/FileTabs.vue    |  64 +++
 .../components/tabs/FileTabsActions.vue       |  40 ++
 .../files-tab/composables/file-selection.ts   |  38 +-
 .../shared/files-tab/composables/file-tabs.ts | 308 ++++++++++++++
 .../shared/files-tab/composables/shift-key.ts |   4 +
 .../src/layouts/shared/files-tab/layout.vue   | 353 +++++++++-------
 .../files-tab/providers/file-browser-ui.ts    |  20 +-
 .../files-tab/providers/file-manager.ts       |  21 +-
 .../shared/files-tab/providers/index.ts       |   7 +-
 .../layouts/wrapped/hosting/manage/files.vue  |  55 ++-
 packages/ui/src/locales/en-US/index.json      |  45 ++
 pnpm-lock.yaml                                | 391 ++++++++----------
 pnpm-workspace.yaml                           |   3 +
 23 files changed, 1619 insertions(+), 612 deletions(-)
 create mode 100644 packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
 create mode 100644 packages/ui/src/layouts/shared/files-tab/components/tabs/FileTab.vue
 create mode 100644 packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabPanel.vue
 create mode 100644 packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue
 create mode 100644 packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabsActions.vue
 create mode 100644 packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
 create mode 100644 packages/ui/src/layouts/shared/files-tab/composables/shift-key.ts

diff --git a/.idea/modules.xml b/.idea/modules.xml
index ecea560ce58..33af8a01da5 100644
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -1,15 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-	<component name="ProjectModuleManager">
-		<modules>
-			<module fileurl="file://$PROJECT_DIR$/.idea/code.iml"
-					filepath="$PROJECT_DIR$/.idea/code.iml"/>
-			<module fileurl="file://$PROJECT_DIR$/.idea/modules/theseus.iml"
-					filepath="$PROJECT_DIR$/.idea/modules/theseus.iml"/>
-			<module fileurl="file://$PROJECT_DIR$/.idea/modules/theseus.main.iml"
-					filepath="$PROJECT_DIR$/.idea/modules/theseus.main.iml"/>
-			<module fileurl="file://$PROJECT_DIR$/.idea/modules/theseus.test.iml"
-					filepath="$PROJECT_DIR$/.idea/modules/theseus.test.iml"/>
-		</modules>
-	</component>
-</project>
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/code.iml" filepath="$PROJECT_DIR$/.idea/code.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/modules/java.theseus.iml" filepath="$PROJECT_DIR$/.idea/modules/java.theseus.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/modules/java.theseus.main.iml" filepath="$PROJECT_DIR$/.idea/modules/java.theseus.main.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/modules/java.theseus.test.iml" filepath="$PROJECT_DIR$/.idea/modules/java.theseus.test.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/modules/theseus.iml" filepath="$PROJECT_DIR$/.idea/modules/theseus.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/modules/theseus.main.iml" filepath="$PROJECT_DIR$/.idea/modules/theseus.main.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/modules/theseus.test.iml" filepath="$PROJECT_DIR$/.idea/modules/theseus.test.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/apps/app-frontend/src/pages/instance/files/index.vue b/apps/app-frontend/src/pages/instance/files/index.vue
index a75268ede23..413829092e0 100644
--- a/apps/app-frontend/src/pages/instance/files/index.vue
+++ b/apps/app-frontend/src/pages/instance/files/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { EditingFile, FileItem, UploadState } from '@modrinth/ui'
+import type { DirectoryEntries, EditingFile, FileItem, UploadState } from '@modrinth/ui'
 import {
 	commonMessages,
 	defineMessages,
@@ -10,9 +10,9 @@ import {
 	useDebugLogger,
 	useVIntl,
 } from '@modrinth/ui'
-import { useQuery } from '@tanstack/vue-query'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { invoke } from '@tauri-apps/api/core'
-import {computed, Ref, ref, watch} from 'vue'
+import { computed, effectScope, onScopeDispose, type Ref, ref, watch } from 'vue'
 
 import { useAppEvent } from '@/composables/use-app-event'
 import { get_full_path } from '@/helpers/instance'
@@ -23,6 +23,7 @@ import { instanceKeys } from '../query-options'
 
 const instancePage = injectInstancePage()
 const instanceId = instancePage.instanceId
+const queryClient = useQueryClient()
 
 const { formatMessage } = useVIntl()
 const { addNotification } = injectNotificationManager()
@@ -68,12 +69,64 @@ async function listDirectory(dirPath: string): Promise<FileItem[]> {
 
 function isReadOnly(path: string): boolean {
 	const normalized = path.startsWith('/') ? path.slice(1) : path
+	const isReadOnlyItem = (item: FileItem) => item.path === normalized && item.readOnly === true
 	return (
 		normalized.split('/')[0].toLowerCase() === 'mods' ||
-		items.value.some((item) => item.path === normalized && item.readOnly === true)
+		items.value.some(isReadOnlyItem) ||
+		[...directories.values()].some((entries) => entries.items.value.some(isReadOnlyItem))
 	)
 }
 
+function toRelativePath(path: string) {
+	return path.split('/').filter(Boolean).join('/')
+}
+
+const directories = new Map<string, DirectoryEntries>()
+const expandedDirectories: Ref<string[]> = ref([])
+
+/** Owns the lazily created directory queries so they're disposed with this page, wherever they were first requested from. */
+const directoryScope = effectScope()
+onScopeDispose(() => directoryScope.stop())
+
+function queryDirectoryEntries(relativePath: string): DirectoryEntries {
+	const query = useQuery(
+		computed(() => ({
+			queryKey: instanceKeys.files(instancePage.instanceId.value, relativePath),
+			queryFn: () => listDirectory(relativePath),
+			enabled: !!instanceRoot.value,
+			staleTime: 30_000,
+		})),
+		queryClient,
+	)
+	return {
+		items: computed(() => query.data.value ?? []),
+		isLoading: query.isLoading,
+		loadError: query.error,
+	}
+}
+
+const directoryTree = {
+	get(path: string) {
+		const relativePath = toRelativePath(path)
+		let entries = directories.get(relativePath)
+		if (!entries) {
+			entries = directoryScope.run(() => queryDirectoryEntries(relativePath))!
+			directories.set(relativePath, entries)
+		}
+		return entries
+	},
+	prefetch(path: string) {
+		const relativePath = toRelativePath(path)
+		if (directories.has(relativePath)) return
+		queryClient.prefetchQuery({
+			queryKey: instanceKeys.files(instancePage.instanceId.value, relativePath),
+			queryFn: () => listDirectory(relativePath),
+			staleTime: 30_000,
+		})
+	},
+	expandedEntries: expandedDirectories,
+}
+
 async function writeBytes(path: string, bytes: Uint8Array, createOnly = false) {
 	await invoke('plugin:files|file_write', {
 		instanceId: instanceId.value,
@@ -118,12 +171,20 @@ const isRefreshing = ref<boolean>(false)
 async function refresh() {
 	debug('refresh: called, currentPath =', currentPath.value, 'instanceRoot =', instanceRoot.value)
 	isRefreshing.value = true;
-	await directoryQuery.refetch()
+	await Promise.all([
+		directoryQuery.refetch(),
+		queryClient.invalidateQueries({
+			queryKey: [...instanceKeys.detail(instancePage.instanceId.value), 'files'],
+			predicate: (query) =>
+				query.queryKey[query.queryKey.length - 1] !== currentPath.value,
+		}),
+	])
 	isRefreshing.value = false;
 }
 
 function navigateTo(path: string) {
 	debug('navigateTo:', path)
+	editingFile.value = null
 	currentPath.value = path.startsWith('/') ? path.slice(1) : path
 	refresh()
 }
@@ -302,26 +363,17 @@ watch(instanceId, async () => {
 	debug('watch instance.id: changed to', instanceId.value)
 	firstPaintPending.value = true
 	currentPath.value = ''
+	editingFile.value = null
+	expandedDirectories.value = []
 	await instanceRootQuery.refetch()
 	await refresh()
 })
 
-const directories: Record<string, Ref<FileItem[]>> = {};
-const expandedDirectories: Ref<string[]> = ref([]);
-
 provideFileManager({
 	isReadOnly,
 	readOnlyReason: computed(() => formatMessage(messages.readOnly)),
 	currentItems: items,
-	directoryTree: {
-		prefetch(path: string) {
-
-		},
-		getEntries(path: string) {
-
-		},
-		expandedEntries: expandedDirectories
-	},
+	directoryTree,
 	loading,
 	error,
 	currentPath,
@@ -352,7 +404,7 @@ provideFileManager({
 
 <template>
 	<ReadyTransition :pending="firstPaintPending">
-		<div>
+		<div class="[--files-viewport-height:calc(100vh_-_var(--top-bar-height))]">
 			<FilePageLayout :show-refresh-button="true" />
 		</div>
 	</ReadyTransition>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
index 0d27f60b3a0..31d6d18c1ce 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
@@ -1,14 +1,20 @@
 
 <template>
-	<div class="flex flex-col p-1 pl-2 gap-3 w-full">
+	<div
+		ref="panelRoot"
+		class="flex w-full scroll-mt-[var(--files-sticky-top,0px)] flex-col gap-3 p-1 pl-2"
+		:class="{ 'snap-start': isFileActive }"
+		:style="{ '--files-navbar-height': `${navbarHeight}px` }"
+	>
+		<div ref="navbarWrapper">
 		<FileNavbar
 			:sidebar-open="sidebarOpen"
 			:breadcrumbs="ui.breadcrumbSegments.value"
 			:is-editing="ui.isEditing.value"
 			:editing-file-name="ctx.editingFile.value?.name"
 			:editing-file-path="ctx.editingFile.value?.path"
-			:is-editing-image="fileEditorRef?.isEditingImage"
-			:is-editor-find-open="fileEditorRef?.isFindOpen"
+			:is-editing-image="ui.fileEditorApi.value?.isEditingImage.value ?? false"
+			:is-editor-find-open="ui.fileEditorApi.value?.isFindOpen.value ?? false"
 			:search-query="ui.searchQuery.value"
 			:show-refresh-button="ui.showRefreshButton.value"
 			:show-install-from-url="ctx.showInstallFromUrl"
@@ -16,6 +22,10 @@
 			:disabled="ui.isBusy.value"
 			:disabled-tooltip="ui.busyTooltip.value"
 			:small-mode="props.smallMode"
+			:can-go-back="ui.fileTabs.canGoBack.value"
+			:can-go-forward="ui.fileTabs.canGoForward.value"
+			@back="ui.fileTabs.back"
+			@forward="ui.fileTabs.forward"
 			@navigate="ui.navigateToSegment"
 			@navigate-home="() => {
 				ui.navigateToSegment(-1)
@@ -27,12 +37,33 @@
 			@upload-zip="() => {}"
 			@unzip-from-url="ui.showUnzipFromUrlModal"
 			@refresh="ctx.refresh"
-			@share="() => fileEditorRef?.shareToMclogs()"
-			@find="() => fileEditorRef?.toggleFind()"
+			@share="() => ui.shareToMclogs()"
+			@find="() => ui.toggleFind()"
 			@toggle-sidebar="() => ui.setSidebarOpen(!sidebarOpen)"
 		/>
-		<div class="@container relative flex flex-col overflow-clip rounded-[20px] border border-solid border-surface-4 shadow-sm">
-			<div v-if="!ui.isEditing.value">
+		</div>
+		<div
+			class="@container relative flex flex-col overflow-clip rounded-[20px] border border-solid border-surface-4 shadow-sm"
+		>
+			<div
+				class="shrink-0 overflow-hidden"
+				:class="
+					isFileActive
+						? 'h-[calc(var(--files-viewport-height,100dvh)_-_var(--files-sticky-top,0px)_-_var(--files-navbar-height,3rem)_-_1.25rem_-_2px)] min-h-[24rem]'
+						: 'h-10'
+				"
+			>
+				<FileTabs />
+			</div>
+			<FileManagerError
+				v-if="!isFileActive && ctx.error.value"
+				class="rounded-b-[20px]"
+				:title="formatMessage(messages.errorTitle)"
+				:message="formatMessage(messages.errorMessage)"
+				@refetch="ctx.refresh"
+				@home="() => ui.navigateToSegment(-1)"
+			/>
+			<div v-else-if="!isFileActive">
 				<FileUploadDragAndDrop
 					ref="fileUploadRef"
 					class=""
@@ -83,14 +114,15 @@
 								@move-direct-to="ui.handleDirectMove"
 								@edit="() => ui.handleEditFile(item)"
 								@navigate="() => ui.handleNavigateToFolder(item)"
+								@open-in-new-tab="() => ui.handleOpenInNewTab(item)"
 								@hover="() => ui.handleItemHover(item)"
 								@contextmenu="ui.handleContextMenu"
-								@toggle-select="() => ui.toggleItemSelection(item.path)"
+								@toggle-select="() => ui.toggleItemSelection(item)"
 							/>
 						</div>
 					</div>
 					<div
-						v-else-if="ui.items.value.length === 0 && !ctx.error.value"
+						v-else-if="ui.items.value.length === 0 && !ctx.error.value && !ctx.loading.value"
 						class="flex h-full w-full items-center justify-center rounded-b-[20px] bg-surface-2 p-20"
 					>
 						<div class="flex flex-col items-center gap-4 text-center">
@@ -105,41 +137,26 @@
 					</div>
 				</FileUploadDragAndDrop>
 			</div>
-			<FileManagerError
-				v-else-if="ctx.error.value"
-				class="rounded-b-[20px]"
-				:title="formatMessage(messages.errorTitle)"
-				:message="formatMessage(messages.errorMessage)"
-				@refetch="ctx.refresh"
-				@home="() => ui.navigateToSegment(-1)"
-			/>
-			<FileEditor
-				v-else
-				ref="fileEditorRef"
-				:file="ctx.editingFile.value"
-				:editor-component="ui.editorComponent.value"
-				@close="handleEditorClose"
-			/>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { FolderOpenIcon } from '@modrinth/assets'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useElementSize } from '@vueuse/core'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import { defineMessages, useVIntl } from '#ui/composables'
 import { useStickyObserver } from '#ui/composables/sticky-observer'
-import { useVirtualScroll } from '#ui/composables/virtual-scroll.ts'
+import { findScrollableAncestor, useVirtualScroll } from '#ui/composables/virtual-scroll.ts'
 import { injectFileManager } from '#ui/layouts'
 
 import { injectFileBrowserUI } from '../providers/file-browser-ui'
-import FileEditor from './editor/FileEditor.vue'
 import FileManagerError from './FileManagerError.vue'
 import FileNavbar from './FileNavbar.vue'
-import FileActionBar from './FileActionBar.vue'
 import FileTableHeader from './FileTableHeader.vue'
 import FileTableRow from './FileTableRow.vue'
+import FileTabs from './tabs/FileTabs.vue'
 import FileUploadDragAndDrop from './upload/FileUploadDragAndDrop.vue'
 
 const { formatMessage } = useVIntl()
@@ -173,8 +190,7 @@ const props = withDefaults(defineProps<{
 });
 
 const sidebarOpen = computed(() => ui.sidebarOpen.value);
-
-const fileEditorRef = ref<InstanceType<typeof FileEditor>>()
+const isFileActive = computed(() => ui.fileTabs.activeLocation.value.kind === 'file')
 
 const filteredItems = computed(() => ui.filteredItems.value)
 
@@ -195,41 +211,56 @@ const fileUploadRef = ref<InstanceType<typeof FileUploadDragAndDrop>>()
 const fileUploadEl = computed(() => fileUploadRef.value?.$el as HTMLElement | null)
 const { isStuck: isLabelBarStuck } = useStickyObserver(fileUploadEl)
 
-async function handleEditorClose() {
-	await ui.handleEditorClose()
-}
+const panelRoot = ref<HTMLElement | null>(null)
+const navbarWrapper = ref<HTMLElement | null>(null)
+const { height: navbarHeight } = useElementSize(navbarWrapper, undefined, { box: 'border-box' })
 
-const hasUnsavedChanges = computed(() => fileEditorRef.value?.hasUnsavedChanges ?? false)
-const isEditingImage = computed(() => fileEditorRef.value?.isEditingImage ?? false)
-const isFindOpen = computed(() => fileEditorRef.value?.isFindOpen ?? false)
-const saveFileContent = async (exit = false) => {
-	await fileEditorRef.value?.saveFileContent(exit)
-}
-const revertChanges = () => fileEditorRef.value?.revertChanges()
-const shareToMclogs = async () => {
-	await fileEditorRef.value?.shareToMclogs()
-}
-const toggleFind = () => fileEditorRef.value?.toggleFind()
-
-// Register this panel's editor API on the shared context so layout.vue and FileSideBar
-// (which can no longer hold a template ref to a dockview-hosted panel) can reach it.
-const fileEditorApi = {
-	hasUnsavedChanges,
-	isEditingImage,
-	isFindOpen,
-	saveFileContent,
-	revertChanges,
-	shareToMclogs,
-	toggleFind,
+/** Brings the navbar and file viewer to the top of the scroll area, unless they're already there. */
+function scrollPanelIntoView() {
+	const panel = panelRoot.value
+	if (!panel) return
+
+	const container = findScrollableAncestor(panel)
+	const containerTop = container instanceof Window ? 0 : container.getBoundingClientRect().top
+	const scrollMargin = parseFloat(getComputedStyle(panel).scrollMarginTop) || 0
+	if (Math.abs(panel.getBoundingClientRect().top - containerTop - scrollMargin) < 2) return
+
+	panel.scrollIntoView({ block: 'start', behavior: 'smooth' })
 }
 
-onMounted(() => {
-	ui.fileEditorApi.value = fileEditorApi
+const activeFileKey = computed(() =>
+	isFileActive.value
+		? `${ui.fileTabs.activeTabId.value}:${ui.fileTabs.activeLocation.value.path}`
+		: null,
+)
+
+watch(activeFileKey, (key) => {
+	if (key) nextTick(scrollPanelIntoView)
 })
 
-onUnmounted(() => {
-	if (ui.fileEditorApi.value === fileEditorApi) {
-		ui.fileEditorApi.value = null
+/**
+ * While a file is open, the scroll container snaps (by proximity) to the file viewer, so it is
+ * easy to bring the whole viewer into view without lining it up by hand.
+ */
+let snapContainer: HTMLElement | null = null
+let previousSnapType = ''
+
+function setViewerSnapping(enabled: boolean) {
+	if (enabled && !snapContainer && panelRoot.value) {
+		const container = findScrollableAncestor(panelRoot.value)
+		snapContainer = container instanceof Window ? document.documentElement : container
+		previousSnapType = snapContainer.style.scrollSnapType
+		snapContainer.style.scrollSnapType = 'y proximity'
+	} else if (!enabled && snapContainer) {
+		snapContainer.style.scrollSnapType = previousSnapType
+		snapContainer = null
 	}
+}
+
+watch(isFileActive, setViewerSnapping, { flush: 'post' })
+onMounted(() => {
+	setViewerSnapping(isFileActive.value)
+	if (isFileActive.value) nextTick(scrollPanelIntoView)
 })
+onBeforeUnmount(() => setViewerSnapping(false))
 </script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
index 5b706296565..a02b569a099 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
@@ -2,8 +2,28 @@
 	<FileActionBar  ref="baseRef" v-bind="{ ...$props, ...$attrs }">
 		<nav v-if="breadcrumbs != null"
 		 	:aria-label="formatMessage(messages.breadcrumbNavigation)"
-		 	class="m-0 -ml-2 min-w-0 flex-shrink p-0"
+		 	class="m-0 -ml-2 flex min-w-0 flex-shrink items-center p-0"
 		>
+			<div class="mr-1 flex shrink-0 items-center">
+				<IconButton
+					v-tooltip="formatMessage(messages.back)"
+					type="quiet"
+					:label="formatMessage(messages.back)"
+					:disabled="!canGoBack"
+					@click="$emit('back')"
+				>
+					<ChevronLeftIcon />
+				</IconButton>
+				<IconButton
+					v-tooltip="formatMessage(messages.forward)"
+					type="quiet"
+					:label="formatMessage(messages.forward)"
+					:disabled="!canGoForward"
+					@click="$emit('forward')"
+				>
+					<ChevronRightIcon />
+				</IconButton>
+			</div>
 			<ol
 				ref="breadcrumbOuter"
 				class="m-0 flex min-w-0 flex-shrink items-center overflow-hidden p-0"
@@ -68,7 +88,7 @@
 								:class="{
 												'!text-contrast': !isEditing && index === breadcrumbs.length - 1,
 											}"
-								@click="$emit('navigate', 0)"
+								@click="$emit('navigate', index)"
 							>
 								{{ segment || '' }}
 							</Button>
@@ -94,8 +114,8 @@
 
 import FileActionBar from "#ui/layouts/shared/files-tab/components/FileActionBar.vue";
 import type {Properties, EmitCallbacks} from "#ui/layouts/shared/files-tab/components/FileActionBar.vue";
-import {Button} from "#ui/components/base/buttons";
-import {ChevronRightIcon, HomeIcon} from "@modrinth/assets";
+import {Button, IconButton} from "#ui/components/base/buttons";
+import {ChevronLeftIcon, ChevronRightIcon, HomeIcon} from "@modrinth/assets";
 import {onBeforeUnmount, onMounted, ref, watch} from "vue";
 import {defineMessages, useVIntl} from "#ui/composables";
 
@@ -114,6 +134,14 @@ const messages = defineMessages({
 		id: 'files.navbar.home',
 		defaultMessage: 'Home',
 	},
+	back: {
+		id: 'files.navbar.back',
+		defaultMessage: 'Back',
+	},
+	forward: {
+		id: 'files.navbar.forward',
+		defaultMessage: 'Forward',
+	},
 })
 
 defineOptions({
@@ -132,6 +160,8 @@ const props = withDefaults(
 		breadcrumbs: string[]
 		isEditing: boolean
 		editingFileName?: string
+		canGoBack?: boolean
+		canGoForward?: boolean
 	} & Properties>(),
 	{
 		hasNav: true,
@@ -142,6 +172,8 @@ defineEmits<{
 	navigate: [index: number]
 	navigateHome?: []
 	prefetchHome?: []
+	back: []
+	forward: []
 } /*& EmitCallbacks*/>()
 
 const breadcrumbOuter = ref<HTMLElement | null>(null)
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
index ad332b34e80..bca50b42c18 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
@@ -8,10 +8,7 @@
 	>
 		<FileActionBar
 			:sidebar-open="ui.sidebarOpen.value"
-			:is-editing="ui.isEditing.value"
-			:editing-file-path="ctx.editingFile.value?.path"
-			:is-editing-image="ui.fileEditorApi.value?.isEditingImage.value ?? false"
-			:is-editor-find-open="ui.fileEditorApi.value?.isFindOpen.value ?? false"
+			:is-editing="false"
 			:search-query="ui.searchQuery.value"
 			:show-refresh-button="ui.showRefreshButton.value"
 			:show-install-from-url="ctx.showInstallFromUrl"
@@ -30,103 +27,41 @@
 			@find="() => ui.toggleFind()"
 			@toggle-sidebar="() => ui.setSidebarOpen(!ui.sidebarOpen.value)"
 		/>
-		<div :class="scrollFileEntries ? 'overflow-y-auto' : ''" :style="scrollFileEntries ? 'height: calc(100dvh - 92px - 32px)' : ''">
-			<div
-				v-if="filteredItems.length > 0"
-				class="relative h-fit"
-				:style="{ overflowAnchor: 'none'}"
-			>
-				<div>
-					<FileTableRow
-						v-for="(item, idx) in filteredItems"
-						:key="item.path"
-						:count="item.count"
-						:created="item.created"
-						:modified="item.modified"
-						:name="item.name"
-						:path="item.path"
-						:type="item.type"
-						:size="item.size"
-						:index="idx"
-						:is-last="idx === filteredItems.length - 1"
-						:selected="ui.selectedItems.value.has(item.path)"
-						:write-disabled="ui.isBusy.value || !!ctx.isReadOnly?.(item.path)"
-						:write-disabled-tooltip="ctx.isReadOnly?.(item.path) ? ctx.readOnlyReason?.value : ui.busyTooltip.value"
-						:show-details="false"
-						:selection-within-action-menu="true"
-						@extract="() => ui.handleExtractItem(item)"
-						@delete="() => ui.showDeleteModal(item)"
-						@rename="() => ui.showRenameModal(item)"
-						@download="() => ui.handleDownload(item)"
-						@zip="() => ui.handleZip(item)"
-						@move="() => ui.showMoveModal(item)"
-						@move-direct-to="ui.handleDirectMove"
-						@edit="() => ui.handleEditFile(item)"
-						@navigate="() => ui.handleNavigateToFolder(item)"
-						@hover="() => ui.handleItemHover(item)"
-						@contextmenu="ui.handleContextMenu"
-						@toggle-select="() => ui.toggleItemSelection(item.path)"
-					/>
-				</div>
-			</div>
-			<div
-				v-else-if="ui.items.value.length === 0 && !ctx.error.value"
-				class="flex h-full w-full items-center justify-center rounded-b-[20px] bg-surface-2 px-5 py-20"
-			>
-				<div class="flex flex-col items-center gap-4 text-center">
-					<FolderOpenIcon class="h-16 w-16 text-secondary" />
-					<h3 class="m-0 text-2xl font-bold text-contrast">
-						{{ formatMessage(messages.emptyFolderTitle) }}
-					</h3>
-					<p class="m-0 text-sm text-secondary">
-						{{ formatMessage(messages.emptyFolderDescription) }}
-					</p>
-				</div>
-			</div>
+		<div
+			:class="[
+				scrollFileEntries ? 'overflow-y-auto' : '',
+				fillHeight ? 'min-h-0 flex-1 overflow-y-auto overscroll-contain' : '',
+			]"
+			:style="scrollFileEntries ? 'height: calc(100dvh - 92px - 32px)' : ''"
+		>
+			<FileTree />
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { FolderOpenIcon } from '@modrinth/assets'
-import { computed } from 'vue'
-
-import { defineMessages, useVIntl } from '#ui/composables/index.ts'
 import { injectFileManager } from '#ui/layouts/index.ts'
 
 import { injectFileBrowserUI } from '../providers/file-browser-ui'
 import FileActionBar from './FileActionBar.vue'
-import FileTableRow from './FileTableRow.vue'
+import FileTree from './FileTree.vue'
 
 const ctx = injectFileManager()
 const ui = injectFileBrowserUI()
 
-const { formatMessage } = useVIntl()
-
-const messages = defineMessages({
-	emptyFolderTitle: {
-		id: 'files.layout.empty-folder-title',
-		defaultMessage: 'This folder is empty',
-	},
-	emptyFolderDescription: {
-		id: 'files.layout.empty-folder-description',
-		defaultMessage: 'There are no files or folders.',
-	},
-})
-
-const filteredItems = computed(() => ui.filteredItems.value)
-
 withDefaults(
 	defineProps<{
 		constrainWidth?: boolean
 		scrollFileEntries?: boolean,
 		addBorder?: boolean
+		/** Fill the parent's height and scroll the entries within it, keeping the action bar pinned. */
+		fillHeight?: boolean
 	}>(),
 	{
 		constrainWidth: false,
 		scrollFileEntries: false,
 		addBorder: true,
+		fillHeight: false,
 	}
 )
-
 </script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue
index 938bbd30646..7866bd65e1f 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue
@@ -1,38 +1,65 @@
 <template>
-	<Tooltip :disabled="containerWidth != null ? (containerWidth > 900 ? showDetails : false) : showDetails" :allow-hover="true">
+	<Tooltip :disabled="detailsTooltipDisabled" :allow-hover="true">
 		<li
 			role="option"
-			:class="[containerClasses, isDragSource ? 'opacity-50' : '']"
+			:class="[containerClasses, isDragSource ? 'opacity-50' : '', compact ? 'h-9' : 'h-[52.8px]']"
+			:style="depth != null ? { paddingLeft: `${0.5 + depth}rem` } : undefined"
 			tabindex="0"
 			:data-file-path="path"
 			:data-file-type="type"
+			:aria-expanded="isTreeRow && type === 'directory' ? expanded : undefined"
+			:aria-current="active ? 'location' : undefined"
 			@click="selectItem"
+			@auxclick="handleAuxClick"
 			@contextmenu="openContextMenu"
-			@keydown="(e) => e.key === 'Enter' && selectItem()"
+			@keydown="handleKeydown"
 			@mouseenter="handleMouseEnter"
 			@mouseleave="handleMouseLeave"
 			@pointerdown="handlePointerDown"
-			class="h-[52.8px]"
 		>
-			<div class="pointer-events-none flex flex-1 items-center gap-3 truncate">
+			<span
+				v-for="level in depth ?? 0"
+				:key="level"
+				aria-hidden="true"
+				class="pointer-events-none absolute inset-y-0 w-px"
+				:class="level === activeGuideLevel ? 'bg-brand' : 'bg-surface-5'"
+				:style="{ left: `${level + 0.125}rem` }"
+			/>
+			<div class="pointer-events-none flex flex-1 items-center truncate" :class="compact ? 'gap-2' : 'gap-3'">
+				<button
+					v-if="isTreeRow && type === 'directory'"
+					type="button"
+					tabindex="-1"
+					class="pointer-events-auto -mr-1 flex size-5 shrink-0 items-center justify-center rounded border-none bg-transparent p-0 text-secondary hover:bg-surface-5 hover:text-contrast"
+					:aria-label="formatMessage(expanded ? messages.collapseFolder : messages.expandFolder)"
+					@click.stop="emit('toggle-expand')"
+					@pointerdown.stop
+				>
+					<ChevronRightIcon class="size-4 transition-transform duration-100" :class="{ 'rotate-90': expanded }" />
+				</button>
+				<span v-else-if="isTreeRow" class="-mr-1 size-5 shrink-0" aria-hidden="true" />
 				<Checkbox v-if="!selectionWithinActionMenu"
 					class="pointer-events-auto"
 					:model-value="selected"
 					@click.stop
 					@update:model-value="emit('toggle-select')"
 				/>
-				<div class="pointer-events-none flex size-5 items-center justify-center">
+				<div class="pointer-events-none flex size-5 shrink-0 items-center justify-center">
 					<component
 						:is="iconComponent"
-						class="size-5 group-hover:text-contrast group-focus:text-contrast"
+						class="group-hover:text-contrast group-focus:text-contrast"
+						:class="compact ? 'size-4' : 'size-5'"
 					/>
 				</div>
 				<div class="pointer-events-none flex flex-col truncate">
-					<span class="pointer-events-none truncate group-hover:text-contrast group-focus:text-contrast">
+					<span
+						class="pointer-events-none truncate group-hover:text-contrast group-focus:text-contrast"
+						:class="{ 'text-sm': compact, 'font-semibold text-contrast': active }"
+					>
 						{{ name }}
 					</span>
 				</div>
-				<EditIcon v-if="hoveringToEdit && isEditableFile" />
+				<EditIcon v-if="hoveringToEdit && isEditableFile && !compact" />
 			</div>
 			<div class="pointer-events-auto flex w-fit flex-shrink-0 items-center gap-4 @[900px]:gap-12">
 				<span v-if="showDetails" class="hidden w-[100px] text-nowrap text-sm text-secondary @[900px]:block">
@@ -101,6 +128,7 @@
 import {
 	BoxIcon,
 	BracesIcon,
+	ChevronRightIcon,
 	ClipboardCopyIcon,
 	DownloadIcon,
 	EditIcon,
@@ -112,6 +140,7 @@ import {
 	MoreHorizontalIcon,
 	PackageOpenIcon,
 	PaintbrushIcon,
+	PlusIcon,
 	RightArrowIcon,
 	TrashIcon,
 } from '@modrinth/assets'
@@ -135,6 +164,7 @@ import {
 	startFileDrag,
 	wasRecentDrag,
 } from '../composables/file-drag-state'
+import { useShiftKey } from '../composables/shift-key'
 import { injectFileManager } from '../providers/file-manager'
 import type { FileItem } from '../types'
 import { joinDisplayPath } from '../utils'
@@ -165,6 +195,18 @@ const messages = defineMessages({
 		id: 'files.table-header.modified',
 		defaultMessage: 'Modified',
 	},
+	openInNewTab: {
+		id: 'files.row.open-in-new-tab',
+		defaultMessage: 'Open in new tab',
+	},
+	expandFolder: {
+		id: 'files.row.expand-folder',
+		defaultMessage: 'Expand folder',
+	},
+	collapseFolder: {
+		id: 'files.row.collapse-folder',
+		defaultMessage: 'Collapse folder',
+	},
 })
 
 const props = defineProps<
@@ -177,6 +219,16 @@ const props = defineProps<
 		showDetails: boolean
 		containerWidth?: number | undefined
 		selectionWithinActionMenu?: boolean
+		/** Smaller row, used by the sidebar tree. */
+		compact?: boolean
+		/** Nesting level in the sidebar tree; indents the row. */
+		depth?: number
+		/** Whether this tree row's directory is expanded. Leave undefined for non-tree rows. */
+		expanded?: boolean
+		/** Highlights the row as the active tab's current location. */
+		active?: boolean
+		/** Tree guide level (1-based) to highlight, marking the directory the active location is in. */
+		activeGuideLevel?: number
 	}
 >()
 
@@ -191,7 +243,8 @@ const emit = defineEmits<{
 			| 'edit'
 			| 'extract'
 			| 'hover'
-			| 'navigate',
+			| 'navigate'
+			| 'open-in-new-tab',
 		item: Pick<FileItem, 'name' | 'type' | 'path'>,
 	): void
 	(
@@ -200,8 +253,21 @@ const emit = defineEmits<{
 	): void
 	(e: 'contextmenu', event: MouseEvent, options: ButtonMenuOption[]): void
 	(e: 'toggle-select'): void
+	(e: 'toggle-expand'): void
 }>()
 
+const isTreeRow = computed(() => props.expanded !== undefined)
+
+const shiftHeld = useShiftKey()
+
+/** Compact rows only show details while Shift is held; full rows show them when the columns are hidden. */
+const detailsTooltipDisabled = computed(() => {
+	if (props.compact) return !shiftHeld.value
+	if (props.containerWidth != null) return props.containerWidth > 900 ? props.showDetails : false
+	return props.showDetails
+})
+const canOpenInTab = computed(() => props.type === 'directory' || isEditableFile.value)
+
 const isDropTarget = computed(
 	() => fileDragActive.value && fileDragTarget.value === props.path && props.type === 'directory',
 )
@@ -220,14 +286,19 @@ const formatBytes = useFormatBytes()
 const containerClasses = computed(() => {
 	const dropTarget = isDropTarget.value
 	return [
-		'group m-0 flex w-full select-none items-center justify-between overflow-hidden border-0 border-t border-solid border-surface-4 pl-3 pr-3 py-2 focus:!outline-none',
+		'group relative m-0 flex w-full select-none items-center justify-between overflow-hidden border-0 border-solid border-surface-4 pl-3 focus:!outline-none',
+		props.compact ? 'rounded-lg py-1 pr-1' : 'border-t py-2 pr-3',
 		dropTarget
 			? '!bg-brand-highlight'
-			: props.selected
-				? 'bg-surface-2.5'
-				: props.index % 2 === 0
-					? 'bg-surface-2'
-					: 'bg-surface-1.5',
+			: props.active
+				? 'bg-brand-highlight'
+				: props.selected
+					? 'bg-surface-2.5'
+					: props.compact
+						? 'bg-transparent'
+						: props.index % 2 === 0
+							? 'bg-surface-2'
+							: 'bg-surface-1.5',
 		props.isLast ? '' : '',
 		isEditableFile.value || props.type === 'directory' ? 'cursor-pointer hover:bg-surface-2.5' : '',
 		'transition-colors duration-100 focus:!outline-none',
@@ -256,6 +327,13 @@ const menuOptions = computed<ButtonMenuOption[]>(() => {
 			},
 			shown: props.selectionWithinActionMenu,
 		},
+		{
+			id: 'open-in-new-tab',
+			label: formatMessage(messages.openInNewTab),
+			icon: PlusIcon,
+			shown: canOpenInTab.value,
+			action: () => emit('open-in-new-tab', item),
+		},
 		{
 			id: 'copy-filename',
 			label: formatMessage(commonMessages.copyFilenameButton),
@@ -396,8 +474,13 @@ function handleMouseLeave() {
 
 const isNavigating = ref(false)
 
-function selectItem() {
-	if (isNavigating.value || wasRecentDrag()) return
+function selectItem(event?: MouseEvent) {
+	if (wasRecentDrag()) return
+	if (event?.ctrlKey || event?.metaKey) {
+		emit('toggle-select')
+		return
+	}
+	if (isNavigating.value) return
 	isNavigating.value = true
 
 	const item = { name: props.name, type: props.type, path: props.path }
@@ -412,6 +495,21 @@ function selectItem() {
 	}, 500)
 }
 
+function handleAuxClick(event: MouseEvent) {
+	if (event.button !== 1 || !canOpenInTab.value) return
+	event.preventDefault()
+	emit('open-in-new-tab', { name: props.name, type: props.type, path: props.path })
+}
+
+function handleKeydown(event: KeyboardEvent) {
+	if (event.key === 'Enter') {
+		selectItem()
+	} else if (isTreeRow.value && props.type === 'directory') {
+		if (event.key === 'ArrowRight' && !props.expanded) emit('toggle-expand')
+		if (event.key === 'ArrowLeft' && props.expanded) emit('toggle-expand')
+	}
+}
+
 function handlePointerDown(e: PointerEvent) {
 	if (e.button !== 0) return
 	startFileDrag(
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
new file mode 100644
index 00000000000..7cd049b3d2f
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
@@ -0,0 +1,187 @@
+<template>
+	<div class="flex flex-col gap-0.5" :aria-label="formatMessage(messages.fileTree)">
+		<template v-for="row in rows" :key="row.key">
+			<div
+				v-if="row.kind === 'loading'"
+				class="flex h-9 items-center gap-2 text-sm text-secondary"
+				:style="{ paddingLeft: `${2 + row.depth}rem` }"
+			>
+				<SpinnerIcon class="size-4 animate-spin" />
+				{{ formatMessage(messages.loading) }}
+			</div>
+			<div
+				v-else-if="row.kind === 'empty'"
+				class="flex h-9 items-center text-sm italic text-secondary"
+				:style="{ paddingLeft: `${2 + row.depth}rem` }"
+			>
+				{{ formatMessage(row.depth === 0 ? messages.emptyFolder : messages.emptySubfolder) }}
+			</div>
+			<FileTableRow
+				v-else
+				:count="row.item.count"
+				:created="row.item.created"
+				:modified="row.item.modified"
+				:name="row.item.name"
+				:path="row.item.path"
+				:type="row.item.type"
+				:size="row.item.size"
+				:index="0"
+				:is-last="false"
+				:selected="ui.selectedItems.value.has(row.item.path)"
+				:write-disabled="ui.isBusy.value || !!ctx.isReadOnly?.(row.item.path)"
+				:write-disabled-tooltip="
+					ctx.isReadOnly?.(row.item.path) ? ctx.readOnlyReason?.value : ui.busyTooltip.value
+				"
+				:show-details="false"
+				:selection-within-action-menu="true"
+				compact
+				:depth="row.depth"
+				:expanded="row.expanded"
+				:active="row.path === activePath"
+				:active-guide-level="activeGuideLevel(row.path)"
+				@extract="() => ui.handleExtractItem(row.item)"
+				@delete="() => ui.showDeleteModal(row.item)"
+				@rename="() => ui.showRenameModal(row.item)"
+				@download="() => ui.handleDownload(row.item)"
+				@zip="() => ui.handleZip(row.item)"
+				@move="() => ui.showMoveModal(row.item)"
+				@move-direct-to="ui.handleDirectMove"
+				@edit="() => ui.handleEditFile(row.item)"
+				@navigate="() => openDirectory(row.path, row.item)"
+				@open-in-new-tab="() => ui.handleOpenInNewTab(row.item)"
+				@toggle-expand="() => toggleExpanded(row.path)"
+				@hover="() => prefetch(row)"
+				@contextmenu="ui.handleContextMenu"
+				@toggle-select="() => ui.toggleItemSelection(row.item)"
+			/>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { SpinnerIcon } from '@modrinth/assets'
+import { computed, watch } from 'vue'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { canOpenInFileEditor } from '#ui/utils/file-extensions'
+
+import { directoryOf, normalizeFilePath } from '../composables/file-tabs'
+import { injectFileBrowserUI } from '../providers/file-browser-ui'
+import { injectFileManager } from '../providers/file-manager'
+import type { FileItem } from '../types'
+import FileTableRow from './FileTableRow.vue'
+
+type TreeRow =
+	| { kind: 'item'; key: string; item: FileItem; path: string; depth: number; expanded: boolean }
+	| { kind: 'loading' | 'empty'; key: string; depth: number }
+
+const ROOT_PATH = '/'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	fileTree: {
+		id: 'files.tree.label',
+		defaultMessage: 'File tree',
+	},
+	loading: {
+		id: 'files.tree.loading',
+		defaultMessage: 'Loading...',
+	},
+	emptyFolder: {
+		id: 'files.tree.empty-folder',
+		defaultMessage: 'This folder is empty',
+	},
+	emptySubfolder: {
+		id: 'files.tree.empty-subfolder',
+		defaultMessage: 'Empty',
+	},
+})
+
+const ctx = injectFileManager()
+const ui = injectFileBrowserUI()
+const tree = ctx.directoryTree
+
+const activePath = computed(() => ui.fileTabs.activeLocation.value.path)
+const activeDirectory = computed(() => directoryOf(ui.fileTabs.activeLocation.value))
+const activeDirectoryDepth = computed(
+	() => activeDirectory.value.split('/').filter(Boolean).length,
+)
+
+function activeGuideLevel(path: string) {
+	if (activeDirectoryDepth.value === 0) return undefined
+	return path.startsWith(`${activeDirectory.value}/`) ? activeDirectoryDepth.value : undefined
+}
+const expandedPaths = computed(() => new Set(tree.expandedEntries.value))
+const query = computed(() => ui.searchQuery.value.trim().toLowerCase())
+
+function compareEntries(a: FileItem, b: FileItem) {
+	if (a.type !== b.type) return a.type === 'directory' ? -1 : 1
+	return a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' })
+}
+
+function collectRows(path: string, depth: number): TreeRow[] {
+	const entries = tree.get(path)
+	const items = entries.items.value
+
+	if (items.length === 0) {
+		if (entries.isLoading.value) return [{ kind: 'loading', key: `loading:${path}`, depth }]
+		return query.value ? [] : [{ kind: 'empty', key: `empty:${path}`, depth }]
+	}
+
+	const rows: TreeRow[] = []
+	for (const item of [...items].sort(compareEntries)) {
+		const itemPath = normalizeFilePath(item.path)
+		const expanded = item.type === 'directory' && expandedPaths.value.has(itemPath)
+		const children = expanded ? collectRows(itemPath, depth + 1) : []
+
+		if (query.value) {
+			const matches = item.name.toLowerCase().includes(query.value)
+			const hasMatchingChild = children.some((child) => child.kind === 'item')
+			if (!matches && !hasMatchingChild) continue
+		}
+
+		rows.push({ kind: 'item', key: itemPath, item, path: itemPath, depth, expanded }, ...children)
+	}
+	return rows
+}
+
+const rows = computed(() => collectRows(ROOT_PATH, 0))
+
+function setExpanded(path: string, expanded: boolean) {
+	const current = tree.expandedEntries.value
+	if (expanded === current.includes(path)) return
+	tree.expandedEntries.value = expanded
+		? [...current, path]
+		: current.filter((entry) => entry !== path)
+}
+
+function toggleExpanded(path: string) {
+	setExpanded(path, !expandedPaths.value.has(path))
+}
+
+function openDirectory(path: string, item: FileItem) {
+	setExpanded(path, true)
+	ui.handleNavigateToFolder(item)
+}
+
+function prefetch(row: Extract<TreeRow, { kind: 'item' }>) {
+	if (row.item.type === 'directory') {
+		tree.prefetch(row.path)
+	} else if (canOpenInFileEditor(row.item.name)) {
+		ctx.prefetchFile?.(row.item.path)
+	}
+}
+
+watch(
+	() => directoryOf(ui.fileTabs.activeLocation.value),
+	(directory) => {
+		const segments = directory.split('/').filter(Boolean)
+		const missing = segments
+			.map((_, index) => `/${segments.slice(0, index + 1).join('/')}`)
+			.filter((path) => !expandedPaths.value.has(path))
+		if (missing.length > 0) tree.expandedEntries.value = [...tree.expandedEntries.value, ...missing]
+	},
+	{ immediate: true },
+)
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
index 701d251e730..c0da22283ea 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
@@ -2,6 +2,7 @@
 	<div
 		ref="editorContainer"
 		class="relative flex flex-col overflow-hidden"
+		:class="{ 'h-full': props.fillHeight }"
 	>
 		<EditorFindReplace
 			ref="findReplaceRef"
@@ -25,15 +26,21 @@
 			theme="modrinth"
 			:readonly="isEditorReadOnly"
 			:print-margin="false"
-			:style="{ height: editorHeight, fontSize: '0.875rem' }"
-			class="ace-modrinth rounded-[20px]"
+			:style="{ height: props.fillHeight ? undefined : editorHeight, fontSize: '0.875rem' }"
+			class="ace-modrinth"
+			:class="props.fillHeight ? 'min-h-0 flex-1' : 'rounded-[20px]'"
 			@init="onEditorInit"
 		/>
-		<FileImageViewer v-else-if="isEditingImage && imagePreview" :image-blob="imagePreview" />
+		<FileImageViewer
+			v-else-if="isEditingImage && imagePreview"
+			:image-blob="imagePreview"
+			:class="{ '!h-full !rounded-none': props.fillHeight }"
+		/>
 		<div
 			v-else-if="isLoading || !props.editorComponent"
-			class="flex items-center justify-center rounded-[20px] bg-bg-raised"
-			:style="{ height: editorHeight }"
+			class="flex items-center justify-center bg-bg-raised"
+			:class="props.fillHeight ? 'min-h-0 flex-1' : 'rounded-[20px]'"
+			:style="{ height: props.fillHeight ? undefined : editorHeight }"
 		>
 			<SpinnerIcon class="h-8 w-8 animate-spin text-secondary" />
 		</div>
@@ -58,6 +65,8 @@ import FileImageViewer from './FileImageViewer.vue'
 const props = defineProps<{
 	file: EditingFile | null
 	editorComponent: Component | null
+	/** Fill the parent's height (e.g. a dockview panel) instead of sizing to the window. */
+	fillHeight?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -130,6 +139,7 @@ const findReplaceRef = ref<{ focusFindInput: () => void; openReplace: () => void
 watch(inFileFindQuery, handleFindInput)
 
 function updateEditorHeight() {
+	if (props.fillHeight) return
 	if (editorContainer.value) {
 		const top = editorContainer.value.getBoundingClientRect().top
 		const padding = 24
@@ -171,7 +181,7 @@ watch(
 async function loadFileContent(file: { name: string; path: string }) {
 	isLoading.value = true
 	try {
-		window.scrollTo(0, 0)
+		if (!props.fillHeight) window.scrollTo(0, 0)
 		const extension = getFileExtension(file.name)
 		const normalizedPath = file.path.startsWith('/') ? file.path : `/${file.path}`
 
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTab.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTab.vue
new file mode 100644
index 00000000000..263b3cb4c4f
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTab.vue
@@ -0,0 +1,90 @@
+<template>
+	<div
+		class="group flex h-full max-w-[16rem] items-center gap-1.5 pl-3 text-sm"
+		:class="canClose ? 'pr-1' : 'pr-3'"
+		:title="location?.path"
+		@auxclick.prevent="(event) => event.button === 1 && close()"
+	>
+		<component :is="icon" class="size-4 shrink-0 text-secondary" />
+		<span class="truncate" :class="isActive ? 'font-semibold text-contrast' : 'text-secondary'">
+			{{ label }}
+		</span>
+		<button
+			v-if="canClose"
+			type="button"
+			class="relative flex size-6 shrink-0 items-center justify-center rounded-md border-none bg-transparent p-0 text-secondary hover:bg-surface-5 hover:text-contrast focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand"
+			:aria-label="formatMessage(messages.closeTab, { name: label })"
+			@pointerdown.stop
+			@mousedown.stop
+			@click.stop="close"
+		>
+			<span
+				v-if="isDirty"
+				v-tooltip="formatMessage(messages.unsavedChanges)"
+				class="size-2 rounded-full bg-brand group-hover:hidden"
+			/>
+			<XIcon class="size-4" :class="{ 'hidden group-hover:block': isDirty }" />
+		</button>
+		<span
+			v-else-if="isDirty"
+			v-tooltip="formatMessage(messages.unsavedChanges)"
+			class="size-2 shrink-0 rounded-full bg-brand"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { FileIcon, FolderOpenIcon, XIcon } from '@modrinth/assets'
+import type { DockviewPanelApi } from 'dockview-vue'
+import { computed } from 'vue'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import { currentLocation, type FileTabPanelParams } from '../../composables/file-tabs'
+import { injectFileBrowserUI } from '../../providers/file-browser-ui'
+
+const props = defineProps<{
+	params: {
+		params: FileTabPanelParams
+		api: DockviewPanelApi
+	}
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	closeTab: {
+		id: 'files.tabs.close-tab',
+		defaultMessage: 'Close {name}',
+	},
+	unsavedChanges: {
+		id: 'files.tabs.unsaved-changes',
+		defaultMessage: 'Unsaved changes',
+	},
+	home: {
+		id: 'files.tabs.home',
+		defaultMessage: 'Home',
+	},
+})
+
+const ui = injectFileBrowserUI()
+
+const tabId = props.params.params.tabId
+const location = computed(() => {
+	const tab = ui.fileTabs.getTab(tabId)
+	return tab ? currentLocation(tab) : null
+})
+
+const label = computed(() => {
+	const path = location.value?.path ?? '/'
+	return path.split('/').filter(Boolean).pop() ?? formatMessage(messages.home)
+})
+const icon = computed(() => (location.value?.kind === 'file' ? FileIcon : FolderOpenIcon))
+const isActive = computed(() => ui.fileTabs.activeTabId.value === tabId)
+const canClose = computed(() => ui.fileTabs.tabs.value.length > 1)
+const isDirty = computed(() => ui.fileTabs.editors.get(tabId)?.hasUnsavedChanges.value ?? false)
+
+function close() {
+	ui.fileTabs.closeTab(tabId)
+}
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabPanel.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabPanel.vue
new file mode 100644
index 00000000000..9dd935b54e3
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabPanel.vue
@@ -0,0 +1,54 @@
+<template>
+	<FileEditor
+		v-if="location?.kind === 'file'"
+		:key="location.path"
+		ref="fileEditorRef"
+		:file="location"
+		:editor-component="ui.editorComponent.value"
+		fill-height
+		@close="() => ui.fileTabs.closeFile(tabId)"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { DockviewPanelApi } from 'dockview-vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+import { currentLocation, type FileTabPanelParams } from '../../composables/file-tabs'
+import { type FileEditorBridge, injectFileBrowserUI } from '../../providers/file-browser-ui'
+import FileEditor from '../editor/FileEditor.vue'
+
+const props = defineProps<{
+	params: {
+		params: FileTabPanelParams
+		api: DockviewPanelApi
+	}
+}>()
+
+const ui = injectFileBrowserUI()
+
+const tabId = props.params.params.tabId
+const location = computed(() => {
+	const tab = ui.fileTabs.getTab(tabId)
+	return tab ? currentLocation(tab) : null
+})
+
+const fileEditorRef = ref<InstanceType<typeof FileEditor>>()
+
+const bridge: FileEditorBridge = {
+	hasUnsavedChanges: computed(() => fileEditorRef.value?.hasUnsavedChanges ?? false),
+	isEditingImage: computed(() => fileEditorRef.value?.isEditingImage ?? false),
+	isFindOpen: computed(() => fileEditorRef.value?.isFindOpen ?? false),
+	saveFileContent: async (exit = false) => {
+		await fileEditorRef.value?.saveFileContent(exit)
+	},
+	revertChanges: () => fileEditorRef.value?.revertChanges(),
+	shareToMclogs: async () => {
+		await fileEditorRef.value?.shareToMclogs()
+	},
+	toggleFind: () => fileEditorRef.value?.toggleFind(),
+}
+
+onMounted(() => ui.fileTabs.registerEditor(tabId, bridge))
+onUnmounted(() => ui.fileTabs.unregisterEditor(tabId, bridge))
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue
new file mode 100644
index 00000000000..52734c69b50
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue
@@ -0,0 +1,64 @@
+<template>
+	<div class="dockview-theme-dark h-full w-full">
+		<DockviewVue
+			class="h-full w-full"
+			:theme="theme"
+			:components="components"
+			:tab-components="tabComponents"
+			:right-header-actions-component="FileTabsActions"
+			default-renderer="always"
+			disable-floating-groups
+			@ready="ui.fileTabs.onReady"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import 'dockview-vue/dist/styles/dockview.css'
+
+import { type DockviewTheme, DockviewVue } from 'dockview-vue'
+import { onBeforeUnmount } from 'vue'
+
+import { FILE_TAB_COMPONENT, FILE_TAB_PANEL_COMPONENT } from '../../composables/file-tabs'
+import { injectFileBrowserUI } from '../../providers/file-browser-ui'
+import FileTab from './FileTab.vue'
+import FileTabPanel from './FileTabPanel.vue'
+import FileTabsActions from './FileTabsActions.vue'
+
+const ui = injectFileBrowserUI()
+
+const theme: DockviewTheme = {
+	name: 'modrinth',
+	className: 'dockview-theme-modrinth',
+	dndTabIndicator: 'line',
+}
+
+const components = { [FILE_TAB_PANEL_COMPONENT]: FileTabPanel }
+const tabComponents = { [FILE_TAB_COMPONENT]: FileTab }
+
+onBeforeUnmount(() => ui.fileTabs.onDispose())
+</script>
+
+<style>
+.dockview-theme-modrinth {
+	--dv-group-view-background-color: var(--surface-2);
+	--dv-tabs-and-actions-container-background-color: var(--surface-3);
+	--dv-tabs-and-actions-container-height: 2.5rem;
+	--dv-tabs-and-actions-container-font-size: 0.875rem;
+	--dv-activegroup-visiblepanel-tab-background-color: var(--surface-2);
+	--dv-activegroup-hiddenpanel-tab-background-color: var(--surface-3);
+	--dv-inactivegroup-visiblepanel-tab-background-color: var(--surface-2);
+	--dv-inactivegroup-hiddenpanel-tab-background-color: var(--surface-3);
+	--dv-activegroup-visiblepanel-tab-color: var(--color-contrast);
+	--dv-activegroup-hiddenpanel-tab-color: var(--color-text-default);
+	--dv-inactivegroup-visiblepanel-tab-color: var(--color-text-default);
+	--dv-inactivegroup-hiddenpanel-tab-color: var(--color-text-tertiary);
+	--dv-tab-divider-color: var(--surface-5);
+	--dv-separator-border: var(--surface-5);
+	--dv-paneview-header-border-color: var(--surface-5);
+	--dv-icon-hover-background-color: var(--surface-5);
+	--dv-drag-over-background-color: var(--color-brand-highlight);
+	--dv-active-sash-color: var(--color-brand);
+	--dv-tabs-container-scrollbar-color: var(--surface-5);
+}
+</style>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabsActions.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabsActions.vue
new file mode 100644
index 00000000000..78a5137174c
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabsActions.vue
@@ -0,0 +1,40 @@
+<template>
+	<div class="flex h-full items-center px-1">
+		<button
+			v-tooltip="formatMessage(messages.newTab)"
+			type="button"
+			class="flex size-7 items-center justify-center rounded-md border-none bg-transparent p-0 text-secondary hover:bg-surface-5 hover:text-contrast focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand"
+			:aria-label="formatMessage(messages.newTab)"
+			@click="openNewTab"
+		>
+			<PlusIcon class="size-4" />
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { PlusIcon } from '@modrinth/assets'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import { injectFileBrowserUI } from '../../providers/file-browser-ui'
+
+defineProps<{
+	params?: unknown
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	newTab: {
+		id: 'files.tabs.new-tab',
+		defaultMessage: 'New tab',
+	},
+})
+
+const ui = injectFileBrowserUI()
+
+function openNewTab() {
+	ui.fileTabs.openTab({ kind: 'directory', path: '/' })
+}
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-selection.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-selection.ts
index 702c6ca6157..419eaff64dd 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-selection.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-selection.ts
@@ -3,41 +3,55 @@ import { computed, ref } from 'vue'
 
 import type { FileItem } from '../types'
 
+/**
+ * Selection of file entries, keyed by path. Entries can come from any directory (e.g. the sidebar
+ * tree), so the items themselves are kept rather than looked up in the current listing.
+ * `allSelected` / `someSelected` / `toggleSelectAll` refer to the given listing `items`.
+ */
 export function useFileSelection(items: Ref<FileItem[]>) {
-	const selectedItems = ref<Set<string>>(new Set())
+	const selectedItems = ref(new Map<string, FileItem>())
 
-	function toggleItemSelection(path: string) {
-		const newSet = new Set(selectedItems.value)
-		if (newSet.has(path)) {
-			newSet.delete(path)
+	function toggleItemSelection(item: FileItem) {
+		const next = new Map(selectedItems.value)
+		if (next.has(item.path)) {
+			next.delete(item.path)
 		} else {
-			newSet.add(path)
+			next.set(item.path, item)
 		}
-		selectedItems.value = newSet
+		selectedItems.value = next
 	}
 
 	function selectAll() {
-		selectedItems.value = new Set(items.value.map((i) => i.path))
+		const next = new Map(selectedItems.value)
+		for (const item of items.value) next.set(item.path, item)
+		selectedItems.value = next
 	}
 
 	function deselectAll() {
-		selectedItems.value = new Set()
+		selectedItems.value = new Map()
+	}
+
+	function deselectListed() {
+		const next = new Map(selectedItems.value)
+		for (const item of items.value) next.delete(item.path)
+		selectedItems.value = next
 	}
 
 	function toggleSelectAll() {
 		if (allSelected.value) {
-			deselectAll()
+			deselectListed()
 		} else {
 			selectAll()
 		}
 	}
 
 	const allSelected = computed(
-		() => items.value.length > 0 && selectedItems.value.size === items.value.length,
+		() =>
+			items.value.length > 0 && items.value.every((item) => selectedItems.value.has(item.path)),
 	)
 
 	const someSelected = computed(
-		() => selectedItems.value.size > 0 && selectedItems.value.size < items.value.length,
+		() => !allSelected.value && items.value.some((item) => selectedItems.value.has(item.path)),
 	)
 
 	return {
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
new file mode 100644
index 00000000000..ec10a49233b
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
@@ -0,0 +1,308 @@
+import type { DockviewApi, DockviewReadyEvent, IDisposable } from 'dockview-vue'
+import type { ComputedRef, Ref } from 'vue'
+import { computed, ref, shallowReactive, shallowRef, watch } from 'vue'
+
+import type { FileEditorBridge } from '../providers/file-browser-ui'
+import type { FileManagerContext } from '../providers/file-manager'
+
+export const FILE_TAB_PANEL_COMPONENT = 'fileTabPanel'
+export const FILE_TAB_COMPONENT = 'fileTab'
+
+const MAX_HISTORY_LENGTH = 50
+const PENDING_LOCATION_TIMEOUT = 1000
+
+/** Where a tab currently is. Paths are absolute and normalized (`/`, `/config/file.toml`). */
+export type FileLocation =
+	| { kind: 'directory'; path: string }
+	| { kind: 'file'; path: string; name: string }
+
+/** A browser-like tab: its own history of visited directories and files. */
+export interface FileTab {
+	id: string
+	history: FileLocation[]
+	index: number
+}
+
+export interface FileTabPanelParams {
+	tabId: string
+}
+
+export function normalizeFilePath(path: string) {
+	return `/${path.split('/').filter(Boolean).join('/')}`
+}
+
+export function parentDirectory(path: string) {
+	const segments = path.split('/').filter(Boolean)
+	segments.pop()
+	return `/${segments.join('/')}`
+}
+
+export function directoryOf(location: FileLocation) {
+	return location.kind === 'file' ? parentDirectory(location.path) : location.path
+}
+
+export function currentLocation(tab: FileTab) {
+	return tab.history[tab.index]
+}
+
+export function isSameLocation(a: FileLocation, b: FileLocation) {
+	return a.kind === b.kind && a.path === b.path
+}
+
+export interface FileTabsOptions {
+	ctx: Pick<FileManagerContext, 'currentPath' | 'editingFile' | 'navigateTo' | 'startEditing'>
+	/**
+	 * Asks the user what to do with the given editors' unsaved changes.
+	 * Resolves `true` when it is safe to discard the editors.
+	 */
+	confirmDiscard: (editors: FileEditorBridge[]) => Promise<boolean>
+}
+
+export interface FileTabs {
+	tabs: Ref<FileTab[]>
+	activeTabId: Ref<string>
+	activeTab: ComputedRef<FileTab>
+	activeLocation: ComputedRef<FileLocation>
+	canGoBack: ComputedRef<boolean>
+	canGoForward: ComputedRef<boolean>
+	editors: Map<string, FileEditorBridge>
+	activeEditor: ComputedRef<FileEditorBridge | null>
+	hasUnsavedChanges: ComputedRef<boolean>
+	getTab: (id: string) => FileTab | undefined
+	navigate: (location: FileLocation) => Promise<void>
+	back: () => Promise<void>
+	forward: () => Promise<void>
+	openTab: (location: FileLocation) => void
+	activateTab: (id: string) => void
+	closeTab: (id: string) => Promise<void>
+	closeFile: (tabId: string) => void
+	registerEditor: (tabId: string, bridge: FileEditorBridge) => void
+	unregisterEditor: (tabId: string, bridge: FileEditorBridge) => void
+	onReady: (event: DockviewReadyEvent) => void
+	onDispose: () => void
+}
+
+/**
+ * Browser-like file tabs. Each tab keeps its own history of directories and files, and the
+ * active tab's current location is mirrored into the file manager context (`currentPath` /
+ * `editingFile`), so the listing, editor and host URL keep working off the context. Any
+ * navigation that reaches the context from elsewhere (e.g. the browser's back button) is
+ * recorded into the active tab's history.
+ *
+ * The tabs are rendered by dockview, one panel per tab, which also keeps each tab's open
+ * editor alive while other tabs are browsed.
+ */
+export function useFileTabs(options: FileTabsOptions): FileTabs {
+	const { ctx } = options
+
+	const contextLocation = computed<FileLocation>(() => {
+		const file = ctx.editingFile.value
+		if (file) return { kind: 'file', path: normalizeFilePath(file.path), name: file.name }
+		return { kind: 'directory', path: normalizeFilePath(ctx.currentPath.value) }
+	})
+
+	let nextTabId = 0
+	function createTab(location: FileLocation): FileTab {
+		return { id: `file-tab-${nextTabId++}`, history: [location], index: 0 }
+	}
+
+	const initialTab = createTab(contextLocation.value)
+	const tabs = ref<FileTab[]>([initialTab])
+	const activeTabId = ref(initialTab.id)
+
+	const activeTab = computed(
+		() => tabs.value.find((tab) => tab.id === activeTabId.value) ?? tabs.value[0],
+	)
+	const activeLocation = computed(() => currentLocation(activeTab.value))
+	const canGoBack = computed(() => activeTab.value.index > 0)
+	const canGoForward = computed(
+		() => activeTab.value.index < activeTab.value.history.length - 1,
+	)
+
+	const editors = shallowReactive(new Map<string, FileEditorBridge>())
+	const activeEditor = computed(() => editors.get(activeTabId.value) ?? null)
+	const hasUnsavedChanges = computed(() =>
+		[...editors.values()].some((editor) => editor.hasUnsavedChanges.value),
+	)
+
+	const api = shallowRef<DockviewApi | null>(null)
+	let disposables: IDisposable[] = []
+
+	function getTab(id: string) {
+		return tabs.value.find((tab) => tab.id === id)
+	}
+
+	function pushLocation(tab: FileTab, location: FileLocation) {
+		if (isSameLocation(currentLocation(tab), location)) return
+		tab.history.splice(tab.index + 1)
+		tab.history.push(location)
+		if (tab.history.length > MAX_HISTORY_LENGTH) tab.history.shift()
+		tab.index = tab.history.length - 1
+	}
+
+	/**
+	 * The location we last pushed into the context. Hosts may apply it asynchronously (e.g. via
+	 * the router), so context changes are only recorded once it has been reached.
+	 */
+	let pendingLocation: FileLocation | null = null
+	let pendingTimeout: ReturnType<typeof setTimeout> | undefined
+
+	function applyToContext(location: FileLocation) {
+		if (isSameLocation(contextLocation.value, location)) return
+
+		pendingLocation = location
+		clearTimeout(pendingTimeout)
+		pendingTimeout = setTimeout(() => (pendingLocation = null), PENDING_LOCATION_TIMEOUT)
+
+		if (location.kind === 'file') {
+			ctx.startEditing({ name: location.name, path: location.path })
+		} else {
+			ctx.navigateTo(location.path)
+		}
+	}
+
+	watch(
+		contextLocation,
+		(location) => {
+			if (pendingLocation) {
+				if (!isSameLocation(location, pendingLocation)) return
+				pendingLocation = null
+				clearTimeout(pendingTimeout)
+			}
+			pushLocation(activeTab.value, location)
+		},
+		{ flush: 'post' },
+	)
+
+	async function confirmLeave(tab: FileTab) {
+		const editor = editors.get(tab.id)
+		if (currentLocation(tab).kind !== 'file' || !editor) return true
+		return options.confirmDiscard([editor])
+	}
+
+	async function navigate(location: FileLocation) {
+		const tab = activeTab.value
+		if (!isSameLocation(currentLocation(tab), location)) {
+			if (!(await confirmLeave(tab))) return
+			pushLocation(tab, location)
+		}
+		applyToContext(location)
+	}
+
+	async function go(delta: number) {
+		const tab = activeTab.value
+		const target = tab.index + delta
+		if (target < 0 || target >= tab.history.length) return
+		if (!(await confirmLeave(tab))) return
+		tab.index = target
+		applyToContext(currentLocation(tab))
+	}
+
+	function addPanel(tab: FileTab, inactive = false) {
+		api.value?.addPanel<FileTabPanelParams>({
+			id: tab.id,
+			component: FILE_TAB_PANEL_COMPONENT,
+			tabComponent: FILE_TAB_COMPONENT,
+			title: currentLocation(tab).path,
+			params: { tabId: tab.id },
+			inactive,
+		})
+	}
+
+	function activateTab(id: string) {
+		if (!getTab(id)) return
+		const panel = api.value?.getPanel(id)
+		if (panel && !panel.api.isActive) panel.api.setActive()
+		if (activeTabId.value === id) return
+		activeTabId.value = id
+		applyToContext(activeLocation.value)
+	}
+
+	function openTab(location: FileLocation) {
+		const tab = createTab(location)
+		tabs.value.push(tab)
+		addPanel(tab)
+		activateTab(tab.id)
+	}
+
+	async function closeTab(id: string) {
+		if (tabs.value.length <= 1) return
+		const index = tabs.value.findIndex((tab) => tab.id === id)
+		const tab = tabs.value[index]
+		if (!tab || !(await confirmLeave(tab))) return
+
+		tabs.value.splice(index, 1)
+		editors.delete(id)
+		api.value?.getPanel(id)?.api.close()
+
+		if (activeTabId.value === id) {
+			activateTab((tabs.value[index] ?? tabs.value[index - 1]).id)
+		}
+	}
+
+	function closeFile(tabId: string) {
+		const tab = getTab(tabId)
+		if (!tab) return
+		const location = currentLocation(tab)
+		if (location.kind !== 'file') return
+
+		const parent: FileLocation = { kind: 'directory', path: parentDirectory(location.path) }
+		pushLocation(tab, parent)
+		if (tab.id === activeTabId.value) applyToContext(parent)
+	}
+
+	function registerEditor(tabId: string, bridge: FileEditorBridge) {
+		editors.set(tabId, bridge)
+	}
+
+	function unregisterEditor(tabId: string, bridge: FileEditorBridge) {
+		if (editors.get(tabId) === bridge) editors.delete(tabId)
+	}
+
+	function onReady({ api: dockview }: DockviewReadyEvent) {
+		onDispose()
+		api.value = dockview
+
+		for (const tab of tabs.value) addPanel(tab, true)
+		dockview.getPanel(activeTabId.value)?.api.setActive()
+
+		disposables = [
+			dockview.onDidActivePanelChange(({ panel }) => {
+				if (panel) activateTab(panel.id)
+			}),
+			dockview.onWillShowOverlay((event) => {
+				if (event.kind === 'content' || event.kind === 'edge') event.preventDefault()
+			}),
+		]
+	}
+
+	function onDispose() {
+		for (const disposable of disposables) disposable.dispose()
+		disposables = []
+		api.value = null
+	}
+
+	return {
+		tabs,
+		activeTabId,
+		activeTab,
+		activeLocation,
+		canGoBack,
+		canGoForward,
+		editors,
+		activeEditor,
+		hasUnsavedChanges,
+		getTab,
+		navigate,
+		back: () => go(-1),
+		forward: () => go(1),
+		openTab,
+		activateTab,
+		closeTab,
+		closeFile,
+		registerEditor,
+		unregisterEditor,
+		onReady,
+		onDispose,
+	}
+}
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/shift-key.ts b/packages/ui/src/layouts/shared/files-tab/composables/shift-key.ts
new file mode 100644
index 00000000000..6aab3d9d5f6
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/composables/shift-key.ts
@@ -0,0 +1,4 @@
+import { createSharedComposable, useKeyModifier } from '@vueuse/core'
+
+/** Whether Shift is held, shared so every file row reuses one set of listeners. */
+export const useShiftKey = createSharedComposable(() => useKeyModifier('Shift', { initial: false }))
diff --git a/packages/ui/src/layouts/shared/files-tab/layout.vue b/packages/ui/src/layouts/shared/files-tab/layout.vue
index f21686bac55..7e7c51cec9e 100644
--- a/packages/ui/src/layouts/shared/files-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/files-tab/layout.vue
@@ -4,7 +4,7 @@
 	<FileCreateItemModal ref="createItemModal" :type="newItemType" @create="handleCreateNewItem" />
 	<FileCreateZipModal
 		ref="createZipModal"
-		:parent="ctx.currentPath.value"
+		:parent="selectionParent ?? ctx.currentPath.value"
 		:stat-file="ctx.statFile"
 		@create="handleZipSelection"
 	/>
@@ -19,23 +19,53 @@
 	<FileMoveItemModal
 		ref="moveItemModal"
 		:item="selectedItem"
-		:current-path="ctx.currentPath.value"
+		:current-path="selectedItem ? parentDirectory(normalizeFilePath(selectedItem.path)) : ctx.currentPath.value"
 		@move="handleMoveItem"
 	/>
 	<FileDeleteItemModal ref="deleteItemModal" :item="selectedItem" @delete="handleDeleteItem" />
 	<ContextMenu ref="contextMenuRef" :label="formatMessage(commonMessages.actionsLabel)" />
 
-	<div ref="fileViewer" v-if="!(ctx.loading.value && items.length === 0)" :class="[!smallMode ? 'h-[50rem]' : '']">
-		<KeepAlive>
-			<SplitviewVue v-if="!smallMode" class="h-[50rem]"
-				:theme="themeDark"
-				:orientation="Orientation.HORIZONTAL"
-				:components="{ fileSideBar: FileSideBar, fileBrowserPanel: FileBrowserPanel }"
-				@ready="onReady"
-			/>
-		</KeepAlive>
+	<div v-if="hasLoadedOnce" ref="fileViewer">
+		<div
+			class="grid items-start"
+			:class="{ 'cursor-col-resize select-none': isResizingSidebar }"
+			:style="{
+				gridTemplateColumns: showDockedSidebar
+					? `${sidebarWidth}px auto minmax(0, 1fr)`
+					: 'minmax(0, 1fr)',
+			}"
+		>
+			<template v-if="showDockedSidebar">
+				<aside
+					class="sticky top-[var(--files-sticky-top,0px)] flex max-h-[calc(var(--files-viewport-height,100dvh)_-_var(--files-sticky-top,0px))] flex-col"
+				>
+					<FileSideBar class="min-h-0" fill-height :add-border="false" />
+				</aside>
+				<div
+					role="separator"
+					tabindex="0"
+					aria-orientation="vertical"
+					:aria-label="formatMessage(messages.resizeSidebar)"
+					:aria-valuenow="sidebarWidth"
+					:aria-valuemin="SIDEBAR_MIN_WIDTH"
+					:aria-valuemax="maxSidebarWidth"
+					class="group flex w-3 cursor-col-resize touch-none justify-center self-stretch focus-visible:outline-none"
+					@pointerdown="startSidebarResize"
+					@keydown.left.prevent="nudgeSidebarWidth(-16)"
+					@keydown.right.prevent="nudgeSidebarWidth(16)"
+					@dblclick="resetSidebarWidth"
+				>
+					<div
+						class="h-full w-px bg-surface-5 transition-colors group-hover:bg-brand group-focus-visible:bg-brand"
+						:class="{ '!bg-brand': isResizingSidebar }"
+					/>
+				</div>
+			</template>
+			<div ref="mainColumn" class="min-w-0">
+				<FileBrowserPanel :small-mode="smallMode" />
+			</div>
+		</div>
 		<template v-if="smallMode">
-			<FileBrowserPanel :small-mode="true"/>
 			<NewModal ref="sidebarModal"
 				:on-hide="() => {
 					if (smallMode) sidebarOpen = false;
@@ -87,9 +117,9 @@
 			<div class="ml-auto flex items-center gap-0.5">
 				<Button
 					v-if="ctx.zipPaths"
-					v-tooltip="busyTooltip"
+					v-tooltip="isBusy ? busyTooltip : selectionParent === null ? formatMessage(messages.zipMixedFolders) : undefined"
 					type="quiet"
-					:disabled="isBusy"
+					:disabled="isBusy || selectionParent === null"
 					@click="createZipModal?.show()"
 				>
 					<FolderArchiveIcon />
@@ -113,17 +143,7 @@
 </template>
 
 <script setup lang="ts">
-import 'dockview-vue/dist/styles/dockview.css'
-
 import {FolderArchiveIcon, HistoryIcon, SaveIcon, TrashIcon,} from '@modrinth/assets'
-import {
-	type ISplitviewPanel,
-	LayoutPriority,
-	Orientation,
-	type SplitviewReadyEvent,
-	SplitviewVue,
-	themeDark
-} from 'dockview-vue'
 import type {Component} from 'vue'
 import {computed, onMounted, onUnmounted, ref, shallowRef, watch} from 'vue'
 
@@ -146,11 +166,18 @@ import FileRenameItemModal from './components/modals/FileRenameItemModal.vue'
 import FileUnsavedChangesModal from './components/modals/FileUnsavedChangesModal.vue'
 import FileUploadConflictModal from './components/modals/FileUploadConflictModal.vue'
 import FileUploadZipUrlModal from './components/modals/FileUploadZipUrlModal.vue'
+import {
+	directoryOf,
+	type FileLocation,
+	normalizeFilePath,
+	parentDirectory,
+	useFileTabs,
+} from './composables/file-tabs'
 import {useFileSearch} from './composables/file-search'
 import {useFileSelection} from './composables/file-selection'
 import {useFileSorting} from './composables/file-sorting'
 import {useFileUndoRedo} from './composables/file-undo-redo'
-import type {FileEditorBridge} from './providers/file-browser-ui'
+import type {FileEditorBridge, FileInfo} from './providers/file-browser-ui'
 import {provideFileBrowserUI} from './providers/file-browser-ui'
 import {injectFileManager} from './providers/file-manager'
 import type {FileItem} from './types'
@@ -199,6 +226,14 @@ const messages = defineMessages({
 		id: 'files.layout.create-zip',
 		defaultMessage: 'Create ZIP',
 	},
+	resizeSidebar: {
+		id: 'files.layout.resize-sidebar',
+		defaultMessage: 'Resize sidebar',
+	},
+	zipMixedFolders: {
+		id: 'files.layout.zip-mixed-folders',
+		defaultMessage: 'Only entries from the same folder can be zipped together',
+	},
 })
 
 const props = defineProps<{
@@ -220,17 +255,26 @@ import('vue3-ace-editor').then(async (mod) => {
 const baseId = `files-${Math.random().toString(36).slice(2, 9)}`
 
 const items = computed(() => ctx.currentItems.value)
+
+/**
+ * Only the very first load hides the viewer. Unmounting it on later navigations would tear down
+ * the tabs' dockview, and with it every other tab's open editor.
+ */
+const hasLoadedOnce = ref(false)
+watch(
+	() => !(ctx.loading.value && items.value.length === 0),
+	(loaded) => {
+		if (loaded) hasLoadedOnce.value = true
+	},
+	{ immediate: true },
+)
 const isEditing = computed(() => ctx.editingFile.value !== null)
 const isBusy = computed(() => (ctx.isBusy?.value ?? false) || (ctx.isReadOnly?.(ctx.currentPath.value) ?? false),)
 const busyTooltip = computed(() => ctx.isReadOnly?.(ctx.currentPath.value) ? ctx.readOnlyReason?.value : ctx.busyTooltip?.value,)
 
-const breadcrumbSegments = computed(() => {
-	const path = ctx.currentPath.value
-	if (typeof path === 'string') {
-		return path.split('/').filter(Boolean)
-	}
-	return []
-})
+const breadcrumbSegments = computed(() =>
+	directoryOf(fileTabs.activeLocation.value).split('/').filter(Boolean),
+)
 
 // Composables
 const { searchQuery, searchedItems } = useFileSearch(items)
@@ -252,9 +296,17 @@ const {
 } = useFileSelection(filteredItems)
 
 const selectionReadOnly = computed(() =>
-	[...selectedItems.value].some((path) => ctx.isReadOnly?.(path)),
+	[...selectedItems.value.keys()].some((path) => ctx.isReadOnly?.(path)),
 )
 
+/** The directory all selected entries share, or `null` when the selection is empty or spans directories. */
+const selectionParent = computed(() => {
+	const parents = new Set(
+		[...selectedItems.value.values()].map((item) => parentDirectory(normalizeFilePath(item.path))),
+	)
+	return parents.size === 1 ? [...parents][0] : null
+})
+
 const { recordOperation, onKeydown } = useFileUndoRedo(
 	(path, newName) => ctx.renameItem(path, newName),
 	(source, dest) => ctx.moveItem(source, dest),
@@ -262,19 +314,24 @@ const { recordOperation, onKeydown } = useFileUndoRedo(
 	(title, text, type) => addNotification({ title, text, type }),
 )
 
-// Bridge to whichever panel currently hosts the file editor (FileBrowserPanel).
-// Dockview mounts that panel itself, so there's no template ref to reach it through -
-// it registers its exposed API here on mount instead. See providers/file-browser-ui.ts.
-const fileEditorApi = shallowRef<FileEditorBridge | null>(null)
+const fileTabs = useFileTabs({
+	ctx,
+	confirmDiscard: confirmDiscardEditors,
+})
+
+const fileEditorApi = fileTabs.activeEditor
+const hasUnsavedChanges = fileTabs.hasUnsavedChanges
 
-const hasUnsavedChanges = computed(() => fileEditorApi.value?.hasUnsavedChanges?.value ?? false)
+function dirtyEditors(editors: Iterable<FileEditorBridge> = fileTabs.editors.values()) {
+	return [...editors].filter((editor) => editor.hasUnsavedChanges.value)
+}
 
 async function saveFileContent(exit = false) {
-	await fileEditorApi.value?.saveFileContent(exit)
+	await Promise.all(dirtyEditors().map((editor) => editor.saveFileContent(exit)))
 }
 
 function revertChanges() {
-	fileEditorApi.value?.revertChanges()
+	for (const editor of dirtyEditors()) editor.revertChanges()
 }
 
 async function shareToMclogs() {
@@ -302,64 +359,90 @@ const selectedItem = ref<FileItem | null>(null)
 
 const unsavedChangesModal = ref<InstanceType<typeof FileUnsavedChangesModal>>()
 
-const sidebar = ref<ISplitviewPanel | null>(null);
-const browser = ref<ISplitviewPanel | null>(null);
-
-// Initialize panels dynamically once the component mounts
-function onReady({api}: SplitviewReadyEvent) {
-	console.log("Split Ready")
+const mainColumn = ref<MaybeElement>()
 
-	// Render the left panel
-	sidebar.value = api.addPanel({
-		index: 0,
-		id: 'panel_left',
-		component: 'fileSideBar',
-		minimumSize: 300, // Initial width in pixels
-		size: 300,
-		priority: LayoutPriority.Low
-	});
+const SIDEBAR_MIN_WIDTH = 240
+const SIDEBAR_DEFAULT_WIDTH = 300
 
-	if (!sidebarOpen.value) sidebar.value.api.setVisible(false);
-
-	// Render the right panel
-	browser.value = api.addPanel({
-		index: 1,
-		id: 'panel_right',
-		component: 'fileBrowserPanel',
-		minimumSize: browserMinSize.value,
-		priority: LayoutPriority.High
-	});
-}
-
-const constrainWidth = computed(() => props.constrainWidth);
-const browserMinSize = computed(() => constrainWidth.value ? 700 : 1200)
-
-watch(browserMinSize, (value) => browser.value?.api?.setConstraints({ minimumSize: value }))
+const browserMinSize = computed(() => (props.constrainWidth ? 700 : 1200))
 
 const sidebarOpenSetting = useLocalStorage('file-layout-sidebar-open', false, { initOnMounted: true });
 const sidebarOpen = ref(sidebarOpenSetting.value);
+const sidebarWidthSetting = useLocalStorage('file-layout-sidebar-width', SIDEBAR_DEFAULT_WIDTH, {
+	initOnMounted: true,
+})
 
 watch(sidebarOpen, (value) => {
-	if(!smallMode.value) {
-		sidebar.value?.api?.setVisible(value);
+	if (!smallMode.value) return
+	if (value) {
+		sidebarModal.value?.show()
 	} else {
-		if (value) {
-			sidebarModal.value?.show()
-		} else {
-			sidebarModal.value?.hide()
-		}
+		sidebarModal.value?.hide()
 	}
 })
 
+/** Width of the whole files tab, used to pick between the docked sidebar and the pullout modal. */
+const shellWidth = ref<number>()
+/** Width of the main column, i.e. what `FileBrowserPanel` actually gets next to the sidebar. */
 const containerWidth = ref<number>()
 
 useResizeObserver(fileViewer, (entries) => {
-	const entry = entries[0]
-	containerWidth.value = entry.contentRect.width
+	shellWidth.value = entries[0].contentRect.width
 })
 
-const smallMode = computed(() => containerWidth.value == null || containerWidth.value < 1100);
-const fullWidthSidebar = computed(() => containerWidth.value == null || containerWidth.value < 400); //356
+useResizeObserver(mainColumn, (entries) => {
+	containerWidth.value = entries[0].contentRect.width
+})
+
+const smallMode = computed(() => shellWidth.value == null || shellWidth.value < 1100);
+const fullWidthSidebar = computed(() => shellWidth.value == null || shellWidth.value < 400);
+const showDockedSidebar = computed(() => !smallMode.value && sidebarOpen.value)
+
+const maxSidebarWidth = computed(() =>
+	Math.max(SIDEBAR_MIN_WIDTH, (shellWidth.value ?? 0) - browserMinSize.value),
+)
+
+function clampSidebarWidth(width: number) {
+	return Math.round(Math.min(Math.max(width, SIDEBAR_MIN_WIDTH), maxSidebarWidth.value))
+}
+
+const sidebarWidth = computed(() => clampSidebarWidth(sidebarWidthSetting.value))
+const isResizingSidebar = ref(false)
+
+function startSidebarResize(event: PointerEvent) {
+	if (event.button !== 0) return
+	event.preventDefault()
+
+	const handle = event.currentTarget as HTMLElement
+	const startX = event.clientX
+	const startWidth = sidebarWidth.value
+
+	handle.setPointerCapture(event.pointerId)
+	isResizingSidebar.value = true
+
+	function onMove(moveEvent: PointerEvent) {
+		sidebarWidthSetting.value = clampSidebarWidth(startWidth + moveEvent.clientX - startX)
+	}
+
+	function onEnd() {
+		isResizingSidebar.value = false
+		handle.removeEventListener('pointermove', onMove)
+		handle.removeEventListener('pointerup', onEnd)
+		handle.removeEventListener('pointercancel', onEnd)
+	}
+
+	handle.addEventListener('pointermove', onMove)
+	handle.addEventListener('pointerup', onEnd)
+	handle.addEventListener('pointercancel', onEnd)
+}
+
+function nudgeSidebarWidth(delta: number) {
+	sidebarWidthSetting.value = clampSidebarWidth(sidebarWidth.value + delta)
+}
+
+function resetSidebarWidth() {
+	sidebarWidthSetting.value = SIDEBAR_DEFAULT_WIDTH
+}
 
 let pastInitialSetup = false;
 
@@ -369,53 +452,54 @@ watch(smallMode, (value) => {
 	} else {
 		pastInitialSetup = true;
 	}
-
-	browser.value?.api?.setConstraints({ minimumSize: constrainWidth ? 700 : 1200 })
 })
 
-async function confirmDiscardChanges(): Promise<boolean> {
-	if (!hasUnsavedChanges.value) return true
+/**
+ * Prompts about any unsaved changes in the given editors.
+ * Resolves `true` once it is safe to discard them (saved, discarded, or nothing to lose).
+ */
+async function confirmDiscardEditors(editors: Iterable<FileEditorBridge>): Promise<boolean> {
+	const dirty = dirtyEditors(editors)
+	if (dirty.length === 0) return true
+
 	const result = await unsavedChangesModal.value?.prompt()
 	if (result === 'save') {
 		if (isBusy.value) return false
-		await saveFileContent(false)
-		return true
+		await Promise.all(dirty.map((editor) => editor.saveFileContent(false)))
+		return dirty.every((editor) => !editor.hasUnsavedChanges.value)
 	}
 	return result === 'discard'
 }
 
-// Navigation
-async function navigateToSegment(index: number) {
-	const newPath = index === -1 ? '/' : breadcrumbSegments.value.slice(0, index + 1).join('/')
-
-	if (newPath === ctx.currentPath.value && !isEditing.value) {
-		return
-	}
+function locationOf(item: FileInfo): FileLocation {
+	const path = normalizeFilePath(item.path)
+	return item.type === 'directory'
+		? { kind: 'directory', path }
+		: { kind: 'file', path, name: item.name }
+}
 
-	if (isEditing.value) {
-		if (!(await confirmDiscardChanges())) return
-		ctx.stopEditing()
-	}
+async function navigateToSegment(index: number) {
+	const path = `/${breadcrumbSegments.value.slice(0, index + 1).join('/')}`
+	await fileTabs.navigate({ kind: 'directory', path })
+}
 
-	ctx.navigateTo(newPath)
+async function handleNavigateToFolder(item: FileInfo) {
+	await fileTabs.navigate(locationOf({ ...item, type: 'directory' }))
 }
 
-function handleNavigateToFolder(item: FileItem) {
-	const currentPath = ctx.currentPath.value
-	const newPath = currentPath.endsWith('/')
-		? `${currentPath}${item.name}`
-		: `${currentPath}/${item.name}`
-	ctx.navigateTo(newPath)
+async function handleEditFile(item: FileInfo) {
+	await fileTabs.navigate(locationOf({ ...item, type: 'file' }))
 }
 
-// Editing
-function handleEditFile(item: { name: string; type: string; path: string }) {
-	ctx.startEditing({ name: item.name, path: item.path })
+function handleOpenInNewTab(item: FileInfo) {
+	if (item.type !== 'directory' && !canOpenInFileEditor(item.name)) return
+	fileTabs.openTab(locationOf(item))
 }
 
 async function handleEditorClose() {
-	if (!(await confirmDiscardChanges())) return
-	ctx.stopEditing()
+	const location = fileTabs.activeLocation.value
+	if (location.kind !== 'file') return
+	await fileTabs.navigate({ kind: 'directory', path: directoryOf(location) })
 }
 
 // CRUD handlers
@@ -429,13 +513,13 @@ async function handleRenameItem(newName: string) {
 	const item = selectedItem.value
 	if (!item) return
 
-	const path = `${ctx.currentPath.value}/${item.name}`.replace('//', '/')
+	const path = normalizeFilePath(item.path)
 	await ctx.renameItem(path, newName)
 	recordOperation({
 		type: 'rename',
 		itemType: item.type,
 		fileName: item.name,
-		path: ctx.currentPath.value,
+		path: parentDirectory(path),
 		oldName: item.name,
 		newName,
 	})
@@ -446,8 +530,8 @@ async function handleMoveItem(destination: string) {
 	const item = selectedItem.value
 	if (!item) return
 
-	const sourcePath = ctx.currentPath.value
-	const source = `${sourcePath}/${item.name}`.replace('//', '/')
+	const source = normalizeFilePath(item.path)
+	const sourcePath = parentDirectory(source)
 	const dest = `${destination}/${item.name}`.replace('//', '/')
 
 	await ctx.moveItem(source, dest)
@@ -465,8 +549,7 @@ function handleDeleteItem() {
 	const item = selectedItem.value
 	if (!item) return
 
-	const path = `${ctx.currentPath.value}/${item.name}`.replace('//', '/')
-	ctx.deleteItem(path, item.type === 'directory')
+	ctx.deleteItem(normalizeFilePath(item.path), item.type === 'directory')
 }
 
 function handleDirectMove(moveData: {
@@ -503,12 +586,11 @@ async function handleZip(item: FileItem) {
 }
 
 async function handleZipSelection(target: string) {
-	if (isBusy.value || !ctx.zipPaths || selectedItems.value.size === 0) return
-	const include = items.value
-		.filter((item) => selectedItems.value.has(item.path))
-		.map((item) => item.name)
+	const parent = selectionParent.value
+	if (isBusy.value || !ctx.zipPaths || parent === null) return
+	const include = [...selectedItems.value.values()].map((item) => item.name)
 	deselectAll()
-	await ctx.zipPaths(ctx.currentPath.value, include, target)
+	await ctx.zipPaths(parent, include, target)
 }
 
 // Extract
@@ -587,12 +669,8 @@ function showBulkDeleteModal() {
 	if (isBusy.value || selectionReadOnly.value) return
 	if (selectedItems.value.size === 0) return
 
-	const itemsToDelete = Array.from(selectedItems.value)
-	for (const path of itemsToDelete) {
-		const item = items.value.find((i) => i.path === path)
-		if (item) {
-			ctx.deleteItem(path, item.type === 'directory')
-		}
+	for (const item of selectedItems.value.values()) {
+		ctx.deleteItem(normalizeFilePath(item.path), item.type === 'directory')
 	}
 	deselectAll()
 }
@@ -652,11 +730,7 @@ function handleItemHover(item: { type: string; path: string; name: string }) {
 
 	if (item.type === 'directory') {
 		prefetchTimeout = setTimeout(() => {
-			const currentPath = ctx.currentPath.value
-			const navPath = currentPath.endsWith('/')
-				? `${currentPath}${item.name}`
-				: `${currentPath}/${item.name}`
-			ctx.prefetchDirectory?.(navPath)
+			ctx.prefetchDirectory?.(normalizeFilePath(item.path))
 		}, 150)
 	} else if (canOpenInFileEditor(item.name)) {
 		prefetchTimeout = setTimeout(() => {
@@ -679,11 +753,9 @@ function handleContextMenu(event: MouseEvent, options: ButtonMenuOption[]) {
 	contextMenuRef.value?.open(event, options)
 }
 
-// Shared UI state/handlers for the dockview-hosted panels (FileSideBar, FileBrowserPanel).
-// Dockview mounts those panels itself via the `components` map + `addPanel()`, so they're
-// no longer direct template children - normal prop/emit/ref bindings can't reach them. They
-// stay true descendants in the Vue tree though (dockview-vue teleports them), so provide/inject
-// still works and is what they use instead. See providers/file-browser-ui.ts.
+// Shared UI state/handlers for FileSideBar, FileBrowserPanel and the dockview-hosted editor
+// tabs. Dockview mounts tab panels itself (teleported, so still Vue descendants), which means
+// prop/emit/ref bindings can't reach them but provide/inject does. See providers/file-browser-ui.ts.
 provideFileBrowserUI({
 	baseId,
 	showDebugInfo: computed(() => props.showDebugInfo ?? false),
@@ -715,6 +787,7 @@ provideFileBrowserUI({
 	someSelected,
 
 	editorComponent,
+	fileTabs,
 	fileEditorApi,
 	hasUnsavedChanges,
 	saveFileContent,
@@ -725,6 +798,7 @@ provideFileBrowserUI({
 	navigateToSegment,
 	handleNavigateToFolder,
 	handleEditFile,
+	handleOpenInNewTab,
 	handleEditorClose,
 	handlePrefetchHome,
 	handleItemHover,
@@ -748,13 +822,12 @@ provideFileBrowserUI({
 	handleContextMenu,
 })
 
-// Reset search/sort/selection on path change
+// Reset search/sort on path change; selection spans directories, so it is kept
 watch(
 	() => ctx.currentPath.value,
 	() => {
 		searchQuery.value = ''
 		resetSort()
-		deselectAll()
 	},
 )
 
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts b/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
index 490d0b03fe1..798f539fa37 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
@@ -3,13 +3,14 @@ import type { Component, ComputedRef, Ref, ShallowRef } from 'vue'
 import type { ButtonMenuOption } from '#ui/components'
 import { createContext } from '#ui/providers/create-context'
 
+import type { FileTabs } from '../composables/file-tabs'
 import type { FileItem, FileSortField } from '../types'
 
 export type FileInfo = Pick<FileItem, 'name' | 'type' | 'path'>
 
 /**
- * API exposed by whichever panel currently hosts the file editor (FileBrowserPanel),
- * registered here on mount since dockview panels aren't reachable via template refs.
+ * API exposed by each tab's file editor, registered on `FileTabs` on mount
+ * since dockview panels aren't reachable via template refs.
  */
 export interface FileEditorBridge {
 	hasUnsavedChanges: Ref<boolean> | ComputedRef<boolean>
@@ -33,7 +34,8 @@ export interface FileBrowserUIContext {
 	busyTooltip: ComputedRef<string | undefined>
 	breadcrumbSegments: ComputedRef<string[]>
 	sidebarOpen: ComputedRef<boolean>
-	setSidebarOpen: (value: boolean) => void;
+	setSidebarOpen: (value: boolean) => void
+	/** Width of the main content column, i.e. the space `FileBrowserPanel` actually has. */
 	containerWidth: Ref<number | undefined>
 
 	searchQuery: Ref<string>
@@ -41,15 +43,18 @@ export interface FileBrowserUIContext {
 	sortDesc: Ref<boolean>
 	handleSort: (field: FileSortField) => void
 
-	selectedItems: Ref<Set<string>>
-	toggleItemSelection: (path: string) => void
+	/** Selected entries keyed by path; may span directories. */
+	selectedItems: Ref<Map<string, FileItem>>
+	toggleItemSelection: (item: FileItem) => void
 	deselectAll: () => void
 	toggleSelectAll: () => void
 	allSelected: ComputedRef<boolean>
 	someSelected: ComputedRef<boolean>
 
 	editorComponent: ShallowRef<Component | null>
-	fileEditorApi: ShallowRef<FileEditorBridge | null>
+	fileTabs: FileTabs
+	/** The editor of the active tab. */
+	fileEditorApi: ComputedRef<FileEditorBridge | null>
 	hasUnsavedChanges: ComputedRef<boolean>
 	saveFileContent: (exit?: boolean) => Promise<void>
 	revertChanges: () => void
@@ -57,8 +62,9 @@ export interface FileBrowserUIContext {
 	toggleFind: () => void
 
 	navigateToSegment: (index: number) => void
-	handleNavigateToFolder: (item: FileItem) => void
+	handleNavigateToFolder: (item: FileInfo) => void
 	handleEditFile: (item: FileInfo) => void
+	handleOpenInNewTab: (item: FileInfo) => void
 	handleEditorClose: () => Promise<void>
 	handlePrefetchHome: () => void
 	handleItemHover: (item: FileInfo) => void
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts b/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
index 6ab505d3ccb..fd14b211bbd 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
@@ -11,16 +11,25 @@ import type {
 	UploadState,
 } from '../types'
 
-export interface DirectoryQuery {
-	items: ComputedRef<FileItem[]>,
-	isLoading: Ref<boolean>,
+export interface DirectoryEntries {
+	items: ComputedRef<FileItem[]>
+	isLoading: Ref<boolean>
+	loadError: Ref<Error | null>
+}
+
+export interface DirectoryQuery extends DirectoryEntries {
 	filesReadyPending: ComputedRef<boolean>
-	loadError: Ref<Error | null>,
 }
 
+/**
+ * Lazily loaded, cached directory listings used by the sidebar tree. Paths are absolute
+ * (`/`, `/config`, `/config/sub`), independent of `currentPath`.
+ */
 export interface DirectoryTree {
-	getEntries: (path: string) => Ref<FileItem[]>
-	prefetch: (path: string) => void;
+	/** Returns the (cached) listing for `path`, starting to load it on first access. */
+	get: (path: string) => DirectoryEntries
+	prefetch: (path: string) => void
+	/** Absolute paths of the directories expanded in the tree. Owned by the host so it survives remounts. */
 	expandedEntries: Ref<string[]>
 }
 
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/index.ts b/packages/ui/src/layouts/shared/files-tab/providers/index.ts
index 8772a596219..78bdbff7039 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/index.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/index.ts
@@ -1,2 +1,7 @@
-export type { FileManagerContext } from './file-manager'
+export type {
+	DirectoryEntries,
+	DirectoryQuery,
+	DirectoryTree,
+	FileManagerContext,
+} from './file-manager'
 export { injectFileManager, provideFileManager } from './file-manager'
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
index 7c7aaf3242d..7107597e5e9 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Kyros } from '@modrinth/api-client'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-import {computed, onMounted, type Ref, ref, watch} from 'vue'
+import { computed, effectScope, onMounted, onScopeDispose, type Ref, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
@@ -150,13 +150,16 @@ function queryDirectoryEntries(path: string): DirectoryQuery{
 		data: directoryData,
 		isLoading,
 		error: loadError,
-	} = useQuery({
-		queryKey: computed(() => ['files', serverId, path]),
-		queryFn: async () => {
-			return client.kyros.files_v0.listDirectory(path, 1, 2000)
+	} = useQuery(
+		{
+			queryKey: computed(() => ['files', serverId, path]),
+			queryFn: async () => {
+				return client.kyros.files_v0.listDirectory(path, 1, 2000)
+			},
+			staleTime: 30_000,
 		},
-		staleTime: 30_000,
-	})
+		queryClient,
+	)
 
 	return {
 		items: computed<FileItem[]>(() =>
@@ -169,7 +172,12 @@ function queryDirectoryEntries(path: string): DirectoryQuery{
 }
 
 // Prefetching
-function prefetchDirectory(path: string) {
+function normalizeDirectoryPath(path: string) {
+	return `/${path.split('/').filter(Boolean).join('/')}`
+}
+
+function prefetchDirectory(rawPath: string) {
+	const path = normalizeDirectoryPath(rawPath)
 	queryClient.prefetchQuery({
 		queryKey: ['files', serverId, path],
 		queryFn: async () => {
@@ -199,7 +207,7 @@ function prefetchFile(path: string) {
 }
 
 function getQueryKey() {
-	return ['files', serverId, currentPath.value]
+	return ['files', serverId, normalizeDirectoryPath(currentPath.value)]
 }
 
 const isRefreshing = ref<boolean>(false)
@@ -515,28 +523,31 @@ function cancelUpload() {
 	fileUploadSession.cancelUpload()
 }
 
-const directories: Record<string, DirectoryQuery> = {};
-const expandedDirectories: Ref<string[]> = ref([]);
+const directories = new Map<string, DirectoryQuery>()
+const expandedDirectories: Ref<string[]> = ref([])
+
+/** Owns the lazily created directory queries so they're disposed with this page, wherever they were first requested from. */
+const directoryScope = effectScope()
+onScopeDispose(() => directoryScope.stop())
 
 const directoryTree = {
 	prefetch: (path: string) => {
-		if (directories[path] == null) {
-			prefetchDirectory(path);
+		const normalized = normalizeDirectoryPath(path)
+		if (!directories.has(normalized)) {
+			prefetchDirectory(normalized)
 		}
 	},
-	get: (path: string) => {
-		let query = directories[path];
+	get: (path: string): DirectoryQuery => {
+		const normalized = normalizeDirectoryPath(path)
+		let query = directories.get(normalized)
 		if (query == null) {
-			query = queryDirectoryEntries(path);
-			directories[path] = query;
+			query = directoryScope.run(() => queryDirectoryEntries(normalized))!
+			directories.set(normalized, query)
 		}
 		return query
 	},
-	getEntries(path: string) {
-		return this.get(path).items;
-	},
-	expandedEntries: expandedDirectories
-};
+	expandedEntries: expandedDirectories,
+} satisfies DirectoryTree
 
 // Provide the file manager context
 provideFileManager({
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index d7d4acf8e60..ee1747792de 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -1604,12 +1604,18 @@
   "files.layout.extraction-started-title": {
     "defaultMessage": "Extraction started"
   },
+  "files.layout.resize-sidebar": {
+    "defaultMessage": "Resize sidebar"
+  },
   "files.layout.selected-count": {
     "defaultMessage": "{count} selected"
   },
   "files.layout.unsaved-changes": {
     "defaultMessage": "You have unsaved changes."
   },
+  "files.layout.zip-mixed-folders": {
+    "defaultMessage": "Only entries from the same folder can be zipped together"
+  },
   "files.move-modal.current-location": {
     "defaultMessage": "Current location"
   },
@@ -1622,6 +1628,9 @@
   "files.move-modal.header": {
     "defaultMessage": "Move {type}"
   },
+  "files.navbar.back": {
+    "defaultMessage": "Back"
+  },
   "files.navbar.back-to-home": {
     "defaultMessage": "Back to home"
   },
@@ -1637,6 +1646,9 @@
   "files.navbar.find-in-file": {
     "defaultMessage": "Find in file"
   },
+  "files.navbar.forward": {
+    "defaultMessage": "Forward"
+  },
   "files.navbar.home": {
     "defaultMessage": "Home"
   },
@@ -1700,12 +1712,21 @@
   "files.rename-modal.new-name-label": {
     "defaultMessage": "New name"
   },
+  "files.row.collapse-folder": {
+    "defaultMessage": "Collapse folder"
+  },
   "files.row.create-zip": {
     "defaultMessage": "Create ZIP"
   },
+  "files.row.expand-folder": {
+    "defaultMessage": "Expand folder"
+  },
   "files.row.item-count": {
     "defaultMessage": "{count, plural, one {# item} other {# items}}"
   },
+  "files.row.open-in-new-tab": {
+    "defaultMessage": "Open in new tab"
+  },
   "files.row.parent-folder": {
     "defaultMessage": "Parent folder"
   },
@@ -1721,6 +1742,30 @@
   "files.table-header.size": {
     "defaultMessage": "Size"
   },
+  "files.tabs.close-tab": {
+    "defaultMessage": "Close {name}"
+  },
+  "files.tabs.home": {
+    "defaultMessage": "Home"
+  },
+  "files.tabs.new-tab": {
+    "defaultMessage": "New tab"
+  },
+  "files.tabs.unsaved-changes": {
+    "defaultMessage": "Unsaved changes"
+  },
+  "files.tree.empty-folder": {
+    "defaultMessage": "This folder is empty"
+  },
+  "files.tree.empty-subfolder": {
+    "defaultMessage": "Empty"
+  },
+  "files.tree.label": {
+    "defaultMessage": "File tree"
+  },
+  "files.tree.loading": {
+    "defaultMessage": "Loading..."
+  },
   "files.unsaved-changes-modal.body": {
     "defaultMessage": "You have unsaved changes that will be lost if you leave. Would you like to save before leaving?"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cc707e2269f..9ba2219632c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -196,7 +196,7 @@ importers:
     devDependencies:
       '@eslint/compat':
         specifier: ^1.1.1
-        version: 1.4.1(eslint@9.39.2(jiti@1.21.7))
+        version: 1.4.1(eslint@9.39.2(jiti@2.6.1))
       '@formatjs/cli':
         specifier: ^6.2.12
         version: 6.12.2(@vue/compiler-core@3.5.27)(vue@3.5.27(typescript@5.9.3))
@@ -205,22 +205,22 @@ importers:
         version: link:../../packages/tooling-config
       '@nuxt/eslint-config':
         specifier: ^0.5.6
-        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@taijased/vue-render-tracker':
         specifier: ^1.0.7
         version: 1.0.7(vue@3.5.27(typescript@5.9.3))
       '@vitejs/plugin-vue':
         specifier: ^6.0.3
-        version: 6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
+        version: 6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.24(postcss@8.5.6)
       eslint:
         specifier: ^9.9.1
-        version: 9.39.2(jiti@1.21.7)
+        version: 9.39.2(jiti@2.6.1)
       eslint-plugin-turbo:
         specifier: ^2.5.4
-        version: 2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2)
+        version: 2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2)
       postcss:
         specifier: ^8.4.39
         version: 8.5.6
@@ -238,7 +238,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^8.0.0
-        version: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+        version: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue-component-type-helpers:
         specifier: ^3.1.8
         version: 3.2.4
@@ -310,6 +310,15 @@ importers:
       '@modrinth/utils':
         specifier: workspace:*
         version: link:../../packages/utils
+      '@run-slicer/cfr':
+        specifier: 0.1.8-0.152
+        version: 0.1.8-0.152
+      '@run-slicer/procyon':
+        specifier: 0.1.2-0.6.0
+        version: 0.1.2-0.6.0
+      '@run-slicer/vf':
+        specifier: 0.6.4-1.12.0
+        version: 0.6.4-1.12.0
       '@sentry/nuxt':
         specifier: ^10.33.0
         version: 10.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(rollup@4.57.1)(vue@3.5.27(typescript@5.9.3))
@@ -349,6 +358,9 @@ importers:
       dompurify:
         specifier: ^3.1.7
         version: 3.3.1
+      file-type:
+        specifier: ^22.1.0
+        version: 22.1.0
       fuse.js:
         specifier: ^6.6.2
         version: 6.6.2
@@ -370,6 +382,9 @@ importers:
       jszip:
         specifier: ^3.10.1
         version: 3.10.1
+      krakatau-web:
+        specifier: 1.1.0-beta
+        version: 1.1.0-beta
       lru-cache:
         specifier: ^11.2.4
         version: 11.2.5
@@ -687,6 +702,15 @@ importers:
       '@modrinth/utils':
         specifier: workspace:*
         version: link:../utils
+      '@run-slicer/cfr':
+        specifier: 0.1.8-0.152
+        version: 0.1.8-0.152
+      '@run-slicer/procyon':
+        specifier: 0.1.2-0.6.0
+        version: 0.1.2-0.6.0
+      '@run-slicer/vf':
+        specifier: 0.6.4-1.12.0
+        version: 0.6.4-1.12.0
       '@tanstack/vue-query':
         specifier: 5.101.4
         version: 5.101.4(vue@3.5.27(typescript@5.9.3))
@@ -723,6 +747,9 @@ importers:
       '@xterm/xterm':
         specifier: ^6.0.0
         version: 6.0.0
+      '@zip.js/zip.js':
+        specifier: ^2.8.34
+        version: 2.8.34
       ace-builds:
         specifier: ^1.43.5
         version: 1.43.6
@@ -735,6 +762,12 @@ importers:
       dayjs:
         specifier: ^1.11.10
         version: 1.11.19
+      dockview:
+        specifier: ^8.3.1
+        version: 8.3.1
+      dockview-vue:
+        specifier: ^8.2.0
+        version: 8.2.0(vue@3.5.27(typescript@5.9.3))
       dompurify:
         specifier: ^3.1.7
         version: 3.3.1
@@ -744,6 +777,9 @@ importers:
       fabric:
         specifier: ^7.4.0
         version: 7.4.0
+      file-type:
+        specifier: ^22.1.0
+        version: 22.1.0
       flatpickr:
         specifier: ^4.6.13
         version: 4.6.13
@@ -756,15 +792,24 @@ importers:
       intl-messageformat:
         specifier: ^10.7.7
         version: 10.7.18
+      js-yaml:
+        specifier: ^4.1.1
+        version: 4.1.1
       jszip:
         specifier: ^3.10.1
         version: 3.10.1
+      krakatau-web:
+        specifier: 1.1.0-beta
+        version: 1.1.0-beta
       lru-cache:
         specifier: ^11.2.4
         version: 11.2.5
       markdown-it:
         specifier: ^13.0.2
         version: 13.0.2
+      mime:
+        specifier: ^4.1.0
+        version: 4.1.0
       motion-v:
         specifier: ^2.2.1
         version: 2.2.1(@vueuse/core@11.3.0(vue@3.5.27(typescript@5.9.3)))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vue@3.5.27(typescript@5.9.3))
@@ -777,6 +822,9 @@ importers:
       qrcode.vue:
         specifier: ^3.4.1
         version: 3.8.0(vue@3.5.27(typescript@5.9.3))
+      smol-toml:
+        specifier: ^1.8.0
+        version: 1.8.0
       three:
         specifier: ^0.172.0
         version: 0.172.0
@@ -828,7 +876,7 @@ importers:
         version: 5.2.4(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))(vue@3.5.27(typescript@5.9.3))
       eslint-plugin-storybook:
         specifier: ^10.1.10
-        version: 10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.9.3)
+        version: 10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.9.3)
       storybook:
         specifier: ^10.1.10
         version: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -1124,6 +1172,9 @@ packages:
       commander:
         optional: true
 
+  '@borewit/text-codec@0.2.2':
+    resolution: {integrity: sha512-DDaRehssg1aNrH4+2hnj1B7vnUGEjU6OIlyRdkMd0aUdIUvKXrJfXsy8LVtXAy7DRvYVluWbMspsRhz2lcW0mQ==}
+
   '@capsizecss/unpack@4.0.0':
     resolution: {integrity: sha512-VERIM64vtTP1C4mxQ5thVT9fK0apjPFobqybMtA1UdUujWka24ERHbRHFGmpbbhp73MhV+KSsHQH9C6uOTdEQA==}
     engines: {node: '>=18'}
@@ -4009,6 +4060,15 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@run-slicer/cfr@0.1.8-0.152':
+    resolution: {integrity: sha512-FN5I41CF0QcscV5HCcbq5iJHqIueNtROvLtfXohNt9pNJUxo2WFncg0a7jPinRjBi7VgNxjJmWE7sP++vYVFRw==}
+
+  '@run-slicer/procyon@0.1.2-0.6.0':
+    resolution: {integrity: sha512-xPra0FuATHnjLYLXFUlmRYkfmIukCrl5Zv6iM8ajSTYFDgK85HVNpBAo23NQbp+cMU6QpvOEviwE8nRwGuS07Q==}
+
+  '@run-slicer/vf@0.6.4-1.12.0':
+    resolution: {integrity: sha512-fKKqDHVCOKed3jcbrX4aA9Za7YY+/7tq2tVlkbSPQ9NVMaGeBhqyRE/gnLc30ZJ3zKP/UYIh69FaUkrF/dmLuQ==}
+
   '@rushstack/node-core-library@5.23.1':
     resolution: {integrity: sha512-wlKmIKIYCKuCASbITvOxLZXepPbwXvrv7S6ig6XNWFchSyhL/E2txmVXspHY49Wu2dzf7nI27a2k/yV5BA3EiA==}
     peerDependencies:
@@ -4607,6 +4667,13 @@ packages:
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
+  '@tokenizer/inflate@0.4.1':
+    resolution: {integrity: sha512-2mAv+8pkG6GIZiF1kNg1jAjh27IDxEPKwdGul3snfztFerfPGI1LjDezZp3i7BElXompqEtPmoPx6c2wgtWsOA==}
+    engines: {node: '>=18'}
+
+  '@tokenizer/token@0.3.0':
+    resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
+
   '@tresjs/cientos@4.3.1':
     resolution: {integrity: sha512-3qp6lEtMrFdhxDuASP1Sz/hEi8+xcEpM6Vd6uDJysCh4uRAzyJLlBSbPoR7gVjN12wrhwJIF1AfYEFz/Vhz5ZQ==}
     peerDependencies:
@@ -6136,6 +6203,17 @@ packages:
   dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
+  dockview-core@8.3.1:
+    resolution: {integrity: sha512-6Loais9hlIRo25sTQSWGWlgbPr22ddoLBzpGDFaTnocawnC45twp5f2S2WxUz5/HPa/a65I4yxKUqZa8xrcc5Q==}
+
+  dockview-vue@8.2.0:
+    resolution: {integrity: sha512-Mr5lFrDJ4cD6IoDz7fPo7TE/lQ8h7ed2gP6Cb0Ii460nw1ES94iEx/HBIYO1HlM0vdU052/d5aCzlky4jauF1Q==}
+    peerDependencies:
+      vue: ^3.4.0
+
+  dockview@8.3.1:
+    resolution: {integrity: sha512-2odBC9cDKcVCVx8Db86vq9s9JZKzbgvdkxDzcfsrD9nORLc5UqhLgLvVcJguorBv7CyEpKDzFO1JVLYWJCYrJA==}
+
   doctypes@1.1.0:
     resolution: {integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==}
 
@@ -6629,6 +6707,10 @@ packages:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
 
+  file-type@22.1.0:
+    resolution: {integrity: sha512-fbvf9u6jnHWr1EP6V8R99E9iLMhNLXgZkUzWBiPpJ5/89UJ/Atuxjn5YXR+XaZWo2hc2/8mGfTez+NDAgOcpLA==}
+    engines: {node: '>=22'}
+
   file-uri-to-path@1.0.0:
     resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
 
@@ -7387,6 +7469,9 @@ packages:
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
+  krakatau-web@1.1.0-beta:
+    resolution: {integrity: sha512-TJhzktC3+DLYD/XjLRnkKK+3uKPC+B65DMatdMZYo1kpj2J9nwrPd20qyR5OgMMgDZema7IQarEaZAXniS268g==}
+
   launch-editor@2.12.0:
     resolution: {integrity: sha512-giOHXoOtifjdHqUamwKq6c49GzBdLjvxrd2D+Q4V6uOHopJv7p9VJxikDsQ/CBXZbEITgUqSVHXLTG3VhPP1Dg==}
 
@@ -9304,6 +9389,10 @@ packages:
     resolution: {integrity: sha512-4zemZi0HvTnYwLfrpk/CF9LOd9Lt87kAt50GnqhMpyF9U3poDAP2+iukq2bZsO/ufegbYehBkqINbsWxj4l4cw==}
     engines: {node: '>= 18'}
 
+  smol-toml@1.8.0:
+    resolution: {integrity: sha512-kCZr2V3ch9i00x8zXRhjUNVcjG9ijES5dDudkXvUVCT5QlJNQWElSJdZqyPemffHoLNUYwOcou0Fy+ojN0uHSQ==}
+    engines: {node: '>= 18'}
+
   sortablejs@1.14.0:
     resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
 
@@ -9473,6 +9562,10 @@ packages:
       '@types/node':
         optional: true
 
+  strtok3@10.3.5:
+    resolution: {integrity: sha512-ki4hZQfh5rX0QDLLkOCj+h+CVNkqmp/CMf8v8kZpkNVK6jGQooMytqzLZYUVYIZcFZ6yDB70EfD8POcFXiF5oA==}
+    engines: {node: '>=18'}
+
   structured-clone-es@1.0.0:
     resolution: {integrity: sha512-FL8EeKFFyNQv5cMnXI31CIMCsFarSVI2bF0U0ImeNE3g/F1IvJQyqzOXxPBRXiwQfyBTlbNe88jh1jFW0O/jiQ==}
 
@@ -9646,6 +9739,10 @@ packages:
   token-stream@1.0.0:
     resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
 
+  token-types@6.1.2:
+    resolution: {integrity: sha512-dRXchy+C0IgK8WPC6xvCHFRIWYUbqqdEIKPaKo/AcTUNzwLTK6AH7RjdLWsEZcAN/TBdtfUw3PYEgPr5VPr6ww==}
+    engines: {node: '>=14.16'}
+
   totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
@@ -9802,6 +9899,10 @@ packages:
   ufo@1.6.3:
     resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==}
 
+  uint8array-extras@1.5.0:
+    resolution: {integrity: sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A==}
+    engines: {node: '>=18'}
+
   ultrahtml@1.6.0:
     resolution: {integrity: sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==}
 
@@ -11127,6 +11228,8 @@ snapshots:
       cac: 6.7.14
       citty: 0.1.6
 
+  '@borewit/text-codec@0.2.2': {}
+
   '@capsizecss/unpack@4.0.0':
     dependencies:
       fontkitten: 1.0.2
@@ -11821,12 +11924,6 @@ snapshots:
 
   '@eslint-community/regexpp@4.12.2': {}
 
-  '@eslint/compat@1.4.1(eslint@9.39.2(jiti@1.21.7))':
-    dependencies:
-      '@eslint/core': 0.17.0
-    optionalDependencies:
-      eslint: 9.39.2(jiti@1.21.7)
-
   '@eslint/compat@1.4.1(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
       '@eslint/core': 0.17.0
@@ -12602,31 +12699,6 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@eslint/js': 9.39.2
-      '@nuxt/eslint-plugin': 0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/eslint-plugin': 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
-      eslint-config-flat-gitignore: 0.3.0(eslint@9.39.2(jiti@1.21.7))
-      eslint-flat-config-utils: 0.4.0
-      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-jsdoc: 50.8.0(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-regexp: 2.10.0(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-unicorn: 55.0.0(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-vue: 9.33.0(eslint@9.39.2(jiti@1.21.7))
-      globals: 15.15.0
-      local-pkg: 0.5.1
-      pathe: 1.1.2
-      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
-    transitivePeerDependencies:
-      - '@typescript-eslint/utils'
-      - eslint-import-resolver-node
-      - supports-color
-      - typescript
-
   '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint/js': 9.39.2
@@ -12652,15 +12724,6 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.54.0
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -13727,6 +13790,12 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.57.1':
     optional: true
 
+  '@run-slicer/cfr@0.1.8-0.152': {}
+
+  '@run-slicer/procyon@0.1.2-0.6.0': {}
+
+  '@run-slicer/vf@0.6.4-1.12.0': {}
+
   '@rushstack/node-core-library@5.23.1(@types/node@24.12.2)':
     dependencies:
       ajv: 8.18.0
@@ -14153,18 +14222,6 @@ snapshots:
 
   '@stripe/stripe-js@7.9.0': {}
 
-  '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
-      eslint-visitor-keys: 4.2.1
-      espree: 10.4.0
-      estraverse: 5.3.0
-      picomatch: 4.0.4
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
@@ -14393,6 +14450,15 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.1
 
+  '@tokenizer/inflate@0.4.1':
+    dependencies:
+      debug: 4.4.3
+      token-types: 6.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@tokenizer/token@0.3.0': {}
+
   '@tresjs/cientos@4.3.1(@tresjs/core@4.3.6(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(@types/three@0.172.0)(react@19.2.8)(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@tresjs/core': 4.3.6(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
@@ -14579,22 +14645,6 @@ snapshots:
     dependencies:
       '@types/node': 24.12.2
 
-  '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.54.0
-      '@typescript-eslint/type-utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.54.0
-      eslint: 9.39.2(jiti@1.21.7)
-      ignore: 7.0.5
-      natural-compare: 1.4.0
-      ts-api-utils: 2.4.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -14611,18 +14661,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.54.0
-      '@typescript-eslint/types': 8.54.0
-      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.54.0
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.54.0
@@ -14666,18 +14704,6 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.54.0
-      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
-      ts-api-utils: 2.4.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -14870,12 +14896,6 @@ snapshots:
       vite: 7.3.1(@types/node@24.12.2)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.27(typescript@5.9.3)
 
-  '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
-    dependencies:
-      '@rolldown/pluginutils': 1.0.0-rc.2
-      vite: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
-      vue: 3.5.27(typescript@5.9.3)
-
   '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.2
@@ -16196,6 +16216,17 @@ snapshots:
 
   dlv@1.1.3: {}
 
+  dockview-core@8.3.1: {}
+
+  dockview-vue@8.2.0(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      dockview: 8.3.1
+      vue: 3.5.27(typescript@5.9.3)
+
+  dockview@8.3.1:
+    dependencies:
+      dockview-core: 8.3.1
+
   doctypes@1.1.0: {}
 
   dom-accessibility-api@0.5.16: {}
@@ -16493,12 +16524,6 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@1.21.7))
-      eslint: 9.39.2(jiti@1.21.7)
-      find-up-simple: 1.0.1
-
   eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@2.6.1))
@@ -16520,23 +16545,6 @@ snapshots:
     optionalDependencies:
       unrs-resolver: 1.11.1
 
-  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@typescript-eslint/types': 8.54.0
-      comment-parser: 1.4.5
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
-      eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
-      is-glob: 4.0.3
-      minimatch: 10.1.2
-      semver: 7.7.4
-      stable-hash-x: 0.2.0
-      unrs-resolver: 1.11.1
-    optionalDependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -16554,22 +16562,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@es-joy/jsdoccomment': 0.50.2
-      are-docs-informative: 0.0.2
-      comment-parser: 1.4.1
-      debug: 4.4.3
-      escape-string-regexp: 4.0.0
-      eslint: 9.39.2(jiti@1.21.7)
-      espree: 10.4.0
-      esquery: 1.7.0
-      parse-imports-exports: 0.2.4
-      semver: 7.7.4
-      spdx-expression-parse: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.50.2
@@ -16595,17 +16587,6 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@2.6.1))
 
-  eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
-      '@eslint-community/regexpp': 4.12.2
-      comment-parser: 1.4.5
-      eslint: 9.39.2(jiti@1.21.7)
-      jsdoc-type-pratt-parser: 4.8.0
-      refa: 0.12.1
-      regexp-ast-analysis: 0.7.1
-      scslre: 0.3.0
-
   eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -16621,47 +16602,21 @@ snapshots:
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
 
-  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.9.3):
+  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
       storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2):
-    dependencies:
-      dotenv: 16.0.3
-      eslint: 9.39.2(jiti@1.21.7)
-      turbo: 2.8.2
-
   eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2):
     dependencies:
       dotenv: 16.0.3
       eslint: 9.39.2(jiti@2.6.1)
       turbo: 2.8.2
 
-  eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@babel/helper-validator-identifier': 7.28.5
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
-      ci-info: 4.4.0
-      clean-regexp: 1.0.0
-      core-js-compat: 3.48.0
-      eslint: 9.39.2(jiti@1.21.7)
-      esquery: 1.7.0
-      globals: 15.15.0
-      indent-string: 4.0.0
-      is-builtin-module: 3.2.1
-      jsesc: 3.1.0
-      pluralize: 8.0.0
-      read-pkg-up: 7.0.1
-      regexp-tree: 0.1.27
-      regjsparser: 0.10.0
-      semver: 7.7.4
-      strip-indent: 3.0.0
-
   eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -16696,20 +16651,6 @@ snapshots:
       '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
 
-  eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
-      eslint: 9.39.2(jiti@1.21.7)
-      globals: 13.24.0
-      natural-compare: 1.4.0
-      nth-check: 2.1.1
-      postcss-selector-parser: 6.1.2
-      semver: 7.7.4
-      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
-      xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -16999,6 +16940,15 @@ snapshots:
     dependencies:
       flat-cache: 4.0.1
 
+  file-type@22.1.0:
+    dependencies:
+      '@tokenizer/inflate': 0.4.1
+      strtok3: 10.3.5
+      token-types: 6.1.2
+      uint8array-extras: 1.5.0
+    transitivePeerDependencies:
+      - supports-color
+
   file-uri-to-path@1.0.0: {}
 
   fill-range@7.1.1:
@@ -17866,6 +17816,8 @@ snapshots:
 
   kolorist@1.8.0: {}
 
+  krakatau-web@1.1.0-beta: {}
+
   launch-editor@2.12.0:
     dependencies:
       picocolors: 1.1.1
@@ -20484,6 +20436,8 @@ snapshots:
 
   smol-toml@1.6.0: {}
 
+  smol-toml@1.8.0: {}
+
   sortablejs@1.14.0: {}
 
   source-map-js@1.2.1: {}
@@ -20654,6 +20608,10 @@ snapshots:
     optionalDependencies:
       '@types/node': 24.12.2
 
+  strtok3@10.3.5:
+    dependencies:
+      '@tokenizer/token': 0.3.0
+
   structured-clone-es@1.0.0: {}
 
   style-mod@4.1.3: {}
@@ -20874,6 +20832,12 @@ snapshots:
 
   token-stream@1.0.0: {}
 
+  token-types@6.1.2:
+    dependencies:
+      '@borewit/text-codec': 0.2.2
+      '@tokenizer/token': 0.3.0
+      ieee754: 1.2.1
+
   totalist@3.0.1: {}
 
   tough-cookie@5.1.2:
@@ -20991,6 +20955,8 @@ snapshots:
 
   ufo@1.6.3: {}
 
+  uint8array-extras@1.5.0: {}
+
   ultrahtml@1.6.0: {}
 
   uncrypto@0.1.3: {}
@@ -21413,22 +21379,6 @@ snapshots:
       yaml: 2.8.2
     optional: true
 
-  vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
-    dependencies:
-      lightningcss: 1.32.0
-      picomatch: 4.0.4
-      postcss: 8.5.8
-      rolldown: 1.0.0-rc.12
-      tinyglobby: 0.2.15
-    optionalDependencies:
-      '@types/node': 24.12.2
-      esbuild: 0.27.3
-      fsevents: 2.3.3
-      jiti: 1.21.7
-      sass: 1.97.3
-      terser: 5.46.0
-      yaml: 2.8.2
-
   vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
     dependencies:
       lightningcss: 1.32.0
@@ -21605,19 +21555,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      esquery: 1.7.0
-      lodash: 4.17.23
-      semver: 7.7.4
-    transitivePeerDependencies:
-      - supports-color
-
   vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index d21d086c530..dfc3d2f9531 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,3 +2,6 @@ packages:
   - 'apps/*'
   - 'packages/*'
 minimumReleaseAge: 10080 # 7 days
+minimumReleaseAgeExclude:
+  - '@run-slicer/cfr'
+  - 'krakatau-web'

From 4ae0d112b7bfc4cad469079bcefdbbf12fb91e8b Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Fri, 2 Oct 2026 21:36:52 -0500
Subject: [PATCH 03/18] refactor: Cleanup, adjustments, styling mainly around
 File layout API

- Make footer for files tab collapsible either with a needed about of scrolling access or a pull tab button to make it appear
- Adjust the tooltip hover to be a wait for either hover or unhover to control when a tooltip will appear or disappear
- Remove shift show from file entry details tooltip
- Add new file actions to sidebar tree entries by abstracting the options out of file actionbar
- Remove bottom padding for files tab, add outlines for tab bar, fix top bar sizing inconsistencies when viewing file or folder
- Make refresh show the loading bar to indicate refresh state
- Refactor FileManagerContext to deduplicate methods and use FileInfo where possible
---
 .../src/pages/instance/files/index.vue        |  30 +-
 apps/frontend/src/app.vue                     |   6 +-
 .../src/components/ui/CollapsibleFooter.vue   |  94 ++++
 .../src/composables/collapsible-footer.ts     |  48 ++
 apps/frontend/src/layouts/default.vue         |   4 +-
 .../src/pages/hosting/manage/[id].vue         |   2 +-
 .../src/pages/hosting/manage/[id]/files.vue   |   8 +
 .../components/base/buttons/ContextMenu.vue   |   8 +-
 .../base/buttons/TeleportOverflowMenu.vue     |   6 +-
 .../buttons/button-menu/ButtonMenuItem.vue    |  14 +-
 .../buttons/button-menu/ButtonMenuSubmenu.vue |   6 +-
 .../ui/src/components/base/buttons/types.ts   |   5 +-
 .../ui/src/components/floating/Tooltip.vue    |  31 +-
 packages/ui/src/composables/modal-stack.ts    |   5 +-
 .../ui/src/composables/sticky-observer.ts     |  19 +-
 packages/ui/src/composables/use-rem-to-px.ts  |  32 ++
 packages/ui/src/composables/virtual-scroll.ts |  22 +-
 .../files-tab/components/FileActionBar.vue    |  94 +---
 .../files-tab/components/FileBrowserPanel.vue | 165 ++++++-
 .../files-tab/components/FileNavbar.vue       |  10 +-
 .../{FileTableRow.vue => FileRow.vue}         | 160 ++++---
 .../files-tab/components/FileTableHeader.vue  | 146 +++---
 .../shared/files-tab/components/FileTree.vue  |  75 +--
 .../components/editor/FileEditor.vue          |  37 +-
 .../components/tabs/FileTabPanel.vue          |   7 +-
 .../files-tab/components/tabs/FileTabs.vue    |  51 +-
 .../files-tab/composables/file-columns.ts     |  83 ++++
 .../files-tab/composables/file-drag-state.ts  |  14 +-
 .../files-tab/composables/file-sorting.ts     |   9 +-
 .../shared/files-tab/composables/file-tabs.ts |  77 +--
 .../files-tab/composables/file-undo-redo.ts   |  31 +-
 .../files-tab/composables/folder-actions.ts   | 102 ++++
 .../shared/files-tab/composables/index.ts     |   1 +
 .../shared/files-tab/composables/shift-key.ts |   4 -
 .../ui/src/layouts/shared/files-tab/index.ts  |   1 +
 .../src/layouts/shared/files-tab/layout.vue   | 185 +++----
 .../files-tab/providers/file-browser-ui.ts    |  12 +-
 .../files-tab/providers/file-manager.ts       |  59 ++-
 .../shared/files-tab/providers/index.ts       |   3 +-
 .../ui/src/layouts/shared/files-tab/types.ts  |  13 +-
 .../ui/src/layouts/shared/files-tab/utils.ts  |  30 ++
 .../layouts/wrapped/hosting/manage/files.vue  | 450 ++++++++++--------
 .../layouts/wrapped/hosting/manage/root.vue   |  18 +-
 .../layouts/wrapped/hosting/manage/utils.ts   |  34 ++
 packages/ui/src/providers/app-root.ts         |   3 +-
 packages/ui/src/providers/tooltip.ts          |  23 +-
 46 files changed, 1442 insertions(+), 795 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/CollapsibleFooter.vue
 create mode 100644 apps/frontend/src/composables/collapsible-footer.ts
 create mode 100644 packages/ui/src/composables/use-rem-to-px.ts
 rename packages/ui/src/layouts/shared/files-tab/components/{FileTableRow.vue => FileRow.vue} (77%)
 create mode 100644 packages/ui/src/layouts/shared/files-tab/composables/file-columns.ts
 create mode 100644 packages/ui/src/layouts/shared/files-tab/composables/folder-actions.ts
 delete mode 100644 packages/ui/src/layouts/shared/files-tab/composables/shift-key.ts
 create mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/utils.ts

diff --git a/apps/app-frontend/src/pages/instance/files/index.vue b/apps/app-frontend/src/pages/instance/files/index.vue
index 413829092e0..2fa4af9c65d 100644
--- a/apps/app-frontend/src/pages/instance/files/index.vue
+++ b/apps/app-frontend/src/pages/instance/files/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DirectoryEntries, EditingFile, FileItem, UploadState } from '@modrinth/ui'
+import type { DirectoryResult, EditingFile, FileItem, UploadState } from '@modrinth/ui'
 import {
 	commonMessages,
 	defineMessages,
@@ -10,6 +10,7 @@ import {
 	useDebugLogger,
 	useVIntl,
 } from '@modrinth/ui'
+import type { FileInfo } from '@modrinth/ui/src/layouts/shared/files-tab/providers/file-manager.ts'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { invoke } from '@tauri-apps/api/core'
 import { computed, effectScope, onScopeDispose, type Ref, ref, watch } from 'vue'
@@ -67,13 +68,14 @@ async function listDirectory(dirPath: string): Promise<FileItem[]> {
 	return invoke('plugin:files|file_list', { instanceId: instanceId.value, path: dirPath })
 }
 
-function isReadOnly(path: string): boolean {
-	const normalized = path.startsWith('/') ? path.slice(1) : path
-	const isReadOnlyItem = (item: FileItem) => item.path === normalized && item.readOnly === true
+function isReadOnly(file: FileInfo | null): boolean {
+	// TODO: HANDLE NULL BY CHECKING IF THE USER CAN CREATE FILES
+	if (file == null) return false
+	const isReadOnlyItem = (item: FileItem) => item.path === file.path && item.readOnly === true
 	return (
-		normalized.split('/')[0].toLowerCase() === 'mods' ||
+		file.path.split('/')[0].toLowerCase() === 'mods' ||
 		items.value.some(isReadOnlyItem) ||
-		[...directories.values()].some((entries) => entries.items.value.some(isReadOnlyItem))
+		[...directories.values()].some((entries) => entries.data.value.some(isReadOnlyItem))
 	)
 }
 
@@ -81,14 +83,14 @@ function toRelativePath(path: string) {
 	return path.split('/').filter(Boolean).join('/')
 }
 
-const directories = new Map<string, DirectoryEntries>()
+const directories = new Map<string, DirectoryResult>()
 const expandedDirectories: Ref<string[]> = ref([])
 
 /** Owns the lazily created directory queries so they're disposed with this page, wherever they were first requested from. */
 const directoryScope = effectScope()
 onScopeDispose(() => directoryScope.stop())
 
-function queryDirectoryEntries(relativePath: string): DirectoryEntries {
+function queryDirectoryEntries(relativePath: string): DirectoryResult {
 	const query = useQuery(
 		computed(() => ({
 			queryKey: instanceKeys.files(instancePage.instanceId.value, relativePath),
@@ -170,16 +172,15 @@ const isRefreshing = ref<boolean>(false)
 
 async function refresh() {
 	debug('refresh: called, currentPath =', currentPath.value, 'instanceRoot =', instanceRoot.value)
-	isRefreshing.value = true;
+	isRefreshing.value = true
 	await Promise.all([
 		directoryQuery.refetch(),
 		queryClient.invalidateQueries({
 			queryKey: [...instanceKeys.detail(instancePage.instanceId.value), 'files'],
-			predicate: (query) =>
-				query.queryKey[query.queryKey.length - 1] !== currentPath.value,
+			predicate: (query) => query.queryKey[query.queryKey.length - 1] !== currentPath.value,
 		}),
 	])
-	isRefreshing.value = false;
+	isRefreshing.value = false
 }
 
 function navigateTo(path: string) {
@@ -209,6 +210,11 @@ async function handleCreateItem(name: string, type: 'file' | 'directory') {
 			await writeBytes(targetPath, new Uint8Array(), true)
 		}
 		await refresh()
+		return {
+			name: name,
+			path: targetPath,
+			type: type,
+		}
 	} catch (e) {
 		addNotification({
 			title: formatMessage(commonMessages.createFailedLabel),
diff --git a/apps/frontend/src/app.vue b/apps/frontend/src/app.vue
index dbb3cad299c..87d95ce9b44 100644
--- a/apps/frontend/src/app.vue
+++ b/apps/frontend/src/app.vue
@@ -22,6 +22,9 @@ import {
 	LoadingBar,
 	NotificationPanel,
 } from '@modrinth/ui'
+import {provideAppRoot} from "@modrinth/ui/src/providers/app-root";
+import type {MaybeElement} from "@vueuse/core";
+import {computed,ref, watch} from "vue";
 
 import AdsConsentNotification from '~/components/ui/AdsConsentNotification.vue'
 import { setupProviders } from '~/providers/setup.ts'
@@ -33,9 +36,6 @@ import {
 	useIsSwitchingAccount,
 } from './composables/accounts'
 import { useAuth } from './composables/auth'
-import {provideAppRoot} from "@modrinth/ui/src/providers/app-root";
-import type {MaybeElement} from "@vueuse/core";
-import {ref, watch, computed} from "vue";
 
 const root = ref<MaybeElement>(null);
 
diff --git a/apps/frontend/src/components/ui/CollapsibleFooter.vue b/apps/frontend/src/components/ui/CollapsibleFooter.vue
new file mode 100644
index 00000000000..433f7bdd2c9
--- /dev/null
+++ b/apps/frontend/src/components/ui/CollapsibleFooter.vue
@@ -0,0 +1,94 @@
+<template>
+	<ModrinthFooter v-if="!collapsible" />
+	<template v-else>
+		<div class="relative h-0">
+			<button
+				type="button"
+				class="group absolute bottom-0 left-1/2 z-10 flex h-7 -translate-x-1/2 items-center gap-1 rounded-t-xl border border-b-0 border-solid border-surface-4 bg-surface-3 px-2 text-sm font-semibold text-secondary shadow-md transition-[opacity,transform,color] duration-200 hover:text-contrast focus-visible:text-contrast"
+				:class="toggleVisible ? 'scale-100 opacity-100' : 'pointer-events-none scale-90 opacity-0'"
+				:aria-expanded="expanded"
+				:aria-label="label"
+				:tabindex="toggleVisible ? 0 : -1"
+				@click="expanded ? collapse() : expand()"
+			>
+				<ChevronDownIcon v-if="expanded" class="size-4 shrink-0" aria-hidden="true" />
+				<ChevronUpIcon v-else class="size-4 shrink-0" aria-hidden="true" />
+				<span
+					class="max-w-0 overflow-hidden whitespace-nowrap transition-[max-width] duration-200 group-hover:max-w-[10rem] group-focus-visible:max-w-[10rem]"
+				>
+					{{ label }}
+				</span>
+			</button>
+		</div>
+		<div v-if="expanded" ref="footerRef">
+			<ModrinthFooter />
+		</div>
+	</template>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
+import { defineMessages, useVIntl } from '@modrinth/ui'
+import { useIntersectionObserver, useScroll } from '@vueuse/core'
+
+import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
+import { useCollapsibleFooter, useFooterRevealIntent } from '~/composables/collapsible-footer'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	showFooter: {
+		id: 'layout.footer.show',
+		defaultMessage: 'Show footer',
+	},
+	hideFooter: {
+		id: 'layout.footer.hide',
+		defaultMessage: 'Hide footer',
+	},
+})
+
+const BOTTOM_REVEAL_OFFSET = 24
+
+const collapsible = useCollapsibleFooter()
+const expanded = ref(false)
+const footerRef = ref<HTMLElement | null>(null)
+
+const { arrivedState } = useScroll(import.meta.client ? window : undefined, {
+	offset: { bottom: BOTTOM_REVEAL_OFFSET },
+})
+
+const toggleVisible = computed(() => expanded.value || arrivedState.bottom)
+const label = computed(() =>
+	formatMessage(expanded.value ? messages.hideFooter : messages.showFooter),
+)
+
+/** Set once the expanded footer has been on screen, so scrolling back away from it collapses it. */
+let footerSeen = false
+
+function expand() {
+	expanded.value = true
+	footerSeen = false
+	nextTick(() => footerRef.value?.scrollIntoView({ behavior: 'smooth', block: 'end' }))
+}
+
+function collapse() {
+	expanded.value = false
+	footerSeen = false
+}
+
+useIntersectionObserver(footerRef, ([entry]) => {
+	if (!expanded.value || !entry) return
+	if (entry.isIntersecting) {
+		footerSeen = true
+	} else if (footerSeen) {
+		collapse()
+	}
+})
+
+useFooterRevealIntent(
+	computed(() => collapsible.value && !expanded.value),
+	expand,
+)
+
+watch(collapsible, collapse)
+</script>
diff --git a/apps/frontend/src/composables/collapsible-footer.ts b/apps/frontend/src/composables/collapsible-footer.ts
new file mode 100644
index 00000000000..1b8aa10f4f3
--- /dev/null
+++ b/apps/frontend/src/composables/collapsible-footer.ts
@@ -0,0 +1,48 @@
+import { useEventListener } from '@vueuse/core'
+import type { Ref } from 'vue'
+
+const REVEAL_SCROLL_DISTANCE = 800
+const REVEAL_GESTURE_GAP_MS = 400
+const BOTTOM_TOLERANCE_PX = 4
+
+/**
+ * When `true`, the default layout collapses the site footer behind a "Show footer" control.
+ * Pages with tall, scroll-heavy content (e.g. the hosting files tab) enable it while mounted.
+ */
+export function useCollapsibleFooter() {
+	return useState('collapsible-footer', () => false)
+}
+
+/**
+ * Calls `onReveal` once the user keeps scrolling down past the bottom of the page with intent,
+ * i.e. roughly `REVEAL_SCROLL_DISTANCE` pixels of continuous downward wheel movement.
+ */
+export function useFooterRevealIntent(enabled: Ref<boolean>, onReveal: () => void) {
+	let accumulated = 0
+	let lastWheelAt = 0
+
+	useEventListener(
+		'wheel',
+		(event: WheelEvent) => {
+			if (!enabled.value) return
+
+			const atBottom =
+				window.innerHeight + window.scrollY >=
+				document.documentElement.scrollHeight - BOTTOM_TOLERANCE_PX
+			const now = performance.now()
+
+			if (event.deltaY <= 0 || !atBottom || now - lastWheelAt > REVEAL_GESTURE_GAP_MS) {
+				accumulated = 0
+			}
+			lastWheelAt = now
+			if (event.deltaY <= 0 || !atBottom) return
+
+			accumulated += event.deltaY
+			if (accumulated >= REVEAL_SCROLL_DISTANCE) {
+				accumulated = 0
+				onReveal()
+			}
+		},
+		{ passive: true },
+	)
+}
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index eefd9b3b8b0..06d63b009d7 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -809,7 +809,7 @@
 			<BatchCreditModal v-if="auth.user && isAdmin(auth.user)" ref="modal_batch_credit" />
 			<slot id="main" />
 		</main>
-		<ModrinthFooter />
+		<CollapsibleFooter />
 	</div>
 </template>
 <script setup>
@@ -898,10 +898,10 @@ import TaxComplianceBanner from '~/components/ui/banner/TaxComplianceBanner.vue'
 import TaxIdMismatchBanner from '~/components/ui/banner/TaxIdMismatchBanner.vue'
 import VerifyEmailBanner from '~/components/ui/banner/VerifyEmailBanner.vue'
 import ViewOnModrinthBanner from '~/components/ui/banner/ViewOnModrinthBanner.vue'
+import CollapsibleFooter from '~/components/ui/CollapsibleFooter.vue'
 import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
 import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
-import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
 import {
 	forgetStoredAccount,
 	switchToSignedOut,
diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index 2730e7f9cba..157f09037c4 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -30,7 +30,7 @@
 		"
 	>
 		<template #default="{ onReinstall, onReinstallFailed, constrainWidth}">
-			<NuxtPage :route="route" @reinstall="onReinstall" @reinstall-failed="onReinstallFailed" :constrain-width="constrainWidth"/>
+			<NuxtPage :route="route" :constrain-width="constrainWidth" @reinstall="onReinstall" @reinstall-failed="onReinstallFailed"/>
 		</template>
 	</ServersManageRootLayout>
 </template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/files.vue b/apps/frontend/src/pages/hosting/manage/[id]/files.vue
index f188432eef9..1b08921709b 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/files.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/files.vue
@@ -25,6 +25,14 @@ useHead({
 	title: computed(() => `Files - ${server.value?.name ?? 'Server'} - Modrinth`),
 })
 
+const collapsibleFooter = useCollapsibleFooter()
+onMounted(() => {
+	collapsibleFooter.value = true
+})
+onBeforeUnmount(() => {
+	collapsibleFooter.value = false
+})
+
 defineProps<{
 	constrainWidth?: boolean
 }>()
diff --git a/packages/ui/src/components/base/buttons/ContextMenu.vue b/packages/ui/src/components/base/buttons/ContextMenu.vue
index 31e40460f72..fbb73898cf7 100644
--- a/packages/ui/src/components/base/buttons/ContextMenu.vue
+++ b/packages/ui/src/components/base/buttons/ContextMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, useId, watch } from 'vue'
+import {computed, type DefineSetupFnComponent, nextTick, onMounted, ref, useId, watch} from 'vue'
 
 import type { AnchoredTeleportAnchor } from '../../../utils/use-anchored-teleport'
 import { pointAnchor, useAnchoredTeleport } from '../../../utils/use-anchored-teleport'
@@ -118,13 +118,13 @@ defineExpose({ open: openMenu, close: closeMenu })
 				<ButtonMenuSubmenu v-else-if="isSubmenu(option)" :option="option" @select="handleSelect">
 					<template #trigger>
 						<slot :name="option.id" :option="option">
-							<component :is="option.icon" v-if="option.icon" aria-hidden="true" />
+							<component :is="option.icon" v-if="option.icon" :class="option.iconClass?.value ?? ''" aria-hidden="true" />
 							{{ option.label }}
 						</slot>
 					</template>
 					<template #item="{ option: child }">
 						<slot :name="child.id" :option="child">
-							<component :is="child.icon" v-if="child.icon" aria-hidden="true" />
+							<component :is="child.icon" v-if="child.icon" :class="child.iconClass?.value ?? ''" aria-hidden="true" />
 							{{ child.label }}
 						</slot>
 					</template>
@@ -137,7 +137,7 @@ defineExpose({ open: openMenu, close: closeMenu })
 					@focus="focusedIndex = getItems().indexOf($event)"
 				>
 					<slot :name="option.id" :option="option">
-						<component :is="option.icon" v-if="option.icon" aria-hidden="true" />
+						<component :is="option.icon" v-if="option.icon" :class="option.iconClass ?? ''" aria-hidden="true" />
 						{{ option.label }}
 					</slot>
 				</ButtonMenuItem>
diff --git a/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue b/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue
index 51fb3f95879..7d494e9b51c 100644
--- a/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue
+++ b/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue
@@ -203,13 +203,13 @@ defineExpose({ open: openMenu, close: closeMenu })
 					>
 						<template #trigger>
 							<slot :name="option.id" :option="option">
-								<component :is="option.icon" v-if="option.icon" aria-hidden="true" />
+								<component :is="option.icon" v-if="option.icon" :class="option.iconClass?.value ?? ''" aria-hidden="true" />
 								{{ option.label }}
 							</slot>
 						</template>
 						<template #item="{ option: child }">
 							<slot :name="child.id" :option="child">
-								<component :is="child.icon" v-if="child.icon" aria-hidden="true" />
+								<component :is="child.icon" v-if="child.icon" :class="child.iconClass?.value ?? ''" aria-hidden="true" />
 								{{ child.label }}
 							</slot>
 						</template>
@@ -222,7 +222,7 @@ defineExpose({ open: openMenu, close: closeMenu })
 						@focus="focusedIndex = getItems().indexOf($event)"
 					>
 						<slot :name="option.id" :option="option">
-							<component :is="option.icon" v-if="option.icon" aria-hidden="true" />
+							<component :is="option.icon" v-if="option.icon" :class="option.iconClass?.value ?? ''" aria-hidden="true" />
 							{{ option.label }}
 						</slot>
 					</ButtonMenuItem>
diff --git a/packages/ui/src/components/base/buttons/button-menu/ButtonMenuItem.vue b/packages/ui/src/components/base/buttons/button-menu/ButtonMenuItem.vue
index 585d11fed91..e00811eafd1 100644
--- a/packages/ui/src/components/base/buttons/button-menu/ButtonMenuItem.vue
+++ b/packages/ui/src/components/base/buttons/button-menu/ButtonMenuItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
-import { computed, ref } from 'vue'
+import { computed, ref, toValue} from 'vue'
 import { RouterLink } from 'vue-router'
 
 import type { ButtonMenuAction, ButtonMenuLink } from '../types'
@@ -46,7 +46,7 @@ const itemAttrs = computed(() => ({
 }))
 
 function handleClick(event: MouseEvent) {
-	if (props.option.disabled) {
+	if (toValue(props.option.disabled)) {
 		event.preventDefault()
 		return
 	}
@@ -65,7 +65,7 @@ function handleKeydown(event: KeyboardEvent) {
 	// links don't fire on space the way buttons do
 	if (event.key !== ' ' || !isLink(props.option)) return
 	event.preventDefault()
-	if (props.option.disabled) return
+	if (toValue(props.option.disabled)) return
 	;(event.currentTarget as HTMLElement).click()
 }
 
@@ -92,7 +92,7 @@ function handleFocus(event: FocusEvent) {
 <template>
 	<div ref="wrapperElement" class="group/button-menu-item flex items-center">
 		<RouterLink
-			v-if="isLink(props.option) && props.option.to !== undefined && !props.option.disabled"
+			v-if="isLink(props.option) && props.option.to !== undefined && !toValue(props.option.disabled)"
 			v-tooltip="props.option.tooltip"
 			v-bind="itemAttrs"
 			:to="props.option.to"
@@ -118,13 +118,13 @@ function handleFocus(event: FocusEvent) {
 			v-else-if="isLink(props.option)"
 			v-tooltip="props.option.tooltip"
 			v-bind="itemAttrs"
-			:href="props.option.disabled ? undefined : props.option.href"
+			:href="toValue(props.option.disabled) ? undefined : props.option.href"
 			:target="props.option.target"
 			:rel="
 				props.option.rel ?? (props.option.target === '_blank' ? 'noopener noreferrer' : undefined)
 			"
 			:download="props.option.download"
-			:aria-disabled="props.option.disabled || undefined"
+			:aria-disabled="toValue(props.option.disabled) || undefined"
 			:class="[buttonMenuItemClasses, 'flex-1']"
 			@click="handleClick"
 			@keydown="handleKeydown"
@@ -148,7 +148,7 @@ function handleFocus(event: FocusEvent) {
 			v-tooltip="props.option.tooltip"
 			v-bind="itemAttrs"
 			type="button"
-			:aria-disabled="props.option.disabled || undefined"
+			:aria-disabled="toValue(props.option.disabled) || undefined"
 			:class="[buttonMenuItemClasses, 'flex-1']"
 			@click="handleClick"
 			@keydown="handleKeydown"
diff --git a/packages/ui/src/components/base/buttons/button-menu/ButtonMenuSubmenu.vue b/packages/ui/src/components/base/buttons/button-menu/ButtonMenuSubmenu.vue
index cf1fc1b6ef3..77e6a6efca8 100644
--- a/packages/ui/src/components/base/buttons/button-menu/ButtonMenuSubmenu.vue
+++ b/packages/ui/src/components/base/buttons/button-menu/ButtonMenuSubmenu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ChevronRightIcon } from '@modrinth/assets'
-import { computed, ref, toRef, useId } from 'vue'
+import { computed, ref, toRef, toValue,useId } from 'vue'
 
 import { useAnchoredTeleport } from '../../../../utils/use-anchored-teleport'
 import type {
@@ -76,7 +76,7 @@ const { handleMouseEnter, handleMouseLeave, cancelLeave } = useHoverIntent({
 
 async function openSubmenu(focus = true) {
 	cancelLeave()
-	if (props.option.disabled) return
+	if (toValue(toValue(props.option.disabled))) return
 	if (!isOpen.value) await open()
 	if (focus) focusItem(0)
 }
@@ -136,7 +136,7 @@ function handlePanelKeydown(event: KeyboardEvent) {
 		v-tooltip="props.option.tooltip"
 		v-bind="triggerAttrs"
 		type="button"
-		:aria-disabled="props.option.disabled || undefined"
+		:aria-disabled="toValue(props.option.disabled) || undefined"
 		:aria-expanded="isOpen"
 		:aria-controls="panelId"
 		aria-haspopup="menu"
diff --git a/packages/ui/src/components/base/buttons/types.ts b/packages/ui/src/components/base/buttons/types.ts
index a6dd78068e1..8960583e4f9 100644
--- a/packages/ui/src/components/base/buttons/types.ts
+++ b/packages/ui/src/components/base/buttons/types.ts
@@ -1,4 +1,4 @@
-import type { Component } from 'vue'
+import type {Component, ComputedRef, MaybeRefOrGetter} from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
 import type { AnchoredTeleportPlacement } from '../../../utils/use-anchored-teleport'
@@ -73,8 +73,9 @@ export interface ButtonMenuItemBase {
 	id: string
 	label: string
 	icon?: Component
+	iconClass?: ComputedRef<string>,
 	shown?: boolean
-	disabled?: boolean
+	disabled?: MaybeRefOrGetter<boolean>
 	tooltip?: string
 	remainOpen?: boolean
 	tone?: 'default' | ButtonColor
diff --git a/packages/ui/src/components/floating/Tooltip.vue b/packages/ui/src/components/floating/Tooltip.vue
index ea3519b177f..5829270e09f 100644
--- a/packages/ui/src/components/floating/Tooltip.vue
+++ b/packages/ui/src/components/floating/Tooltip.vue
@@ -40,6 +40,8 @@ const SIDES = {
 	left: { origin: 'right center', arrow: 'right', rotate: 315 },
 } as const
 
+type HoverWaitTimes = {hover?: number, unhover?: number};
+
 const props = withDefaults(
 	defineProps<{
 		disabled?: boolean
@@ -50,7 +52,10 @@ const props = withDefaults(
 		text?: string | null
 		content?: TooltipContent | null
 		panelClass?: string
-		allowHover?: boolean
+		/**
+		 * Wait time before closing or openning
+		 */
+		actionWait?: number | HoverWaitTimes
 	}>(),
 	{ disabled: false, theme: 'tooltip', placement: 'top' },
 )
@@ -87,6 +92,22 @@ watch(
 	{ flush: 'post' },
 )
 
+const isDisabled = computed(() => props.disabled)
+
+watch(isDisabled, (value) => {
+	if (trigger.value) {
+		if (value) {
+			if (trigger.value.matches(':hover')) {
+				onLeave();
+			}
+		} else {
+			if (trigger.value.matches(':hover')) {
+				onEnter();
+			}
+		}
+	}
+})
+
 watch(
 	referenceEl,
 	(el, prev, onCleanup) => {
@@ -202,7 +223,8 @@ function onEnter() {
 	if (props.disabled || !trigger.value) {
 		return
 	}
-	tooltipEnter(trigger.value)
+	const waitTime = props.actionWait;
+	tooltipEnter(trigger.value, waitTime ? (typeof waitTime === 'number' ? waitTime : waitTime.unhover) : undefined)
 }
 
 function onTooltipEnter() {
@@ -213,8 +235,9 @@ function onTooltipEnter() {
 
 function onLeave() {
 	const triggerEl = trigger.value ?? props.reference;
+	const waitTime = props.actionWait;
 	if (triggerEl) {
-		tooltipLeave(triggerEl, props.allowHover ? 500 : undefined);
+		tooltipLeave(triggerEl, waitTime ? (typeof waitTime === 'number' ? waitTime : waitTime.unhover) : undefined);
 	}
 }
 
@@ -256,7 +279,7 @@ function onFocusOut(event: FocusEvent) {
 				:key="jumpKey"
 				ref="floating"
 				class="`v-popper__inner z-[100010] rounded-lg border border-solid border-surface-5 bg-surface-3 px-3 py-1.5 text-sm font-medium text-contrast card-shadow`"
-				:class="[`v-popper--theme-${theme}`, moving && 'tooltip-moving', panelClass, allowHover ? 'pointer-events-none' : '']"
+				:class="[`v-popper--theme-${theme}`, moving && 'tooltip-moving', panelClass, unhoverWait ? 'pointer-events-none' : '']"
 				:style="[floatingStyles, { transformOrigin }]"
 				@mouseenter="onTooltipEnter"
 				@mouseleave="onLeave"
diff --git a/packages/ui/src/composables/modal-stack.ts b/packages/ui/src/composables/modal-stack.ts
index e457ad2a66c..829c273b18f 100644
--- a/packages/ui/src/composables/modal-stack.ts
+++ b/packages/ui/src/composables/modal-stack.ts
@@ -1,9 +1,10 @@
+import {useScrollLock} from "@vueuse/core";
 import { computed, type Ref, ref } from 'vue'
 
+import {injectAppRoot} from "#ui/providers/app-root.ts";
+
 import { dismissFloatingMenus } from '../providers/floating-menu'
 import { dismissTooltip } from '../providers/tooltip'
-import {useScrollLock} from "@vueuse/core";
-import {injectAppRoot} from "#ui/providers/app-root.ts";
 
 const isClient = typeof window !== 'undefined'
 
diff --git a/packages/ui/src/composables/sticky-observer.ts b/packages/ui/src/composables/sticky-observer.ts
index a455e06a157..b95ac4f356f 100644
--- a/packages/ui/src/composables/sticky-observer.ts
+++ b/packages/ui/src/composables/sticky-observer.ts
@@ -3,12 +3,21 @@ import { onUnmounted, ref, watch } from 'vue'
 
 import { useDebugLogger } from './debug-logger'
 
+export interface StickyObserverOptions {
+	/** Distance in px from the top of the viewport at which the target sticks (its CSS `top`). */
+	topOffset?: Ref<number>
+}
+
 /**
  * Observes when a target element becomes "stuck" (i.e. its natural position has scrolled out of view).
  * Injects a zero-height sentinel element before the target and uses IntersectionObserver to detect
- * when the sentinel leaves the viewport.
+ * when the sentinel scrolls past the target's sticky offset.
  */
-export function useStickyObserver(target: Ref<HTMLElement | null | undefined>, label?: string) {
+export function useStickyObserver(
+	target: Ref<HTMLElement | null | undefined>,
+	label?: string,
+	options: StickyObserverOptions = {},
+) {
 	const debug = useDebugLogger(`sticky-observer${label ? `:${label}` : ''}`)
 	const isStuck = ref(false)
 	let sentinel: HTMLElement | null = null
@@ -17,8 +26,8 @@ export function useStickyObserver(target: Ref<HTMLElement | null | undefined>, l
 	debug('init, target value:', target.value)
 
 	watch(
-		target,
-		(el, oldEl) => {
+		[target, () => Math.round(options.topOffset?.value ?? 0)],
+		([el, topOffset], [oldEl]) => {
 			debug('watch fired, el:', el, 'oldEl:', oldEl)
 			observer?.disconnect()
 			sentinel?.remove()
@@ -63,7 +72,7 @@ export function useStickyObserver(target: Ref<HTMLElement | null | undefined>, l
 							)
 						}
 					},
-					{ threshold: 0, rootMargin: '-1px 0px 0px 0px' },
+					{ threshold: 0, rootMargin: `-${topOffset + 1}px 0px 0px 0px` },
 				)
 				observer.observe(sentinel)
 				debug('observer started')
diff --git a/packages/ui/src/composables/use-rem-to-px.ts b/packages/ui/src/composables/use-rem-to-px.ts
new file mode 100644
index 00000000000..05d92aae803
--- /dev/null
+++ b/packages/ui/src/composables/use-rem-to-px.ts
@@ -0,0 +1,32 @@
+import {
+computed, type ComputedRef, type MaybeRefOrGetter,
+onMounted, onUnmounted, type Ref, 	ref, 	toValue
+} from 'vue'
+
+export interface RemCompute {
+	remToPx: (rem: MaybeRefOrGetter<number>) => ComputedRef<number>;
+	rootFontSize: Ref<number>;
+}
+
+export function useRemToPx(): RemCompute {
+	const rootFontSize = ref(16)
+
+	const updateRootFontSize = () => {
+		if (typeof window !== 'undefined') {
+			rootFontSize.value = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
+		}
+	}
+
+	onMounted(() => {
+		updateRootFontSize()
+		window.addEventListener('resize', updateRootFontSize)
+	})
+
+	onUnmounted(() => {
+		window.removeEventListener('resize', updateRootFontSize)
+	})
+
+	const remToPx = (rem: MaybeRefOrGetter<number>) => computed(() => toValue(rem) * rootFontSize.value)
+
+	return { remToPx, rootFontSize }
+}
diff --git a/packages/ui/src/composables/virtual-scroll.ts b/packages/ui/src/composables/virtual-scroll.ts
index d507e369d8a..2453706bbe3 100644
--- a/packages/ui/src/composables/virtual-scroll.ts
+++ b/packages/ui/src/composables/virtual-scroll.ts
@@ -1,6 +1,8 @@
 import type {ComputedRef, Ref} from 'vue'
 import { computed, ref, watch, watchEffect } from 'vue'
 
+import {useRemToPx} from "#ui/composables/use-rem-to-px.ts";
+
 export interface ScrollViewportOptions {
 	onScroll?: () => void
 	onResize?: () => void
@@ -8,6 +10,7 @@ export interface ScrollViewportOptions {
 
 export interface VirtualScrollOptions {
 	itemHeight: number
+	itemUnit?: 'px' | 'rem'
 	bufferSize?: number
 	initialItemCount?: number
 	enabled?: Ref<boolean>
@@ -131,9 +134,13 @@ export function useScrollViewport(options: ScrollViewportOptions = {}) {
 	}
 }
 
+// TODO: Add proper usage of returned itemHeight to have the single source of truth for what given
+// element height can be. Truly would be best to force component construction to require a method
+// that applies to automatically or allows you to apply it to better prevent from setting it?
 export function useVirtualScroll<T>(items: ComputedRef<T[]>, options: VirtualScrollOptions) {
 	const {
 		itemHeight,
+		itemUnit = 'px',
 		bufferSize = 5,
 		initialItemCount = 20,
 		enabled,
@@ -153,7 +160,11 @@ export function useVirtualScroll<T>(items: ComputedRef<T[]>, options: VirtualScr
 		onScroll: checkNearEnd,
 	})
 
-	const totalHeight = computed(() => items.value.length * itemHeight)
+	const { remToPx } = useRemToPx();
+
+	const height = itemUnit == 'rem' ? remToPx(itemHeight) : computed(() => itemHeight);
+
+	const totalHeight = computed(() => items.value.length * height.value)
 
 	const visibleRange = computed(() => {
 		if (enabled && !enabled.value) {
@@ -164,8 +175,8 @@ export function useVirtualScroll<T>(items: ComputedRef<T[]>, options: VirtualScr
 			return { start: 0, end: Math.min(items.value.length, initialItemCount) }
 		}
 
-		const start = Math.floor(relativeScrollTop.value / itemHeight)
-		const visibleCount = Math.ceil(viewportHeight.value / itemHeight)
+		const start = Math.floor(relativeScrollTop.value / height.value)
+		const visibleCount = Math.ceil(viewportHeight.value / height.value)
 		const rangeSize = visibleCount + bufferSize * 2
 
 		const rangeStart = Math.min(
@@ -181,7 +192,7 @@ export function useVirtualScroll<T>(items: ComputedRef<T[]>, options: VirtualScr
 	})
 
 	const visibleTop = computed(() =>
-		enabled && !enabled.value ? 0 : visibleRange.value.start * itemHeight,
+		enabled && !enabled.value ? 0 : visibleRange.value.start * height.value,
 	)
 
 	const visibleItems = computed(() =>
@@ -192,7 +203,7 @@ export function useVirtualScroll<T>(items: ComputedRef<T[]>, options: VirtualScr
 		if (index < 0 || index >= items.value.length) return
 		syncScrollState()
 		if (!listContainer.value || !scrollContainer.value) return
-		const top = containerOffset.value + index * itemHeight - (viewportHeight.value - itemHeight) / 2
+		const top = containerOffset.value + index * height.value - (viewportHeight.value - height.value) / 2
 		scrollContainer.value.scrollTo({ top: Math.max(0, top), behavior: 'instant' })
 		syncScrollState()
 	}
@@ -215,6 +226,7 @@ export function useVirtualScroll<T>(items: ComputedRef<T[]>, options: VirtualScr
 	return {
 		listContainer,
 		totalHeight,
+		itemHeight: `${itemHeight} ${itemUnit}`,
 		visibleRange,
 		visibleTop,
 		visibleItems,
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
index 5571fb62185..4d543b3a9ef 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
@@ -54,80 +54,10 @@
 					:tooltip="disabled ? disabledTooltip : undefined"
 					size="lg"
 					class="justify-center gap-2 !w-auto !px-2.5 !rounded-xl"
-					:options="[
-						{
-							id: 'file',
-							label: formatMessage(messages.newFile),
-							action: () => $emit('create', 'file'),
-						},
-						{
-							id: 'directory',
-							label: formatMessage(messages.newFolder),
-							action: () => $emit('create', 'directory'),
-						},
-						{
-							id: 'upload',
-							label: formatMessage(messages.uploadFile),
-							action: () => $emit('upload'),
-						},
-						{ type: 'divider', shown: showInstallFromUrl ?? false },
-						{
-							id: 'upload-zip',
-							label: formatMessage(messages.uploadFromZip),
-							shown: false,
-							action: () => $emit('uploadZip'),
-						},
-						{
-							id: 'install-from-url',
-							label: formatMessage(messages.uploadFromZipUrl),
-							shown: showInstallFromUrl ?? false,
-							action: () => $emit('unzipFromUrl', false),
-						},
-						{
-							id: 'install-cf-pack',
-							label: formatMessage(messages.installCurseForgePack),
-							shown: showInstallFromUrl ?? false,
-							action: () => $emit('unzipFromUrl', true),
-						},
-						{ type: 'divider', shown: showInstallFromUrl ?? false },
-						{
-							id: 'refresh',
-							label: formatMessage(commonMessages.refreshButton),
-							shown: showRefreshButton ?? false,
-							action: () => handleRefresh(),
-							disabled: isRefreshing,
-						},
-					]"
+					:options="options"
 				>
 					<PlusIcon aria-hidden="true" class="h-5 w-5" />
 					<DropdownIcon aria-hidden="true" class="h-5 w-5" />
-					<template #file>
-						<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newFile) }}
-					</template>
-					<template #directory>
-						<FolderOpenIcon aria-hidden="true" /> {{ formatMessage(messages.newFolder) }}
-					</template>
-					<template #upload>
-						<UploadIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFile) }}
-					</template>
-					<template #upload-zip>
-						<FileArchiveIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFromZip) }}
-					</template>
-					<template #install-from-url>
-						<LinkIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFromZipUrl) }}
-					</template>
-					<template #install-cf-pack>
-						<CurseForgeIcon aria-hidden="true" />
-						{{ formatMessage(messages.installCurseForgePack) }}
-					</template>
-					<template #refresh>
-						<RefreshCwIcon
-							aria-hidden="true"
-							class="h-5 w-5 transition-transform"
-							:class="refreshing ? 'animate-spin' : ''"
-						/>
-						{{ formatMessage(commonMessages.refreshButton) }}
-					</template>
 				</TeleportOverflowMenu>
 			</div>
 
@@ -136,6 +66,7 @@
 					v-if="isLogFile"
 					v-tooltip="formatMessage(messages.shareToMclogs)"
 					type="quiet"
+					size="lg"
 					:label="formatMessage(messages.shareToMclogs)"
 					@click="$emit('share')"
 				>
@@ -144,6 +75,7 @@
 				<IconButton
 					v-tooltip="formatMessage(messages.findInFile)"
 					:type="isEditorFindOpen ? 'colored' : 'quiet'"
+					size="lg"
 					:color="isEditorFindOpen ? 'brand' : undefined"
 					:label="formatMessage(messages.findInFile)"
 					:aria-pressed="isEditorFindOpen"
@@ -153,7 +85,8 @@
 				</IconButton>
 			</div>
 		</div>
-		<div v-if="!isEditing && !hasNav" class="flex items-center gap-2"
+		<div
+v-if="!isEditing && !hasNav" class="flex items-center gap-2"
 			 :class="[
 
 			]"
@@ -180,22 +113,24 @@ import {
 	DropdownIcon,
 	FileArchiveIcon,
 	FolderOpenIcon,
-	PanelLeftOpenIcon,
-	PanelLeftCloseIcon,
 	LinkIcon,
+	PanelLeftCloseIcon,
+	PanelLeftOpenIcon,
 	PlusIcon,
 	RefreshCwIcon,
 	SearchIcon,
 	ShareIcon,
 	UploadIcon,
 } from '@modrinth/assets'
-import { computed, ref } from 'vue'
+import {computed} from 'vue'
 
 import { IconButton, TeleportOverflowMenu } from '#ui/components/base/buttons'
-import Input from '../../../../components/base/inputs/Input.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n.ts'
+import {useFileActions} from "#ui/layouts/shared/files-tab/composables/folder-actions.ts";
 import { commonMessages } from '#ui/utils/common-messages.ts'
 
+import Input from '../../../../components/base/inputs/Input.vue'
+
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
@@ -323,4 +258,11 @@ const isLogFile = computed(() => {
 		props.editingFilePath?.endsWith('.log')
 	)
 })
+
+const { options } = useFileActions(
+	(type) => emit('create', type),
+	(type) => type == 'file' ? emit('upload') : emit('uploadZip'),
+	props.showInstallFromUrl ? (type) => emit('unzipFromUrl', type == 'cf') : undefined,
+	props.showRefreshButton ? { handleRefresh, isRefreshing: computed(() => refreshing.value ?? false) } : undefined,
+);
 </script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
index 31d6d18c1ce..21f5bbd1094 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
@@ -4,15 +4,22 @@
 		ref="panelRoot"
 		class="flex w-full scroll-mt-[var(--files-sticky-top,0px)] flex-col gap-3 p-1 pl-2"
 		:class="{ 'snap-start': isFileActive }"
-		:style="{ '--files-navbar-height': `${navbarHeight}px` }"
+		:style="{
+			'--files-navbar-height': `${navbarHeight}px`,
+			'--files-trailing-space': `${trailingSpace}px`,
+			'--files-table-header-top': `calc(var(--files-sticky-top, 0px) + ${navbarHeight}px + ${TAB_STRIP_HEIGHT}px)`,
+		}"
 	>
-		<div ref="navbarWrapper">
+		<div
+			ref="navbarWrapper"
+			class="sticky top-[var(--files-sticky-top,0px)] z-30 bg-surface-1 py-1"
+		>
 		<FileNavbar
 			:sidebar-open="sidebarOpen"
 			:breadcrumbs="ui.breadcrumbSegments.value"
 			:is-editing="ui.isEditing.value"
-			:editing-file-name="ctx.editingFile.value?.name"
-			:editing-file-path="ctx.editingFile.value?.path"
+			:editing-file-name="ctx.currentFile.value?.name"
+			:editing-file-path="ctx.currentFile.value?.path"
 			:is-editing-image="ui.fileEditorApi.value?.isEditingImage.value ?? false"
 			:is-editor-find-open="ui.fileEditorApi.value?.isFindOpen.value ?? false"
 			:search-query="ui.searchQuery.value"
@@ -30,7 +37,7 @@
 			@navigate-home="() => {
 				ui.navigateToSegment(-1)
 			}"
-			@prefetch-home="ui.handlePrefetchHome"
+			@prefetch-home="ui.handleHomePrefetch"
 			@update:search-query="(value) => (ui.searchQuery.value = value)"
 			@create="ui.showCreateModal"
 			@upload="ui.initiateFileUpload"
@@ -49,8 +56,8 @@
 				class="shrink-0 overflow-hidden"
 				:class="
 					isFileActive
-						? 'h-[calc(var(--files-viewport-height,100dvh)_-_var(--files-sticky-top,0px)_-_var(--files-navbar-height,3rem)_-_1.25rem_-_2px)] min-h-[24rem]'
-						: 'h-10'
+						? 'h-[calc(var(--files-viewport-height,100dvh)_-_var(--files-sticky-top,0px)_-_var(--files-navbar-height,3rem)_-_18px_-_var(--files-trailing-space,0px))] min-h-[24rem]'
+						: 'sticky top-[calc(var(--files-sticky-top,0px)_+_var(--files-navbar-height,0px))] z-20 h-10'
 				"
 			>
 				<FileTabs />
@@ -77,10 +84,15 @@
 						:all-selected="ui.allSelected.value"
 						:some-selected="ui.someSelected.value"
 						:is-stuck="isLabelBarStuck"
-						:show-details="!ui.sidebarOpen.value"
+						:columns="shownColumns"
+						:enabled-columns="enabledColumns"
+						:details-enabled="detailsEnabled"
 						@sort="ui.handleSort"
 						@toggle-all="ui.toggleSelectAll"
+						@toggle-column="toggleColumn"
+						@toggle-details="detailsEnabled = !detailsEnabled"
 					/>
+					<ReadyTransition :pending="listingPending">
 					<div
 						v-if="filteredItems.length > 0"
 						ref="virtualListContainer"
@@ -88,9 +100,10 @@
 						:style="{ minHeight: `${totalHeight}px`, overflowAnchor: 'none' }"
 					>
 						<div class="absolute w-full" :style="{ top: `${visibleTop}px` }">
-							<FileTableRow
+							<FileRow
 								v-for="(item, idx) in visibleItems"
 								:key="item.path"
+								:class="`h-[${itemHeight}]`"
 								:count="item.count"
 								:created="item.created"
 								:modified="item.modified"
@@ -101,10 +114,10 @@
 								:index="visibleRange.start + idx"
 								:is-last="visibleRange.start + idx === filteredItems.length - 1"
 								:selected="ui.selectedItems.value.has(item.path)"
-								:write-disabled="ui.isBusy.value || !!ctx.isReadOnly?.(item.path)"
-								:write-disabled-tooltip="ctx.isReadOnly?.(item.path) ? ctx.readOnlyReason?.value : ui.busyTooltip.value"
-								:show-details="!ui.sidebarOpen.value"
-								:container-width="ui.containerWidth.value"
+								:write-disabled="ui.isBusy.value || !!ctx.isReadOnly?.(item)"
+								:write-disabled-tooltip="ctx.isReadOnly?.(item) ? ctx.readOnlyReason?.value : ui.busyTooltip.value"
+								:columns="shownColumns"
+								:has-hidden-details="hasHiddenDetails"
 								@extract="() => ui.handleExtractItem(item)"
 								@delete="() => ui.showDeleteModal(item)"
 								@rename="() => ui.showRenameModal(item)"
@@ -112,12 +125,14 @@
 								@zip="() => ui.handleZip(item)"
 								@move="() => ui.showMoveModal(item)"
 								@move-direct-to="ui.handleDirectMove"
-								@edit="() => ui.handleEditFile(item)"
-								@navigate="() => ui.handleNavigateToFolder(item)"
+								@edit="() => ui.handleNavigateTo(item)"
+								@navigate="() => ui.handleNavigateTo(item)"
 								@open-in-new-tab="() => ui.handleOpenInNewTab(item)"
-								@hover="() => ui.handleItemHover(item)"
+								@hover="() => ui.handleItemPrefetch(item)"
 								@contextmenu="ui.handleContextMenu"
 								@toggle-select="() => ui.toggleItemSelection(item)"
+								@create="ui.showCreateModal"
+								@upload="ui.initiateFileUpload"
 							/>
 						</div>
 					</div>
@@ -135,6 +150,7 @@
 							</p>
 						</div>
 					</div>
+					</ReadyTransition>
 				</FileUploadDragAndDrop>
 			</div>
 		</div>
@@ -143,19 +159,22 @@
 
 <script setup lang="ts">
 import { FolderOpenIcon } from '@modrinth/assets'
-import { useElementSize } from '@vueuse/core'
+import { useElementSize, useEventListener } from '@vueuse/core'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
+import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
 import { defineMessages, useVIntl } from '#ui/composables'
 import { useStickyObserver } from '#ui/composables/sticky-observer'
 import { findScrollableAncestor, useVirtualScroll } from '#ui/composables/virtual-scroll.ts'
 import { injectFileManager } from '#ui/layouts'
+import { injectLoadingState } from '#ui/providers/loading-state'
 
+import { useFileColumns } from '../composables/file-columns'
 import { injectFileBrowserUI } from '../providers/file-browser-ui'
 import FileManagerError from './FileManagerError.vue'
 import FileNavbar from './FileNavbar.vue'
+import FileRow from './FileRow.vue'
 import FileTableHeader from './FileTableHeader.vue'
-import FileTableRow from './FileTableRow.vue'
 import FileTabs from './tabs/FileTabs.vue'
 import FileUploadDragAndDrop from './upload/FileUploadDragAndDrop.vue'
 
@@ -190,31 +209,66 @@ const props = withDefaults(defineProps<{
 });
 
 const sidebarOpen = computed(() => ui.sidebarOpen.value);
-const isFileActive = computed(() => ui.fileTabs.activeLocation.value.kind === 'file')
+const isFileActive = computed(() => ui.fileTabs.activeLocation.value.type === 'file')
 
 const filteredItems = computed(() => ui.filteredItems.value)
 
+/** Only the listing fades while a directory loads for the first time; tabs, navbar and sidebar stay put. */
+const listingPending = computed(() => ctx.loading.value && ui.items.value.length === 0)
+
+const loadingState = injectLoadingState(null)
+let refreshToken: symbol | null = null
+
+function endRefreshLoading() {
+	if (refreshToken) loadingState?.end(refreshToken)
+	refreshToken = null
+}
+
+watch(
+	() => ctx.isRefreshing.value,
+	(refreshing) => {
+		if (!refreshing) return endRefreshLoading()
+		if (loadingState && !refreshToken) refreshToken = loadingState.begin()
+	},
+	{ immediate: true },
+)
+onBeforeUnmount(endRefreshLoading)
+
 // Virtual scroll
 const {
 	listContainer: virtualListContainer,
 	totalHeight,
+	itemHeight,
 	visibleRange,
 	visibleTop,
 	visibleItems,
 } = useVirtualScroll(filteredItems, {
-	itemHeight: 52.8,
+	itemHeight: 3.25,
+	itemUnit: 'rem',
 	bufferSize: 5,
 })
 
-// Sticky observer for the table header
-const fileUploadRef = ref<InstanceType<typeof FileUploadDragAndDrop>>()
-const fileUploadEl = computed(() => fileUploadRef.value?.$el as HTMLElement | null)
-const { isStuck: isLabelBarStuck } = useStickyObserver(fileUploadEl)
+const { detailsEnabled, enabledColumns, shownColumns, hasHiddenDetails, toggleColumn } =
+	useFileColumns(ui.containerWidth)
+
+const TAB_STRIP_HEIGHT = 40
 
 const panelRoot = ref<HTMLElement | null>(null)
 const navbarWrapper = ref<HTMLElement | null>(null)
 const { height: navbarHeight } = useElementSize(navbarWrapper, undefined, { box: 'border-box' })
 
+/** Where the table header sticks: below the host's sticky offset, the sticky navbar and the tab strip. */
+const tableHeaderStickyTop = computed(() => {
+	const hostOffset = navbarWrapper.value ? parseFloat(getComputedStyle(navbarWrapper.value).top) || 0 : 0
+	return hostOffset + navbarHeight.value + TAB_STRIP_HEIGHT
+})
+
+const fileUploadRef = ref<InstanceType<typeof FileUploadDragAndDrop>>()
+const fileUploadEl = computed(() => fileUploadRef.value?.$el as HTMLElement | null)
+const { isStuck: isLabelBarStuck } = useStickyObserver(fileUploadEl, undefined, {
+	topOffset: tableHeaderStickyTop,
+})
+
 /** Brings the navbar and file viewer to the top of the scroll area, unless they're already there. */
 function scrollPanelIntoView() {
 	const panel = panelRoot.value
@@ -234,8 +288,65 @@ const activeFileKey = computed(() =>
 		: null,
 )
 
+/**
+ * Scroll space below the file viewer within the page's content (stopping at `<main>`, so a site
+ * footer doesn't count). The editor is shortened by this much so that scrolling to the end of the
+ * page can never push the tab strip under the sticky navbar. Parents' `min-height` slack is
+ * deliberately ignored, since it shrinks as the editor grows.
+ */
+const trailingSpace = ref(0)
+
+function measureTrailingSpace() {
+	const panel = panelRoot.value
+	if (!panel) return
+
+	const scrollContainer = findScrollableAncestor(panel)
+	const boundary =
+		panel.closest('main') ??
+		(scrollContainer instanceof Window ? document.body : scrollContainer)
+
+	let total = 0
+	let element: HTMLElement = panel
+	while (element !== boundary && element.parentElement) {
+		const parent = element.parentElement
+		const elementBottom = element.getBoundingClientRect().bottom
+		let contentBottom = elementBottom + (parseFloat(getComputedStyle(element).marginBottom) || 0)
+
+		for (let sibling = element.nextElementSibling; sibling; sibling = sibling.nextElementSibling) {
+			const style = getComputedStyle(sibling)
+			if (style.display === 'none' || style.position === 'absolute' || style.position === 'fixed') {
+				continue
+			}
+			const siblingBottom = sibling.getBoundingClientRect().bottom + (parseFloat(style.marginBottom) || 0)
+			contentBottom = Math.max(contentBottom, siblingBottom)
+		}
+
+		const parentStyle = getComputedStyle(parent)
+		total +=
+			contentBottom -
+			elementBottom +
+			(parseFloat(parentStyle.paddingBottom) || 0) +
+			(parseFloat(parentStyle.borderBottomWidth) || 0)
+		element = parent
+	}
+
+	trailingSpace.value = Math.max(0, Math.round(total))
+}
+
 watch(activeFileKey, (key) => {
-	if (key) nextTick(scrollPanelIntoView)
+	if (!key) return
+	nextTick(() => {
+		measureTrailingSpace()
+		nextTick(scrollPanelIntoView)
+	})
+})
+
+watch(navbarHeight, () => {
+	if (isFileActive.value) nextTick(measureTrailingSpace)
+})
+
+useEventListener('resize', () => {
+	if (isFileActive.value) measureTrailingSpace()
 })
 
 /**
@@ -260,7 +371,9 @@ function setViewerSnapping(enabled: boolean) {
 watch(isFileActive, setViewerSnapping, { flush: 'post' })
 onMounted(() => {
 	setViewerSnapping(isFileActive.value)
-	if (isFileActive.value) nextTick(scrollPanelIntoView)
+	if (!isFileActive.value) return
+	measureTrailingSpace()
+	nextTick(scrollPanelIntoView)
 })
 onBeforeUnmount(() => setViewerSnapping(false))
 </script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
index a02b569a099..aa5dfb5a954 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
@@ -1,6 +1,7 @@
 <template>
 	<FileActionBar  ref="baseRef" v-bind="{ ...$props, ...$attrs }">
-		<nav v-if="breadcrumbs != null"
+		<nav
+v-if="breadcrumbs != null"
 		 	:aria-label="formatMessage(messages.breadcrumbNavigation)"
 		 	class="m-0 -ml-2 flex min-w-0 flex-shrink items-center p-0"
 		>
@@ -112,12 +113,13 @@
 
 <script setup lang="ts">
 
-import FileActionBar from "#ui/layouts/shared/files-tab/components/FileActionBar.vue";
-import type {Properties, EmitCallbacks} from "#ui/layouts/shared/files-tab/components/FileActionBar.vue";
-import {Button, IconButton} from "#ui/components/base/buttons";
 import {ChevronLeftIcon, ChevronRightIcon, HomeIcon} from "@modrinth/assets";
 import {onBeforeUnmount, onMounted, ref, watch} from "vue";
+
+import {Button, IconButton} from "#ui/components/base/buttons";
 import {defineMessages, useVIntl} from "#ui/composables";
+import type {EmitCallbacks,Properties} from "#ui/layouts/shared/files-tab/components/FileActionBar.vue";
+import FileActionBar from "#ui/layouts/shared/files-tab/components/FileActionBar.vue";
 
 const { formatMessage } = useVIntl()
 
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue b/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
similarity index 77%
rename from packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue
rename to packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
index 7866bd65e1f..c53d7d38ba1 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
@@ -1,13 +1,13 @@
 <template>
-	<Tooltip :disabled="detailsTooltipDisabled" :allow-hover="true">
+	<Tooltip :action-wait="{hover: 600, unhover: 200}">
 		<li
 			role="option"
-			:class="[containerClasses, isDragSource ? 'opacity-50' : '', compact ? 'h-9' : 'h-[52.8px]']"
-			:style="depth != null ? { paddingLeft: `${0.5 + depth}rem` } : undefined"
+			:class="[containerClasses, isDragSource ? 'opacity-50' : '', compact ? 'h-8' : 'h-[3.25rem]', ]"
+			:style="depth != null ? { paddingLeft: `${(depth * basePaddingFactor)}rem`} : undefined"
 			tabindex="0"
 			:data-file-path="path"
 			:data-file-type="type"
-			:aria-expanded="isTreeRow && type === 'directory' ? expanded : undefined"
+			:aria-expanded="canExpand ? expanded : undefined"
 			:aria-current="active ? 'location' : undefined"
 			@click="selectItem"
 			@auxclick="handleAuxClick"
@@ -22,15 +22,19 @@
 				:key="level"
 				aria-hidden="true"
 				class="pointer-events-none absolute inset-y-0 w-px"
-				:class="level === activeGuideLevel ? 'bg-brand' : 'bg-surface-5'"
-				:style="{ left: `${level + 0.125}rem` }"
+				:class="level === activeGuideLevel ? 'bg-brand-highlight' : 'bg-surface-5'"
+				:style="{
+					left: `${((level * basePaddingFactor) - 0.125)}rem`,
+					height: `calc(2rem + ${isLast && level == depth ? '0rem' : '(0.25rem / 2)'})`,
+					top: index != 0 ? `calc(-0.25rem / 2)` : ''
+				}"
 			/>
-			<div class="pointer-events-none flex flex-1 items-center truncate" :class="compact ? 'gap-2' : 'gap-3'">
+			<div class="pointer-events-none flex flex-1 items-center truncate h-full" :class="compact ? 'gap-2' : 'gap-3'">
 				<button
-					v-if="isTreeRow && type === 'directory'"
+					v-if="canExpand"
 					type="button"
 					tabindex="-1"
-					class="pointer-events-auto -mr-1 flex size-5 shrink-0 items-center justify-center rounded border-none bg-transparent p-0 text-secondary hover:bg-surface-5 hover:text-contrast"
+					class="pointer-events-auto -mr-1 flex size-5 shrink-0 items-center justify-center rounded border-none bg-transparent p-0 text-secondary hover:bg-surface-5 hover:text-contrast h-full"
 					:aria-label="formatMessage(expanded ? messages.collapseFolder : messages.expandFolder)"
 					@click.stop="emit('toggle-expand')"
 					@pointerdown.stop
@@ -38,7 +42,8 @@
 					<ChevronRightIcon class="size-4 transition-transform duration-100" :class="{ 'rotate-90': expanded }" />
 				</button>
 				<span v-else-if="isTreeRow" class="-mr-1 size-5 shrink-0" aria-hidden="true" />
-				<Checkbox v-if="!selectionWithinActionMenu"
+				<Checkbox
+v-if="!selectionWithinActionMenu"
 					class="pointer-events-auto"
 					:model-value="selected"
 					@click.stop
@@ -61,15 +66,14 @@
 				</div>
 				<EditIcon v-if="hoveringToEdit && isEditableFile && !compact" />
 			</div>
-			<div class="pointer-events-auto flex w-fit flex-shrink-0 items-center gap-4 @[900px]:gap-12">
-				<span v-if="showDetails" class="hidden w-[100px] text-nowrap text-sm text-secondary @[900px]:block">
-					{{ formattedSize }}
-				</span>
-				<span v-if="showDetails" class="hidden w-[160px] text-nowrap text-sm text-secondary @[900px]:block">
-					{{ formattedCreationDate }}
-				</span>
-				<span v-if="showDetails" class="hidden w-[160px] text-nowrap text-sm text-secondary @[900px]:block">
-					{{ formattedModifiedDate }}
+			<div v-if="!isTreeRow" class="pointer-events-auto flex w-fit flex-shrink-0 items-center gap-6">
+				<span
+					v-for="column in shownColumnDefinitions"
+					:key="column.id"
+					class="truncate text-nowrap text-sm text-secondary"
+					:style="{ width: `${column.width}px` }"
+				>
+					{{ columnValues[column.id] }}
 				</span>
 				<div class="grid min-w-[51px] shrink-0 items-center justify-items-end">
 					<span
@@ -100,12 +104,22 @@
 			<div class="flex flex-col w-fit">
 				<h3 class="mb-2 pb-1 mt-0 text-base font-semibold border-0 border-b-[1px] border-solid border-divider">Details</h3>
 				<div class="gap-1 grid grid-cols-2">
-					<span class="text-nowrap text-sm text-secondary">
-						{{ formatMessage(messages.size) }}
-					</span>
-					<span class="text-nowrap text-sm text-secondary">
-						{{ formattedSize }}
-					</span>
+					<template v-if="type === 'directory'">
+						<span class="text-nowrap text-sm text-secondary">
+							{{ formatMessage(messages.items) }}
+						</span>
+						<span class="text-nowrap text-sm text-secondary">
+							{{ columnValues.items }}
+						</span>
+					</template>
+					<template v-else>
+						<span class="text-nowrap text-sm text-secondary">
+							{{ formatMessage(messages.size) }}
+						</span>
+						<span class="text-nowrap text-sm text-secondary">
+							{{ columnValues.size }}
+						</span>
+					</template>
 					<span class="text-nowrap text-sm text-secondary">
 						{{ formatMessage(messages.created) }}
 					</span>
@@ -132,6 +146,7 @@ import {
 	ClipboardCopyIcon,
 	DownloadIcon,
 	EditIcon,
+	FileIcon,
 	FolderArchiveIcon,
 	FolderCogIcon,
 	FolderOpenIcon,
@@ -146,17 +161,21 @@ import {
 } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
-import type { ButtonMenuOption } from '#ui/components/base/buttons'
+import { Tooltip } from "#ui/components";
+import type {ButtonMenuLeafOption, ButtonMenuOption} from '#ui/components/base/buttons'
 import { TeleportOverflowMenu } from '#ui/components/base/buttons'
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import { useFormatBytes } from '#ui/composables'
 import { useFormatDateTime } from '#ui/composables/format-date-time'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { injectFileManager } from '#ui/layouts'
+import { useFileActions } from "#ui/layouts/shared/files-tab/composables/folder-actions.ts";
 import { injectNotificationManager } from '#ui/providers/web-notifications'
 import { getFileExtensionIcon } from '#ui/utils/auto-icons'
 import { commonMessages } from '#ui/utils/common-messages'
 import { canOpenInFileEditor, getFileExtension } from '#ui/utils/file-extensions'
 
+import { FILE_COLUMNS, type FileColumn } from '../composables/file-columns'
 import {
 	fileDragActive,
 	fileDragData,
@@ -164,16 +183,15 @@ import {
 	startFileDrag,
 	wasRecentDrag,
 } from '../composables/file-drag-state'
-import { useShiftKey } from '../composables/shift-key'
-import { injectFileManager } from '../providers/file-manager'
 import type { FileItem } from '../types'
 import { joinDisplayPath } from '../utils'
-import {Tooltip} from "#ui/components";
 
 const { formatMessage } = useVIntl()
 const { addNotification } = injectNotificationManager()
 const ctx = injectFileManager()
 
+const basePaddingFactor = 0.75;
+
 const messages = defineMessages({
 	itemCount: {
 		id: 'files.row.item-count',
@@ -187,6 +205,10 @@ const messages = defineMessages({
 		id: 'files.table-header.size',
 		defaultMessage: 'Size',
 	},
+	items: {
+		id: 'files.table-header.items',
+		defaultMessage: 'Items',
+	},
 	created: {
 		id: 'files.table-header.created',
 		defaultMessage: 'Created',
@@ -199,6 +221,10 @@ const messages = defineMessages({
 		id: 'files.row.open-in-new-tab',
 		defaultMessage: 'Open in new tab',
 	},
+	newOrUpload: {
+		id: 'files.row.upload-or-create',
+		defaultMessage: 'New Entry',
+	},
 	expandFolder: {
 		id: 'files.row.expand-folder',
 		defaultMessage: 'Expand folder',
@@ -216,15 +242,21 @@ const props = defineProps<
 		selected: boolean
 		writeDisabled?: boolean
 		writeDisabledTooltip?: string
-		showDetails: boolean
-		containerWidth?: number | undefined
+		/** Detail columns to render, in order. */
+		columns?: FileColumn[]
+		/** Whether some details aren't shown as columns, so hovering offers them in a tooltip. */
+		hasHiddenDetails?: boolean
 		selectionWithinActionMenu?: boolean
 		/** Smaller row, used by the sidebar tree. */
 		compact?: boolean
 		/** Nesting level in the sidebar tree; indents the row. */
 		depth?: number
-		/** Whether this tree row's directory is expanded. Leave undefined for non-tree rows. */
+		/** Renders as a sidebar tree row: expand chevron, no columns or inline actions menu. */
+		isTreeRow?: boolean
+		/** Whether this tree row's directory is expanded. */
 		expanded?: boolean
+		/** Whether this tree row's directory can be expanded, i.e. isn't known to be empty. */
+		expandable?: boolean
 		/** Highlights the row as the active tab's current location. */
 		active?: boolean
 		/** Tree guide level (1-based) to highlight, marking the directory the active location is in. */
@@ -247,25 +279,24 @@ const emit = defineEmits<{
 			| 'open-in-new-tab',
 		item: Pick<FileItem, 'name' | 'type' | 'path'>,
 	): void
+	(e: 'create', type: 'file' | 'directory'): void
+	(e: 'upload', type: 'file' | 'zip'): void,
 	(
 		e: 'moveDirectTo',
-		item: Pick<FileItem, 'name' | 'type' | 'path'> & { destination: string },
+		item: Pick<FileItem, 'name' | 'type' | 'path'>, destination: string,
 	): void
 	(e: 'contextmenu', event: MouseEvent, options: ButtonMenuOption[]): void
 	(e: 'toggle-select'): void
 	(e: 'toggle-expand'): void
 }>()
 
-const isTreeRow = computed(() => props.expanded !== undefined)
-
-const shiftHeld = useShiftKey()
+const canExpand = computed(
+	() => !!props.isTreeRow && props.type === 'directory' && props.expandable !== false,
+)
 
-/** Compact rows only show details while Shift is held; full rows show them when the columns are hidden. */
-const detailsTooltipDisabled = computed(() => {
-	if (props.compact) return !shiftHeld.value
-	if (props.containerWidth != null) return props.containerWidth > 900 ? props.showDetails : false
-	return props.showDetails
-})
+const shownColumnDefinitions = computed(() =>
+	(props.columns ?? []).flatMap((id) => FILE_COLUMNS.filter((column) => column.id === id)),
+)
 const canOpenInTab = computed(() => props.type === 'directory' || isEditableFile.value)
 
 const isDropTarget = computed(
@@ -286,8 +317,8 @@ const formatBytes = useFormatBytes()
 const containerClasses = computed(() => {
 	const dropTarget = isDropTarget.value
 	return [
-		'group relative m-0 flex w-full select-none items-center justify-between overflow-hidden border-0 border-solid border-surface-4 pl-3 focus:!outline-none',
-		props.compact ? 'rounded-lg py-1 pr-1' : 'border-t py-2 pr-3',
+		'group relative m-0 flex w-full select-none items-center justify-between overflow-x-clip border-0 border-solid border-surface-4 pl-3 focus:!outline-none',
+		props.compact ? 'rounded-lg pr-2 overflow-y-visible' : 'border-t py-2 pr-3 overflow-y-hidden',
 		dropTarget
 			? '!bg-brand-highlight'
 			: props.active
@@ -313,13 +344,25 @@ function getFullPath() {
 	return joinDisplayPath(ctx.basePath?.value, props.path)
 }
 
+const { options } = useFileActions(
+	(type) => emit('create', type),
+	(type) => emit('upload', type),
+);
+
 const menuOptions = computed<ButtonMenuOption[]>(() => {
 	const item = { name: props.name, type: props.type, path: props.path }
 	const wd = props.writeDisabled
 	const wdTooltip = props.writeDisabledTooltip
 	return [
 		{
-			id: 'copy-filename',
+			type: "submenu",
+			id: 'upload-create',
+			label: formatMessage(messages.newOrUpload),
+			icon: FileIcon,
+			options: options.value as ButtonMenuLeafOption[],
+		},
+		{
+			id: 'select-entry',
 			label: formatMessage(commonMessages.selectEntryLabel),
 			icon: iconComponent.value,
 			action: () => {
@@ -334,6 +377,7 @@ const menuOptions = computed<ButtonMenuOption[]>(() => {
 			shown: canOpenInTab.value,
 			action: () => emit('open-in-new-tab', item),
 		},
+		{ type: 'divider' },
 		{
 			id: 'copy-filename',
 			label: formatMessage(commonMessages.copyFilenameButton),
@@ -356,7 +400,7 @@ const menuOptions = computed<ButtonMenuOption[]>(() => {
 			},
 		},
 		{
-			id: 'select-entry',
+			id: 'open-in-folder',
 			label: formatMessage(commonMessages.openInFolderButton),
 			icon: FolderOpenIcon,
 			shown: !!ctx.openInFolder,
@@ -449,14 +493,13 @@ const isEditableFile = computed(() => {
 	return false
 })
 
-const formattedSize = computed(() => {
-	if (props.type === 'directory') {
-		return formatMessage(messages.itemCount, { count: props.count ?? 0 })
-	}
-
-	if (props.size == null) return ''
-	return formatBytes(props.size)
-})
+const columnValues = computed<Record<FileColumn, string>>(() => ({
+	size: props.size != null ? formatBytes(props.size) : '',
+	items:
+		props.type === 'directory' ? formatMessage(messages.itemCount, { count: props.count ?? 0 }) : '',
+	created: formattedCreationDate.value,
+	modified: formattedModifiedDate.value,
+}))
 
 function openContextMenu(event: MouseEvent) {
 	event.preventDefault()
@@ -504,7 +547,7 @@ function handleAuxClick(event: MouseEvent) {
 function handleKeydown(event: KeyboardEvent) {
 	if (event.key === 'Enter') {
 		selectItem()
-	} else if (isTreeRow.value && props.type === 'directory') {
+	} else if (canExpand.value) {
 		if (event.key === 'ArrowRight' && !props.expanded) emit('toggle-expand')
 		if (event.key === 'ArrowLeft' && props.expanded) emit('toggle-expand')
 	}
@@ -516,12 +559,7 @@ function handlePointerDown(e: PointerEvent) {
 		{ name: props.name, type: props.type, path: props.path },
 		e,
 		(source, destination) => {
-			emit('moveDirectTo', {
-				name: source.name,
-				type: source.type as FileItem['type'],
-				path: source.path,
-				destination,
-			})
+			emit('moveDirectTo', source, destination)
 		},
 	)
 }
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
index 6d66d34f78f..0b03e2d202d 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
@@ -1,14 +1,13 @@
 <template>
 	<div
-		aria-hidden="true"
-		class="sticky top-0 z-10 flex h-12 w-full select-none flex-row items-center justify-between bg-surface-3 pl-3 pr-4 font-medium transition-[border-radius] duration-100"
+		class="sticky top-[var(--files-table-header-top,0px)] z-10 flex h-[3rem] w-full select-none flex-row items-center justify-between bg-surface-3 pl-3 pr-3 font-medium transition-[border-radius] duration-100 border-0 border-t border-solid border-surface-5"
 		:class="
 			isStuck
 				? 'rounded-none border-0 border-y border-solid border-surface-4 shadow-md before:pointer-events-none before:absolute before:inset-x-0 before:-top-4 before:h-5 before:bg-surface-3'
 				: ''
 		"
 	>
-		<div class="flex flex-1 items-center gap-3">
+		<div class="flex min-w-0 flex-1 items-center gap-3">
 			<Checkbox
 				:model-value="allSelected"
 				:indeterminate="someSelected && !allSelected"
@@ -20,84 +19,55 @@
 				@click="$emit('sort', 'name')"
 			>
 				<span>{{ formatMessage(messages.name) }}</span>
-				<ChevronUpIcon
-					v-if="sortField === 'name' && !sortDesc"
-					class="h-4 w-4"
-					aria-hidden="true"
-				/>
-				<ChevronDownIcon
-					v-if="sortField === 'name' && sortDesc"
-					class="h-4 w-4"
-					aria-hidden="true"
-				/>
+				<ChevronUpIcon v-if="sortField === 'name' && !sortDesc" class="h-4 w-4" aria-hidden="true" />
+				<ChevronDownIcon v-if="sortField === 'name' && sortDesc" class="h-4 w-4" aria-hidden="true" />
 			</button>
 		</div>
-		<div class="flex shrink-0 items-center gap-4 @[900px]:gap-12">
-			<button v-if="showDetails"
-							class="hidden w-[100px] appearance-none items-center justify-start gap-1 border-0 bg-transparent p-0 font-semibold hover:text-primary @[900px]:flex"
-				:class="sortField === 'size' ? 'text-contrast' : 'text-secondary'"
-				@click="$emit('sort', 'size')"
-			>
-				<span>{{ formatMessage(messages.size) }}</span>
-				<ChevronUpIcon
-					v-if="sortField === 'size' && !sortDesc"
-					class="h-4 w-4"
-					aria-hidden="true"
-				/>
-				<ChevronDownIcon
-					v-if="sortField === 'size' && sortDesc"
-					class="h-4 w-4"
-					aria-hidden="true"
-				/>
-			</button>
-			<button v-if="showDetails"
-							class="hidden w-[160px] appearance-none items-center justify-start gap-1 border-0 bg-transparent p-0 font-semibold hover:text-primary @[900px]:flex"
-				:class="sortField === 'created' ? 'text-contrast' : 'text-secondary'"
-				@click="$emit('sort', 'created')"
-			>
-				<span>{{ formatMessage(messages.created) }}</span>
-				<ChevronUpIcon
-					v-if="sortField === 'created' && !sortDesc"
-					class="h-4 w-4"
-					aria-hidden="true"
-				/>
-				<ChevronDownIcon
-					v-if="sortField === 'created' && sortDesc"
-					class="h-4 w-4"
-					aria-hidden="true"
-				/>
-			</button>
-			<button v-if="showDetails"
-							class="hidden w-[160px] appearance-none items-center justify-start gap-1 border-0 bg-transparent p-0 font-semibold hover:text-primary @[900px]:flex"
-				:class="sortField === 'modified' ? 'text-contrast' : 'text-secondary'"
-				@click="$emit('sort', 'modified')"
+		<div class="flex shrink-0 items-center gap-6">
+			<button
+				v-for="column in shownColumnDefinitions"
+				:key="column.id"
+				class="flex appearance-none items-center justify-start gap-1 border-0 bg-transparent p-0 font-semibold hover:text-primary"
+				:class="sortField === column.sortField ? 'text-contrast' : 'text-secondary'"
+				:style="{ width: `${column.width}px` }"
+				@click="$emit('sort', column.sortField)"
 			>
-				<span>{{ formatMessage(messages.modified) }}</span>
+				<span class="truncate">{{ formatMessage(columnMessages[column.id]) }}</span>
 				<ChevronUpIcon
-					v-if="sortField === 'modified' && !sortDesc"
-					class="h-4 w-4"
+					v-if="sortField === column.sortField && !sortDesc"
+					class="h-4 w-4 shrink-0"
 					aria-hidden="true"
 				/>
 				<ChevronDownIcon
-					v-if="sortField === 'modified' && sortDesc"
-					class="h-4 w-4"
+					v-if="sortField === column.sortField && sortDesc"
+					class="h-4 w-4 shrink-0"
 					aria-hidden="true"
 				/>
 			</button>
-			<span class="min-w-[51px] shrink-0 text-nowrap text-right font-semibold text-secondary">{{
-				formatMessage(commonMessages.actionsLabel)
-			}}</span>
+			<div class="flex min-w-[51px] shrink-0 justify-end">
+				<TeleportOverflowMenu
+					v-tooltip="formatMessage(messages.columns)"
+					type="quiet"
+					:label="formatMessage(messages.columns)"
+					:options="columnOptions"
+				>
+					<SettingsIcon class="h-5 w-5" aria-hidden="true" />
+				</TeleportOverflowMenu>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
+import { ChevronDownIcon, ChevronUpIcon, SettingsIcon } from '@modrinth/assets'
+import { computed } from 'vue'
 
+import type { ButtonMenuOption } from '#ui/components/base/buttons'
+import { TeleportOverflowMenu } from '#ui/components/base/buttons'
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { commonMessages } from '#ui/utils/common-messages'
 
+import { FILE_COLUMNS, type FileColumn } from '../composables/file-columns'
 import type { FileSortField } from '../types'
 
 const { formatMessage } = useVIntl()
@@ -107,10 +77,25 @@ const messages = defineMessages({
 		id: 'files.table-header.name',
 		defaultMessage: 'Name',
 	},
+	columns: {
+		id: 'files.table-header.columns',
+		defaultMessage: 'Columns',
+	},
+	showDetails: {
+		id: 'files.table-header.show-details',
+		defaultMessage: 'Show details',
+	},
+})
+
+const columnMessages = defineMessages({
 	size: {
 		id: 'files.table-header.size',
 		defaultMessage: 'Size',
 	},
+	items: {
+		id: 'files.table-header.items',
+		defaultMessage: 'Items',
+	},
 	created: {
 		id: 'files.table-header.created',
 		defaultMessage: 'Created',
@@ -121,17 +106,48 @@ const messages = defineMessages({
 	},
 })
 
-defineProps<{
+const props = defineProps<{
 	sortField: FileSortField
 	sortDesc: boolean
 	allSelected: boolean
 	someSelected: boolean
 	isStuck: boolean
-	showDetails: boolean
+	/** Columns currently rendered, after fitting them to the available width. */
+	columns: FileColumn[]
+	/** Columns the user has chosen to show. */
+	enabledColumns: FileColumn[]
+	detailsEnabled: boolean
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
 	sort: [field: FileSortField]
 	'toggle-all': []
+	'toggle-column': [column: FileColumn]
+	'toggle-details': []
 }>()
+
+const shownColumnDefinitions = computed(() =>
+	props.columns.flatMap((id) => FILE_COLUMNS.filter((column) => column.id === id)),
+)
+
+const columnOptions = computed<ButtonMenuOption[]>(() => [
+	{
+		id: 'show-details',
+		label: formatMessage(messages.showDetails),
+		selected: props.detailsEnabled,
+		remainOpen: true,
+		action: () => emit('toggle-details'),
+	},
+	{ type: 'divider' },
+	...FILE_COLUMNS.map(
+		(column): ButtonMenuOption => ({
+			id: `column-${column.id}`,
+			label: formatMessage(columnMessages[column.id]),
+			selected: props.enabledColumns.includes(column.id),
+			disabled: !props.detailsEnabled,
+			remainOpen: true,
+			action: () => emit('toggle-column', column.id),
+		}),
+	),
+])
 </script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
index 7cd049b3d2f..b978f2c306a 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="flex flex-col gap-0.5" :aria-label="formatMessage(messages.fileTree)">
-		<template v-for="row in rows" :key="row.key">
+		<template v-for="(row, index) in rows" :key="row.key">
 			<div
 				v-if="row.kind === 'loading'"
 				class="flex h-9 items-center gap-2 text-sm text-secondary"
@@ -16,8 +16,8 @@
 			>
 				{{ formatMessage(row.depth === 0 ? messages.emptyFolder : messages.emptySubfolder) }}
 			</div>
-			<FileTableRow
-				v-else
+			<FileRow
+				v-else-if="row.kind === 'item'"
 				:count="row.item.count"
 				:created="row.item.created"
 				:modified="row.item.modified"
@@ -25,18 +25,20 @@
 				:path="row.item.path"
 				:type="row.item.type"
 				:size="row.item.size"
-				:index="0"
-				:is-last="false"
+				:index="index"
+				:is-last="index + 1 == rows.length"
 				:selected="ui.selectedItems.value.has(row.item.path)"
-				:write-disabled="ui.isBusy.value || !!ctx.isReadOnly?.(row.item.path)"
+				:write-disabled="ui.isBusy.value || !!ctx.isReadOnly?.(row.item)"
 				:write-disabled-tooltip="
-					ctx.isReadOnly?.(row.item.path) ? ctx.readOnlyReason?.value : ui.busyTooltip.value
+					ctx.isReadOnly?.(row.item) ? ctx.readOnlyReason?.value : ui.busyTooltip.value
 				"
-				:show-details="false"
+				has-hidden-details
 				:selection-within-action-menu="true"
 				compact
 				:depth="row.depth"
 				:expanded="row.expanded"
+				:expandable="row.expandable"
+				is-tree-row
 				:active="row.path === activePath"
 				:active-guide-level="activeGuideLevel(row.path)"
 				@extract="() => ui.handleExtractItem(row.item)"
@@ -46,13 +48,15 @@
 				@zip="() => ui.handleZip(row.item)"
 				@move="() => ui.showMoveModal(row.item)"
 				@move-direct-to="ui.handleDirectMove"
-				@edit="() => ui.handleEditFile(row.item)"
+				@edit="() => ui.handleNavigateTo(row.item)"
 				@navigate="() => openDirectory(row.path, row.item)"
 				@open-in-new-tab="() => ui.handleOpenInNewTab(row.item)"
 				@toggle-expand="() => toggleExpanded(row.path)"
 				@hover="() => prefetch(row)"
 				@contextmenu="ui.handleContextMenu"
 				@toggle-select="() => ui.toggleItemSelection(row.item)"
+				@create="ui.showCreateModal"
+				@upload="ui.initiateFileUpload"
 			/>
 		</template>
 	</div>
@@ -63,16 +67,24 @@ import { SpinnerIcon } from '@modrinth/assets'
 import { computed, watch } from 'vue'
 
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import {infoFrom, parentInfoFrom} from "#ui/layouts/shared/files-tab/utils.ts";
 import { canOpenInFileEditor } from '#ui/utils/file-extensions'
 
-import { directoryOf, normalizeFilePath } from '../composables/file-tabs'
 import { injectFileBrowserUI } from '../providers/file-browser-ui'
 import { injectFileManager } from '../providers/file-manager'
 import type { FileItem } from '../types'
-import FileTableRow from './FileTableRow.vue'
+import FileRow from './FileRow.vue'
 
 type TreeRow =
-	| { kind: 'item'; key: string; item: FileItem; path: string; depth: number; expanded: boolean }
+	| {
+			kind: 'item'
+			key: string
+			item: FileItem
+			path: string
+			depth: number
+			expanded: boolean
+			expandable: boolean
+	  }
 	| { kind: 'loading' | 'empty'; key: string; depth: number }
 
 const ROOT_PATH = '/'
@@ -103,9 +115,9 @@ const ui = injectFileBrowserUI()
 const tree = ctx.directoryTree
 
 const activePath = computed(() => ui.fileTabs.activeLocation.value.path)
-const activeDirectory = computed(() => directoryOf(ui.fileTabs.activeLocation.value))
+const activeDirectory = computed(() => parentInfoFrom(ui.fileTabs.activeLocation.value))
 const activeDirectoryDepth = computed(
-	() => activeDirectory.value.split('/').filter(Boolean).length,
+	() => activeDirectory.value.path.split('/').filter(Boolean).length,
 )
 
 function activeGuideLevel(path: string) {
@@ -115,14 +127,19 @@ function activeGuideLevel(path: string) {
 const expandedPaths = computed(() => new Set(tree.expandedEntries.value))
 const query = computed(() => ui.searchQuery.value.trim().toLowerCase())
 
+/** Directories known to be empty can't be expanded; an unknown count stays expandable. */
+function isExpandable(item: FileItem) {
+	return item.type === 'directory' && item.count !== 0
+}
+
 function compareEntries(a: FileItem, b: FileItem) {
 	if (a.type !== b.type) return a.type === 'directory' ? -1 : 1
 	return a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' })
 }
 
 function collectRows(path: string, depth: number): TreeRow[] {
-	const entries = tree.get(path)
-	const items = entries.items.value
+	const entries = tree.get(infoFrom(path))
+	const items = entries.data.value
 
 	if (items.length === 0) {
 		if (entries.isLoading.value) return [{ kind: 'loading', key: `loading:${path}`, depth }]
@@ -131,9 +148,9 @@ function collectRows(path: string, depth: number): TreeRow[] {
 
 	const rows: TreeRow[] = []
 	for (const item of [...items].sort(compareEntries)) {
-		const itemPath = normalizeFilePath(item.path)
-		const expanded = item.type === 'directory' && expandedPaths.value.has(itemPath)
-		const children = expanded ? collectRows(itemPath, depth + 1) : []
+		const expandable = isExpandable(item)
+		const expanded = expandable && expandedPaths.value.has(item.path)
+		const children = expanded ? collectRows(item.path, depth + 1) : []
 
 		if (query.value) {
 			const matches = item.name.toLowerCase().includes(query.value)
@@ -141,7 +158,10 @@ function collectRows(path: string, depth: number): TreeRow[] {
 			if (!matches && !hasMatchingChild) continue
 		}
 
-		rows.push({ kind: 'item', key: itemPath, item, path: itemPath, depth, expanded }, ...children)
+		rows.push(
+			{ kind: 'item', key: item.path, item, path: item.path, depth, expanded, expandable },
+			...children,
+		)
 	}
 	return rows
 }
@@ -161,22 +181,21 @@ function toggleExpanded(path: string) {
 }
 
 function openDirectory(path: string, item: FileItem) {
-	setExpanded(path, true)
-	ui.handleNavigateToFolder(item)
+	if (isExpandable(item)) setExpanded(path, true)
+	ui.handleNavigateTo(item)
 }
 
 function prefetch(row: Extract<TreeRow, { kind: 'item' }>) {
-	if (row.item.type === 'directory') {
-		tree.prefetch(row.path)
-	} else if (canOpenInFileEditor(row.item.name)) {
-		ctx.prefetchFile?.(row.item.path)
+	const { item } = row;
+	if (item.type === 'directory' || canOpenInFileEditor(item.name)) {
+		tree.prefetch(item)
 	}
 }
 
 watch(
-	() => directoryOf(ui.fileTabs.activeLocation.value),
+	() => parentInfoFrom(ui.fileTabs.activeLocation.value),
 	(directory) => {
-		const segments = directory.split('/').filter(Boolean)
+		const segments = directory.path.split('/').filter(Boolean)
 		const missing = segments
 			.map((_, index) => `/${segments.slice(0, index + 1).join('/')}`)
 			.filter((path) => !expandedPaths.value.has(path))
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
index c0da22283ea..ffe6ae40547 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
@@ -57,13 +57,13 @@ import { injectModrinthClient } from '#ui/providers'
 import { injectNotificationManager } from '#ui/providers/web-notifications'
 import { getEditorLanguage, getFileExtension, isImageFile } from '#ui/utils/file-extensions'
 
-import { injectFileManager } from '../../providers/file-manager'
+import {type FileInfo, injectFileManager} from '../../providers/file-manager'
 import type { EditingFile } from '../../types'
 import EditorFindReplace from './EditorFindReplace.vue'
 import FileImageViewer from './FileImageViewer.vue'
 
 const props = defineProps<{
-	file: EditingFile | null
+	file: FileInfo<'file'> | null
 	editorComponent: Component | null
 	/** Fill the parent's height (e.g. a dockview panel) instead of sizing to the window. */
 	fillHeight?: boolean
@@ -157,7 +157,7 @@ const editorLanguage = computed(() => {
 	return getEditorLanguage(ext)
 })
 const isEditorReadOnly = computed(
-	() => (ctx.isBusy?.value ?? false) || (ctx.isReadOnly?.(props.file?.path ?? '') ?? false),
+	() => (ctx.isBusy?.value ?? false) || (ctx.isReadOnly?.(props.file) ?? false),
 )
 
 watch(isEditorReadOnly, (readOnly) => {
@@ -178,20 +178,40 @@ watch(
 	{ immediate: true },
 )
 
-async function loadFileContent(file: { name: string; path: string }) {
+async function loadFileContent(file: FileInfo<'file'>) {
 	isLoading.value = true
 	try {
 		if (!props.fillHeight) window.scrollTo(0, 0)
 		const extension = getFileExtension(file.name)
-		const normalizedPath = file.path.startsWith('/') ? file.path : `/${file.path}`
+		const result = ctx.directoryTree.get(file);
+
+		const holder = Promise.withResolvers<ArrayBuffer>();
+
+		const intervalId = setInterval(() => {
+			if (!result.isLoading.value) {
+				const data = result.data.value;
+
+				if (data != null) {
+					clearInterval(intervalId);
+					holder.resolve(data);
+				}
+			}
+
+			if (result.loadError.value != null) {
+				clearInterval(intervalId);
+				holder.reject(result.loadError.value);
+			}
+		});
+
+		const data = await holder.promise;
 
 		if (isImageFile(extension)) {
-			const content = await ctx.readFileAsBlob(normalizedPath)
+			const content = new Blob([data])
 			isEditingImage.value = true
 			imagePreview.value = content
 		} else {
 			isEditingImage.value = false
-			const content = await ctx.readFile(normalizedPath)
+			const content = new TextDecoder().decode(data);
 			fileContent.value = content
 			originalContent.value = content
 		}
@@ -255,8 +275,7 @@ async function saveFileContent(exit: boolean = false) {
 	if (isEditorReadOnly.value) return
 
 	try {
-		const normalizedPath = props.file.path.startsWith('/') ? props.file.path : `/${props.file.path}`
-		await ctx.writeFile(normalizedPath, fileContent.value)
+		await ctx.writeFile(props.file, new TextEncoder().encode(fileContent.value).buffer)
 
 		originalContent.value = fileContent.value
 
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabPanel.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabPanel.vue
index 9dd935b54e3..6c30d9c57ce 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabPanel.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabPanel.vue
@@ -1,6 +1,6 @@
 <template>
 	<FileEditor
-		v-if="location?.kind === 'file'"
+		v-if="location?.type === 'file'"
 		:key="location.path"
 		ref="fileEditorRef"
 		:file="location"
@@ -17,6 +17,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { currentLocation, type FileTabPanelParams } from '../../composables/file-tabs'
 import { type FileEditorBridge, injectFileBrowserUI } from '../../providers/file-browser-ui'
 import FileEditor from '../editor/FileEditor.vue'
+import type {FileInfo} from "#ui/layouts/shared/files-tab/providers/file-manager.ts";
 
 const props = defineProps<{
 	params: {
@@ -30,7 +31,9 @@ const ui = injectFileBrowserUI()
 const tabId = props.params.params.tabId
 const location = computed(() => {
 	const tab = ui.fileTabs.getTab(tabId)
-	return tab ? currentLocation(tab) : null
+	if (tab == null) return null;
+	const location = currentLocation(tab);
+	return location.type == 'file' ? location as FileInfo<'file'> : null;
 })
 
 const fileEditorRef = ref<InstanceType<typeof FileEditor>>()
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue
index 52734c69b50..0198326fcc1 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="dockview-theme-dark h-full w-full">
+	<div class="file-tabs dockview-theme-dark h-full w-full">
 		<DockviewVue
 			class="h-full w-full"
 			:theme="theme"
@@ -40,25 +40,32 @@ onBeforeUnmount(() => ui.fileTabs.onDispose())
 </script>
 
 <style>
-.dockview-theme-modrinth {
-	--dv-group-view-background-color: var(--surface-2);
-	--dv-tabs-and-actions-container-background-color: var(--surface-3);
-	--dv-tabs-and-actions-container-height: 2.5rem;
-	--dv-tabs-and-actions-container-font-size: 0.875rem;
-	--dv-activegroup-visiblepanel-tab-background-color: var(--surface-2);
-	--dv-activegroup-hiddenpanel-tab-background-color: var(--surface-3);
-	--dv-inactivegroup-visiblepanel-tab-background-color: var(--surface-2);
-	--dv-inactivegroup-hiddenpanel-tab-background-color: var(--surface-3);
-	--dv-activegroup-visiblepanel-tab-color: var(--color-contrast);
-	--dv-activegroup-hiddenpanel-tab-color: var(--color-text-default);
-	--dv-inactivegroup-visiblepanel-tab-color: var(--color-text-default);
-	--dv-inactivegroup-hiddenpanel-tab-color: var(--color-text-tertiary);
-	--dv-tab-divider-color: var(--surface-5);
-	--dv-separator-border: var(--surface-5);
-	--dv-paneview-header-border-color: var(--surface-5);
-	--dv-icon-hover-background-color: var(--surface-5);
-	--dv-drag-over-background-color: var(--color-brand-highlight);
-	--dv-active-sash-color: var(--color-brand);
-	--dv-tabs-container-scrollbar-color: var(--surface-5);
-}
+	.dockview-theme-modrinth {
+		--dv-group-view-background-color: var(--surface-2);
+		--dv-tabs-and-actions-container-background-color: var(--surface-3);
+		--dv-tabs-and-actions-container-height: 2.5rem;
+		--dv-tabs-and-actions-container-font-size: 0.875rem;
+		--dv-activegroup-visiblepanel-tab-background-color: var(--surface-2);
+		--dv-activegroup-hiddenpanel-tab-background-color: var(--surface-3);
+		--dv-inactivegroup-visiblepanel-tab-background-color: var(--surface-2);
+		--dv-inactivegroup-hiddenpanel-tab-background-color: var(--surface-3);
+		--dv-activegroup-visiblepanel-tab-color: var(--color-contrast);
+		--dv-activegroup-hiddenpanel-tab-color: var(--color-text-default);
+		--dv-inactivegroup-visiblepanel-tab-color: var(--color-text-default);
+		--dv-inactivegroup-hiddenpanel-tab-color: var(--color-text-tertiary);
+		--dv-tab-divider-color: var(--surface-5);
+		--dv-separator-border: var(--surface-5);
+		--dv-paneview-header-border-color: var(--surface-5);
+		--dv-icon-hover-background-color: var(--surface-5);
+		--dv-drag-over-background-color: var(--color-brand-highlight);
+		--dv-active-sash-color: var(--color-brand);
+		--dv-tabs-container-scrollbar-color: var(--surface-5);
+	}
+
+	.dv-tab {
+		border-width: 0px;
+		border-right-width: 1px;
+		border-style: solid;
+		border-color: var(--surface-5)
+	}
 </style>
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-columns.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-columns.ts
new file mode 100644
index 00000000000..a9be00d1ba9
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-columns.ts
@@ -0,0 +1,83 @@
+import { useLocalStorage } from '@vueuse/core'
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+
+import type { FileSortField } from '../types'
+
+export type FileColumn = 'size' | 'items' | 'created' | 'modified'
+
+export interface FileColumnDefinition {
+	id: FileColumn
+	/** Column width in px, shared by the header and the rows so they line up. */
+	width: number
+	sortField: FileSortField
+}
+
+export const FILE_COLUMNS: FileColumnDefinition[] = [
+	{ id: 'size', width: 100, sortField: 'size' },
+	{ id: 'items', width: 90, sortField: 'items' },
+	{ id: 'created', width: 150, sortField: 'created' },
+	{ id: 'modified', width: 150, sortField: 'modified' },
+]
+
+/** The order columns are dropped in when there isn't room for them next to the name. */
+const COLUMN_DROP_ORDER: FileColumn[] = ['created', 'items', 'size', 'modified']
+
+/** Space always kept for a file's name before any detail column is shown. */
+const NAME_MIN_WIDTH = 280
+/** Row padding, selection checkbox, icon and actions menu. */
+const ROW_CHROME_WIDTH = 170
+const COLUMN_GAP = 24
+
+function columnsWidth(columns: FileColumn[]) {
+	return columns.reduce(
+		(total, id) => total + (FILE_COLUMNS.find((column) => column.id === id)?.width ?? 0) + COLUMN_GAP,
+		0,
+	)
+}
+
+/**
+ * Which detail columns the file listing shows. Users pick the columns (persisted to local
+ * storage) and can switch details off entirely; enabled columns are then dropped, least
+ * important first, whenever they would squeeze file names below a readable width.
+ */
+export function useFileColumns(containerWidth: Ref<number | undefined>) {
+	const detailsEnabled = useLocalStorage('files-details-enabled', true)
+	const enabledColumns = useLocalStorage<FileColumn[]>('files-visible-columns', [
+		'size',
+		'items',
+		'modified',
+	])
+
+	const shownColumns = computed<FileColumn[]>(() => {
+		if (!detailsEnabled.value || containerWidth.value == null) return []
+
+		const available = containerWidth.value - ROW_CHROME_WIDTH - NAME_MIN_WIDTH
+		let columns = FILE_COLUMNS.map((column) => column.id).filter((id) =>
+			enabledColumns.value.includes(id),
+		)
+
+		for (const id of COLUMN_DROP_ORDER) {
+			if (columnsWidth(columns) <= available) break
+			columns = columns.filter((column) => column !== id)
+		}
+		return columns
+	})
+
+	/** Whether some details aren't visible as columns, so rows should offer them in a tooltip. */
+	const hasHiddenDetails = computed(() => shownColumns.value.length < FILE_COLUMNS.length)
+
+	function toggleColumn(id: FileColumn) {
+		enabledColumns.value = enabledColumns.value.includes(id)
+			? enabledColumns.value.filter((column) => column !== id)
+			: [...enabledColumns.value, id]
+	}
+
+	return {
+		detailsEnabled,
+		enabledColumns,
+		shownColumns,
+		hasHiddenDetails,
+		toggleColumn,
+	}
+}
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-drag-state.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-drag-state.ts
index 9e743705538..544e13749d7 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-drag-state.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-drag-state.ts
@@ -1,12 +1,8 @@
 import { ref } from 'vue'
 
-export interface FileDragData {
-	name: string
-	type: string
-	path: string
-}
+import type {FileInfo} from "#ui/layouts/shared/files-tab/providers/file-manager.ts";
 
-const activeDrag = ref<FileDragData | null>(null)
+const activeDrag = ref<FileInfo | null>(null)
 const dragTarget = ref<string | null>(null)
 const ghostEl = ref<HTMLElement | null>(null)
 const pointerStartX = ref(0)
@@ -84,7 +80,7 @@ function cleanup() {
 	}
 }
 
-let onDropCallback: ((source: FileDragData, destination: string) => void) | null = null
+let onDropCallback: ((source: FileInfo, destination: string) => void) | null = null
 
 function onPointerCancel() {
 	cleanup()
@@ -104,9 +100,9 @@ function onPointerUp() {
 }
 
 export function startFileDrag(
-	data: FileDragData,
+	data: FileInfo,
 	e: PointerEvent,
-	onDrop: (source: FileDragData, destination: string) => void,
+	onDrop: (source: FileInfo, destination: string) => void,
 ) {
 	activeDrag.value = data
 	pointerStartX.value = e.clientX
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-sorting.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-sorting.ts
index 90a800d96d0..2d3ae51535e 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-sorting.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-sorting.ts
@@ -47,8 +47,13 @@ export function useFileSorting(items: Ref<FileItem[]>) {
 				case 'created':
 					return sortDesc.value ? a.created - b.created : b.created - a.created
 				case 'size': {
-					const aValue = (a.type === 'directory' ? a.count : a.size) ?? 0
-					const bValue = (b.type === 'directory' ? b.count : b.size) ?? 0
+					const aValue = (a.type === 'directory' ? 0 : a.size) ?? 0
+					const bValue = (b.type === 'directory' ? 0 : b.size) ?? 0
+					return sortDesc.value ? aValue - bValue : bValue - aValue
+				}
+				case 'items': {
+					const aValue = (a.type === 'directory' ? a.count : 0) ?? 0
+					const bValue = (b.type === 'directory' ? b.count : 0) ?? 0
 					return sortDesc.value ? aValue - bValue : bValue - aValue
 				}
 				default:
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
index ec10a49233b..6bfaf8d3386 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
@@ -2,8 +2,10 @@ import type { DockviewApi, DockviewReadyEvent, IDisposable } from 'dockview-vue'
 import type { ComputedRef, Ref } from 'vue'
 import { computed, ref, shallowReactive, shallowRef, watch } from 'vue'
 
+import {isSameInfo, parentInfoFrom} from "#ui/layouts/shared/files-tab/utils.ts";
+
 import type { FileEditorBridge } from '../providers/file-browser-ui'
-import type { FileManagerContext } from '../providers/file-manager'
+import type { FileInfo, FileManagerContext } from '../providers/file-manager'
 
 export const FILE_TAB_PANEL_COMPONENT = 'fileTabPanel'
 export const FILE_TAB_COMPONENT = 'fileTab'
@@ -11,15 +13,10 @@ export const FILE_TAB_COMPONENT = 'fileTab'
 const MAX_HISTORY_LENGTH = 50
 const PENDING_LOCATION_TIMEOUT = 1000
 
-/** Where a tab currently is. Paths are absolute and normalized (`/`, `/config/file.toml`). */
-export type FileLocation =
-	| { kind: 'directory'; path: string }
-	| { kind: 'file'; path: string; name: string }
-
 /** A browser-like tab: its own history of visited directories and files. */
 export interface FileTab {
 	id: string
-	history: FileLocation[]
+	history: FileInfo[]
 	index: number
 }
 
@@ -27,30 +24,12 @@ export interface FileTabPanelParams {
 	tabId: string
 }
 
-export function normalizeFilePath(path: string) {
-	return `/${path.split('/').filter(Boolean).join('/')}`
-}
-
-export function parentDirectory(path: string) {
-	const segments = path.split('/').filter(Boolean)
-	segments.pop()
-	return `/${segments.join('/')}`
-}
-
-export function directoryOf(location: FileLocation) {
-	return location.kind === 'file' ? parentDirectory(location.path) : location.path
-}
-
 export function currentLocation(tab: FileTab) {
 	return tab.history[tab.index]
 }
 
-export function isSameLocation(a: FileLocation, b: FileLocation) {
-	return a.kind === b.kind && a.path === b.path
-}
-
 export interface FileTabsOptions {
-	ctx: Pick<FileManagerContext, 'currentPath' | 'editingFile' | 'navigateTo' | 'startEditing'>
+	ctx: Pick<FileManagerContext, 'currentDirectory' | 'currentFile' | 'navigateTo'>
 	/**
 	 * Asks the user what to do with the given editors' unsaved changes.
 	 * Resolves `true` when it is safe to discard the editors.
@@ -62,17 +41,17 @@ export interface FileTabs {
 	tabs: Ref<FileTab[]>
 	activeTabId: Ref<string>
 	activeTab: ComputedRef<FileTab>
-	activeLocation: ComputedRef<FileLocation>
+	activeLocation: ComputedRef<FileInfo>
 	canGoBack: ComputedRef<boolean>
 	canGoForward: ComputedRef<boolean>
 	editors: Map<string, FileEditorBridge>
 	activeEditor: ComputedRef<FileEditorBridge | null>
 	hasUnsavedChanges: ComputedRef<boolean>
 	getTab: (id: string) => FileTab | undefined
-	navigate: (location: FileLocation) => Promise<void>
+	navigate: (location: FileInfo) => Promise<void>
 	back: () => Promise<void>
 	forward: () => Promise<void>
-	openTab: (location: FileLocation) => void
+	openTab: (location: FileInfo) => void
 	activateTab: (id: string) => void
 	closeTab: (id: string) => Promise<void>
 	closeFile: (tabId: string) => void
@@ -95,14 +74,10 @@ export interface FileTabs {
 export function useFileTabs(options: FileTabsOptions): FileTabs {
 	const { ctx } = options
 
-	const contextLocation = computed<FileLocation>(() => {
-		const file = ctx.editingFile.value
-		if (file) return { kind: 'file', path: normalizeFilePath(file.path), name: file.name }
-		return { kind: 'directory', path: normalizeFilePath(ctx.currentPath.value) }
-	})
+	const contextLocation = computed<FileInfo>(() => ctx.currentFile.value);
 
 	let nextTabId = 0
-	function createTab(location: FileLocation): FileTab {
+	function createTab(location: FileInfo): FileTab {
 		return { id: `file-tab-${nextTabId++}`, history: [location], index: 0 }
 	}
 
@@ -132,8 +107,8 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		return tabs.value.find((tab) => tab.id === id)
 	}
 
-	function pushLocation(tab: FileTab, location: FileLocation) {
-		if (isSameLocation(currentLocation(tab), location)) return
+	function pushLocation(tab: FileTab, location: FileInfo) {
+		if (isSameInfo(currentLocation(tab), location)) return
 		tab.history.splice(tab.index + 1)
 		tab.history.push(location)
 		if (tab.history.length > MAX_HISTORY_LENGTH) tab.history.shift()
@@ -144,28 +119,24 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 	 * The location we last pushed into the context. Hosts may apply it asynchronously (e.g. via
 	 * the router), so context changes are only recorded once it has been reached.
 	 */
-	let pendingLocation: FileLocation | null = null
+	let pendingLocation: FileInfo | null = null
 	let pendingTimeout: ReturnType<typeof setTimeout> | undefined
 
-	function applyToContext(location: FileLocation) {
-		if (isSameLocation(contextLocation.value, location)) return
+	function applyToContext(info: FileInfo) {
+		if (isSameInfo(contextLocation.value, info)) return
 
-		pendingLocation = location
+		pendingLocation = info
 		clearTimeout(pendingTimeout)
 		pendingTimeout = setTimeout(() => (pendingLocation = null), PENDING_LOCATION_TIMEOUT)
 
-		if (location.kind === 'file') {
-			ctx.startEditing({ name: location.name, path: location.path })
-		} else {
-			ctx.navigateTo(location.path)
-		}
+		ctx.navigateTo(info);
 	}
 
 	watch(
 		contextLocation,
 		(location) => {
 			if (pendingLocation) {
-				if (!isSameLocation(location, pendingLocation)) return
+				if (!isSameInfo(location, pendingLocation)) return
 				pendingLocation = null
 				clearTimeout(pendingTimeout)
 			}
@@ -176,13 +147,13 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 
 	async function confirmLeave(tab: FileTab) {
 		const editor = editors.get(tab.id)
-		if (currentLocation(tab).kind !== 'file' || !editor) return true
+		if (currentLocation(tab).type !== 'file' || !editor) return true
 		return options.confirmDiscard([editor])
 	}
 
-	async function navigate(location: FileLocation) {
+	async function navigate(location: FileInfo) {
 		const tab = activeTab.value
-		if (!isSameLocation(currentLocation(tab), location)) {
+		if (!isSameInfo(currentLocation(tab), location)) {
 			if (!(await confirmLeave(tab))) return
 			pushLocation(tab, location)
 		}
@@ -218,7 +189,7 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		applyToContext(activeLocation.value)
 	}
 
-	function openTab(location: FileLocation) {
+	function openTab(location: FileInfo) {
 		const tab = createTab(location)
 		tabs.value.push(tab)
 		addPanel(tab)
@@ -244,9 +215,9 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		const tab = getTab(tabId)
 		if (!tab) return
 		const location = currentLocation(tab)
-		if (location.kind !== 'file') return
+		if (location.type !== 'file') return
 
-		const parent: FileLocation = { kind: 'directory', path: parentDirectory(location.path) }
+		const parent: FileInfo = parentInfoFrom(location);
 		pushLocation(tab, parent)
 		if (tab.id === activeTabId.value) applyToContext(parent)
 	}
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
index 8d12a47ea6d..4d3d09570b6 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
@@ -1,10 +1,13 @@
 import { ref } from 'vue'
 
+import type {FileInfo} from "#ui/layouts/shared/files-tab/providers/file-manager.ts";
+import {parentInfoFrom} from "#ui/layouts/shared/files-tab/utils.ts";
+
 import type { Operation } from '../types'
 
 export function useFileUndoRedo(
-	renameItem: (path: string, newName: string) => Promise<void>,
-	moveItem: (source: string, destination: string) => Promise<void>,
+	renameItem: (file: FileInfo, newName: string) => Promise<FileInfo | null>,
+	moveItem: (source: FileInfo, destination: string) => Promise<FileInfo | null>,
 	refresh: () => void,
 	notify: (title: string, text: string, type: 'success' | 'error') => void,
 ) {
@@ -23,16 +26,10 @@ export function useFileUndoRedo(
 		try {
 			switch (lastOperation.type) {
 				case 'move':
-					await moveItem(
-						`${lastOperation.destinationPath}/${lastOperation.fileName}`.replace('//', '/'),
-						`${lastOperation.sourcePath}/${lastOperation.fileName}`.replace('//', '/'),
-					)
+					await moveItem(lastOperation.newFile, parentInfoFrom(lastOperation.prevFile).path)
 					break
 				case 'rename':
-					await renameItem(
-						`${lastOperation.path}/${lastOperation.newName}`.replace('//', '/'),
-						lastOperation.oldName,
-					)
+					await renameItem(lastOperation.newFile, lastOperation.prevFile.name)
 					break
 			}
 
@@ -40,7 +37,7 @@ export function useFileUndoRedo(
 			refresh()
 			notify(
 				`${lastOperation.type === 'move' ? 'Move' : 'Rename'} undone`,
-				`${lastOperation.fileName} has been restored to its original ${lastOperation.type === 'move' ? 'location' : 'name'}`,
+				`${lastOperation.prevFile.name} has been restored to its original ${lastOperation.type === 'move' ? 'location' : 'name'}`,
 				'success',
 			)
 		} catch {
@@ -55,16 +52,10 @@ export function useFileUndoRedo(
 		try {
 			switch (lastOperation.type) {
 				case 'move':
-					await moveItem(
-						`${lastOperation.sourcePath}/${lastOperation.fileName}`.replace('//', '/'),
-						`${lastOperation.destinationPath}/${lastOperation.fileName}`.replace('//', '/'),
-					)
+					await moveItem(lastOperation.prevFile, parentInfoFrom(lastOperation.newFile).path)
 					break
 				case 'rename':
-					await renameItem(
-						`${lastOperation.path}/${lastOperation.oldName}`.replace('//', '/'),
-						lastOperation.newName,
-					)
+					await renameItem(lastOperation.prevFile, lastOperation.newFile.name)
 					break
 			}
 
@@ -72,7 +63,7 @@ export function useFileUndoRedo(
 			refresh()
 			notify(
 				`${lastOperation.type === 'move' ? 'Move' : 'Rename'} redone`,
-				`${lastOperation.fileName} has been ${lastOperation.type === 'move' ? 'moved' : 'renamed'} again`,
+				`${lastOperation.prevFile.name} has been ${lastOperation.type === 'move' ? 'moved' : 'renamed'} again`,
 				'success',
 			)
 		} catch {
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/folder-actions.ts b/packages/ui/src/layouts/shared/files-tab/composables/folder-actions.ts
new file mode 100644
index 00000000000..0ba65da2d63
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/composables/folder-actions.ts
@@ -0,0 +1,102 @@
+import {BoxIcon, CurseForgeIcon, FileArchiveIcon, FolderOpenIcon, LinkIcon,
+	RefreshCwIcon, UploadIcon} from "@modrinth/assets";
+import {computed, type ComputedRef} from "vue";
+
+import type { ButtonMenuOption } from "#ui/components/index.ts";
+import { defineMessages, useVIntl } from '#ui/composables/i18n.ts'
+import { commonMessages } from '#ui/utils/common-messages.ts'
+
+export function useFileActions(
+	createFile: (type: 'file' | 'directory') => void,
+	upload?: (type: 'file' | 'zip') => void,
+	unzip?: (type: 'cf' | 'zip') => void,
+	refresh?: { handleRefresh: () => void, isRefreshing: ComputedRef<boolean>}
+): { options: ComputedRef<ButtonMenuOption[]> }{
+	const { formatMessage } = useVIntl()
+
+	const messages = defineMessages({
+		createNew: {
+			id: 'files.navbar.create-new',
+			defaultMessage: 'Create new...',
+		},
+		newFile: {
+			id: 'files.navbar.new-file',
+			defaultMessage: 'New file',
+		},
+		newFolder: {
+			id: 'files.navbar.new-folder',
+			defaultMessage: 'New folder',
+		},
+		uploadFile: {
+			id: 'files.navbar.upload-file',
+			defaultMessage: 'Upload file',
+		},
+		uploadFromZip: {
+			id: 'files.navbar.upload-from-zip',
+			defaultMessage: 'Upload from .zip file',
+		},
+		uploadFromZipUrl: {
+			id: 'files.navbar.upload-from-zip-url',
+			defaultMessage: 'Upload from .zip URL',
+		},
+		installCurseForgePack: {
+			id: 'files.navbar.install-curseforge-pack',
+			defaultMessage: 'Install CurseForge pack',
+		}
+	})
+
+	const canHandleZips = unzip != null;
+	const canHandleUpload = upload != null;
+	const canRefresh = refresh != null;
+
+	return {
+		options: computed(() => {
+			return [
+				{
+					id: 'file',
+					icon: BoxIcon,
+					label: formatMessage(messages.newFile),
+					action: () => createFile('file'),
+				},
+				{
+					id: 'directory',
+					icon: FolderOpenIcon,
+					label: formatMessage(messages.newFolder),
+					action: () => createFile('directory'),
+				},
+				{
+					id: 'upload',
+					icon: UploadIcon,
+					label: formatMessage(messages.uploadFile),
+					shown: canHandleUpload,
+					action: () => upload?.('file'),
+				},
+				{ type: 'divider', shown: canHandleZips },
+				{
+					id: 'install-from-url',
+					icon: LinkIcon,
+					label: formatMessage(messages.uploadFromZipUrl),
+					shown: canHandleZips,
+					action: () => unzip?.('zip'),
+				},
+				{
+					id: 'install-cf-pack',
+					icon: CurseForgeIcon,
+					label: formatMessage(messages.installCurseForgePack),
+					shown: canHandleZips,
+					action: () => unzip?.('cf'),
+				},
+				{ type: 'divider', shown: canRefresh },
+				{
+					id: 'refresh',
+					icon: RefreshCwIcon,
+					iconClass: computed(() => refresh?.isRefreshing.value ? 'animate-spin' : ''),
+					label: formatMessage(commonMessages.refreshButton),
+					shown: canRefresh,
+					action: () => refresh?.handleRefresh(),
+					disabled: refresh?.isRefreshing.value,
+				},
+			]
+		})
+	};
+}
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/index.ts b/packages/ui/src/layouts/shared/files-tab/composables/index.ts
index 15db11f9cc4..0e884f09d0a 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/index.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/index.ts
@@ -2,3 +2,4 @@ export { useFileSearch } from './file-search'
 export { useFileSelection } from './file-selection'
 export { useFileSorting } from './file-sorting'
 export { useFileUndoRedo } from './file-undo-redo'
+export { useFileActions } from './folder-actions'
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/shift-key.ts b/packages/ui/src/layouts/shared/files-tab/composables/shift-key.ts
deleted file mode 100644
index 6aab3d9d5f6..00000000000
--- a/packages/ui/src/layouts/shared/files-tab/composables/shift-key.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createSharedComposable, useKeyModifier } from '@vueuse/core'
-
-/** Whether Shift is held, shared so every file row reuses one set of listeners. */
-export const useShiftKey = createSharedComposable(() => useKeyModifier('Shift', { initial: false }))
diff --git a/packages/ui/src/layouts/shared/files-tab/index.ts b/packages/ui/src/layouts/shared/files-tab/index.ts
index c6e724d8641..8ae49ac16b3 100644
--- a/packages/ui/src/layouts/shared/files-tab/index.ts
+++ b/packages/ui/src/layouts/shared/files-tab/index.ts
@@ -1,3 +1,4 @@
 export { default as FilePageLayout } from './layout.vue'
 export * from './providers'
 export * from './types'
+export * from './utils'
diff --git a/packages/ui/src/layouts/shared/files-tab/layout.vue b/packages/ui/src/layouts/shared/files-tab/layout.vue
index 7e7c51cec9e..49b1717129e 100644
--- a/packages/ui/src/layouts/shared/files-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/files-tab/layout.vue
@@ -4,7 +4,7 @@
 	<FileCreateItemModal ref="createItemModal" :type="newItemType" @create="handleCreateNewItem" />
 	<FileCreateZipModal
 		ref="createZipModal"
-		:parent="selectionParent ?? ctx.currentPath.value"
+		:parent="selectionParent?.path ?? ctx.currentFile.value.path"
 		:stat-file="ctx.statFile"
 		@create="handleZipSelection"
 	/>
@@ -19,7 +19,7 @@
 	<FileMoveItemModal
 		ref="moveItemModal"
 		:item="selectedItem"
-		:current-path="selectedItem ? parentDirectory(normalizeFilePath(selectedItem.path)) : ctx.currentPath.value"
+		:current-path="selectedItem ? parentDirectory(selectedItem.path) : ctx.currentFile.value.path"
 		@move="handleMoveItem"
 	/>
 	<FileDeleteItemModal ref="deleteItemModal" :item="selectedItem" @delete="handleDeleteItem" />
@@ -66,15 +66,16 @@
 			</div>
 		</div>
 		<template v-if="smallMode">
-			<NewModal ref="sidebarModal"
+			<NewModal
+ref="sidebarModal"
 				:on-hide="() => {
 					if (smallMode) sidebarOpen = false;
 				}"
 				:noblur="true"
 				:no-padding="true"
-				:hideHeader="true"
+				:hide-header="true"
 				:fill-width-when-small="false"
-				:maxWidth="fullWidthSidebar ? '100dvw' : 'fit-content'"
+				:max-width="fullWidthSidebar ? '100dvw' : 'fit-content'"
 				:max-width-min-check="false"
 				:scrollable="false"
 				pullout-direction="left"
@@ -144,6 +145,7 @@
 
 <script setup lang="ts">
 import {FolderArchiveIcon, HistoryIcon, SaveIcon, TrashIcon,} from '@modrinth/assets'
+import {type MaybeElement, useLocalStorage, useResizeObserver} from "@vueuse/core";
 import type {Component} from 'vue'
 import {computed, onMounted, onUnmounted, ref, shallowRef, watch} from 'vue'
 
@@ -151,6 +153,8 @@ import {type ButtonMenuOption, NewModal} from '#ui/components'
 import {Button, ContextMenu} from '#ui/components/base/buttons'
 import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
 import {defineMessages, useVIntl} from '#ui/composables/i18n'
+import {useFileTabs} from "#ui/layouts/shared/files-tab/composables/file-tabs.ts";
+import {parentDirectory, parentInfoFrom} from "#ui/layouts/shared/files-tab/utils.ts";
 import {injectFilePicker} from '#ui/providers/file-picker'
 import {injectNotificationManager} from '#ui/providers/web-notifications'
 import {commonMessages} from '#ui/utils/common-messages'
@@ -166,22 +170,14 @@ import FileRenameItemModal from './components/modals/FileRenameItemModal.vue'
 import FileUnsavedChangesModal from './components/modals/FileUnsavedChangesModal.vue'
 import FileUploadConflictModal from './components/modals/FileUploadConflictModal.vue'
 import FileUploadZipUrlModal from './components/modals/FileUploadZipUrlModal.vue'
-import {
-	directoryOf,
-	type FileLocation,
-	normalizeFilePath,
-	parentDirectory,
-	useFileTabs,
-} from './composables/file-tabs'
 import {useFileSearch} from './composables/file-search'
 import {useFileSelection} from './composables/file-selection'
 import {useFileSorting} from './composables/file-sorting'
 import {useFileUndoRedo} from './composables/file-undo-redo'
-import type {FileEditorBridge, FileInfo} from './providers/file-browser-ui'
+import type {FileEditorBridge} from './providers/file-browser-ui'
 import {provideFileBrowserUI} from './providers/file-browser-ui'
-import {injectFileManager} from './providers/file-manager'
+import {type FileInfo, injectFileManager} from './providers/file-manager'
 import type {FileItem} from './types'
-import {type MaybeElement, useLocalStorage, useResizeObserver} from "@vueuse/core";
 
 const { formatMessage } = useVIntl()
 
@@ -254,7 +250,7 @@ import('vue3-ace-editor').then(async (mod) => {
 
 const baseId = `files-${Math.random().toString(36).slice(2, 9)}`
 
-const items = computed(() => ctx.currentItems.value)
+const items = computed(() => ctx.directoryTree.get(ctx.currentDirectory.value).data.value)
 
 /**
  * Only the very first load hides the viewer. Unmounting it on later navigations would tear down
@@ -262,18 +258,23 @@ const items = computed(() => ctx.currentItems.value)
  */
 const hasLoadedOnce = ref(false)
 watch(
-	() => !(ctx.loading.value && items.value.length === 0),
+	() => {
+		const location = ctx.currentFile.value;
+		const result = location.type == 'directory' ? ctx.directoryTree.get<'directory'>(location as FileInfo<'directory'>).data : null;
+
+		return !(ctx.loading.value && result?.value.length === 0);
+	},
 	(loaded) => {
 		if (loaded) hasLoadedOnce.value = true
 	},
 	{ immediate: true },
 )
-const isEditing = computed(() => ctx.editingFile.value !== null)
-const isBusy = computed(() => (ctx.isBusy?.value ?? false) || (ctx.isReadOnly?.(ctx.currentPath.value) ?? false),)
-const busyTooltip = computed(() => ctx.isReadOnly?.(ctx.currentPath.value) ? ctx.readOnlyReason?.value : ctx.busyTooltip?.value,)
+const isEditing = computed(() => ctx.currentFile.value !== null && ctx.currentFile.value.type == 'file')
+const isBusy = computed(() => (ctx.isBusy?.value ?? false) || (ctx.isReadOnly?.(ctx.currentFile.value) ?? false))
+const busyTooltip = computed(() => ctx.isReadOnly?.(ctx.currentFile.value) ? ctx.readOnlyReason?.value : ctx.busyTooltip?.value,)
 
 const breadcrumbSegments = computed(() =>
-	directoryOf(fileTabs.activeLocation.value).split('/').filter(Boolean),
+	parentInfoFrom(fileTabs.activeLocation.value).path.split('/').filter(Boolean),
 )
 
 // Composables
@@ -296,19 +297,19 @@ const {
 } = useFileSelection(filteredItems)
 
 const selectionReadOnly = computed(() =>
-	[...selectedItems.value.keys()].some((path) => ctx.isReadOnly?.(path)),
+	[...selectedItems.value.values()].some((file) => ctx.isReadOnly?.(file)),
 )
 
 /** The directory all selected entries share, or `null` when the selection is empty or spans directories. */
 const selectionParent = computed(() => {
 	const parents = new Set(
-		[...selectedItems.value.values()].map((item) => parentDirectory(normalizeFilePath(item.path))),
+		[...selectedItems.value.values()].map((item) => parentInfoFrom(item)),
 	)
 	return parents.size === 1 ? [...parents][0] : null
 })
 
 const { recordOperation, onKeydown } = useFileUndoRedo(
-	(path, newName) => ctx.renameItem(path, newName),
+	(file, newName) => ctx.renameItem(file, newName),
 	(source, dest) => ctx.moveItem(source, dest),
 	() => ctx.refresh(),
 	(title, text, type) => addNotification({ title, text, type }),
@@ -471,35 +472,25 @@ async function confirmDiscardEditors(editors: Iterable<FileEditorBridge>): Promi
 	return result === 'discard'
 }
 
-function locationOf(item: FileInfo): FileLocation {
-	const path = normalizeFilePath(item.path)
-	return item.type === 'directory'
-		? { kind: 'directory', path }
-		: { kind: 'file', path, name: item.name }
-}
-
 async function navigateToSegment(index: number) {
-	const path = `/${breadcrumbSegments.value.slice(0, index + 1).join('/')}`
-	await fileTabs.navigate({ kind: 'directory', path })
-}
-
-async function handleNavigateToFolder(item: FileInfo) {
-	await fileTabs.navigate(locationOf({ ...item, type: 'directory' }))
+	const segments = breadcrumbSegments.value.slice(0, index + 1);
+	const path = `/${segments.join('/')}`
+	await fileTabs.navigate(parentInfoFrom(path))
 }
 
-async function handleEditFile(item: FileInfo) {
-	await fileTabs.navigate(locationOf({ ...item, type: 'file' }))
+async function handleNavigateTo(item: FileInfo) {
+	await fileTabs.navigate(item)
 }
 
 function handleOpenInNewTab(item: FileInfo) {
 	if (item.type !== 'directory' && !canOpenInFileEditor(item.name)) return
-	fileTabs.openTab(locationOf(item))
+	fileTabs.openTab(item)
 }
 
 async function handleEditorClose() {
 	const location = fileTabs.activeLocation.value
-	if (location.kind !== 'file') return
-	await fileTabs.navigate({ kind: 'directory', path: directoryOf(location) })
+	if (location.type !== 'file') return
+	await fileTabs.navigate(parentInfoFrom(location))
 }
 
 // CRUD handlers
@@ -513,16 +504,14 @@ async function handleRenameItem(newName: string) {
 	const item = selectedItem.value
 	if (!item) return
 
-	const path = normalizeFilePath(item.path)
-	await ctx.renameItem(path, newName)
-	recordOperation({
-		type: 'rename',
-		itemType: item.type,
-		fileName: item.name,
-		path: parentDirectory(path),
-		oldName: item.name,
-		newName,
-	})
+	const newFile = await ctx.renameItem(item, newName)
+	if (newFile != null) {
+		recordOperation({
+			type: 'rename',
+			prevFile: item,
+			newFile: newFile
+		})
+	}
 }
 
 async function handleMoveItem(destination: string) {
@@ -530,18 +519,16 @@ async function handleMoveItem(destination: string) {
 	const item = selectedItem.value
 	if (!item) return
 
-	const source = normalizeFilePath(item.path)
-	const sourcePath = parentDirectory(source)
 	const dest = `${destination}/${item.name}`.replace('//', '/')
 
-	await ctx.moveItem(source, dest)
-	recordOperation({
-		type: 'move',
-		sourcePath,
-		destinationPath: destination,
-		fileName: item.name,
-		itemType: item.type,
-	})
+	const newFile = await ctx.moveItem(item, dest);
+	if (newFile != null) {
+		recordOperation({
+			type: 'move',
+			prevFile: item,
+			newFile: newFile,
+		})
+	}
 }
 
 function handleDeleteItem() {
@@ -549,48 +536,42 @@ function handleDeleteItem() {
 	const item = selectedItem.value
 	if (!item) return
 
-	ctx.deleteItem(normalizeFilePath(item.path), item.type === 'directory')
+	ctx.deleteItem(item, item.type === 'directory')
 }
 
-function handleDirectMove(moveData: {
-	name: string
-	type: string
-	path: string
-	destination: string
-}) {
+async function handleDirectMove(file: FileInfo, destination: string) {
 	if (isBusy.value) return
-	const dest = `${moveData.destination}/${moveData.name}`.replace('//', '/')
-	const sourcePath = moveData.path.substring(0, moveData.path.lastIndexOf('/'))
+	const dest = `${destination}/${file.name}`.replace('//', '/')
 
-	ctx.moveItem(moveData.path, dest).then(() => {
+	const newFile = await ctx.moveItem(file, dest);
+
+	if (newFile != null) {
 		recordOperation({
 			type: 'move',
-			sourcePath,
-			destinationPath: moveData.destination,
-			fileName: moveData.name,
-			itemType: moveData.type,
+			prevFile: file,
+			newFile: newFile
 		})
-	})
+	}
 }
 
 // Download
-async function handleDownload(item: FileItem) {
+async function handleDownload(item: FileInfo) {
 	if (item.type === 'file') {
-		await ctx.downloadFile(item.path, item.name)
+		await ctx.downloadFile(item)
 	}
 }
 
-async function handleZip(item: FileItem) {
+async function handleZip(item: FileInfo) {
 	if (isBusy.value || item.type !== 'directory' || !ctx.zipFolder) return
-	await ctx.zipFolder(item.path)
+	await ctx.zipFolder(item as FileInfo<'directory'>)
 }
 
 async function handleZipSelection(target: string) {
 	const parent = selectionParent.value
 	if (isBusy.value || !ctx.zipPaths || parent === null) return
-	const include = [...selectedItems.value.values()].map((item) => item.name)
+	const include = [...selectedItems.value.values()];
 	deselectAll()
-	await ctx.zipPaths(parent, include, target)
+	await ctx.zipPaths(include, parent, target)
 }
 
 // Extract
@@ -648,19 +629,19 @@ function showUnzipFromUrlModal(cf: boolean) {
 }
 
 function showRenameModal(item: FileItem) {
-	if (isBusy.value || ctx.isReadOnly?.(item.path)) return
+	if (isBusy.value || ctx.isReadOnly?.(item)) return
 	selectedItem.value = item
 	renameItemModal.value?.show(item)
 }
 
 function showMoveModal(item: FileItem) {
-	if (isBusy.value || ctx.isReadOnly?.(item.path)) return
+	if (isBusy.value || ctx.isReadOnly?.(item)) return
 	selectedItem.value = item
 	moveItemModal.value?.show()
 }
 
 function showDeleteModal(item: FileItem) {
-	if (isBusy.value || ctx.isReadOnly?.(item.path)) return
+	if (isBusy.value || ctx.isReadOnly?.(item)) return
 	selectedItem.value = item
 	deleteItemModal.value?.show()
 }
@@ -670,7 +651,7 @@ function showBulkDeleteModal() {
 	if (selectedItems.value.size === 0) return
 
 	for (const item of selectedItems.value.values()) {
-		ctx.deleteItem(normalizeFilePath(item.path), item.type === 'directory')
+		ctx.deleteItem(item, item.type === 'directory')
 	}
 	deselectAll()
 }
@@ -720,33 +701,22 @@ async function initiateFileUpload() {
 
 // Prefetch
 let prefetchTimeout: ReturnType<typeof setTimeout> | null = null
-let prefetchHomeTimeout: ReturnType<typeof setTimeout> | null = null
 
-function handleItemHover(item: { type: string; path: string; name: string }) {
+function handleItemPrefetch(item: Pick<FileItem, 'type' | 'path' | 'name'>) {
 	if (prefetchTimeout) {
 		clearTimeout(prefetchTimeout)
 		prefetchTimeout = null
 	}
 
-	if (item.type === 'directory') {
+	if (item.type === 'directory' || canOpenInFileEditor(item.name)) {
 		prefetchTimeout = setTimeout(() => {
-			ctx.prefetchDirectory?.(normalizeFilePath(item.path))
-		}, 150)
-	} else if (canOpenInFileEditor(item.name)) {
-		prefetchTimeout = setTimeout(() => {
-			ctx.prefetchFile?.(item.path)
+			ctx.directoryTree.prefetch(item)
 		}, 150)
 	}
 }
 
-function handlePrefetchHome() {
-	if (prefetchHomeTimeout) {
-		clearTimeout(prefetchHomeTimeout)
-		prefetchHomeTimeout = null
-	}
-	prefetchHomeTimeout = setTimeout(() => {
-		ctx.prefetchDirectory?.('/')
-	}, 150)
+function handleHomePrefetch() {
+	handleItemPrefetch({ path: '/', type: 'directory', name: 'home'});
 }
 
 function handleContextMenu(event: MouseEvent, options: ButtonMenuOption[]) {
@@ -796,12 +766,11 @@ provideFileBrowserUI({
 	toggleFind,
 
 	navigateToSegment,
-	handleNavigateToFolder,
-	handleEditFile,
+	handleNavigateTo,
 	handleOpenInNewTab,
 	handleEditorClose,
-	handlePrefetchHome,
-	handleItemHover,
+	handleHomePrefetch,
+	handleItemPrefetch,
 
 	showCreateModal,
 	showRenameModal,
@@ -824,7 +793,7 @@ provideFileBrowserUI({
 
 // Reset search/sort on path change; selection spans directories, so it is kept
 watch(
-	() => ctx.currentPath.value,
+	() => ctx.currentFile.value,
 	() => {
 		searchQuery.value = ''
 		resetSort()
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts b/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
index 798f539fa37..89284b7e246 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
@@ -1,13 +1,12 @@
 import type { Component, ComputedRef, Ref, ShallowRef } from 'vue'
 
 import type { ButtonMenuOption } from '#ui/components'
+import type {FileInfo} from "#ui/layouts/shared/files-tab/providers/file-manager.ts";
 import { createContext } from '#ui/providers/create-context'
 
 import type { FileTabs } from '../composables/file-tabs'
 import type { FileItem, FileSortField } from '../types'
 
-export type FileInfo = Pick<FileItem, 'name' | 'type' | 'path'>
-
 /**
  * API exposed by each tab's file editor, registered on `FileTabs` on mount
  * since dockview panels aren't reachable via template refs.
@@ -62,12 +61,11 @@ export interface FileBrowserUIContext {
 	toggleFind: () => void
 
 	navigateToSegment: (index: number) => void
-	handleNavigateToFolder: (item: FileInfo) => void
-	handleEditFile: (item: FileInfo) => void
+	handleNavigateTo: (item: FileInfo) => void
 	handleOpenInNewTab: (item: FileInfo) => void
 	handleEditorClose: () => Promise<void>
-	handlePrefetchHome: () => void
-	handleItemHover: (item: FileInfo) => void
+	handleHomePrefetch: () => void
+	handleItemPrefetch: (item: FileInfo) => void
 
 	showCreateModal: (type: 'file' | 'directory') => void
 	showRenameModal: (item: FileItem) => void
@@ -78,7 +76,7 @@ export interface FileBrowserUIContext {
 
 	handleDownload: (item: FileItem) => Promise<void>
 	handleZip: (item: FileItem) => Promise<void>
-	handleDirectMove: (moveData: FileInfo & { destination: string }) => void
+	handleDirectMove: (moveData: FileInfo, destination: string) => Promise<void>
 	handleExtractItem: (item: FileInfo) => Promise<void>
 
 	handleDroppedFiles: (files: File[]) => void
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts b/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
index fd14b211bbd..3da3eef6027 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
@@ -11,54 +11,64 @@ import type {
 	UploadState,
 } from '../types'
 
-export interface DirectoryEntries {
-	items: ComputedRef<FileItem[]>
+export type FileInfo<T extends FileTypes = FileTypes> = Pick<FileItem, "path"> & { name: string, type: T};
+
+export interface FileItemResult<R, T extends FileTypes> extends FileInfo<T> {
+	data: ComputedRef<R>
 	isLoading: Ref<boolean>
 	loadError: Ref<Error | null>
 }
 
-export interface DirectoryQuery extends DirectoryEntries {
+export interface FileQueryResult extends FileItemResult<any, FileTypes> {
 	filesReadyPending: ComputedRef<boolean>
 }
 
+export interface DirectoryResult extends FileItemResult<FileItem[], 'directory'> {}
+
+export interface FileResult extends FileItemResult<ArrayBuffer | null, 'file'> {}
+
+export type FileTypes = FileItem['type'];
+
+export type FileItemResultFrom<T extends FileTypes> =
+	T extends 'directory'
+		? DirectoryResult
+		: T extends 'file'
+			? FileResult
+			: never
+
 /**
  * Lazily loaded, cached directory listings used by the sidebar tree. Paths are absolute
  * (`/`, `/config`, `/config/sub`), independent of `currentPath`.
  */
 export interface DirectoryTree {
 	/** Returns the (cached) listing for `path`, starting to load it on first access. */
-	get: (path: string) => DirectoryEntries
-	prefetch: (path: string) => void
+	get: <T extends FileTypes>(file: FileInfo<T>) => FileItemResultFrom<T>
+	prefetch: <T extends FileTypes>(file: FileInfo<T>) => void
 	/** Absolute paths of the directories expanded in the tree. Owned by the host so it survives remounts. */
 	expandedEntries: Ref<string[]>
 }
 
 export interface FileManagerContext {
-	currentItems: ComputedRef<FileItem[]>
+	currentFile: ComputedRef<FileInfo>
+	currentDirectory: ComputedRef<FileInfo<'directory'>>
+
 	directoryTree: DirectoryTree
 
 	loading: ComputedRef<boolean>
 	error: ComputedRef<Error | null>
 
-	currentPath: Ref<string>
-	navigateTo: (path: string) => void
+	navigateTo: (file: FileInfo) => void
 
-	editingFile: Ref<EditingFile | null>
-	startEditing: (file: EditingFile) => void
-	stopEditing: () => void
+	createItem: (name: string, type: 'file' | 'directory') => Promise<FileInfo | null>
+	renameItem: (file: FileInfo, newName: string) => Promise<FileInfo | null>
+	moveItem: (file: FileInfo, destination: string) => Promise<FileInfo | null>
+	deleteItem: (file: FileInfo, recursive: boolean) => Promise<void>
 
-	createItem: (name: string, type: 'file' | 'directory') => Promise<void>
-	renameItem: (path: string, newName: string) => Promise<void>
-	moveItem: (source: string, destination: string) => Promise<void>
-	deleteItem: (path: string, recursive: boolean) => Promise<void>
-
-	readFile: (path: string) => Promise<string>
-	readFileAsBlob: (path: string) => Promise<Blob>
-	writeFile: (path: string, content: string) => Promise<void>
-	downloadFile: (path: string, fileName: string) => Promise<void>
+	writeFile: (file: FileInfo, content: ArrayBuffer) => Promise<void>
+	downloadFile: (file: FileInfo) => Promise<void>
 	statFile?: (path: string) => Promise<Kyros.Files.v1.FileStatResponse>
-	zipFolder?: (path: string) => Promise<void>
-	zipPaths?: (parent: string, include: string[], target: string) => Promise<void>
+	zipFolder?: (file: FileInfo<'directory'>) => Promise<void>
+	zipPaths?: (files: FileInfo[], targetDirectory: FileInfo<'directory'>, archiveName: string) => Promise<void>
 
 	uploadFiles: (files: File[]) => void
 	cancelUpload?: () => void
@@ -70,7 +80,7 @@ export interface FileManagerContext {
 	isBusy?: Ref<boolean> | ComputedRef<boolean>
 	busyTooltip?: Ref<string | undefined> | ComputedRef<string | undefined>
 	busyWarning?: Ref<string | null> | ComputedRef<string | null>
-	isReadOnly?: (path: string) => boolean
+	isReadOnly?: (file: FileInfo | null) => boolean
 	readOnlyReason?: Ref<string> | ComputedRef<string>
 
 	extractFile?: (
@@ -81,9 +91,6 @@ export interface FileManagerContext {
 	activeOperations?: Ref<FileOperation[]> | ComputedRef<FileOperation[]>
 	dismissOperation?: (id: string, action: 'dismiss' | 'cancel') => void
 
-	prefetchDirectory?: (path: string) => void
-	prefetchFile?: (path: string) => void
-
 	showInstallFromUrl?: boolean
 	basePath?: Ref<string> | ComputedRef<string>
 	openInFolder?: (path: string) => void
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/index.ts b/packages/ui/src/layouts/shared/files-tab/providers/index.ts
index 78bdbff7039..960c6f5dbf5 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/index.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/index.ts
@@ -1,6 +1,5 @@
 export type {
-	DirectoryEntries,
-	DirectoryQuery,
+	DirectoryResult,
 	DirectoryTree,
 	FileManagerContext,
 } from './file-manager'
diff --git a/packages/ui/src/layouts/shared/files-tab/types.ts b/packages/ui/src/layouts/shared/files-tab/types.ts
index 8f27f62d87e..36907799196 100644
--- a/packages/ui/src/layouts/shared/files-tab/types.ts
+++ b/packages/ui/src/layouts/shared/files-tab/types.ts
@@ -1,3 +1,5 @@
+import type {FileInfo} from "#ui/layouts/shared/files-tab/providers/file-manager.ts";
+
 export interface FileItem {
 	name: string
 	type: 'file' | 'directory' | 'symlink'
@@ -15,7 +17,7 @@ export interface EditingFile {
 	path: string
 }
 
-export type FileSortField = 'name' | 'size' | 'created' | 'modified'
+export type FileSortField = 'name' | 'size' | 'items' | 'created' | 'modified'
 
 export type FileViewFilter = 'all' | 'filesOnly' | 'foldersOnly'
 
@@ -34,21 +36,16 @@ export interface FileOperation {
 
 export interface UndoableOperation {
 	type: 'move' | 'rename'
-	itemType: string
-	fileName: string
+	prevFile: FileInfo
+	newFile: FileInfo
 }
 
 export interface MoveOperation extends UndoableOperation {
 	type: 'move'
-	sourcePath: string
-	destinationPath: string
 }
 
 export interface RenameOperation extends UndoableOperation {
 	type: 'rename'
-	path: string
-	oldName: string
-	newName: string
 }
 
 export type Operation = MoveOperation | RenameOperation
diff --git a/packages/ui/src/layouts/shared/files-tab/utils.ts b/packages/ui/src/layouts/shared/files-tab/utils.ts
index 00beb570dde..9c4c9142de0 100644
--- a/packages/ui/src/layouts/shared/files-tab/utils.ts
+++ b/packages/ui/src/layouts/shared/files-tab/utils.ts
@@ -1,3 +1,5 @@
+import type {FileInfo} from "#ui/layouts/shared/files-tab/providers/file-manager.ts";
+
 export function joinDisplayPath(basePath: string | undefined, itemPath: string) {
 	if (!basePath) return itemPath
 
@@ -7,3 +9,31 @@ export function joinDisplayPath(basePath: string | undefined, itemPath: string)
 
 	return path ? `${base}${separator}${path}` : basePath
 }
+
+export function parentInfoFrom(target: string | FileInfo) {
+	return infoFrom(parentDirectory(typeof target === 'string' ? target : target.path));
+}
+
+export function infoFrom<BL extends boolean = false>(path: string, isFile?: BL): FileInfo<BL extends true ? 'file' : 'directory'> {
+	const pathParts = normalizeDirectoryPath(path).split('/');
+	const name = pathParts[pathParts.length - 1] ?? '/';
+	return {
+		type: isFile ? 'file' : 'directory',
+		path: path,
+		name: name
+	} as FileInfo<BL extends true ? 'file' : 'directory'>;
+}
+
+export function normalizeDirectoryPath(path: string) {
+	return `/${path.split('/').filter(Boolean).join('/')}`
+}
+
+export function parentDirectory(path: string) {
+	const segments = path.split('/').filter(Boolean)
+	segments.pop()
+	return `/${segments.join('/')}`
+}
+
+export function isSameInfo(a: FileInfo, b: FileInfo) {
+	return a.type === b.type && a.path === b.path
+}
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
index 7107597e5e9..4f6e9e2afda 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
@@ -1,28 +1,36 @@
 <script setup lang="ts">
-import type { Kyros } from '@modrinth/api-client'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, effectScope, onMounted, onScopeDispose, type Ref, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import type {Kyros} from '@modrinth/api-client'
+import {useMutation, useQuery, useQueryClient} from '@tanstack/vue-query'
+import {
+	computed,
+	type ComputedRef, effectScope, markRaw, onMounted, onScopeDispose, type Ref, ref, watch
+} from 'vue'
+import {useRoute, useRouter} from 'vue-router'
 
 import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
-import { useReadyState } from '#ui/composables'
-import { useUploadSessionUpload } from '#ui/composables/hosting/kyros-session-upload'
-import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { useServerPermissions } from '#ui/composables/server-permissions'
+import {useReadyState} from '#ui/composables'
+import {useUploadSessionUpload} from '#ui/composables/hosting/kyros-session-upload'
+import {defineMessages, useVIntl} from '#ui/composables/i18n'
+import {useServerPermissions} from '#ui/composables/server-permissions'
+import {normalizeDirectoryPath, parentInfoFrom} from "#ui/layouts";
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
 	injectNotificationManager,
 } from '#ui/providers'
-import { commonMessages } from '#ui/utils/common-messages'
+import {commonMessages} from '#ui/utils/common-messages'
 
 import FilePageLayout from '../../../shared/files-tab/layout.vue'
 import {
-	type DirectoryTree,
-	type DirectoryQuery,
-	provideFileManager
-} from '../../../shared/files-tab/providers/file-manager'
-import type { EditingFile, FileItem } from '../../../shared/files-tab/types'
+type DirectoryResult, 	type DirectoryTree,
+type FileInfo, type FileItemResult,
+type FileItemResultFrom, type FileQueryResult, type FileResult,
+	type FileTypes, 	provideFileManager} from '../../../shared/files-tab/providers/file-manager'
+import type {FileItem} from '../../../shared/files-tab/types'
+import {
+	infoFromQuery, type QueryableFileTypes,
+	queryFilterFor, queryKeyFor
+} from "./utils";
 
 const props = defineProps<{
 	showDebugInfo?: boolean
@@ -47,9 +55,9 @@ const fileUploadSession = useUploadSessionUpload({
 	uploadState,
 	cancelUpload: cancelUploadRef,
 })
-const { addNotification } = injectNotificationManager()
-const { formatMessage } = useVIntl()
-const { canWriteFiles, canUsePowerActions, permissionDeniedMessage } = useServerPermissions()
+const {addNotification} = injectNotificationManager()
+const {formatMessage} = useVIntl()
+const {canWriteFiles, canUsePowerActions, permissionDeniedMessage} = useServerPermissions()
 
 const route = useRoute()
 const router = useRouter()
@@ -94,116 +102,133 @@ const busyWarning = computed(() =>
 
 // Path & navigation
 const currentPath = computed(() => (typeof route.query.path === 'string' ? route.query.path : '/'))
+const currentLocation = ref<FileInfo>(infoFromQuery(route));
+
+function navigateTo(file: FileInfo) {
+	if (file.type == 'file') {
+		router.push({query: {...route.query, path: currentPath.value, editing: 'true'}})
+	} else {
+		const {editing: _, ...query} = route.query;
+		router.push({query: {...query, path: file.path}})
+	}
 
-function navigateTo(path: string) {
-	const { editing: _, ...query } = route.query
-	router.push({ query: { ...query, path } })
-}
-
-// Editing state (synced with URL)
-const editingFile = ref<EditingFile | null>(null)
-
-function startEditing(file: EditingFile) {
-	editingFile.value = file
-	router.push({ query: { ...route.query, path: currentPath.value, editing: file.path } })
-}
-
-function stopEditing() {
-	editingFile.value = null
-	const newQuery = { ...route.query }
-	delete newQuery.editing
-	router.replace({ query: newQuery })
+	currentLocation.value = file;
 }
 
+// TODO: MAYBE RESTRICT TO ONLY FILE EDITING?
 // Sync editing state from URL
 watch(
 	() => route.query,
 	(newQuery, oldQuery) => {
-		if (newQuery.editing && editingFile.value?.path !== newQuery.editing) {
-			editingFile.value = {
-				name: (newQuery.editing as string).split('/').pop() || '',
-				path: newQuery.editing as string,
-			}
-		} else if (oldQuery?.editing && !newQuery.editing) {
-			editingFile.value = null
+		const newInfo = infoFromQuery(newQuery);
+		const oldInfo = infoFromQuery(oldQuery);
+		if (newInfo.path != oldInfo.path) {
+			currentLocation.value = newInfo;
 		}
 	},
-	{ deep: true },
+	{deep: true},
 )
 
 // Initialize editing from URL on mount
-function initializeFileEdit() {
-	if (!route.query.editing) return
-	const filePath = route.query.editing as string
-	editingFile.value = {
-		name: filePath.split('/').pop() || '',
-		path: filePath,
-	}
+function initializeLocation() {
+	currentLocation.value = infoFromQuery(route);
 }
 
 function isVisibleFileItem(item: Kyros.Files.v0.DirectoryItem) {
 	return !item.path.split('/').includes('.modrinth-staged')
 }
 
-function queryDirectoryEntries(path: string): DirectoryQuery{
-	const {
-		data: directoryData,
-		isLoading,
-		error: loadError,
-	} = useQuery(
+type FileCache = { hash: string, buffer: ArrayBuffer }
+
+const fileQueryOptions: QueryOptions<'file', FileCache> = {
+	queryFn: async (file) => {
+		const buffer = await (await client.kyros.files_v0.downloadFile(file.path)).arrayBuffer();
+
+		const hash = await sha512(buffer)
+
+		return { hash: hash, buffer: markRaw(buffer) } as FileCache;
+	},
+	structuralSharing: (oldData, newData) => {
+		if (!oldData) return newData
+		return (oldData.hash === newData.hash) ? oldData : newData;
+	},
+};
+
+const directoryQueryOptions: QueryOptions<'directory', Kyros.Files.v0.DirectoryResponse> = {
+	queryFn: (file) => client.kyros.files_v0.listDirectory(file.path, 1, 2000),
+}
+
+function queryFileEntry(file: FileInfo<'file'>): FileResult & FileQueryResult {
+	return queryFile(file, (queryData) => computed(() => queryData.value?.buffer ?? null), fileQueryOptions);
+}
+
+// TODO: PAGE SIZE IS LIKE 2000 BUT IN CASES WHERE SOMEONE SOME HOW HAS MORE WE MAY WANT TO
+// LAZY LOAD THE REST OR SOMETHING?
+function queryDirectoryEntries(file: FileInfo<'directory'>): DirectoryResult & FileQueryResult {
+	return queryFile(
+		file,
+		(queryData) => computed<FileItem[]>(() => (queryData.value?.items ?? []).filter(isVisibleFileItem)),
+		directoryQueryOptions);
+}
+
+type QueryOptions<T extends QueryableFileTypes, Q> = {
+	queryFn: (file: FileInfo<T>) => Promise<Q>,
+	structuralSharing?: (oldData: Partial<Q> | undefined, newData: Partial<Q>) => Partial<Q>
+}
+
+function queryFile<T extends QueryableFileTypes, Q, R>(
+	fileInfo: FileInfo<T>,
+	func: (queryData: Ref<Q | undefined>) => ComputedRef<R>,
+	{ queryFn, structuralSharing }: QueryOptions<T, Q>
+): FileItemResult<R, T> & FileQueryResult {
+	const key = queryKeyFor(serverId, undefined, fileInfo);
+
+	const { data, isLoading, error: loadError } = useQuery(
 		{
-			queryKey: computed(() => ['files', serverId, path]),
-			queryFn: async () => {
-				return client.kyros.files_v0.listDirectory(path, 1, 2000)
-			},
+			queryKey: key as readonly string[],
+			queryFn: () => queryFn(fileInfo),
+			structuralSharing: structuralSharing as any,
 			staleTime: 30_000,
 		},
 		queryClient,
 	)
 
 	return {
-		items: computed<FileItem[]>(() =>
-			(directoryData.value?.items ?? []).filter(isVisibleFileItem),
-		),
+		...fileInfo,
+		data: func(data),
 		isLoading: isLoading,
-		filesReadyPending: useReadyState({ isLoading, data: directoryData }),
+		filesReadyPending: useReadyState({isLoading, data}),
 		loadError: loadError,
 	}
 }
 
-// Prefetching
-function normalizeDirectoryPath(path: string) {
-	return `/${path.split('/').filter(Boolean).join('/')}`
+async function sha512(buffer: ArrayBuffer) {
+	const hashBuffer = await crypto.subtle.digest('SHA-512', buffer);
+	return Array.from(new Uint8Array(hashBuffer))
+		.map(b => b.toString(16).padStart(2, '0'))
+		.join('');
 }
 
-function prefetchDirectory(rawPath: string) {
-	const path = normalizeDirectoryPath(rawPath)
-	queryClient.prefetchQuery({
-		queryKey: ['files', serverId, path],
-		queryFn: async () => {
-			try {
-				return await client.kyros.files_v0.listDirectory(path, 1, 2000)
-			} catch {
-				return { items: [], total: 0, current: 1 }
-			}
-		},
-		staleTime: 30_000,
-	})
+function prefetchDirectory(file: FileInfo<'directory'>) {
+	prefetchFile(file, directoryQueryOptions)
 }
 
-function prefetchFile(path: string) {
-	queryClient.prefetchQuery({
-		queryKey: ['file-content', serverId, path],
-		queryFn: async () => {
-			try {
-				const blob = await client.kyros.files_v0.downloadFile(path)
-				return await blob.text()
-			} catch {
-				return null
-			}
-		},
-		staleTime: 30_000,
-	})
+function prefetchFileEntry(file: FileInfo<'file'>) {
+	prefetchFile(file, fileQueryOptions)
+}
+
+function prefetchFile<T extends QueryableFileTypes, Q, R>(
+	file: FileInfo<T>, {queryFn, structuralSharing}: QueryOptions<T, Q>
+): void {
+	const key = queryKeyFor(serverId, undefined, file);
+	queryClient.prefetchQuery(
+		{
+			queryKey: key as readonly string[],
+			queryFn: () => queryFn(file),
+			structuralSharing: structuralSharing as any,
+			staleTime: 30_000,
+		}
+	)
 }
 
 function getQueryKey() {
@@ -214,23 +239,23 @@ const isRefreshing = ref<boolean>(false)
 
 async function refreshList() {
 	isRefreshing.value = true;
-	await queryClient.invalidateQueries({ queryKey: ['files', serverId] })
+	await queryClient.invalidateQueries({queryKey: ['files', serverId]})
 	isRefreshing.value = false;
 }
 
 // Mutations
 const deleteMutation = useMutation({
-	mutationFn: ({ path, recursive }: { path: string; recursive: boolean }) =>
-		client.kyros.files_v0.deleteFileOrFolder(path, recursive),
-	onMutate: async ({ path }) => {
+	mutationFn: async ({file, recursive}: { file: FileInfo; recursive: boolean }) =>
+		client.kyros.files_v0.deleteFileOrFolder(file.path, recursive),
+	onMutate: async ({file}) => {
 		const queryKey = getQueryKey()
-		await queryClient.cancelQueries({ queryKey })
+		await queryClient.cancelQueries({queryKey})
 		const previous = queryClient.getQueryData(queryKey)
 		queryClient.setQueryData(queryKey, (old: Kyros.Files.v0.DirectoryResponse | undefined) => {
 			if (!old) return old
-			return { ...old, items: old.items.filter((item) => item.path !== path) }
+			return {...old, items: old.items.filter((item) => item.path !== file.path)}
 		})
-		return { previous }
+		return {previous}
 	},
 	onError: (err: Error, _vars, context) => {
 		queryClient.setQueryData(getQueryKey(), context?.previous)
@@ -248,33 +273,40 @@ const deleteMutation = useMutation({
 		})
 	},
 	onSettled: () => {
-		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
+		queryClient.invalidateQueries({queryKey: ['files', serverId]})
 	},
 })
 
 const renameMutation = useMutation({
-	mutationFn: ({ path, newName }: { path: string; newName: string }) =>
-		client.kyros.files_v0.renameFileOrFolder(path, newName),
-	onMutate: async ({ path, newName }) => {
+	mutationFn: async ({file, newName}: { file: FileInfo; newName: string }) => {
+		await client.kyros.files_v0.renameFileOrFolder(file.path, newName);
+		const parts = file.path.split('/');
+		return {
+			type: file.type,
+			name: newName,
+			path: normalizeDirectoryPath(parts.length > 0 ? parts.slice(0, parts.length - 1).join('/') : newName)
+		}
+	},
+	onMutate: async ({file, newName}) => {
 		const queryKey = getQueryKey()
-		await queryClient.cancelQueries({ queryKey })
+		await queryClient.cancelQueries({queryKey})
 		const previous = queryClient.getQueryData(queryKey)
 		queryClient.setQueryData(queryKey, (old: Kyros.Files.v0.DirectoryResponse | undefined) => {
 			if (!old) return old
 			return {
 				...old,
 				items: old.items.map((item) =>
-					item.path === path
+					item.path === file.path
 						? {
-								...item,
-								name: newName,
-								path: item.path.replace(/[^/]+$/, newName),
-							}
+							...item,
+							name: newName,
+							path: item.path.replace(/[^/]+$/, newName),
+						}
 						: item,
 				),
 			}
 		})
-		return { previous }
+		return {previous}
 	},
 	onError: (err: Error, _vars, context) => {
 		queryClient.setQueryData(getQueryKey(), context?.previous)
@@ -284,26 +316,32 @@ const renameMutation = useMutation({
 			type: 'error',
 		})
 	},
-	onSuccess: (_, { newName }) => {
-		addNotification({ title: 'Renamed', text: `Renamed to ${newName}`, type: 'success' })
+	onSuccess: (_, {newName}) => {
+		addNotification({title: 'Renamed', text: `Renamed to ${newName}`, type: 'success'})
 	},
 	onSettled: () => {
-		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
+		queryClient.invalidateQueries({queryKey: ['files', serverId]})
 	},
 })
 
 const moveMutation = useMutation({
-	mutationFn: ({ source, destination }: { source: string; destination: string }) =>
-		client.kyros.files_v0.moveFileOrFolder(source, destination),
-	onMutate: async ({ source }) => {
+	mutationFn: async ({source, destination}: { source: FileInfo; destination: string }) => {
+		await client.kyros.files_v0.moveFileOrFolder(source.path, destination);
+		return {
+			name: source.name,
+			type: source.type,
+			path: normalizeDirectoryPath(destination + "/" + source.name)
+		}
+	},
+	onMutate: async ({source}) => {
 		const queryKey = getQueryKey()
-		await queryClient.cancelQueries({ queryKey })
+		await queryClient.cancelQueries({queryKey})
 		const previous = queryClient.getQueryData(queryKey)
 		queryClient.setQueryData(queryKey, (old: Kyros.Files.v0.DirectoryResponse | undefined) => {
 			if (!old) return old
-			return { ...old, items: old.items.filter((item) => item.path !== source) }
+			return {...old, items: old.items.filter((item) => item.path !== source.path)}
 		})
-		return { previous }
+		return {previous}
 	},
 	onError: (err: Error, _vars, context) => {
 		queryClient.setQueryData(getQueryKey(), context?.previous)
@@ -313,20 +351,20 @@ const moveMutation = useMutation({
 			type: 'error',
 		})
 	},
-	onSuccess: (_, { destination }) => {
-		addNotification({ title: 'Moved', text: `Moved to ${destination}`, type: 'success' })
+	onSuccess: (_, {destination}) => {
+		addNotification({title: 'Moved', text: `Moved to ${destination}`, type: 'success'})
 	},
 	onSettled: () => {
-		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
+		queryClient.invalidateQueries({queryKey: ['files', serverId]})
 	},
 })
 
 const createMutation = useMutation({
-	mutationFn: ({ path, type }: { path: string; type: 'file' | 'directory' }) =>
+	mutationFn: ({path, type}: { path: string; type: 'file' | 'directory' }) =>
 		client.kyros.files_v0.createFileOrFolder(path, type),
-	onMutate: async ({ path, type }) => {
+	onMutate: async ({path, type}) => {
 		const queryKey = getQueryKey()
-		await queryClient.cancelQueries({ queryKey })
+		await queryClient.cancelQueries({queryKey})
 		const previous = queryClient.getQueryData(queryKey)
 		const name = path.split('/').pop()!
 		const now = Math.floor(Date.now() / 1000)
@@ -336,13 +374,13 @@ const createMutation = useMutation({
 			type,
 			modified: now,
 			created: now,
-			...(type === 'directory' ? { count: 0 } : { size: 0 }),
+			...(type === 'directory' ? {count: 0} : {size: 0}),
 		}
 		queryClient.setQueryData(queryKey, (old: Kyros.Files.v0.DirectoryResponse | undefined) => {
 			if (!old) return old
-			return { ...old, items: [newItem, ...old.items] }
+			return {...old, items: [newItem, ...old.items]}
 		})
-		return { previous }
+		return {previous}
 	},
 	onError: (err: Error, _vars, context) => {
 		queryClient.setQueryData(getQueryKey(), context?.previous)
@@ -352,7 +390,7 @@ const createMutation = useMutation({
 			type: 'error',
 		})
 	},
-	onSuccess: (_, { path, type }) => {
+	onSuccess: (_, {path, type}) => {
 		const name = path.split('/').pop()
 		addNotification({
 			title: `${type === 'directory' ? 'Folder' : 'File'} created`,
@@ -361,7 +399,7 @@ const createMutation = useMutation({
 		})
 	},
 	onSettled: () => {
-		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
+		queryClient.invalidateQueries({queryKey: ['files', serverId]})
 	},
 })
 
@@ -375,31 +413,19 @@ async function extractFile(path: string, override: boolean, dry: boolean) {
 	await client.kyros.files_v0.extractFile(path, override, false, target)
 }
 
-// File I/O
-async function readFile(path: string): Promise<string> {
-	const normalizedPath = path.startsWith('/') ? path : `/${path}`
-	const cachedContent = queryClient.getQueryData<string>(['file-content', serverId, normalizedPath])
-	if (cachedContent) return cachedContent
-	const blob = await client.kyros.files_v0.downloadFile(normalizedPath)
-	return await blob.text()
-}
-
-async function readFileAsBlob(path: string): Promise<Blob> {
-	const normalizedPath = path.startsWith('/') ? path : `/${path}`
-	return await client.kyros.files_v0.downloadFile(normalizedPath)
-}
-
-async function writeFile(path: string, content: string): Promise<void> {
-	if (fileWriteDisabled.value) return
-	await client.kyros.files_v0.updateFile(path, content)
-	queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
+async function writeFile(file: FileInfo, buffer: ArrayBuffer): Promise<void> {
+	if (fileWriteDisabled.value || file.type != "file") return
+	await client.kyros.files_v0.updateFile(file.path, new Blob([buffer]))
+	await queryClient.invalidateQueries({queryKey: queryFilterFor(serverId, undefined, 'file')})
+	// TODO: POKE CAL ABOUT THIS
+	//queryClient.invalidateQueries({queryKey: ['servers', 'detail', serverId]})
 }
 
-async function downloadFile(path: string, fileName: string): Promise<void> {
+async function downloadFile(file: FileInfo): Promise<void> {
 	try {
-		const fileData = await client.kyros.files_v0.downloadFile(path)
+		const fileData = await client.kyros.files_v0.downloadFile(file.path)
 		if (fileData) {
-			saveBlob(fileData, fileName)
+			saveBlob(fileData, file.name ?? "modrinth-file-download")
 		}
 	} catch {
 		addNotification({
@@ -420,7 +446,7 @@ function saveBlob(blob: Blob, fileName: string) {
 
 async function statFile(path: string): Promise<Kyros.Files.v1.FileStatResponse> {
 	if (!worldId.value) throw new Error('No active world')
-	return client.kyros.files_v1.stat(worldId.value, { path })
+	return client.kyros.files_v1.stat(worldId.value, {path})
 }
 
 async function createZip(data: Kyros.Files.v1.ZipRequest, destination?: string): Promise<void> {
@@ -442,23 +468,23 @@ async function createZip(data: Kyros.Files.v1.ZipRequest, destination?: string):
 		})
 	}
 	zippingFolder.value = true
-	updateOperation({ progress: 0 })
+	updateOperation({progress: 0})
 	try {
 		await client.kyros.files_v1.createZip(worldId.value, data, (record) => {
 			updateOperation(record, record.done ? 'done' : 'ongoing')
 		})
-		updateOperation({ progress: 100 }, 'done')
+		updateOperation({progress: 100}, 'done')
 		addNotification({
 			title: formatMessage(messages.zipCreated),
 			text: destination
-				? formatMessage(messages.zipCreatedDescription, { destination })
+				? formatMessage(messages.zipCreatedDescription, {destination})
 				: undefined,
 			type: 'success',
 		})
 		await refreshList()
 	} catch (error) {
 		updateOperation(
-			{ progress: 0, error: error instanceof Error ? error.message : undefined },
+			{progress: 0, error: error instanceof Error ? error.message : undefined},
 			'failure-error',
 		)
 	} finally {
@@ -466,14 +492,15 @@ async function createZip(data: Kyros.Files.v1.ZipRequest, destination?: string):
 	}
 }
 
-async function zipFolder(path: string): Promise<void> {
-	await createZip({ target_type: 'Directory', path })
+async function zipFolder(file: FileInfo<'directory'>): Promise<void> {
+	await createZip({target_type: 'Directory', path: file.path})
 }
 
-async function zipPaths(parent: string, include: string[], target: string): Promise<void> {
+async function zipPaths(files: FileInfo[], targetDirectory: FileInfo<'directory'>, archiveName: string): Promise<void> {
+	const targetPath = targetDirectory.path;
 	await createZip(
-		{ target_type: 'ManyPaths', parent, include, target },
-		`${parent}/${target}`.replace('//', '/'),
+		{target_type: 'ManyPaths', parent: targetPath, include: files.map((file) => file.path), target: archiveName},
+		`${targetPath}/${archiveName}`.replace('//', '/'),
 	)
 }
 
@@ -485,7 +512,7 @@ watch(
 )
 
 onMounted(async () => {
-	initializeFileEdit()
+	initializeLocation()
 })
 
 // Restart
@@ -523,62 +550,78 @@ function cancelUpload() {
 	fileUploadSession.cancelUpload()
 }
 
-const directories = new Map<string, DirectoryQuery>()
+const fileQueries = new Map<string, FileItemResultFrom<any> & FileQueryResult>()
 const expandedDirectories: Ref<string[]> = ref([])
 
 /** Owns the lazily created directory queries so they're disposed with this page, wherever they were first requested from. */
-const directoryScope = effectScope()
-onScopeDispose(() => directoryScope.stop())
+const fileSystemScope = effectScope()
+onScopeDispose(() => fileSystemScope.stop())
 
 const directoryTree = {
-	prefetch: (path: string) => {
-		const normalized = normalizeDirectoryPath(path)
-		if (!directories.has(normalized)) {
-			prefetchDirectory(normalized)
+	prefetch: <T extends FileTypes>(info : FileInfo<T>) => {
+		if (info.type == "directory") {
+			if (!fileQueries.has(info.path)) {
+				prefetchDirectory(info as FileInfo<'directory'>)
+			}
+		} else if (info.type == 'file') {
+			prefetchFileEntry(info as FileInfo<'file'>)
 		}
 	},
-	get: (path: string): DirectoryQuery => {
-		const normalized = normalizeDirectoryPath(path)
-		let query = directories.get(normalized)
-		if (query == null) {
-			query = directoryScope.run(() => queryDirectoryEntries(normalized))!
-			directories.set(normalized, query)
+	get: <T extends FileTypes>(info : FileInfo<T>): FileItemResultFrom<T> & FileQueryResult => {
+		const type = info.type;
+		if (type != 'directory' || type != 'file') {
+			let query = fileQueries.get(info.path)
+			if (query == null) {
+				if (type == 'directory') {
+					query = fileSystemScope.run(() => queryDirectoryEntries(info as FileInfo<'directory'>))!
+				} else {
+					query = fileSystemScope.run(() => queryFileEntry(info as FileInfo<'file'>))!;
+				}
+				fileQueries.set(query.path, query)
+			}
+			return query as FileItemResultFrom<T> & FileQueryResult;
+		} else {
+			throw new Error(`Unable to handle getting query results for given type '${info.type as any}'`)
 		}
-		return query
 	},
 	expandedEntries: expandedDirectories,
 } satisfies DirectoryTree
 
 // Provide the file manager context
 provideFileManager({
-	currentItems: computed(() => directoryTree.get(currentPath.value).items.value),
 	directoryTree,
-	loading: computed(() => directoryTree.get(currentPath.value).isLoading.value),
-	error: computed(() => directoryTree.get(currentPath.value).loadError.value ?? null),
-	currentPath,
+	loading: computed(() => directoryTree.get(currentLocation.value).isLoading.value),
+	error: computed(() => directoryTree.get(currentLocation.value).loadError.value ?? null),
+	currentFile: computed(() => currentLocation.value),
+	currentDirectory: computed(() => {
+		const location = currentLocation.value;
+		return (location.type != 'file')
+			? location as FileInfo<'directory'>
+			: parentInfoFrom(location.path);
+	}),
 	navigateTo,
-	editingFile,
-	startEditing,
-	stopEditing,
 	createItem: async (name, type) => {
-		if (fileWriteDisabled.value) return
+		if (fileWriteDisabled.value) return null;
 		const path = `${currentPath.value}/${name}`.replace('//', '/')
-		await createMutation.mutateAsync({ path, type })
+		await createMutation.mutateAsync({path, type});
+		return {
+			name: name,
+			path: path,
+			type: type
+		} as FileInfo
 	},
-	renameItem: async (path, newName) => {
-		if (fileWriteDisabled.value) return
-		await renameMutation.mutateAsync({ path, newName })
+	renameItem: async (file, newName) => {
+		if (fileWriteDisabled.value) return null;
+		return await renameMutation.mutateAsync({file, newName})
 	},
 	moveItem: async (source, destination) => {
-		if (fileWriteDisabled.value) return
-		await moveMutation.mutateAsync({ source, destination })
+		if (fileWriteDisabled.value) return null;
+		return await moveMutation.mutateAsync({source, destination})
 	},
-	deleteItem: async (path, recursive) => {
+	deleteItem: async (file, recursive) => {
 		if (fileWriteDisabled.value) return
-		await deleteMutation.mutateAsync({ path, recursive })
+		await deleteMutation.mutateAsync({file, recursive})
 	},
-	readFile,
-	readFileAsBlob,
 	writeFile,
 	downloadFile,
 	statFile,
@@ -593,17 +636,28 @@ provideFileManager({
 	busyTooltip: fileWriteDisabledTooltip,
 	busyWarning,
 	extractFile,
-	prefetchDirectory,
-	prefetchFile,
 	showInstallFromUrl: true,
 	canRestart: canUsePowerActions.value,
 	restartServer,
 	canShareToMclogs: true,
 })
+
+/**
+ * Only the first directory load gates the whole page. Later directory loads are shown by the
+ * files layout itself, so its tabs and sidebar stay in place while a directory loads.
+ */
+const initialLoadPending = ref(true)
+watch(
+	() => directoryTree.get(currentLocation.value).filesReadyPending.value,
+	(pending) => {
+		if (!pending) initialLoadPending.value = false
+	},
+	{immediate: true},
+)
 </script>
 
 <template>
-	<ReadyTransition :pending="directoryTree.get(currentPath).filesReadyPending.value">
+	<ReadyTransition :pending="initialLoadPending">
 		<FilePageLayout
 			:show-debug-info="props.showDebugInfo"
 			:show-refresh-button="props.showRefreshButton"
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index 40cc0b767fc..58604d6eab2 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -106,10 +106,10 @@
 		:class="[
 			'server-panel-' + revealState,
 			containedLayout
-				? 'h-full min-h-0 overflow-hidden pb-6'
+				? 'h-full min-h-0 overflow-hidden'
 				: constrainWidth
-					? ['min-h-[100svh] pb-16', centerEntries ? 'max-w-[1280px]' : '']
-					: 'min-h-[calc(100svh-100px)] pb-6',
+					? ['min-h-[100svh] ', centerEntries ? 'max-w-[1280px]' : '']
+					: 'min-h-[calc(100svh-100px)]',
 		]"
 	>
 		<template v-if="revealState !== 'pending' || isOnboarding">
@@ -236,14 +236,15 @@
 						:class="[containedLayout ? 'shrink-0' : '', 'px-0 py-0']"
 						:style="{ '--si': 1 }"
 					/>
-					<IconButton v-if="allowConstrainWidthToggle"
+					<IconButton
+v-if="allowConstrainWidthToggle"
 						v-tooltip="constrainWidth ? 'Expand View' : 'Collapse View'"
 						size="md"
 						:label="constrainWidth ? 'Expand View' : 'Collapse View'"
 						native-type="button"
-						@click="() => constrainWidth = !constrainWidth"
 						class="ml-2"
 						:style="{ '--si': 1 }"
+						@click="() => constrainWidth = !constrainWidth"
 					>
 						<ExpandIcon v-if="constrainWidth" />
 						<CollapseIcon v-else />
@@ -321,8 +322,10 @@ import type { Archon, Labrinth } from '@modrinth/api-client'
 import { ModrinthApiError, NuxtModrinthClient } from '@modrinth/api-client'
 import {
 	BoxesIcon,
+	CollapseIcon,
 	CopyIcon,
 	DatabaseBackupIcon,
+	ExpandIcon,
 	FolderOpenIcon,
 	IssuesIcon,
 	LayoutTemplateIcon,
@@ -332,8 +335,6 @@ import {
 	MoreVerticalIcon,
 	ServerIcon as ServerAssetIcon,
 	SettingsIcon,
-	ExpandIcon,
-	CollapseIcon,
 	TimerIcon,
 	TransferIcon,
 	TriangleAlertIcon,
@@ -341,7 +342,7 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import {useLocalStorage, useStorage} from '@vueuse/core'
+import {useLocalStorage, useResizeObserver,useStorage} from '@vueuse/core'
 import DOMPurify from 'dompurify'
 import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
@@ -392,7 +393,6 @@ import { commonMessages } from '#ui/utils/common-messages'
 import { formatLoaderLabel } from '#ui/utils/loaders'
 
 import ServerOnboardingPanelPage from './[id]/onboarding.vue'
-import {useResizeObserver} from "@vueuse/core/index";
 
 interface Tab {
 	label: string
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/utils.ts b/packages/ui/src/layouts/wrapped/hosting/manage/utils.ts
new file mode 100644
index 00000000000..f0c926c28cd
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/utils.ts
@@ -0,0 +1,34 @@
+import type {LocationQuery, RouteLocationNormalizedLoadedGeneric} from "vue-router";
+
+import type {FileInfo} from "#ui/layouts/shared/files-tab/providers/file-manager.ts";
+import {infoFrom} from "#ui/layouts/shared/files-tab/utils.ts";
+
+export type FileTypeToQueryStart = {
+	'file': 'file-content',
+	'directory': 'files'
+};
+
+export type QueryableFileTypes = keyof FileTypeToQueryStart;
+
+type FileQueryKey<T extends QueryableFileTypes> =
+	readonly [FileTypeToQueryStart[T], serverId: string, path: string]
+	| readonly [FileTypeToQueryStart[T], serverId: string, worldId: string, path: string];
+
+type FileQueryFilter<T extends QueryableFileTypes> = FileQueryKey<T> |
+	(readonly [FileTypeToQueryStart[T], serverId: string]
+		| readonly [FileTypeToQueryStart[T], serverId: string, worldId: string]);
+
+export function queryFilterFor<T extends QueryableFileTypes>(serverId: string, worldId: string | undefined | null, type: T, path?: string): FileQueryFilter<T> {
+	const rootQueryPart = (type == "file" ? 'file-content' : 'files') as FileTypeToQueryStart[T];
+	return [rootQueryPart, serverId, ...(worldId ? [worldId] as const: [] as const), ...(path ? [path] as const: [] as const)] as FileQueryKey<T>
+}
+
+export function queryKeyFor<T extends QueryableFileTypes>(serverId: string, worldId: string | undefined | null, info: FileInfo<T>): FileQueryKey<T> {
+	const rootQueryPart = (info.type == "file" ? 'file-content' : 'files') as FileTypeToQueryStart[T];
+	return [rootQueryPart, serverId, ...(worldId ? [worldId] as const: [] as const), info.path] as FileQueryKey<T>
+}
+
+export function infoFromQuery(value: LocationQuery | RouteLocationNormalizedLoadedGeneric): FileInfo {
+	const query = (value as Partial<RouteLocationNormalizedLoadedGeneric>).name != null ? value.query as LocationQuery : value as LocationQuery;
+	return infoFrom(query.path === 'string' ? query.path : '/', query.editing === 'true')
+}
diff --git a/packages/ui/src/providers/app-root.ts b/packages/ui/src/providers/app-root.ts
index 67730faf360..5d20ed124f8 100644
--- a/packages/ui/src/providers/app-root.ts
+++ b/packages/ui/src/providers/app-root.ts
@@ -1,7 +1,8 @@
-import { createContext } from './create-context'
 import type {MaybeElement} from "@vueuse/core";
 import type {ComputedRef} from "vue";
 
+import { createContext } from './create-context'
+
 export const [injectAppRoot, provideAppRoot] = createContext<{root: ComputedRef<MaybeElement>}>(
 	'root',
 	'appRoot',
diff --git a/packages/ui/src/providers/tooltip.ts b/packages/ui/src/providers/tooltip.ts
index cb80eb765a0..4bbc4b41a7c 100644
--- a/packages/ui/src/providers/tooltip.ts
+++ b/packages/ui/src/providers/tooltip.ts
@@ -183,7 +183,24 @@ function isFocusVisible(el: HTMLElement) {
 	return active.matches(':focus-visible')
 }
 
-export function tooltipEnter(el: HTMLElement) {
+let showTimeoutData: { id: TimeoutId | undefined, el: HTMLElement } | undefined = undefined;
+
+export function tooltipEnter(el: HTMLElement, timeout?: number): void {
+	if (timeout != undefined) {
+		// TODO: SHOULD ATTEMPT TO HIDE ANY PREVIOUS CALLS RIGHT AWAY?
+		const timeoutId = setTimeout(() => {
+			if (showTimeoutData) tooltipEnterBase(showTimeoutData.el)
+		}, timeout);
+		if (showTimeoutData) clearTimeout(showTimeoutData.id);
+		if (hideTimeoutData?.el === el) clearTimeout(hideTimeoutData.id);
+
+		showTimeoutData = { id: timeoutId, el: el }
+	} else {
+		tooltipEnterBase(el)
+	}
+}
+
+export function tooltipEnterBase(el: HTMLElement) {
 	if (!hasTooltipContent(el)) {
 		return
 	}
@@ -205,9 +222,11 @@ export function preventTooltipClosure(el: HTMLElement) {
 export function tooltipLeave(el: HTMLElement, timeout?: number): void {
 	if (timeout != undefined) {
 		// TODO: SHOULD ATTEMPT TO HIDE ANY PREVIOUS CALLS RIGHT AWAY?
-		let timeoutId = setTimeout(() => {
+		const timeoutId = setTimeout(() => {
 			if (hideTimeoutData) tooltipLeaveBase(hideTimeoutData.el)
 		}, timeout);
+		if (hideTimeoutData?.el === el) clearTimeout(hideTimeoutData.id);
+		if (showTimeoutData?.el === el) clearTimeout(showTimeoutData.id);
 
 		hideTimeoutData = { id: timeoutId, el: el }
 	} else {

From a693a626fb3705465467401981874f65284375b9 Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Sat, 3 Oct 2026 16:10:24 -0500
Subject: [PATCH 04/18] fix: Resolve missing icon for panel open and close

---
 .../layouts/shared/files-tab/components/FileActionBar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
index 4d543b3a9ef..c8788559f50 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
@@ -18,8 +18,8 @@
 							class="bg-surface-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
 							@click="() => $emit('toggleSidebar')"
 						>
-							<PanelLeftCloseIcon v-if="sidebarOpen && !smallMode" />
-							<PanelLeftOpenIcon v-else />
+							<PanelRightCloseIcon v-if="sidebarOpen && !smallMode" transform="rotate(180)" />
+							<PanelRightOpenIcon v-else transform="rotate(180)"/>
 							<span class="sr-only">{{ formatMessage(messages.expand) }}</span>
 						</IconButton>
 					</div>
@@ -114,8 +114,8 @@ import {
 	FileArchiveIcon,
 	FolderOpenIcon,
 	LinkIcon,
-	PanelLeftCloseIcon,
-	PanelLeftOpenIcon,
+	PanelRightCloseIcon,
+	PanelRightOpenIcon,
 	PlusIcon,
 	RefreshCwIcon,
 	SearchIcon,

From f62f89bd355b27137358a7229d17c71de6860eeb Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Sat, 3 Oct 2026 19:39:33 -0500
Subject: [PATCH 05/18] fix: resolve issues with breadcrumb navigation not
 going to correct location

---
 .../files-tab/components/FileBrowserPanel.vue |  8 +++----
 .../files-tab/components/FileNavbar.vue       | 24 +++++++++----------
 .../src/layouts/shared/files-tab/layout.vue   | 12 ++++------
 .../files-tab/providers/file-browser-ui.ts    |  2 +-
 .../ui/src/layouts/shared/files-tab/utils.ts  | 17 +++++++------
 5 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
index 21f5bbd1094..b8879581c0e 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
@@ -16,7 +16,7 @@
 		>
 		<FileNavbar
 			:sidebar-open="sidebarOpen"
-			:breadcrumbs="ui.breadcrumbSegments.value"
+			:active-location="ui.activeLocation.value"
 			:is-editing="ui.isEditing.value"
 			:editing-file-name="ctx.currentFile.value?.name"
 			:editing-file-path="ctx.currentFile.value?.path"
@@ -34,9 +34,7 @@
 			@back="ui.fileTabs.back"
 			@forward="ui.fileTabs.forward"
 			@navigate="ui.navigateToSegment"
-			@navigate-home="() => {
-				ui.navigateToSegment(-1)
-			}"
+			@navigate-home="() => ui.navigateToSegment(0)"
 			@prefetch-home="ui.handleHomePrefetch"
 			@update:search-query="(value) => (ui.searchQuery.value = value)"
 			@create="ui.showCreateModal"
@@ -68,7 +66,7 @@
 				:title="formatMessage(messages.errorTitle)"
 				:message="formatMessage(messages.errorMessage)"
 				@refetch="ctx.refresh"
-				@home="() => ui.navigateToSegment(-1)"
+				@home="() => ui.navigateToSegment(0)"
 			/>
 			<div v-else-if="!isFileActive">
 				<FileUploadDragAndDrop
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
index aa5dfb5a954..b8e2fbd58af 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
@@ -84,28 +84,25 @@ v-if="breadcrumbs != null"
 								type="quiet"
 								class="cursor-pointer whitespace-nowrap focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
 								:aria-current="
-												!isEditing && index === breadcrumbs.length - 1 ? 'location' : undefined
+												index === breadcrumbs.length - 1 ? 'location' : undefined
 											"
 								:class="{
-												'!text-contrast': !isEditing && index === breadcrumbs.length - 1,
+												'!text-contrast': index === breadcrumbs.length - 1,
 											}"
-								@click="$emit('navigate', index)"
+								@click="() => {
+									if (index < breadcrumbs.length - 1) $emit('navigate', index + 1)
+								}"
 							>
 								{{ segment || '' }}
 							</Button>
 							<ChevronRightIcon
-								v-if="index < breadcrumbs.length - 1 || isEditing"
+								v-if="index < breadcrumbs.length - 1"
 								class="size-4 flex-shrink-0 text-secondary"
 								aria-hidden="true"
 							/>
 						</div>
 					</li>
 				</TransitionGroup>
-				<li v-if="isEditing && editingFileName" class="flex items-center px-3 text-base">
-					<span class="font-semibold !text-contrast" aria-current="location">
-						{{ editingFileName }}
-					</span>
-				</li>
 			</ol>
 		</nav>
 	</FileActionBar>
@@ -114,12 +111,13 @@ v-if="breadcrumbs != null"
 <script setup lang="ts">
 
 import {ChevronLeftIcon, ChevronRightIcon, HomeIcon} from "@modrinth/assets";
-import {onBeforeUnmount, onMounted, ref, watch} from "vue";
+import {computed, onBeforeUnmount, onMounted, ref, watch} from "vue";
 
 import {Button, IconButton} from "#ui/components/base/buttons";
 import {defineMessages, useVIntl} from "#ui/composables";
 import type {EmitCallbacks,Properties} from "#ui/layouts/shared/files-tab/components/FileActionBar.vue";
 import FileActionBar from "#ui/layouts/shared/files-tab/components/FileActionBar.vue";
+import type { FileInfo } from "../providers/file-manager";
 
 const { formatMessage } = useVIntl()
 
@@ -159,7 +157,7 @@ defineExpose({
 
 const props = withDefaults(
 	defineProps<{
-		breadcrumbs: string[]
+		activeLocation: FileInfo
 		isEditing: boolean
 		editingFileName?: string
 		canGoBack?: boolean
@@ -170,6 +168,8 @@ const props = withDefaults(
 	}
 )
 
+const breadcrumbs = computed(() => props.activeLocation.path.split('/').filter(Boolean))
+
 defineEmits<{
 	navigate: [index: number]
 	navigateHome?: []
@@ -232,7 +232,7 @@ onBeforeUnmount(() => {
 })
 
 watch(
-	() => props.breadcrumbs,
+	() => props.activeLocation,
 	() => {
 		requestAnimationFrame(checkBreadcrumbOverflow)
 	},
diff --git a/packages/ui/src/layouts/shared/files-tab/layout.vue b/packages/ui/src/layouts/shared/files-tab/layout.vue
index 49b1717129e..6be8ab7bc64 100644
--- a/packages/ui/src/layouts/shared/files-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/files-tab/layout.vue
@@ -273,9 +273,7 @@ const isEditing = computed(() => ctx.currentFile.value !== null && ctx.currentFi
 const isBusy = computed(() => (ctx.isBusy?.value ?? false) || (ctx.isReadOnly?.(ctx.currentFile.value) ?? false))
 const busyTooltip = computed(() => ctx.isReadOnly?.(ctx.currentFile.value) ? ctx.readOnlyReason?.value : ctx.busyTooltip?.value,)
 
-const breadcrumbSegments = computed(() =>
-	parentInfoFrom(fileTabs.activeLocation.value).path.split('/').filter(Boolean),
-)
+const activeLocation = computed(() => fileTabs.activeLocation.value)
 
 // Composables
 const { searchQuery, searchedItems } = useFileSearch(items)
@@ -473,9 +471,7 @@ async function confirmDiscardEditors(editors: Iterable<FileEditorBridge>): Promi
 }
 
 async function navigateToSegment(index: number) {
-	const segments = breadcrumbSegments.value.slice(0, index + 1);
-	const path = `/${segments.join('/')}`
-	await fileTabs.navigate(parentInfoFrom(path))
+	await fileTabs.navigate(parentInfoFrom(activeLocation.value, index))
 }
 
 async function handleNavigateTo(item: FileInfo) {
@@ -581,7 +577,7 @@ async function handleExtractItem(item: { name: string; type: string; path: strin
 		const dry = await ctx.extractFile(item.path, true, true)
 		if (dry) {
 			if (dry.conflicting_files.length === 0) {
-				handleExtractConfirm(item.path)
+				await handleExtractConfirm(item.path)
 			} else {
 				uploadConflictModal.value?.show(item.path, dry.conflicting_files)
 			}
@@ -736,7 +732,7 @@ provideFileBrowserUI({
 	isEditing,
 	isBusy,
 	busyTooltip,
-	breadcrumbSegments,
+	activeLocation,
 	sidebarOpen: computed(() => sidebarOpen.value),
 	setSidebarOpen: (value) => {
 		sidebarOpen.value = value;
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts b/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
index 89284b7e246..91d7303bd9a 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
@@ -31,7 +31,7 @@ export interface FileBrowserUIContext {
 	isEditing: ComputedRef<boolean>
 	isBusy: ComputedRef<boolean>
 	busyTooltip: ComputedRef<string | undefined>
-	breadcrumbSegments: ComputedRef<string[]>
+	activeLocation: ComputedRef<FileInfo>
 	sidebarOpen: ComputedRef<boolean>
 	setSidebarOpen: (value: boolean) => void
 	/** Width of the main content column, i.e. the space `FileBrowserPanel` actually has. */
diff --git a/packages/ui/src/layouts/shared/files-tab/utils.ts b/packages/ui/src/layouts/shared/files-tab/utils.ts
index 9c4c9142de0..695b2a74b1a 100644
--- a/packages/ui/src/layouts/shared/files-tab/utils.ts
+++ b/packages/ui/src/layouts/shared/files-tab/utils.ts
@@ -10,15 +10,16 @@ export function joinDisplayPath(basePath: string | undefined, itemPath: string)
 	return path ? `${base}${separator}${path}` : basePath
 }
 
-export function parentInfoFrom(target: string | FileInfo) {
-	return infoFrom(parentDirectory(typeof target === 'string' ? target : target.path));
+export function parentInfoFrom(target: string | FileInfo, end?: number) {
+	return infoFrom(parentDirectory(typeof target === 'string' ? target : target.path, end));
 }
 
-export function infoFrom<BL extends boolean = false>(path: string, isFile?: BL): FileInfo<BL extends true ? 'file' : 'directory'> {
-	const pathParts = normalizeDirectoryPath(path).split('/');
+export function infoFrom<BL extends boolean = false>(target: string | FileInfo, isFile?: BL): FileInfo<BL extends true ? 'file' : 'directory'> {
+	const path = normalizeDirectoryPath(typeof target == 'string' ? target : target.path);
+	const pathParts = path.split('/');
 	const name = pathParts[pathParts.length - 1] ?? '/';
 	return {
-		type: isFile ? 'file' : 'directory',
+		type: typeof target != 'string' ? target.type : (isFile ? 'file' : 'directory'),
 		path: path,
 		name: name
 	} as FileInfo<BL extends true ? 'file' : 'directory'>;
@@ -28,10 +29,8 @@ export function normalizeDirectoryPath(path: string) {
 	return `/${path.split('/').filter(Boolean).join('/')}`
 }
 
-export function parentDirectory(path: string) {
-	const segments = path.split('/').filter(Boolean)
-	segments.pop()
-	return `/${segments.join('/')}`
+export function parentDirectory(path: string, end?: number) {
+	return `/${path.split('/').filter(Boolean).slice(0, end ?? -1).join('/')}`
 }
 
 export function isSameInfo(a: FileInfo, b: FileInfo) {

From 4efb6bb22bab164bbdb8fd124cbc5f7ce8ac6734 Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Sat, 3 Oct 2026 19:41:18 -0500
Subject: [PATCH 06/18] refactor: Adjust File details, file column
 ordering/defaults, remove debug logging

---
 .../files-tab/components/FileActionBar.vue    |   7 +-
 .../files-tab/components/FileBrowserPanel.vue |   8 +-
 .../shared/files-tab/components/FileRow.vue   | 113 ++++++++----------
 .../components/FileSidebarHeader.vue          |  73 -----------
 .../shared/files-tab/components/FileTree.vue  |  28 ++---
 .../files-tab/composables/file-columns.ts     |   9 +-
 6 files changed, 68 insertions(+), 170 deletions(-)
 delete mode 100644 packages/ui/src/layouts/shared/files-tab/components/FileSidebarHeader.vue

diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
index c8788559f50..4334aac796b 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
@@ -224,12 +224,7 @@ const props = withDefaults(
 	}
 )
 
-console.log(`Test: [hasNav: ${props.hasNav}, smallMode: ${props.smallMode}, sidebarOpen: ${props.sidebarOpen}]`);
-
-const smallMode = computed(() => {
-	if (props.hasNav) console.log(`Test: [${props.smallMode}, ${props.sidebarOpen}]`);
-	return props.smallMode;
-})
+const smallMode = computed(() => props.smallMode)
 
 export type EmitCallbacks = {
 	toggleSidebar: []
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
index b8879581c0e..ea803594fcc 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
@@ -102,13 +102,7 @@
 								v-for="(item, idx) in visibleItems"
 								:key="item.path"
 								:class="`h-[${itemHeight}]`"
-								:count="item.count"
-								:created="item.created"
-								:modified="item.modified"
-								:name="item.name"
-								:path="item.path"
-								:type="item.type"
-								:size="item.size"
+								:file="item"
 								:index="visibleRange.start + idx"
 								:is-last="visibleRange.start + idx === filteredItems.length - 1"
 								:selected="ui.selectedItems.value.has(item.path)"
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue b/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
index c53d7d38ba1..e17e14958a2 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
@@ -1,12 +1,12 @@
 <template>
-	<Tooltip :action-wait="{hover: 600, unhover: 200}">
+	<Tooltip :action-wait="{hover: 600, unhover: 50}">
 		<li
 			role="option"
 			:class="[containerClasses, isDragSource ? 'opacity-50' : '', compact ? 'h-8' : 'h-[3.25rem]', ]"
 			:style="depth != null ? { paddingLeft: `${(depth * basePaddingFactor)}rem`} : undefined"
 			tabindex="0"
-			:data-file-path="path"
-			:data-file-type="type"
+			:data-file-path="file.path"
+			:data-file-type="file.type"
 			:aria-expanded="canExpand ? expanded : undefined"
 			:aria-current="active ? 'location' : undefined"
 			@click="selectItem"
@@ -61,7 +61,7 @@ v-if="!selectionWithinActionMenu"
 						class="pointer-events-none truncate group-hover:text-contrast group-focus:text-contrast"
 						:class="{ 'text-sm': compact, 'font-semibold text-contrast': active }"
 					>
-						{{ name }}
+						{{ file.name }}
 					</span>
 				</div>
 				<EditIcon v-if="hoveringToEdit && isEditableFile && !compact" />
@@ -102,36 +102,16 @@ v-if="!selectionWithinActionMenu"
 		</li>
 		<template #popper>
 			<div class="flex flex-col w-fit">
-				<h3 class="mb-2 pb-1 mt-0 text-base font-semibold border-0 border-b-[1px] border-solid border-divider">Details</h3>
-				<div class="gap-1 grid grid-cols-2">
-					<template v-if="type === 'directory'">
+				<h3 class="mb-2 pb-1 mt-0 text-base font-semibold border-0 border-b-[1px] border-solid border-divider">{{ formatMessage(messages.details) }}</h3>
+				<div class="gap-1 grid grid-cols-2" v-for="(key) in FILE_COLUMNS_ORDER">
+					<template v-if="columnValues[key] != null">
 						<span class="text-nowrap text-sm text-secondary">
-							{{ formatMessage(messages.items) }}
+						{{ formatMessage(messages[key]) }}
 						</span>
 						<span class="text-nowrap text-sm text-secondary">
-							{{ columnValues.items }}
+							{{ columnValues[key] ?? ' - ' }}
 						</span>
 					</template>
-					<template v-else>
-						<span class="text-nowrap text-sm text-secondary">
-							{{ formatMessage(messages.size) }}
-						</span>
-						<span class="text-nowrap text-sm text-secondary">
-							{{ columnValues.size }}
-						</span>
-					</template>
-					<span class="text-nowrap text-sm text-secondary">
-						{{ formatMessage(messages.created) }}
-					</span>
-					<span class="text-nowrap text-sm text-secondary">
-						{{ formattedCreationDate }}
-					</span>
-					<span class="text-nowrap text-sm text-secondary">
-						{{ formatMessage(messages.modified) }}
-					</span>
-					<span class="text-nowrap text-sm text-secondary">
-						{{ formattedModifiedDate }}
-					</span>
 				</div>
 			</div>
 		</template>
@@ -168,14 +148,14 @@ import Checkbox from '#ui/components/base/Checkbox.vue'
 import { useFormatBytes } from '#ui/composables'
 import { useFormatDateTime } from '#ui/composables/format-date-time'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { injectFileManager } from '#ui/layouts'
+import {infoFrom, injectFileManager} from '#ui/layouts'
 import { useFileActions } from "#ui/layouts/shared/files-tab/composables/folder-actions.ts";
 import { injectNotificationManager } from '#ui/providers/web-notifications'
 import { getFileExtensionIcon } from '#ui/utils/auto-icons'
 import { commonMessages } from '#ui/utils/common-messages'
 import { canOpenInFileEditor, getFileExtension } from '#ui/utils/file-extensions'
 
-import { FILE_COLUMNS, type FileColumn } from '../composables/file-columns'
+import {FILE_COLUMNS, FILE_COLUMNS_ORDER, type FileColumn} from '../composables/file-columns'
 import {
 	fileDragActive,
 	fileDragData,
@@ -205,6 +185,10 @@ const messages = defineMessages({
 		id: 'files.table-header.size',
 		defaultMessage: 'Size',
 	},
+	details: {
+		id: 'files.table-header.details',
+		defaultMessage: 'Details',
+	},
 	items: {
 		id: 'files.table-header.items',
 		defaultMessage: 'Items',
@@ -236,8 +220,9 @@ const messages = defineMessages({
 })
 
 const props = defineProps<
-	FileItem & {
+	{
 		index: number
+		file: FileItem,
 		isLast: boolean
 		selected: boolean
 		writeDisabled?: boolean
@@ -291,18 +276,18 @@ const emit = defineEmits<{
 }>()
 
 const canExpand = computed(
-	() => !!props.isTreeRow && props.type === 'directory' && props.expandable !== false,
+	() => !!props.isTreeRow && props.file.type === 'directory' && props.expandable !== false,
 )
 
 const shownColumnDefinitions = computed(() =>
 	(props.columns ?? []).flatMap((id) => FILE_COLUMNS.filter((column) => column.id === id)),
 )
-const canOpenInTab = computed(() => props.type === 'directory' || isEditableFile.value)
+const canOpenInTab = computed(() => props.file.type === 'directory' || isEditableFile.value)
 
 const isDropTarget = computed(
-	() => fileDragActive.value && fileDragTarget.value === props.path && props.type === 'directory',
+	() => fileDragActive.value && fileDragTarget.value === props.file.path && props.file.type === 'directory',
 )
-const isDragSource = computed(() => fileDragActive.value && fileDragData.value?.path === props.path)
+const isDragSource = computed(() => fileDragActive.value && fileDragData.value?.path === props.file.path)
 const hoveringToEdit = ref<boolean>(false);
 
 const formatDateTime = useFormatDateTime({
@@ -331,17 +316,17 @@ const containerClasses = computed(() => {
 							? 'bg-surface-2'
 							: 'bg-surface-1.5',
 		props.isLast ? '' : '',
-		isEditableFile.value || props.type === 'directory' ? 'cursor-pointer hover:bg-surface-2.5' : '',
+		isEditableFile.value || props.file.type === 'directory' ? 'cursor-pointer hover:bg-surface-2.5' : '',
 		'transition-colors duration-100 focus:!outline-none',
 	]
 })
 
-const fileExtension = computed(() => getFileExtension(props.name))
+const fileExtension = computed(() => getFileExtension(props.file.name))
 
 const canExtract = computed(() => fileExtension.value === 'zip' && !!ctx.extractFile)
 
 function getFullPath() {
-	return joinDisplayPath(ctx.basePath?.value, props.path)
+	return joinDisplayPath(ctx.basePath?.value, props.file.path)
 }
 
 const { options } = useFileActions(
@@ -350,7 +335,7 @@ const { options } = useFileActions(
 );
 
 const menuOptions = computed<ButtonMenuOption[]>(() => {
-	const item = { name: props.name, type: props.type, path: props.path }
+	const item = infoFrom(props.file)
 	const wd = props.writeDisabled
 	const wdTooltip = props.writeDisabledTooltip
 	return [
@@ -383,7 +368,7 @@ const menuOptions = computed<ButtonMenuOption[]>(() => {
 			label: formatMessage(commonMessages.copyFilenameButton),
 			icon: ClipboardCopyIcon,
 			action: () => {
-				navigator.clipboard.writeText(props.name)
+				navigator.clipboard.writeText(props.file.name)
 				addNotification({
 					title: formatMessage(commonMessages.copiedFilenameLabel),
 					type: 'success',
@@ -421,12 +406,12 @@ const menuOptions = computed<ButtonMenuOption[]>(() => {
 			id: 'zip',
 			label: formatMessage(messages.createZip),
 			icon: FolderArchiveIcon,
-			shown: props.type === 'directory' && !!ctx.zipFolder,
+			shown: props.file.type === 'directory' && !!ctx.zipFolder,
 			disabled: wd,
 			tooltip: wd ? wdTooltip : undefined,
 			action: () => emit('zip', item),
 		},
-		{ type: 'divider', shown: props.type === 'directory' && !!ctx.zipFolder },
+		{ type: 'divider', shown: props.file.type === 'directory' && !!ctx.zipFolder },
 		{
 			id: 'rename',
 			label: formatMessage(commonMessages.renameButton),
@@ -448,7 +433,7 @@ const menuOptions = computed<ButtonMenuOption[]>(() => {
 			label: ctx.downloadButtonLabel ?? formatMessage(commonMessages.downloadButton),
 			icon: DownloadIcon,
 			action: () => emit('download', item),
-			shown: props.type !== 'directory',
+			shown: props.file.type !== 'directory',
 		},
 		{
 			id: 'delete',
@@ -463,13 +448,13 @@ const menuOptions = computed<ButtonMenuOption[]>(() => {
 })
 
 const iconComponent = computed(() => {
-	if (props.type === 'directory') {
-		if (props.name === 'config') return FolderCogIcon
-		if (props.name === 'world' || props.name === 'saves') return GlobeIcon
-		if (props.name === 'mods') return BoxIcon
-		if (props.name === 'resourcepacks') return PaintbrushIcon
-		if (props.name === 'shaderpacks') return GlassesIcon
-		if (props.name === 'datapacks') return BracesIcon
+	if (props.file.type === 'directory') {
+		if (props.file.name === 'config') return FolderCogIcon
+		if (props.file.name === 'world' || props.file.name === 'saves') return GlobeIcon
+		if (props.file.name === 'mods') return BoxIcon
+		if (props.file.name === 'resourcepacks') return PaintbrushIcon
+		if (props.file.name === 'shaderpacks') return GlassesIcon
+		if (props.file.name === 'datapacks') return BracesIcon
 		return FolderOpenIcon
 	}
 
@@ -477,26 +462,26 @@ const iconComponent = computed(() => {
 })
 
 const formattedModifiedDate = computed(() => {
-	const date = new Date(props.modified * 1000)
+	const date = new Date(props.file.modified * 1000)
 	return formatDateTime(date)
 })
 
 const formattedCreationDate = computed(() => {
-	const date = new Date(props.created * 1000)
+	const date = new Date(props.file.created * 1000)
 	return formatDateTime(date)
 })
 
 const isEditableFile = computed(() => {
-	if (props.type === 'file') {
-		return canOpenInFileEditor(props.name)
+	if (props.file.type === 'file') {
+		return canOpenInFileEditor(props.file.name)
 	}
 	return false
 })
 
-const columnValues = computed<Record<FileColumn, string>>(() => ({
-	size: props.size != null ? formatBytes(props.size) : '',
+const columnValues = computed<Record<FileColumn, string | null>>(() => ({
+	size: props.file.size != null ? formatBytes(props.file.size) : null,
 	items:
-		props.type === 'directory' ? formatMessage(messages.itemCount, { count: props.count ?? 0 }) : '',
+		props.file.type === 'directory' ? formatMessage(messages.itemCount, { count: props.file.count ?? 0 }) : null,
 	created: formattedCreationDate.value,
 	modified: formattedModifiedDate.value,
 }))
@@ -508,7 +493,7 @@ function openContextMenu(event: MouseEvent) {
 
 function handleMouseEnter() {
 	hoveringToEdit.value = true;
-	emit('hover', { name: props.name, type: props.type, path: props.path })
+	emit('hover', { name: props.file.name, type: props.file.type, path: props.file.path })
 }
 
 function handleMouseLeave() {
@@ -526,10 +511,10 @@ function selectItem(event?: MouseEvent) {
 	if (isNavigating.value) return
 	isNavigating.value = true
 
-	const item = { name: props.name, type: props.type, path: props.path }
-	if (props.type === 'directory') {
+	const item = { name: props.file.name, type: props.file.type, path: props.file.path }
+	if (props.file.type === 'directory') {
 		emit('navigate', item)
-	} else if (props.type === 'file' && isEditableFile.value) {
+	} else if (props.file.type === 'file' && isEditableFile.value) {
 		emit('edit', item)
 	}
 
@@ -541,7 +526,7 @@ function selectItem(event?: MouseEvent) {
 function handleAuxClick(event: MouseEvent) {
 	if (event.button !== 1 || !canOpenInTab.value) return
 	event.preventDefault()
-	emit('open-in-new-tab', { name: props.name, type: props.type, path: props.path })
+	emit('open-in-new-tab', { name: props.file.name, type: props.file.type, path: props.file.path })
 }
 
 function handleKeydown(event: KeyboardEvent) {
@@ -556,7 +541,7 @@ function handleKeydown(event: KeyboardEvent) {
 function handlePointerDown(e: PointerEvent) {
 	if (e.button !== 0) return
 	startFileDrag(
-		{ name: props.name, type: props.type, path: props.path },
+		{ name: props.file.name, type: props.file.type, path: props.file.path },
 		e,
 		(source, destination) => {
 			emit('moveDirectTo', source, destination)
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileSidebarHeader.vue b/packages/ui/src/layouts/shared/files-tab/components/FileSidebarHeader.vue
deleted file mode 100644
index 3f84e4e6bc2..00000000000
--- a/packages/ui/src/layouts/shared/files-tab/components/FileSidebarHeader.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-	<div
-		aria-hidden="true"
-		class="sticky top-0 z-10 flex h-12 w-full select-none flex-row items-center justify-between bg-surface-3 pl-3 pr-4 font-medium transition-[border-radius] duration-100"
-		:class="
-			isStuck
-				? 'rounded-none border-0 border-y border-solid border-surface-4 shadow-md before:pointer-events-none before:absolute before:inset-x-0 before:-top-4 before:h-5 before:bg-surface-3'
-				: ''
-		"
-	>
-		<div class="flex flex-1 items-center gap-3">
-			<Checkbox
-				:model-value="allSelected"
-				:indeterminate="someSelected && !allSelected"
-				@update:model-value="$emit('toggle-all')"
-			/>
-			<button
-				class="flex appearance-none items-center gap-1.5 border-0 bg-transparent p-0 font-semibold hover:text-primary"
-				:class="sortFieldByName ? 'text-contrast' : 'text-secondary'"
-				@click="$emit('sortByName')"
-			>
-				<span>{{ formatMessage(messages.name) }}</span>
-				<ChevronUpIcon
-					v-if="sortFieldByName && !sortDesc"
-					class="h-4 w-4"
-					aria-hidden="true"
-				/>
-				<ChevronDownIcon
-					v-if="sortFieldByName && sortDesc"
-					class="h-4 w-4"
-					aria-hidden="true"
-				/>
-			</button>
-		</div>
-		<div class="flex shrink-0 items-center gap-4 @[800px]:gap-12">
-			<span class="min-w-[51px] shrink-0 text-nowrap text-right font-semibold text-secondary">{{
-				formatMessage(commonMessages.actionsLabel)
-			}}</span>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
-
-import Checkbox from '#ui/components/base/Checkbox.vue'
-import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { commonMessages } from '#ui/utils/common-messages'
-
-import type { FileSortField } from '../types'
-
-const { formatMessage } = useVIntl()
-
-const messages = defineMessages({
-	name: {
-		id: 'files.table-header.name',
-		defaultMessage: 'Name',
-	}
-})
-
-defineProps<{
-	sortFieldByName: boolean
-	sortDesc: boolean
-	allSelected: boolean
-	someSelected: boolean
-	isStuck: boolean
-}>()
-
-defineEmits<{
-	sortByName: []
-	'toggle-all': []
-}>()
-</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
index b978f2c306a..6e8e13b3863 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
@@ -2,7 +2,7 @@
 	<div class="flex flex-col gap-0.5" :aria-label="formatMessage(messages.fileTree)">
 		<template v-for="(row, index) in rows" :key="row.key">
 			<div
-				v-if="row.kind === 'loading'"
+				v-if="row.type === 'loading'"
 				class="flex h-9 items-center gap-2 text-sm text-secondary"
 				:style="{ paddingLeft: `${2 + row.depth}rem` }"
 			>
@@ -10,21 +10,15 @@
 				{{ formatMessage(messages.loading) }}
 			</div>
 			<div
-				v-else-if="row.kind === 'empty'"
+				v-else-if="row.type === 'empty'"
 				class="flex h-9 items-center text-sm italic text-secondary"
 				:style="{ paddingLeft: `${2 + row.depth}rem` }"
 			>
 				{{ formatMessage(row.depth === 0 ? messages.emptyFolder : messages.emptySubfolder) }}
 			</div>
 			<FileRow
-				v-else-if="row.kind === 'item'"
-				:count="row.item.count"
-				:created="row.item.created"
-				:modified="row.item.modified"
-				:name="row.item.name"
-				:path="row.item.path"
-				:type="row.item.type"
-				:size="row.item.size"
+				v-else-if="row.type === 'item'"
+				:file="row.item"
 				:index="index"
 				:is-last="index + 1 == rows.length"
 				:selected="ui.selectedItems.value.has(row.item.path)"
@@ -77,7 +71,7 @@ import FileRow from './FileRow.vue'
 
 type TreeRow =
 	| {
-			kind: 'item'
+			type: 'item'
 			key: string
 			item: FileItem
 			path: string
@@ -85,7 +79,7 @@ type TreeRow =
 			expanded: boolean
 			expandable: boolean
 	  }
-	| { kind: 'loading' | 'empty'; key: string; depth: number }
+	| { type: 'loading' | 'empty'; key: string; depth: number }
 
 const ROOT_PATH = '/'
 
@@ -142,8 +136,8 @@ function collectRows(path: string, depth: number): TreeRow[] {
 	const items = entries.data.value
 
 	if (items.length === 0) {
-		if (entries.isLoading.value) return [{ kind: 'loading', key: `loading:${path}`, depth }]
-		return query.value ? [] : [{ kind: 'empty', key: `empty:${path}`, depth }]
+		if (entries.isLoading.value) return [{ type: 'loading', key: `loading:${path}`, depth }]
+		return query.value ? [] : [{ type: 'empty', key: `empty:${path}`, depth }]
 	}
 
 	const rows: TreeRow[] = []
@@ -154,12 +148,12 @@ function collectRows(path: string, depth: number): TreeRow[] {
 
 		if (query.value) {
 			const matches = item.name.toLowerCase().includes(query.value)
-			const hasMatchingChild = children.some((child) => child.kind === 'item')
+			const hasMatchingChild = children.some((child) => child.type === 'item')
 			if (!matches && !hasMatchingChild) continue
 		}
 
 		rows.push(
-			{ kind: 'item', key: item.path, item, path: item.path, depth, expanded, expandable },
+			{ type: 'item', key: item.path, item, path: item.path, depth, expanded, expandable },
 			...children,
 		)
 	}
@@ -185,7 +179,7 @@ function openDirectory(path: string, item: FileItem) {
 	ui.handleNavigateTo(item)
 }
 
-function prefetch(row: Extract<TreeRow, { kind: 'item' }>) {
+function prefetch(row: Extract<TreeRow, { type: 'item' }>) {
 	const { item } = row;
 	if (item.type === 'directory' || canOpenInFileEditor(item.name)) {
 		tree.prefetch(item)
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-columns.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-columns.ts
index a9be00d1ba9..a4c9c5ca48f 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-columns.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-columns.ts
@@ -4,7 +4,9 @@ import { computed } from 'vue'
 
 import type { FileSortField } from '../types'
 
-export type FileColumn = 'size' | 'items' | 'created' | 'modified'
+export const FILE_COLUMNS_ORDER = ['size', 'items', 'created', 'modified'] as const
+
+export type FileColumn = typeof FILE_COLUMNS_ORDER[number]
 
 export interface FileColumnDefinition {
 	id: FileColumn
@@ -21,7 +23,7 @@ export const FILE_COLUMNS: FileColumnDefinition[] = [
 ]
 
 /** The order columns are dropped in when there isn't room for them next to the name. */
-const COLUMN_DROP_ORDER: FileColumn[] = ['created', 'items', 'size', 'modified']
+const FILE_COLUMN_DROP_ORDER: FileColumn[] = ['created', 'items', 'size', 'modified']
 
 /** Space always kept for a file's name before any detail column is shown. */
 const NAME_MIN_WIDTH = 280
@@ -47,6 +49,7 @@ export function useFileColumns(containerWidth: Ref<number | undefined>) {
 		'size',
 		'items',
 		'modified',
+		'created'
 	])
 
 	const shownColumns = computed<FileColumn[]>(() => {
@@ -57,7 +60,7 @@ export function useFileColumns(containerWidth: Ref<number | undefined>) {
 			enabledColumns.value.includes(id),
 		)
 
-		for (const id of COLUMN_DROP_ORDER) {
+		for (const id of FILE_COLUMN_DROP_ORDER) {
 			if (columnsWidth(columns) <= available) break
 			columns = columns.filter((column) => column !== id)
 		}

From 261ae2ff8b7f793ed09121c0412dfde1c560abfe Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Sat, 3 Oct 2026 21:52:00 -0500
Subject: [PATCH 07/18] fix: missing entry within lock file

---
 apps/frontend/package.json                    |   7 +-
 apps/frontend/src/app.vue                     |  11 +-
 apps/frontend/src/locales/en-US/index.json    |   6 +
 .../src/pages/hosting/manage/[id].vue         |  10 +-
 .../src/pages/hosting/manage/[id]/files.vue   |   1 -
 packages/ui/package.json                      |   8 -
 packages/ui/src/components/base/NavTabs.vue   |   8 +-
 .../components/base/buttons/ContextMenu.vue   |  23 +-
 .../base/buttons/TeleportOverflowMenu.vue     |  21 +-
 .../buttons/button-menu/ButtonMenuItem.vue    |   6 +-
 .../buttons/button-menu/ButtonMenuSubmenu.vue |   2 +-
 .../ui/src/components/base/buttons/types.ts   |   4 +-
 .../ui/src/components/floating/Tooltip.vue    |  36 +-
 packages/ui/src/components/modal/NewModal.vue |  14 +-
 .../components/servers/backups/BackupItem.vue |  36 +-
 packages/ui/src/composables/modal-stack.ts    |  14 +-
 .../ui/src/composables/use-ready-state.ts     |   2 +-
 packages/ui/src/composables/use-rem-to-px.ts  |  17 +-
 packages/ui/src/composables/virtual-scroll.ts |  11 +-
 .../files-tab/components/FileActionBar.vue    |  85 ++--
 .../files-tab/components/FileBrowserPanel.vue | 186 ++++-----
 .../files-tab/components/FileNavbar.vue       |  83 ++--
 .../shared/files-tab/components/FileRow.vue   | 142 ++++---
 .../files-tab/components/FileSideBar.vue      |  12 +-
 .../files-tab/components/FileTableHeader.vue  |  12 +-
 .../shared/files-tab/components/FileTree.vue  |   4 +-
 .../components/editor/FileEditor.vue          |  23 +-
 .../components/tabs/FileTabPanel.vue          |  10 +-
 .../files-tab/components/tabs/FileTabs.vue    |  54 +--
 .../files-tab/composables/file-columns.ts     |   7 +-
 .../files-tab/composables/file-drag-state.ts  |   2 +-
 .../files-tab/composables/file-selection.ts   |   3 +-
 .../shared/files-tab/composables/file-tabs.ts |  12 +-
 .../files-tab/composables/file-undo-redo.ts   |   4 +-
 .../files-tab/composables/folder-actions.ts   |  32 +-
 .../src/layouts/shared/files-tab/layout.vue   | 129 ++++---
 .../files-tab/providers/file-browser-ui.ts    |   3 +-
 .../files-tab/providers/file-manager.ts       |  38 +-
 .../shared/files-tab/providers/index.ts       |   6 +-
 .../ui/src/layouts/shared/files-tab/types.ts  |   2 +-
 .../ui/src/layouts/shared/files-tab/utils.ts  |  27 +-
 .../layouts/wrapped/hosting/manage/files.vue  | 306 ++++++++-------
 .../layouts/wrapped/hosting/manage/root.vue   |  20 +-
 .../layouts/wrapped/hosting/manage/utils.ts   |  71 ++--
 packages/ui/src/locales/en-US/index.json      |  24 ++
 packages/ui/src/providers/app-root.ts         |  10 +-
 packages/ui/src/providers/tooltip.ts          |  34 +-
 pnpm-lock.yaml                                | 362 +++++++++++-------
 pnpm-workspace.yaml                           |   3 -
 49 files changed, 1108 insertions(+), 835 deletions(-)

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 6c1c71b24b9..638a52f8e8a 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -39,7 +39,6 @@
 	},
 	"dependencies": {
 		"@contentauth/c2pa-web": "^0.13.1",
-		"@floating-ui/vue": "^2.0.1",
 		"@formatjs/intl-localematcher": "^0.5.4",
 		"@ltd/j-toml": "^1.38.0",
 		"@modrinth/api-client": "workspace:*",
@@ -48,9 +47,6 @@
 		"@modrinth/moderation": "workspace:*",
 		"@modrinth/ui": "workspace:*",
 		"@modrinth/utils": "workspace:*",
-		"@run-slicer/cfr": "0.1.8-0.152",
-		"@run-slicer/procyon": "0.1.2-0.6.0",
-		"@run-slicer/vf": "0.6.4-1.12.0",
 		"@sentry/nuxt": "^10.33.0",
 		"@tanstack/vue-query": "5.101.4",
 		"@types/three": "^0.172.0",
@@ -64,7 +60,7 @@
 		"chart.js": "^4.5.1",
 		"dayjs": "^1.11.7",
 		"dompurify": "^3.1.7",
-		"file-type": "^22.1.0",
+		"@floating-ui/vue": "^2.0.1",
 		"fuse.js": "^6.6.2",
 		"highlight.js": "^11.7.0",
 		"intl-messageformat": "^10.7.7",
@@ -72,7 +68,6 @@
 		"jose": "^6.2.2",
 		"js-yaml": "^4.1.0",
 		"jszip": "^3.10.1",
-		"krakatau-web": "1.1.0-beta",
 		"lru-cache": "^11.2.4",
 		"markdown-it": "14.1.0",
 		"pathe": "^1.1.2",
diff --git a/apps/frontend/src/app.vue b/apps/frontend/src/app.vue
index 87d95ce9b44..52ed70ce003 100644
--- a/apps/frontend/src/app.vue
+++ b/apps/frontend/src/app.vue
@@ -9,7 +9,7 @@
 			<AccountSwitchOverlay :show="isSwitchingAccount" />
 			<AdsConsentNotification />
 			<I18nDebugPanel />
-			<NuxtPage/>
+			<NuxtPage />
 			<div id="teleports"></div>
 		</NuxtLayout>
 	</div>
@@ -22,9 +22,8 @@ import {
 	LoadingBar,
 	NotificationPanel,
 } from '@modrinth/ui'
-import {provideAppRoot} from "@modrinth/ui/src/providers/app-root";
-import type {MaybeElement} from "@vueuse/core";
-import {computed,ref, watch} from "vue";
+import { provideAppRoot } from '@modrinth/ui/src/providers/app-root'
+import { computed, ref, watch } from 'vue'
 
 import AdsConsentNotification from '~/components/ui/AdsConsentNotification.vue'
 import { setupProviders } from '~/providers/setup.ts'
@@ -37,10 +36,10 @@ import {
 } from './composables/accounts'
 import { useAuth } from './composables/auth'
 
-const root = ref<MaybeElement>(null);
+const root = ref<HTMLElement | null>(null)
 
 provideAppRoot({
-	root: computed(() => root.value)
+	root: computed(() => root.value),
 })
 
 const auth = await useAuth()
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 0a8f1d06daa..5d70cdc21fb 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -2834,6 +2834,9 @@
   "layout.footer.developer-mode-deactivated.title": {
     "message": "Developer mode deactivated"
   },
+  "layout.footer.hide": {
+    "message": "Hide footer"
+  },
   "layout.footer.legal": {
     "message": "Legal"
   },
@@ -2888,6 +2891,9 @@
   "layout.footer.resources.translate": {
     "message": "Translate"
   },
+  "layout.footer.show": {
+    "message": "Show footer"
+  },
   "layout.footer.social.bluesky": {
     "message": "Bluesky"
   },
diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index 157f09037c4..c61c4918848 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -11,7 +11,6 @@
 		:auth-user="authUser"
 		:navigate-to-billing="() => router.push('/settings/billing')"
 		:navigate-to-servers="() => router.push('/hosting/manage')"
-
 		:browse-modpacks="
 			({ serverId: sid, worldId: wid, from }) => {
 				navigateTo({
@@ -29,8 +28,13 @@
 			}
 		"
 	>
-		<template #default="{ onReinstall, onReinstallFailed, constrainWidth}">
-			<NuxtPage :route="route" :constrain-width="constrainWidth" @reinstall="onReinstall" @reinstall-failed="onReinstallFailed"/>
+		<template #default="{ onReinstall, onReinstallFailed, constrainWidth }">
+			<NuxtPage
+				:route="route"
+				:constrain-width="constrainWidth"
+				@reinstall="onReinstall"
+				@reinstall-failed="onReinstallFailed"
+			/>
 		</template>
 	</ServersManageRootLayout>
 </template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/files.vue b/apps/frontend/src/pages/hosting/manage/[id]/files.vue
index 1b08921709b..f3e684a2d54 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/files.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/files.vue
@@ -36,7 +36,6 @@ onBeforeUnmount(() => {
 defineProps<{
 	constrainWidth?: boolean
 }>()
-
 </script>
 
 <template>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index dca78062dcf..bdd3f5fab65 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -67,9 +67,6 @@
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/blog": "workspace:*",
 		"@modrinth/utils": "workspace:*",
-		"@run-slicer/cfr": "0.1.8-0.152",
-		"@run-slicer/procyon": "0.1.2-0.6.0",
-		"@run-slicer/vf": "0.6.4-1.12.0",
 		"@tanstack/vue-query": "5.101.4",
 		"@tresjs/cientos": "^4.3.0",
 		"@tresjs/core": "^4.3.4",
@@ -82,7 +79,6 @@
 		"@xterm/addon-fit": "^0.11.0",
 		"@xterm/addon-search": "^0.16.0",
 		"@xterm/xterm": "^6.0.0",
-		"@zip.js/zip.js": "^2.8.34",
 		"ace-builds": "^1.43.5",
 		"apexcharts": "^4.0.0",
 		"colord": "^2.9.3",
@@ -92,22 +88,18 @@
 		"dompurify": "^3.1.7",
 		"es-toolkit": "^1.44.0",
 		"fabric": "^7.4.0",
-		"file-type": "^22.1.0",
 		"flatpickr": "^4.6.13",
 		"fuse.js": "^6.6.2",
 		"highlight.js": "^11.9.0",
 		"intl-messageformat": "^10.7.7",
 		"js-yaml": "^4.1.1",
 		"jszip": "^3.10.1",
-		"krakatau-web": "1.1.0-beta",
 		"lru-cache": "^11.2.4",
 		"markdown-it": "^13.0.2",
-		"mime": "^4.1.0",
 		"motion-v": "^2.2.1",
 		"overlayscrollbars": "^2.15.1",
 		"postprocessing": "^6.37.6",
 		"qrcode.vue": "^3.4.1",
-		"smol-toml": "^1.8.0",
 		"three": "^0.172.0",
 		"vue-i18n": "^10.0.0",
 		"vue-select": "4.0.0-beta.6",
diff --git a/packages/ui/src/components/base/NavTabs.vue b/packages/ui/src/components/base/NavTabs.vue
index ff37cac63e5..6b5cb9cc016 100644
--- a/packages/ui/src/components/base/NavTabs.vue
+++ b/packages/ui/src/components/base/NavTabs.vue
@@ -1,7 +1,11 @@
 <template>
 	<div
 		v-if="filteredLinks.length > 1"
-		:class="pageNav ? [noMargin ? '' : '-mx-6 -mt-2 mb-1', noPadding ? '' : 'px-6 py-2', 'overflow-x-auto'] : 'contents'"
+		:class="
+			pageNav
+				? [noMargin ? '' : '-mx-6 -mt-2 mb-1', noPadding ? '' : 'px-6 py-2', 'overflow-x-auto']
+				: 'contents'
+		"
 		v-bind="pageNav ? $attrs : {}"
 	>
 		<nav
@@ -109,7 +113,7 @@ const props = withDefaults(
 		activeIndex: undefined,
 		pageNav: false,
 		noPadding: false,
-		noMargin: false
+		noMargin: false,
 	},
 )
 
diff --git a/packages/ui/src/components/base/buttons/ContextMenu.vue b/packages/ui/src/components/base/buttons/ContextMenu.vue
index fbb73898cf7..60d42918474 100644
--- a/packages/ui/src/components/base/buttons/ContextMenu.vue
+++ b/packages/ui/src/components/base/buttons/ContextMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {computed, type DefineSetupFnComponent, nextTick, onMounted, ref, useId, watch} from 'vue'
+import { computed, nextTick, onMounted, ref, useId, watch } from 'vue'
 
 import type { AnchoredTeleportAnchor } from '../../../utils/use-anchored-teleport'
 import { pointAnchor, useAnchoredTeleport } from '../../../utils/use-anchored-teleport'
@@ -118,13 +118,23 @@ defineExpose({ open: openMenu, close: closeMenu })
 				<ButtonMenuSubmenu v-else-if="isSubmenu(option)" :option="option" @select="handleSelect">
 					<template #trigger>
 						<slot :name="option.id" :option="option">
-							<component :is="option.icon" v-if="option.icon" :class="option.iconClass?.value ?? ''" aria-hidden="true" />
+							<component
+								:is="option.icon"
+								v-if="option.icon"
+								:class="option.iconClass?.value ?? ''"
+								aria-hidden="true"
+							/>
 							{{ option.label }}
 						</slot>
 					</template>
 					<template #item="{ option: child }">
 						<slot :name="child.id" :option="child">
-							<component :is="child.icon" v-if="child.icon" :class="child.iconClass?.value ?? ''" aria-hidden="true" />
+							<component
+								:is="child.icon"
+								v-if="child.icon"
+								:class="child.iconClass?.value ?? ''"
+								aria-hidden="true"
+							/>
 							{{ child.label }}
 						</slot>
 					</template>
@@ -137,7 +147,12 @@ defineExpose({ open: openMenu, close: closeMenu })
 					@focus="focusedIndex = getItems().indexOf($event)"
 				>
 					<slot :name="option.id" :option="option">
-						<component :is="option.icon" v-if="option.icon" :class="option.iconClass ?? ''" aria-hidden="true" />
+						<component
+							:is="option.icon"
+							v-if="option.icon"
+							:class="option.iconClass ?? ''"
+							aria-hidden="true"
+						/>
 						{{ option.label }}
 					</slot>
 				</ButtonMenuItem>
diff --git a/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue b/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue
index 7d494e9b51c..1f27ac7c08d 100644
--- a/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue
+++ b/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue
@@ -203,13 +203,23 @@ defineExpose({ open: openMenu, close: closeMenu })
 					>
 						<template #trigger>
 							<slot :name="option.id" :option="option">
-								<component :is="option.icon" v-if="option.icon" :class="option.iconClass?.value ?? ''" aria-hidden="true" />
+								<component
+									:is="option.icon"
+									v-if="option.icon"
+									:class="option.iconClass?.value ?? ''"
+									aria-hidden="true"
+								/>
 								{{ option.label }}
 							</slot>
 						</template>
 						<template #item="{ option: child }">
 							<slot :name="child.id" :option="child">
-								<component :is="child.icon" v-if="child.icon" :class="child.iconClass?.value ?? ''" aria-hidden="true" />
+								<component
+									:is="child.icon"
+									v-if="child.icon"
+									:class="child.iconClass?.value ?? ''"
+									aria-hidden="true"
+								/>
 								{{ child.label }}
 							</slot>
 						</template>
@@ -222,7 +232,12 @@ defineExpose({ open: openMenu, close: closeMenu })
 						@focus="focusedIndex = getItems().indexOf($event)"
 					>
 						<slot :name="option.id" :option="option">
-							<component :is="option.icon" v-if="option.icon" :class="option.iconClass?.value ?? ''" aria-hidden="true" />
+							<component
+								:is="option.icon"
+								v-if="option.icon"
+								:class="option.iconClass?.value ?? ''"
+								aria-hidden="true"
+							/>
 							{{ option.label }}
 						</slot>
 					</ButtonMenuItem>
diff --git a/packages/ui/src/components/base/buttons/button-menu/ButtonMenuItem.vue b/packages/ui/src/components/base/buttons/button-menu/ButtonMenuItem.vue
index e00811eafd1..4555678c53e 100644
--- a/packages/ui/src/components/base/buttons/button-menu/ButtonMenuItem.vue
+++ b/packages/ui/src/components/base/buttons/button-menu/ButtonMenuItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
-import { computed, ref, toValue} from 'vue'
+import { computed, ref, toValue } from 'vue'
 import { RouterLink } from 'vue-router'
 
 import type { ButtonMenuAction, ButtonMenuLink } from '../types'
@@ -92,7 +92,9 @@ function handleFocus(event: FocusEvent) {
 <template>
 	<div ref="wrapperElement" class="group/button-menu-item flex items-center">
 		<RouterLink
-			v-if="isLink(props.option) && props.option.to !== undefined && !toValue(props.option.disabled)"
+			v-if="
+				isLink(props.option) && props.option.to !== undefined && !toValue(props.option.disabled)
+			"
 			v-tooltip="props.option.tooltip"
 			v-bind="itemAttrs"
 			:to="props.option.to"
diff --git a/packages/ui/src/components/base/buttons/button-menu/ButtonMenuSubmenu.vue b/packages/ui/src/components/base/buttons/button-menu/ButtonMenuSubmenu.vue
index 77e6a6efca8..37eedfdf9fc 100644
--- a/packages/ui/src/components/base/buttons/button-menu/ButtonMenuSubmenu.vue
+++ b/packages/ui/src/components/base/buttons/button-menu/ButtonMenuSubmenu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ChevronRightIcon } from '@modrinth/assets'
-import { computed, ref, toRef, toValue,useId } from 'vue'
+import { computed, ref, toRef, toValue, useId } from 'vue'
 
 import { useAnchoredTeleport } from '../../../../utils/use-anchored-teleport'
 import type {
diff --git a/packages/ui/src/components/base/buttons/types.ts b/packages/ui/src/components/base/buttons/types.ts
index 8960583e4f9..e72fc8bae3e 100644
--- a/packages/ui/src/components/base/buttons/types.ts
+++ b/packages/ui/src/components/base/buttons/types.ts
@@ -1,4 +1,4 @@
-import type {Component, ComputedRef, MaybeRefOrGetter} from 'vue'
+import type { Component, ComputedRef, MaybeRefOrGetter } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
 import type { AnchoredTeleportPlacement } from '../../../utils/use-anchored-teleport'
@@ -73,7 +73,7 @@ export interface ButtonMenuItemBase {
 	id: string
 	label: string
 	icon?: Component
-	iconClass?: ComputedRef<string>,
+	iconClass?: ComputedRef<string>
 	shown?: boolean
 	disabled?: MaybeRefOrGetter<boolean>
 	tooltip?: string
diff --git a/packages/ui/src/components/floating/Tooltip.vue b/packages/ui/src/components/floating/Tooltip.vue
index 5829270e09f..10a74e786df 100644
--- a/packages/ui/src/components/floating/Tooltip.vue
+++ b/packages/ui/src/components/floating/Tooltip.vue
@@ -12,7 +12,8 @@ import {
 } from 'vue'
 
 import {
-	bindTooltipSource, preventTooltipClosure,
+	bindTooltipSource,
+	preventTooltipClosure,
 	type TooltipContent,
 	tooltipEnter,
 	tooltipFocusIn,
@@ -40,7 +41,7 @@ const SIDES = {
 	left: { origin: 'right center', arrow: 'right', rotate: 315 },
 } as const
 
-type HoverWaitTimes = {hover?: number, unhover?: number};
+type HoverWaitTimes = { hover?: number; unhover?: number }
 
 const props = withDefaults(
 	defineProps<{
@@ -60,7 +61,7 @@ const props = withDefaults(
 	{ disabled: false, theme: 'tooltip', placement: 'top' },
 )
 
-const slots = defineSlots<{popper?: () => VNode}>();
+const slots = defineSlots<{ popper?: () => VNode }>()
 const trigger = useTemplateRef<HTMLElement>('trigger')
 const floating = useTemplateRef<HTMLElement>('floating')
 const arrowEl = useTemplateRef<HTMLElement>('arrowEl')
@@ -98,11 +99,11 @@ watch(isDisabled, (value) => {
 	if (trigger.value) {
 		if (value) {
 			if (trigger.value.matches(':hover')) {
-				onLeave();
+				onLeave()
 			}
 		} else {
 			if (trigger.value.matches(':hover')) {
-				onEnter();
+				onEnter()
 			}
 		}
 	}
@@ -223,21 +224,27 @@ function onEnter() {
 	if (props.disabled || !trigger.value) {
 		return
 	}
-	const waitTime = props.actionWait;
-	tooltipEnter(trigger.value, waitTime ? (typeof waitTime === 'number' ? waitTime : waitTime.unhover) : undefined)
+	const waitTime = props.actionWait
+	tooltipEnter(
+		trigger.value,
+		waitTime ? (typeof waitTime === 'number' ? waitTime : waitTime.unhover) : undefined,
+	)
 }
 
 function onTooltipEnter() {
 	if (props.reference) {
-		preventTooltipClosure(props.reference);
+		preventTooltipClosure(props.reference)
 	}
 }
 
 function onLeave() {
-	const triggerEl = trigger.value ?? props.reference;
-	const waitTime = props.actionWait;
+	const triggerEl = trigger.value ?? props.reference
+	const waitTime = props.actionWait
 	if (triggerEl) {
-		tooltipLeave(triggerEl, waitTime ? (typeof waitTime === 'number' ? waitTime : waitTime.unhover) : undefined);
+		tooltipLeave(
+			triggerEl,
+			waitTime ? (typeof waitTime === 'number' ? waitTime : waitTime.unhover) : undefined,
+		)
 	}
 }
 
@@ -279,7 +286,12 @@ function onFocusOut(event: FocusEvent) {
 				:key="jumpKey"
 				ref="floating"
 				class="`v-popper__inner z-[100010] rounded-lg border border-solid border-surface-5 bg-surface-3 px-3 py-1.5 text-sm font-medium text-contrast card-shadow`"
-				:class="[`v-popper--theme-${theme}`, moving && 'tooltip-moving', panelClass, unhoverWait ? 'pointer-events-none' : '']"
+				:class="[
+					`v-popper--theme-${theme}`,
+					moving && 'tooltip-moving',
+					panelClass,
+					unhoverWait ? 'pointer-events-none' : '',
+				]"
 				:style="[floatingStyles, { transformOrigin }]"
 				@mouseenter="onTooltipEnter"
 				@mouseleave="onLeave"
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index a54e92c8c89..39608690364 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -29,7 +29,11 @@
 			/>
 			<div
 				class="modal-container"
-				:class="[{ shown: visible }, pulloutContainerClass, fillWidthWhenSmall ? 'fill-width-when-small' : '']"
+				:class="[
+					{ shown: visible },
+					pulloutContainerClass,
+					fillWidthWhenSmall ? 'fill-width-when-small' : '',
+				]"
 				:style="{ zIndex: stackContainerZ }"
 			>
 				<div
@@ -208,7 +212,7 @@ const props = withDefaults(
 		disableClose?: boolean
 		actionsDivider?: boolean
 		pulloutDirection?: 'left' | 'right' | 'top' | 'bottom'
-		fillWidthWhenSmall?: boolean,
+		fillWidthWhenSmall?: boolean
 	}>(),
 	{
 		type: true,
@@ -521,7 +525,11 @@ const stackOverlayZ = computed(() => stackZBase.value + MODAL_OVERLAY_Z_OFFSET)
 const stackTauriZ = computed(() => stackZBase.value + MODAL_TAURI_Z_OFFSET)
 const stackContainerZ = computed(() => stackZBase.value + MODAL_CONTAINER_Z_OFFSET)
 const resolvedMaxWidth = computed(() => props.maxWidth ?? '60rem')
-const modelBodyMaxWidth = computed(() => props.maxWidthMinCheck ? `min(${resolvedMaxWidth.value}, calc(100% - 2 * var(--gap-lg)))` : resolvedMaxWidth.value)
+const modelBodyMaxWidth = computed(() =>
+	props.maxWidthMinCheck
+		? `min(${resolvedMaxWidth.value}, calc(100% - 2 * var(--gap-lg)))`
+		: resolvedMaxWidth.value,
+)
 const resolvedWidth = computed(() => props.width ?? 'fit-content')
 
 // The mouse-tilt parallax only makes sense for a centered, floating modal - a pulled-out
diff --git a/packages/ui/src/components/servers/backups/BackupItem.vue b/packages/ui/src/components/servers/backups/BackupItem.vue
index 0de9eb5dcc9..f50a95b5e08 100644
--- a/packages/ui/src/components/servers/backups/BackupItem.vue
+++ b/packages/ui/src/components/servers/backups/BackupItem.vue
@@ -193,7 +193,7 @@ const creatorAvatarSrc = computed(() =>
 		:class="itemBorderClass"
 	>
 		<div class="flex items-center gap-4" :class="[showDebugInfo ? 'flex-col' : '']">
-			<div class="flex min-w-0 flex-1 items-center gap-4" >
+			<div class="flex min-w-0 flex-1 items-center gap-4">
 				<!-- Icon tile -->
 				<div
 					class="flex shrink-0 items-center justify-center rounded-2xl border border-solid border-surface-5 bg-surface-4"
@@ -209,19 +209,19 @@ const creatorAvatarSrc = computed(() =>
 				<!-- Name + badge + subtitle -->
 				<div class="flex min-w-0 flex-col gap-1.5">
 					<div class="flex min-w-0 items-center gap-2">
-					<span
-						ref="nameRef"
-						v-tooltip="truncatedTooltip(nameRef, backup.name)"
-						class="min-w-0 truncate font-semibold text-contrast"
-					>
-						{{ backup.name }}
-					</span>
+						<span
+							ref="nameRef"
+							v-tooltip="truncatedTooltip(nameRef, backup.name)"
+							class="min-w-0 truncate font-semibold text-contrast"
+						>
+							{{ backup.name }}
+						</span>
 						<span
 							v-if="backup.automated"
 							class="shrink-0 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1 text-sm font-medium text-secondary"
 						>
-						{{ formatMessage(messages.auto) }}
-					</span>
+							{{ formatMessage(messages.auto) }}
+						</span>
 					</div>
 					<div class="flex items-center gap-2 text-sm font-medium text-secondary">
 						<template v-if="preview">
@@ -247,16 +247,16 @@ const creatorAvatarSrc = computed(() =>
 									class="min-w-0 truncate font-medium"
 									:class="backupCreator.id === 'support' ? 'text-blue' : ''"
 								>
-								{{ creatorName }}
-							</span>
+									{{ creatorName }}
+								</span>
 							</AutoLink>
 						</template>
 						<template v-else>
-						<span>
-							{{
-								formatMessage(backup.automated ? messages.backupSchedule : messages.manualBackup)
-							}}
-						</span>
+							<span>
+								{{
+									formatMessage(backup.automated ? messages.backupSchedule : messages.manualBackup)
+								}}
+							</span>
 						</template>
 					</div>
 				</div>
@@ -264,7 +264,7 @@ const creatorAvatarSrc = computed(() =>
 
 			<!-- Date (middle column) -->
 			<div v-if="!preview" class="flex shrink-0 items-center">
-			<span class="whitespace-nowrap font-medium text-contrast">{{
+				<span class="whitespace-nowrap font-medium text-contrast">{{
 					formatDateTime(backup.created_at)
 				}}</span>
 			</div>
diff --git a/packages/ui/src/composables/modal-stack.ts b/packages/ui/src/composables/modal-stack.ts
index 829c273b18f..d2804ffade8 100644
--- a/packages/ui/src/composables/modal-stack.ts
+++ b/packages/ui/src/composables/modal-stack.ts
@@ -1,7 +1,7 @@
-import {useScrollLock} from "@vueuse/core";
+import { useScrollLock } from '@vueuse/core'
 import { computed, type Ref, ref } from 'vue'
 
-import {injectAppRoot} from "#ui/providers/app-root.ts";
+import { injectAppRoot } from '#ui/providers/app-root.ts'
 
 import { dismissFloatingMenus } from '../providers/floating-menu'
 import { dismissTooltip } from '../providers/tooltip'
@@ -36,13 +36,13 @@ export function getModalStackZBase(stackDepth: number) {
 }
 
 export function useModalStack() {
-	const id = Symbol();
+	const id = Symbol()
 
-	let isLocked: ReturnType<typeof useScrollLock> | undefined = undefined;
+	let isLocked: ReturnType<typeof useScrollLock> | undefined = undefined
 
 	if (isClient) {
 		const ctx = injectAppRoot(null)!
-		if (ctx) isLocked = useScrollLock(ctx.root as any);
+		if (ctx) isLocked = useScrollLock(ctx.root)
 	}
 
 	function push() {
@@ -51,7 +51,7 @@ export function useModalStack() {
 			dismissFloatingMenus()
 			stack.push(id)
 			stackSizeRef.value = stack.length
-			if (isLocked) isLocked.value = true;
+			if (isLocked) isLocked.value = true
 		}
 	}
 
@@ -62,7 +62,7 @@ export function useModalStack() {
 			stack.splice(idx, 1)
 			stackSizeRef.value = stack.length
 		}
-		if (stackSizeRef.value <= 0 && isLocked) isLocked.value = false;
+		if (stackSizeRef.value <= 0 && isLocked) isLocked.value = false
 	}
 
 	function isTopmost() {
diff --git a/packages/ui/src/composables/use-ready-state.ts b/packages/ui/src/composables/use-ready-state.ts
index 38c018ce938..1a86dae3dae 100644
--- a/packages/ui/src/composables/use-ready-state.ts
+++ b/packages/ui/src/composables/use-ready-state.ts
@@ -1,5 +1,5 @@
 import type { DefaultError, UseQueryReturnType } from '@tanstack/vue-query'
-import type {ComputedRef, Ref} from 'vue'
+import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
 
 /** Subset of {@link UseQueryReturnType} passed to {@link useReadyState}. */
diff --git a/packages/ui/src/composables/use-rem-to-px.ts b/packages/ui/src/composables/use-rem-to-px.ts
index 05d92aae803..ee89bcdf449 100644
--- a/packages/ui/src/composables/use-rem-to-px.ts
+++ b/packages/ui/src/composables/use-rem-to-px.ts
@@ -1,11 +1,17 @@
 import {
-computed, type ComputedRef, type MaybeRefOrGetter,
-onMounted, onUnmounted, type Ref, 	ref, 	toValue
+	computed,
+	type ComputedRef,
+	type MaybeRefOrGetter,
+	onMounted,
+	onUnmounted,
+	type Ref,
+	ref,
+	toValue,
 } from 'vue'
 
 export interface RemCompute {
-	remToPx: (rem: MaybeRefOrGetter<number>) => ComputedRef<number>;
-	rootFontSize: Ref<number>;
+	remToPx: (rem: MaybeRefOrGetter<number>) => ComputedRef<number>
+	rootFontSize: Ref<number>
 }
 
 export function useRemToPx(): RemCompute {
@@ -26,7 +32,8 @@ export function useRemToPx(): RemCompute {
 		window.removeEventListener('resize', updateRootFontSize)
 	})
 
-	const remToPx = (rem: MaybeRefOrGetter<number>) => computed(() => toValue(rem) * rootFontSize.value)
+	const remToPx = (rem: MaybeRefOrGetter<number>) =>
+		computed(() => toValue(rem) * rootFontSize.value)
 
 	return { remToPx, rootFontSize }
 }
diff --git a/packages/ui/src/composables/virtual-scroll.ts b/packages/ui/src/composables/virtual-scroll.ts
index 2453706bbe3..f2026c010c8 100644
--- a/packages/ui/src/composables/virtual-scroll.ts
+++ b/packages/ui/src/composables/virtual-scroll.ts
@@ -1,7 +1,7 @@
-import type {ComputedRef, Ref} from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 import { computed, ref, watch, watchEffect } from 'vue'
 
-import {useRemToPx} from "#ui/composables/use-rem-to-px.ts";
+import { useRemToPx } from '#ui/composables/use-rem-to-px.ts'
 
 export interface ScrollViewportOptions {
 	onScroll?: () => void
@@ -160,9 +160,9 @@ export function useVirtualScroll<T>(items: ComputedRef<T[]>, options: VirtualScr
 		onScroll: checkNearEnd,
 	})
 
-	const { remToPx } = useRemToPx();
+	const { remToPx } = useRemToPx()
 
-	const height = itemUnit == 'rem' ? remToPx(itemHeight) : computed(() => itemHeight);
+	const height = itemUnit == 'rem' ? remToPx(itemHeight) : computed(() => itemHeight)
 
 	const totalHeight = computed(() => items.value.length * height.value)
 
@@ -203,7 +203,8 @@ export function useVirtualScroll<T>(items: ComputedRef<T[]>, options: VirtualScr
 		if (index < 0 || index >= items.value.length) return
 		syncScrollState()
 		if (!listContainer.value || !scrollContainer.value) return
-		const top = containerOffset.value + index * height.value - (viewportHeight.value - height.value) / 2
+		const top =
+			containerOffset.value + index * height.value - (viewportHeight.value - height.value) / 2
 		scrollContainer.value.scrollTo({ top: Math.max(0, top), behavior: 'instant' })
 		syncScrollState()
 	}
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
index 4334aac796b..b284d3918a9 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
@@ -10,7 +10,10 @@
 				class="m-0 flex min-w-0 flex-shrink items-center p-0 text-contrast"
 			>
 				<div class="m-0 flex min-w-0 flex-shrink list-none items-center p-0">
-					<div v-if="hasNav ? (smallMode ? true : !sidebarOpen) : true" class="mr-2 flex flex-shrink-0 gap-3">
+					<div
+						v-if="hasNav ? (smallMode ? true : !sidebarOpen) : true"
+						class="mr-2 flex flex-shrink-0 gap-3"
+					>
 						<IconButton
 							v-tooltip="formatMessage(sidebarOpen ? messages.collapse : messages.expand)"
 							:label="formatMessage(sidebarOpen ? messages.collapse : messages.expand)"
@@ -19,17 +22,17 @@
 							@click="() => $emit('toggleSidebar')"
 						>
 							<PanelRightCloseIcon v-if="sidebarOpen && !smallMode" transform="rotate(180)" />
-							<PanelRightOpenIcon v-else transform="rotate(180)"/>
+							<PanelRightOpenIcon v-else transform="rotate(180)" />
 							<span class="sr-only">{{ formatMessage(messages.expand) }}</span>
 						</IconButton>
 					</div>
 					<div class="ml-2">
-						<slot/>
+						<slot />
 					</div>
 				</div>
 			</div>
 
-			<div v-if="!isEditing" class="flex flex-shrink-0 items-center gap-2">
+			<div v-if="!hasNav || !isEditing" class="flex flex-shrink-0 items-center gap-2">
 				<Input
 					v-if="hasNav ? !sidebarOpen : false"
 					id="search-folder"
@@ -39,9 +42,7 @@
 					name="search"
 					autocomplete="off"
 					:placeholder="formatMessage(messages.searchFiles)"
-					:class="[
-						hasNav ? 'hidden @[800px]:inline-flex' : 'hidden @[400px]:inline-flex'
-					]"
+					:class="[hasNav ? 'hidden @[800px]:inline-flex' : 'hidden @[400px]:inline-flex']"
 					size="medium"
 					wrapper-class="w-full sm:w-[280px]"
 					@update:model-value="$emit('update:searchQuery', $event)"
@@ -61,7 +62,7 @@
 				</TeleportOverflowMenu>
 			</div>
 
-			<div v-else-if="!isEditingImage" class="flex gap-2">
+			<div v-else-if="hasNav && !isEditingImage" class="flex gap-2">
 				<IconButton
 					v-if="isLogFile"
 					v-tooltip="formatMessage(messages.shareToMclogs)"
@@ -85,12 +86,7 @@
 				</IconButton>
 			</div>
 		</div>
-		<div
-v-if="!isEditing && !hasNav" class="flex items-center gap-2"
-			 :class="[
-
-			]"
-		>
+		<div v-if="!hasNav && !isEditing" class="flex items-center gap-2">
 			<Input
 				:model-value="searchQuery"
 				:icon="SearchIcon"
@@ -108,26 +104,20 @@ v-if="!isEditing && !hasNav" class="flex items-center gap-2"
 
 <script setup lang="ts">
 import {
-	BoxIcon,
-	CurseForgeIcon,
 	DropdownIcon,
-	FileArchiveIcon,
-	FolderOpenIcon,
-	LinkIcon,
 	PanelRightCloseIcon,
 	PanelRightOpenIcon,
 	PlusIcon,
-	RefreshCwIcon,
 	SearchIcon,
 	ShareIcon,
-	UploadIcon,
 } from '@modrinth/assets'
-import {computed} from 'vue'
+import { computed } from 'vue'
 
 import { IconButton, TeleportOverflowMenu } from '#ui/components/base/buttons'
 import { defineMessages, useVIntl } from '#ui/composables/i18n.ts'
-import {useFileActions} from "#ui/layouts/shared/files-tab/composables/folder-actions.ts";
-import { commonMessages } from '#ui/utils/common-messages.ts'
+import { useFileActions } from '#ui/layouts/shared/files-tab/composables/folder-actions.ts'
+import type { FileInfo } from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
+import { getFileExtension, isImageFile } from '#ui/utils'
 
 import Input from '../../../../components/base/inputs/Input.vue'
 
@@ -200,29 +190,30 @@ const messages = defineMessages({
 	},
 })
 
+const isEditing = computed(() => props.activeLocation.type == 'file')
+const isEditingImage = computed(
+	() => isEditing.value && isImageFile(getFileExtension(props.activeLocation.path)),
+)
+const editingFilePath = computed(() => (isEditing.value ? props.activeLocation.path : null))
+
 export type Properties = {
-	isEditing: boolean
+	activeLocation: FileInfo
 	sidebarOpen: boolean
-	editingFilePath?: string
-	isEditingImage?: boolean
 	isEditorFindOpen?: boolean
 	searchQuery: string
 	showRefreshButton?: boolean
 	showInstallFromUrl?: boolean
 	disabled?: boolean
-	disabledTooltip?: string
-	hasNav?: boolean,
-	smallMode?: boolean,
+	disabledTooltip: string
+	hasNav?: boolean
+	smallMode?: boolean
 	isRefreshing?: boolean
-};
+}
 
-const props = withDefaults(
-	defineProps<Properties>(),
-	{
-		hasNav: false,
-		smallMode: false,
-	}
-)
+const props = withDefaults(defineProps<Properties>(), {
+	hasNav: false,
+	smallMode: false,
+})
 
 const smallMode = computed(() => props.smallMode)
 
@@ -233,10 +224,10 @@ export type EmitCallbacks = {
 	upload: []
 	uploadZip: []
 	unzipFromUrl: [cf: boolean]
-	refresh: [],
+	refresh: []
 	share: []
 	find: []
-};
+}
 
 const emit = defineEmits<EmitCallbacks>()
 
@@ -247,17 +238,19 @@ function handleRefresh() {
 }
 
 const isLogFile = computed(() => {
+	const path = editingFilePath.value
 	return (
-		props.editingFilePath?.startsWith('logs') ||
-		props.editingFilePath?.startsWith('crash-reports') ||
-		props.editingFilePath?.endsWith('.log')
+		path != null &&
+		(path.startsWith('logs') || path.startsWith('crash-reports') || path.endsWith('.log'))
 	)
 })
 
 const { options } = useFileActions(
 	(type) => emit('create', type),
-	(type) => type == 'file' ? emit('upload') : emit('uploadZip'),
+	(type) => (type == 'file' ? emit('upload') : emit('uploadZip')),
 	props.showInstallFromUrl ? (type) => emit('unzipFromUrl', type == 'cf') : undefined,
-	props.showRefreshButton ? { handleRefresh, isRefreshing: computed(() => refreshing.value ?? false) } : undefined,
-);
+	props.showRefreshButton
+		? { handleRefresh, isRefreshing: computed(() => refreshing.value ?? false) }
+		: undefined,
+)
 </script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
index ea803594fcc..ac375555e6e 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
@@ -1,4 +1,3 @@
-
 <template>
 	<div
 		ref="panelRoot"
@@ -14,38 +13,34 @@
 			ref="navbarWrapper"
 			class="sticky top-[var(--files-sticky-top,0px)] z-30 bg-surface-1 py-1"
 		>
-		<FileNavbar
-			:sidebar-open="sidebarOpen"
-			:active-location="ui.activeLocation.value"
-			:is-editing="ui.isEditing.value"
-			:editing-file-name="ctx.currentFile.value?.name"
-			:editing-file-path="ctx.currentFile.value?.path"
-			:is-editing-image="ui.fileEditorApi.value?.isEditingImage.value ?? false"
-			:is-editor-find-open="ui.fileEditorApi.value?.isFindOpen.value ?? false"
-			:search-query="ui.searchQuery.value"
-			:show-refresh-button="ui.showRefreshButton.value"
-			:show-install-from-url="ctx.showInstallFromUrl"
-			:base-id="ui.baseId"
-			:disabled="ui.isBusy.value"
-			:disabled-tooltip="ui.busyTooltip.value"
-			:small-mode="props.smallMode"
-			:can-go-back="ui.fileTabs.canGoBack.value"
-			:can-go-forward="ui.fileTabs.canGoForward.value"
-			@back="ui.fileTabs.back"
-			@forward="ui.fileTabs.forward"
-			@navigate="ui.navigateToSegment"
-			@navigate-home="() => ui.navigateToSegment(0)"
-			@prefetch-home="ui.handleHomePrefetch"
-			@update:search-query="(value) => (ui.searchQuery.value = value)"
-			@create="ui.showCreateModal"
-			@upload="ui.initiateFileUpload"
-			@upload-zip="() => {}"
-			@unzip-from-url="ui.showUnzipFromUrlModal"
-			@refresh="ctx.refresh"
-			@share="() => ui.shareToMclogs()"
-			@find="() => ui.toggleFind()"
-			@toggle-sidebar="() => ui.setSidebarOpen(!sidebarOpen)"
-		/>
+			<FileNavbar
+				:sidebar-open="sidebarOpen"
+				:active-location="ui.activeLocation.value"
+				:is-editor-find-open="ui.fileEditorApi.value?.isFindOpen.value ?? false"
+				:search-query="ui.searchQuery.value"
+				:show-refresh-button="ui.showRefreshButton.value"
+				:show-install-from-url="ctx.showInstallFromUrl"
+				:base-id="ui.baseId"
+				:disabled="ui.isBusy.value"
+				:disabled-tooltip="ui.busyTooltip.value"
+				:small-mode="props.smallMode"
+				:can-go-back="ui.fileTabs.canGoBack.value"
+				:can-go-forward="ui.fileTabs.canGoForward.value"
+				@back="ui.fileTabs.back"
+				@forward="ui.fileTabs.forward"
+				@navigate="ui.navigateToSegment"
+				@navigate-home="() => ui.navigateToSegment(0)"
+				@prefetch-home="ui.handleHomePrefetch"
+				@update:search-query="(value) => (ui.searchQuery.value = value)"
+				@create="ui.showCreateModal"
+				@upload="ui.initiateFileUpload"
+				@upload-zip="() => {}"
+				@unzip-from-url="ui.showUnzipFromUrlModal"
+				@refresh="ctx.refresh"
+				@share="() => ui.shareToMclogs()"
+				@find="() => ui.toggleFind()"
+				@toggle-sidebar="() => ui.setSidebarOpen(!sidebarOpen)"
+			/>
 		</div>
 		<div
 			class="@container relative flex flex-col overflow-clip rounded-[20px] border border-solid border-surface-4 shadow-sm"
@@ -91,57 +86,59 @@
 						@toggle-details="detailsEnabled = !detailsEnabled"
 					/>
 					<ReadyTransition :pending="listingPending">
-					<div
-						v-if="filteredItems.length > 0"
-						ref="virtualListContainer"
-						class="relative w-full"
-						:style="{ minHeight: `${totalHeight}px`, overflowAnchor: 'none' }"
-					>
-						<div class="absolute w-full" :style="{ top: `${visibleTop}px` }">
-							<FileRow
-								v-for="(item, idx) in visibleItems"
-								:key="item.path"
-								:class="`h-[${itemHeight}]`"
-								:file="item"
-								:index="visibleRange.start + idx"
-								:is-last="visibleRange.start + idx === filteredItems.length - 1"
-								:selected="ui.selectedItems.value.has(item.path)"
-								:write-disabled="ui.isBusy.value || !!ctx.isReadOnly?.(item)"
-								:write-disabled-tooltip="ctx.isReadOnly?.(item) ? ctx.readOnlyReason?.value : ui.busyTooltip.value"
-								:columns="shownColumns"
-								:has-hidden-details="hasHiddenDetails"
-								@extract="() => ui.handleExtractItem(item)"
-								@delete="() => ui.showDeleteModal(item)"
-								@rename="() => ui.showRenameModal(item)"
-								@download="() => ui.handleDownload(item)"
-								@zip="() => ui.handleZip(item)"
-								@move="() => ui.showMoveModal(item)"
-								@move-direct-to="ui.handleDirectMove"
-								@edit="() => ui.handleNavigateTo(item)"
-								@navigate="() => ui.handleNavigateTo(item)"
-								@open-in-new-tab="() => ui.handleOpenInNewTab(item)"
-								@hover="() => ui.handleItemPrefetch(item)"
-								@contextmenu="ui.handleContextMenu"
-								@toggle-select="() => ui.toggleItemSelection(item)"
-								@create="ui.showCreateModal"
-								@upload="ui.initiateFileUpload"
-							/>
+						<div
+							v-if="filteredItems.length > 0"
+							ref="virtualListContainer"
+							class="relative w-full"
+							:style="{ minHeight: `${totalHeight}px`, overflowAnchor: 'none' }"
+						>
+							<div class="absolute w-full" :style="{ top: `${visibleTop}px` }">
+								<FileRow
+									v-for="(item, idx) in visibleItems"
+									:key="item.path"
+									:class="`h-[${itemHeight}]`"
+									:file="item"
+									:index="visibleRange.start + idx"
+									:is-last="visibleRange.start + idx === filteredItems.length - 1"
+									:selected="ui.selectedItems.value.has(item.path)"
+									:write-disabled="ui.isBusy.value || !!ctx.isReadOnly?.(item)"
+									:write-disabled-tooltip="
+										ctx.isReadOnly?.(item) ? ctx.readOnlyReason?.value : ui.busyTooltip.value
+									"
+									:columns="shownColumns"
+									:has-hidden-details="hasHiddenDetails"
+									@extract="() => ui.handleExtractItem(item)"
+									@delete="() => ui.showDeleteModal(item)"
+									@rename="() => ui.showRenameModal(item)"
+									@download="() => ui.handleDownload(item)"
+									@zip="() => ui.handleZip(item)"
+									@move="() => ui.showMoveModal(item)"
+									@move-direct-to="ui.handleDirectMove"
+									@edit="() => ui.handleNavigateTo(item)"
+									@navigate="() => ui.handleNavigateTo(item)"
+									@open-in-new-tab="() => ui.handleOpenInNewTab(item)"
+									@hover="() => ui.handleItemPrefetch(item)"
+									@contextmenu="ui.handleContextMenu"
+									@toggle-select="() => ui.toggleItemSelection(item)"
+									@create="ui.showCreateModal"
+									@upload="ui.initiateFileUpload"
+								/>
+							</div>
 						</div>
-					</div>
-					<div
-						v-else-if="ui.items.value.length === 0 && !ctx.error.value && !ctx.loading.value"
-						class="flex h-full w-full items-center justify-center rounded-b-[20px] bg-surface-2 p-20"
-					>
-						<div class="flex flex-col items-center gap-4 text-center">
-							<FolderOpenIcon class="h-16 w-16 text-secondary" />
-							<h3 class="m-0 text-2xl font-bold text-contrast">
-								{{ formatMessage(messages.emptyFolderTitle) }}
-							</h3>
-							<p class="m-0 text-sm text-secondary">
-								{{ formatMessage(messages.emptyFolderDescription) }}
-							</p>
+						<div
+							v-else-if="ui.items.value.length === 0 && !ctx.error.value && !ctx.loading.value"
+							class="flex h-full w-full items-center justify-center rounded-b-[20px] bg-surface-2 p-20"
+						>
+							<div class="flex flex-col items-center gap-4 text-center">
+								<FolderOpenIcon class="h-16 w-16 text-secondary" />
+								<h3 class="m-0 text-2xl font-bold text-contrast">
+									{{ formatMessage(messages.emptyFolderTitle) }}
+								</h3>
+								<p class="m-0 text-sm text-secondary">
+									{{ formatMessage(messages.emptyFolderDescription) }}
+								</p>
+							</div>
 						</div>
-					</div>
 					</ReadyTransition>
 				</FileUploadDragAndDrop>
 			</div>
@@ -194,13 +191,16 @@ const messages = defineMessages({
 const ctx = injectFileManager()
 const ui = injectFileBrowserUI()
 
-const props = withDefaults(defineProps<{
-	smallMode?: boolean
-}>(), {
-	smallMode: false
-});
+const props = withDefaults(
+	defineProps<{
+		smallMode?: boolean
+	}>(),
+	{
+		smallMode: false,
+	},
+)
 
-const sidebarOpen = computed(() => ui.sidebarOpen.value);
+const sidebarOpen = computed(() => ui.sidebarOpen.value)
 const isFileActive = computed(() => ui.fileTabs.activeLocation.value.type === 'file')
 
 const filteredItems = computed(() => ui.filteredItems.value)
@@ -251,7 +251,9 @@ const { height: navbarHeight } = useElementSize(navbarWrapper, undefined, { box:
 
 /** Where the table header sticks: below the host's sticky offset, the sticky navbar and the tab strip. */
 const tableHeaderStickyTop = computed(() => {
-	const hostOffset = navbarWrapper.value ? parseFloat(getComputedStyle(navbarWrapper.value).top) || 0 : 0
+	const hostOffset = navbarWrapper.value
+		? parseFloat(getComputedStyle(navbarWrapper.value).top) || 0
+		: 0
 	return hostOffset + navbarHeight.value + TAB_STRIP_HEIGHT
 })
 
@@ -294,8 +296,7 @@ function measureTrailingSpace() {
 
 	const scrollContainer = findScrollableAncestor(panel)
 	const boundary =
-		panel.closest('main') ??
-		(scrollContainer instanceof Window ? document.body : scrollContainer)
+		panel.closest('main') ?? (scrollContainer instanceof Window ? document.body : scrollContainer)
 
 	let total = 0
 	let element: HTMLElement = panel
@@ -309,7 +310,8 @@ function measureTrailingSpace() {
 			if (style.display === 'none' || style.position === 'absolute' || style.position === 'fixed') {
 				continue
 			}
-			const siblingBottom = sibling.getBoundingClientRect().bottom + (parseFloat(style.marginBottom) || 0)
+			const siblingBottom =
+				sibling.getBoundingClientRect().bottom + (parseFloat(style.marginBottom) || 0)
 			contentBottom = Math.max(contentBottom, siblingBottom)
 		}
 
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
index b8e2fbd58af..09c693d2413 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
@@ -1,9 +1,9 @@
 <template>
-	<FileActionBar  ref="baseRef" v-bind="{ ...$props, ...$attrs }">
+	<FileActionBar ref="baseRef" v-bind="{ ...$props, ...$attrs }">
 		<nav
-v-if="breadcrumbs != null"
-		 	:aria-label="formatMessage(messages.breadcrumbNavigation)"
-		 	class="m-0 -ml-2 flex min-w-0 flex-shrink items-center p-0"
+			v-if="breadcrumbs != null"
+			:aria-label="formatMessage(messages.breadcrumbNavigation)"
+			class="m-0 -ml-2 flex min-w-0 flex-shrink items-center p-0"
 		>
 			<div class="mr-1 flex shrink-0 items-center">
 				<IconButton
@@ -30,10 +30,10 @@ v-if="breadcrumbs != null"
 				class="m-0 flex min-w-0 flex-shrink items-center overflow-hidden p-0"
 				:class="{ 'breadcrumb-fade-mask': isBreadcrumbOverflowing }"
 				:style="
-								isBreadcrumbOverflowing
-									? { '--scroll-distance': `-${breadcrumbOverflowAmount}px` }
-									: undefined
-							"
+					isBreadcrumbOverflowing
+						? { '--scroll-distance': `-${breadcrumbOverflowAmount}px` }
+						: undefined
+				"
 				@mouseenter="onBreadcrumbMouseEnter"
 				@mouseleave="onBreadcrumbMouseLeave"
 			>
@@ -45,22 +45,15 @@ v-if="breadcrumbs != null"
 					:class="{ 'breadcrumbs-scroll': isBreadcrumbAnimating }"
 					@animationiteration="onBreadcrumbAnimationIteration"
 				>
-					<li
-						:key="`home`"
-						class="relative flex shrink-0 items-center text-sm"
-					>
+					<li :key="`home`" class="relative flex shrink-0 items-center text-sm">
 						<div class="flex shrink-0 items-center">
 							<Button
 								v-tooltip="formatMessage(messages.backToHome)"
 								:label="formatMessage(messages.backToHome)"
 								type="quiet"
 								class="cursor-pointer whitespace-nowrap focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
-								:aria-current="
-												!isEditing && breadcrumbs.length == 0 ? 'location' : undefined
-											"
-								:class="{
-												'!text-contrast': !isEditing && breadcrumbs.length == 0,
-											}"
+								:aria-current="breadcrumbs.length == 0 ? 'location' : undefined"
+								:class="{ '!text-contrast': breadcrumbs.length == 0 }"
 								@click="$emit('navigateHome')"
 								@mouseenter="$emit('prefetchHome')"
 							>
@@ -68,7 +61,7 @@ v-if="breadcrumbs != null"
 								<span>Home</span>
 							</Button>
 							<ChevronRightIcon
-								v-if="breadcrumbs.length != 0 || isEditing"
+								v-if="breadcrumbs.length != 0"
 								class="size-4 flex-shrink-0 text-secondary"
 								aria-hidden="true"
 							/>
@@ -83,15 +76,13 @@ v-if="breadcrumbs != null"
 							<Button
 								type="quiet"
 								class="cursor-pointer whitespace-nowrap focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
-								:aria-current="
-												index === breadcrumbs.length - 1 ? 'location' : undefined
-											"
-								:class="{
-												'!text-contrast': index === breadcrumbs.length - 1,
-											}"
-								@click="() => {
-									if (index < breadcrumbs.length - 1) $emit('navigate', index + 1)
-								}"
+								:aria-current="index === breadcrumbs.length - 1 ? 'location' : undefined"
+								:class="{ '!text-contrast': index === breadcrumbs.length - 1 }"
+								@click="
+									() => {
+										if (index < breadcrumbs.length - 1) $emit('navigate', index + 1)
+									}
+								"
 							>
 								{{ segment || '' }}
 							</Button>
@@ -109,15 +100,13 @@ v-if="breadcrumbs != null"
 </template>
 
 <script setup lang="ts">
+import { ChevronLeftIcon, ChevronRightIcon, HomeIcon } from '@modrinth/assets'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-import {ChevronLeftIcon, ChevronRightIcon, HomeIcon} from "@modrinth/assets";
-import {computed, onBeforeUnmount, onMounted, ref, watch} from "vue";
-
-import {Button, IconButton} from "#ui/components/base/buttons";
-import {defineMessages, useVIntl} from "#ui/composables";
-import type {EmitCallbacks,Properties} from "#ui/layouts/shared/files-tab/components/FileActionBar.vue";
-import FileActionBar from "#ui/layouts/shared/files-tab/components/FileActionBar.vue";
-import type { FileInfo } from "../providers/file-manager";
+import { Button, IconButton } from '#ui/components/base/buttons'
+import { defineMessages, useVIntl } from '#ui/composables'
+import type { Properties } from '#ui/layouts/shared/files-tab/components/FileActionBar.vue'
+import FileActionBar from '#ui/layouts/shared/files-tab/components/FileActionBar.vue'
 
 const { formatMessage } = useVIntl()
 
@@ -145,27 +134,26 @@ const messages = defineMessages({
 })
 
 defineOptions({
-	inheritAttrs: false
+	inheritAttrs: false,
 })
 
 const baseRef = ref<typeof FileActionBar | null>(null)
 
 // Expose the base component instance so parent refs can call BaseButton methods
 defineExpose({
-	baseRef
+	baseRef,
 })
 
 const props = withDefaults(
-	defineProps<{
-		activeLocation: FileInfo
-		isEditing: boolean
-		editingFileName?: string
-		canGoBack?: boolean
-		canGoForward?: boolean
-	} & Properties>(),
+	defineProps<
+		{
+			canGoBack?: boolean
+			canGoForward?: boolean
+		} & Properties
+	>(),
 	{
 		hasNav: true,
-	}
+	},
 )
 
 const breadcrumbs = computed(() => props.activeLocation.path.split('/').filter(Boolean))
@@ -176,7 +164,7 @@ defineEmits<{
 	prefetchHome?: []
 	back: []
 	forward: []
-} /*& EmitCallbacks*/>()
+}>()
 
 const breadcrumbOuter = ref<HTMLElement | null>(null)
 const breadcrumbInner = ref<{ $el: HTMLElement } | null>(null)
@@ -237,7 +225,6 @@ watch(
 		requestAnimationFrame(checkBreadcrumbOverflow)
 	},
 )
-
 </script>
 
 <style scoped>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue b/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
index e17e14958a2..3ed106d8fb3 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
@@ -1,9 +1,9 @@
 <template>
-	<Tooltip :action-wait="{hover: 600, unhover: 50}">
+	<Tooltip :action-wait="{ hover: 600, unhover: 50 }">
 		<li
 			role="option"
-			:class="[containerClasses, isDragSource ? 'opacity-50' : '', compact ? 'h-8' : 'h-[3.25rem]', ]"
-			:style="depth != null ? { paddingLeft: `${(depth * basePaddingFactor)}rem`} : undefined"
+			:class="[containerClasses, isDragSource ? 'opacity-50' : '', compact ? 'h-8' : 'h-[3.25rem]']"
+			:style="depth != null ? { paddingLeft: `${depth * basePaddingFactor}rem` } : undefined"
 			tabindex="0"
 			:data-file-path="file.path"
 			:data-file-type="file.type"
@@ -24,12 +24,15 @@
 				class="pointer-events-none absolute inset-y-0 w-px"
 				:class="level === activeGuideLevel ? 'bg-brand-highlight' : 'bg-surface-5'"
 				:style="{
-					left: `${((level * basePaddingFactor) - 0.125)}rem`,
+					left: `${level * basePaddingFactor - 0.125}rem`,
 					height: `calc(2rem + ${isLast && level == depth ? '0rem' : '(0.25rem / 2)'})`,
-					top: index != 0 ? `calc(-0.25rem / 2)` : ''
+					top: index != 0 ? `calc(-0.25rem / 2)` : '',
 				}"
 			/>
-			<div class="pointer-events-none flex flex-1 items-center truncate h-full" :class="compact ? 'gap-2' : 'gap-3'">
+			<div
+				class="pointer-events-none flex flex-1 items-center truncate h-full"
+				:class="compact ? 'gap-2' : 'gap-3'"
+			>
 				<button
 					v-if="canExpand"
 					type="button"
@@ -39,11 +42,14 @@
 					@click.stop="emit('toggle-expand')"
 					@pointerdown.stop
 				>
-					<ChevronRightIcon class="size-4 transition-transform duration-100" :class="{ 'rotate-90': expanded }" />
+					<ChevronRightIcon
+						class="size-4 transition-transform duration-100"
+						:class="{ 'rotate-90': expanded }"
+					/>
 				</button>
 				<span v-else-if="isTreeRow" class="-mr-1 size-5 shrink-0" aria-hidden="true" />
 				<Checkbox
-v-if="!selectionWithinActionMenu"
+					v-if="!selectionWithinActionMenu"
 					class="pointer-events-auto"
 					:model-value="selected"
 					@click.stop
@@ -66,7 +72,10 @@ v-if="!selectionWithinActionMenu"
 				</div>
 				<EditIcon v-if="hoveringToEdit && isEditableFile && !compact" />
 			</div>
-			<div v-if="!isTreeRow" class="pointer-events-auto flex w-fit flex-shrink-0 items-center gap-6">
+			<div
+				v-if="!isTreeRow"
+				class="pointer-events-auto flex w-fit flex-shrink-0 items-center gap-6"
+			>
 				<span
 					v-for="column in shownColumnDefinitions"
 					:key="column.id"
@@ -102,11 +111,15 @@ v-if="!selectionWithinActionMenu"
 		</li>
 		<template #popper>
 			<div class="flex flex-col w-fit">
-				<h3 class="mb-2 pb-1 mt-0 text-base font-semibold border-0 border-b-[1px] border-solid border-divider">{{ formatMessage(messages.details) }}</h3>
-				<div class="gap-1 grid grid-cols-2" v-for="(key) in FILE_COLUMNS_ORDER">
+				<h3
+					class="mb-2 pb-1 mt-0 text-base font-semibold border-0 border-b-[1px] border-solid border-divider"
+				>
+					{{ formatMessage(messages.details) }}
+				</h3>
+				<div v-for="key in FILE_COLUMNS_ORDER" :key="key" class="gap-1 grid grid-cols-2">
 					<template v-if="columnValues[key] != null">
 						<span class="text-nowrap text-sm text-secondary">
-						{{ formatMessage(messages[key]) }}
+							{{ formatMessage(messages[key]) }}
 						</span>
 						<span class="text-nowrap text-sm text-secondary">
 							{{ columnValues[key] ?? ' - ' }}
@@ -141,21 +154,21 @@ import {
 } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
-import { Tooltip } from "#ui/components";
-import type {ButtonMenuLeafOption, ButtonMenuOption} from '#ui/components/base/buttons'
+import { Tooltip } from '#ui/components'
+import type { ButtonMenuLeafOption, ButtonMenuOption } from '#ui/components/base/buttons'
 import { TeleportOverflowMenu } from '#ui/components/base/buttons'
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import { useFormatBytes } from '#ui/composables'
 import { useFormatDateTime } from '#ui/composables/format-date-time'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import {infoFrom, injectFileManager} from '#ui/layouts'
-import { useFileActions } from "#ui/layouts/shared/files-tab/composables/folder-actions.ts";
+import { infoFrom, injectFileManager } from '#ui/layouts'
+import { useFileActions } from '#ui/layouts/shared/files-tab/composables/folder-actions.ts'
 import { injectNotificationManager } from '#ui/providers/web-notifications'
 import { getFileExtensionIcon } from '#ui/utils/auto-icons'
 import { commonMessages } from '#ui/utils/common-messages'
 import { canOpenInFileEditor, getFileExtension } from '#ui/utils/file-extensions'
 
-import {FILE_COLUMNS, FILE_COLUMNS_ORDER, type FileColumn} from '../composables/file-columns'
+import { FILE_COLUMNS, FILE_COLUMNS_ORDER, type FileColumn } from '../composables/file-columns'
 import {
 	fileDragActive,
 	fileDragData,
@@ -170,7 +183,7 @@ const { formatMessage } = useVIntl()
 const { addNotification } = injectNotificationManager()
 const ctx = injectFileManager()
 
-const basePaddingFactor = 0.75;
+const basePaddingFactor = 0.75
 
 const messages = defineMessages({
 	itemCount: {
@@ -219,35 +232,33 @@ const messages = defineMessages({
 	},
 })
 
-const props = defineProps<
-	{
-		index: number
-		file: FileItem,
-		isLast: boolean
-		selected: boolean
-		writeDisabled?: boolean
-		writeDisabledTooltip?: string
-		/** Detail columns to render, in order. */
-		columns?: FileColumn[]
-		/** Whether some details aren't shown as columns, so hovering offers them in a tooltip. */
-		hasHiddenDetails?: boolean
-		selectionWithinActionMenu?: boolean
-		/** Smaller row, used by the sidebar tree. */
-		compact?: boolean
-		/** Nesting level in the sidebar tree; indents the row. */
-		depth?: number
-		/** Renders as a sidebar tree row: expand chevron, no columns or inline actions menu. */
-		isTreeRow?: boolean
-		/** Whether this tree row's directory is expanded. */
-		expanded?: boolean
-		/** Whether this tree row's directory can be expanded, i.e. isn't known to be empty. */
-		expandable?: boolean
-		/** Highlights the row as the active tab's current location. */
-		active?: boolean
-		/** Tree guide level (1-based) to highlight, marking the directory the active location is in. */
-		activeGuideLevel?: number
-	}
->()
+const props = defineProps<{
+	index: number
+	file: FileItem
+	isLast: boolean
+	selected: boolean
+	writeDisabled?: boolean
+	writeDisabledTooltip?: string
+	/** Detail columns to render, in order. */
+	columns?: FileColumn[]
+	/** Whether some details aren't shown as columns, so hovering offers them in a tooltip. */
+	hasHiddenDetails?: boolean
+	selectionWithinActionMenu?: boolean
+	/** Smaller row, used by the sidebar tree. */
+	compact?: boolean
+	/** Nesting level in the sidebar tree; indents the row. */
+	depth?: number
+	/** Renders as a sidebar tree row: expand chevron, no columns or inline actions menu. */
+	isTreeRow?: boolean
+	/** Whether this tree row's directory is expanded. */
+	expanded?: boolean
+	/** Whether this tree row's directory can be expanded, i.e. isn't known to be empty. */
+	expandable?: boolean
+	/** Highlights the row as the active tab's current location. */
+	active?: boolean
+	/** Tree guide level (1-based) to highlight, marking the directory the active location is in. */
+	activeGuideLevel?: number
+}>()
 
 const emit = defineEmits<{
 	(
@@ -265,14 +276,10 @@ const emit = defineEmits<{
 		item: Pick<FileItem, 'name' | 'type' | 'path'>,
 	): void
 	(e: 'create', type: 'file' | 'directory'): void
-	(e: 'upload', type: 'file' | 'zip'): void,
-	(
-		e: 'moveDirectTo',
-		item: Pick<FileItem, 'name' | 'type' | 'path'>, destination: string,
-	): void
+	(e: 'upload', type: 'file' | 'zip'): void
+	(e: 'moveDirectTo', item: Pick<FileItem, 'name' | 'type' | 'path'>, destination: string): void
 	(e: 'contextmenu', event: MouseEvent, options: ButtonMenuOption[]): void
-	(e: 'toggle-select'): void
-	(e: 'toggle-expand'): void
+	(e: 'toggle-select' | 'toggle-expand'): void
 }>()
 
 const canExpand = computed(
@@ -285,10 +292,15 @@ const shownColumnDefinitions = computed(() =>
 const canOpenInTab = computed(() => props.file.type === 'directory' || isEditableFile.value)
 
 const isDropTarget = computed(
-	() => fileDragActive.value && fileDragTarget.value === props.file.path && props.file.type === 'directory',
+	() =>
+		fileDragActive.value &&
+		fileDragTarget.value === props.file.path &&
+		props.file.type === 'directory',
 )
-const isDragSource = computed(() => fileDragActive.value && fileDragData.value?.path === props.file.path)
-const hoveringToEdit = ref<boolean>(false);
+const isDragSource = computed(
+	() => fileDragActive.value && fileDragData.value?.path === props.file.path,
+)
+const hoveringToEdit = ref<boolean>(false)
 
 const formatDateTime = useFormatDateTime({
 	year: '2-digit',
@@ -316,7 +328,9 @@ const containerClasses = computed(() => {
 							? 'bg-surface-2'
 							: 'bg-surface-1.5',
 		props.isLast ? '' : '',
-		isEditableFile.value || props.file.type === 'directory' ? 'cursor-pointer hover:bg-surface-2.5' : '',
+		isEditableFile.value || props.file.type === 'directory'
+			? 'cursor-pointer hover:bg-surface-2.5'
+			: '',
 		'transition-colors duration-100 focus:!outline-none',
 	]
 })
@@ -332,7 +346,7 @@ function getFullPath() {
 const { options } = useFileActions(
 	(type) => emit('create', type),
 	(type) => emit('upload', type),
-);
+)
 
 const menuOptions = computed<ButtonMenuOption[]>(() => {
 	const item = infoFrom(props.file)
@@ -340,7 +354,7 @@ const menuOptions = computed<ButtonMenuOption[]>(() => {
 	const wdTooltip = props.writeDisabledTooltip
 	return [
 		{
-			type: "submenu",
+			type: 'submenu',
 			id: 'upload-create',
 			label: formatMessage(messages.newOrUpload),
 			icon: FileIcon,
@@ -481,7 +495,9 @@ const isEditableFile = computed(() => {
 const columnValues = computed<Record<FileColumn, string | null>>(() => ({
 	size: props.file.size != null ? formatBytes(props.file.size) : null,
 	items:
-		props.file.type === 'directory' ? formatMessage(messages.itemCount, { count: props.file.count ?? 0 }) : null,
+		props.file.type === 'directory'
+			? formatMessage(messages.itemCount, { count: props.file.count ?? 0 })
+			: null,
 	created: formattedCreationDate.value,
 	modified: formattedModifiedDate.value,
 }))
@@ -492,12 +508,12 @@ function openContextMenu(event: MouseEvent) {
 }
 
 function handleMouseEnter() {
-	hoveringToEdit.value = true;
+	hoveringToEdit.value = true
 	emit('hover', { name: props.file.name, type: props.file.type, path: props.file.path })
 }
 
 function handleMouseLeave() {
-	hoveringToEdit.value = false;
+	hoveringToEdit.value = false
 }
 
 const isNavigating = ref(false)
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
index bca50b42c18..22a5230cef1 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
@@ -3,12 +3,12 @@
 		class="flex flex-col p-1 gap-2 h-full"
 		:class="[
 			addBorder ? 'border-r border-0 border-solid border-surface-5 pr-2' : '',
-			constrainWidth ? 'w-[24rem]' : 'w-full'
+			constrainWidth ? 'w-[24rem]' : 'w-full',
 		]"
 	>
 		<FileActionBar
 			:sidebar-open="ui.sidebarOpen.value"
-			:is-editing="false"
+			:active-location="ui.activeLocation.value"
 			:search-query="ui.searchQuery.value"
 			:show-refresh-button="ui.showRefreshButton.value"
 			:show-install-from-url="ctx.showInstallFromUrl"
@@ -20,9 +20,7 @@
 			@upload="ui.initiateFileUpload"
 			@upload-zip="() => {}"
 			@unzip-from-url="ui.showUnzipFromUrlModal"
-			@refresh="() => {
-				ctx.refresh();
-			}"
+			@refresh="() => ctx.refresh()"
 			@share="() => ui.shareToMclogs()"
 			@find="() => ui.toggleFind()"
 			@toggle-sidebar="() => ui.setSidebarOpen(!ui.sidebarOpen.value)"
@@ -52,7 +50,7 @@ const ui = injectFileBrowserUI()
 withDefaults(
 	defineProps<{
 		constrainWidth?: boolean
-		scrollFileEntries?: boolean,
+		scrollFileEntries?: boolean
 		addBorder?: boolean
 		/** Fill the parent's height and scroll the entries within it, keeping the action bar pinned. */
 		fillHeight?: boolean
@@ -62,6 +60,6 @@ withDefaults(
 		scrollFileEntries: false,
 		addBorder: true,
 		fillHeight: false,
-	}
+	},
 )
 </script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
index 0b03e2d202d..f0072a7507a 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
@@ -19,8 +19,16 @@
 				@click="$emit('sort', 'name')"
 			>
 				<span>{{ formatMessage(messages.name) }}</span>
-				<ChevronUpIcon v-if="sortField === 'name' && !sortDesc" class="h-4 w-4" aria-hidden="true" />
-				<ChevronDownIcon v-if="sortField === 'name' && sortDesc" class="h-4 w-4" aria-hidden="true" />
+				<ChevronUpIcon
+					v-if="sortField === 'name' && !sortDesc"
+					class="h-4 w-4"
+					aria-hidden="true"
+				/>
+				<ChevronDownIcon
+					v-if="sortField === 'name' && sortDesc"
+					class="h-4 w-4"
+					aria-hidden="true"
+				/>
 			</button>
 		</div>
 		<div class="flex shrink-0 items-center gap-6">
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
index 6e8e13b3863..586fabebf7e 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
@@ -61,7 +61,7 @@ import { SpinnerIcon } from '@modrinth/assets'
 import { computed, watch } from 'vue'
 
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import {infoFrom, parentInfoFrom} from "#ui/layouts/shared/files-tab/utils.ts";
+import { infoFrom, parentInfoFrom } from '#ui/layouts/shared/files-tab/utils.ts'
 import { canOpenInFileEditor } from '#ui/utils/file-extensions'
 
 import { injectFileBrowserUI } from '../providers/file-browser-ui'
@@ -180,7 +180,7 @@ function openDirectory(path: string, item: FileItem) {
 }
 
 function prefetch(row: Extract<TreeRow, { type: 'item' }>) {
-	const { item } = row;
+	const { item } = row
 	if (item.type === 'directory' || canOpenInFileEditor(item.name)) {
 		tree.prefetch(item)
 	}
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
index ffe6ae40547..eba0c210f53 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue
@@ -57,8 +57,7 @@ import { injectModrinthClient } from '#ui/providers'
 import { injectNotificationManager } from '#ui/providers/web-notifications'
 import { getEditorLanguage, getFileExtension, isImageFile } from '#ui/utils/file-extensions'
 
-import {type FileInfo, injectFileManager} from '../../providers/file-manager'
-import type { EditingFile } from '../../types'
+import { type FileInfo, injectFileManager } from '../../providers/file-manager'
 import EditorFindReplace from './EditorFindReplace.vue'
 import FileImageViewer from './FileImageViewer.vue'
 
@@ -183,27 +182,27 @@ async function loadFileContent(file: FileInfo<'file'>) {
 	try {
 		if (!props.fillHeight) window.scrollTo(0, 0)
 		const extension = getFileExtension(file.name)
-		const result = ctx.directoryTree.get(file);
+		const result = ctx.directoryTree.get(file)
 
-		const holder = Promise.withResolvers<ArrayBuffer>();
+		const holder = Promise.withResolvers<ArrayBuffer>()
 
 		const intervalId = setInterval(() => {
 			if (!result.isLoading.value) {
-				const data = result.data.value;
+				const data = result.data.value
 
 				if (data != null) {
-					clearInterval(intervalId);
-					holder.resolve(data);
+					clearInterval(intervalId)
+					holder.resolve(data)
 				}
 			}
 
 			if (result.loadError.value != null) {
-				clearInterval(intervalId);
-				holder.reject(result.loadError.value);
+				clearInterval(intervalId)
+				holder.reject(result.loadError.value)
 			}
-		});
+		})
 
-		const data = await holder.promise;
+		const data = await holder.promise
 
 		if (isImageFile(extension)) {
 			const content = new Blob([data])
@@ -211,7 +210,7 @@ async function loadFileContent(file: FileInfo<'file'>) {
 			imagePreview.value = content
 		} else {
 			isEditingImage.value = false
-			const content = new TextDecoder().decode(data);
+			const content = new TextDecoder().decode(data)
 			fileContent.value = content
 			originalContent.value = content
 		}
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabPanel.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabPanel.vue
index 6c30d9c57ce..747e71333be 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabPanel.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabPanel.vue
@@ -14,10 +14,11 @@
 import type { DockviewPanelApi } from 'dockview-vue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
+import type { FileInfo } from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
+
 import { currentLocation, type FileTabPanelParams } from '../../composables/file-tabs'
 import { type FileEditorBridge, injectFileBrowserUI } from '../../providers/file-browser-ui'
 import FileEditor from '../editor/FileEditor.vue'
-import type {FileInfo} from "#ui/layouts/shared/files-tab/providers/file-manager.ts";
 
 const props = defineProps<{
 	params: {
@@ -31,16 +32,15 @@ const ui = injectFileBrowserUI()
 const tabId = props.params.params.tabId
 const location = computed(() => {
 	const tab = ui.fileTabs.getTab(tabId)
-	if (tab == null) return null;
-	const location = currentLocation(tab);
-	return location.type == 'file' ? location as FileInfo<'file'> : null;
+	if (tab == null) return null
+	const location = currentLocation(tab)
+	return location.type == 'file' ? (location as FileInfo<'file'>) : null
 })
 
 const fileEditorRef = ref<InstanceType<typeof FileEditor>>()
 
 const bridge: FileEditorBridge = {
 	hasUnsavedChanges: computed(() => fileEditorRef.value?.hasUnsavedChanges ?? false),
-	isEditingImage: computed(() => fileEditorRef.value?.isEditingImage ?? false),
 	isFindOpen: computed(() => fileEditorRef.value?.isFindOpen ?? false),
 	saveFileContent: async (exit = false) => {
 		await fileEditorRef.value?.saveFileContent(exit)
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue
index 0198326fcc1..b691a22f6a5 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue
@@ -40,32 +40,32 @@ onBeforeUnmount(() => ui.fileTabs.onDispose())
 </script>
 
 <style>
-	.dockview-theme-modrinth {
-		--dv-group-view-background-color: var(--surface-2);
-		--dv-tabs-and-actions-container-background-color: var(--surface-3);
-		--dv-tabs-and-actions-container-height: 2.5rem;
-		--dv-tabs-and-actions-container-font-size: 0.875rem;
-		--dv-activegroup-visiblepanel-tab-background-color: var(--surface-2);
-		--dv-activegroup-hiddenpanel-tab-background-color: var(--surface-3);
-		--dv-inactivegroup-visiblepanel-tab-background-color: var(--surface-2);
-		--dv-inactivegroup-hiddenpanel-tab-background-color: var(--surface-3);
-		--dv-activegroup-visiblepanel-tab-color: var(--color-contrast);
-		--dv-activegroup-hiddenpanel-tab-color: var(--color-text-default);
-		--dv-inactivegroup-visiblepanel-tab-color: var(--color-text-default);
-		--dv-inactivegroup-hiddenpanel-tab-color: var(--color-text-tertiary);
-		--dv-tab-divider-color: var(--surface-5);
-		--dv-separator-border: var(--surface-5);
-		--dv-paneview-header-border-color: var(--surface-5);
-		--dv-icon-hover-background-color: var(--surface-5);
-		--dv-drag-over-background-color: var(--color-brand-highlight);
-		--dv-active-sash-color: var(--color-brand);
-		--dv-tabs-container-scrollbar-color: var(--surface-5);
-	}
+.dockview-theme-modrinth {
+	--dv-group-view-background-color: var(--surface-2);
+	--dv-tabs-and-actions-container-background-color: var(--surface-3);
+	--dv-tabs-and-actions-container-height: 2.5rem;
+	--dv-tabs-and-actions-container-font-size: 0.875rem;
+	--dv-activegroup-visiblepanel-tab-background-color: var(--surface-2);
+	--dv-activegroup-hiddenpanel-tab-background-color: var(--surface-3);
+	--dv-inactivegroup-visiblepanel-tab-background-color: var(--surface-2);
+	--dv-inactivegroup-hiddenpanel-tab-background-color: var(--surface-3);
+	--dv-activegroup-visiblepanel-tab-color: var(--color-contrast);
+	--dv-activegroup-hiddenpanel-tab-color: var(--color-text-default);
+	--dv-inactivegroup-visiblepanel-tab-color: var(--color-text-default);
+	--dv-inactivegroup-hiddenpanel-tab-color: var(--color-text-tertiary);
+	--dv-tab-divider-color: var(--surface-5);
+	--dv-separator-border: var(--surface-5);
+	--dv-paneview-header-border-color: var(--surface-5);
+	--dv-icon-hover-background-color: var(--surface-5);
+	--dv-drag-over-background-color: var(--color-brand-highlight);
+	--dv-active-sash-color: var(--color-brand);
+	--dv-tabs-container-scrollbar-color: var(--surface-5);
+}
 
-	.dv-tab {
-		border-width: 0px;
-		border-right-width: 1px;
-		border-style: solid;
-		border-color: var(--surface-5)
-	}
+.dv-tab {
+	border-width: 0px;
+	border-right-width: 1px;
+	border-style: solid;
+	border-color: var(--surface-5);
+}
 </style>
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-columns.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-columns.ts
index a4c9c5ca48f..20534799648 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-columns.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-columns.ts
@@ -6,7 +6,7 @@ import type { FileSortField } from '../types'
 
 export const FILE_COLUMNS_ORDER = ['size', 'items', 'created', 'modified'] as const
 
-export type FileColumn = typeof FILE_COLUMNS_ORDER[number]
+export type FileColumn = (typeof FILE_COLUMNS_ORDER)[number]
 
 export interface FileColumnDefinition {
 	id: FileColumn
@@ -33,7 +33,8 @@ const COLUMN_GAP = 24
 
 function columnsWidth(columns: FileColumn[]) {
 	return columns.reduce(
-		(total, id) => total + (FILE_COLUMNS.find((column) => column.id === id)?.width ?? 0) + COLUMN_GAP,
+		(total, id) =>
+			total + (FILE_COLUMNS.find((column) => column.id === id)?.width ?? 0) + COLUMN_GAP,
 		0,
 	)
 }
@@ -49,7 +50,7 @@ export function useFileColumns(containerWidth: Ref<number | undefined>) {
 		'size',
 		'items',
 		'modified',
-		'created'
+		'created',
 	])
 
 	const shownColumns = computed<FileColumn[]>(() => {
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-drag-state.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-drag-state.ts
index 544e13749d7..1d148942b39 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-drag-state.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-drag-state.ts
@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 
-import type {FileInfo} from "#ui/layouts/shared/files-tab/providers/file-manager.ts";
+import type { FileInfo } from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
 
 const activeDrag = ref<FileInfo | null>(null)
 const dragTarget = ref<string | null>(null)
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-selection.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-selection.ts
index 419eaff64dd..1b655f4dfe1 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-selection.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-selection.ts
@@ -46,8 +46,7 @@ export function useFileSelection(items: Ref<FileItem[]>) {
 	}
 
 	const allSelected = computed(
-		() =>
-			items.value.length > 0 && items.value.every((item) => selectedItems.value.has(item.path)),
+		() => items.value.length > 0 && items.value.every((item) => selectedItems.value.has(item.path)),
 	)
 
 	const someSelected = computed(
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
index 6bfaf8d3386..7d323602fed 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
@@ -2,7 +2,7 @@ import type { DockviewApi, DockviewReadyEvent, IDisposable } from 'dockview-vue'
 import type { ComputedRef, Ref } from 'vue'
 import { computed, ref, shallowReactive, shallowRef, watch } from 'vue'
 
-import {isSameInfo, parentInfoFrom} from "#ui/layouts/shared/files-tab/utils.ts";
+import { isSameInfo, parentInfoFrom } from '#ui/layouts/shared/files-tab/utils.ts'
 
 import type { FileEditorBridge } from '../providers/file-browser-ui'
 import type { FileInfo, FileManagerContext } from '../providers/file-manager'
@@ -74,7 +74,7 @@ export interface FileTabs {
 export function useFileTabs(options: FileTabsOptions): FileTabs {
 	const { ctx } = options
 
-	const contextLocation = computed<FileInfo>(() => ctx.currentFile.value);
+	const contextLocation = computed<FileInfo>(() => ctx.currentFile.value)
 
 	let nextTabId = 0
 	function createTab(location: FileInfo): FileTab {
@@ -90,9 +90,7 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 	)
 	const activeLocation = computed(() => currentLocation(activeTab.value))
 	const canGoBack = computed(() => activeTab.value.index > 0)
-	const canGoForward = computed(
-		() => activeTab.value.index < activeTab.value.history.length - 1,
-	)
+	const canGoForward = computed(() => activeTab.value.index < activeTab.value.history.length - 1)
 
 	const editors = shallowReactive(new Map<string, FileEditorBridge>())
 	const activeEditor = computed(() => editors.get(activeTabId.value) ?? null)
@@ -129,7 +127,7 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		clearTimeout(pendingTimeout)
 		pendingTimeout = setTimeout(() => (pendingLocation = null), PENDING_LOCATION_TIMEOUT)
 
-		ctx.navigateTo(info);
+		ctx.navigateTo(info)
 	}
 
 	watch(
@@ -217,7 +215,7 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		const location = currentLocation(tab)
 		if (location.type !== 'file') return
 
-		const parent: FileInfo = parentInfoFrom(location);
+		const parent: FileInfo = parentInfoFrom(location)
 		pushLocation(tab, parent)
 		if (tab.id === activeTabId.value) applyToContext(parent)
 	}
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
index 4d3d09570b6..9a78e60c504 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 
-import type {FileInfo} from "#ui/layouts/shared/files-tab/providers/file-manager.ts";
-import {parentInfoFrom} from "#ui/layouts/shared/files-tab/utils.ts";
+import type { FileInfo } from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
+import { parentInfoFrom } from '#ui/layouts/shared/files-tab/utils.ts'
 
 import type { Operation } from '../types'
 
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/folder-actions.ts b/packages/ui/src/layouts/shared/files-tab/composables/folder-actions.ts
index 0ba65da2d63..2431e9eaeee 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/folder-actions.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/folder-actions.ts
@@ -1,8 +1,14 @@
-import {BoxIcon, CurseForgeIcon, FileArchiveIcon, FolderOpenIcon, LinkIcon,
-	RefreshCwIcon, UploadIcon} from "@modrinth/assets";
-import {computed, type ComputedRef} from "vue";
+import {
+	BoxIcon,
+	CurseForgeIcon,
+	FolderOpenIcon,
+	LinkIcon,
+	RefreshCwIcon,
+	UploadIcon,
+} from '@modrinth/assets'
+import { computed, type ComputedRef } from 'vue'
 
-import type { ButtonMenuOption } from "#ui/components/index.ts";
+import type { ButtonMenuOption } from '#ui/components/index.ts'
 import { defineMessages, useVIntl } from '#ui/composables/i18n.ts'
 import { commonMessages } from '#ui/utils/common-messages.ts'
 
@@ -10,8 +16,8 @@ export function useFileActions(
 	createFile: (type: 'file' | 'directory') => void,
 	upload?: (type: 'file' | 'zip') => void,
 	unzip?: (type: 'cf' | 'zip') => void,
-	refresh?: { handleRefresh: () => void, isRefreshing: ComputedRef<boolean>}
-): { options: ComputedRef<ButtonMenuOption[]> }{
+	refresh?: { handleRefresh: () => void; isRefreshing: ComputedRef<boolean> },
+): { options: ComputedRef<ButtonMenuOption[]> } {
 	const { formatMessage } = useVIntl()
 
 	const messages = defineMessages({
@@ -42,12 +48,12 @@ export function useFileActions(
 		installCurseForgePack: {
 			id: 'files.navbar.install-curseforge-pack',
 			defaultMessage: 'Install CurseForge pack',
-		}
+		},
 	})
 
-	const canHandleZips = unzip != null;
-	const canHandleUpload = upload != null;
-	const canRefresh = refresh != null;
+	const canHandleZips = unzip != null
+	const canHandleUpload = upload != null
+	const canRefresh = refresh != null
 
 	return {
 		options: computed(() => {
@@ -90,13 +96,13 @@ export function useFileActions(
 				{
 					id: 'refresh',
 					icon: RefreshCwIcon,
-					iconClass: computed(() => refresh?.isRefreshing.value ? 'animate-spin' : ''),
+					iconClass: computed(() => (refresh?.isRefreshing.value ? 'animate-spin' : '')),
 					label: formatMessage(commonMessages.refreshButton),
 					shown: canRefresh,
 					action: () => refresh?.handleRefresh(),
 					disabled: refresh?.isRefreshing.value,
 				},
 			]
-		})
-	};
+		}),
+	}
 }
diff --git a/packages/ui/src/layouts/shared/files-tab/layout.vue b/packages/ui/src/layouts/shared/files-tab/layout.vue
index 6be8ab7bc64..6f102c865a0 100644
--- a/packages/ui/src/layouts/shared/files-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/files-tab/layout.vue
@@ -67,10 +67,12 @@
 		</div>
 		<template v-if="smallMode">
 			<NewModal
-ref="sidebarModal"
-				:on-hide="() => {
-					if (smallMode) sidebarOpen = false;
-				}"
+				ref="sidebarModal"
+				:on-hide="
+					() => {
+						if (smallMode) sidebarOpen = false
+					}
+				"
 				:noblur="true"
 				:no-padding="true"
 				:hide-header="true"
@@ -80,8 +82,12 @@ ref="sidebarModal"
 				:scrollable="false"
 				pullout-direction="left"
 			>
-				<div class="p-2 h-full " :class="[fullWidthSidebar ? 'w-full' : '']">
-					<FileSideBar :constrain-width="!fullWidthSidebar" :scroll-file-entries="true" :add-border="false"/>
+				<div class="p-2 h-full" :class="[fullWidthSidebar ? 'w-full' : '']">
+					<FileSideBar
+						:constrain-width="!fullWidthSidebar"
+						:scroll-file-entries="true"
+						:add-border="false"
+					/>
 				</div>
 			</NewModal>
 		</template>
@@ -118,7 +124,13 @@ ref="sidebarModal"
 			<div class="ml-auto flex items-center gap-0.5">
 				<Button
 					v-if="ctx.zipPaths"
-					v-tooltip="isBusy ? busyTooltip : selectionParent === null ? formatMessage(messages.zipMixedFolders) : undefined"
+					v-tooltip="
+						isBusy
+							? busyTooltip
+							: selectionParent === null
+								? formatMessage(messages.zipMixedFolders)
+								: undefined
+					"
 					type="quiet"
 					:disabled="isBusy || selectionParent === null"
 					@click="createZipModal?.show()"
@@ -144,21 +156,21 @@ ref="sidebarModal"
 </template>
 
 <script setup lang="ts">
-import {FolderArchiveIcon, HistoryIcon, SaveIcon, TrashIcon,} from '@modrinth/assets'
-import {type MaybeElement, useLocalStorage, useResizeObserver} from "@vueuse/core";
-import type {Component} from 'vue'
-import {computed, onMounted, onUnmounted, ref, shallowRef, watch} from 'vue'
+import { FolderArchiveIcon, HistoryIcon, SaveIcon, TrashIcon } from '@modrinth/assets'
+import { type MaybeElement, useLocalStorage, useResizeObserver } from '@vueuse/core'
+import type { Component } from 'vue'
+import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
 
-import {type ButtonMenuOption, NewModal} from '#ui/components'
-import {Button, ContextMenu} from '#ui/components/base/buttons'
+import { type ButtonMenuOption, NewModal } from '#ui/components'
+import { Button, ContextMenu } from '#ui/components/base/buttons'
 import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
-import {defineMessages, useVIntl} from '#ui/composables/i18n'
-import {useFileTabs} from "#ui/layouts/shared/files-tab/composables/file-tabs.ts";
-import {parentDirectory, parentInfoFrom} from "#ui/layouts/shared/files-tab/utils.ts";
-import {injectFilePicker} from '#ui/providers/file-picker'
-import {injectNotificationManager} from '#ui/providers/web-notifications'
-import {commonMessages} from '#ui/utils/common-messages'
-import {canOpenInFileEditor} from '#ui/utils/file-extensions'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { useFileTabs } from '#ui/layouts/shared/files-tab/composables/file-tabs.ts'
+import { parentDirectory, parentInfoFrom } from '#ui/layouts/shared/files-tab/utils.ts'
+import { injectFilePicker } from '#ui/providers/file-picker'
+import { injectNotificationManager } from '#ui/providers/web-notifications'
+import { commonMessages } from '#ui/utils/common-messages'
+import { canOpenInFileEditor } from '#ui/utils/file-extensions'
 
 import FileBrowserPanel from './components/FileBrowserPanel.vue'
 import FileSideBar from './components/FileSideBar.vue'
@@ -170,14 +182,14 @@ import FileRenameItemModal from './components/modals/FileRenameItemModal.vue'
 import FileUnsavedChangesModal from './components/modals/FileUnsavedChangesModal.vue'
 import FileUploadConflictModal from './components/modals/FileUploadConflictModal.vue'
 import FileUploadZipUrlModal from './components/modals/FileUploadZipUrlModal.vue'
-import {useFileSearch} from './composables/file-search'
-import {useFileSelection} from './composables/file-selection'
-import {useFileSorting} from './composables/file-sorting'
-import {useFileUndoRedo} from './composables/file-undo-redo'
-import type {FileEditorBridge} from './providers/file-browser-ui'
-import {provideFileBrowserUI} from './providers/file-browser-ui'
-import {type FileInfo, injectFileManager} from './providers/file-manager'
-import type {FileItem} from './types'
+import { useFileSearch } from './composables/file-search'
+import { useFileSelection } from './composables/file-selection'
+import { useFileSorting } from './composables/file-sorting'
+import { useFileUndoRedo } from './composables/file-undo-redo'
+import type { FileEditorBridge } from './providers/file-browser-ui'
+import { provideFileBrowserUI } from './providers/file-browser-ui'
+import { type FileInfo, injectFileManager } from './providers/file-manager'
+import type { FileItem } from './types'
 
 const { formatMessage } = useVIntl()
 
@@ -259,19 +271,28 @@ const items = computed(() => ctx.directoryTree.get(ctx.currentDirectory.value).d
 const hasLoadedOnce = ref(false)
 watch(
 	() => {
-		const location = ctx.currentFile.value;
-		const result = location.type == 'directory' ? ctx.directoryTree.get<'directory'>(location as FileInfo<'directory'>).data : null;
+		const location = ctx.currentFile.value
+		const result =
+			location.type == 'directory'
+				? ctx.directoryTree.get<'directory'>(location as FileInfo<'directory'>).data
+				: null
 
-		return !(ctx.loading.value && result?.value.length === 0);
+		return !(ctx.loading.value && result?.value.length === 0)
 	},
 	(loaded) => {
 		if (loaded) hasLoadedOnce.value = true
 	},
 	{ immediate: true },
 )
-const isEditing = computed(() => ctx.currentFile.value !== null && ctx.currentFile.value.type == 'file')
-const isBusy = computed(() => (ctx.isBusy?.value ?? false) || (ctx.isReadOnly?.(ctx.currentFile.value) ?? false))
-const busyTooltip = computed(() => ctx.isReadOnly?.(ctx.currentFile.value) ? ctx.readOnlyReason?.value : ctx.busyTooltip?.value,)
+const isEditing = computed(
+	() => ctx.currentFile.value !== null && ctx.currentFile.value.type == 'file',
+)
+const isBusy = computed(
+	() => (ctx.isBusy?.value ?? false) || (ctx.isReadOnly?.(ctx.currentFile.value) ?? false),
+)
+const busyTooltip = computed(() =>
+	ctx.isReadOnly?.(ctx.currentFile.value) ? ctx.readOnlyReason?.value : ctx.busyTooltip?.value,
+)
 
 const activeLocation = computed(() => fileTabs.activeLocation.value)
 
@@ -300,9 +321,7 @@ const selectionReadOnly = computed(() =>
 
 /** The directory all selected entries share, or `null` when the selection is empty or spans directories. */
 const selectionParent = computed(() => {
-	const parents = new Set(
-		[...selectedItems.value.values()].map((item) => parentInfoFrom(item)),
-	)
+	const parents = new Set([...selectedItems.value.values()].map((item) => parentInfoFrom(item)))
 	return parents.size === 1 ? [...parents][0] : null
 })
 
@@ -342,8 +361,8 @@ function toggleFind() {
 }
 
 // Refs
-const fileViewer = ref<MaybeElement>();
-const sidebarModal = ref<InstanceType<typeof NewModal>>();
+const fileViewer = ref<MaybeElement>()
+const sidebarModal = ref<InstanceType<typeof NewModal>>()
 const createItemModal = ref<InstanceType<typeof FileCreateItemModal>>()
 const createZipModal = ref<InstanceType<typeof FileCreateZipModal>>()
 const renameItemModal = ref<InstanceType<typeof FileRenameItemModal>>()
@@ -365,8 +384,10 @@ const SIDEBAR_DEFAULT_WIDTH = 300
 
 const browserMinSize = computed(() => (props.constrainWidth ? 700 : 1200))
 
-const sidebarOpenSetting = useLocalStorage('file-layout-sidebar-open', false, { initOnMounted: true });
-const sidebarOpen = ref(sidebarOpenSetting.value);
+const sidebarOpenSetting = useLocalStorage('file-layout-sidebar-open', false, {
+	initOnMounted: true,
+})
+const sidebarOpen = ref(sidebarOpenSetting.value)
 const sidebarWidthSetting = useLocalStorage('file-layout-sidebar-width', SIDEBAR_DEFAULT_WIDTH, {
 	initOnMounted: true,
 })
@@ -393,8 +414,8 @@ useResizeObserver(mainColumn, (entries) => {
 	containerWidth.value = entries[0].contentRect.width
 })
 
-const smallMode = computed(() => shellWidth.value == null || shellWidth.value < 1100);
-const fullWidthSidebar = computed(() => shellWidth.value == null || shellWidth.value < 400);
+const smallMode = computed(() => shellWidth.value == null || shellWidth.value < 1100)
+const fullWidthSidebar = computed(() => shellWidth.value == null || shellWidth.value < 400)
 const showDockedSidebar = computed(() => !smallMode.value && sidebarOpen.value)
 
 const maxSidebarWidth = computed(() =>
@@ -443,13 +464,13 @@ function resetSidebarWidth() {
 	sidebarWidthSetting.value = SIDEBAR_DEFAULT_WIDTH
 }
 
-let pastInitialSetup = false;
+let pastInitialSetup = false
 
 watch(smallMode, (value) => {
 	if (pastInitialSetup) {
-		sidebarOpen.value = !value;
+		sidebarOpen.value = !value
 	} else {
-		pastInitialSetup = true;
+		pastInitialSetup = true
 	}
 })
 
@@ -505,7 +526,7 @@ async function handleRenameItem(newName: string) {
 		recordOperation({
 			type: 'rename',
 			prevFile: item,
-			newFile: newFile
+			newFile: newFile,
 		})
 	}
 }
@@ -517,7 +538,7 @@ async function handleMoveItem(destination: string) {
 
 	const dest = `${destination}/${item.name}`.replace('//', '/')
 
-	const newFile = await ctx.moveItem(item, dest);
+	const newFile = await ctx.moveItem(item, dest)
 	if (newFile != null) {
 		recordOperation({
 			type: 'move',
@@ -539,13 +560,13 @@ async function handleDirectMove(file: FileInfo, destination: string) {
 	if (isBusy.value) return
 	const dest = `${destination}/${file.name}`.replace('//', '/')
 
-	const newFile = await ctx.moveItem(file, dest);
+	const newFile = await ctx.moveItem(file, dest)
 
 	if (newFile != null) {
 		recordOperation({
 			type: 'move',
 			prevFile: file,
-			newFile: newFile
+			newFile: newFile,
 		})
 	}
 }
@@ -565,7 +586,7 @@ async function handleZip(item: FileInfo) {
 async function handleZipSelection(target: string) {
 	const parent = selectionParent.value
 	if (isBusy.value || !ctx.zipPaths || parent === null) return
-	const include = [...selectedItems.value.values()];
+	const include = [...selectedItems.value.values()]
 	deselectAll()
 	await ctx.zipPaths(include, parent, target)
 }
@@ -712,7 +733,7 @@ function handleItemPrefetch(item: Pick<FileItem, 'type' | 'path' | 'name'>) {
 }
 
 function handleHomePrefetch() {
-	handleItemPrefetch({ path: '/', type: 'directory', name: 'home'});
+	handleItemPrefetch({ path: '/', type: 'directory', name: 'home' })
 }
 
 function handleContextMenu(event: MouseEvent, options: ButtonMenuOption[]) {
@@ -735,8 +756,8 @@ provideFileBrowserUI({
 	activeLocation,
 	sidebarOpen: computed(() => sidebarOpen.value),
 	setSidebarOpen: (value) => {
-		sidebarOpen.value = value;
-		sidebarOpenSetting.value = value;
+		sidebarOpen.value = value
+		sidebarOpenSetting.value = value
 	},
 	containerWidth,
 
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts b/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
index 91d7303bd9a..407596a76bf 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
@@ -1,7 +1,7 @@
 import type { Component, ComputedRef, Ref, ShallowRef } from 'vue'
 
 import type { ButtonMenuOption } from '#ui/components'
-import type {FileInfo} from "#ui/layouts/shared/files-tab/providers/file-manager.ts";
+import type { FileInfo } from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
 import { createContext } from '#ui/providers/create-context'
 
 import type { FileTabs } from '../composables/file-tabs'
@@ -13,7 +13,6 @@ import type { FileItem, FileSortField } from '../types'
  */
 export interface FileEditorBridge {
 	hasUnsavedChanges: Ref<boolean> | ComputedRef<boolean>
-	isEditingImage: Ref<boolean> | ComputedRef<boolean>
 	isFindOpen: Ref<boolean> | ComputedRef<boolean>
 	saveFileContent: (exit?: boolean) => Promise<void>
 	revertChanges: () => void
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts b/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
index 3da3eef6027..455730fa6ab 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
@@ -3,15 +3,12 @@ import type { ComputedRef, Ref } from 'vue'
 
 import { createContext } from '#ui/providers/create-context'
 
-import type {
-	EditingFile,
-	ExtractDryRunResult,
-	FileItem,
-	FileOperation,
-	UploadState,
-} from '../types'
+import type { ExtractDryRunResult, FileItem, FileOperation, UploadState } from '../types'
 
-export type FileInfo<T extends FileTypes = FileTypes> = Pick<FileItem, "path"> & { name: string, type: T};
+export type FileInfo<T extends FileTypes = FileTypes> = Pick<FileItem, 'path'> & {
+	name: string
+	type: T
+}
 
 export interface FileItemResult<R, T extends FileTypes> extends FileInfo<T> {
 	data: ComputedRef<R>
@@ -19,22 +16,21 @@ export interface FileItemResult<R, T extends FileTypes> extends FileInfo<T> {
 	loadError: Ref<Error | null>
 }
 
-export interface FileQueryResult extends FileItemResult<any, FileTypes> {
+export interface FileQueryResult {
 	filesReadyPending: ComputedRef<boolean>
 }
 
-export interface DirectoryResult extends FileItemResult<FileItem[], 'directory'> {}
+export type DirectoryResult = FileItemResult<FileItem[], 'directory'>
 
-export interface FileResult extends FileItemResult<ArrayBuffer | null, 'file'> {}
+export type FileResult = FileItemResult<ArrayBuffer | null, 'file'>
 
-export type FileTypes = FileItem['type'];
+export type FileTypes = FileItem['type']
 
-export type FileItemResultFrom<T extends FileTypes> =
-	T extends 'directory'
-		? DirectoryResult
-		: T extends 'file'
-			? FileResult
-			: never
+export type FileItemResultFrom<T extends FileTypes> = T extends 'directory'
+	? DirectoryResult
+	: T extends 'file'
+		? FileResult
+		: never
 
 /**
  * Lazily loaded, cached directory listings used by the sidebar tree. Paths are absolute
@@ -68,7 +64,11 @@ export interface FileManagerContext {
 	downloadFile: (file: FileInfo) => Promise<void>
 	statFile?: (path: string) => Promise<Kyros.Files.v1.FileStatResponse>
 	zipFolder?: (file: FileInfo<'directory'>) => Promise<void>
-	zipPaths?: (files: FileInfo[], targetDirectory: FileInfo<'directory'>, archiveName: string) => Promise<void>
+	zipPaths?: (
+		files: FileInfo[],
+		targetDirectory: FileInfo<'directory'>,
+		archiveName: string,
+	) => Promise<void>
 
 	uploadFiles: (files: File[]) => void
 	cancelUpload?: () => void
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/index.ts b/packages/ui/src/layouts/shared/files-tab/providers/index.ts
index 960c6f5dbf5..002dc334ad0 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/index.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/index.ts
@@ -1,6 +1,2 @@
-export type {
-	DirectoryResult,
-	DirectoryTree,
-	FileManagerContext,
-} from './file-manager'
+export type { DirectoryResult, DirectoryTree, FileManagerContext } from './file-manager'
 export { injectFileManager, provideFileManager } from './file-manager'
diff --git a/packages/ui/src/layouts/shared/files-tab/types.ts b/packages/ui/src/layouts/shared/files-tab/types.ts
index 36907799196..9ebb2ea9a83 100644
--- a/packages/ui/src/layouts/shared/files-tab/types.ts
+++ b/packages/ui/src/layouts/shared/files-tab/types.ts
@@ -1,4 +1,4 @@
-import type {FileInfo} from "#ui/layouts/shared/files-tab/providers/file-manager.ts";
+import type { FileInfo } from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
 
 export interface FileItem {
 	name: string
diff --git a/packages/ui/src/layouts/shared/files-tab/utils.ts b/packages/ui/src/layouts/shared/files-tab/utils.ts
index 695b2a74b1a..8c0c1440a82 100644
--- a/packages/ui/src/layouts/shared/files-tab/utils.ts
+++ b/packages/ui/src/layouts/shared/files-tab/utils.ts
@@ -1,4 +1,4 @@
-import type {FileInfo} from "#ui/layouts/shared/files-tab/providers/file-manager.ts";
+import type { FileInfo } from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
 
 export function joinDisplayPath(basePath: string | undefined, itemPath: string) {
 	if (!basePath) return itemPath
@@ -11,18 +11,21 @@ export function joinDisplayPath(basePath: string | undefined, itemPath: string)
 }
 
 export function parentInfoFrom(target: string | FileInfo, end?: number) {
-	return infoFrom(parentDirectory(typeof target === 'string' ? target : target.path, end));
+	return infoFrom(parentDirectory(typeof target === 'string' ? target : target.path, end))
 }
 
-export function infoFrom<BL extends boolean = false>(target: string | FileInfo, isFile?: BL): FileInfo<BL extends true ? 'file' : 'directory'> {
-	const path = normalizeDirectoryPath(typeof target == 'string' ? target : target.path);
-	const pathParts = path.split('/');
-	const name = pathParts[pathParts.length - 1] ?? '/';
+export function infoFrom<BL extends boolean = false>(
+	target: string | FileInfo,
+	isFile?: BL,
+): FileInfo<BL extends true ? 'file' : 'directory'> {
+	const path = normalizeDirectoryPath(typeof target == 'string' ? target : target.path)
+	const pathParts = path.split('/')
+	const name = pathParts[pathParts.length - 1] ?? '/'
 	return {
-		type: typeof target != 'string' ? target.type : (isFile ? 'file' : 'directory'),
+		type: typeof target != 'string' ? target.type : isFile ? 'file' : 'directory',
 		path: path,
-		name: name
-	} as FileInfo<BL extends true ? 'file' : 'directory'>;
+		name: name,
+	} as FileInfo<BL extends true ? 'file' : 'directory'>
 }
 
 export function normalizeDirectoryPath(path: string) {
@@ -30,7 +33,11 @@ export function normalizeDirectoryPath(path: string) {
 }
 
 export function parentDirectory(path: string, end?: number) {
-	return `/${path.split('/').filter(Boolean).slice(0, end ?? -1).join('/')}`
+	return `/${path
+		.split('/')
+		.filter(Boolean)
+		.slice(0, end ?? -1)
+		.join('/')}`
 }
 
 export function isSameInfo(a: FileInfo, b: FileInfo) {
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
index 4f6e9e2afda..d42ab714205 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
@@ -1,36 +1,46 @@
 <script setup lang="ts">
-import type {Kyros} from '@modrinth/api-client'
-import {useMutation, useQuery, useQueryClient} from '@tanstack/vue-query'
+import type { Kyros } from '@modrinth/api-client'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import {
 	computed,
-	type ComputedRef, effectScope, markRaw, onMounted, onScopeDispose, type Ref, ref, watch
+	type ComputedRef,
+	effectScope,
+	markRaw,
+	onMounted,
+	onScopeDispose,
+	type Ref,
+	ref,
+	watch,
 } from 'vue'
-import {useRoute, useRouter} from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
-import {useReadyState} from '#ui/composables'
-import {useUploadSessionUpload} from '#ui/composables/hosting/kyros-session-upload'
-import {defineMessages, useVIntl} from '#ui/composables/i18n'
-import {useServerPermissions} from '#ui/composables/server-permissions'
-import {normalizeDirectoryPath, parentInfoFrom} from "#ui/layouts";
+import { useReadyState } from '#ui/composables'
+import { useUploadSessionUpload } from '#ui/composables/hosting/kyros-session-upload'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { useServerPermissions } from '#ui/composables/server-permissions'
+import { normalizeDirectoryPath, parentInfoFrom } from '#ui/layouts'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
 	injectNotificationManager,
 } from '#ui/providers'
-import {commonMessages} from '#ui/utils/common-messages'
+import { commonMessages } from '#ui/utils/common-messages'
 
 import FilePageLayout from '../../../shared/files-tab/layout.vue'
 import {
-type DirectoryResult, 	type DirectoryTree,
-type FileInfo, type FileItemResult,
-type FileItemResultFrom, type FileQueryResult, type FileResult,
-	type FileTypes, 	provideFileManager} from '../../../shared/files-tab/providers/file-manager'
-import type {FileItem} from '../../../shared/files-tab/types'
-import {
-	infoFromQuery, type QueryableFileTypes,
-	queryFilterFor, queryKeyFor
-} from "./utils";
+	type DirectoryResult,
+	type DirectoryTree,
+	type FileInfo,
+	type FileItemResult,
+	type FileItemResultFrom,
+	type FileQueryResult,
+	type FileResult,
+	type FileTypes,
+	provideFileManager,
+} from '../../../shared/files-tab/providers/file-manager'
+import type { FileItem } from '../../../shared/files-tab/types'
+import { infoFromQuery, type QueryableFileTypes, queryFilterFor, queryKeyFor } from './utils'
 
 const props = defineProps<{
 	showDebugInfo?: boolean
@@ -55,9 +65,9 @@ const fileUploadSession = useUploadSessionUpload({
 	uploadState,
 	cancelUpload: cancelUploadRef,
 })
-const {addNotification} = injectNotificationManager()
-const {formatMessage} = useVIntl()
-const {canWriteFiles, canUsePowerActions, permissionDeniedMessage} = useServerPermissions()
+const { addNotification } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+const { canWriteFiles, canUsePowerActions, permissionDeniedMessage } = useServerPermissions()
 
 const route = useRoute()
 const router = useRouter()
@@ -102,17 +112,17 @@ const busyWarning = computed(() =>
 
 // Path & navigation
 const currentPath = computed(() => (typeof route.query.path === 'string' ? route.query.path : '/'))
-const currentLocation = ref<FileInfo>(infoFromQuery(route));
+const currentLocation = ref<FileInfo>(infoFromQuery(route))
 
 function navigateTo(file: FileInfo) {
 	if (file.type == 'file') {
-		router.push({query: {...route.query, path: currentPath.value, editing: 'true'}})
+		router.push({ query: { ...route.query, path: currentPath.value, editing: 'true' } })
 	} else {
-		const {editing: _, ...query} = route.query;
-		router.push({query: {...query, path: file.path}})
+		const { editing: _, ...query } = route.query
+		router.push({ query: { ...query, path: file.path } })
 	}
 
-	currentLocation.value = file;
+	currentLocation.value = file
 }
 
 // TODO: MAYBE RESTRICT TO ONLY FILE EDITING?
@@ -120,46 +130,50 @@ function navigateTo(file: FileInfo) {
 watch(
 	() => route.query,
 	(newQuery, oldQuery) => {
-		const newInfo = infoFromQuery(newQuery);
-		const oldInfo = infoFromQuery(oldQuery);
+		const newInfo = infoFromQuery(newQuery)
+		const oldInfo = infoFromQuery(oldQuery)
 		if (newInfo.path != oldInfo.path) {
-			currentLocation.value = newInfo;
+			currentLocation.value = newInfo
 		}
 	},
-	{deep: true},
+	{ deep: true },
 )
 
 // Initialize editing from URL on mount
 function initializeLocation() {
-	currentLocation.value = infoFromQuery(route);
+	currentLocation.value = infoFromQuery(route)
 }
 
 function isVisibleFileItem(item: Kyros.Files.v0.DirectoryItem) {
 	return !item.path.split('/').includes('.modrinth-staged')
 }
 
-type FileCache = { hash: string, buffer: ArrayBuffer }
+type FileCache = { hash: string; buffer: ArrayBuffer }
 
 const fileQueryOptions: QueryOptions<'file', FileCache> = {
 	queryFn: async (file) => {
-		const buffer = await (await client.kyros.files_v0.downloadFile(file.path)).arrayBuffer();
+		const buffer = await (await client.kyros.files_v0.downloadFile(file.path)).arrayBuffer()
 
 		const hash = await sha512(buffer)
 
-		return { hash: hash, buffer: markRaw(buffer) } as FileCache;
+		return { hash: hash, buffer: markRaw(buffer) } as FileCache
 	},
 	structuralSharing: (oldData, newData) => {
 		if (!oldData) return newData
-		return (oldData.hash === newData.hash) ? oldData : newData;
+		return oldData.hash === newData.hash ? oldData : newData
 	},
-};
+}
 
 const directoryQueryOptions: QueryOptions<'directory', Kyros.Files.v0.DirectoryResponse> = {
 	queryFn: (file) => client.kyros.files_v0.listDirectory(file.path, 1, 2000),
 }
 
 function queryFileEntry(file: FileInfo<'file'>): FileResult & FileQueryResult {
-	return queryFile(file, (queryData) => computed(() => queryData.value?.buffer ?? null), fileQueryOptions);
+	return queryFile(
+		file,
+		(queryData) => computed(() => queryData.value?.buffer ?? null),
+		fileQueryOptions,
+	)
 }
 
 // TODO: PAGE SIZE IS LIKE 2000 BUT IN CASES WHERE SOMEONE SOME HOW HAS MORE WE MAY WANT TO
@@ -167,27 +181,36 @@ function queryFileEntry(file: FileInfo<'file'>): FileResult & FileQueryResult {
 function queryDirectoryEntries(file: FileInfo<'directory'>): DirectoryResult & FileQueryResult {
 	return queryFile(
 		file,
-		(queryData) => computed<FileItem[]>(() => (queryData.value?.items ?? []).filter(isVisibleFileItem)),
-		directoryQueryOptions);
+		(queryData) =>
+			computed<FileItem[]>(() => (queryData.value?.items ?? []).filter(isVisibleFileItem)),
+		directoryQueryOptions,
+	)
 }
 
 type QueryOptions<T extends QueryableFileTypes, Q> = {
-	queryFn: (file: FileInfo<T>) => Promise<Q>,
+	queryFn: (file: FileInfo<T>) => Promise<Q>
 	structuralSharing?: (oldData: Partial<Q> | undefined, newData: Partial<Q>) => Partial<Q>
 }
 
 function queryFile<T extends QueryableFileTypes, Q, R>(
 	fileInfo: FileInfo<T>,
 	func: (queryData: Ref<Q | undefined>) => ComputedRef<R>,
-	{ queryFn, structuralSharing }: QueryOptions<T, Q>
+	{ queryFn, structuralSharing }: QueryOptions<T, Q>,
 ): FileItemResult<R, T> & FileQueryResult {
-	const key = queryKeyFor(serverId, undefined, fileInfo);
+	const key = queryKeyFor(serverId, undefined, fileInfo)
 
-	const { data, isLoading, error: loadError } = useQuery(
+	const {
+		data,
+		isLoading,
+		error: loadError,
+	} = useQuery(
 		{
 			queryKey: key as readonly string[],
 			queryFn: () => queryFn(fileInfo),
-			structuralSharing: structuralSharing as any,
+			structuralSharing: structuralSharing as (
+				oldData: unknown | undefined,
+				newData: unknown,
+			) => unknown,
 			staleTime: 30_000,
 		},
 		queryClient,
@@ -197,16 +220,16 @@ function queryFile<T extends QueryableFileTypes, Q, R>(
 		...fileInfo,
 		data: func(data),
 		isLoading: isLoading,
-		filesReadyPending: useReadyState({isLoading, data}),
+		filesReadyPending: useReadyState({ isLoading, data }),
 		loadError: loadError,
 	}
 }
 
 async function sha512(buffer: ArrayBuffer) {
-	const hashBuffer = await crypto.subtle.digest('SHA-512', buffer);
+	const hashBuffer = await crypto.subtle.digest('SHA-512', buffer)
 	return Array.from(new Uint8Array(hashBuffer))
-		.map(b => b.toString(16).padStart(2, '0'))
-		.join('');
+		.map((b) => b.toString(16).padStart(2, '0'))
+		.join('')
 }
 
 function prefetchDirectory(file: FileInfo<'directory'>) {
@@ -217,18 +240,20 @@ function prefetchFileEntry(file: FileInfo<'file'>) {
 	prefetchFile(file, fileQueryOptions)
 }
 
-function prefetchFile<T extends QueryableFileTypes, Q, R>(
-	file: FileInfo<T>, {queryFn, structuralSharing}: QueryOptions<T, Q>
+function prefetchFile<T extends QueryableFileTypes, Q>(
+	file: FileInfo<T>,
+	{ queryFn, structuralSharing }: QueryOptions<T, Q>,
 ): void {
-	const key = queryKeyFor(serverId, undefined, file);
-	queryClient.prefetchQuery(
-		{
-			queryKey: key as readonly string[],
-			queryFn: () => queryFn(file),
-			structuralSharing: structuralSharing as any,
-			staleTime: 30_000,
-		}
-	)
+	const key = queryKeyFor(serverId, undefined, file)
+	queryClient.prefetchQuery({
+		queryKey: key as readonly string[],
+		queryFn: () => queryFn(file),
+		structuralSharing: structuralSharing as (
+			oldData: unknown | undefined,
+			newData: unknown,
+		) => unknown,
+		staleTime: 30_000,
+	})
 }
 
 function getQueryKey() {
@@ -238,24 +263,24 @@ function getQueryKey() {
 const isRefreshing = ref<boolean>(false)
 
 async function refreshList() {
-	isRefreshing.value = true;
-	await queryClient.invalidateQueries({queryKey: ['files', serverId]})
-	isRefreshing.value = false;
+	isRefreshing.value = true
+	await queryClient.invalidateQueries({ queryKey: ['files', serverId] })
+	isRefreshing.value = false
 }
 
 // Mutations
 const deleteMutation = useMutation({
-	mutationFn: async ({file, recursive}: { file: FileInfo; recursive: boolean }) =>
+	mutationFn: async ({ file, recursive }: { file: FileInfo; recursive: boolean }) =>
 		client.kyros.files_v0.deleteFileOrFolder(file.path, recursive),
-	onMutate: async ({file}) => {
+	onMutate: async ({ file }) => {
 		const queryKey = getQueryKey()
-		await queryClient.cancelQueries({queryKey})
+		await queryClient.cancelQueries({ queryKey })
 		const previous = queryClient.getQueryData(queryKey)
 		queryClient.setQueryData(queryKey, (old: Kyros.Files.v0.DirectoryResponse | undefined) => {
 			if (!old) return old
-			return {...old, items: old.items.filter((item) => item.path !== file.path)}
+			return { ...old, items: old.items.filter((item) => item.path !== file.path) }
 		})
-		return {previous}
+		return { previous }
 	},
 	onError: (err: Error, _vars, context) => {
 		queryClient.setQueryData(getQueryKey(), context?.previous)
@@ -273,23 +298,25 @@ const deleteMutation = useMutation({
 		})
 	},
 	onSettled: () => {
-		queryClient.invalidateQueries({queryKey: ['files', serverId]})
+		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
 	},
 })
 
 const renameMutation = useMutation({
-	mutationFn: async ({file, newName}: { file: FileInfo; newName: string }) => {
-		await client.kyros.files_v0.renameFileOrFolder(file.path, newName);
-		const parts = file.path.split('/');
+	mutationFn: async ({ file, newName }: { file: FileInfo; newName: string }) => {
+		await client.kyros.files_v0.renameFileOrFolder(file.path, newName)
+		const parts = file.path.split('/')
 		return {
 			type: file.type,
 			name: newName,
-			path: normalizeDirectoryPath(parts.length > 0 ? parts.slice(0, parts.length - 1).join('/') : newName)
+			path: normalizeDirectoryPath(
+				parts.length > 0 ? parts.slice(0, parts.length - 1).join('/') : newName,
+			),
 		}
 	},
-	onMutate: async ({file, newName}) => {
+	onMutate: async ({ file, newName }) => {
 		const queryKey = getQueryKey()
-		await queryClient.cancelQueries({queryKey})
+		await queryClient.cancelQueries({ queryKey })
 		const previous = queryClient.getQueryData(queryKey)
 		queryClient.setQueryData(queryKey, (old: Kyros.Files.v0.DirectoryResponse | undefined) => {
 			if (!old) return old
@@ -298,15 +325,15 @@ const renameMutation = useMutation({
 				items: old.items.map((item) =>
 					item.path === file.path
 						? {
-							...item,
-							name: newName,
-							path: item.path.replace(/[^/]+$/, newName),
-						}
+								...item,
+								name: newName,
+								path: item.path.replace(/[^/]+$/, newName),
+							}
 						: item,
 				),
 			}
 		})
-		return {previous}
+		return { previous }
 	},
 	onError: (err: Error, _vars, context) => {
 		queryClient.setQueryData(getQueryKey(), context?.previous)
@@ -316,32 +343,32 @@ const renameMutation = useMutation({
 			type: 'error',
 		})
 	},
-	onSuccess: (_, {newName}) => {
-		addNotification({title: 'Renamed', text: `Renamed to ${newName}`, type: 'success'})
+	onSuccess: (_, { newName }) => {
+		addNotification({ title: 'Renamed', text: `Renamed to ${newName}`, type: 'success' })
 	},
 	onSettled: () => {
-		queryClient.invalidateQueries({queryKey: ['files', serverId]})
+		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
 	},
 })
 
 const moveMutation = useMutation({
-	mutationFn: async ({source, destination}: { source: FileInfo; destination: string }) => {
-		await client.kyros.files_v0.moveFileOrFolder(source.path, destination);
+	mutationFn: async ({ source, destination }: { source: FileInfo; destination: string }) => {
+		await client.kyros.files_v0.moveFileOrFolder(source.path, destination)
 		return {
 			name: source.name,
 			type: source.type,
-			path: normalizeDirectoryPath(destination + "/" + source.name)
+			path: normalizeDirectoryPath(destination + '/' + source.name),
 		}
 	},
-	onMutate: async ({source}) => {
+	onMutate: async ({ source }) => {
 		const queryKey = getQueryKey()
-		await queryClient.cancelQueries({queryKey})
+		await queryClient.cancelQueries({ queryKey })
 		const previous = queryClient.getQueryData(queryKey)
 		queryClient.setQueryData(queryKey, (old: Kyros.Files.v0.DirectoryResponse | undefined) => {
 			if (!old) return old
-			return {...old, items: old.items.filter((item) => item.path !== source.path)}
+			return { ...old, items: old.items.filter((item) => item.path !== source.path) }
 		})
-		return {previous}
+		return { previous }
 	},
 	onError: (err: Error, _vars, context) => {
 		queryClient.setQueryData(getQueryKey(), context?.previous)
@@ -351,20 +378,20 @@ const moveMutation = useMutation({
 			type: 'error',
 		})
 	},
-	onSuccess: (_, {destination}) => {
-		addNotification({title: 'Moved', text: `Moved to ${destination}`, type: 'success'})
+	onSuccess: (_, { destination }) => {
+		addNotification({ title: 'Moved', text: `Moved to ${destination}`, type: 'success' })
 	},
 	onSettled: () => {
-		queryClient.invalidateQueries({queryKey: ['files', serverId]})
+		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
 	},
 })
 
 const createMutation = useMutation({
-	mutationFn: ({path, type}: { path: string; type: 'file' | 'directory' }) =>
+	mutationFn: ({ path, type }: { path: string; type: 'file' | 'directory' }) =>
 		client.kyros.files_v0.createFileOrFolder(path, type),
-	onMutate: async ({path, type}) => {
+	onMutate: async ({ path, type }) => {
 		const queryKey = getQueryKey()
-		await queryClient.cancelQueries({queryKey})
+		await queryClient.cancelQueries({ queryKey })
 		const previous = queryClient.getQueryData(queryKey)
 		const name = path.split('/').pop()!
 		const now = Math.floor(Date.now() / 1000)
@@ -374,13 +401,13 @@ const createMutation = useMutation({
 			type,
 			modified: now,
 			created: now,
-			...(type === 'directory' ? {count: 0} : {size: 0}),
+			...(type === 'directory' ? { count: 0 } : { size: 0 }),
 		}
 		queryClient.setQueryData(queryKey, (old: Kyros.Files.v0.DirectoryResponse | undefined) => {
 			if (!old) return old
-			return {...old, items: [newItem, ...old.items]}
+			return { ...old, items: [newItem, ...old.items] }
 		})
-		return {previous}
+		return { previous }
 	},
 	onError: (err: Error, _vars, context) => {
 		queryClient.setQueryData(getQueryKey(), context?.previous)
@@ -390,7 +417,7 @@ const createMutation = useMutation({
 			type: 'error',
 		})
 	},
-	onSuccess: (_, {path, type}) => {
+	onSuccess: (_, { path, type }) => {
 		const name = path.split('/').pop()
 		addNotification({
 			title: `${type === 'directory' ? 'Folder' : 'File'} created`,
@@ -399,7 +426,7 @@ const createMutation = useMutation({
 		})
 	},
 	onSettled: () => {
-		queryClient.invalidateQueries({queryKey: ['files', serverId]})
+		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
 	},
 })
 
@@ -414,9 +441,9 @@ async function extractFile(path: string, override: boolean, dry: boolean) {
 }
 
 async function writeFile(file: FileInfo, buffer: ArrayBuffer): Promise<void> {
-	if (fileWriteDisabled.value || file.type != "file") return
+	if (fileWriteDisabled.value || file.type != 'file') return
 	await client.kyros.files_v0.updateFile(file.path, new Blob([buffer]))
-	await queryClient.invalidateQueries({queryKey: queryFilterFor(serverId, undefined, 'file')})
+	await queryClient.invalidateQueries({ queryKey: queryFilterFor(serverId, undefined, 'file') })
 	// TODO: POKE CAL ABOUT THIS
 	//queryClient.invalidateQueries({queryKey: ['servers', 'detail', serverId]})
 }
@@ -425,7 +452,7 @@ async function downloadFile(file: FileInfo): Promise<void> {
 	try {
 		const fileData = await client.kyros.files_v0.downloadFile(file.path)
 		if (fileData) {
-			saveBlob(fileData, file.name ?? "modrinth-file-download")
+			saveBlob(fileData, file.name ?? 'modrinth-file-download')
 		}
 	} catch {
 		addNotification({
@@ -446,7 +473,7 @@ function saveBlob(blob: Blob, fileName: string) {
 
 async function statFile(path: string): Promise<Kyros.Files.v1.FileStatResponse> {
 	if (!worldId.value) throw new Error('No active world')
-	return client.kyros.files_v1.stat(worldId.value, {path})
+	return client.kyros.files_v1.stat(worldId.value, { path })
 }
 
 async function createZip(data: Kyros.Files.v1.ZipRequest, destination?: string): Promise<void> {
@@ -468,23 +495,23 @@ async function createZip(data: Kyros.Files.v1.ZipRequest, destination?: string):
 		})
 	}
 	zippingFolder.value = true
-	updateOperation({progress: 0})
+	updateOperation({ progress: 0 })
 	try {
 		await client.kyros.files_v1.createZip(worldId.value, data, (record) => {
 			updateOperation(record, record.done ? 'done' : 'ongoing')
 		})
-		updateOperation({progress: 100}, 'done')
+		updateOperation({ progress: 100 }, 'done')
 		addNotification({
 			title: formatMessage(messages.zipCreated),
 			text: destination
-				? formatMessage(messages.zipCreatedDescription, {destination})
+				? formatMessage(messages.zipCreatedDescription, { destination })
 				: undefined,
 			type: 'success',
 		})
 		await refreshList()
 	} catch (error) {
 		updateOperation(
-			{progress: 0, error: error instanceof Error ? error.message : undefined},
+			{ progress: 0, error: error instanceof Error ? error.message : undefined },
 			'failure-error',
 		)
 	} finally {
@@ -493,13 +520,22 @@ async function createZip(data: Kyros.Files.v1.ZipRequest, destination?: string):
 }
 
 async function zipFolder(file: FileInfo<'directory'>): Promise<void> {
-	await createZip({target_type: 'Directory', path: file.path})
+	await createZip({ target_type: 'Directory', path: file.path })
 }
 
-async function zipPaths(files: FileInfo[], targetDirectory: FileInfo<'directory'>, archiveName: string): Promise<void> {
-	const targetPath = targetDirectory.path;
+async function zipPaths(
+	files: FileInfo[],
+	targetDirectory: FileInfo<'directory'>,
+	archiveName: string,
+): Promise<void> {
+	const targetPath = targetDirectory.path
 	await createZip(
-		{target_type: 'ManyPaths', parent: targetPath, include: files.map((file) => file.path), target: archiveName},
+		{
+			target_type: 'ManyPaths',
+			parent: targetPath,
+			include: files.map((file) => file.path),
+			target: archiveName,
+		},
 		`${targetPath}/${archiveName}`.replace('//', '/'),
 	)
 }
@@ -550,7 +586,7 @@ function cancelUpload() {
 	fileUploadSession.cancelUpload()
 }
 
-const fileQueries = new Map<string, FileItemResultFrom<any> & FileQueryResult>()
+const fileQueries = new Map<string, FileItemResultFrom<'file' | 'directory'> & FileQueryResult>()
 const expandedDirectories: Ref<string[]> = ref([])
 
 /** Owns the lazily created directory queries so they're disposed with this page, wherever they were first requested from. */
@@ -558,8 +594,8 @@ const fileSystemScope = effectScope()
 onScopeDispose(() => fileSystemScope.stop())
 
 const directoryTree = {
-	prefetch: <T extends FileTypes>(info : FileInfo<T>) => {
-		if (info.type == "directory") {
+	prefetch: <T extends FileTypes>(info: FileInfo<T>) => {
+		if (info.type == 'directory') {
 			if (!fileQueries.has(info.path)) {
 				prefetchDirectory(info as FileInfo<'directory'>)
 			}
@@ -567,21 +603,23 @@ const directoryTree = {
 			prefetchFileEntry(info as FileInfo<'file'>)
 		}
 	},
-	get: <T extends FileTypes>(info : FileInfo<T>): FileItemResultFrom<T> & FileQueryResult => {
-		const type = info.type;
+	get: <T extends FileTypes>(info: FileInfo<T>): FileItemResultFrom<T> & FileQueryResult => {
+		const type = info.type
 		if (type != 'directory' || type != 'file') {
 			let query = fileQueries.get(info.path)
 			if (query == null) {
 				if (type == 'directory') {
 					query = fileSystemScope.run(() => queryDirectoryEntries(info as FileInfo<'directory'>))!
 				} else {
-					query = fileSystemScope.run(() => queryFileEntry(info as FileInfo<'file'>))!;
+					query = fileSystemScope.run(() => queryFileEntry(info as FileInfo<'file'>))!
 				}
 				fileQueries.set(query.path, query)
 			}
-			return query as FileItemResultFrom<T> & FileQueryResult;
+			return query as FileItemResultFrom<T> & FileQueryResult
 		} else {
-			throw new Error(`Unable to handle getting query results for given type '${info.type as any}'`)
+			throw new Error(
+				`Unable to handle getting query results for given type '${info.type as unknown}'`,
+			)
 		}
 	},
 	expandedEntries: expandedDirectories,
@@ -594,33 +632,33 @@ provideFileManager({
 	error: computed(() => directoryTree.get(currentLocation.value).loadError.value ?? null),
 	currentFile: computed(() => currentLocation.value),
 	currentDirectory: computed(() => {
-		const location = currentLocation.value;
-		return (location.type != 'file')
-			? location as FileInfo<'directory'>
-			: parentInfoFrom(location.path);
+		const location = currentLocation.value
+		return location.type != 'file'
+			? (location as FileInfo<'directory'>)
+			: parentInfoFrom(location.path)
 	}),
 	navigateTo,
 	createItem: async (name, type) => {
-		if (fileWriteDisabled.value) return null;
+		if (fileWriteDisabled.value) return null
 		const path = `${currentPath.value}/${name}`.replace('//', '/')
-		await createMutation.mutateAsync({path, type});
+		await createMutation.mutateAsync({ path, type })
 		return {
 			name: name,
 			path: path,
-			type: type
+			type: type,
 		} as FileInfo
 	},
 	renameItem: async (file, newName) => {
-		if (fileWriteDisabled.value) return null;
-		return await renameMutation.mutateAsync({file, newName})
+		if (fileWriteDisabled.value) return null
+		return await renameMutation.mutateAsync({ file, newName })
 	},
 	moveItem: async (source, destination) => {
-		if (fileWriteDisabled.value) return null;
-		return await moveMutation.mutateAsync({source, destination})
+		if (fileWriteDisabled.value) return null
+		return await moveMutation.mutateAsync({ source, destination })
 	},
 	deleteItem: async (file, recursive) => {
 		if (fileWriteDisabled.value) return
-		await deleteMutation.mutateAsync({file, recursive})
+		await deleteMutation.mutateAsync({ file, recursive })
 	},
 	writeFile,
 	downloadFile,
@@ -652,7 +690,7 @@ watch(
 	(pending) => {
 		if (!pending) initialLoadPending.value = false
 	},
-	{immediate: true},
+	{ immediate: true },
 )
 </script>
 
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index 58604d6eab2..c512c39e7e7 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -237,14 +237,14 @@
 						:style="{ '--si': 1 }"
 					/>
 					<IconButton
-v-if="allowConstrainWidthToggle"
+						v-if="allowConstrainWidthToggle"
 						v-tooltip="constrainWidth ? 'Expand View' : 'Collapse View'"
 						size="md"
 						:label="constrainWidth ? 'Expand View' : 'Collapse View'"
 						native-type="button"
 						class="ml-2"
 						:style="{ '--si': 1 }"
-						@click="() => constrainWidth = !constrainWidth"
+						@click="() => (constrainWidth = !constrainWidth)"
 					>
 						<ExpandIcon v-if="constrainWidth" />
 						<CollapseIcon v-else />
@@ -288,7 +288,11 @@ v-if="allowConstrainWidthToggle"
 						class="mb-4 shrink-0"
 						@installation-retry="handleInstallationRetry"
 					/>
-					<slot :on-reinstall="onReinstall" :on-reinstall-failed="onReinstallFailed" :constrain-width="constrainWidth"/>
+					<slot
+						:on-reinstall="onReinstall"
+						:on-reinstall-failed="onReinstallFailed"
+						:constrain-width="constrainWidth"
+					/>
 				</div>
 			</template>
 		</template>
@@ -342,7 +346,7 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import {useLocalStorage, useResizeObserver,useStorage} from '@vueuse/core'
+import { useLocalStorage, useResizeObserver, useStorage } from '@vueuse/core'
 import DOMPurify from 'dompurify'
 import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
@@ -483,13 +487,15 @@ const DISABLE_LOADING_ANIM = true
 const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 const serverDataContainer = ref<InstanceType<typeof HTMLDivElement>>()
-const allowConstrainWidthToggle = ref<boolean>(false);
+const allowConstrainWidthToggle = ref<boolean>(false)
 useResizeObserver(serverDataContainer, (entries) => {
 	const entry = entries[0]
 	allowConstrainWidthToggle.value = entry.contentRect.width > 1200
 })
-const constrainWidth = useLocalStorage('server-layout-constrained-width', props.constrainWidth, { initOnMounted: true })
-const centerEntries = computed(() => props.centerEntries);
+const constrainWidth = useLocalStorage('server-layout-constrained-width', props.constrainWidth, {
+	initOnMounted: true,
+})
+const centerEntries = computed(() => props.centerEntries)
 const containedLayout = computed(() => props.layoutMode === 'contained')
 const isNuxt = computed(() => client instanceof NuxtModrinthClient)
 const queryClient = useQueryClient()
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/utils.ts b/packages/ui/src/layouts/wrapped/hosting/manage/utils.ts
index f0c926c28cd..7c2e5fe2786 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/utils.ts
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/utils.ts
@@ -1,34 +1,61 @@
-import type {LocationQuery, RouteLocationNormalizedLoadedGeneric} from "vue-router";
+import type { LocationQuery, RouteLocationNormalizedLoadedGeneric } from 'vue-router'
 
-import type {FileInfo} from "#ui/layouts/shared/files-tab/providers/file-manager.ts";
-import {infoFrom} from "#ui/layouts/shared/files-tab/utils.ts";
+import type { FileInfo } from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
+import { infoFrom } from '#ui/layouts/shared/files-tab/utils.ts'
 
 export type FileTypeToQueryStart = {
-	'file': 'file-content',
-	'directory': 'files'
-};
+	file: 'file-content'
+	directory: 'files'
+}
 
-export type QueryableFileTypes = keyof FileTypeToQueryStart;
+export type QueryableFileTypes = keyof FileTypeToQueryStart
 
 type FileQueryKey<T extends QueryableFileTypes> =
-	readonly [FileTypeToQueryStart[T], serverId: string, path: string]
-	| readonly [FileTypeToQueryStart[T], serverId: string, worldId: string, path: string];
-
-type FileQueryFilter<T extends QueryableFileTypes> = FileQueryKey<T> |
-	(readonly [FileTypeToQueryStart[T], serverId: string]
-		| readonly [FileTypeToQueryStart[T], serverId: string, worldId: string]);
-
-export function queryFilterFor<T extends QueryableFileTypes>(serverId: string, worldId: string | undefined | null, type: T, path?: string): FileQueryFilter<T> {
-	const rootQueryPart = (type == "file" ? 'file-content' : 'files') as FileTypeToQueryStart[T];
-	return [rootQueryPart, serverId, ...(worldId ? [worldId] as const: [] as const), ...(path ? [path] as const: [] as const)] as FileQueryKey<T>
+	| readonly [FileTypeToQueryStart[T], serverId: string, path: string]
+	| readonly [FileTypeToQueryStart[T], serverId: string, worldId: string, path: string]
+
+type FileQueryFilter<T extends QueryableFileTypes> =
+	| FileQueryKey<T>
+	| (
+			| readonly [FileTypeToQueryStart[T], serverId: string]
+			| readonly [FileTypeToQueryStart[T], serverId: string, worldId: string]
+	  )
+
+export function queryFilterFor<T extends QueryableFileTypes>(
+	serverId: string,
+	worldId: string | undefined | null,
+	type: T,
+	path?: string,
+): FileQueryFilter<T> {
+	const rootQueryPart = (type == 'file' ? 'file-content' : 'files') as FileTypeToQueryStart[T]
+	return [
+		rootQueryPart,
+		serverId,
+		...(worldId ? ([worldId] as const) : ([] as const)),
+		...(path ? ([path] as const) : ([] as const)),
+	] as FileQueryKey<T>
 }
 
-export function queryKeyFor<T extends QueryableFileTypes>(serverId: string, worldId: string | undefined | null, info: FileInfo<T>): FileQueryKey<T> {
-	const rootQueryPart = (info.type == "file" ? 'file-content' : 'files') as FileTypeToQueryStart[T];
-	return [rootQueryPart, serverId, ...(worldId ? [worldId] as const: [] as const), info.path] as FileQueryKey<T>
+export function queryKeyFor<T extends QueryableFileTypes>(
+	serverId: string,
+	worldId: string | undefined | null,
+	info: FileInfo<T>,
+): FileQueryKey<T> {
+	const rootQueryPart = (info.type == 'file' ? 'file-content' : 'files') as FileTypeToQueryStart[T]
+	return [
+		rootQueryPart,
+		serverId,
+		...(worldId ? ([worldId] as const) : ([] as const)),
+		info.path,
+	] as FileQueryKey<T>
 }
 
-export function infoFromQuery(value: LocationQuery | RouteLocationNormalizedLoadedGeneric): FileInfo {
-	const query = (value as Partial<RouteLocationNormalizedLoadedGeneric>).name != null ? value.query as LocationQuery : value as LocationQuery;
+export function infoFromQuery(
+	value: LocationQuery | RouteLocationNormalizedLoadedGeneric,
+): FileInfo {
+	const query =
+		(value as Partial<RouteLocationNormalizedLoadedGeneric>).name != null
+			? (value.query as LocationQuery)
+			: (value as LocationQuery)
 	return infoFrom(query.path === 'string' ? query.path : '/', query.editing === 'true')
 }
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index ee1747792de..b668eba154d 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -1637,9 +1637,15 @@
   "files.navbar.breadcrumb-navigation": {
     "defaultMessage": "Breadcrumb navigation"
   },
+  "files.navbar.collapse": {
+    "defaultMessage": "Collapse"
+  },
   "files.navbar.create-new": {
     "defaultMessage": "Create new..."
   },
+  "files.navbar.expand": {
+    "defaultMessage": "Expand"
+  },
   "files.navbar.file-navigation": {
     "defaultMessage": "File navigation"
   },
@@ -1730,15 +1736,30 @@
   "files.row.parent-folder": {
     "defaultMessage": "Parent folder"
   },
+  "files.row.upload-or-create": {
+    "defaultMessage": "New Entry"
+  },
+  "files.table-header.columns": {
+    "defaultMessage": "Columns"
+  },
   "files.table-header.created": {
     "defaultMessage": "Created"
   },
+  "files.table-header.details": {
+    "defaultMessage": "Details"
+  },
+  "files.table-header.items": {
+    "defaultMessage": "Items"
+  },
   "files.table-header.modified": {
     "defaultMessage": "Modified"
   },
   "files.table-header.name": {
     "defaultMessage": "Name"
   },
+  "files.table-header.show-details": {
+    "defaultMessage": "Show details"
+  },
   "files.table-header.size": {
     "defaultMessage": "Size"
   },
@@ -2774,6 +2795,9 @@
   "label.select-all": {
     "defaultMessage": "Select all"
   },
+  "label.select-entry": {
+    "defaultMessage": "Select Entry"
+  },
   "label.selected": {
     "defaultMessage": "Selected"
   },
diff --git a/packages/ui/src/providers/app-root.ts b/packages/ui/src/providers/app-root.ts
index 5d20ed124f8..5cb4b6f37d3 100644
--- a/packages/ui/src/providers/app-root.ts
+++ b/packages/ui/src/providers/app-root.ts
@@ -1,9 +1,7 @@
-import type {MaybeElement} from "@vueuse/core";
-import type {ComputedRef} from "vue";
+import type { ComputedRef } from 'vue'
 
 import { createContext } from './create-context'
 
-export const [injectAppRoot, provideAppRoot] = createContext<{root: ComputedRef<MaybeElement>}>(
-	'root',
-	'appRoot',
-)
+export const [injectAppRoot, provideAppRoot] = createContext<{
+	root: ComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>
+}>('root', 'appRoot')
diff --git a/packages/ui/src/providers/tooltip.ts b/packages/ui/src/providers/tooltip.ts
index 4bbc4b41a7c..f7a7b1cc349 100644
--- a/packages/ui/src/providers/tooltip.ts
+++ b/packages/ui/src/providers/tooltip.ts
@@ -183,16 +183,16 @@ function isFocusVisible(el: HTMLElement) {
 	return active.matches(':focus-visible')
 }
 
-let showTimeoutData: { id: TimeoutId | undefined, el: HTMLElement } | undefined = undefined;
+let showTimeoutData: { id: TimeoutId | undefined; el: HTMLElement } | undefined = undefined
 
 export function tooltipEnter(el: HTMLElement, timeout?: number): void {
 	if (timeout != undefined) {
 		// TODO: SHOULD ATTEMPT TO HIDE ANY PREVIOUS CALLS RIGHT AWAY?
 		const timeoutId = setTimeout(() => {
 			if (showTimeoutData) tooltipEnterBase(showTimeoutData.el)
-		}, timeout);
-		if (showTimeoutData) clearTimeout(showTimeoutData.id);
-		if (hideTimeoutData?.el === el) clearTimeout(hideTimeoutData.id);
+		}, timeout)
+		if (showTimeoutData) clearTimeout(showTimeoutData.id)
+		if (hideTimeoutData?.el === el) clearTimeout(hideTimeoutData.id)
 
 		showTimeoutData = { id: timeoutId, el: el }
 	} else {
@@ -204,19 +204,19 @@ export function tooltipEnterBase(el: HTMLElement) {
 	if (!hasTooltipContent(el)) {
 		return
 	}
-	closeWaitingTimeout();
+	closeWaitingTimeout()
 	hovered = el
 	show(false)
 }
 
-type TimeoutId = ReturnType<typeof setTimeout>;
+type TimeoutId = ReturnType<typeof setTimeout>
 
-let hideTimeoutData: { id: TimeoutId | undefined, el: HTMLElement } | undefined = undefined;
+let hideTimeoutData: { id: TimeoutId | undefined; el: HTMLElement } | undefined = undefined
 
 export function preventTooltipClosure(el: HTMLElement) {
-	if (hideTimeoutData?.el !== el) return;
-	clearTimeout(hideTimeoutData.id);
-	hideTimeoutData = undefined;
+	if (hideTimeoutData?.el !== el) return
+	clearTimeout(hideTimeoutData.id)
+	hideTimeoutData = undefined
 }
 
 export function tooltipLeave(el: HTMLElement, timeout?: number): void {
@@ -224,9 +224,9 @@ export function tooltipLeave(el: HTMLElement, timeout?: number): void {
 		// TODO: SHOULD ATTEMPT TO HIDE ANY PREVIOUS CALLS RIGHT AWAY?
 		const timeoutId = setTimeout(() => {
 			if (hideTimeoutData) tooltipLeaveBase(hideTimeoutData.el)
-		}, timeout);
-		if (hideTimeoutData?.el === el) clearTimeout(hideTimeoutData.id);
-		if (showTimeoutData?.el === el) clearTimeout(showTimeoutData.id);
+		}, timeout)
+		if (hideTimeoutData?.el === el) clearTimeout(hideTimeoutData.id)
+		if (showTimeoutData?.el === el) clearTimeout(showTimeoutData.id)
 
 		hideTimeoutData = { id: timeoutId, el: el }
 	} else {
@@ -236,9 +236,9 @@ export function tooltipLeave(el: HTMLElement, timeout?: number): void {
 
 function closeWaitingTimeout() {
 	if (hideTimeoutData) {
-		clearTimeout(hideTimeoutData.id);
-		tooltipLeaveBase(hideTimeoutData.el);
-		hideTimeoutData = undefined;
+		clearTimeout(hideTimeoutData.id)
+		tooltipLeaveBase(hideTimeoutData.el)
+		hideTimeoutData = undefined
 	}
 }
 
@@ -256,7 +256,7 @@ export function tooltipFocusIn(el: HTMLElement) {
 	if (!isFocusVisible(el) || !hasTooltipContent(el)) {
 		return
 	}
-	closeWaitingTimeout();
+	closeWaitingTimeout()
 	focused = el
 	show(true)
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9ba2219632c..2f04f4eaa2b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -196,7 +196,7 @@ importers:
     devDependencies:
       '@eslint/compat':
         specifier: ^1.1.1
-        version: 1.4.1(eslint@9.39.2(jiti@2.6.1))
+        version: 1.4.1(eslint@9.39.2(jiti@1.21.7))
       '@formatjs/cli':
         specifier: ^6.2.12
         version: 6.12.2(@vue/compiler-core@3.5.27)(vue@3.5.27(typescript@5.9.3))
@@ -205,22 +205,22 @@ importers:
         version: link:../../packages/tooling-config
       '@nuxt/eslint-config':
         specifier: ^0.5.6
-        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
       '@taijased/vue-render-tracker':
         specifier: ^1.0.7
         version: 1.0.7(vue@3.5.27(typescript@5.9.3))
       '@vitejs/plugin-vue':
         specifier: ^6.0.3
-        version: 6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
+        version: 6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.24(postcss@8.5.6)
       eslint:
         specifier: ^9.9.1
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.2(jiti@1.21.7)
       eslint-plugin-turbo:
         specifier: ^2.5.4
-        version: 2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2)
+        version: 2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2)
       postcss:
         specifier: ^8.4.39
         version: 8.5.6
@@ -238,7 +238,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^8.0.0
-        version: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+        version: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue-component-type-helpers:
         specifier: ^3.1.8
         version: 3.2.4
@@ -310,15 +310,6 @@ importers:
       '@modrinth/utils':
         specifier: workspace:*
         version: link:../../packages/utils
-      '@run-slicer/cfr':
-        specifier: 0.1.8-0.152
-        version: 0.1.8-0.152
-      '@run-slicer/procyon':
-        specifier: 0.1.2-0.6.0
-        version: 0.1.2-0.6.0
-      '@run-slicer/vf':
-        specifier: 0.6.4-1.12.0
-        version: 0.6.4-1.12.0
       '@sentry/nuxt':
         specifier: ^10.33.0
         version: 10.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.6)(@types/node@24.12.2)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(rollup@4.57.1)(vue@3.5.27(typescript@5.9.3))
@@ -358,9 +349,6 @@ importers:
       dompurify:
         specifier: ^3.1.7
         version: 3.3.1
-      file-type:
-        specifier: ^22.1.0
-        version: 22.1.0
       fuse.js:
         specifier: ^6.6.2
         version: 6.6.2
@@ -382,9 +370,6 @@ importers:
       jszip:
         specifier: ^3.10.1
         version: 3.10.1
-      krakatau-web:
-        specifier: 1.1.0-beta
-        version: 1.1.0-beta
       lru-cache:
         specifier: ^11.2.4
         version: 11.2.5
@@ -702,15 +687,6 @@ importers:
       '@modrinth/utils':
         specifier: workspace:*
         version: link:../utils
-      '@run-slicer/cfr':
-        specifier: 0.1.8-0.152
-        version: 0.1.8-0.152
-      '@run-slicer/procyon':
-        specifier: 0.1.2-0.6.0
-        version: 0.1.2-0.6.0
-      '@run-slicer/vf':
-        specifier: 0.6.4-1.12.0
-        version: 0.6.4-1.12.0
       '@tanstack/vue-query':
         specifier: 5.101.4
         version: 5.101.4(vue@3.5.27(typescript@5.9.3))
@@ -747,9 +723,6 @@ importers:
       '@xterm/xterm':
         specifier: ^6.0.0
         version: 6.0.0
-      '@zip.js/zip.js':
-        specifier: ^2.8.34
-        version: 2.8.34
       ace-builds:
         specifier: ^1.43.5
         version: 1.43.6
@@ -777,9 +750,6 @@ importers:
       fabric:
         specifier: ^7.4.0
         version: 7.4.0
-      file-type:
-        specifier: ^22.1.0
-        version: 22.1.0
       flatpickr:
         specifier: ^4.6.13
         version: 4.6.13
@@ -798,18 +768,12 @@ importers:
       jszip:
         specifier: ^3.10.1
         version: 3.10.1
-      krakatau-web:
-        specifier: 1.1.0-beta
-        version: 1.1.0-beta
       lru-cache:
         specifier: ^11.2.4
         version: 11.2.5
       markdown-it:
         specifier: ^13.0.2
         version: 13.0.2
-      mime:
-        specifier: ^4.1.0
-        version: 4.1.0
       motion-v:
         specifier: ^2.2.1
         version: 2.2.1(@vueuse/core@11.3.0(vue@3.5.27(typescript@5.9.3)))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vue@3.5.27(typescript@5.9.3))
@@ -822,9 +786,6 @@ importers:
       qrcode.vue:
         specifier: ^3.4.1
         version: 3.8.0(vue@3.5.27(typescript@5.9.3))
-      smol-toml:
-        specifier: ^1.8.0
-        version: 1.8.0
       three:
         specifier: ^0.172.0
         version: 0.172.0
@@ -876,7 +837,7 @@ importers:
         version: 5.2.4(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))(vue@3.5.27(typescript@5.9.3))
       eslint-plugin-storybook:
         specifier: ^10.1.10
-        version: 10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.9.3)
+        version: 10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.9.3)
       storybook:
         specifier: ^10.1.10
         version: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -1172,9 +1133,6 @@ packages:
       commander:
         optional: true
 
-  '@borewit/text-codec@0.2.2':
-    resolution: {integrity: sha512-DDaRehssg1aNrH4+2hnj1B7vnUGEjU6OIlyRdkMd0aUdIUvKXrJfXsy8LVtXAy7DRvYVluWbMspsRhz2lcW0mQ==}
-
   '@capsizecss/unpack@4.0.0':
     resolution: {integrity: sha512-VERIM64vtTP1C4mxQ5thVT9fK0apjPFobqybMtA1UdUujWka24ERHbRHFGmpbbhp73MhV+KSsHQH9C6uOTdEQA==}
     engines: {node: '>=18'}
@@ -4060,15 +4018,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@run-slicer/cfr@0.1.8-0.152':
-    resolution: {integrity: sha512-FN5I41CF0QcscV5HCcbq5iJHqIueNtROvLtfXohNt9pNJUxo2WFncg0a7jPinRjBi7VgNxjJmWE7sP++vYVFRw==}
-
-  '@run-slicer/procyon@0.1.2-0.6.0':
-    resolution: {integrity: sha512-xPra0FuATHnjLYLXFUlmRYkfmIukCrl5Zv6iM8ajSTYFDgK85HVNpBAo23NQbp+cMU6QpvOEviwE8nRwGuS07Q==}
-
-  '@run-slicer/vf@0.6.4-1.12.0':
-    resolution: {integrity: sha512-fKKqDHVCOKed3jcbrX4aA9Za7YY+/7tq2tVlkbSPQ9NVMaGeBhqyRE/gnLc30ZJ3zKP/UYIh69FaUkrF/dmLuQ==}
-
   '@rushstack/node-core-library@5.23.1':
     resolution: {integrity: sha512-wlKmIKIYCKuCASbITvOxLZXepPbwXvrv7S6ig6XNWFchSyhL/E2txmVXspHY49Wu2dzf7nI27a2k/yV5BA3EiA==}
     peerDependencies:
@@ -4667,13 +4616,6 @@ packages:
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
-  '@tokenizer/inflate@0.4.1':
-    resolution: {integrity: sha512-2mAv+8pkG6GIZiF1kNg1jAjh27IDxEPKwdGul3snfztFerfPGI1LjDezZp3i7BElXompqEtPmoPx6c2wgtWsOA==}
-    engines: {node: '>=18'}
-
-  '@tokenizer/token@0.3.0':
-    resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
-
   '@tresjs/cientos@4.3.1':
     resolution: {integrity: sha512-3qp6lEtMrFdhxDuASP1Sz/hEi8+xcEpM6Vd6uDJysCh4uRAzyJLlBSbPoR7gVjN12wrhwJIF1AfYEFz/Vhz5ZQ==}
     peerDependencies:
@@ -6707,10 +6649,6 @@ packages:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
 
-  file-type@22.1.0:
-    resolution: {integrity: sha512-fbvf9u6jnHWr1EP6V8R99E9iLMhNLXgZkUzWBiPpJ5/89UJ/Atuxjn5YXR+XaZWo2hc2/8mGfTez+NDAgOcpLA==}
-    engines: {node: '>=22'}
-
   file-uri-to-path@1.0.0:
     resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
 
@@ -7469,9 +7407,6 @@ packages:
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
-  krakatau-web@1.1.0-beta:
-    resolution: {integrity: sha512-TJhzktC3+DLYD/XjLRnkKK+3uKPC+B65DMatdMZYo1kpj2J9nwrPd20qyR5OgMMgDZema7IQarEaZAXniS268g==}
-
   launch-editor@2.12.0:
     resolution: {integrity: sha512-giOHXoOtifjdHqUamwKq6c49GzBdLjvxrd2D+Q4V6uOHopJv7p9VJxikDsQ/CBXZbEITgUqSVHXLTG3VhPP1Dg==}
 
@@ -9389,10 +9324,6 @@ packages:
     resolution: {integrity: sha512-4zemZi0HvTnYwLfrpk/CF9LOd9Lt87kAt50GnqhMpyF9U3poDAP2+iukq2bZsO/ufegbYehBkqINbsWxj4l4cw==}
     engines: {node: '>= 18'}
 
-  smol-toml@1.8.0:
-    resolution: {integrity: sha512-kCZr2V3ch9i00x8zXRhjUNVcjG9ijES5dDudkXvUVCT5QlJNQWElSJdZqyPemffHoLNUYwOcou0Fy+ojN0uHSQ==}
-    engines: {node: '>= 18'}
-
   sortablejs@1.14.0:
     resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
 
@@ -9562,10 +9493,6 @@ packages:
       '@types/node':
         optional: true
 
-  strtok3@10.3.5:
-    resolution: {integrity: sha512-ki4hZQfh5rX0QDLLkOCj+h+CVNkqmp/CMf8v8kZpkNVK6jGQooMytqzLZYUVYIZcFZ6yDB70EfD8POcFXiF5oA==}
-    engines: {node: '>=18'}
-
   structured-clone-es@1.0.0:
     resolution: {integrity: sha512-FL8EeKFFyNQv5cMnXI31CIMCsFarSVI2bF0U0ImeNE3g/F1IvJQyqzOXxPBRXiwQfyBTlbNe88jh1jFW0O/jiQ==}
 
@@ -9739,10 +9666,6 @@ packages:
   token-stream@1.0.0:
     resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
 
-  token-types@6.1.2:
-    resolution: {integrity: sha512-dRXchy+C0IgK8WPC6xvCHFRIWYUbqqdEIKPaKo/AcTUNzwLTK6AH7RjdLWsEZcAN/TBdtfUw3PYEgPr5VPr6ww==}
-    engines: {node: '>=14.16'}
-
   totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
@@ -9899,10 +9822,6 @@ packages:
   ufo@1.6.3:
     resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==}
 
-  uint8array-extras@1.5.0:
-    resolution: {integrity: sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A==}
-    engines: {node: '>=18'}
-
   ultrahtml@1.6.0:
     resolution: {integrity: sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==}
 
@@ -11228,8 +11147,6 @@ snapshots:
       cac: 6.7.14
       citty: 0.1.6
 
-  '@borewit/text-codec@0.2.2': {}
-
   '@capsizecss/unpack@4.0.0':
     dependencies:
       fontkitten: 1.0.2
@@ -11924,6 +11841,12 @@ snapshots:
 
   '@eslint-community/regexpp@4.12.2': {}
 
+  '@eslint/compat@1.4.1(eslint@9.39.2(jiti@1.21.7))':
+    dependencies:
+      '@eslint/core': 0.17.0
+    optionalDependencies:
+      eslint: 9.39.2(jiti@1.21.7)
+
   '@eslint/compat@1.4.1(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
       '@eslint/core': 0.17.0
@@ -12699,6 +12622,31 @@ snapshots:
       - utf-8-validate
       - vue
 
+  '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@eslint/js': 9.39.2
+      '@nuxt/eslint-plugin': 0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-config-flat-gitignore: 0.3.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-flat-config-utils: 0.4.0
+      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-jsdoc: 50.8.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-regexp: 2.10.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-unicorn: 55.0.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-vue: 9.33.0(eslint@9.39.2(jiti@1.21.7))
+      globals: 15.15.0
+      local-pkg: 0.5.1
+      pathe: 1.1.2
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
+    transitivePeerDependencies:
+      - '@typescript-eslint/utils'
+      - eslint-import-resolver-node
+      - supports-color
+      - typescript
+
   '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint/js': 9.39.2
@@ -12724,6 +12672,15 @@ snapshots:
       - supports-color
       - typescript
 
+  '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -13492,7 +13449,7 @@ snapshots:
       detect-libc: 2.1.2
       is-glob: 4.0.3
       node-addon-api: 7.1.1
-      picomatch: 4.0.3
+      picomatch: 4.0.4
     optionalDependencies:
       '@parcel/watcher-android-arm64': 2.5.6
       '@parcel/watcher-darwin-arm64': 2.5.6
@@ -13790,12 +13747,6 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.57.1':
     optional: true
 
-  '@run-slicer/cfr@0.1.8-0.152': {}
-
-  '@run-slicer/procyon@0.1.2-0.6.0': {}
-
-  '@run-slicer/vf@0.6.4-1.12.0': {}
-
   '@rushstack/node-core-library@5.23.1(@types/node@24.12.2)':
     dependencies:
       ajv: 8.18.0
@@ -14222,6 +14173,18 @@ snapshots:
 
   '@stripe/stripe-js@7.9.0': {}
 
+  '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      estraverse: 5.3.0
+      picomatch: 4.0.4
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
@@ -14450,15 +14413,6 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.1
 
-  '@tokenizer/inflate@0.4.1':
-    dependencies:
-      debug: 4.4.3
-      token-types: 6.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@tokenizer/token@0.3.0': {}
-
   '@tresjs/cientos@4.3.1(@tresjs/core@4.3.6(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(@types/three@0.172.0)(react@19.2.8)(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@tresjs/core': 4.3.6(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
@@ -14645,6 +14599,22 @@ snapshots:
     dependencies:
       '@types/node': 24.12.2
 
+  '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.54.0
+      '@typescript-eslint/type-utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.54.0
+      eslint: 9.39.2(jiti@1.21.7)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -14661,6 +14631,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.54.0
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.54.0
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.54.0
@@ -14704,6 +14686,18 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
+  '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -14896,6 +14890,12 @@ snapshots:
       vite: 7.3.1(@types/node@24.12.2)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.27(typescript@5.9.3)
 
+  '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.0-rc.2
+      vite: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vue: 3.5.27(typescript@5.9.3)
+
   '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.2
@@ -16524,6 +16524,12 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
+  eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@1.21.7))
+      eslint: 9.39.2(jiti@1.21.7)
+      find-up-simple: 1.0.1
+
   eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@2.6.1))
@@ -16545,6 +16551,23 @@ snapshots:
     optionalDependencies:
       unrs-resolver: 1.11.1
 
+  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      comment-parser: 1.4.5
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
+      is-glob: 4.0.3
+      minimatch: 10.1.2
+      semver: 7.7.4
+      stable-hash-x: 0.2.0
+      unrs-resolver: 1.11.1
+    optionalDependencies:
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -16562,6 +16585,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@es-joy/jsdoccomment': 0.50.2
+      are-docs-informative: 0.0.2
+      comment-parser: 1.4.1
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint: 9.39.2(jiti@1.21.7)
+      espree: 10.4.0
+      esquery: 1.7.0
+      parse-imports-exports: 0.2.4
+      semver: 7.7.4
+      spdx-expression-parse: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.50.2
@@ -16587,6 +16626,17 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@2.6.1))
 
+  eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      '@eslint-community/regexpp': 4.12.2
+      comment-parser: 1.4.5
+      eslint: 9.39.2(jiti@1.21.7)
+      jsdoc-type-pratt-parser: 4.8.0
+      refa: 0.12.1
+      regexp-ast-analysis: 0.7.1
+      scslre: 0.3.0
+
   eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -16602,21 +16652,47 @@ snapshots:
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
 
-  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.9.3):
+  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
       storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
+  eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2):
+    dependencies:
+      dotenv: 16.0.3
+      eslint: 9.39.2(jiti@1.21.7)
+      turbo: 2.8.2
+
   eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2):
     dependencies:
       dotenv: 16.0.3
       eslint: 9.39.2(jiti@2.6.1)
       turbo: 2.8.2
 
+  eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      ci-info: 4.4.0
+      clean-regexp: 1.0.0
+      core-js-compat: 3.48.0
+      eslint: 9.39.2(jiti@1.21.7)
+      esquery: 1.7.0
+      globals: 15.15.0
+      indent-string: 4.0.0
+      is-builtin-module: 3.2.1
+      jsesc: 3.1.0
+      pluralize: 8.0.0
+      read-pkg-up: 7.0.1
+      regexp-tree: 0.1.27
+      regjsparser: 0.10.0
+      semver: 7.7.4
+      strip-indent: 3.0.0
+
   eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -16651,6 +16727,20 @@ snapshots:
       '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
 
+  eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      eslint: 9.39.2(jiti@1.21.7)
+      globals: 13.24.0
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 6.1.2
+      semver: 7.7.4
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -16940,15 +17030,6 @@ snapshots:
     dependencies:
       flat-cache: 4.0.1
 
-  file-type@22.1.0:
-    dependencies:
-      '@tokenizer/inflate': 0.4.1
-      strtok3: 10.3.5
-      token-types: 6.1.2
-      uint8array-extras: 1.5.0
-    transitivePeerDependencies:
-      - supports-color
-
   file-uri-to-path@1.0.0: {}
 
   fill-range@7.1.1:
@@ -17816,8 +17897,6 @@ snapshots:
 
   kolorist@1.8.0: {}
 
-  krakatau-web@1.1.0-beta: {}
-
   launch-editor@2.12.0:
     dependencies:
       picocolors: 1.1.1
@@ -20436,8 +20515,6 @@ snapshots:
 
   smol-toml@1.6.0: {}
 
-  smol-toml@1.8.0: {}
-
   sortablejs@1.14.0: {}
 
   source-map-js@1.2.1: {}
@@ -20608,10 +20685,6 @@ snapshots:
     optionalDependencies:
       '@types/node': 24.12.2
 
-  strtok3@10.3.5:
-    dependencies:
-      '@tokenizer/token': 0.3.0
-
   structured-clone-es@1.0.0: {}
 
   style-mod@4.1.3: {}
@@ -20832,12 +20905,6 @@ snapshots:
 
   token-stream@1.0.0: {}
 
-  token-types@6.1.2:
-    dependencies:
-      '@borewit/text-codec': 0.2.2
-      '@tokenizer/token': 0.3.0
-      ieee754: 1.2.1
-
   totalist@3.0.1: {}
 
   tough-cookie@5.1.2:
@@ -20955,8 +21022,6 @@ snapshots:
 
   ufo@1.6.3: {}
 
-  uint8array-extras@1.5.0: {}
-
   ultrahtml@1.6.0: {}
 
   uncrypto@0.1.3: {}
@@ -21379,6 +21444,22 @@ snapshots:
       yaml: 2.8.2
     optional: true
 
+  vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
+    dependencies:
+      lightningcss: 1.32.0
+      picomatch: 4.0.4
+      postcss: 8.5.8
+      rolldown: 1.0.0-rc.12
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 24.12.2
+      esbuild: 0.27.3
+      fsevents: 2.3.3
+      jiti: 1.21.7
+      sass: 1.97.3
+      terser: 5.46.0
+      yaml: 2.8.2
+
   vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
     dependencies:
       lightningcss: 1.32.0
@@ -21555,6 +21636,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.7.0
+      lodash: 4.17.23
+      semver: 7.7.4
+    transitivePeerDependencies:
+      - supports-color
+
   vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index dfc3d2f9531..d21d086c530 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,6 +2,3 @@ packages:
   - 'apps/*'
   - 'packages/*'
 minimumReleaseAge: 10080 # 7 days
-minimumReleaseAgeExclude:
-  - '@run-slicer/cfr'
-  - 'krakatau-web'

From 5e3035bd54499e6f0e11a4a36162e5e05fc55a19 Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Mon, 5 Oct 2026 22:30:39 -0500
Subject: [PATCH 08/18] refactor: Add ability to prevent tooltip delay
 transfer, adjustable delay length, and hoverability

Overall refactor tooltip handling to reduce duplicate implementation details
---
 apps/frontend/src/pages/[type]/[project].vue  |   2 +-
 .../ui/src/components/floating/Tooltip.vue    |  55 ++----
 .../components/floating/TooltipDirective.vue  |   3 +
 .../shared/files-tab/components/FileRow.vue   |   2 +-
 .../layouts/wrapped/hosting/manage/root.vue   |   2 +-
 packages/ui/src/providers/tooltip.ts          | 187 ++++++++----------
 6 files changed, 112 insertions(+), 139 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index efe1c348de4..5bab21dbf4c 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -268,7 +268,7 @@
 								"
 								theme="dismissable-prompt"
 								class="inline-flex"
-								open
+								pinned
 								placement="bottom-start"
 							>
 								<ButtonLink
diff --git a/packages/ui/src/components/floating/Tooltip.vue b/packages/ui/src/components/floating/Tooltip.vue
index 10a74e786df..3a45868798a 100644
--- a/packages/ui/src/components/floating/Tooltip.vue
+++ b/packages/ui/src/components/floating/Tooltip.vue
@@ -13,13 +13,13 @@ import {
 
 import {
 	bindTooltipSource,
-	preventTooltipClosure,
+	preventHide,
+	type TooltipBaseProps,
 	type TooltipContent,
 	tooltipEnter,
 	tooltipFocusIn,
 	tooltipFocusOut,
 	tooltipLeave,
-	type TooltipPlacement,
 	unbindTooltipSource,
 } from '../../providers/tooltip'
 
@@ -27,10 +27,10 @@ defineOptions({ inheritAttrs: false })
 
 const TooltipSlot = defineComponent({
 	props: {
-		render: { type: Function as PropType<TooltipContent>, required: true },
+		content: { type: Function as PropType<TooltipContent>, required: true },
 	},
 	setup(props) {
-		return () => props.render()
+		return () => props.content()
 	},
 })
 
@@ -41,24 +41,11 @@ const SIDES = {
 	left: { origin: 'right center', arrow: 'right', rotate: 315 },
 } as const
 
-type HoverWaitTimes = { hover?: number; unhover?: number }
-
 const props = withDefaults(
-	defineProps<{
+	defineProps<TooltipBaseProps & {
 		disabled?: boolean
-		open?: boolean
-		theme?: string
-		placement?: TooltipPlacement
-		reference?: HTMLElement | null
-		text?: string | null
-		content?: TooltipContent | null
-		panelClass?: string
-		/**
-		 * Wait time before closing or openning
-		 */
-		actionWait?: number | HoverWaitTimes
 	}>(),
-	{ disabled: false, theme: 'tooltip', placement: 'top' },
+	{ disabled: false, theme: 'tooltip', placement: 'top', allowTransfer: true },
 )
 
 const slots = defineSlots<{ popper?: () => VNode }>()
@@ -137,7 +124,7 @@ watch(
 	[
 		trigger,
 		() => props.disabled,
-		() => props.open,
+		() => props.pinned,
 		() => props.placement,
 		() => props.theme,
 		() => props.text,
@@ -183,12 +170,8 @@ function syncSource() {
 		return
 	}
 	bindTooltipSource(el, {
-		placement: props.placement,
-		theme: props.theme,
-		getText: () => props.text ?? null,
-		render: slots.popper ? () => slots.popper?.() : undefined,
-		pinned: !!props.open,
-		panelClass: props.panelClass,
+		...props,
+		content: slots.popper ? () => slots.popper?.() : undefined
 	})
 }
 
@@ -224,26 +207,28 @@ function onEnter() {
 	if (props.disabled || !trigger.value) {
 		return
 	}
-	const waitTime = props.actionWait
+	const delay = props.delay
 	tooltipEnter(
 		trigger.value,
-		waitTime ? (typeof waitTime === 'number' ? waitTime : waitTime.unhover) : undefined,
+		delay ? (typeof delay === 'number' ? delay : delay.hover) : undefined,
 	)
 }
 
 function onTooltipEnter() {
-	if (props.reference) {
-		preventTooltipClosure(props.reference)
+	console.log("WWWWWWWWWWWWWWWWWWWW")
+	if ((props.hoverable || props.pinned) && props.reference) {
+		console.log("WEEEEEEEE")
+		preventHide(props.reference)
 	}
 }
 
 function onLeave() {
 	const triggerEl = trigger.value ?? props.reference
-	const waitTime = props.actionWait
+	const delay = props.delay
 	if (triggerEl) {
 		tooltipLeave(
 			triggerEl,
-			waitTime ? (typeof waitTime === 'number' ? waitTime : waitTime.unhover) : undefined,
+			delay ? (typeof delay === 'number' ? delay : delay.unhover) : undefined,
 		)
 	}
 }
@@ -285,18 +270,18 @@ function onFocusOut(event: FocusEvent) {
 				v-if="isOpen"
 				:key="jumpKey"
 				ref="floating"
-				class="`v-popper__inner z-[100010] rounded-lg border border-solid border-surface-5 bg-surface-3 px-3 py-1.5 text-sm font-medium text-contrast card-shadow`"
+				class="v-popper__inner z-[100010] rounded-lg border border-solid border-surface-5 bg-surface-3 px-3 py-1.5 text-sm font-medium text-contrast card-shadow"
 				:class="[
 					`v-popper--theme-${theme}`,
 					moving && 'tooltip-moving',
 					panelClass,
-					unhoverWait ? 'pointer-events-none' : '',
+					!!(hoverable || pinned) ? '' : 'pointer-events-none',
 				]"
 				:style="[floatingStyles, { transformOrigin }]"
 				@mouseenter="onTooltipEnter"
 				@mouseleave="onLeave"
 			>
-				<TooltipSlot v-if="content" :render="content" />
+				<TooltipSlot v-if="content" :content="content" />
 				<template v-else>{{ text }}</template>
 				<div
 					ref="arrowEl"
diff --git a/packages/ui/src/components/floating/TooltipDirective.vue b/packages/ui/src/components/floating/TooltipDirective.vue
index be22309b168..e3d46c6ae63 100644
--- a/packages/ui/src/components/floating/TooltipDirective.vue
+++ b/packages/ui/src/components/floating/TooltipDirective.vue
@@ -10,5 +10,8 @@ import Tooltip from './Tooltip.vue'
 		:placement="activeTooltip.placement"
 		:theme="activeTooltip.theme"
 		:panel-class="activeTooltip.panelClass"
+		:hoverable="activeTooltip.hoverable"
+		:delay="activeTooltip.delay"
+		:allowTransfer="activeTooltip.allowTransfer"
 	/>
 </template>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue b/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
index 3ed106d8fb3..cf48c80ccde 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
@@ -1,5 +1,5 @@
 <template>
-	<Tooltip :action-wait="{ hover: 600, unhover: 50 }">
+	<Tooltip :delay="{ hover: 850, unhover: 100 }" :hoverable="true" :allow-transfer="false">
 		<li
 			role="option"
 			:class="[containerClasses, isDragSource ? 'opacity-50' : '', compact ? 'h-8' : 'h-[3.25rem]']"
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index c512c39e7e7..2e5a230eb10 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -174,7 +174,7 @@
 							<PanelServerActionButton />
 							<Tooltip
 								theme="dismissable-prompt"
-								:open="showSettingsHint"
+								:pinned="showSettingsHint"
 								:disabled="!showSettingsHint"
 								placement="bottom-end"
 							>
diff --git a/packages/ui/src/providers/tooltip.ts b/packages/ui/src/providers/tooltip.ts
index f7a7b1cc349..27a38ce569d 100644
--- a/packages/ui/src/providers/tooltip.ts
+++ b/packages/ui/src/providers/tooltip.ts
@@ -7,23 +7,28 @@ export type TooltipProps = string | { text: string } | null | undefined
 export type TooltipDirective = Directive<HTMLElement, TooltipProps>
 export type TooltipContent = () => unknown
 
-interface TooltipSource {
-	placement: TooltipPlacement
-	getText: () => string | null
-	render?: TooltipContent
+export interface TooltipBaseProps {
+	reference?: HTMLElement | null
+	text?: (() => string | null) | string | null
+	placement?: TooltipPlacement
 	theme?: string
-	pinned?: boolean
+	content?: TooltipContent | null
 	panelClass?: string
+	delay?: DelayTimes | null
+	hoverable?: boolean
+	pinned?: boolean
+	allowTransfer?: boolean
 }
 
-interface TooltipState {
-	reference: HTMLElement | null
-	text: string | null
-	placement: TooltipPlacement
-	theme: string
-	content: TooltipContent | null
-	panelClass?: string
-}
+type RequiredFor<T, K extends keyof T> = Required<Pick<T, K>> & Pick<T, Exclude<keyof T, K>>;
+
+type TooltipState = RequiredFor<Omit<TooltipBaseProps, 'pinned'>, 'placement' | 'theme' | 'reference'>;
+
+type TimeoutId = ReturnType<typeof setTimeout>
+
+type ToggledTooltipData = { id: TimeoutId | undefined; el: HTMLElement }
+
+type DelayTimes = { hover?: number; unhover?: number } | number
 
 declare module 'vue' {
 	export interface GlobalDirectives {
@@ -43,25 +48,37 @@ export const activeTooltip = ref<TooltipState>({
 	panelClass: undefined,
 })
 
-const sources = new WeakMap<HTMLElement, TooltipSource>()
-let showTimer: ReturnType<typeof setTimeout> | undefined
-let hideTimer: ReturnType<typeof setTimeout> | undefined
-let pending: HTMLElement | undefined
+const sources = new WeakMap<HTMLElement, TooltipBaseProps>()
+let showTimer: ToggledTooltipData | undefined
+let hideTimer: ToggledTooltipData | undefined
 let hovered: HTMLElement | undefined
 let focused: HTMLElement | undefined
 let lastOpen = 0
 
 function stopShow() {
-	clearTimeout(showTimer)
+	if (showTimer == null) return
+	clearTimeout(showTimer.id)
 	showTimer = undefined
-	pending = undefined
 }
 
 function stopHide() {
-	clearTimeout(hideTimer)
+	if (hideTimer == null) return
+	clearTimeout(hideTimer.id)
 	hideTimer = undefined
 }
 
+function hideWaiting(el?: HTMLElement) {
+	if (hideTimer == null) return false
+
+	const hidingEl = hideTimer.el;
+	stopHide();
+
+	const isHidingElement = hidingEl == el;
+	if (!isHidingElement) hide(hidingEl, true)
+
+	return isHidingElement;
+}
+
 function clear() {
 	activeTooltip.value = {
 		reference: null,
@@ -75,14 +92,13 @@ function clear() {
 
 function hasTooltipContent(el: HTMLElement) {
 	const source = sources.get(el)
-	return !!(source?.getText() || source?.render)
+	return !!((typeof source?.text === 'function' ? source.text() : source?.text) || source?.content);
 }
 
 function open(el: HTMLElement) {
 	const source = sources.get(el)
-	pending = undefined
-	const text = source?.getText() ?? null
-	const content = source?.render ?? null
+	const text = (typeof source?.text === 'function' ? source.text() : source?.text) ?? null
+	const content = source?.content ?? null
 	if (!text && !content) {
 		if (activeTooltip.value.reference === el) {
 			clear()
@@ -96,36 +112,46 @@ function open(el: HTMLElement) {
 		theme: source?.theme ?? 'tooltip',
 		content,
 		panelClass: source?.panelClass,
+		delay: source?.delay,
+		hoverable: source?.hoverable,
 	}
 	lastOpen = Date.now()
 }
 
-function show(immediate: boolean) {
+function show(immediate: boolean, delay: number = SHOW_DELAY) {
 	const el = focused ?? hovered
 	if (!el || !hasTooltipContent(el)) {
 		return
 	}
-	stopShow()
-	stopHide()
-	if (immediate || activeTooltip.value.reference || Date.now() - lastOpen <= SHOW_DELAY) {
+	if (hideWaiting(el)) return;
+	if (showTimer) stopShow();
+	const source = sources.get(el);
+	if (immediate || ((activeTooltip.value.reference || Date.now() - lastOpen <= delay) && source?.allowTransfer)) {
 		open(el)
 		return
 	}
-	pending = el
-	showTimer = setTimeout(() => open(el), SHOW_DELAY)
+	showTimer = {
+		id: setTimeout(() => {
+			open(el);
+			stopShow();
+		}, delay),
+		el: el
+	}
 }
 
-function hide(el: HTMLElement, immediate: boolean) {
-	if (sources.get(el)?.pinned) {
+function hide(el: HTMLElement, immediate: boolean, delay: number = HIDE_DELAY) {
+	if (showTimer?.el === el) stopShow();
+
+	const source = sources.get(el);
+
+	if (source?.pinned) {
 		return
 	}
-	if (focused ?? hovered) {
+
+	if (source?.allowTransfer && (focused ?? hovered)) {
 		show(true)
 		return
 	}
-	if (pending === el) {
-		stopShow()
-	}
 	if (activeTooltip.value.reference !== el) {
 		return
 	}
@@ -135,19 +161,22 @@ function hide(el: HTMLElement, immediate: boolean) {
 		return
 	}
 	stopHide()
-	hideTimer = setTimeout(() => {
-		if ((focused ?? hovered) || sources.get(el)?.pinned) {
-			return
-		}
-		if (activeTooltip.value.reference !== el) {
-			return
-		}
-		clear()
-		stopHide()
-	}, HIDE_DELAY)
+	hideTimer = {
+		id: setTimeout(() => {
+			if ((focused ?? hovered) || sources.get(el)?.pinned) {
+				return
+			}
+			if (activeTooltip.value.reference !== el) {
+				return
+			}
+			clear()
+			stopHide()
+		}, delay),
+		el: el
+	}
 }
 
-export function bindTooltipSource(el: HTMLElement, source: TooltipSource) {
+export function bindTooltipSource(el: HTMLElement, source: TooltipBaseProps) {
 	const wasPinned = sources.get(el)?.pinned
 	sources.set(el, source)
 	if (source.pinned || activeTooltip.value.reference === el) {
@@ -160,7 +189,7 @@ export function bindTooltipSource(el: HTMLElement, source: TooltipSource) {
 
 export function unbindTooltipSource(el: HTMLElement) {
 	sources.delete(el)
-	if (pending === el) {
+	if (showTimer?.el === el) {
 		stopShow()
 	}
 	if (hovered === el) {
@@ -183,80 +212,36 @@ function isFocusVisible(el: HTMLElement) {
 	return active.matches(':focus-visible')
 }
 
-let showTimeoutData: { id: TimeoutId | undefined; el: HTMLElement } | undefined = undefined
-
-export function tooltipEnter(el: HTMLElement, timeout?: number): void {
-	if (timeout != undefined) {
-		// TODO: SHOULD ATTEMPT TO HIDE ANY PREVIOUS CALLS RIGHT AWAY?
-		const timeoutId = setTimeout(() => {
-			if (showTimeoutData) tooltipEnterBase(showTimeoutData.el)
-		}, timeout)
-		if (showTimeoutData) clearTimeout(showTimeoutData.id)
-		if (hideTimeoutData?.el === el) clearTimeout(hideTimeoutData.id)
-
-		showTimeoutData = { id: timeoutId, el: el }
-	} else {
-		tooltipEnterBase(el)
-	}
-}
-
-export function tooltipEnterBase(el: HTMLElement) {
+export function tooltipEnter(el: HTMLElement, delay?: number): void {
 	if (!hasTooltipContent(el)) {
 		return
 	}
-	closeWaitingTimeout()
+	console.log("tooltipEnter", delay)
 	hovered = el
-	show(false)
-}
-
-type TimeoutId = ReturnType<typeof setTimeout>
-
-let hideTimeoutData: { id: TimeoutId | undefined; el: HTMLElement } | undefined = undefined
-
-export function preventTooltipClosure(el: HTMLElement) {
-	if (hideTimeoutData?.el !== el) return
-	clearTimeout(hideTimeoutData.id)
-	hideTimeoutData = undefined
+	show(false, delay)
 }
 
-export function tooltipLeave(el: HTMLElement, timeout?: number): void {
-	if (timeout != undefined) {
-		// TODO: SHOULD ATTEMPT TO HIDE ANY PREVIOUS CALLS RIGHT AWAY?
-		const timeoutId = setTimeout(() => {
-			if (hideTimeoutData) tooltipLeaveBase(hideTimeoutData.el)
-		}, timeout)
-		if (hideTimeoutData?.el === el) clearTimeout(hideTimeoutData.id)
-		if (showTimeoutData?.el === el) clearTimeout(showTimeoutData.id)
-
-		hideTimeoutData = { id: timeoutId, el: el }
-	} else {
-		tooltipLeaveBase(el)
-	}
-}
 
-function closeWaitingTimeout() {
-	if (hideTimeoutData) {
-		clearTimeout(hideTimeoutData.id)
-		tooltipLeaveBase(hideTimeoutData.el)
-		hideTimeoutData = undefined
+export function preventHide(el: HTMLElement) {
+	if (hideTimer?.el == el) {
+		stopHide();
 	}
 }
 
-function tooltipLeaveBase(el: HTMLElement) {
+export function tooltipLeave(el: HTMLElement, delay?: number): void {
 	if (hovered === el) {
 		hovered = undefined
 	}
 	if (focused === el && !isFocusVisible(el)) {
 		focused = undefined
 	}
-	hide(el, false)
+	hide(el, false, delay)
 }
 
 export function tooltipFocusIn(el: HTMLElement) {
 	if (!isFocusVisible(el) || !hasTooltipContent(el)) {
 		return
 	}
-	closeWaitingTimeout()
 	focused = el
 	show(true)
 }
@@ -324,7 +309,7 @@ export function installTooltipDirective(app: App) {
 		ensureAriaLabel(el, text, addedAriaLabel)
 		bindTooltipSource(el, {
 			placement: tooltipPlacement(modifiers),
-			getText: () => tooltipText(value),
+			text: () => tooltipText(value),
 		})
 	}
 }

From 7d1d5e5dffabb72d8cea43d93496aca90daedd41 Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Mon, 5 Oct 2026 23:20:27 -0500
Subject: [PATCH 09/18] fix: Resolve issues with operation history incorrectly
 setting data and not working

---
 .../shared/files-tab/composables/file-undo-redo.ts   | 12 ++++++++----
 .../ui/src/layouts/wrapped/hosting/manage/files.vue  | 11 +++++++----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
index 9a78e60c504..d922dbcbfb5 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
@@ -24,9 +24,10 @@ export function useFileUndoRedo(
 		if (!lastOperation) return
 
 		try {
+			console.log(lastOperation)
 			switch (lastOperation.type) {
 				case 'move':
-					await moveItem(lastOperation.newFile, parentInfoFrom(lastOperation.prevFile).path)
+					await moveItem(lastOperation.newFile, lastOperation.prevFile.path)
 					break
 				case 'rename':
 					await renameItem(lastOperation.newFile, lastOperation.prevFile.name)
@@ -52,7 +53,7 @@ export function useFileUndoRedo(
 		try {
 			switch (lastOperation.type) {
 				case 'move':
-					await moveItem(lastOperation.prevFile, parentInfoFrom(lastOperation.newFile).path)
+					await moveItem(lastOperation.prevFile, lastOperation.newFile.path)
 					break
 				case 'rename':
 					await renameItem(lastOperation.prevFile, lastOperation.newFile.name)
@@ -72,11 +73,14 @@ export function useFileUndoRedo(
 	}
 
 	function onKeydown(e: KeyboardEvent) {
-		if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key === 'z') {
+		// Note: Using raw key will have capitalization issues due
+		// to how shift works in keyboard event it seems... ): 
+		const key = e.key.toLowerCase();
+		if ((e.ctrlKey || e.metaKey) && !e.shiftKey && key === 'z') {
 			e.preventDefault()
 			undo()
 		}
-		if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z') {
+		if ((e.ctrlKey || e.metaKey) && e.shiftKey && key === 'z') {
 			e.preventDefault()
 			redo()
 		}
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
index d42ab714205..64a0513f582 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
@@ -181,8 +181,11 @@ function queryFileEntry(file: FileInfo<'file'>): FileResult & FileQueryResult {
 function queryDirectoryEntries(file: FileInfo<'directory'>): DirectoryResult & FileQueryResult {
 	return queryFile(
 		file,
-		(queryData) =>
-			computed<FileItem[]>(() => (queryData.value?.items ?? []).filter(isVisibleFileItem)),
+		(queryData) => {
+			return computed<FileItem[]>(() => (queryData.value?.items ?? [])
+				.filter(isVisibleFileItem)
+				.map((item) => { return {...item, path: normalizeDirectoryPath(item.path)} }))
+		},
 		directoryQueryOptions,
 	)
 }
@@ -310,7 +313,7 @@ const renameMutation = useMutation({
 			type: file.type,
 			name: newName,
 			path: normalizeDirectoryPath(
-				parts.length > 0 ? parts.slice(0, parts.length - 1).join('/') : newName,
+				parts.length > 0 ? [...parts.slice(0, -1), newName].join('/') : newName,
 			),
 		}
 	},
@@ -357,7 +360,7 @@ const moveMutation = useMutation({
 		return {
 			name: source.name,
 			type: source.type,
-			path: normalizeDirectoryPath(destination + '/' + source.name),
+			path: normalizeDirectoryPath(destination),
 		}
 	},
 	onMutate: async ({ source }) => {

From abd4547abf9a97931dc312c215c254b3160404a1 Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Mon, 5 Oct 2026 23:59:08 -0500
Subject: [PATCH 10/18] fix: resolve issue with Constrained width differing on
 the client leading to layout changing on mount

---
 apps/frontend/src/pages/hosting/manage/[id].vue |  6 ++++++
 .../src/layouts/wrapped/hosting/manage/root.vue | 17 ++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index c61c4918848..7a9b3463edf 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -27,6 +27,10 @@
 				})
 			}
 		"
+		:constrain-width="constrainWidth"
+		@toggle-constrain-width="(value: boolean) => {
+			constrainWidth = value;
+		}"
 	>
 		<template #default="{ onReinstall, onReinstallFailed, constrainWidth }">
 			<NuxtPage
@@ -91,6 +95,8 @@ definePageMeta({
 	middleware: 'auth',
 })
 
+const constrainWidth = useCookie('server-layout-constrained-width', { default: () => true, maxAge: 60 * 60 * 24 * 365 })
+
 useHead({
 	script: [
 		{
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index 2e5a230eb10..de885d8a927 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -244,7 +244,9 @@
 						native-type="button"
 						class="ml-2"
 						:style="{ '--si': 1 }"
-						@click="() => (constrainWidth = !constrainWidth)"
+						@click="() => {
+							$emit('toggleConstrainWidth', (constrainWidth = !constrainWidth))
+						}"
 					>
 						<ExpandIcon v-if="constrainWidth" />
 						<CollapseIcon v-else />
@@ -447,12 +449,16 @@ const props = withDefaults(
 		navigateToServers: undefined,
 		browseModpacks: undefined,
 		browseContent: undefined,
-		constrainWidth: false,
+		constrainWidth: undefined,
 		centerEntries: true,
 		layoutMode: 'page',
 	},
 )
 
+defineEmits<{
+	toggleConstrainWidth: [value: boolean]
+}>()
+
 const { formatMessage } = useVIntl()
 
 const leaveMessages = defineMessages({
@@ -492,9 +498,14 @@ useResizeObserver(serverDataContainer, (entries) => {
 	const entry = entries[0]
 	allowConstrainWidthToggle.value = entry.contentRect.width > 1200
 })
-const constrainWidth = useLocalStorage('server-layout-constrained-width', props.constrainWidth, {
+const constrainWidth = useLocalStorage('server-layout-constrained-width', props.constrainWidth ?? true, {
 	initOnMounted: true,
+	listenToStorageChanges: true,
 })
+if (props.constrainWidth != constrainWidth.value) {
+	constrainWidth.value = props.constrainWidth;
+}
+
 const centerEntries = computed(() => props.centerEntries)
 const containedLayout = computed(() => props.layoutMode === 'contained')
 const isNuxt = computed(() => client instanceof NuxtModrinthClient)

From c83b03cf1eeb027becf2e8ee17d15def5e1eae1f Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Tue, 6 Oct 2026 01:58:58 -0500
Subject: [PATCH 11/18] refactor: Gate new features, make workspace persistent,
 resolve performance issues

- Adjust context for file manager and UI extend the base context rather than needing to inject two context
- Add toggle between simple and advance mode within table settings
- Adjust details tooltip to only show info not present within the table row view
- Fix issue where tabs would not adjust for the changes like moving or renaming of files/folders
- Start work on integrating changes within APP
---
 apps/app-frontend/src/App.vue                 |   1 +
 .../src/composables/use-app-settings.ts       |   1 +
 .../src/pages/instance/files/index.vue        | 426 +++++++++---------
 .../src/pages/instance/query-options.ts       |   2 +
 apps/frontend/src/composables/featureFlags.ts |   1 +
 .../src/providers/setup/page-context.ts       |   1 +
 packages/app-lib/src/state/settings.rs        |   1 +
 .../files-tab/components/FileActionBar.vue    |   7 +-
 .../files-tab/components/FileBrowserPanel.vue |  74 ++-
 .../files-tab/components/FileNavbar.vue       |   1 +
 .../shared/files-tab/components/FileRow.vue   | 190 ++++----
 .../files-tab/components/FileSideBar.vue      |  11 +-
 .../files-tab/components/FileTableHeader.vue  |  61 ++-
 .../shared/files-tab/components/FileTree.vue  |  48 +-
 .../files-tab/components/tabs/FileTab.vue     |  12 +-
 .../components/tabs/FileTabsActions.vue       |   3 +-
 .../files-tab/composables/file-columns.ts     |  48 +-
 .../shared/files-tab/composables/file-tabs.ts | 247 +++++++++-
 .../files-tab/composables/file-undo-redo.ts   |   1 -
 .../src/layouts/shared/files-tab/layout.vue   | 244 ++++++----
 .../files-tab/providers/file-browser-ui.ts    |  33 +-
 .../files-tab/providers/file-manager.ts       |  11 +-
 .../shared/files-tab/providers/index.ts       |  10 +-
 .../ui/src/layouts/shared/files-tab/utils.ts  |  64 +++
 .../layouts/wrapped/hosting/manage/files.vue  | 104 ++---
 .../layouts/wrapped/hosting/manage/utils.ts   |   2 +-
 packages/ui/src/providers/page-context.ts     |   2 +
 27 files changed, 1009 insertions(+), 597 deletions(-)

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 564be92c7d3..84577dc10b7 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -383,6 +383,7 @@ providePageContext({
 		serverRamAsBytesAlwaysOn: computed(() =>
 			appSettings.getFeatureFlag('server_ram_as_bytes_always_on'),
 		),
+		filesTabRework: computed(() => appSettings.getFeatureFlag('files_tab_rework')),
 	},
 	openExternalUrl: (url) => void openUrl(url),
 })
diff --git a/apps/app-frontend/src/composables/use-app-settings.ts b/apps/app-frontend/src/composables/use-app-settings.ts
index dceec83997a..0a46f1665c1 100644
--- a/apps/app-frontend/src/composables/use-app-settings.ts
+++ b/apps/app-frontend/src/composables/use-app-settings.ts
@@ -11,6 +11,7 @@ export const DEFAULT_FEATURE_FLAGS = {
 	pride_fundraiser: true,
 	i18n_debug: false,
 	localhost_sign_in: false,
+	files_tab_rework: false,
 }
 
 export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS
diff --git a/apps/app-frontend/src/pages/instance/files/index.vue b/apps/app-frontend/src/pages/instance/files/index.vue
index 2fa4af9c65d..1b7f0bd1ccf 100644
--- a/apps/app-frontend/src/pages/instance/files/index.vue
+++ b/apps/app-frontend/src/pages/instance/files/index.vue
@@ -1,19 +1,32 @@
 <script setup lang="ts">
-import type { DirectoryResult, EditingFile, FileItem, UploadState } from '@modrinth/ui'
+import type {
+	DirectoryResult,
+	DirectoryTree,
+	ExtractDryRunResult,
+	FileInfo,
+	FileItem,
+	FileItemResultFrom,
+	FileResult,
+	FileTypes,
+	UploadState,
+} from '@modrinth/ui'
 import {
+	childPath,
 	commonMessages,
 	defineMessages,
 	FilePageLayout,
+	infoFrom,
 	injectNotificationManager,
+	normalizeDirectoryPath,
+	parentInfoFrom,
 	provideFileManager,
 	ReadyTransition,
 	useDebugLogger,
 	useVIntl,
 } from '@modrinth/ui'
-import type { FileInfo } from '@modrinth/ui/src/layouts/shared/files-tab/providers/file-manager.ts'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { invoke } from '@tauri-apps/api/core'
-import { computed, effectScope, onScopeDispose, type Ref, ref, watch } from 'vue'
+import { computed, effectScope, markRaw, onScopeDispose, ref, shallowReactive, watch } from 'vue'
 
 import { useAppEvent } from '@/composables/use-app-event'
 import { get_full_path } from '@/helpers/instance'
@@ -54,245 +67,241 @@ const instanceRootQuery = useQuery(
 	})),
 )
 const instanceRoot = computed(() => instanceRootQuery.data.value ?? '')
-const items = ref<FileItem[]>([])
-/** True until the first directory read for the current instance path finishes (initial load only). */
-const firstPaintPending = ref(true)
-const loading = ref(true)
-const error = ref<Error | null>(null)
-const currentPath = ref('')
-const editingFile = ref<EditingFile | null>(null)
+
+const currentLocation = ref<FileInfo>(infoFrom('/'))
+const currentDirectory = computed<FileInfo<'directory'>>(() =>
+	currentLocation.value.type === 'file'
+		? parentInfoFrom(currentLocation.value)
+		: (currentLocation.value as FileInfo<'directory'>),
+)
 
 debug('setup: start, instance.id =', instanceId.value)
 
-async function listDirectory(dirPath: string): Promise<FileItem[]> {
-	return invoke('plugin:files|file_list', { instanceId: instanceId.value, path: dirPath })
+/** The instance's file commands take paths relative to the instance root, without a leading slash. */
+function toRelativePath(path: string) {
+	return path.split('/').filter(Boolean).join('/')
 }
 
-function isReadOnly(file: FileInfo | null): boolean {
-	// TODO: HANDLE NULL BY CHECKING IF THE USER CAN CREATE FILES
-	if (file == null) return false
-	const isReadOnlyItem = (item: FileItem) => item.path === file.path && item.readOnly === true
-	return (
-		file.path.split('/')[0].toLowerCase() === 'mods' ||
-		items.value.some(isReadOnlyItem) ||
-		[...directories.values()].some((entries) => entries.data.value.some(isReadOnlyItem))
-	)
+async function listDirectory(path: string): Promise<FileItem[]> {
+	const items = await invoke<FileItem[]>('plugin:files|file_list', {
+		instanceId: instanceId.value,
+		path: toRelativePath(path),
+	})
+	return items.map((item) => ({ ...item, path: normalizeDirectoryPath(item.path) }))
 }
 
-function toRelativePath(path: string) {
-	return path.split('/').filter(Boolean).join('/')
+async function readFile(path: string): Promise<ArrayBuffer> {
+	const bytes = await invoke<number[]>('plugin:files|file_read', {
+		instanceId: instanceId.value,
+		path: toRelativePath(path),
+	})
+	return markRaw(new Uint8Array(bytes).buffer)
 }
 
-const directories = new Map<string, DirectoryResult>()
-const expandedDirectories: Ref<string[]> = ref([])
+async function writeBytes(path: string, bytes: Uint8Array, createOnly = false) {
+	await invoke('plugin:files|file_write', {
+		instanceId: instanceId.value,
+		path: toRelativePath(path),
+		bytes: Array.from(bytes),
+		createOnly,
+	})
+}
 
-/** Owns the lazily created directory queries so they're disposed with this page, wherever they were first requested from. */
-const directoryScope = effectScope()
-onScopeDispose(() => directoryScope.stop())
+function directoryQueryOptions(path: string) {
+	return {
+		queryKey: instanceKeys.files(instanceId.value, path),
+		queryFn: () => listDirectory(path),
+		staleTime: 30_000,
+	}
+}
 
-function queryDirectoryEntries(relativePath: string): DirectoryResult {
+function fileQueryOptions(path: string) {
+	return {
+		queryKey: instanceKeys.fileContent(instanceId.value, path),
+		queryFn: () => readFile(path),
+		staleTime: 30_000,
+	}
+}
+
+function queryDirectory(info: FileInfo<'directory'>): DirectoryResult {
 	const query = useQuery(
-		computed(() => ({
-			queryKey: instanceKeys.files(instancePage.instanceId.value, relativePath),
-			queryFn: () => listDirectory(relativePath),
-			enabled: !!instanceRoot.value,
-			staleTime: 30_000,
-		})),
+		computed(() => ({ ...directoryQueryOptions(info.path), enabled: !!instanceRoot.value })),
 		queryClient,
 	)
 	return {
-		items: computed(() => query.data.value ?? []),
+		...info,
+		data: computed(() => query.data.value ?? []),
 		isLoading: query.isLoading,
 		loadError: query.error,
 	}
 }
 
-const directoryTree = {
-	get(path: string) {
-		const relativePath = toRelativePath(path)
-		let entries = directories.get(relativePath)
-		if (!entries) {
-			entries = directoryScope.run(() => queryDirectoryEntries(relativePath))!
-			directories.set(relativePath, entries)
-		}
-		return entries
-	},
-	prefetch(path: string) {
-		const relativePath = toRelativePath(path)
-		if (directories.has(relativePath)) return
-		queryClient.prefetchQuery({
-			queryKey: instanceKeys.files(instancePage.instanceId.value, relativePath),
-			queryFn: () => listDirectory(relativePath),
-			staleTime: 30_000,
-		})
-	},
-	expandedEntries: expandedDirectories,
+function queryFile(info: FileInfo<'file'>): FileResult {
+	const query = useQuery(
+		computed(() => ({ ...fileQueryOptions(info.path), enabled: !!instanceRoot.value })),
+		queryClient,
+	)
+	return {
+		...info,
+		data: computed(() => query.data.value ?? null),
+		isLoading: query.isLoading,
+		loadError: query.error,
+	}
 }
 
-async function writeBytes(path: string, bytes: Uint8Array, createOnly = false) {
-	await invoke('plugin:files|file_write', {
-		instanceId: instanceId.value,
-		path,
-		bytes: Array.from(bytes),
-		createOnly,
-	})
-}
+const fileQueries = shallowReactive(new Map<string, DirectoryResult | FileResult>())
+const expandedDirectories = ref<string[]>([])
 
-const directoryQuery = useQuery(
-	computed(() => ({
-		queryKey: instanceKeys.files(instancePage.instanceId.value, currentPath.value),
-		queryFn: () => listDirectory(currentPath.value),
-		enabled: !!instanceRoot.value,
-		staleTime: 30_000,
-	})),
-)
+/** Owns the lazily created queries so they're disposed with this page, wherever they were first requested from. */
+const fileSystemScope = effectScope()
+onScopeDispose(() => fileSystemScope.stop())
 
-watch(
-	directoryQuery.data,
-	(data) => {
-		if (!data) return
-		items.value = data
-		firstPaintPending.value = false
+function queryCacheKey(info: FileInfo) {
+	return `${info.type === 'file' ? 'file' : 'directory'}:${normalizeDirectoryPath(info.path)}`
+}
+
+const directoryTree = {
+	get: <T extends FileTypes>(info: FileInfo<T>): FileItemResultFrom<T> => {
+		const key = queryCacheKey(info)
+		let entry = fileQueries.get(key)
+		if (!entry) {
+			entry = fileSystemScope.run(() =>
+				info.type === 'file'
+					? queryFile(info as FileInfo<'file'>)
+					: queryDirectory(info as FileInfo<'directory'>),
+			)!
+			fileQueries.set(key, entry)
+		}
+		return entry as FileItemResultFrom<T>
 	},
-	{ immediate: true },
-)
-watch(directoryQuery.isFetching, (fetching) => {
-	loading.value = fetching
-})
-watch(directoryQuery.error, (queryError) => {
-	error.value = queryError
-	if (queryError) items.value = []
+	prefetch: <T extends FileTypes>(info: FileInfo<T>) => {
+		if (fileQueries.has(queryCacheKey(info))) return
+		queryClient.prefetchQuery(
+			info.type === 'file' ? fileQueryOptions(info.path) : directoryQueryOptions(info.path),
+		)
+	},
+	expandedEntries: expandedDirectories,
+} satisfies DirectoryTree
+
+/** Paths of every loaded entry marked read-only, so lookups don't rescan all listings per row. */
+const readOnlyPaths = computed(() => {
+	const paths = new Set<string>()
+	for (const entry of fileQueries.values()) {
+		if (entry.type !== 'directory') continue
+		for (const item of (entry as DirectoryResult).data.value) {
+			if (item.readOnly) paths.add(item.path)
+		}
+	}
+	return paths
 })
 
-await instanceRootQuery.suspense()
-await directoryQuery.refetch()
-firstPaintPending.value = false
+function isReadOnly(file: FileInfo | null): boolean {
+	// TODO: HANDLE NULL BY CHECKING IF THE USER CAN CREATE FILES
+	if (file == null) return false
+	if (toRelativePath(file.path).split('/')[0].toLowerCase() === 'mods') return true
+	return readOnlyPaths.value.has(normalizeDirectoryPath(file.path))
+}
 
 const isRefreshing = ref<boolean>(false)
 
 async function refresh() {
-	debug('refresh: called, currentPath =', currentPath.value, 'instanceRoot =', instanceRoot.value)
+	debug('refresh: called, currentDirectory =', currentDirectory.value.path)
 	isRefreshing.value = true
-	await Promise.all([
-		directoryQuery.refetch(),
-		queryClient.invalidateQueries({
-			queryKey: [...instanceKeys.detail(instancePage.instanceId.value), 'files'],
-			predicate: (query) => query.queryKey[query.queryKey.length - 1] !== currentPath.value,
-		}),
-	])
-	isRefreshing.value = false
-}
-
-function navigateTo(path: string) {
-	debug('navigateTo:', path)
-	editingFile.value = null
-	currentPath.value = path.startsWith('/') ? path.slice(1) : path
-	refresh()
+	try {
+		await queryClient.invalidateQueries({
+			queryKey: [...instanceKeys.detail(instanceId.value), 'files'],
+		})
+	} finally {
+		isRefreshing.value = false
+	}
 }
 
-function startEditing(file: EditingFile) {
-	editingFile.value = file
+function navigateTo(file: FileInfo) {
+	debug('navigateTo:', file.path)
+	currentLocation.value = file
 }
 
-function stopEditing() {
-	editingFile.value = null
+function notifyError(title: string, error: unknown) {
+	addNotification({
+		title,
+		text: error instanceof Error ? error.message : String(error ?? ''),
+		type: 'error',
+	})
 }
 
-async function handleCreateItem(name: string, type: 'file' | 'directory') {
-	const targetPath = currentPath.value ? `${currentPath.value}/${name}` : name
+async function createItem(name: string, type: 'file' | 'directory'): Promise<FileInfo | null> {
+	const file: FileInfo = { name, type, path: childPath(currentDirectory.value.path, name) }
 	try {
 		if (type === 'directory') {
 			await invoke('plugin:files|file_create_directory', {
 				instanceId: instanceId.value,
-				path: targetPath,
+				path: toRelativePath(file.path),
 			})
 		} else {
-			await writeBytes(targetPath, new Uint8Array(), true)
+			await writeBytes(file.path, new Uint8Array(), true)
 		}
 		await refresh()
-		return {
-			name: name,
-			path: targetPath,
-			type: type,
-		}
+		return file
 	} catch (e) {
-		addNotification({
-			title: formatMessage(commonMessages.createFailedLabel),
-			text: e instanceof Error ? e.message : '',
-			type: 'error',
-		})
+		notifyError(formatMessage(commonMessages.createFailedLabel), e)
+		return null
 	}
 }
 
-async function handleRenameItem(path: string, newName: string) {
-	const parentDir = path.includes('/') ? path.substring(0, path.lastIndexOf('/')) : ''
-	const newPath = parentDir ? `${parentDir}/${newName}` : newName
+async function renameFile(file: FileInfo, destination: string, failedLabel: string) {
 	try {
 		await invoke('plugin:files|file_rename', {
 			instanceId: instanceId.value,
-			source: path,
-			destination: newPath,
+			source: toRelativePath(file.path),
+			destination: toRelativePath(destination),
 		})
 		await refresh()
+		return infoFrom({ name: file.name, type: file.type, path: destination })
 	} catch (e) {
-		addNotification({
-			title: formatMessage(commonMessages.renameFailedLabel),
-			text: e instanceof Error ? e.message : '',
-			type: 'error',
-		})
+		notifyError(failedLabel, e)
+		return null
 	}
 }
 
-async function handleMoveItem(source: string, destination: string) {
-	try {
-		await invoke('plugin:files|file_rename', { instanceId: instanceId.value, source, destination })
-		await refresh()
-	} catch (e) {
-		addNotification({
-			title: formatMessage(commonMessages.moveFailedLabel),
-			text: e instanceof Error ? e.message : '',
-			type: 'error',
-		})
-	}
+async function renameItem(file: FileInfo, newName: string): Promise<FileInfo | null> {
+	return renameFile(
+		file,
+		childPath(parentInfoFrom(file).path, newName),
+		formatMessage(commonMessages.renameFailedLabel),
+	)
+}
+
+async function moveItem(file: FileInfo, destination: string): Promise<FileInfo | null> {
+	return renameFile(file, destination, formatMessage(commonMessages.moveFailedLabel))
 }
 
-async function handleDeleteItem(path: string, recursive: boolean) {
+async function deleteItem(file: FileInfo, recursive: boolean): Promise<boolean> {
 	try {
-		await invoke('plugin:files|file_delete', { instanceId: instanceId.value, path, recursive })
+		await invoke('plugin:files|file_delete', {
+			instanceId: instanceId.value,
+			path: toRelativePath(file.path),
+			recursive,
+		})
 		await refresh()
+		return true
 	} catch (e) {
-		addNotification({
-			title: formatMessage(commonMessages.deleteFailedLabel),
-			text: e instanceof Error ? e.message : '',
-			type: 'error',
-		})
+		notifyError(formatMessage(commonMessages.deleteFailedLabel), e)
+		return false
 	}
 }
 
-async function handleReadFile(path: string): Promise<string> {
-	const bytes = await invoke<number[]>('plugin:files|file_read', {
-		instanceId: instanceId.value,
-		path,
+async function writeFile(file: FileInfo, content: ArrayBuffer) {
+	if (file.type !== 'file') return
+	await writeBytes(file.path, new Uint8Array(content))
+	await queryClient.invalidateQueries({
+		queryKey: instanceKeys.fileContent(instanceId.value, file.path),
 	})
-	return new TextDecoder().decode(new Uint8Array(bytes))
 }
 
-async function handleReadFileAsBlob(path: string): Promise<Blob> {
-	const bytes = await invoke<number[]>('plugin:files|file_read', {
-		instanceId: instanceId.value,
-		path,
-	})
-	return new Blob([new Uint8Array(bytes)])
-}
-
-async function handleWriteFile(path: string, content: string) {
-	await writeBytes(path, new TextEncoder().encode(content))
-}
-
-async function handleDownloadFile(path: string, _fileName: string) {
+async function downloadFile(file: FileInfo) {
 	await invoke('plugin:files|file_save_as', {
 		instanceId: instanceId.value,
-		filePath: path,
+		filePath: toRelativePath(file.path),
 	})
 }
 
@@ -306,9 +315,10 @@ const uploadState = ref<UploadState>({
 	totalFiles: 0,
 })
 
-async function handleUploadFiles(files: File[]) {
+async function uploadFiles(files: File[]) {
 	if (files.length === 0) return
 
+	const directory = currentDirectory.value.path
 	uploadState.value = {
 		isUploading: true,
 		currentFileName: '',
@@ -322,38 +332,29 @@ async function handleUploadFiles(files: File[]) {
 		for (const file of files) {
 			uploadState.value.currentFileName = file.name
 			const buffer = await file.arrayBuffer()
-			const targetPath = currentPath.value ? `${currentPath.value}/${file.name}` : file.name
-			await writeBytes(targetPath, new Uint8Array(buffer))
+			await writeBytes(childPath(directory, file.name), new Uint8Array(buffer))
 			uploadState.value.completedFiles++
 			uploadState.value.uploadedBytes += file.size
 			uploadState.value.currentFileProgress = 1
 		}
 	} catch (e) {
-		addNotification({
-			title: formatMessage(commonMessages.uploadFailedLabel),
-			text: e instanceof Error ? e.message : '',
-			type: 'error',
-		})
+		notifyError(formatMessage(commonMessages.uploadFailedLabel), e)
 	} finally {
 		uploadState.value.isUploading = false
 		await refresh()
 	}
 }
 
-async function handleExtractFile(path: string, override: boolean, dry: boolean) {
+async function extractFile(path: string, override: boolean, dry: boolean) {
 	try {
-		return await invoke('plugin:files|file_extract_zip', {
+		return await invoke<ExtractDryRunResult | undefined>('plugin:files|file_extract_zip', {
 			instanceId: instanceId.value,
-			filePath: path,
+			filePath: toRelativePath(path),
 			overrideConflicts: override,
 			dryRun: dry,
 		})
 	} catch (e) {
-		addNotification({
-			title: formatMessage(commonMessages.extractFailedLabel),
-			text: e instanceof Error ? e.message : '',
-			type: 'error',
-		})
+		notifyError(formatMessage(commonMessages.extractFailedLabel), e)
 	}
 }
 
@@ -365,39 +366,50 @@ useAppEvent('instance', async (event) => {
 	}
 })
 
+/**
+ * Only the first directory load gates the whole page. Later directory loads are shown by the
+ * files layout itself, so its tabs and sidebar stay in place while a directory loads.
+ */
+const initialLoadPending = ref(true)
+watch(
+	() => directoryTree.get(currentDirectory.value).isLoading.value,
+	(loading) => {
+		if (!loading) initialLoadPending.value = false
+	},
+)
+
 watch(instanceId, async () => {
 	debug('watch instance.id: changed to', instanceId.value)
-	firstPaintPending.value = true
-	currentPath.value = ''
-	editingFile.value = null
+	initialLoadPending.value = true
+	currentLocation.value = infoFrom('/')
 	expandedDirectories.value = []
 	await instanceRootQuery.refetch()
 	await refresh()
 })
 
+await instanceRootQuery.suspense()
+await queryClient.ensureQueryData(directoryQueryOptions('/')).catch(() => undefined)
+initialLoadPending.value = false
+
 provideFileManager({
+	workspaceId: computed(() => (instanceId.value ? `instance:${instanceId.value}` : null)),
 	isReadOnly,
 	readOnlyReason: computed(() => formatMessage(messages.readOnly)),
-	currentItems: items,
 	directoryTree,
-	loading,
-	error,
-	currentPath,
+	loading: computed(() => directoryTree.get(currentDirectory.value).isLoading.value),
+	error: computed(() => directoryTree.get(currentDirectory.value).loadError.value ?? null),
+	currentFile: computed(() => currentLocation.value),
+	currentDirectory,
 	navigateTo,
-	editingFile,
-	startEditing,
-	stopEditing,
-	createItem: handleCreateItem,
-	renameItem: handleRenameItem,
-	moveItem: handleMoveItem,
-	deleteItem: handleDeleteItem,
-	readFile: handleReadFile,
-	readFileAsBlob: handleReadFileAsBlob,
-	writeFile: handleWriteFile,
-	downloadFile: handleDownloadFile,
-	uploadFiles: handleUploadFiles,
+	createItem,
+	renameItem,
+	moveItem,
+	deleteItem,
+	writeFile,
+	downloadFile,
+	uploadFiles,
 	uploadState,
-	extractFile: handleExtractFile,
+	extractFile,
 	refresh,
 	isRefreshing,
 	basePath: instanceRoot,
@@ -409,7 +421,7 @@ provideFileManager({
 </script>
 
 <template>
-	<ReadyTransition :pending="firstPaintPending">
+	<ReadyTransition :pending="initialLoadPending">
 		<div class="[--files-viewport-height:calc(100vh_-_var(--top-bar-height))]">
 			<FilePageLayout :show-refresh-button="true" />
 		</div>
diff --git a/apps/app-frontend/src/pages/instance/query-options.ts b/apps/app-frontend/src/pages/instance/query-options.ts
index 988bac2a4ca..248c56e92a9 100644
--- a/apps/app-frontend/src/pages/instance/query-options.ts
+++ b/apps/app-frontend/src/pages/instance/query-options.ts
@@ -24,6 +24,8 @@ export const instanceKeys = {
 	rootPath: (instanceId: string) => [...instanceKeys.detail(instanceId), 'root-path'] as const,
 	files: (instanceId: string, path: string) =>
 		[...instanceKeys.detail(instanceId), 'files', path] as const,
+	fileContent: (instanceId: string, path: string) =>
+		[...instanceKeys.detail(instanceId), 'file-content', path] as const,
 	console: (instanceId: string) => [...instanceKeys.detail(instanceId), 'console'] as const,
 	logs: (instanceId: string) => [...instanceKeys.detail(instanceId), 'logs'] as const,
 	installedProjectIds: (instanceId: string, source: 'content' | 'worlds') =>
diff --git a/apps/frontend/src/composables/featureFlags.ts b/apps/frontend/src/composables/featureFlags.ts
index 8cd1a685da3..18d01a25bee 100644
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -35,6 +35,7 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
 	searchBackground: false,
 	advancedDebugInfo: false,
 	FilesRefreshButton: false,
+	filesTabRework: false,
 	showProjectPageDownloadModalServersPromo: false,
 	showProjectPageCreateServersTooltip: true,
 	showProjectPageQuickServerButton: false,
diff --git a/apps/frontend/src/providers/setup/page-context.ts b/apps/frontend/src/providers/setup/page-context.ts
index 3015f6b6c6f..3f4b8e05ea9 100644
--- a/apps/frontend/src/providers/setup/page-context.ts
+++ b/apps/frontend/src/providers/setup/page-context.ts
@@ -13,6 +13,7 @@ export function setupPageContextProvider() {
 		adConsentAvailable: ref(false),
 		featureFlags: {
 			serverRamAsBytesAlwaysOn: computed(() => featureFlags.value.serverRamAsBytesAlwaysOn),
+			filesTabRework: computed(() => featureFlags.value.filesTabRework),
 		},
 		openExternalUrl: (url) => window.open(url, '_blank'),
 	})
diff --git a/packages/app-lib/src/state/settings.rs b/packages/app-lib/src/state/settings.rs
index 47490ad1996..836f86ecba9 100644
--- a/packages/app-lib/src/state/settings.rs
+++ b/packages/app-lib/src/state/settings.rs
@@ -104,6 +104,7 @@ pub enum FeatureFlag {
     ServerProjectQa,
     I18nDebug,
     LocalhostSignIn,
+    FilesTabRework,
 }
 
 impl Settings {
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
index b284d3918a9..4bee38ec7ec 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
@@ -11,7 +11,7 @@
 			>
 				<div class="m-0 flex min-w-0 flex-shrink list-none items-center p-0">
 					<div
-						v-if="hasNav ? (smallMode ? true : !sidebarOpen) : true"
+						v-if="sidebarToggleable && (hasNav ? (smallMode ? true : !sidebarOpen) : true)"
 						class="mr-2 flex flex-shrink-0 gap-3"
 					>
 						<IconButton
@@ -204,15 +204,18 @@ export type Properties = {
 	showRefreshButton?: boolean
 	showInstallFromUrl?: boolean
 	disabled?: boolean
-	disabledTooltip: string
+	disabledTooltip?: string
 	hasNav?: boolean
 	smallMode?: boolean
 	isRefreshing?: boolean
+	/** Whether the sidebar toggle is offered. */
+	sidebarToggleable?: boolean
 }
 
 const props = withDefaults(defineProps<Properties>(), {
 	hasNav: false,
 	smallMode: false,
+	sidebarToggleable: true,
 })
 
 const smallMode = computed(() => props.smallMode)
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
index ac375555e6e..93d789f6d1c 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
@@ -6,7 +6,7 @@
 		:style="{
 			'--files-navbar-height': `${navbarHeight}px`,
 			'--files-trailing-space': `${trailingSpace}px`,
-			'--files-table-header-top': `calc(var(--files-sticky-top, 0px) + ${navbarHeight}px + ${TAB_STRIP_HEIGHT}px)`,
+			'--files-table-header-top': `calc(var(--files-sticky-top, 0px) + ${navbarHeight}px + ${tabStripHeight}px)`,
 		}"
 	>
 		<div
@@ -19,13 +19,14 @@
 				:is-editor-find-open="ui.fileEditorApi.value?.isFindOpen.value ?? false"
 				:search-query="ui.searchQuery.value"
 				:show-refresh-button="ui.showRefreshButton.value"
-				:show-install-from-url="ctx.showInstallFromUrl"
+				:show-install-from-url="ui.showInstallFromUrl"
 				:base-id="ui.baseId"
 				:disabled="ui.isBusy.value"
 				:disabled-tooltip="ui.busyTooltip.value"
 				:small-mode="props.smallMode"
 				:can-go-back="ui.fileTabs.canGoBack.value"
 				:can-go-forward="ui.fileTabs.canGoForward.value"
+				:sidebar-toggleable="ui.advancedView.value"
 				@back="ui.fileTabs.back"
 				@forward="ui.fileTabs.forward"
 				@navigate="ui.navigateToSegment"
@@ -36,8 +37,8 @@
 				@upload="ui.initiateFileUpload"
 				@upload-zip="() => {}"
 				@unzip-from-url="ui.showUnzipFromUrlModal"
-				@refresh="ctx.refresh"
-				@share="() => ui.shareToMclogs()"
+				@refresh="ui.refresh"
+				@share="() => ui.shareEditorToMclogs()"
 				@find="() => ui.toggleFind()"
 				@toggle-sidebar="() => ui.setSidebarOpen(!sidebarOpen)"
 			/>
@@ -50,26 +51,28 @@
 				:class="
 					isFileActive
 						? 'h-[calc(var(--files-viewport-height,100dvh)_-_var(--files-sticky-top,0px)_-_var(--files-navbar-height,3rem)_-_18px_-_var(--files-trailing-space,0px))] min-h-[24rem]'
-						: 'sticky top-[calc(var(--files-sticky-top,0px)_+_var(--files-navbar-height,0px))] z-20 h-10'
+						: ui.advancedView.value
+							? 'sticky top-[calc(var(--files-sticky-top,0px)_+_var(--files-navbar-height,0px))] z-20 h-10'
+							: 'h-0'
 				"
 			>
 				<FileTabs />
 			</div>
 			<FileManagerError
-				v-if="!isFileActive && ctx.error.value"
+				v-if="!isFileActive && ui.error.value"
 				class="rounded-b-[20px]"
 				:title="formatMessage(messages.errorTitle)"
 				:message="formatMessage(messages.errorMessage)"
-				@refetch="ctx.refresh"
+				@refetch="ui.refresh"
 				@home="() => ui.navigateToSegment(0)"
 			/>
-			<div v-else-if="!isFileActive">
+			<div v-show="!isFileActive && !ui.error.value">
 				<FileUploadDragAndDrop
 					ref="fileUploadRef"
 					class=""
 					:disabled="ui.isBusy.value"
 					@drop-error="ui.handleDropError"
-					@files-dropped="ui.handleDroppedFiles"
+					@files-dropped="ui.uploadFiles"
 				>
 					<FileTableHeader
 						:sort-field="ui.sortField.value"
@@ -80,10 +83,16 @@
 						:columns="shownColumns"
 						:enabled-columns="enabledColumns"
 						:details-enabled="detailsEnabled"
+						:columns-adjustable="ui.advancedView.value"
+						:view-settings-enabled="ui.reworkEnabled.value"
+						:advanced-view="ui.advancedView.value"
+						:colored-icons="ui.coloredIcons.value"
 						@sort="ui.handleSort"
 						@toggle-all="ui.toggleSelectAll"
 						@toggle-column="toggleColumn"
 						@toggle-details="detailsEnabled = !detailsEnabled"
+						@toggle-advanced-view="ui.setAdvancedView(!ui.advancedView.value)"
+						@toggle-colored-icons="ui.setColoredIcons(!ui.coloredIcons.value)"
 					/>
 					<ReadyTransition :pending="listingPending">
 						<div
@@ -100,33 +109,14 @@
 									:file="item"
 									:index="visibleRange.start + idx"
 									:is-last="visibleRange.start + idx === filteredItems.length - 1"
-									:selected="ui.selectedItems.value.has(item.path)"
-									:write-disabled="ui.isBusy.value || !!ctx.isReadOnly?.(item)"
-									:write-disabled-tooltip="
-										ctx.isReadOnly?.(item) ? ctx.readOnlyReason?.value : ui.busyTooltip.value
-									"
 									:columns="shownColumns"
-									:has-hidden-details="hasHiddenDetails"
-									@extract="() => ui.handleExtractItem(item)"
-									@delete="() => ui.showDeleteModal(item)"
-									@rename="() => ui.showRenameModal(item)"
-									@download="() => ui.handleDownload(item)"
-									@zip="() => ui.handleZip(item)"
-									@move="() => ui.showMoveModal(item)"
-									@move-direct-to="ui.handleDirectMove"
-									@edit="() => ui.handleNavigateTo(item)"
-									@navigate="() => ui.handleNavigateTo(item)"
-									@open-in-new-tab="() => ui.handleOpenInNewTab(item)"
-									@hover="() => ui.handleItemPrefetch(item)"
-									@contextmenu="ui.handleContextMenu"
-									@toggle-select="() => ui.toggleItemSelection(item)"
-									@create="ui.showCreateModal"
-									@upload="ui.initiateFileUpload"
+									@navigate="ui.navigateTo"
+									@hover="ui.handleItemPrefetch"
 								/>
 							</div>
 						</div>
 						<div
-							v-else-if="ui.items.value.length === 0 && !ctx.error.value && !ctx.loading.value"
+							v-else-if="ui.items.value.length === 0 && !ui.error.value && !ui.loading.value"
 							class="flex h-full w-full items-center justify-center rounded-b-[20px] bg-surface-2 p-20"
 						>
 							<div class="flex flex-col items-center gap-4 text-center">
@@ -155,7 +145,6 @@ import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
 import { defineMessages, useVIntl } from '#ui/composables'
 import { useStickyObserver } from '#ui/composables/sticky-observer'
 import { findScrollableAncestor, useVirtualScroll } from '#ui/composables/virtual-scroll.ts'
-import { injectFileManager } from '#ui/layouts'
 import { injectLoadingState } from '#ui/providers/loading-state'
 
 import { useFileColumns } from '../composables/file-columns'
@@ -188,7 +177,6 @@ const messages = defineMessages({
 	},
 })
 
-const ctx = injectFileManager()
 const ui = injectFileBrowserUI()
 
 const props = withDefaults(
@@ -206,7 +194,7 @@ const isFileActive = computed(() => ui.fileTabs.activeLocation.value.type === 'f
 const filteredItems = computed(() => ui.filteredItems.value)
 
 /** Only the listing fades while a directory loads for the first time; tabs, navbar and sidebar stay put. */
-const listingPending = computed(() => ctx.loading.value && ui.items.value.length === 0)
+const listingPending = computed(() => ui.loading.value && ui.items.value.length === 0)
 
 const loadingState = injectLoadingState(null)
 let refreshToken: symbol | null = null
@@ -217,7 +205,7 @@ function endRefreshLoading() {
 }
 
 watch(
-	() => ctx.isRefreshing.value,
+	() => ui.isRefreshing.value,
 	(refreshing) => {
 		if (!refreshing) return endRefreshLoading()
 		if (loadingState && !refreshToken) refreshToken = loadingState.begin()
@@ -234,16 +222,21 @@ const {
 	visibleRange,
 	visibleTop,
 	visibleItems,
+	syncScrollState,
 } = useVirtualScroll(filteredItems, {
 	itemHeight: 3.25,
 	itemUnit: 'rem',
 	bufferSize: 5,
 })
 
-const { detailsEnabled, enabledColumns, shownColumns, hasHiddenDetails, toggleColumn } =
-	useFileColumns(ui.containerWidth)
+const { detailsEnabled, enabledColumns, shownColumns, toggleColumn } = useFileColumns(
+	ui.containerWidth,
+	ui.advancedView,
+)
 
 const TAB_STRIP_HEIGHT = 40
+/** The tab strip is hidden, along with the tabs feature, while the rework is disabled. */
+const tabStripHeight = computed(() => (ui.advancedView.value ? TAB_STRIP_HEIGHT : 0))
 
 const panelRoot = ref<HTMLElement | null>(null)
 const navbarWrapper = ref<HTMLElement | null>(null)
@@ -254,7 +247,7 @@ const tableHeaderStickyTop = computed(() => {
 	const hostOffset = navbarWrapper.value
 		? parseFloat(getComputedStyle(navbarWrapper.value).top) || 0
 		: 0
-	return hostOffset + navbarHeight.value + TAB_STRIP_HEIGHT
+	return hostOffset + navbarHeight.value + tabStripHeight.value
 })
 
 const fileUploadRef = ref<InstanceType<typeof FileUploadDragAndDrop>>()
@@ -363,6 +356,11 @@ function setViewerSnapping(enabled: boolean) {
 }
 
 watch(isFileActive, setViewerSnapping, { flush: 'post' })
+
+/** The listing stays mounted (hidden) while a file is open, so it has to re-measure when shown again. */
+watch(isFileActive, (active) => {
+	if (!active) nextTick(syncScrollState)
+})
 onMounted(() => {
 	setViewerSnapping(isFileActive.value)
 	if (!isFileActive.value) return
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
index 09c693d2413..9436ddf9977 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
@@ -153,6 +153,7 @@ const props = withDefaults(
 	>(),
 	{
 		hasNav: true,
+		sidebarToggleable: true,
 	},
 )
 
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue b/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
index cf48c80ccde..f503d18ac67 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
@@ -1,5 +1,10 @@
 <template>
-	<Tooltip :delay="{ hover: 850, unhover: 100 }" :hoverable="true" :allow-transfer="false">
+	<Tooltip
+		:delay="{ hover: 850, unhover: 100 }"
+		:hoverable="true"
+		:allow-transfer="false"
+		:disabled="hiddenDetails.length === 0"
+	>
 		<li
 			role="option"
 			:class="[containerClasses, isDragSource ? 'opacity-50' : '', compact ? 'h-8' : 'h-[3.25rem]']"
@@ -39,7 +44,7 @@
 					tabindex="-1"
 					class="pointer-events-auto -mr-1 flex size-5 shrink-0 items-center justify-center rounded border-none bg-transparent p-0 text-secondary hover:bg-surface-5 hover:text-contrast h-full"
 					:aria-label="formatMessage(expanded ? messages.collapseFolder : messages.expandFolder)"
-					@click.stop="emit('toggle-expand')"
+					@click.stop="emit('toggle-expand', file)"
 					@pointerdown.stop
 				>
 					<ChevronRightIcon
@@ -53,13 +58,17 @@
 					class="pointer-events-auto"
 					:model-value="selected"
 					@click.stop
-					@update:model-value="emit('toggle-select')"
+					@update:model-value="ui.toggleItemSelection(file)"
 				/>
 				<div class="pointer-events-none flex size-5 shrink-0 items-center justify-center">
 					<component
-						:is="iconComponent"
-						class="group-hover:text-contrast group-focus:text-contrast"
-						:class="compact ? 'size-4' : 'size-5'"
+						:is="iconStyle.icon"
+						:class="[
+							ui.coloredIcons.value
+								? iconStyle.color
+								: 'group-hover:text-contrast group-focus:text-contrast',
+							compact ? 'size-4' : 'size-5',
+						]"
 					/>
 				</div>
 				<div class="pointer-events-none flex flex-col truncate">
@@ -116,15 +125,13 @@
 				>
 					{{ formatMessage(messages.details) }}
 				</h3>
-				<div v-for="key in FILE_COLUMNS_ORDER" :key="key" class="gap-1 grid grid-cols-2">
-					<template v-if="columnValues[key] != null">
-						<span class="text-nowrap text-sm text-secondary">
-							{{ formatMessage(messages[key]) }}
-						</span>
-						<span class="text-nowrap text-sm text-secondary">
-							{{ columnValues[key] ?? ' - ' }}
-						</span>
-					</template>
+				<div v-for="key in hiddenDetails" :key="key" class="gap-1 grid grid-cols-2">
+					<span class="text-nowrap text-sm text-secondary">
+						{{ formatMessage(messages[key]) }}
+					</span>
+					<span class="text-nowrap text-sm text-secondary">
+						{{ columnValues[key] }}
+					</span>
 				</div>
 			</div>
 		</template>
@@ -133,26 +140,20 @@
 
 <script setup lang="ts">
 import {
-	BoxIcon,
-	BracesIcon,
 	ChevronRightIcon,
 	ClipboardCopyIcon,
 	DownloadIcon,
 	EditIcon,
 	FileIcon,
 	FolderArchiveIcon,
-	FolderCogIcon,
 	FolderOpenIcon,
-	GlassesIcon,
-	GlobeIcon,
 	MoreHorizontalIcon,
 	PackageOpenIcon,
-	PaintbrushIcon,
 	PlusIcon,
 	RightArrowIcon,
 	TrashIcon,
 } from '@modrinth/assets'
-import { computed, ref } from 'vue'
+import { computed, ref, toValue } from 'vue'
 
 import { Tooltip } from '#ui/components'
 import type { ButtonMenuLeafOption, ButtonMenuOption } from '#ui/components/base/buttons'
@@ -161,10 +162,8 @@ import Checkbox from '#ui/components/base/Checkbox.vue'
 import { useFormatBytes } from '#ui/composables'
 import { useFormatDateTime } from '#ui/composables/format-date-time'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { infoFrom, injectFileManager } from '#ui/layouts'
 import { useFileActions } from '#ui/layouts/shared/files-tab/composables/folder-actions.ts'
 import { injectNotificationManager } from '#ui/providers/web-notifications'
-import { getFileExtensionIcon } from '#ui/utils/auto-icons'
 import { commonMessages } from '#ui/utils/common-messages'
 import { canOpenInFileEditor, getFileExtension } from '#ui/utils/file-extensions'
 
@@ -176,12 +175,13 @@ import {
 	startFileDrag,
 	wasRecentDrag,
 } from '../composables/file-drag-state'
+import { injectFileBrowserUI } from '../providers/file-browser-ui'
 import type { FileItem } from '../types'
-import { joinDisplayPath } from '../utils'
+import { childPath, fileIconFor, infoFrom, joinDisplayPath } from '../utils'
 
 const { formatMessage } = useVIntl()
 const { addNotification } = injectNotificationManager()
-const ctx = injectFileManager()
+const ui = injectFileBrowserUI()
 
 const basePaddingFactor = 0.75
 
@@ -236,13 +236,8 @@ const props = defineProps<{
 	index: number
 	file: FileItem
 	isLast: boolean
-	selected: boolean
-	writeDisabled?: boolean
-	writeDisabledTooltip?: string
-	/** Detail columns to render, in order. */
+	/** Detail columns to render, in order. Details not shown as columns are offered in a tooltip. */
 	columns?: FileColumn[]
-	/** Whether some details aren't shown as columns, so hovering offers them in a tooltip. */
-	hasHiddenDetails?: boolean
 	selectionWithinActionMenu?: boolean
 	/** Smaller row, used by the sidebar tree. */
 	compact?: boolean
@@ -260,28 +255,24 @@ const props = defineProps<{
 	activeGuideLevel?: number
 }>()
 
+/**
+ * Row actions go straight to the browser UI context. Only what differs between the listing and
+ * the sidebar tree is emitted, with the row's file as payload, so parents can bind handlers by
+ * reference; inline handlers would re-render every row whenever the parent renders.
+ */
 const emit = defineEmits<{
-	(
-		e:
-			| 'rename'
-			| 'move'
-			| 'download'
-			| 'zip'
-			| 'delete'
-			| 'edit'
-			| 'extract'
-			| 'hover'
-			| 'navigate'
-			| 'open-in-new-tab',
-		item: Pick<FileItem, 'name' | 'type' | 'path'>,
-	): void
-	(e: 'create', type: 'file' | 'directory'): void
-	(e: 'upload', type: 'file' | 'zip'): void
-	(e: 'moveDirectTo', item: Pick<FileItem, 'name' | 'type' | 'path'>, destination: string): void
-	(e: 'contextmenu', event: MouseEvent, options: ButtonMenuOption[]): void
-	(e: 'toggle-select' | 'toggle-expand'): void
+	navigate: [file: FileItem]
+	hover: [file: FileItem]
+	'toggle-expand': [file: FileItem]
 }>()
 
+const selected = computed(() => ui.selectedItems.value.has(props.file.path))
+const readOnly = computed(() => !!ui.isReadOnly?.(props.file))
+const writeDisabled = computed(() => ui.isBusy.value || readOnly.value)
+const writeDisabledTooltip = computed(() =>
+	readOnly.value ? toValue(ui.readOnlyReason) : ui.busyTooltip.value,
+)
+
 const canExpand = computed(
 	() => !!props.isTreeRow && props.file.type === 'directory' && props.expandable !== false,
 )
@@ -289,7 +280,9 @@ const canExpand = computed(
 const shownColumnDefinitions = computed(() =>
 	(props.columns ?? []).flatMap((id) => FILE_COLUMNS.filter((column) => column.id === id)),
 )
-const canOpenInTab = computed(() => props.file.type === 'directory' || isEditableFile.value)
+const canOpenInTab = computed(
+	() => ui.advancedView.value && (props.file.type === 'directory' || isEditableFile.value),
+)
 
 const isDropTarget = computed(
 	() =>
@@ -320,7 +313,7 @@ const containerClasses = computed(() => {
 			? '!bg-brand-highlight'
 			: props.active
 				? 'bg-brand-highlight'
-				: props.selected
+				: selected.value
 					? 'bg-surface-2.5'
 					: props.compact
 						? 'bg-transparent'
@@ -337,21 +330,21 @@ const containerClasses = computed(() => {
 
 const fileExtension = computed(() => getFileExtension(props.file.name))
 
-const canExtract = computed(() => fileExtension.value === 'zip' && !!ctx.extractFile)
+const canExtract = computed(() => fileExtension.value === 'zip' && !!ui.extractFile)
 
 function getFullPath() {
-	return joinDisplayPath(ctx.basePath?.value, props.file.path)
+	return joinDisplayPath(toValue(ui.basePath), props.file.path)
 }
 
 const { options } = useFileActions(
-	(type) => emit('create', type),
-	(type) => emit('upload', type),
+	(type) => ui.showCreateModal(type),
+	() => ui.initiateFileUpload(),
 )
 
 const menuOptions = computed<ButtonMenuOption[]>(() => {
 	const item = infoFrom(props.file)
-	const wd = props.writeDisabled
-	const wdTooltip = props.writeDisabledTooltip
+	const wd = writeDisabled.value
+	const wdTooltip = writeDisabledTooltip.value
 	return [
 		{
 			type: 'submenu',
@@ -363,10 +356,8 @@ const menuOptions = computed<ButtonMenuOption[]>(() => {
 		{
 			id: 'select-entry',
 			label: formatMessage(commonMessages.selectEntryLabel),
-			icon: iconComponent.value,
-			action: () => {
-				emit('toggle-select')
-			},
+			icon: iconStyle.value.icon,
+			action: () => ui.toggleItemSelection(props.file),
 			shown: props.selectionWithinActionMenu,
 		},
 		{
@@ -374,7 +365,7 @@ const menuOptions = computed<ButtonMenuOption[]>(() => {
 			label: formatMessage(messages.openInNewTab),
 			icon: PlusIcon,
 			shown: canOpenInTab.value,
-			action: () => emit('open-in-new-tab', item),
+			action: () => ui.handleOpenInNewTab(item),
 		},
 		{ type: 'divider' },
 		{
@@ -402,8 +393,8 @@ const menuOptions = computed<ButtonMenuOption[]>(() => {
 			id: 'open-in-folder',
 			label: formatMessage(commonMessages.openInFolderButton),
 			icon: FolderOpenIcon,
-			shown: !!ctx.openInFolder,
-			action: () => ctx.openInFolder?.(getFullPath()),
+			shown: !!ui.openInFolder,
+			action: () => ui.openInFolder?.(getFullPath()),
 		},
 		{ type: 'divider' },
 		{
@@ -413,26 +404,26 @@ const menuOptions = computed<ButtonMenuOption[]>(() => {
 			shown: canExtract.value,
 			disabled: wd,
 			tooltip: wd ? wdTooltip : undefined,
-			action: () => emit('extract', item),
+			action: () => ui.handleExtractItem(item),
 		},
 		{ type: 'divider', shown: canExtract.value },
 		{
 			id: 'zip',
 			label: formatMessage(messages.createZip),
 			icon: FolderArchiveIcon,
-			shown: props.file.type === 'directory' && !!ctx.zipFolder,
+			shown: props.file.type === 'directory' && !!ui.zipFolder,
 			disabled: wd,
 			tooltip: wd ? wdTooltip : undefined,
-			action: () => emit('zip', item),
+			action: () => ui.zipFolder?.(item),
 		},
-		{ type: 'divider', shown: props.file.type === 'directory' && !!ctx.zipFolder },
+		{ type: 'divider', shown: props.file.type === 'directory' && !!ui.zipFolder },
 		{
 			id: 'rename',
 			label: formatMessage(commonMessages.renameButton),
 			icon: EditIcon,
 			disabled: wd,
 			tooltip: wd ? wdTooltip : undefined,
-			action: () => emit('rename', item),
+			action: () => ui.showRenameModal(props.file),
 		},
 		{
 			id: 'move',
@@ -440,13 +431,13 @@ const menuOptions = computed<ButtonMenuOption[]>(() => {
 			icon: RightArrowIcon,
 			disabled: wd,
 			tooltip: wd ? wdTooltip : undefined,
-			action: () => emit('move', item),
+			action: () => ui.showMoveModal(props.file),
 		},
 		{
 			id: 'download',
-			label: ctx.downloadButtonLabel ?? formatMessage(commonMessages.downloadButton),
+			label: ui.downloadButtonLabel ?? formatMessage(commonMessages.downloadButton),
 			icon: DownloadIcon,
-			action: () => emit('download', item),
+			action: () => ui.downloadFile(item),
 			shown: props.file.type !== 'directory',
 		},
 		{
@@ -455,25 +446,13 @@ const menuOptions = computed<ButtonMenuOption[]>(() => {
 			icon: TrashIcon,
 			disabled: wd,
 			tooltip: wd ? wdTooltip : undefined,
-			action: () => emit('delete', item),
+			action: () => ui.showDeleteModal(props.file),
 			tone: 'red',
 		},
 	]
 })
 
-const iconComponent = computed(() => {
-	if (props.file.type === 'directory') {
-		if (props.file.name === 'config') return FolderCogIcon
-		if (props.file.name === 'world' || props.file.name === 'saves') return GlobeIcon
-		if (props.file.name === 'mods') return BoxIcon
-		if (props.file.name === 'resourcepacks') return PaintbrushIcon
-		if (props.file.name === 'shaderpacks') return GlassesIcon
-		if (props.file.name === 'datapacks') return BracesIcon
-		return FolderOpenIcon
-	}
-
-	return getFileExtensionIcon(fileExtension.value)
-})
+const iconStyle = computed(() => fileIconFor(props.file))
 
 const formattedModifiedDate = computed(() => {
 	const date = new Date(props.file.modified * 1000)
@@ -502,14 +481,28 @@ const columnValues = computed<Record<FileColumn, string | null>>(() => ({
 	modified: formattedModifiedDate.value,
 }))
 
+/**
+ * Details this row has a value for that aren't visible as columns. Checked against the raw
+ * entry, so the formatted values are only computed once the tooltip actually shows.
+ */
+const hiddenDetails = computed(() => {
+	const shown = props.columns ?? []
+	return FILE_COLUMNS_ORDER.filter((key) => {
+		if (shown.includes(key)) return false
+		if (key === 'size') return props.file.size != null
+		if (key === 'items') return props.file.type === 'directory'
+		return true
+	})
+})
+
 function openContextMenu(event: MouseEvent) {
 	event.preventDefault()
-	emit('contextmenu', event, menuOptions.value)
+	ui.handleContextMenu(event, menuOptions.value)
 }
 
 function handleMouseEnter() {
 	hoveringToEdit.value = true
-	emit('hover', { name: props.file.name, type: props.file.type, path: props.file.path })
+	emit('hover', props.file)
 }
 
 function handleMouseLeave() {
@@ -521,17 +514,14 @@ const isNavigating = ref(false)
 function selectItem(event?: MouseEvent) {
 	if (wasRecentDrag()) return
 	if (event?.ctrlKey || event?.metaKey) {
-		emit('toggle-select')
+		ui.toggleItemSelection(props.file)
 		return
 	}
 	if (isNavigating.value) return
 	isNavigating.value = true
 
-	const item = { name: props.file.name, type: props.file.type, path: props.file.path }
-	if (props.file.type === 'directory') {
-		emit('navigate', item)
-	} else if (props.file.type === 'file' && isEditableFile.value) {
-		emit('edit', item)
+	if (props.file.type === 'directory' || isEditableFile.value) {
+		emit('navigate', props.file)
 	}
 
 	setTimeout(() => {
@@ -542,15 +532,15 @@ function selectItem(event?: MouseEvent) {
 function handleAuxClick(event: MouseEvent) {
 	if (event.button !== 1 || !canOpenInTab.value) return
 	event.preventDefault()
-	emit('open-in-new-tab', { name: props.file.name, type: props.file.type, path: props.file.path })
+	ui.handleOpenInNewTab(props.file)
 }
 
 function handleKeydown(event: KeyboardEvent) {
 	if (event.key === 'Enter') {
 		selectItem()
 	} else if (canExpand.value) {
-		if (event.key === 'ArrowRight' && !props.expanded) emit('toggle-expand')
-		if (event.key === 'ArrowLeft' && props.expanded) emit('toggle-expand')
+		if (event.key === 'ArrowRight' && !props.expanded) emit('toggle-expand', props.file)
+		if (event.key === 'ArrowLeft' && props.expanded) emit('toggle-expand', props.file)
 	}
 }
 
@@ -560,7 +550,7 @@ function handlePointerDown(e: PointerEvent) {
 		{ name: props.file.name, type: props.file.type, path: props.file.path },
 		e,
 		(source, destination) => {
-			emit('moveDirectTo', source, destination)
+			ui.moveItem(source, childPath(destination, source.name))
 		},
 	)
 }
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
index 22a5230cef1..be3ede02326 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
@@ -11,17 +11,17 @@
 			:active-location="ui.activeLocation.value"
 			:search-query="ui.searchQuery.value"
 			:show-refresh-button="ui.showRefreshButton.value"
-			:show-install-from-url="ctx.showInstallFromUrl"
+			:show-install-from-url="ui.showInstallFromUrl"
 			:disabled="ui.isBusy.value"
 			:disabled-tooltip="ui.busyTooltip.value"
-			:is-refreshing="ctx.isRefreshing.value"
+			:is-refreshing="ui.isRefreshing.value"
 			@update:search-query="(value) => (ui.searchQuery.value = value)"
 			@create="ui.showCreateModal"
 			@upload="ui.initiateFileUpload"
 			@upload-zip="() => {}"
 			@unzip-from-url="ui.showUnzipFromUrlModal"
-			@refresh="() => ctx.refresh()"
-			@share="() => ui.shareToMclogs()"
+			@refresh="() => ui.refresh()"
+			@share="() => ui.shareEditorToMclogs()"
 			@find="() => ui.toggleFind()"
 			@toggle-sidebar="() => ui.setSidebarOpen(!ui.sidebarOpen.value)"
 		/>
@@ -38,13 +38,10 @@
 </template>
 
 <script setup lang="ts">
-import { injectFileManager } from '#ui/layouts/index.ts'
-
 import { injectFileBrowserUI } from '../providers/file-browser-ui'
 import FileActionBar from './FileActionBar.vue'
 import FileTree from './FileTree.vue'
 
-const ctx = injectFileManager()
 const ui = injectFileBrowserUI()
 
 withDefaults(
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
index f0072a7507a..aba99769e82 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
@@ -1,10 +1,15 @@
 <template>
 	<div
-		class="sticky top-[var(--files-table-header-top,0px)] z-10 flex h-[3rem] w-full select-none flex-row items-center justify-between bg-surface-3 pl-3 pr-3 font-medium transition-[border-radius] duration-100 border-0 border-t border-solid border-surface-5"
+		class="sticky top-[var(--files-table-header-top,0px)] z-10 flex h-[3rem] w-full select-none flex-row items-center justify-between bg-surface-3 pl-3 pr-3 font-medium transition-[border-radius] duration-100"
 		:class="
-			isStuck
-				? 'rounded-none border-0 border-y border-solid border-surface-4 shadow-md before:pointer-events-none before:absolute before:inset-x-0 before:-top-4 before:h-5 before:bg-surface-3'
-				: ''
+			[
+				isStuck
+					? 'rounded-none border-0 border-y border-solid border-surface-4 shadow-md before:pointer-events-none before:absolute before:inset-x-0 before:-top-4 before:h-5 before:bg-surface-3'
+					: '',
+				props.advancedView
+					? 'border-0 border-t border-solid border-surface-5'
+					: ''
+			]
 		"
 	>
 		<div class="flex min-w-0 flex-1 items-center gap-3">
@@ -54,9 +59,10 @@
 			</button>
 			<div class="flex min-w-[51px] shrink-0 justify-end">
 				<TeleportOverflowMenu
-					v-tooltip="formatMessage(messages.columns)"
+					v-if="viewSettingsEnabled"
+					v-tooltip="formatMessage(messages.viewSettings)"
 					type="quiet"
-					:label="formatMessage(messages.columns)"
+					:label="formatMessage(messages.viewSettings)"
 					:options="columnOptions"
 				>
 					<SettingsIcon class="h-5 w-5" aria-hidden="true" />
@@ -85,14 +91,22 @@ const messages = defineMessages({
 		id: 'files.table-header.name',
 		defaultMessage: 'Name',
 	},
-	columns: {
-		id: 'files.table-header.columns',
-		defaultMessage: 'Columns',
-	},
 	showDetails: {
 		id: 'files.table-header.show-details',
 		defaultMessage: 'Show details',
 	},
+	viewSettings: {
+		id: 'files.table-header.view-settings',
+		defaultMessage: 'View settings',
+	},
+	advancedView: {
+		id: 'files.table-header.advanced-view',
+		defaultMessage: 'Advanced view',
+	},
+	coloredIcons: {
+		id: 'files.table-header.colored-icons',
+		defaultMessage: 'Colored icons',
+	},
 })
 
 const columnMessages = defineMessages({
@@ -125,6 +139,12 @@ const props = defineProps<{
 	/** Columns the user has chosen to show. */
 	enabledColumns: FileColumn[]
 	detailsEnabled: boolean
+	/** Whether the column picker is offered. */
+	columnsAdjustable?: boolean
+	/** Whether the view settings menu is offered at all. */
+	viewSettingsEnabled?: boolean
+	advancedView?: boolean
+	coloredIcons?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -132,6 +152,8 @@ const emit = defineEmits<{
 	'toggle-all': []
 	'toggle-column': [column: FileColumn]
 	'toggle-details': []
+	'toggle-advanced-view': []
+	'toggle-colored-icons': []
 }>()
 
 const shownColumnDefinitions = computed(() =>
@@ -140,15 +162,32 @@ const shownColumnDefinitions = computed(() =>
 
 const columnOptions = computed<ButtonMenuOption[]>(() => [
 	{
+		id: 'advanced-view',
+		label: formatMessage(messages.advancedView),
+		selected: props.advancedView,
+		remainOpen: true,
+		action: () => emit('toggle-advanced-view'),
+	},
+	{
+		id: 'colored-icons',
+		label: formatMessage(messages.coloredIcons),
+		selected: props.coloredIcons,
+		remainOpen: true,
+		action: () => emit('toggle-colored-icons'),
+	},
+	{ type: 'divider', shown: props.columnsAdjustable },
+	{
+		shown: props.columnsAdjustable,
 		id: 'show-details',
 		label: formatMessage(messages.showDetails),
 		selected: props.detailsEnabled,
 		remainOpen: true,
 		action: () => emit('toggle-details'),
 	},
-	{ type: 'divider' },
+	{ type: 'divider', shown: props.columnsAdjustable },
 	...FILE_COLUMNS.map(
 		(column): ButtonMenuOption => ({
+			shown: props.columnsAdjustable,
 			id: `column-${column.id}`,
 			label: formatMessage(columnMessages[column.id]),
 			selected: props.enabledColumns.includes(column.id),
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
index 586fabebf7e..42eba4a6627 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
@@ -21,12 +21,6 @@
 				:file="row.item"
 				:index="index"
 				:is-last="index + 1 == rows.length"
-				:selected="ui.selectedItems.value.has(row.item.path)"
-				:write-disabled="ui.isBusy.value || !!ctx.isReadOnly?.(row.item)"
-				:write-disabled-tooltip="
-					ctx.isReadOnly?.(row.item) ? ctx.readOnlyReason?.value : ui.busyTooltip.value
-				"
-				has-hidden-details
 				:selection-within-action-menu="true"
 				compact
 				:depth="row.depth"
@@ -35,22 +29,9 @@
 				is-tree-row
 				:active="row.path === activePath"
 				:active-guide-level="activeGuideLevel(row.path)"
-				@extract="() => ui.handleExtractItem(row.item)"
-				@delete="() => ui.showDeleteModal(row.item)"
-				@rename="() => ui.showRenameModal(row.item)"
-				@download="() => ui.handleDownload(row.item)"
-				@zip="() => ui.handleZip(row.item)"
-				@move="() => ui.showMoveModal(row.item)"
-				@move-direct-to="ui.handleDirectMove"
-				@edit="() => ui.handleNavigateTo(row.item)"
-				@navigate="() => openDirectory(row.path, row.item)"
-				@open-in-new-tab="() => ui.handleOpenInNewTab(row.item)"
-				@toggle-expand="() => toggleExpanded(row.path)"
-				@hover="() => prefetch(row)"
-				@contextmenu="ui.handleContextMenu"
-				@toggle-select="() => ui.toggleItemSelection(row.item)"
-				@create="ui.showCreateModal"
-				@upload="ui.initiateFileUpload"
+				@navigate="openDirectory"
+				@toggle-expand="toggleExpanded"
+				@hover="prefetch"
 			/>
 		</template>
 	</div>
@@ -65,7 +46,6 @@ import { infoFrom, parentInfoFrom } from '#ui/layouts/shared/files-tab/utils.ts'
 import { canOpenInFileEditor } from '#ui/utils/file-extensions'
 
 import { injectFileBrowserUI } from '../providers/file-browser-ui'
-import { injectFileManager } from '../providers/file-manager'
 import type { FileItem } from '../types'
 import FileRow from './FileRow.vue'
 
@@ -104,9 +84,8 @@ const messages = defineMessages({
 	},
 })
 
-const ctx = injectFileManager()
 const ui = injectFileBrowserUI()
-const tree = ctx.directoryTree
+const tree = ui.directoryTree
 
 const activePath = computed(() => ui.fileTabs.activeLocation.value.path)
 const activeDirectory = computed(() => parentInfoFrom(ui.fileTabs.activeLocation.value))
@@ -116,7 +95,7 @@ const activeDirectoryDepth = computed(
 
 function activeGuideLevel(path: string) {
 	if (activeDirectoryDepth.value === 0) return undefined
-	return path.startsWith(`${activeDirectory.value}/`) ? activeDirectoryDepth.value : undefined
+	return path.startsWith(`${activeDirectory.value.path}/`) ? activeDirectoryDepth.value : undefined
 }
 const expandedPaths = computed(() => new Set(tree.expandedEntries.value))
 const query = computed(() => ui.searchQuery.value.trim().toLowerCase())
@@ -126,9 +105,11 @@ function isExpandable(item: FileItem) {
 	return item.type === 'directory' && item.count !== 0
 }
 
+const nameCollator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' })
+
 function compareEntries(a: FileItem, b: FileItem) {
 	if (a.type !== b.type) return a.type === 'directory' ? -1 : 1
-	return a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' })
+	return nameCollator.compare(a.name, b.name)
 }
 
 function collectRows(path: string, depth: number): TreeRow[] {
@@ -170,17 +151,16 @@ function setExpanded(path: string, expanded: boolean) {
 		: current.filter((entry) => entry !== path)
 }
 
-function toggleExpanded(path: string) {
-	setExpanded(path, !expandedPaths.value.has(path))
+function toggleExpanded(item: FileItem) {
+	setExpanded(item.path, !expandedPaths.value.has(item.path))
 }
 
-function openDirectory(path: string, item: FileItem) {
-	if (isExpandable(item)) setExpanded(path, true)
-	ui.handleNavigateTo(item)
+function openDirectory(item: FileItem) {
+	if (isExpandable(item)) setExpanded(item.path, true)
+	ui.navigateTo(item)
 }
 
-function prefetch(row: Extract<TreeRow, { type: 'item' }>) {
-	const { item } = row
+function prefetch(item: FileItem) {
 	if (item.type === 'directory' || canOpenInFileEditor(item.name)) {
 		tree.prefetch(item)
 	}
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTab.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTab.vue
index 263b3cb4c4f..4b70c27bbbc 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTab.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTab.vue
@@ -5,7 +5,7 @@
 		:title="location?.path"
 		@auxclick.prevent="(event) => event.button === 1 && close()"
 	>
-		<component :is="icon" class="size-4 shrink-0 text-secondary" />
+		<component :is="iconStyle.icon" class="size-4 shrink-0" :class="iconStyle.color" />
 		<span class="truncate" :class="isActive ? 'font-semibold text-contrast' : 'text-secondary'">
 			{{ label }}
 		</span>
@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { FileIcon, FolderOpenIcon, XIcon } from '@modrinth/assets'
+import { HomeIcon, XIcon } from '@modrinth/assets'
 import type { DockviewPanelApi } from 'dockview-vue'
 import { computed } from 'vue'
 
@@ -42,6 +42,7 @@ import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
 import { currentLocation, type FileTabPanelParams } from '../../composables/file-tabs'
 import { injectFileBrowserUI } from '../../providers/file-browser-ui'
+import { fileIconFor } from '../../utils'
 
 const props = defineProps<{
 	params: {
@@ -79,7 +80,12 @@ const label = computed(() => {
 	const path = location.value?.path ?? '/'
 	return path.split('/').filter(Boolean).pop() ?? formatMessage(messages.home)
 })
-const icon = computed(() => (location.value?.kind === 'file' ? FileIcon : FolderOpenIcon))
+const iconStyle = computed(() => {
+	const current = location.value
+	if (!current || current.path === '/') return { icon: HomeIcon, color: 'text-secondary' }
+	const style = fileIconFor(current)
+	return ui.coloredIcons.value ? style : { ...style, color: 'text-secondary' }
+})
 const isActive = computed(() => ui.fileTabs.activeTabId.value === tabId)
 const canClose = computed(() => ui.fileTabs.tabs.value.length > 1)
 const isDirty = computed(() => ui.fileTabs.editors.get(tabId)?.hasUnsavedChanges.value ?? false)
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabsActions.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabsActions.vue
index 78a5137174c..b4559a5c110 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabsActions.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabsActions.vue
@@ -18,6 +18,7 @@ import { PlusIcon } from '@modrinth/assets'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
 import { injectFileBrowserUI } from '../../providers/file-browser-ui'
+import { infoFrom } from '../../utils'
 
 defineProps<{
 	params?: unknown
@@ -35,6 +36,6 @@ const messages = defineMessages({
 const ui = injectFileBrowserUI()
 
 function openNewTab() {
-	ui.fileTabs.openTab({ kind: 'directory', path: '/' })
+	ui.fileTabs.openTab(infoFrom('/'))
 }
 </script>
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-columns.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-columns.ts
index 20534799648..b78c58b45f4 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-columns.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-columns.ts
@@ -1,6 +1,6 @@
 import { useLocalStorage } from '@vueuse/core'
-import type { Ref } from 'vue'
-import { computed } from 'vue'
+import type { MaybeRefOrGetter, Ref } from 'vue'
+import { computed, toValue } from 'vue'
 
 import type { FileSortField } from '../types'
 
@@ -39,19 +39,31 @@ function columnsWidth(columns: FileColumn[]) {
 	)
 }
 
+const DEFAULT_ENABLED_COLUMNS: FileColumn[] = ['size', 'items', 'modified', 'created']
+
 /**
- * Which detail columns the file listing shows. Users pick the columns (persisted to local
- * storage) and can switch details off entirely; enabled columns are then dropped, least
- * important first, whenever they would squeeze file names below a readable width.
+ * Which detail columns the file listing shows. When `adjustable`, users pick the columns
+ * (persisted to local storage) and can switch details off entirely; otherwise every column is
+ * enabled. Enabled columns are then dropped, least important first, whenever they would
+ * squeeze file names below a readable width.
  */
-export function useFileColumns(containerWidth: Ref<number | undefined>) {
-	const detailsEnabled = useLocalStorage('files-details-enabled', true)
-	const enabledColumns = useLocalStorage<FileColumn[]>('files-visible-columns', [
-		'size',
-		'items',
-		'modified',
-		'created',
-	])
+export function useFileColumns(
+	containerWidth: Ref<number | undefined>,
+	adjustable: MaybeRefOrGetter<boolean>,
+) {
+	const storedDetailsEnabled = useLocalStorage('files-details-enabled', true)
+	const storedEnabledColumns = useLocalStorage<FileColumn[]>(
+		'files-visible-columns',
+		DEFAULT_ENABLED_COLUMNS,
+	)
+
+	const detailsEnabled = computed({
+		get: () => !toValue(adjustable) || storedDetailsEnabled.value,
+		set: (value) => (storedDetailsEnabled.value = value),
+	})
+	const enabledColumns = computed(() =>
+		toValue(adjustable) ? storedEnabledColumns.value : DEFAULT_ENABLED_COLUMNS,
+	)
 
 	const shownColumns = computed<FileColumn[]>(() => {
 		if (!detailsEnabled.value || containerWidth.value == null) return []
@@ -68,20 +80,16 @@ export function useFileColumns(containerWidth: Ref<number | undefined>) {
 		return columns
 	})
 
-	/** Whether some details aren't visible as columns, so rows should offer them in a tooltip. */
-	const hasHiddenDetails = computed(() => shownColumns.value.length < FILE_COLUMNS.length)
-
 	function toggleColumn(id: FileColumn) {
-		enabledColumns.value = enabledColumns.value.includes(id)
-			? enabledColumns.value.filter((column) => column !== id)
-			: [...enabledColumns.value, id]
+		storedEnabledColumns.value = storedEnabledColumns.value.includes(id)
+			? storedEnabledColumns.value.filter((column) => column !== id)
+			: [...storedEnabledColumns.value, id]
 	}
 
 	return {
 		detailsEnabled,
 		enabledColumns,
 		shownColumns,
-		hasHiddenDetails,
 		toggleColumn,
 	}
 }
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
index 7d323602fed..0ca680aa404 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
@@ -1,8 +1,13 @@
 import type { DockviewApi, DockviewReadyEvent, IDisposable } from 'dockview-vue'
-import type { ComputedRef, Ref } from 'vue'
-import { computed, ref, shallowReactive, shallowRef, watch } from 'vue'
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue'
+import { computed, ref, shallowReactive, shallowRef, toValue, watch } from 'vue'
 
-import { isSameInfo, parentInfoFrom } from '#ui/layouts/shared/files-tab/utils.ts'
+import {
+	isSameInfo,
+	isWithinPath,
+	parentInfoFrom,
+	relocateInfo,
+} from '#ui/layouts/shared/files-tab/utils.ts'
 
 import type { FileEditorBridge } from '../providers/file-browser-ui'
 import type { FileInfo, FileManagerContext } from '../providers/file-manager'
@@ -12,6 +17,8 @@ export const FILE_TAB_COMPONENT = 'fileTab'
 
 const MAX_HISTORY_LENGTH = 50
 const PENDING_LOCATION_TIMEOUT = 1000
+const WORKSPACE_STORAGE_PREFIX = 'files-workspace:'
+const WORKSPACE_VERSION = 1
 
 /** A browser-like tab: its own history of visited directories and files. */
 export interface FileTab {
@@ -24,17 +31,31 @@ export interface FileTabPanelParams {
 	tabId: string
 }
 
+/** The tabs of one workspace, as persisted to local storage. */
+interface FileWorkspaceState {
+	version: typeof WORKSPACE_VERSION
+	tabs: FileTab[]
+	activeTabId: string
+}
+
 export function currentLocation(tab: FileTab) {
 	return tab.history[tab.index]
 }
 
 export interface FileTabsOptions {
-	ctx: Pick<FileManagerContext, 'currentDirectory' | 'currentFile' | 'navigateTo'>
+	ctx: Pick<FileManagerContext, 'currentFile' | 'navigateTo'>
 	/**
 	 * Asks the user what to do with the given editors' unsaved changes.
 	 * Resolves `true` when it is safe to discard the editors.
 	 */
 	confirmDiscard: (editors: FileEditorBridge[]) => Promise<boolean>
+	/**
+	 * Identifies the workspace the tabs are persisted under. Changing it swaps in that
+	 * workspace's tabs; `null` keeps the tabs in memory only.
+	 */
+	workspaceId: MaybeRefOrGetter<string | null>
+	/** Whether the tab strip is shown and further tabs can be opened. */
+	enabled: MaybeRefOrGetter<boolean>
 }
 
 export interface FileTabs {
@@ -55,30 +76,103 @@ export interface FileTabs {
 	activateTab: (id: string) => void
 	closeTab: (id: string) => Promise<void>
 	closeFile: (tabId: string) => void
+	/** Prompts about unsaved changes in editors of files at or beneath any of `paths`. */
+	confirmDiscardWithin: (paths: string[]) => Promise<boolean>
+	/** Makes every tab follow `from` being moved or renamed to `to`. */
+	relocate: (from: FileInfo, to: FileInfo) => void
+	/** Sends every tab within the deleted `file` to its parent directory. */
+	forget: (file: FileInfo) => void
 	registerEditor: (tabId: string, bridge: FileEditorBridge) => void
 	unregisterEditor: (tabId: string, bridge: FileEditorBridge) => void
 	onReady: (event: DockviewReadyEvent) => void
 	onDispose: () => void
 }
 
+function isFileInfo(value: unknown): value is FileInfo {
+	if (typeof value !== 'object' || value === null) return false
+	const info = value as Record<string, unknown>
+	return (
+		typeof info.path === 'string' &&
+		typeof info.name === 'string' &&
+		(info.type === 'file' || info.type === 'directory')
+	)
+}
+
+function isFileTab(value: unknown): value is FileTab {
+	if (typeof value !== 'object' || value === null) return false
+	const tab = value as Record<string, unknown>
+	return (
+		typeof tab.id === 'string' &&
+		Array.isArray(tab.history) &&
+		tab.history.length > 0 &&
+		tab.history.every(isFileInfo) &&
+		typeof tab.index === 'number' &&
+		tab.index >= 0 &&
+		tab.index < tab.history.length
+	)
+}
+
+function loadWorkspace(workspaceId: string | null): FileWorkspaceState | null {
+	if (!workspaceId) return null
+	try {
+		const raw = localStorage.getItem(WORKSPACE_STORAGE_PREFIX + workspaceId)
+		if (!raw) return null
+		const state = JSON.parse(raw) as Partial<FileWorkspaceState>
+		if (state.version !== WORKSPACE_VERSION || !Array.isArray(state.tabs)) return null
+		const tabs = state.tabs.filter(isFileTab)
+		if (tabs.length === 0) return null
+		const activeTabId = tabs.some((tab) => tab.id === state.activeTabId)
+			? state.activeTabId!
+			: tabs[0].id
+		return { version: WORKSPACE_VERSION, tabs, activeTabId }
+	} catch {
+		return null
+	}
+}
+
+function saveWorkspace(workspaceId: string | null, tabs: FileTab[], activeTabId: string) {
+	if (!workspaceId) return
+	const state: FileWorkspaceState = {
+		version: WORKSPACE_VERSION,
+		tabs: tabs.map((tab) => ({
+			id: tab.id,
+			index: tab.index,
+			history: tab.history.map(({ name, type, path }) => ({ name, type, path })),
+		})),
+		activeTabId,
+	}
+	try {
+		localStorage.setItem(WORKSPACE_STORAGE_PREFIX + workspaceId, JSON.stringify(state))
+	} catch {
+		// Storage may be full or unavailable; the workspace then only lives in memory.
+	}
+}
+
+function isRootDirectory(location: FileInfo) {
+	return location.type === 'directory' && location.path === '/'
+}
+
 /**
  * Browser-like file tabs. Each tab keeps its own history of directories and files, and the
- * active tab's current location is mirrored into the file manager context (`currentPath` /
- * `editingFile`), so the listing, editor and host URL keep working off the context. Any
- * navigation that reaches the context from elsewhere (e.g. the browser's back button) is
- * recorded into the active tab's history.
+ * active tab's current location is mirrored into the file manager context, so the listing,
+ * editor and host URL keep working off the context. Any navigation that reaches the context
+ * from elsewhere (e.g. the browser's back button) is recorded into the active tab's history.
  *
  * The tabs are rendered by dockview, one panel per tab, which also keeps each tab's open
- * editor alive while other tabs are browsed.
+ * editor alive while other tabs are browsed. Tabs are persisted per workspace, so each server
+ * or instance reopens with the tabs it was left with.
  */
 export function useFileTabs(options: FileTabsOptions): FileTabs {
 	const { ctx } = options
 
 	const contextLocation = computed<FileInfo>(() => ctx.currentFile.value)
 
-	let nextTabId = 0
 	function createTab(location: FileInfo): FileTab {
-		return { id: `file-tab-${nextTabId++}`, history: [location], index: 0 }
+		return {
+			id: `file-tab-${Math.random().toString(36).slice(2, 9)}`,
+			history: [location],
+			index: 0,
+		}
 	}
 
 	const initialTab = createTab(contextLocation.value)
@@ -100,6 +194,8 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 
 	const api = shallowRef<DockviewApi | null>(null)
 	let disposables: IDisposable[] = []
+	/** Set while panels are being (re)built, so dockview's events don't feed back into the tabs. */
+	let renderingPanels = false
 
 	function getTab(id: string) {
 		return tabs.value.find((tab) => tab.id === id)
@@ -143,6 +239,45 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		{ flush: 'post' },
 	)
 
+	/**
+	 * Swaps in a workspace's persisted tabs, or a single tab at the context's location when there
+	 * are none. A location the host was opened at (e.g. a deep link) wins over the restored one.
+	 */
+	function restoreWorkspace(state: FileWorkspaceState | null) {
+		if (!state) {
+			const tab = createTab(contextLocation.value)
+			tabs.value = [tab]
+			activeTabId.value = tab.id
+			return
+		}
+
+		tabs.value = state.tabs
+		activeTabId.value = state.activeTabId
+
+		const location = contextLocation.value
+		if (!isRootDirectory(location)) {
+			pushLocation(activeTab.value, location)
+		} else {
+			applyToContext(activeLocation.value)
+		}
+	}
+
+	restoreWorkspace(loadWorkspace(toValue(options.workspaceId)))
+
+	watch(
+		() => toValue(options.workspaceId),
+		(workspaceId) => {
+			restoreWorkspace(loadWorkspace(workspaceId))
+			if (api.value) renderPanels(api.value)
+		},
+	)
+
+	watch(
+		[tabs, activeTabId],
+		() => saveWorkspace(toValue(options.workspaceId), tabs.value, activeTabId.value),
+		{ deep: true },
+	)
+
 	async function confirmLeave(tab: FileTab) {
 		const editor = editors.get(tab.id)
 		if (currentLocation(tab).type !== 'file' || !editor) return true
@@ -167,15 +302,51 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		applyToContext(currentLocation(tab))
 	}
 
+	function applyHeaderVisibility() {
+		const hidden = !toValue(options.enabled)
+		for (const group of api.value?.groups ?? []) group.header.hidden = hidden
+	}
+
+	watch(() => toValue(options.enabled), applyHeaderVisibility)
+
+	/**
+	 * Adds the tab's panel to the single tab group. Without an explicit group, panels added while
+	 * no group is active (e.g. `inactive` ones) each get a new group, splitting the view.
+	 */
 	function addPanel(tab: FileTab, inactive = false) {
+		const group = api.value?.groups[0]
 		api.value?.addPanel<FileTabPanelParams>({
 			id: tab.id,
 			component: FILE_TAB_PANEL_COMPONENT,
 			tabComponent: FILE_TAB_COMPONENT,
 			title: currentLocation(tab).path,
 			params: { tabId: tab.id },
+			position: group ? { referenceGroup: group, direction: 'within' } : undefined,
 			inactive,
 		})
+		applyHeaderVisibility()
+	}
+
+	function renderPanels(dockview: DockviewApi) {
+		renderingPanels = true
+		try {
+			dockview.clear()
+			for (const tab of tabs.value) addPanel(tab, true)
+			dockview.getPanel(activeTabId.value)?.api.setActive()
+		} finally {
+			renderingPanels = false
+		}
+	}
+
+	/** Keeps `tabs` in the order the user dragged them into, so it is restored that way. */
+	function syncTabOrder(dockview: DockviewApi) {
+		const order = dockview.groups.flatMap((group) => group.panels.map((panel) => panel.id))
+		const position = (tab: FileTab) => {
+			const index = order.indexOf(tab.id)
+			return index === -1 ? Number.MAX_SAFE_INTEGER : index
+		}
+		const sorted = [...tabs.value].sort((a, b) => position(a) - position(b))
+		if (sorted.some((tab, index) => tab !== tabs.value[index])) tabs.value = sorted
 	}
 
 	function activateTab(id: string) {
@@ -188,6 +359,10 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 	}
 
 	function openTab(location: FileInfo) {
+		if (!toValue(options.enabled)) {
+			navigate(location)
+			return
+		}
 		const tab = createTab(location)
 		tabs.value.push(tab)
 		addPanel(tab)
@@ -220,6 +395,45 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		if (tab.id === activeTabId.value) applyToContext(parent)
 	}
 
+	async function confirmDiscardWithin(paths: string[]) {
+		const affected = tabs.value.flatMap((tab) => {
+			const location = currentLocation(tab)
+			const editor = editors.get(tab.id)
+			return location.type === 'file' &&
+				editor &&
+				paths.some((path) => isWithinPath(location.path, path))
+				? [editor]
+				: []
+		})
+		return options.confirmDiscard(affected)
+	}
+
+	/** Rewrites every tab's history through `map`, collapsing neighbouring entries that end up the same. */
+	function remapLocations(map: (location: FileInfo) => FileInfo) {
+		for (const tab of tabs.value) {
+			const history: FileInfo[] = []
+			let index = 0
+			tab.history.forEach((entry, entryIndex) => {
+				const mapped = map(entry)
+				const previous = history[history.length - 1]
+				if (!previous || !isSameInfo(previous, mapped)) history.push(mapped)
+				if (entryIndex === tab.index) index = history.length - 1
+			})
+			tab.history = history
+			tab.index = index
+		}
+		applyToContext(activeLocation.value)
+	}
+
+	function relocate(from: FileInfo, to: FileInfo) {
+		remapLocations((location) => relocateInfo(location, from.path, to.path))
+	}
+
+	function forget(file: FileInfo) {
+		const parent = parentInfoFrom(file)
+		remapLocations((location) => (isWithinPath(location.path, file.path) ? parent : location))
+	}
+
 	function registerEditor(tabId: string, bridge: FileEditorBridge) {
 		editors.set(tabId, bridge)
 	}
@@ -232,12 +446,14 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		onDispose()
 		api.value = dockview
 
-		for (const tab of tabs.value) addPanel(tab, true)
-		dockview.getPanel(activeTabId.value)?.api.setActive()
+		renderPanels(dockview)
 
 		disposables = [
 			dockview.onDidActivePanelChange(({ panel }) => {
-				if (panel) activateTab(panel.id)
+				if (panel && !renderingPanels) activateTab(panel.id)
+			}),
+			dockview.onDidMovePanel(() => {
+				if (!renderingPanels) syncTabOrder(dockview)
 			}),
 			dockview.onWillShowOverlay((event) => {
 				if (event.kind === 'content' || event.kind === 'edge') event.preventDefault()
@@ -269,6 +485,9 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		activateTab,
 		closeTab,
 		closeFile,
+		confirmDiscardWithin,
+		relocate,
+		forget,
 		registerEditor,
 		unregisterEditor,
 		onReady,
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
index d922dbcbfb5..76a4e9abb6e 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
@@ -24,7 +24,6 @@ export function useFileUndoRedo(
 		if (!lastOperation) return
 
 		try {
-			console.log(lastOperation)
 			switch (lastOperation.type) {
 				case 'move':
 					await moveItem(lastOperation.newFile, lastOperation.prevFile.path)
diff --git a/packages/ui/src/layouts/shared/files-tab/layout.vue b/packages/ui/src/layouts/shared/files-tab/layout.vue
index 6f102c865a0..1145f257b3a 100644
--- a/packages/ui/src/layouts/shared/files-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/files-tab/layout.vue
@@ -65,14 +65,10 @@
 				<FileBrowserPanel :small-mode="smallMode" />
 			</div>
 		</div>
-		<template v-if="smallMode">
+		<template v-if="smallMode && advancedView">
 			<NewModal
 				ref="sidebarModal"
-				:on-hide="
-					() => {
-						if (smallMode) sidebarOpen = false
-					}
-				"
+				:on-hide="() => (sidebarModalOpen = false)"
 				:noblur="true"
 				:no-padding="true"
 				:hide-header="true"
@@ -159,15 +155,23 @@
 import { FolderArchiveIcon, HistoryIcon, SaveIcon, TrashIcon } from '@modrinth/assets'
 import { type MaybeElement, useLocalStorage, useResizeObserver } from '@vueuse/core'
 import type { Component } from 'vue'
-import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, shallowRef, toValue, watch } from 'vue'
 
 import { type ButtonMenuOption, NewModal } from '#ui/components'
 import { Button, ContextMenu } from '#ui/components/base/buttons'
 import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useFileTabs } from '#ui/layouts/shared/files-tab/composables/file-tabs.ts'
-import { parentDirectory, parentInfoFrom } from '#ui/layouts/shared/files-tab/utils.ts'
+import {
+	childPath,
+	infoFrom,
+	isWithinPath,
+	parentDirectory,
+	parentInfoFrom,
+	relocateInfo,
+} from '#ui/layouts/shared/files-tab/utils.ts'
 import { injectFilePicker } from '#ui/providers/file-picker'
+import { injectPageContext } from '#ui/providers/page-context'
 import { injectNotificationManager } from '#ui/providers/web-notifications'
 import { commonMessages } from '#ui/utils/common-messages'
 import { canOpenInFileEditor } from '#ui/utils/file-extensions'
@@ -253,6 +257,21 @@ const props = defineProps<{
 const { addNotification } = injectNotificationManager()
 const ctx = injectFileManager()
 const filePicker = injectFilePicker(null)
+const pageContext = injectPageContext(null)
+
+const reworkEnabled = computed(() => pageContext?.featureFlags?.filesTabRework?.value ?? false)
+
+const advancedViewSetting = useLocalStorage('files-advanced-view', true, { initOnMounted: true })
+const coloredIconsSetting = useLocalStorage('files-colored-icons', true, { initOnMounted: true })
+/** The sidebar tree, tabs and column picker; behind the rework flag, then a user preference. */
+const advancedView = computed(() => reworkEnabled.value && advancedViewSetting.value)
+const coloredIcons = computed(() => !reworkEnabled.value || coloredIconsSetting.value)
+
+/** Switching to the simple view drops the extra tabs, so their unsaved changes are confirmed first. */
+async function setAdvancedView(value: boolean) {
+	if (!value && !(await confirmDiscardEditors(fileTabs.editors.values()))) return
+	advancedViewSetting.value = value
+}
 
 const editorComponent = shallowRef<Component | null>(null)
 import('vue3-ace-editor').then(async (mod) => {
@@ -326,8 +345,8 @@ const selectionParent = computed(() => {
 })
 
 const { recordOperation, onKeydown } = useFileUndoRedo(
-	(file, newName) => ctx.renameItem(file, newName),
-	(source, dest) => ctx.moveItem(source, dest),
+	renameEntry,
+	moveEntry,
 	() => ctx.refresh(),
 	(title, text, type) => addNotification({ title, text, type }),
 )
@@ -335,6 +354,8 @@ const { recordOperation, onKeydown } = useFileUndoRedo(
 const fileTabs = useFileTabs({
 	ctx,
 	confirmDiscard: confirmDiscardEditors,
+	workspaceId: () => (advancedView.value ? (toValue(ctx.workspaceId) ?? null) : null),
+	enabled: advancedView,
 })
 
 const fileEditorApi = fileTabs.activeEditor
@@ -352,7 +373,7 @@ function revertChanges() {
 	for (const editor of dirtyEditors()) editor.revertChanges()
 }
 
-async function shareToMclogs() {
+async function shareEditorToMclogs() {
 	await fileEditorApi.value?.shareToMclogs()
 }
 
@@ -384,16 +405,29 @@ const SIDEBAR_DEFAULT_WIDTH = 300
 
 const browserMinSize = computed(() => (props.constrainWidth ? 700 : 1200))
 
+/** Whether the docked sidebar is open, remembered across visits. */
 const sidebarOpenSetting = useLocalStorage('file-layout-sidebar-open', false, {
 	initOnMounted: true,
 })
-const sidebarOpen = ref(sidebarOpenSetting.value)
 const sidebarWidthSetting = useLocalStorage('file-layout-sidebar-width', SIDEBAR_DEFAULT_WIDTH, {
 	initOnMounted: true,
 })
+/** The pullout sidebar used in small mode is transient, so it doesn't touch the saved setting. */
+const sidebarModalOpen = ref(false)
+
+const sidebarOpen = computed(() =>
+	smallMode.value ? sidebarModalOpen.value : sidebarOpenSetting.value,
+)
+
+function setSidebarOpen(value: boolean) {
+	if (smallMode.value) {
+		sidebarModalOpen.value = value
+	} else {
+		sidebarOpenSetting.value = value
+	}
+}
 
-watch(sidebarOpen, (value) => {
-	if (!smallMode.value) return
+watch(sidebarModalOpen, (value) => {
 	if (value) {
 		sidebarModal.value?.show()
 	} else {
@@ -416,7 +450,9 @@ useResizeObserver(mainColumn, (entries) => {
 
 const smallMode = computed(() => shellWidth.value == null || shellWidth.value < 1100)
 const fullWidthSidebar = computed(() => shellWidth.value == null || shellWidth.value < 400)
-const showDockedSidebar = computed(() => !smallMode.value && sidebarOpen.value)
+const showDockedSidebar = computed(
+	() => advancedView.value && !smallMode.value && sidebarOpenSetting.value,
+)
 
 const maxSidebarWidth = computed(() =>
 	Math.max(SIDEBAR_MIN_WIDTH, (shellWidth.value ?? 0) - browserMinSize.value),
@@ -464,14 +500,8 @@ function resetSidebarWidth() {
 	sidebarWidthSetting.value = SIDEBAR_DEFAULT_WIDTH
 }
 
-let pastInitialSetup = false
-
 watch(smallMode, (value) => {
-	if (pastInitialSetup) {
-		sidebarOpen.value = !value
-	} else {
-		pastInitialSetup = true
-	}
+	if (!value) sidebarModalOpen.value = false
 })
 
 /**
@@ -495,8 +525,8 @@ async function navigateToSegment(index: number) {
 	await fileTabs.navigate(parentInfoFrom(activeLocation.value, index))
 }
 
-async function handleNavigateTo(item: FileInfo) {
-	await fileTabs.navigate(item)
+async function navigateTo(file: FileInfo) {
+	await fileTabs.navigate(file)
 }
 
 function handleOpenInNewTab(item: FileInfo) {
@@ -510,77 +540,96 @@ async function handleEditorClose() {
 	await fileTabs.navigate(parentInfoFrom(location))
 }
 
-// CRUD handlers
+/** Keeps the open tabs and the sidebar tree's expanded folders following a moved or renamed entry. */
+function followRelocation(from: FileInfo, to: FileInfo) {
+	fileTabs.relocate(from, to)
+	const expanded = ctx.directoryTree.expandedEntries
+	expanded.value = expanded.value.map(
+		(path) => relocateInfo(infoFrom(path), from.path, to.path).path,
+	)
+}
+
+/** Sends tabs within a deleted entry to its parent, and drops it from the tree's expanded folders. */
+function followDeletion(file: FileInfo) {
+	fileTabs.forget(file)
+	const expanded = ctx.directoryTree.expandedEntries
+	expanded.value = expanded.value.filter((path) => !isWithinPath(path, file.path))
+}
+
+/** Renames through the host without recording undo history, as undo/redo itself does. */
+async function renameEntry(file: FileInfo, newName: string) {
+	if (!(await fileTabs.confirmDiscardWithin([file.path]))) return null
+	const renamed = await ctx.renameItem(file, newName)
+	if (renamed) followRelocation(file, renamed)
+	return renamed
+}
+
+/** Moves through the host without recording undo history, as undo/redo itself does. */
+async function moveEntry(file: FileInfo, destination: string) {
+	if (!(await fileTabs.confirmDiscardWithin([file.path]))) return null
+	const moved = await ctx.moveItem(file, destination)
+	if (moved) followRelocation(file, moved)
+	return moved
+}
+
+async function createItem(name: string, type: 'file' | 'directory') {
+	if (isBusy.value) return null
+	return ctx.createItem(name, type)
+}
+
+async function renameItem(file: FileInfo, newName: string) {
+	if (isBusy.value) return null
+	const renamed = await renameEntry(file, newName)
+	if (renamed) recordOperation({ type: 'rename', prevFile: file, newFile: renamed })
+	return renamed
+}
+
+async function moveItem(file: FileInfo, destination: string) {
+	if (isBusy.value) return null
+	const moved = await moveEntry(file, destination)
+	if (moved) recordOperation({ type: 'move', prevFile: file, newFile: moved })
+	return moved
+}
+
+async function deleteItem(file: FileInfo, recursive: boolean) {
+	if (isBusy.value) return false
+	if (!(await fileTabs.confirmDiscardWithin([file.path]))) return false
+	const deleted = await ctx.deleteItem(file, recursive)
+	if (deleted) followDeletion(file)
+	return deleted
+}
+
 async function handleCreateNewItem(name: string) {
-	if (isBusy.value) return
-	await ctx.createItem(name, newItemType.value)
+	await createItem(name, newItemType.value)
 }
 
 async function handleRenameItem(newName: string) {
-	if (isBusy.value) return
 	const item = selectedItem.value
 	if (!item) return
-
-	const newFile = await ctx.renameItem(item, newName)
-	if (newFile != null) {
-		recordOperation({
-			type: 'rename',
-			prevFile: item,
-			newFile: newFile,
-		})
-	}
+	await renameItem(item, newName)
 }
 
 async function handleMoveItem(destination: string) {
-	if (isBusy.value) return
 	const item = selectedItem.value
 	if (!item) return
-
-	const dest = `${destination}/${item.name}`.replace('//', '/')
-
-	const newFile = await ctx.moveItem(item, dest)
-	if (newFile != null) {
-		recordOperation({
-			type: 'move',
-			prevFile: item,
-			newFile: newFile,
-		})
-	}
+	await moveItem(item, childPath(destination, item.name))
 }
 
-function handleDeleteItem() {
-	if (isBusy.value) return
+async function handleDeleteItem() {
 	const item = selectedItem.value
 	if (!item) return
-
-	ctx.deleteItem(item, item.type === 'directory')
+	await deleteItem(item, item.type === 'directory')
 }
 
-async function handleDirectMove(file: FileInfo, destination: string) {
-	if (isBusy.value) return
-	const dest = `${destination}/${file.name}`.replace('//', '/')
-
-	const newFile = await ctx.moveItem(file, dest)
-
-	if (newFile != null) {
-		recordOperation({
-			type: 'move',
-			prevFile: file,
-			newFile: newFile,
-		})
+async function downloadFile(file: FileInfo) {
+	if (file.type === 'file') {
+		await ctx.downloadFile(file)
 	}
 }
 
-// Download
-async function handleDownload(item: FileInfo) {
-	if (item.type === 'file') {
-		await ctx.downloadFile(item)
-	}
-}
-
-async function handleZip(item: FileInfo) {
-	if (isBusy.value || item.type !== 'directory' || !ctx.zipFolder) return
-	await ctx.zipFolder(item as FileInfo<'directory'>)
+async function zipFolder(file: FileInfo) {
+	if (isBusy.value || file.type !== 'directory' || !ctx.zipFolder) return
+	await ctx.zipFolder(file as FileInfo<'directory'>)
 }
 
 async function handleZipSelection(target: string) {
@@ -663,18 +712,22 @@ function showDeleteModal(item: FileItem) {
 	deleteItemModal.value?.show()
 }
 
-function showBulkDeleteModal() {
+async function showBulkDeleteModal() {
 	if (isBusy.value || selectionReadOnly.value) return
 	if (selectedItems.value.size === 0) return
 
-	for (const item of selectedItems.value.values()) {
-		ctx.deleteItem(item, item.type === 'directory')
-	}
+	const files = [...selectedItems.value.values()]
+	if (!(await fileTabs.confirmDiscardWithin(files.map((file) => file.path)))) return
 	deselectAll()
+
+	await Promise.all(
+		files.map(async (file) => {
+			if (await ctx.deleteItem(file, file.type === 'directory')) followDeletion(file)
+		}),
+	)
 }
 
-// Upload
-function handleDroppedFiles(files: File[]) {
+function uploadFiles(files: File[]) {
 	if (isEditing.value || isBusy.value) return
 	ctx.uploadFiles(files)
 }
@@ -744,9 +797,16 @@ function handleContextMenu(event: MouseEvent, options: ButtonMenuOption[]) {
 // tabs. Dockview mounts tab panels itself (teleported, so still Vue descendants), which means
 // prop/emit/ref bindings can't reach them but provide/inject does. See providers/file-browser-ui.ts.
 provideFileBrowserUI({
+	...ctx,
+
 	baseId,
 	showDebugInfo: computed(() => props.showDebugInfo ?? false),
 	showRefreshButton: computed(() => props.showRefreshButton ?? false),
+	reworkEnabled,
+	advancedView,
+	setAdvancedView,
+	coloredIcons,
+	setColoredIcons: (value) => (coloredIconsSetting.value = value),
 
 	items,
 	filteredItems,
@@ -754,11 +814,8 @@ provideFileBrowserUI({
 	isBusy,
 	busyTooltip,
 	activeLocation,
-	sidebarOpen: computed(() => sidebarOpen.value),
-	setSidebarOpen: (value) => {
-		sidebarOpen.value = value
-		sidebarOpenSetting.value = value
-	},
+	sidebarOpen: computed(() => advancedView.value && sidebarOpen.value),
+	setSidebarOpen,
 	containerWidth,
 
 	searchQuery,
@@ -779,11 +836,11 @@ provideFileBrowserUI({
 	hasUnsavedChanges,
 	saveFileContent,
 	revertChanges,
-	shareToMclogs,
+	shareEditorToMclogs,
 	toggleFind,
 
+	navigateTo,
 	navigateToSegment,
-	handleNavigateTo,
 	handleOpenInNewTab,
 	handleEditorClose,
 	handleHomePrefetch,
@@ -796,12 +853,15 @@ provideFileBrowserUI({
 	showBulkDeleteModal,
 	showUnzipFromUrlModal,
 
-	handleDownload,
-	handleZip,
-	handleDirectMove,
+	createItem,
+	renameItem,
+	moveItem,
+	deleteItem,
+	downloadFile,
+	zipFolder: ctx.zipFolder ? zipFolder : undefined,
 	handleExtractItem,
 
-	handleDroppedFiles,
+	uploadFiles,
 	handleDropError,
 	initiateFileUpload,
 
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts b/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
index 407596a76bf..86380bb9515 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
@@ -1,11 +1,11 @@
 import type { Component, ComputedRef, Ref, ShallowRef } from 'vue'
 
 import type { ButtonMenuOption } from '#ui/components'
-import type { FileInfo } from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
 import { createContext } from '#ui/providers/create-context'
 
 import type { FileTabs } from '../composables/file-tabs'
 import type { FileItem, FileSortField } from '../types'
+import type { FileInfo, FileManagerContext } from './file-manager'
 
 /**
  * API exposed by each tab's file editor, registered on `FileTabs` on mount
@@ -20,14 +20,29 @@ export interface FileEditorBridge {
 	toggleFind: () => void
 }
 
-export interface FileBrowserUIContext {
+/**
+ * The file manager context as seen by the files layout's components. Members shared with
+ * {@link FileManagerContext} are passed through from the host, except for the ones overridden
+ * here, which additionally respect the busy/read-only state, record undo history and keep the
+ * open tabs following moved, renamed and deleted entries.
+ */
+export interface FileBrowserUIContext extends FileManagerContext {
 	baseId: string
 	showDebugInfo: ComputedRef<boolean>
 	showRefreshButton: ComputedRef<boolean>
+	/** Whether the files tab rework feature flag is on, which offers the view settings. */
+	reworkEnabled: ComputedRef<boolean>
+	/** Whether the advanced view (sidebar tree, tabs and column picker) is in use. */
+	advancedView: ComputedRef<boolean>
+	setAdvancedView: (value: boolean) => Promise<void>
+	/** Whether file and folder icons are tinted by type. */
+	coloredIcons: ComputedRef<boolean>
+	setColoredIcons: (value: boolean) => void
 
 	items: ComputedRef<FileItem[]>
 	filteredItems: ComputedRef<FileItem[]>
 	isEditing: ComputedRef<boolean>
+	/** Busy, or the active location is read-only. */
 	isBusy: ComputedRef<boolean>
 	busyTooltip: ComputedRef<string | undefined>
 	activeLocation: ComputedRef<FileInfo>
@@ -56,11 +71,13 @@ export interface FileBrowserUIContext {
 	hasUnsavedChanges: ComputedRef<boolean>
 	saveFileContent: (exit?: boolean) => Promise<void>
 	revertChanges: () => void
-	shareToMclogs: () => Promise<void>
+	/** Shares the active tab's file to mclo.gs. */
+	shareEditorToMclogs: () => Promise<void>
 	toggleFind: () => void
 
+	/** Navigates the active tab, rather than the host directly. */
+	navigateTo: (file: FileInfo) => Promise<void>
 	navigateToSegment: (index: number) => void
-	handleNavigateTo: (item: FileInfo) => void
 	handleOpenInNewTab: (item: FileInfo) => void
 	handleEditorClose: () => Promise<void>
 	handleHomePrefetch: () => void
@@ -73,12 +90,12 @@ export interface FileBrowserUIContext {
 	showBulkDeleteModal: () => void
 	showUnzipFromUrlModal: (cf: boolean) => void
 
-	handleDownload: (item: FileItem) => Promise<void>
-	handleZip: (item: FileItem) => Promise<void>
-	handleDirectMove: (moveData: FileInfo, destination: string) => Promise<void>
+	downloadFile: (file: FileInfo) => Promise<void>
+	zipFolder?: (file: FileInfo) => Promise<void>
 	handleExtractItem: (item: FileInfo) => Promise<void>
 
-	handleDroppedFiles: (files: File[]) => void
+	/** Uploads into the current directory, unless busy or a file is open. */
+	uploadFiles: (files: File[]) => void
 	handleDropError: (error: unknown) => void
 	initiateFileUpload: () => Promise<void>
 
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts b/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
index 455730fa6ab..2a4e56c8b69 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
@@ -1,5 +1,5 @@
 import type { Kyros } from '@modrinth/api-client'
-import type { ComputedRef, Ref } from 'vue'
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue'
 
 import { createContext } from '#ui/providers/create-context'
 
@@ -45,6 +45,12 @@ export interface DirectoryTree {
 }
 
 export interface FileManagerContext {
+	/**
+	 * Identifies the files being browsed (e.g. a server or an instance), so the files layout can
+	 * keep a separate, persisted workspace (open tabs and their history) for each of them.
+	 */
+	workspaceId?: MaybeRefOrGetter<string | null>
+
 	currentFile: ComputedRef<FileInfo>
 	currentDirectory: ComputedRef<FileInfo<'directory'>>
 
@@ -58,7 +64,8 @@ export interface FileManagerContext {
 	createItem: (name: string, type: 'file' | 'directory') => Promise<FileInfo | null>
 	renameItem: (file: FileInfo, newName: string) => Promise<FileInfo | null>
 	moveItem: (file: FileInfo, destination: string) => Promise<FileInfo | null>
-	deleteItem: (file: FileInfo, recursive: boolean) => Promise<void>
+	/** Resolves `true` once the entry has been deleted. */
+	deleteItem: (file: FileInfo, recursive: boolean) => Promise<boolean>
 
 	writeFile: (file: FileInfo, content: ArrayBuffer) => Promise<void>
 	downloadFile: (file: FileInfo) => Promise<void>
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/index.ts b/packages/ui/src/layouts/shared/files-tab/providers/index.ts
index 002dc334ad0..00f859d23f7 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/index.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/index.ts
@@ -1,2 +1,10 @@
-export type { DirectoryResult, DirectoryTree, FileManagerContext } from './file-manager'
+export type {
+	DirectoryResult,
+	DirectoryTree,
+	FileInfo,
+	FileItemResultFrom,
+	FileManagerContext,
+	FileResult,
+	FileTypes,
+} from './file-manager'
 export { injectFileManager, provideFileManager } from './file-manager'
diff --git a/packages/ui/src/layouts/shared/files-tab/utils.ts b/packages/ui/src/layouts/shared/files-tab/utils.ts
index 8c0c1440a82..98e7a56f61b 100644
--- a/packages/ui/src/layouts/shared/files-tab/utils.ts
+++ b/packages/ui/src/layouts/shared/files-tab/utils.ts
@@ -1,4 +1,43 @@
+import {
+	BoxIcon,
+	BracesIcon,
+	FolderCogIcon,
+	FolderOpenIcon,
+	GlassesIcon,
+	GlobeIcon,
+	PaintbrushIcon,
+} from '@modrinth/assets'
+import type { Component } from 'vue'
+
 import type { FileInfo } from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
+import { getFileExtensionIcon } from '#ui/utils/auto-icons'
+import { getFileExtension } from '#ui/utils/file-extensions'
+
+export interface FileIconStyle {
+	icon: Component
+	/** Text color class, picked from the theme's primary colors. */
+	color: string
+}
+
+const DEFAULT_DIRECTORY_ICON: FileIconStyle = { icon: FolderOpenIcon, color: 'text-amber-400' }
+
+const DIRECTORY_ICON_STYLES: Record<string, FileIconStyle> = {
+	config: { icon: FolderCogIcon, color: 'text-teal-400' },
+	world: { icon: GlobeIcon, color: 'text-blue' },
+	saves: { icon: GlobeIcon, color: 'text-blue' },
+	datapacks: { icon: BracesIcon, color: 'text-red' },
+	mods: { icon: BoxIcon, color: 'text-purple' },
+	resourcepacks: { icon: PaintbrushIcon, color: 'text-rose' },
+	shaderpacks: { icon: GlassesIcon, color: 'text-green' },
+}
+
+/** Icon and color for a file or directory, shared by the listing, sidebar tree and tabs. */
+export function fileIconFor(file: Pick<FileInfo, 'name' | 'type'>): FileIconStyle {
+	if (file.type === 'directory') {
+		return DIRECTORY_ICON_STYLES[file.name.toLowerCase()] ?? DEFAULT_DIRECTORY_ICON
+	}
+	return { icon: getFileExtensionIcon(getFileExtension(file.name)), color: 'text-olive-300' }
+}
 
 export function joinDisplayPath(basePath: string | undefined, itemPath: string) {
 	if (!basePath) return itemPath
@@ -43,3 +82,28 @@ export function parentDirectory(path: string, end?: number) {
 export function isSameInfo(a: FileInfo, b: FileInfo) {
 	return a.type === b.type && a.path === b.path
 }
+
+/** Path of the entry called `name` inside `directory`. */
+export function childPath(directory: string, name: string) {
+	return normalizeDirectoryPath(`${directory}/${name}`)
+}
+
+/** Whether `path` is `ancestor` itself or lies anywhere beneath it. */
+export function isWithinPath(path: string, ancestor: string) {
+	const normalizedPath = normalizeDirectoryPath(path)
+	const normalizedAncestor = normalizeDirectoryPath(ancestor)
+	if (normalizedAncestor === '/') return true
+	return (
+		normalizedPath === normalizedAncestor || normalizedPath.startsWith(`${normalizedAncestor}/`)
+	)
+}
+
+/**
+ * Rewrites `location` to follow `from` being moved or renamed to `to`. Locations outside of
+ * `from` are returned untouched.
+ */
+export function relocateInfo(location: FileInfo, from: string, to: string): FileInfo {
+	if (!isWithinPath(location.path, from)) return location
+	const suffix = normalizeDirectoryPath(location.path).slice(normalizeDirectoryPath(from).length)
+	return infoFrom({ ...location, path: `${normalizeDirectoryPath(to)}${suffix}` })
+}
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
index 64a0513f582..86463f0ac18 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
@@ -6,7 +6,6 @@ import {
 	type ComputedRef,
 	effectScope,
 	markRaw,
-	onMounted,
 	onScopeDispose,
 	type Ref,
 	ref,
@@ -19,7 +18,7 @@ import { useReadyState } from '#ui/composables'
 import { useUploadSessionUpload } from '#ui/composables/hosting/kyros-session-upload'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useServerPermissions } from '#ui/composables/server-permissions'
-import { normalizeDirectoryPath, parentInfoFrom } from '#ui/layouts'
+import { childPath, normalizeDirectoryPath, parentInfoFrom } from '#ui/layouts'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
@@ -111,16 +110,23 @@ const busyWarning = computed(() =>
 )
 
 // Path & navigation
-const currentPath = computed(() => (typeof route.query.path === 'string' ? route.query.path : '/'))
 const currentLocation = ref<FileInfo>(infoFromQuery(route))
+const currentDirectory = computed<FileInfo<'directory'>>(() => {
+	const location = currentLocation.value
+	return location.type != 'file'
+		? (location as FileInfo<'directory'>)
+		: parentInfoFrom(location.path)
+})
 
+/**
+ * The URL holds the location's own path, with `editing` marking it as a file, so that
+ * `infoFromQuery` reads back exactly the location that was navigated to.
+ */
 function navigateTo(file: FileInfo) {
-	if (file.type == 'file') {
-		router.push({ query: { ...route.query, path: currentPath.value, editing: 'true' } })
-	} else {
-		const { editing: _, ...query } = route.query
-		router.push({ query: { ...query, path: file.path } })
-	}
+	const { editing: _, ...query } = route.query
+	router.push({
+		query: file.type == 'file' ? { ...query, path: file.path, editing: 'true' } : { ...query, path: file.path },
+	})
 
 	currentLocation.value = file
 }
@@ -139,11 +145,6 @@ watch(
 	{ deep: true },
 )
 
-// Initialize editing from URL on mount
-function initializeLocation() {
-	currentLocation.value = infoFromQuery(route)
-}
-
 function isVisibleFileItem(item: Kyros.Files.v0.DirectoryItem) {
 	return !item.path.split('/').includes('.modrinth-staged')
 }
@@ -260,7 +261,7 @@ function prefetchFile<T extends QueryableFileTypes, Q>(
 }
 
 function getQueryKey() {
-	return ['files', serverId, normalizeDirectoryPath(currentPath.value)]
+	return ['files', serverId, normalizeDirectoryPath(currentDirectory.value.path)]
 }
 
 const isRefreshing = ref<boolean>(false)
@@ -550,10 +551,6 @@ watch(
 	},
 )
 
-onMounted(async () => {
-	initializeLocation()
-})
-
 // Restart
 async function restartServer() {
 	if (!canUsePowerActions.value) return
@@ -561,7 +558,7 @@ async function restartServer() {
 }
 
 function getSessionUploadFilename(fileName: string) {
-	const basePath = currentPath.value.split('/').filter(Boolean).join('/')
+	const basePath = currentDirectory.value.path.split('/').filter(Boolean).join('/')
 	return basePath ? `${basePath}/${fileName}` : fileName
 }
 
@@ -590,6 +587,11 @@ function cancelUpload() {
 }
 
 const fileQueries = new Map<string, FileItemResultFrom<'file' | 'directory'> & FileQueryResult>()
+
+/** Files and directories are cached apart, so a lookup can never return the other kind's result. */
+function queryCacheKey(info: FileInfo) {
+	return `${info.type == 'file' ? 'file' : 'directory'}:${normalizeDirectoryPath(info.path)}`
+}
 const expandedDirectories: Ref<string[]> = ref([])
 
 /** Owns the lazily created directory queries so they're disposed with this page, wherever they were first requested from. */
@@ -598,52 +600,41 @@ onScopeDispose(() => fileSystemScope.stop())
 
 const directoryTree = {
 	prefetch: <T extends FileTypes>(info: FileInfo<T>) => {
-		if (info.type == 'directory') {
-			if (!fileQueries.has(info.path)) {
-				prefetchDirectory(info as FileInfo<'directory'>)
-			}
-		} else if (info.type == 'file') {
+		if (fileQueries.has(queryCacheKey(info))) return
+		if (info.type == 'file') {
 			prefetchFileEntry(info as FileInfo<'file'>)
+		} else {
+			prefetchDirectory(info as FileInfo<'directory'>)
 		}
 	},
 	get: <T extends FileTypes>(info: FileInfo<T>): FileItemResultFrom<T> & FileQueryResult => {
-		const type = info.type
-		if (type != 'directory' || type != 'file') {
-			let query = fileQueries.get(info.path)
-			if (query == null) {
-				if (type == 'directory') {
-					query = fileSystemScope.run(() => queryDirectoryEntries(info as FileInfo<'directory'>))!
-				} else {
-					query = fileSystemScope.run(() => queryFileEntry(info as FileInfo<'file'>))!
-				}
-				fileQueries.set(query.path, query)
-			}
-			return query as FileItemResultFrom<T> & FileQueryResult
-		} else {
-			throw new Error(
-				`Unable to handle getting query results for given type '${info.type as unknown}'`,
-			)
+		const key = queryCacheKey(info)
+		let query = fileQueries.get(key)
+		if (query == null) {
+			query = fileSystemScope.run(() =>
+				info.type == 'file'
+					? queryFileEntry(info as FileInfo<'file'>)
+					: queryDirectoryEntries(info as FileInfo<'directory'>),
+			)!
+			fileQueries.set(key, query)
 		}
+		return query as FileItemResultFrom<T> & FileQueryResult
 	},
 	expandedEntries: expandedDirectories,
 } satisfies DirectoryTree
 
 // Provide the file manager context
 provideFileManager({
+	workspaceId: `server:${serverId}`,
 	directoryTree,
-	loading: computed(() => directoryTree.get(currentLocation.value).isLoading.value),
-	error: computed(() => directoryTree.get(currentLocation.value).loadError.value ?? null),
+	loading: computed(() => directoryTree.get(currentDirectory.value).isLoading.value),
+	error: computed(() => directoryTree.get(currentDirectory.value).loadError.value ?? null),
 	currentFile: computed(() => currentLocation.value),
-	currentDirectory: computed(() => {
-		const location = currentLocation.value
-		return location.type != 'file'
-			? (location as FileInfo<'directory'>)
-			: parentInfoFrom(location.path)
-	}),
+	currentDirectory,
 	navigateTo,
 	createItem: async (name, type) => {
 		if (fileWriteDisabled.value) return null
-		const path = `${currentPath.value}/${name}`.replace('//', '/')
+		const path = childPath(currentDirectory.value.path, name)
 		await createMutation.mutateAsync({ path, type })
 		return {
 			name: name,
@@ -653,15 +644,18 @@ provideFileManager({
 	},
 	renameItem: async (file, newName) => {
 		if (fileWriteDisabled.value) return null
-		return await renameMutation.mutateAsync({ file, newName })
+		return await renameMutation.mutateAsync({ file, newName }).catch(() => null)
 	},
 	moveItem: async (source, destination) => {
 		if (fileWriteDisabled.value) return null
-		return await moveMutation.mutateAsync({ source, destination })
+		return await moveMutation.mutateAsync({ source, destination }).catch(() => null)
 	},
 	deleteItem: async (file, recursive) => {
-		if (fileWriteDisabled.value) return
-		await deleteMutation.mutateAsync({ file, recursive })
+		if (fileWriteDisabled.value) return false
+		return await deleteMutation
+			.mutateAsync({ file, recursive })
+			.then(() => true)
+			.catch(() => false)
 	},
 	writeFile,
 	downloadFile,
@@ -689,7 +683,7 @@ provideFileManager({
  */
 const initialLoadPending = ref(true)
 watch(
-	() => directoryTree.get(currentLocation.value).filesReadyPending.value,
+	() => directoryTree.get(currentDirectory.value).filesReadyPending.value,
 	(pending) => {
 		if (!pending) initialLoadPending.value = false
 	},
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/utils.ts b/packages/ui/src/layouts/wrapped/hosting/manage/utils.ts
index 7c2e5fe2786..db42163dda8 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/utils.ts
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/utils.ts
@@ -57,5 +57,5 @@ export function infoFromQuery(
 		(value as Partial<RouteLocationNormalizedLoadedGeneric>).name != null
 			? (value.query as LocationQuery)
 			: (value as LocationQuery)
-	return infoFrom(query.path === 'string' ? query.path : '/', query.editing === 'true')
+	return infoFrom(typeof query.path === 'string' ? query.path : '/', query.editing === 'true')
 }
diff --git a/packages/ui/src/providers/page-context.ts b/packages/ui/src/providers/page-context.ts
index 99585948aaa..38f2f0a98b5 100644
--- a/packages/ui/src/providers/page-context.ts
+++ b/packages/ui/src/providers/page-context.ts
@@ -19,6 +19,8 @@ export interface PageContext {
 	}
 	featureFlags?: {
 		serverRamAsBytesAlwaysOn?: Ref<boolean>
+		/** Enables the files tab's sidebar tree, tabs and column picker while they're in QA. */
+		filesTabRework?: Ref<boolean>
 	}
 	openExternalUrl: (url: string) => void
 }

From c1b4d634775477dd47e82491aa2be6b8550b0f9a Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Tue, 6 Oct 2026 02:19:21 -0500
Subject: [PATCH 12/18] fix: prepr

---
 .../src/pages/hosting/manage/[id].vue         | 13 ++++--
 .../ui/src/components/floating/Tooltip.vue    | 24 +++++-----
 .../components/floating/TooltipDirective.vue  |  2 +-
 .../files-tab/components/FileTableHeader.vue  | 16 +++----
 .../files-tab/composables/file-undo-redo.ts   |  5 +--
 .../layouts/wrapped/hosting/manage/files.vue  | 13 ++++--
 .../layouts/wrapped/hosting/manage/root.vue   | 22 +++++----
 packages/ui/src/locales/en-US/index.json      | 10 ++++-
 packages/ui/src/providers/tooltip.ts          | 45 ++++++++++---------
 9 files changed, 84 insertions(+), 66 deletions(-)

diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index 7a9b3463edf..f4b635d3592 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -28,9 +28,11 @@
 			}
 		"
 		:constrain-width="constrainWidth"
-		@toggle-constrain-width="(value: boolean) => {
-			constrainWidth = value;
-		}"
+		@toggle-constrain-width="
+			(value: boolean) => {
+				constrainWidth = value
+			}
+		"
 	>
 		<template #default="{ onReinstall, onReinstallFailed, constrainWidth }">
 			<NuxtPage
@@ -95,7 +97,10 @@ definePageMeta({
 	middleware: 'auth',
 })
 
-const constrainWidth = useCookie('server-layout-constrained-width', { default: () => true, maxAge: 60 * 60 * 24 * 365 })
+const constrainWidth = useCookie('server-layout-constrained-width', {
+	default: () => true,
+	maxAge: 60 * 60 * 24 * 365,
+})
 
 useHead({
 	script: [
diff --git a/packages/ui/src/components/floating/Tooltip.vue b/packages/ui/src/components/floating/Tooltip.vue
index 3a45868798a..bbab8212dd9 100644
--- a/packages/ui/src/components/floating/Tooltip.vue
+++ b/packages/ui/src/components/floating/Tooltip.vue
@@ -42,9 +42,11 @@ const SIDES = {
 } as const
 
 const props = withDefaults(
-	defineProps<TooltipBaseProps & {
-		disabled?: boolean
-	}>(),
+	defineProps<
+		TooltipBaseProps & {
+			disabled?: boolean
+		}
+	>(),
 	{ disabled: false, theme: 'tooltip', placement: 'top', allowTransfer: true },
 )
 
@@ -171,7 +173,7 @@ function syncSource() {
 	}
 	bindTooltipSource(el, {
 		...props,
-		content: slots.popper ? () => slots.popper?.() : undefined
+		content: slots.popper ? () => slots.popper?.() : undefined,
 	})
 }
 
@@ -208,16 +210,13 @@ function onEnter() {
 		return
 	}
 	const delay = props.delay
-	tooltipEnter(
-		trigger.value,
-		delay ? (typeof delay === 'number' ? delay : delay.hover) : undefined,
-	)
+	tooltipEnter(trigger.value, delay ? (typeof delay === 'number' ? delay : delay.hover) : undefined)
 }
 
 function onTooltipEnter() {
-	console.log("WWWWWWWWWWWWWWWWWWWW")
+	console.log('WWWWWWWWWWWWWWWWWWWW')
 	if ((props.hoverable || props.pinned) && props.reference) {
-		console.log("WEEEEEEEE")
+		console.log('WEEEEEEEE')
 		preventHide(props.reference)
 	}
 }
@@ -226,10 +225,7 @@ function onLeave() {
 	const triggerEl = trigger.value ?? props.reference
 	const delay = props.delay
 	if (triggerEl) {
-		tooltipLeave(
-			triggerEl,
-			delay ? (typeof delay === 'number' ? delay : delay.unhover) : undefined,
-		)
+		tooltipLeave(triggerEl, delay ? (typeof delay === 'number' ? delay : delay.unhover) : undefined)
 	}
 }
 
diff --git a/packages/ui/src/components/floating/TooltipDirective.vue b/packages/ui/src/components/floating/TooltipDirective.vue
index e3d46c6ae63..2648cac6e34 100644
--- a/packages/ui/src/components/floating/TooltipDirective.vue
+++ b/packages/ui/src/components/floating/TooltipDirective.vue
@@ -12,6 +12,6 @@ import Tooltip from './Tooltip.vue'
 		:panel-class="activeTooltip.panelClass"
 		:hoverable="activeTooltip.hoverable"
 		:delay="activeTooltip.delay"
-		:allowTransfer="activeTooltip.allowTransfer"
+		:allow-transfer="activeTooltip.allowTransfer"
 	/>
 </template>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
index aba99769e82..9724f6eb5f1 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTableHeader.vue
@@ -1,16 +1,12 @@
 <template>
 	<div
 		class="sticky top-[var(--files-table-header-top,0px)] z-10 flex h-[3rem] w-full select-none flex-row items-center justify-between bg-surface-3 pl-3 pr-3 font-medium transition-[border-radius] duration-100"
-		:class="
-			[
-				isStuck
-					? 'rounded-none border-0 border-y border-solid border-surface-4 shadow-md before:pointer-events-none before:absolute before:inset-x-0 before:-top-4 before:h-5 before:bg-surface-3'
-					: '',
-				props.advancedView
-					? 'border-0 border-t border-solid border-surface-5'
-					: ''
-			]
-		"
+		:class="[
+			isStuck
+				? 'rounded-none border-0 border-y border-solid border-surface-4 shadow-md before:pointer-events-none before:absolute before:inset-x-0 before:-top-4 before:h-5 before:bg-surface-3'
+				: '',
+			props.advancedView ? 'border-0 border-t border-solid border-surface-5' : '',
+		]"
 	>
 		<div class="flex min-w-0 flex-1 items-center gap-3">
 			<Checkbox
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
index 76a4e9abb6e..31b38cfe279 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-undo-redo.ts
@@ -1,7 +1,6 @@
 import { ref } from 'vue'
 
 import type { FileInfo } from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
-import { parentInfoFrom } from '#ui/layouts/shared/files-tab/utils.ts'
 
 import type { Operation } from '../types'
 
@@ -73,8 +72,8 @@ export function useFileUndoRedo(
 
 	function onKeydown(e: KeyboardEvent) {
 		// Note: Using raw key will have capitalization issues due
-		// to how shift works in keyboard event it seems... ): 
-		const key = e.key.toLowerCase();
+		// to how shift works in keyboard event it seems... ):
+		const key = e.key.toLowerCase()
 		if ((e.ctrlKey || e.metaKey) && !e.shiftKey && key === 'z') {
 			e.preventDefault()
 			undo()
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
index 86463f0ac18..5b5d096b8e4 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
@@ -125,7 +125,10 @@ const currentDirectory = computed<FileInfo<'directory'>>(() => {
 function navigateTo(file: FileInfo) {
 	const { editing: _, ...query } = route.query
 	router.push({
-		query: file.type == 'file' ? { ...query, path: file.path, editing: 'true' } : { ...query, path: file.path },
+		query:
+			file.type == 'file'
+				? { ...query, path: file.path, editing: 'true' }
+				: { ...query, path: file.path },
 	})
 
 	currentLocation.value = file
@@ -183,9 +186,11 @@ function queryDirectoryEntries(file: FileInfo<'directory'>): DirectoryResult & F
 	return queryFile(
 		file,
 		(queryData) => {
-			return computed<FileItem[]>(() => (queryData.value?.items ?? [])
-				.filter(isVisibleFileItem)
-				.map((item) => { return {...item, path: normalizeDirectoryPath(item.path)} }))
+			return computed<FileItem[]>(() =>
+				(queryData.value?.items ?? []).filter(isVisibleFileItem).map((item) => {
+					return { ...item, path: normalizeDirectoryPath(item.path) }
+				}),
+			)
 		},
 		directoryQueryOptions,
 	)
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index de885d8a927..c131afa6bde 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -244,9 +244,11 @@
 						native-type="button"
 						class="ml-2"
 						:style="{ '--si': 1 }"
-						@click="() => {
-							$emit('toggleConstrainWidth', (constrainWidth = !constrainWidth))
-						}"
+						@click="
+							() => {
+								$emit('toggleConstrainWidth', (constrainWidth = !constrainWidth))
+							}
+						"
 					>
 						<ExpandIcon v-if="constrainWidth" />
 						<CollapseIcon v-else />
@@ -498,12 +500,16 @@ useResizeObserver(serverDataContainer, (entries) => {
 	const entry = entries[0]
 	allowConstrainWidthToggle.value = entry.contentRect.width > 1200
 })
-const constrainWidth = useLocalStorage('server-layout-constrained-width', props.constrainWidth ?? true, {
-	initOnMounted: true,
-	listenToStorageChanges: true,
-})
+const constrainWidth = useLocalStorage(
+	'server-layout-constrained-width',
+	props.constrainWidth ?? true,
+	{
+		initOnMounted: true,
+		listenToStorageChanges: true,
+	},
+)
 if (props.constrainWidth != constrainWidth.value) {
-	constrainWidth.value = props.constrainWidth;
+	constrainWidth.value = props.constrainWidth
 }
 
 const centerEntries = computed(() => props.centerEntries)
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index b668eba154d..221725c631d 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -1739,8 +1739,11 @@
   "files.row.upload-or-create": {
     "defaultMessage": "New Entry"
   },
-  "files.table-header.columns": {
-    "defaultMessage": "Columns"
+  "files.table-header.advanced-view": {
+    "defaultMessage": "Advanced view"
+  },
+  "files.table-header.colored-icons": {
+    "defaultMessage": "Colored icons"
   },
   "files.table-header.created": {
     "defaultMessage": "Created"
@@ -1763,6 +1766,9 @@
   "files.table-header.size": {
     "defaultMessage": "Size"
   },
+  "files.table-header.view-settings": {
+    "defaultMessage": "View settings"
+  },
   "files.tabs.close-tab": {
     "defaultMessage": "Close {name}"
   },
diff --git a/packages/ui/src/providers/tooltip.ts b/packages/ui/src/providers/tooltip.ts
index 27a38ce569d..c02d436bbe1 100644
--- a/packages/ui/src/providers/tooltip.ts
+++ b/packages/ui/src/providers/tooltip.ts
@@ -20,9 +20,12 @@ export interface TooltipBaseProps {
 	allowTransfer?: boolean
 }
 
-type RequiredFor<T, K extends keyof T> = Required<Pick<T, K>> & Pick<T, Exclude<keyof T, K>>;
+type RequiredFor<T, K extends keyof T> = Required<Pick<T, K>> & Pick<T, Exclude<keyof T, K>>
 
-type TooltipState = RequiredFor<Omit<TooltipBaseProps, 'pinned'>, 'placement' | 'theme' | 'reference'>;
+type TooltipState = RequiredFor<
+	Omit<TooltipBaseProps, 'pinned'>,
+	'placement' | 'theme' | 'reference'
+>
 
 type TimeoutId = ReturnType<typeof setTimeout>
 
@@ -70,13 +73,13 @@ function stopHide() {
 function hideWaiting(el?: HTMLElement) {
 	if (hideTimer == null) return false
 
-	const hidingEl = hideTimer.el;
-	stopHide();
+	const hidingEl = hideTimer.el
+	stopHide()
 
-	const isHidingElement = hidingEl == el;
+	const isHidingElement = hidingEl == el
 	if (!isHidingElement) hide(hidingEl, true)
 
-	return isHidingElement;
+	return isHidingElement
 }
 
 function clear() {
@@ -92,7 +95,7 @@ function clear() {
 
 function hasTooltipContent(el: HTMLElement) {
 	const source = sources.get(el)
-	return !!((typeof source?.text === 'function' ? source.text() : source?.text) || source?.content);
+	return !!((typeof source?.text === 'function' ? source.text() : source?.text) || source?.content)
 }
 
 function open(el: HTMLElement) {
@@ -123,26 +126,29 @@ function show(immediate: boolean, delay: number = SHOW_DELAY) {
 	if (!el || !hasTooltipContent(el)) {
 		return
 	}
-	if (hideWaiting(el)) return;
-	if (showTimer) stopShow();
-	const source = sources.get(el);
-	if (immediate || ((activeTooltip.value.reference || Date.now() - lastOpen <= delay) && source?.allowTransfer)) {
+	if (hideWaiting(el)) return
+	if (showTimer) stopShow()
+	const source = sources.get(el)
+	if (
+		immediate ||
+		((activeTooltip.value.reference || Date.now() - lastOpen <= delay) && source?.allowTransfer)
+	) {
 		open(el)
 		return
 	}
 	showTimer = {
 		id: setTimeout(() => {
-			open(el);
-			stopShow();
+			open(el)
+			stopShow()
 		}, delay),
-		el: el
+		el: el,
 	}
 }
 
 function hide(el: HTMLElement, immediate: boolean, delay: number = HIDE_DELAY) {
-	if (showTimer?.el === el) stopShow();
+	if (showTimer?.el === el) stopShow()
 
-	const source = sources.get(el);
+	const source = sources.get(el)
 
 	if (source?.pinned) {
 		return
@@ -172,7 +178,7 @@ function hide(el: HTMLElement, immediate: boolean, delay: number = HIDE_DELAY) {
 			clear()
 			stopHide()
 		}, delay),
-		el: el
+		el: el,
 	}
 }
 
@@ -216,15 +222,14 @@ export function tooltipEnter(el: HTMLElement, delay?: number): void {
 	if (!hasTooltipContent(el)) {
 		return
 	}
-	console.log("tooltipEnter", delay)
+	console.log('tooltipEnter', delay)
 	hovered = el
 	show(false, delay)
 }
 
-
 export function preventHide(el: HTMLElement) {
 	if (hideTimer?.el == el) {
-		stopHide();
+		stopHide()
 	}
 }
 

From d15975ea12d171eb8681ade5b637f937e65bf07f Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Tue, 6 Oct 2026 17:57:00 -0500
Subject: [PATCH 13/18] fix: resolve issue with app building caused by type
 error

---
 apps/app/src/main.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/main.rs b/apps/app/src/main.rs
index 5a1b7cf43b4..8db979116ec 100644
--- a/apps/app/src/main.rs
+++ b/apps/app/src/main.rs
@@ -197,7 +197,7 @@ fn main() {
 
         // Refresh the hidden window's frame before window-state measures its client area.
         builder = builder.plugin(
-            tauri::plugin::Builder::new("window-frame")
+            tauri::plugin::Builder::<_, ()>::new("window-frame")
                 .on_window_ready(|window| {
                     if window.label() != "main" {
                         return;

From 43dc431f9ed56836d0d938c2a8b0100406329638 Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Tue, 6 Oct 2026 18:01:12 -0500
Subject: [PATCH 14/18] fix: resolve app layout issues with new file view and
 constant load bar in app

---
 .../src/pages/hosting/manage/Files.vue        |  6 +++-
 .../src/pages/hosting/manage/Index.vue        |  1 +
 .../src/pages/instance/files/index.vue        | 35 +++++++++++++------
 .../src/pages/hosting/manage/[id].vue         |  1 +
 .../files-tab/components/FileBrowserPanel.vue | 27 +++++++-------
 .../layouts/wrapped/hosting/manage/files.vue  |  2 +-
 .../layouts/wrapped/hosting/manage/root.vue   |  9 +++--
 7 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/apps/app-frontend/src/pages/hosting/manage/Files.vue b/apps/app-frontend/src/pages/hosting/manage/Files.vue
index 9bd07ee2e90..1b8939393ed 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Files.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Files.vue
@@ -22,5 +22,9 @@ try {
 </script>
 
 <template>
-	<ServersManageFilesPage />
+	<div
+		class="pt-2 [--files-sticky-top:1.5rem] [--files-viewport-height:calc(100vh_-_var(--top-bar-height,3rem))]"
+	>
+		<ServersManageFilesPage />
+	</div>
 </template>
diff --git a/apps/app-frontend/src/pages/hosting/manage/Index.vue b/apps/app-frontend/src/pages/hosting/manage/Index.vue
index e182d1386fc..f00a837a712 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Index.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Index.vue
@@ -28,6 +28,7 @@
 					})
 				}
 			"
+			:constrain-width="false"
 		>
 			<template #default="{ onReinstall, onReinstallFailed }">
 				<RouterView v-slot="{ Component }">
diff --git a/apps/app-frontend/src/pages/instance/files/index.vue b/apps/app-frontend/src/pages/instance/files/index.vue
index 1b7f0bd1ccf..425e201b2b9 100644
--- a/apps/app-frontend/src/pages/instance/files/index.vue
+++ b/apps/app-frontend/src/pages/instance/files/index.vue
@@ -26,6 +26,7 @@ import {
 } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { invoke } from '@tauri-apps/api/core'
+import { useDebounceFn } from '@vueuse/core'
 import { computed, effectScope, markRaw, onScopeDispose, ref, shallowReactive, watch } from 'vue'
 
 import { useAppEvent } from '@/composables/use-app-event'
@@ -204,18 +205,30 @@ function isReadOnly(file: FileInfo | null): boolean {
 
 const isRefreshing = ref<boolean>(false)
 
+/** Refetches every loaded listing in the background, without showing the loading bar. */
+async function invalidateListings() {
+	await queryClient.invalidateQueries({
+		queryKey: [...instanceKeys.detail(instanceId.value), 'files'],
+	})
+}
+
+/** A refresh the user asked for, which is shown as loading. */
 async function refresh() {
 	debug('refresh: called, currentDirectory =', currentDirectory.value.path)
 	isRefreshing.value = true
 	try {
-		await queryClient.invalidateQueries({
-			queryKey: [...instanceKeys.detail(instanceId.value), 'files'],
-		})
+		await invalidateListings()
 	} finally {
 		isRefreshing.value = false
 	}
 }
 
+/**
+ * The instance watcher reports a sync for any change in the instance folder (e.g. a running game
+ * writing its logs), so these are batched and refetched in the background.
+ */
+const invalidateListingsDebounced = useDebounceFn(invalidateListings, 500)
+
 function navigateTo(file: FileInfo) {
 	debug('navigateTo:', file.path)
 	currentLocation.value = file
@@ -240,7 +253,7 @@ async function createItem(name: string, type: 'file' | 'directory'): Promise<Fil
 		} else {
 			await writeBytes(file.path, new Uint8Array(), true)
 		}
-		await refresh()
+		await invalidateListings()
 		return file
 	} catch (e) {
 		notifyError(formatMessage(commonMessages.createFailedLabel), e)
@@ -255,7 +268,7 @@ async function renameFile(file: FileInfo, destination: string, failedLabel: stri
 			source: toRelativePath(file.path),
 			destination: toRelativePath(destination),
 		})
-		await refresh()
+		await invalidateListings()
 		return infoFrom({ name: file.name, type: file.type, path: destination })
 	} catch (e) {
 		notifyError(failedLabel, e)
@@ -282,7 +295,7 @@ async function deleteItem(file: FileInfo, recursive: boolean): Promise<boolean>
 			path: toRelativePath(file.path),
 			recursive,
 		})
-		await refresh()
+		await invalidateListings()
 		return true
 	} catch (e) {
 		notifyError(formatMessage(commonMessages.deleteFailedLabel), e)
@@ -341,7 +354,7 @@ async function uploadFiles(files: File[]) {
 		notifyError(formatMessage(commonMessages.uploadFailedLabel), e)
 	} finally {
 		uploadState.value.isUploading = false
-		await refresh()
+		await invalidateListings()
 	}
 }
 
@@ -361,8 +374,8 @@ async function extractFile(path: string, override: boolean, dry: boolean) {
 useAppEvent('instance', async (event) => {
 	debug('app event: instance =', event.event, 'path =', event.instance_id)
 	if (event.instance_id === instanceId.value && event.event === 'synced') {
-		debug('app event: synced instance matched, calling refresh')
-		await refresh()
+		debug('app event: synced instance matched, refetching listings')
+		await invalidateListingsDebounced()
 	}
 })
 
@@ -422,7 +435,9 @@ provideFileManager({
 
 <template>
 	<ReadyTransition :pending="initialLoadPending">
-		<div class="[--files-viewport-height:calc(100vh_-_var(--top-bar-height))]">
+		<div
+			class="pt-2 [--files-sticky-top:1.5rem] [--files-viewport-height:calc(100vh_-_var(--top-bar-height,3rem))]"
+		>
 			<FilePageLayout :show-refresh-button="true" />
 		</div>
 	</ReadyTransition>
diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index f4b635d3592..5e900740a27 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -28,6 +28,7 @@
 			}
 		"
 		:constrain-width="constrainWidth"
+		:allow-constrain-width-toggle="true"
 		@toggle-constrain-width="
 			(value: boolean) => {
 				constrainWidth = value
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
index 93d789f6d1c..0acb6222333 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
@@ -1,17 +1,19 @@
 <template>
 	<div
 		ref="panelRoot"
-		class="flex w-full scroll-mt-[var(--files-sticky-top,0px)] flex-col gap-3 p-1 pl-2"
+		class="flex min-h-[calc(var(--files-viewer-height)_+_var(--files-navbar-height,3rem)_+_18px)] w-full scroll-mt-[var(--files-sticky-top,0px)] flex-col gap-3 p-1 pl-2 [overflow-y:clip]"
 		:class="{ 'snap-start': isFileActive }"
 		:style="{
 			'--files-navbar-height': `${navbarHeight}px`,
 			'--files-trailing-space': `${trailingSpace}px`,
 			'--files-table-header-top': `calc(var(--files-sticky-top, 0px) + ${navbarHeight}px + ${tabStripHeight}px)`,
+			'--files-viewer-height':
+				'max(24rem, calc(var(--files-viewport-height, 100dvh) - var(--files-sticky-top, 0px) - var(--files-navbar-height, 3rem) - 18px - var(--files-trailing-space, 0px)))',
 		}"
 	>
 		<div
 			ref="navbarWrapper"
-			class="sticky top-[var(--files-sticky-top,0px)] z-30 bg-surface-1 py-1"
+			class="sticky top-[var(--files-sticky-top,0px)] z-[29] bg-surface-1 py-1 before:pointer-events-none before:top-[calc(-1.5rem_+_1px)] before:absolute  before:inset-x-0  before:h-[var(--files-sticky-top,0px)] before:bg-[var(--color-bg,_var(--surface-1))] before:content-['']"
 		>
 			<FileNavbar
 				:sidebar-open="sidebarOpen"
@@ -50,7 +52,7 @@
 				class="shrink-0 overflow-hidden"
 				:class="
 					isFileActive
-						? 'h-[calc(var(--files-viewport-height,100dvh)_-_var(--files-sticky-top,0px)_-_var(--files-navbar-height,3rem)_-_18px_-_var(--files-trailing-space,0px))] min-h-[24rem]'
+						? 'h-[var(--files-viewer-height)]'
 						: ui.advancedView.value
 							? 'sticky top-[calc(var(--files-sticky-top,0px)_+_var(--files-navbar-height,0px))] z-20 h-10'
 							: 'h-0'
@@ -69,7 +71,6 @@
 			<div v-show="!isFileActive && !ui.error.value">
 				<FileUploadDragAndDrop
 					ref="fileUploadRef"
-					class=""
 					:disabled="ui.isBusy.value"
 					@drop-error="ui.handleDropError"
 					@files-dropped="ui.uploadFiles"
@@ -277,9 +278,10 @@ const activeFileKey = computed(() =>
 
 /**
  * Scroll space below the file viewer within the page's content (stopping at `<main>`, so a site
- * footer doesn't count). The editor is shortened by this much so that scrolling to the end of the
- * page can never push the tab strip under the sticky navbar. Parents' `min-height` slack is
- * deliberately ignored, since it shrinks as the editor grows.
+ * footer doesn't count). The viewer's height (the editor's, and the listing's minimum) is shortened
+ * by this much so that scrolling to the end of the page can never push the tab strip under the
+ * sticky navbar, and switching between files and folders keeps the page the same height. Parents'
+ * `min-height` slack is deliberately ignored, since it shrinks as the viewer grows.
  */
 const trailingSpace = ref(0)
 
@@ -328,13 +330,9 @@ watch(activeFileKey, (key) => {
 	})
 })
 
-watch(navbarHeight, () => {
-	if (isFileActive.value) nextTick(measureTrailingSpace)
-})
+watch(navbarHeight, () => nextTick(measureTrailingSpace))
 
-useEventListener('resize', () => {
-	if (isFileActive.value) measureTrailingSpace()
-})
+useEventListener('resize', measureTrailingSpace)
 
 /**
  * While a file is open, the scroll container snaps (by proximity) to the file viewer, so it is
@@ -363,9 +361,8 @@ watch(isFileActive, (active) => {
 })
 onMounted(() => {
 	setViewerSnapping(isFileActive.value)
-	if (!isFileActive.value) return
 	measureTrailingSpace()
-	nextTick(scrollPanelIntoView)
+	if (isFileActive.value) nextTick(scrollPanelIntoView)
 })
 onBeforeUnmount(() => setViewerSnapping(false))
 </script>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
index 5b5d096b8e4..f26ec3bdbc3 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
@@ -552,7 +552,7 @@ async function zipPaths(
 watch(
 	() => fsOps.value,
 	() => {
-		refreshList()
+		queryClient.invalidateQueries({ queryKey: ['files', serverId] })
 	},
 )
 
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index c131afa6bde..026ef2b3a39 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -108,7 +108,7 @@
 			containedLayout
 				? 'h-full min-h-0 overflow-hidden'
 				: constrainWidth
-					? ['min-h-[100svh] ', centerEntries ? 'max-w-[1280px]' : '']
+					? ['min-h-[100svh] max-w-[1280px]']
 					: 'min-h-[calc(100svh-100px)]',
 		]"
 	>
@@ -435,7 +435,7 @@ const props = withDefaults(
 			type: 'mod' | 'plugin' | 'datapack'
 		}) => void | Promise<void>
 		constrainWidth?: boolean
-		centerEntries?: boolean
+		allowConstrainWidthToggle?: boolean
 		layoutMode?: 'page' | 'contained'
 	}>(),
 	{
@@ -452,7 +452,7 @@ const props = withDefaults(
 		browseModpacks: undefined,
 		browseContent: undefined,
 		constrainWidth: undefined,
-		centerEntries: true,
+		allowConstrainWidthToggle: false,
 		layoutMode: 'page',
 	},
 )
@@ -498,7 +498,7 @@ const serverDataContainer = ref<InstanceType<typeof HTMLDivElement>>()
 const allowConstrainWidthToggle = ref<boolean>(false)
 useResizeObserver(serverDataContainer, (entries) => {
 	const entry = entries[0]
-	allowConstrainWidthToggle.value = entry.contentRect.width > 1200
+	allowConstrainWidthToggle.value = entry.contentRect.width > 1200 && props.allowConstrainWidthToggle
 })
 const constrainWidth = useLocalStorage(
 	'server-layout-constrained-width',
@@ -512,7 +512,6 @@ if (props.constrainWidth != constrainWidth.value) {
 	constrainWidth.value = props.constrainWidth
 }
 
-const centerEntries = computed(() => props.centerEntries)
 const containedLayout = computed(() => props.layoutMode === 'contained')
 const isNuxt = computed(() => client instanceof NuxtModrinthClient)
 const queryClient = useQueryClient()

From 917e2c26b11531acc30ddf301db1eca72f6d8fff Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Tue, 6 Oct 2026 18:24:58 -0500
Subject: [PATCH 15/18] feat: Add icons for logs and crash reports and adjust
 coloring of file icons

---
 packages/assets/generated-icons.ts              |  4 ++++
 packages/assets/icons/clipboard-list.svg        |  5 +++++
 packages/assets/icons/square-text.svg           |  6 ++++++
 .../ui/src/layouts/shared/files-tab/layout.vue  |  4 ++--
 .../ui/src/layouts/shared/files-tab/utils.ts    | 17 +++++++++++------
 5 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 packages/assets/icons/clipboard-list.svg
 create mode 100644 packages/assets/icons/square-text.svg

diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 07ccbe012d8..cf614987764 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -92,6 +92,7 @@ import _CircuitBoardIcon from './icons/circuit-board.svg?component'
 import _ClearIcon from './icons/clear.svg?component'
 import _ClientIcon from './icons/client.svg?component'
 import _ClipboardCopyIcon from './icons/clipboard-copy.svg?component'
+import _ClipboardListIcon from './icons/clipboard-list.svg?component'
 import _ClockIcon from './icons/clock.svg?component'
 import _ClockArrowDownIcon from './icons/clock-arrow-down.svg?component'
 import _ClockArrowUpIcon from './icons/clock-arrow-up.svg?component'
@@ -287,6 +288,7 @@ import _SpinnerIcon from './icons/spinner.svg?component'
 import _SplitIcon from './icons/split.svg?component'
 import _SquareIcon from './icons/square.svg?component'
 import _SquarePlusIcon from './icons/square-plus.svg?component'
+import _SquareTextIcon from './icons/square-text.svg?component'
 import _StarIcon from './icons/star.svg?component'
 import _StickyNotePlusIcon from './icons/sticky-note-plus.svg?component'
 import _StopCircleIcon from './icons/stop-circle.svg?component'
@@ -560,6 +562,7 @@ export const CircuitBoardIcon = _CircuitBoardIcon
 export const ClearIcon = _ClearIcon
 export const ClientIcon = _ClientIcon
 export const ClipboardCopyIcon = _ClipboardCopyIcon
+export const ClipboardListIcon = _ClipboardListIcon
 export const ClockIcon = _ClockIcon
 export const ClockArrowDownIcon = _ClockArrowDownIcon
 export const ClockArrowUpIcon = _ClockArrowUpIcon
@@ -755,6 +758,7 @@ export const SpinnerIcon = _SpinnerIcon
 export const SplitIcon = _SplitIcon
 export const SquareIcon = _SquareIcon
 export const SquarePlusIcon = _SquarePlusIcon
+export const SquareTextIcon = _SquareTextIcon
 export const StarIcon = _StarIcon
 export const StickyNotePlusIcon = _StickyNotePlusIcon
 export const StopCircleIcon = _StopCircleIcon
diff --git a/packages/assets/icons/clipboard-list.svg b/packages/assets/icons/clipboard-list.svg
new file mode 100644
index 00000000000..fcf74bac951
--- /dev/null
+++ b/packages/assets/icons/clipboard-list.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard-list preview-icon">
+	<rect width="8" height="4" x="8" y="2" rx="1" ry="1"/>
+	<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
+	<path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/>
+</svg>
diff --git a/packages/assets/icons/square-text.svg b/packages/assets/icons/square-text.svg
new file mode 100644
index 00000000000..089002784b2
--- /dev/null
+++ b/packages/assets/icons/square-text.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-text preview-icon">
+	<rect width="18" height="18" x="3" y="3" rx="2"/>
+	<path d="M7 8h8"/>
+	<path d="M7 12h10"/>
+	<path d="M7 16h6"/>
+</svg>
diff --git a/packages/ui/src/layouts/shared/files-tab/layout.vue b/packages/ui/src/layouts/shared/files-tab/layout.vue
index 1145f257b3a..5e029a6ea66 100644
--- a/packages/ui/src/layouts/shared/files-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/files-tab/layout.vue
@@ -262,10 +262,10 @@ const pageContext = injectPageContext(null)
 const reworkEnabled = computed(() => pageContext?.featureFlags?.filesTabRework?.value ?? false)
 
 const advancedViewSetting = useLocalStorage('files-advanced-view', true, { initOnMounted: true })
-const coloredIconsSetting = useLocalStorage('files-colored-icons', true, { initOnMounted: true })
+const coloredIconsSetting = useLocalStorage('files-colored-icons', reworkEnabled.value, { initOnMounted: true })
 /** The sidebar tree, tabs and column picker; behind the rework flag, then a user preference. */
 const advancedView = computed(() => reworkEnabled.value && advancedViewSetting.value)
-const coloredIcons = computed(() => !reworkEnabled.value || coloredIconsSetting.value)
+const coloredIcons = computed(() => coloredIconsSetting.value)
 
 /** Switching to the simple view drops the extra tabs, so their unsaved changes are confirmed first. */
 async function setAdvancedView(value: boolean) {
diff --git a/packages/ui/src/layouts/shared/files-tab/utils.ts b/packages/ui/src/layouts/shared/files-tab/utils.ts
index 98e7a56f61b..574f360cda1 100644
--- a/packages/ui/src/layouts/shared/files-tab/utils.ts
+++ b/packages/ui/src/layouts/shared/files-tab/utils.ts
@@ -6,6 +6,8 @@ import {
 	GlassesIcon,
 	GlobeIcon,
 	PaintbrushIcon,
+	ImagesIcon,
+	SquareTextIcon, ClipboardListIcon
 } from '@modrinth/assets'
 import type { Component } from 'vue'
 
@@ -22,13 +24,16 @@ export interface FileIconStyle {
 const DEFAULT_DIRECTORY_ICON: FileIconStyle = { icon: FolderOpenIcon, color: 'text-amber-400' }
 
 const DIRECTORY_ICON_STYLES: Record<string, FileIconStyle> = {
-	config: { icon: FolderCogIcon, color: 'text-teal-400' },
+	config: { icon: FolderCogIcon, color: 'text-purple' },
+	'crash-reports': { icon: ClipboardListIcon, color: 'text-red-400' },
+	logs: { icon: SquareTextIcon, color: 'text-red-400'},
 	world: { icon: GlobeIcon, color: 'text-blue' },
 	saves: { icon: GlobeIcon, color: 'text-blue' },
-	datapacks: { icon: BracesIcon, color: 'text-red' },
-	mods: { icon: BoxIcon, color: 'text-purple' },
-	resourcepacks: { icon: PaintbrushIcon, color: 'text-rose' },
-	shaderpacks: { icon: GlassesIcon, color: 'text-green' },
+	datapacks: { icon: BracesIcon, color: 'text-brand' },
+	mods: { icon: BoxIcon, color: 'text-brand' },
+	resourcepacks: { icon: PaintbrushIcon, color: 'text-brand' },
+	shaderpacks: { icon: GlassesIcon, color: 'text-brand' },
+	screenshots: { icon: ImagesIcon, color: 'text-blue' },
 }
 
 /** Icon and color for a file or directory, shared by the listing, sidebar tree and tabs. */
@@ -36,7 +41,7 @@ export function fileIconFor(file: Pick<FileInfo, 'name' | 'type'>): FileIconStyl
 	if (file.type === 'directory') {
 		return DIRECTORY_ICON_STYLES[file.name.toLowerCase()] ?? DEFAULT_DIRECTORY_ICON
 	}
-	return { icon: getFileExtensionIcon(getFileExtension(file.name)), color: 'text-olive-300' }
+	return { icon: getFileExtensionIcon(getFileExtension(file.name)), color: 'text-mist-200' }
 }
 
 export function joinDisplayPath(basePath: string | undefined, itemPath: string) {

From 07929a3f82290c27522019e40ee2e55ab4c55b43 Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Tue, 6 Oct 2026 18:57:13 -0500
Subject: [PATCH 16/18] fix: prepr part 2

---
 apps/app/src/api/ads_occlusion_windows.rs              | 10 +++++-----
 .../src/state/content_store/adapters/verified_files.rs |  5 +++--
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/apps/app/src/api/ads_occlusion_windows.rs b/apps/app/src/api/ads_occlusion_windows.rs
index 2a5fdb3ad9f..3f7a90c1aef 100644
--- a/apps/app/src/api/ads_occlusion_windows.rs
+++ b/apps/app/src/api/ads_occlusion_windows.rs
@@ -85,7 +85,7 @@ fn ad_rect_in_screen(
 ) -> Option<RECT> {
     let mut origin = POINT { x: 0, y: 0 };
 
-    if !unsafe { ClientToScreen(main_hwnd, &mut origin).as_bool() } {
+    if !unsafe { ClientToScreen(main_hwnd, &raw mut origin).as_bool() } {
         return None;
     }
 
@@ -122,7 +122,7 @@ fn window_process_id(hwnd: HWND) -> Option<u32> {
     let mut process_id = 0u32;
 
     unsafe {
-        GetWindowThreadProcessId(hwnd, Some(&mut process_id));
+        GetWindowThreadProcessId(hwnd, Some(&raw mut process_id));
     }
 
     (process_id != 0).then_some(process_id)
@@ -135,7 +135,7 @@ fn is_dwm_cloaked(hwnd: HWND) -> bool {
         DwmGetWindowAttribute(
             hwnd,
             DWMWA_CLOAKED,
-            &mut cloaked as *mut u32 as *mut _,
+            &raw mut cloaked as *mut _,
             std::mem::size_of::<u32>() as u32,
         )
     }
@@ -150,12 +150,12 @@ fn window_rect(hwnd: HWND) -> Option<RECT> {
         DwmGetWindowAttribute(
             hwnd,
             DWMWA_EXTENDED_FRAME_BOUNDS,
-            &mut rect as *mut RECT as *mut _,
+            &raw mut rect as *mut _,
             std::mem::size_of::<RECT>() as u32,
         )
     }
     .is_err()
-        && unsafe { GetWindowRect(hwnd, &mut rect) }.is_err()
+        && unsafe { GetWindowRect(hwnd, &raw mut rect) }.is_err()
     {
         return None;
     }
diff --git a/packages/app-lib/src/state/content_store/adapters/verified_files.rs b/packages/app-lib/src/state/content_store/adapters/verified_files.rs
index 27f1b39b937..778e904d65c 100644
--- a/packages/app-lib/src/state/content_store/adapters/verified_files.rs
+++ b/packages/app-lib/src/state/content_store/adapters/verified_files.rs
@@ -51,11 +51,12 @@ impl FileStamp {
             let mut information = BY_HANDLE_FILE_INFORMATION::default();
             let mut basic = FILE_BASIC_INFO::default();
             unsafe {
-                GetFileInformationByHandle(handle, &mut information).ok()?;
+                GetFileInformationByHandle(handle, &raw mut information)
+                    .ok()?;
                 GetFileInformationByHandleEx(
                     handle,
                     FileBasicInfo,
-                    (&mut basic as *mut FILE_BASIC_INFO).cast(),
+                    (&raw mut basic).cast(),
                     size_of::<FILE_BASIC_INFO>() as u32,
                 )
                 .ok()?;

From 5e389d4464553fc13c63c9b313ee9ca450f84cbd Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Tue, 6 Oct 2026 19:21:35 -0500
Subject: [PATCH 17/18] fix: prepr part 3

---
 .../shared/files-tab/components/FileBrowserPanel.vue       | 2 +-
 packages/ui/src/layouts/shared/files-tab/layout.vue        | 4 +++-
 packages/ui/src/layouts/shared/files-tab/utils.ts          | 7 ++++---
 packages/ui/src/layouts/wrapped/hosting/manage/root.vue    | 6 +++---
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
index 0acb6222333..5dfe45bce64 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
@@ -13,7 +13,7 @@
 	>
 		<div
 			ref="navbarWrapper"
-			class="sticky top-[var(--files-sticky-top,0px)] z-[29] bg-surface-1 py-1 before:pointer-events-none before:top-[calc(-1.5rem_+_1px)] before:absolute  before:inset-x-0  before:h-[var(--files-sticky-top,0px)] before:bg-[var(--color-bg,_var(--surface-1))] before:content-['']"
+			class="sticky top-[var(--files-sticky-top,0px)] z-[29] bg-surface-1 py-1 before:pointer-events-none before:top-[calc(-1.5rem_+_1px)] before:absolute before:inset-x-0 before:h-[var(--files-sticky-top,0px)] before:bg-[var(--color-bg,_var(--surface-1))] before:content-['']"
 		>
 			<FileNavbar
 				:sidebar-open="sidebarOpen"
diff --git a/packages/ui/src/layouts/shared/files-tab/layout.vue b/packages/ui/src/layouts/shared/files-tab/layout.vue
index 5e029a6ea66..630514cd361 100644
--- a/packages/ui/src/layouts/shared/files-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/files-tab/layout.vue
@@ -262,7 +262,9 @@ const pageContext = injectPageContext(null)
 const reworkEnabled = computed(() => pageContext?.featureFlags?.filesTabRework?.value ?? false)
 
 const advancedViewSetting = useLocalStorage('files-advanced-view', true, { initOnMounted: true })
-const coloredIconsSetting = useLocalStorage('files-colored-icons', reworkEnabled.value, { initOnMounted: true })
+const coloredIconsSetting = useLocalStorage('files-colored-icons', reworkEnabled.value, {
+	initOnMounted: true,
+})
 /** The sidebar tree, tabs and column picker; behind the rework flag, then a user preference. */
 const advancedView = computed(() => reworkEnabled.value && advancedViewSetting.value)
 const coloredIcons = computed(() => coloredIconsSetting.value)
diff --git a/packages/ui/src/layouts/shared/files-tab/utils.ts b/packages/ui/src/layouts/shared/files-tab/utils.ts
index 574f360cda1..917600737d2 100644
--- a/packages/ui/src/layouts/shared/files-tab/utils.ts
+++ b/packages/ui/src/layouts/shared/files-tab/utils.ts
@@ -1,13 +1,14 @@
 import {
 	BoxIcon,
 	BracesIcon,
+	ClipboardListIcon,
 	FolderCogIcon,
 	FolderOpenIcon,
 	GlassesIcon,
 	GlobeIcon,
-	PaintbrushIcon,
 	ImagesIcon,
-	SquareTextIcon, ClipboardListIcon
+	PaintbrushIcon,
+	SquareTextIcon,
 } from '@modrinth/assets'
 import type { Component } from 'vue'
 
@@ -26,7 +27,7 @@ const DEFAULT_DIRECTORY_ICON: FileIconStyle = { icon: FolderOpenIcon, color: 'te
 const DIRECTORY_ICON_STYLES: Record<string, FileIconStyle> = {
 	config: { icon: FolderCogIcon, color: 'text-purple' },
 	'crash-reports': { icon: ClipboardListIcon, color: 'text-red-400' },
-	logs: { icon: SquareTextIcon, color: 'text-red-400'},
+	logs: { icon: SquareTextIcon, color: 'text-red-400' },
 	world: { icon: GlobeIcon, color: 'text-blue' },
 	saves: { icon: GlobeIcon, color: 'text-blue' },
 	datapacks: { icon: BracesIcon, color: 'text-brand' },
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index 026ef2b3a39..760b7c49f76 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -237,7 +237,7 @@
 						:style="{ '--si': 1 }"
 					/>
 					<IconButton
-						v-if="allowConstrainWidthToggle"
+						v-if="showConstrainWidthToggle"
 						v-tooltip="constrainWidth ? 'Expand View' : 'Collapse View'"
 						size="md"
 						:label="constrainWidth ? 'Expand View' : 'Collapse View'"
@@ -495,10 +495,10 @@ const DISABLE_LOADING_ANIM = true
 const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 const serverDataContainer = ref<InstanceType<typeof HTMLDivElement>>()
-const allowConstrainWidthToggle = ref<boolean>(false)
+const showConstrainWidthToggle = ref<boolean>(false)
 useResizeObserver(serverDataContainer, (entries) => {
 	const entry = entries[0]
-	allowConstrainWidthToggle.value = entry.contentRect.width > 1200 && props.allowConstrainWidthToggle
+	showConstrainWidthToggle.value = entry.contentRect.width > 1200 && props.allowConstrainWidthToggle
 })
 const constrainWidth = useLocalStorage(
 	'server-layout-constrained-width',

From 4c27c2d2ecbb8c4086e720ed193f406db5be4140 Mon Sep 17 00:00:00 2001
From: Blodhgarm <blodhgrm@gmail.com>
Date: Tue, 6 Oct 2026 20:03:55 -0500
Subject: [PATCH 18/18] feat: File Action/Details API, Better Right click
 support, More advanced File Searching

- Add close tab actions when right clicking tab
- Add ablity to right click nav bar breadcrumbs to act on given file item
- Resolve issues with tabs clipping when too many exist
- Resolve issues where sidebar search would disappear when looking at a file
- Add Action/Details API to add more actions for files
- Add dropdown file search for looking at files rather than filtering sidebar view
---
 .../src/pages/instance/files/index.vue        |   5 +
 .../files-tab/components/FileActionBar.vue    |  14 +-
 .../files-tab/components/FileBrowserPanel.vue |  26 ++-
 .../files-tab/components/FileDetailValue.vue  |  35 +++
 .../components/FileEmptyWorkspace.vue         | 116 ++++++++++
 .../files-tab/components/FileNavbar.vue       |   4 +
 .../shared/files-tab/components/FileRow.vue   | 184 ++--------------
 .../files-tab/components/FileSearch.vue       | 179 +++++++++++++++
 .../files-tab/components/FileSideBar.vue      |   2 +
 .../shared/files-tab/components/FileTree.vue  |   9 +-
 .../files-tab/components/tabs/FileTab.vue     |  40 +++-
 .../files-tab/components/tabs/FileTabs.vue    |   2 +
 .../components/tabs/FileTabsActions.vue       |  62 +++++-
 .../files-tab/composables/entry-menu.ts       | 204 ++++++++++++++++++
 .../shared/files-tab/composables/file-tabs.ts | 138 ++++++++++--
 .../src/layouts/shared/files-tab/layout.vue   |  27 ++-
 .../files-tab/providers/file-browser-ui.ts    |   8 +-
 .../files-tab/providers/file-manager.ts       |  16 +-
 .../ui/src/layouts/shared/files-tab/types.ts  |  26 +++
 .../layouts/wrapped/hosting/manage/files.vue  |  10 +-
 packages/ui/src/locales/en-US/index.json      |  33 +++
 21 files changed, 906 insertions(+), 234 deletions(-)
 create mode 100644 packages/ui/src/layouts/shared/files-tab/components/FileDetailValue.vue
 create mode 100644 packages/ui/src/layouts/shared/files-tab/components/FileEmptyWorkspace.vue
 create mode 100644 packages/ui/src/layouts/shared/files-tab/components/FileSearch.vue
 create mode 100644 packages/ui/src/layouts/shared/files-tab/composables/entry-menu.ts

diff --git a/apps/app-frontend/src/pages/instance/files/index.vue b/apps/app-frontend/src/pages/instance/files/index.vue
index 425e201b2b9..83002238974 100644
--- a/apps/app-frontend/src/pages/instance/files/index.vue
+++ b/apps/app-frontend/src/pages/instance/files/index.vue
@@ -182,6 +182,11 @@ const directoryTree = {
 		)
 	},
 	expandedEntries: expandedDirectories,
+	loadedEntries: computed(() =>
+		[...fileQueries.values()].flatMap((entry) =>
+			entry.type === 'directory' ? (entry as DirectoryResult).data.value : [],
+		),
+	),
 } satisfies DirectoryTree
 
 /** Paths of every loaded entry marked read-only, so lookups don't rescan all listings per row. */
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
index 4bee38ec7ec..2c5b08db119 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileActionBar.vue
@@ -86,19 +86,6 @@
 				</IconButton>
 			</div>
 		</div>
-		<div v-if="!hasNav && !isEditing" class="flex items-center gap-2">
-			<Input
-				:model-value="searchQuery"
-				:icon="SearchIcon"
-				type="search"
-				name="search"
-				autocomplete="off"
-				:placeholder="formatMessage(messages.searchFiles)"
-				size="medium"
-				wrapper-class="flex-1 min-w-0"
-				@update:model-value="$emit('update:searchQuery', $event)"
-			/>
-		</div>
 	</header>
 </template>
 
@@ -213,6 +200,7 @@ export type Properties = {
 }
 
 const props = withDefaults(defineProps<Properties>(), {
+	disabledTooltip: undefined,
 	hasNav: false,
 	smallMode: false,
 	sidebarToggleable: true,
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
index 5dfe45bce64..ca3f0de830e 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileBrowserPanel.vue
@@ -43,6 +43,7 @@
 				@share="() => ui.shareEditorToMclogs()"
 				@find="() => ui.toggleFind()"
 				@toggle-sidebar="() => ui.setSidebarOpen(!sidebarOpen)"
+				@contextmenu="openBreadcrumbMenu"
 			/>
 		</div>
 		<div
@@ -60,15 +61,16 @@
 			>
 				<FileTabs />
 			</div>
+			<FileEmptyWorkspace v-if="!hasTabs" />
 			<FileManagerError
-				v-if="!isFileActive && ui.error.value"
+				v-else-if="!isFileActive && ui.error.value"
 				class="rounded-b-[20px]"
 				:title="formatMessage(messages.errorTitle)"
 				:message="formatMessage(messages.errorMessage)"
 				@refetch="ui.refresh"
 				@home="() => ui.navigateToSegment(0)"
 			/>
-			<div v-show="!isFileActive && !ui.error.value">
+			<div v-show="hasTabs && !isFileActive && !ui.error.value" @contextmenu="openFolderMenu">
 				<FileUploadDragAndDrop
 					ref="fileUploadRef"
 					:disabled="ui.isBusy.value"
@@ -148,8 +150,11 @@ import { useStickyObserver } from '#ui/composables/sticky-observer'
 import { findScrollableAncestor, useVirtualScroll } from '#ui/composables/virtual-scroll.ts'
 import { injectLoadingState } from '#ui/providers/loading-state'
 
+import { useEntryMenu } from '../composables/entry-menu'
 import { useFileColumns } from '../composables/file-columns'
 import { injectFileBrowserUI } from '../providers/file-browser-ui'
+import { parentInfoFrom } from '../utils'
+import FileEmptyWorkspace from './FileEmptyWorkspace.vue'
 import FileManagerError from './FileManagerError.vue'
 import FileNavbar from './FileNavbar.vue'
 import FileRow from './FileRow.vue'
@@ -191,6 +196,23 @@ const props = withDefaults(
 
 const sidebarOpen = computed(() => ui.sidebarOpen.value)
 const isFileActive = computed(() => ui.fileTabs.activeLocation.value.type === 'file')
+/** In the advanced view every tab can be closed, which leaves an empty workspace. */
+const hasTabs = computed(() => ui.fileTabs.tabs.value.length > 0)
+
+const { openMenu } = useEntryMenu()
+
+/** Right-click on the folder's empty space (rows open their own menu and prevent this one). */
+function openFolderMenu(event: MouseEvent) {
+	if (event.defaultPrevented) return
+	openMenu(event, ui.currentDirectory.value)
+}
+
+/** Right-click on a breadcrumb, `depth` segments deep (the last one is the active location). */
+function openBreadcrumbMenu(event: MouseEvent, depth: number) {
+	const location = ui.activeLocation.value
+	const segments = location.path.split('/').filter(Boolean)
+	openMenu(event, depth >= segments.length ? location : parentInfoFrom(location, depth))
+}
 
 const filteredItems = computed(() => ui.filteredItems.value)
 
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileDetailValue.vue b/packages/ui/src/layouts/shared/files-tab/components/FileDetailValue.vue
new file mode 100644
index 00000000000..7ea388d31ea
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileDetailValue.vue
@@ -0,0 +1,35 @@
+<template>
+	<SpinnerIcon v-if="loading" class="size-4 animate-spin text-secondary" aria-hidden="true" />
+	<span v-else class="text-nowrap text-sm text-secondary">{{ value ?? '-' }}</span>
+</template>
+
+<script setup lang="ts">
+import { SpinnerIcon } from '@modrinth/assets'
+import { ref, watch } from 'vue'
+
+import type { FileEntryDetail, FileItem } from '../types'
+
+/** Resolves a custom {@link FileEntryDetail}, which may load lazily (e.g. hashing the file). */
+const props = defineProps<{
+	detail: FileEntryDetail
+	entry: FileItem
+}>()
+
+const value = ref<string | null>(null)
+const loading = ref(false)
+
+watch(
+	() => [props.detail, props.entry] as const,
+	async ([detail, entry], _, onCleanup) => {
+		let cancelled = false
+		onCleanup(() => (cancelled = true))
+
+		loading.value = true
+		const result = await Promise.resolve(detail.value(entry)).catch(() => null)
+		if (cancelled) return
+		value.value = result
+		loading.value = false
+	},
+	{ immediate: true },
+)
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileEmptyWorkspace.vue b/packages/ui/src/layouts/shared/files-tab/components/FileEmptyWorkspace.vue
new file mode 100644
index 00000000000..5e5740d1483
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileEmptyWorkspace.vue
@@ -0,0 +1,116 @@
+<template>
+	<div class="flex flex-col items-center gap-6 bg-surface-2 px-6 py-16 text-center">
+		<div class="flex flex-col items-center gap-2">
+			<FileIcon class="size-12 text-secondary" aria-hidden="true" />
+			<h3 class="m-0 text-xl font-bold text-contrast">{{ formatMessage(messages.title) }}</h3>
+			<p class="m-0 text-sm text-secondary">{{ formatMessage(messages.description) }}</p>
+		</div>
+		<div class="flex flex-wrap justify-center gap-2">
+			<Button type="colored" color="brand" @click="openHome">
+				<HomeIcon aria-hidden="true" />
+				{{ formatMessage(messages.openHome) }}
+			</Button>
+			<Button :disabled="ui.isBusy.value" @click="ui.showCreateModal('file')">
+				<FilePlusIcon aria-hidden="true" />
+				{{ formatMessage(messages.newFile) }}
+			</Button>
+			<Button :disabled="ui.isBusy.value" @click="ui.showCreateModal('directory')">
+				<FolderIcon aria-hidden="true" />
+				{{ formatMessage(messages.newFolder) }}
+			</Button>
+			<Button :disabled="ui.isBusy.value" @click="ui.initiateFileUpload()">
+				<UploadIcon aria-hidden="true" />
+				{{ formatMessage(messages.upload) }}
+			</Button>
+		</div>
+		<div v-if="recentlyClosed.length > 0" class="flex w-full max-w-md flex-col gap-1 text-left">
+			<h4 class="m-0 mb-1 text-sm font-semibold text-secondary">
+				{{ formatMessage(messages.recentlyClosed) }}
+			</h4>
+			<button
+				v-for="entry in recentlyClosed"
+				:key="entry.tab.id"
+				type="button"
+				class="flex items-center gap-2 rounded-lg border-none bg-transparent px-2 py-1.5 text-left text-primary hover:bg-surface-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand"
+				@click="ui.fileTabs.reopenTab(entry.tab)"
+			>
+				<component
+					:is="entry.icon.icon"
+					class="size-4 shrink-0"
+					:class="ui.coloredIcons.value ? entry.icon.color : 'text-secondary'"
+					aria-hidden="true"
+				/>
+				<span class="truncate font-medium">{{ entry.label }}</span>
+				<span class="ml-auto truncate text-xs text-secondary">{{ entry.location.path }}</span>
+			</button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { FileIcon, FilePlusIcon, FolderIcon, HomeIcon, UploadIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { Button } from '#ui/components/base/buttons'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import { currentLocation } from '../composables/file-tabs'
+import { injectFileBrowserUI } from '../providers/file-browser-ui'
+import { fileIconFor, infoFrom } from '../utils'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	title: {
+		id: 'files.empty-workspace.title',
+		defaultMessage: 'No open tabs',
+	},
+	description: {
+		id: 'files.empty-workspace.description',
+		defaultMessage: 'Open a folder or file to get started.',
+	},
+	openHome: {
+		id: 'files.empty-workspace.open-home',
+		defaultMessage: 'Open home folder',
+	},
+	newFile: {
+		id: 'files.navbar.new-file',
+		defaultMessage: 'New file',
+	},
+	newFolder: {
+		id: 'files.navbar.new-folder',
+		defaultMessage: 'New folder',
+	},
+	upload: {
+		id: 'files.navbar.upload-file',
+		defaultMessage: 'Upload file',
+	},
+	recentlyClosed: {
+		id: 'files.empty-workspace.recently-closed',
+		defaultMessage: 'Recently closed',
+	},
+	home: {
+		id: 'files.tabs.home',
+		defaultMessage: 'Home',
+	},
+})
+
+const ui = injectFileBrowserUI()
+
+const recentlyClosed = computed(() =>
+	ui.fileTabs.recentlyClosed.value.map((tab) => {
+		const location = currentLocation(tab)
+		const isHome = location.path === '/'
+		return {
+			tab,
+			location,
+			label: isHome ? formatMessage(messages.home) : location.name,
+			icon: isHome ? { icon: HomeIcon, color: 'text-secondary' } : fileIconFor(location),
+		}
+	}),
+)
+
+function openHome() {
+	ui.fileTabs.openTab(infoFrom('/'))
+}
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
index 9436ddf9977..75b4464a9d9 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
@@ -56,6 +56,7 @@
 								:class="{ '!text-contrast': breadcrumbs.length == 0 }"
 								@click="$emit('navigateHome')"
 								@mouseenter="$emit('prefetchHome')"
+								@contextmenu.prevent="$emit('contextmenu', $event, 0)"
 							>
 								<HomeIcon />
 								<span>Home</span>
@@ -83,6 +84,7 @@
 										if (index < breadcrumbs.length - 1) $emit('navigate', index + 1)
 									}
 								"
+								@contextmenu.prevent="$emit('contextmenu', $event, index + 1)"
 							>
 								{{ segment || '' }}
 							</Button>
@@ -165,6 +167,8 @@ defineEmits<{
 	prefetchHome?: []
 	back: []
 	forward: []
+	/** Right-click on a breadcrumb; `depth` is how many path segments it covers (0 for home). */
+	contextmenu: [event: MouseEvent, depth: number]
 }>()
 
 const breadcrumbOuter = ref<HTMLElement | null>(null)
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue b/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
index f503d18ac67..10d0fea1a62 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileRow.vue
@@ -3,7 +3,7 @@
 		:delay="{ hover: 850, unhover: 100 }"
 		:hoverable="true"
 		:allow-transfer="false"
-		:disabled="hiddenDetails.length === 0"
+		:disabled="hiddenDetails.length === 0 && customDetails.length === 0"
 	>
 		<li
 			role="option"
@@ -133,40 +133,33 @@
 						{{ columnValues[key] }}
 					</span>
 				</div>
+				<div
+					v-for="detail in customDetails"
+					:key="detail.id"
+					class="gap-1 grid grid-cols-2 items-center"
+				>
+					<span class="text-nowrap text-sm text-secondary">{{ detail.label }}</span>
+					<FileDetailValue :detail="detail" :entry="file" />
+				</div>
 			</div>
 		</template>
 	</Tooltip>
 </template>
 
 <script setup lang="ts">
-import {
-	ChevronRightIcon,
-	ClipboardCopyIcon,
-	DownloadIcon,
-	EditIcon,
-	FileIcon,
-	FolderArchiveIcon,
-	FolderOpenIcon,
-	MoreHorizontalIcon,
-	PackageOpenIcon,
-	PlusIcon,
-	RightArrowIcon,
-	TrashIcon,
-} from '@modrinth/assets'
-import { computed, ref, toValue } from 'vue'
+import { ChevronRightIcon, EditIcon, MoreHorizontalIcon } from '@modrinth/assets'
+import { computed, ref } from 'vue'
 
 import { Tooltip } from '#ui/components'
-import type { ButtonMenuLeafOption, ButtonMenuOption } from '#ui/components/base/buttons'
 import { TeleportOverflowMenu } from '#ui/components/base/buttons'
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import { useFormatBytes } from '#ui/composables'
 import { useFormatDateTime } from '#ui/composables/format-date-time'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { useFileActions } from '#ui/layouts/shared/files-tab/composables/folder-actions.ts'
-import { injectNotificationManager } from '#ui/providers/web-notifications'
 import { commonMessages } from '#ui/utils/common-messages'
-import { canOpenInFileEditor, getFileExtension } from '#ui/utils/file-extensions'
+import { canOpenInFileEditor } from '#ui/utils/file-extensions'
 
+import { useEntryMenu } from '../composables/entry-menu'
 import { FILE_COLUMNS, FILE_COLUMNS_ORDER, type FileColumn } from '../composables/file-columns'
 import {
 	fileDragActive,
@@ -177,11 +170,12 @@ import {
 } from '../composables/file-drag-state'
 import { injectFileBrowserUI } from '../providers/file-browser-ui'
 import type { FileItem } from '../types'
-import { childPath, fileIconFor, infoFrom, joinDisplayPath } from '../utils'
+import { childPath, fileIconFor } from '../utils'
+import FileDetailValue from './FileDetailValue.vue'
 
 const { formatMessage } = useVIntl()
-const { addNotification } = injectNotificationManager()
 const ui = injectFileBrowserUI()
+const { menuFor, openMenu } = useEntryMenu()
 
 const basePaddingFactor = 0.75
 
@@ -190,10 +184,6 @@ const messages = defineMessages({
 		id: 'files.row.item-count',
 		defaultMessage: '{count, plural, one {# item} other {# items}}',
 	},
-	createZip: {
-		id: 'files.row.create-zip',
-		defaultMessage: 'Create ZIP',
-	},
 	size: {
 		id: 'files.table-header.size',
 		defaultMessage: 'Size',
@@ -214,14 +204,6 @@ const messages = defineMessages({
 		id: 'files.table-header.modified',
 		defaultMessage: 'Modified',
 	},
-	openInNewTab: {
-		id: 'files.row.open-in-new-tab',
-		defaultMessage: 'Open in new tab',
-	},
-	newOrUpload: {
-		id: 'files.row.upload-or-create',
-		defaultMessage: 'New Entry',
-	},
 	expandFolder: {
 		id: 'files.row.expand-folder',
 		defaultMessage: 'Expand folder',
@@ -267,11 +249,6 @@ const emit = defineEmits<{
 }>()
 
 const selected = computed(() => ui.selectedItems.value.has(props.file.path))
-const readOnly = computed(() => !!ui.isReadOnly?.(props.file))
-const writeDisabled = computed(() => ui.isBusy.value || readOnly.value)
-const writeDisabledTooltip = computed(() =>
-	readOnly.value ? toValue(ui.readOnlyReason) : ui.busyTooltip.value,
-)
 
 const canExpand = computed(
 	() => !!props.isTreeRow && props.file.type === 'directory' && props.expandable !== false,
@@ -328,129 +305,13 @@ const containerClasses = computed(() => {
 	]
 })
 
-const fileExtension = computed(() => getFileExtension(props.file.name))
-
-const canExtract = computed(() => fileExtension.value === 'zip' && !!ui.extractFile)
-
-function getFullPath() {
-	return joinDisplayPath(toValue(ui.basePath), props.file.path)
-}
-
-const { options } = useFileActions(
-	(type) => ui.showCreateModal(type),
-	() => ui.initiateFileUpload(),
+const menuOptions = computed(() =>
+	menuFor(props.file, { selectable: props.selectionWithinActionMenu }),
 )
 
-const menuOptions = computed<ButtonMenuOption[]>(() => {
-	const item = infoFrom(props.file)
-	const wd = writeDisabled.value
-	const wdTooltip = writeDisabledTooltip.value
-	return [
-		{
-			type: 'submenu',
-			id: 'upload-create',
-			label: formatMessage(messages.newOrUpload),
-			icon: FileIcon,
-			options: options.value as ButtonMenuLeafOption[],
-		},
-		{
-			id: 'select-entry',
-			label: formatMessage(commonMessages.selectEntryLabel),
-			icon: iconStyle.value.icon,
-			action: () => ui.toggleItemSelection(props.file),
-			shown: props.selectionWithinActionMenu,
-		},
-		{
-			id: 'open-in-new-tab',
-			label: formatMessage(messages.openInNewTab),
-			icon: PlusIcon,
-			shown: canOpenInTab.value,
-			action: () => ui.handleOpenInNewTab(item),
-		},
-		{ type: 'divider' },
-		{
-			id: 'copy-filename',
-			label: formatMessage(commonMessages.copyFilenameButton),
-			icon: ClipboardCopyIcon,
-			action: () => {
-				navigator.clipboard.writeText(props.file.name)
-				addNotification({
-					title: formatMessage(commonMessages.copiedFilenameLabel),
-					type: 'success',
-				})
-			},
-		},
-		{
-			id: 'copy-full-path',
-			label: formatMessage(commonMessages.copyFullPathButton),
-			icon: ClipboardCopyIcon,
-			action: () => {
-				navigator.clipboard.writeText(getFullPath())
-				addNotification({ title: formatMessage(commonMessages.copiedPathLabel), type: 'success' })
-			},
-		},
-		{
-			id: 'open-in-folder',
-			label: formatMessage(commonMessages.openInFolderButton),
-			icon: FolderOpenIcon,
-			shown: !!ui.openInFolder,
-			action: () => ui.openInFolder?.(getFullPath()),
-		},
-		{ type: 'divider' },
-		{
-			id: 'extract',
-			label: formatMessage(commonMessages.extractButton),
-			icon: PackageOpenIcon,
-			shown: canExtract.value,
-			disabled: wd,
-			tooltip: wd ? wdTooltip : undefined,
-			action: () => ui.handleExtractItem(item),
-		},
-		{ type: 'divider', shown: canExtract.value },
-		{
-			id: 'zip',
-			label: formatMessage(messages.createZip),
-			icon: FolderArchiveIcon,
-			shown: props.file.type === 'directory' && !!ui.zipFolder,
-			disabled: wd,
-			tooltip: wd ? wdTooltip : undefined,
-			action: () => ui.zipFolder?.(item),
-		},
-		{ type: 'divider', shown: props.file.type === 'directory' && !!ui.zipFolder },
-		{
-			id: 'rename',
-			label: formatMessage(commonMessages.renameButton),
-			icon: EditIcon,
-			disabled: wd,
-			tooltip: wd ? wdTooltip : undefined,
-			action: () => ui.showRenameModal(props.file),
-		},
-		{
-			id: 'move',
-			label: formatMessage(commonMessages.moveButton),
-			icon: RightArrowIcon,
-			disabled: wd,
-			tooltip: wd ? wdTooltip : undefined,
-			action: () => ui.showMoveModal(props.file),
-		},
-		{
-			id: 'download',
-			label: ui.downloadButtonLabel ?? formatMessage(commonMessages.downloadButton),
-			icon: DownloadIcon,
-			action: () => ui.downloadFile(item),
-			shown: props.file.type !== 'directory',
-		},
-		{
-			id: 'delete',
-			label: formatMessage(commonMessages.deleteLabel),
-			icon: TrashIcon,
-			disabled: wd,
-			tooltip: wd ? wdTooltip : undefined,
-			action: () => ui.showDeleteModal(props.file),
-			tone: 'red',
-		},
-	]
-})
+const customDetails = computed(() =>
+	(ui.entryDetails ?? []).filter((detail) => detail.shown?.(props.file) ?? true),
+)
 
 const iconStyle = computed(() => fileIconFor(props.file))
 
@@ -496,8 +357,7 @@ const hiddenDetails = computed(() => {
 })
 
 function openContextMenu(event: MouseEvent) {
-	event.preventDefault()
-	ui.handleContextMenu(event, menuOptions.value)
+	openMenu(event, props.file, { selectable: props.selectionWithinActionMenu })
 }
 
 function handleMouseEnter() {
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileSearch.vue b/packages/ui/src/layouts/shared/files-tab/components/FileSearch.vue
new file mode 100644
index 00000000000..39c56d250e2
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileSearch.vue
@@ -0,0 +1,179 @@
+<template>
+	<div ref="root" class="relative" @focusout="handleFocusOut">
+		<Input
+			v-model="query"
+			:icon="SearchIcon"
+			type="search"
+			name="file-search"
+			autocomplete="off"
+			:placeholder="formatMessage(messages.placeholder)"
+			size="medium"
+			wrapper-class="w-full"
+			role="combobox"
+			aria-autocomplete="list"
+			:aria-expanded="open"
+			:aria-controls="listId"
+			:aria-activedescendant="open && results.length > 0 ? optionId(highlighted) : undefined"
+			@focus="focused = true"
+			@keydown="handleKeydown"
+		/>
+		<div
+			v-if="open"
+			class="absolute inset-x-0 top-full z-40 mt-1 flex flex-col overflow-hidden rounded-xl border border-solid border-surface-5 bg-surface-3 shadow-lg"
+		>
+			<ul :id="listId" role="listbox" class="m-0 max-h-80 list-none overflow-y-auto p-1">
+				<li
+					v-for="(result, index) in results"
+					:id="optionId(index)"
+					:key="result.entry.path"
+					role="option"
+					:aria-selected="index === highlighted"
+					class="flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5"
+					:class="index === highlighted ? 'bg-surface-5 text-contrast' : 'text-primary'"
+					@mousedown.prevent="select(result.entry)"
+					@mouseenter="highlighted = index"
+				>
+					<component
+						:is="result.icon.icon"
+						class="size-4 shrink-0"
+						:class="ui.coloredIcons.value ? result.icon.color : 'text-secondary'"
+						aria-hidden="true"
+					/>
+					<span class="truncate text-sm font-medium">{{ result.entry.name }}</span>
+					<span class="ml-auto shrink truncate pl-2 text-xs text-secondary">
+						{{ result.parent }}
+					</span>
+				</li>
+				<li v-if="results.length === 0" class="px-2 py-1.5 text-sm text-secondary">
+					{{ formatMessage(messages.noResults) }}
+				</li>
+			</ul>
+			<p
+				v-if="loadedOnlyNotice"
+				class="m-0 border-0 border-t border-solid border-surface-5 px-3 py-1.5 text-xs text-secondary"
+			>
+				{{ formatMessage(messages.loadedOnly) }}
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { SearchIcon } from '@modrinth/assets'
+import Fuse from 'fuse.js'
+import { computed, nextTick, ref, useId, watch } from 'vue'
+
+import Input from '#ui/components/base/inputs/Input.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { canOpenInFileEditor } from '#ui/utils/file-extensions'
+
+import { injectFileBrowserUI } from '../providers/file-browser-ui'
+import type { FileItem } from '../types'
+import { fileIconFor, parentInfoFrom } from '../utils'
+
+const MAX_RESULTS = 30
+
+withDefaults(
+	defineProps<{
+		/** Notes that results only cover folders opened so far, for hosts that load lazily. */
+		loadedOnlyNotice?: boolean
+	}>(),
+	{ loadedOnlyNotice: true },
+)
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	placeholder: {
+		id: 'files.search.placeholder',
+		defaultMessage: 'Go to file or folder',
+	},
+	noResults: {
+		id: 'files.search.no-results',
+		defaultMessage: 'No matching files or folders',
+	},
+	loadedOnly: {
+		id: 'files.search.loaded-only',
+		defaultMessage: 'Searching folders that have been opened',
+	},
+})
+
+const ui = injectFileBrowserUI()
+
+const root = ref<HTMLElement | null>(null)
+const query = ref('')
+const focused = ref(false)
+const highlighted = ref(0)
+
+const listId = `file-search-${useId()}`
+const optionId = (index: number) => `${listId}-${index}`
+
+const fuse = computed(
+	() =>
+		new Fuse(ui.directoryTree.loadedEntries?.value ?? [], {
+			keys: [
+				{ name: 'name', weight: 2 },
+				{ name: 'path', weight: 1 },
+			],
+			threshold: 0.4,
+			ignoreLocation: true,
+		}),
+)
+
+const results = computed(() => {
+	const trimmed = query.value.trim()
+	if (!trimmed) return []
+	return fuse.value.search(trimmed, { limit: MAX_RESULTS }).map(({ item }) => ({
+		entry: item,
+		icon: fileIconFor(item),
+		parent: parentInfoFrom(item).path,
+	}))
+})
+
+const open = computed(() => focused.value && query.value.trim().length > 0)
+
+watch(query, () => (highlighted.value = 0))
+
+/** Opens directories and editable files; any other file reveals its folder instead. */
+function select(entry: FileItem) {
+	const openable = entry.type === 'directory' || canOpenInFileEditor(entry.name)
+	ui.navigateTo(openable ? entry : parentInfoFrom(entry))
+	query.value = ''
+}
+
+function moveHighlight(delta: number) {
+	const count = results.value.length
+	if (count === 0) return
+	highlighted.value = (highlighted.value + delta + count) % count
+	nextTick(() =>
+		document.getElementById(optionId(highlighted.value))?.scrollIntoView({ block: 'nearest' }),
+	)
+}
+
+function handleKeydown(event: KeyboardEvent) {
+	switch (event.key) {
+		case 'ArrowDown':
+			event.preventDefault()
+			moveHighlight(1)
+			break
+		case 'ArrowUp':
+			event.preventDefault()
+			moveHighlight(-1)
+			break
+		case 'Enter': {
+			const result = results.value[highlighted.value]
+			if (!result) return
+			event.preventDefault()
+			select(result.entry)
+			break
+		}
+		case 'Escape':
+			query.value = ''
+			break
+	}
+}
+
+function handleFocusOut(event: FocusEvent) {
+	if (!root.value?.contains(event.relatedTarget as Node | null)) focused.value = false
+}
+</script>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
index be3ede02326..73c10d05e30 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileSideBar.vue
@@ -25,6 +25,7 @@
 			@find="() => ui.toggleFind()"
 			@toggle-sidebar="() => ui.setSidebarOpen(!ui.sidebarOpen.value)"
 		/>
+		<FileSearch :loaded-only-notice="ui.searchLoadedOnlyNotice.value" />
 		<div
 			:class="[
 				scrollFileEntries ? 'overflow-y-auto' : '',
@@ -40,6 +41,7 @@
 <script setup lang="ts">
 import { injectFileBrowserUI } from '../providers/file-browser-ui'
 import FileActionBar from './FileActionBar.vue'
+import FileSearch from './FileSearch.vue'
 import FileTree from './FileTree.vue'
 
 const ui = injectFileBrowserUI()
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
index 42eba4a6627..1efa3aaff24 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTree.vue
@@ -98,7 +98,6 @@ function activeGuideLevel(path: string) {
 	return path.startsWith(`${activeDirectory.value.path}/`) ? activeDirectoryDepth.value : undefined
 }
 const expandedPaths = computed(() => new Set(tree.expandedEntries.value))
-const query = computed(() => ui.searchQuery.value.trim().toLowerCase())
 
 /** Directories known to be empty can't be expanded; an unknown count stays expandable. */
 function isExpandable(item: FileItem) {
@@ -118,7 +117,7 @@ function collectRows(path: string, depth: number): TreeRow[] {
 
 	if (items.length === 0) {
 		if (entries.isLoading.value) return [{ type: 'loading', key: `loading:${path}`, depth }]
-		return query.value ? [] : [{ type: 'empty', key: `empty:${path}`, depth }]
+		return [{ type: 'empty', key: `empty:${path}`, depth }]
 	}
 
 	const rows: TreeRow[] = []
@@ -127,12 +126,6 @@ function collectRows(path: string, depth: number): TreeRow[] {
 		const expanded = expandable && expandedPaths.value.has(item.path)
 		const children = expanded ? collectRows(item.path, depth + 1) : []
 
-		if (query.value) {
-			const matches = item.name.toLowerCase().includes(query.value)
-			const hasMatchingChild = children.some((child) => child.type === 'item')
-			if (!matches && !hasMatchingChild) continue
-		}
-
 		rows.push(
 			{ type: 'item', key: item.path, item, path: item.path, depth, expanded, expandable },
 			...children,
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTab.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTab.vue
index 4b70c27bbbc..3979298ebf8 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTab.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTab.vue
@@ -4,6 +4,7 @@
 		:class="canClose ? 'pr-1' : 'pr-3'"
 		:title="location?.path"
 		@auxclick.prevent="(event) => event.button === 1 && close()"
+		@contextmenu.prevent.stop="openMenu"
 	>
 		<component :is="iconStyle.icon" class="size-4 shrink-0" :class="iconStyle.color" />
 		<span class="truncate" :class="isActive ? 'font-semibold text-contrast' : 'text-secondary'">
@@ -66,6 +67,18 @@ const messages = defineMessages({
 		id: 'files.tabs.home',
 		defaultMessage: 'Home',
 	},
+	closeThisTab: {
+		id: 'files.tabs.close-this-tab',
+		defaultMessage: 'Close tab',
+	},
+	closeOtherTabs: {
+		id: 'files.tabs.close-other-tabs',
+		defaultMessage: 'Close other tabs',
+	},
+	closeAllTabs: {
+		id: 'files.tabs.close-all-tabs',
+		defaultMessage: 'Close all tabs',
+	},
 })
 
 const ui = injectFileBrowserUI()
@@ -87,9 +100,34 @@ const iconStyle = computed(() => {
 	return ui.coloredIcons.value ? style : { ...style, color: 'text-secondary' }
 })
 const isActive = computed(() => ui.fileTabs.activeTabId.value === tabId)
-const canClose = computed(() => ui.fileTabs.tabs.value.length > 1)
+const canClose = computed(() => ui.fileTabs.canClose.value)
 const isDirty = computed(() => ui.fileTabs.editors.get(tabId)?.hasUnsavedChanges.value ?? false)
 
+function openMenu(event: MouseEvent) {
+	const hasOthers = ui.fileTabs.tabs.value.length > 1
+	ui.handleContextMenu(event, [
+		{
+			id: 'close-tab',
+			label: formatMessage(messages.closeThisTab),
+			icon: XIcon,
+			disabled: !canClose.value,
+			action: close,
+		},
+		{
+			id: 'close-other-tabs',
+			label: formatMessage(messages.closeOtherTabs),
+			disabled: !hasOthers,
+			action: () => ui.fileTabs.closeOtherTabs(tabId),
+		},
+		{
+			id: 'close-all-tabs',
+			label: formatMessage(messages.closeAllTabs),
+			disabled: !canClose.value,
+			action: () => ui.fileTabs.closeAllTabs(),
+		},
+	])
+}
+
 function close() {
 	ui.fileTabs.closeTab(tabId)
 }
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue
index b691a22f6a5..00488ded730 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabs.vue
@@ -8,6 +8,8 @@
 			:right-header-actions-component="FileTabsActions"
 			default-renderer="always"
 			disable-floating-groups
+			disable-tabs-overflow-list
+			no-panels-overlay="emptyGroup"
 			@ready="ui.fileTabs.onReady"
 		/>
 	</div>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabsActions.vue b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabsActions.vue
index b4559a5c110..3718b418baa 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabsActions.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/tabs/FileTabsActions.vue
@@ -1,24 +1,38 @@
 <template>
-	<div class="flex h-full items-center px-1">
-		<button
-			v-tooltip="formatMessage(messages.newTab)"
-			type="button"
-			class="flex size-7 items-center justify-center rounded-md border-none bg-transparent p-0 text-secondary hover:bg-surface-5 hover:text-contrast focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand"
-			:aria-label="formatMessage(messages.newTab)"
-			@click="openNewTab"
+	<div class="flex h-full items-center gap-1 pr-3">
+		<TeleportOverflowMenu
+			v-if="ui.fileTabs.tabs.value.length > 1"
+			v-tooltip="formatMessage(messages.allTabs)"
+			type="quiet"
+			:label="formatMessage(messages.allTabs)"
+			:options="tabOptions"
 		>
-			<PlusIcon class="size-4" />
-		</button>
+			<ChevronDownIcon class="size-5" aria-hidden="true" />
+		</TeleportOverflowMenu>
+		<div class="flex min-w-[51px] shrink-0 justify-end">
+			<IconButton
+				v-tooltip="formatMessage(messages.newTab)"
+				type="quiet"
+				:label="formatMessage(messages.newTab)"
+				@click="openNewTab"
+			>
+				<PlusIcon />
+			</IconButton>
+		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { PlusIcon } from '@modrinth/assets'
+import { ChevronDownIcon, HomeIcon, PlusIcon } from '@modrinth/assets'
+import { computed } from 'vue'
 
+import type { ButtonMenuOption } from '#ui/components/base/buttons'
+import { IconButton, TeleportOverflowMenu } from '#ui/components/base/buttons'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
+import { currentLocation } from '../../composables/file-tabs'
 import { injectFileBrowserUI } from '../../providers/file-browser-ui'
-import { infoFrom } from '../../utils'
+import { fileIconFor, infoFrom } from '../../utils'
 
 defineProps<{
 	params?: unknown
@@ -31,10 +45,36 @@ const messages = defineMessages({
 		id: 'files.tabs.new-tab',
 		defaultMessage: 'New tab',
 	},
+	allTabs: {
+		id: 'files.tabs.all-tabs',
+		defaultMessage: 'All tabs',
+	},
+	home: {
+		id: 'files.tabs.home',
+		defaultMessage: 'Home',
+	},
 })
 
 const ui = injectFileBrowserUI()
 
+/**
+ * Every open tab, so tabs scrolled out of the strip stay reachable. Teleported to the body,
+ * unlike dockview's own overflow list, so it isn't clipped by the files viewer.
+ */
+const tabOptions = computed<ButtonMenuOption[]>(() =>
+	ui.fileTabs.tabs.value.map((tab) => {
+		const location = currentLocation(tab)
+		const isHome = location.path === '/'
+		return {
+			id: tab.id,
+			label: isHome ? formatMessage(messages.home) : location.name,
+			icon: isHome ? HomeIcon : fileIconFor(location).icon,
+			selected: tab.id === ui.fileTabs.activeTabId.value,
+			action: () => ui.fileTabs.activateTab(tab.id),
+		}
+	}),
+)
+
 function openNewTab() {
 	ui.fileTabs.openTab(infoFrom('/'))
 }
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/entry-menu.ts b/packages/ui/src/layouts/shared/files-tab/composables/entry-menu.ts
new file mode 100644
index 00000000000..ccd0299de0d
--- /dev/null
+++ b/packages/ui/src/layouts/shared/files-tab/composables/entry-menu.ts
@@ -0,0 +1,204 @@
+import {
+	ClipboardCopyIcon,
+	DownloadIcon,
+	EditIcon,
+	FileIcon,
+	FolderArchiveIcon,
+	FolderOpenIcon,
+	PackageOpenIcon,
+	PlusIcon,
+	RightArrowIcon,
+	TrashIcon,
+} from '@modrinth/assets'
+import { toValue } from 'vue'
+
+import type { ButtonMenuLeafOption, ButtonMenuOption } from '#ui/components/base/buttons'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { injectNotificationManager } from '#ui/providers/web-notifications'
+import { commonMessages } from '#ui/utils/common-messages'
+import { canOpenInFileEditor, getFileExtension } from '#ui/utils/file-extensions'
+
+import { injectFileBrowserUI } from '../providers/file-browser-ui'
+import type { FileInfo } from '../providers/file-manager'
+import type { FileItem } from '../types'
+import { fileIconFor, infoFrom, joinDisplayPath } from '../utils'
+import { useFileActions } from './folder-actions'
+
+const messages = defineMessages({
+	createZip: {
+		id: 'files.row.create-zip',
+		defaultMessage: 'Create ZIP',
+	},
+	openInNewTab: {
+		id: 'files.row.open-in-new-tab',
+		defaultMessage: 'Open in new tab',
+	},
+	newOrUpload: {
+		id: 'files.row.upload-or-create',
+		defaultMessage: 'New Entry',
+	},
+})
+
+export interface EntryMenuOptions {
+	/** Offers selecting the entry from the menu, for rows without a selection checkbox. */
+	selectable?: boolean
+}
+
+/**
+ * Builds the actions menu of a file or folder: the built-in actions followed by the host's
+ * {@link FileManagerContext.entryActions}. Shared by the listing rows, the sidebar tree, the
+ * breadcrumbs and the empty space of a folder.
+ */
+export function useEntryMenu() {
+	const ui = injectFileBrowserUI()
+	const { formatMessage } = useVIntl()
+	const { addNotification } = injectNotificationManager()
+
+	const { options: newEntryOptions } = useFileActions(
+		(type) => ui.showCreateModal(type),
+		() => ui.initiateFileUpload(),
+	)
+
+	function copy(text: string, title: string) {
+		navigator.clipboard.writeText(text)
+		addNotification({ title, type: 'success' })
+	}
+
+	function menuFor(entry: FileInfo | FileItem, options: EntryMenuOptions = {}): ButtonMenuOption[] {
+		const info = infoFrom(entry)
+		const isDirectory = info.type === 'directory'
+		const isRoot = isDirectory && info.path === '/'
+		const fullPath = joinDisplayPath(toValue(ui.basePath), info.path)
+
+		const readOnly = !!ui.isReadOnly?.(info)
+		const writeDisabled = ui.isBusy.value || readOnly
+		const writeTooltip = writeDisabled
+			? readOnly
+				? toValue(ui.readOnlyReason)
+				: ui.busyTooltip.value
+			: undefined
+		const write = { disabled: writeDisabled, tooltip: writeTooltip }
+
+		const canOpenInTab = ui.advancedView.value && (isDirectory || canOpenInFileEditor(info.name))
+		const canExtract =
+			info.type === 'file' && getFileExtension(info.name) === 'zip' && !!ui.extractFile
+		const canZip = isDirectory && !!ui.zipFolder
+
+		const customActions = (ui.entryActions ?? []).filter((action) => action.shown?.(info) ?? true)
+
+		return [
+			{
+				type: 'submenu',
+				id: 'upload-create',
+				label: formatMessage(messages.newOrUpload),
+				icon: FileIcon,
+				options: newEntryOptions.value as ButtonMenuLeafOption[],
+			},
+			{
+				id: 'select-entry',
+				label: formatMessage(commonMessages.selectEntryLabel),
+				icon: fileIconFor(info).icon,
+				shown: !!options.selectable && !isRoot,
+				action: () => ui.toggleItemSelection(entry as FileItem),
+			},
+			{
+				id: 'open-in-new-tab',
+				label: formatMessage(messages.openInNewTab),
+				icon: PlusIcon,
+				shown: canOpenInTab,
+				action: () => ui.handleOpenInNewTab(info),
+			},
+			{ type: 'divider' },
+			{
+				id: 'copy-filename',
+				label: formatMessage(commonMessages.copyFilenameButton),
+				icon: ClipboardCopyIcon,
+				shown: !isRoot,
+				action: () => copy(info.name, formatMessage(commonMessages.copiedFilenameLabel)),
+			},
+			{
+				id: 'copy-full-path',
+				label: formatMessage(commonMessages.copyFullPathButton),
+				icon: ClipboardCopyIcon,
+				action: () => copy(fullPath, formatMessage(commonMessages.copiedPathLabel)),
+			},
+			{
+				id: 'open-in-folder',
+				label: formatMessage(commonMessages.openInFolderButton),
+				icon: FolderOpenIcon,
+				shown: !!ui.openInFolder,
+				action: () => ui.openInFolder?.(fullPath),
+			},
+			{ type: 'divider' },
+			{
+				id: 'extract',
+				label: formatMessage(commonMessages.extractButton),
+				icon: PackageOpenIcon,
+				shown: canExtract,
+				...write,
+				action: () => ui.handleExtractItem(info),
+			},
+			{ type: 'divider', shown: canExtract },
+			{
+				id: 'zip',
+				label: formatMessage(messages.createZip),
+				icon: FolderArchiveIcon,
+				shown: canZip,
+				...write,
+				action: () => ui.zipFolder?.(info),
+			},
+			{ type: 'divider', shown: canZip },
+			...customActions.map(
+				(action): ButtonMenuOption => ({
+					id: `custom-${action.id}`,
+					label: action.label,
+					icon: action.icon,
+					tone: action.tone,
+					...(action.writes ? write : {}),
+					action: () => action.action(info),
+				}),
+			),
+			{ type: 'divider', shown: customActions.length > 0 },
+			{
+				id: 'rename',
+				label: formatMessage(commonMessages.renameButton),
+				icon: EditIcon,
+				shown: !isRoot,
+				...write,
+				action: () => ui.showRenameModal(info),
+			},
+			{
+				id: 'move',
+				label: formatMessage(commonMessages.moveButton),
+				icon: RightArrowIcon,
+				shown: !isRoot,
+				...write,
+				action: () => ui.showMoveModal(info),
+			},
+			{
+				id: 'download',
+				label: ui.downloadButtonLabel ?? formatMessage(commonMessages.downloadButton),
+				icon: DownloadIcon,
+				shown: info.type === 'file',
+				action: () => ui.downloadFile(info),
+			},
+			{
+				id: 'delete',
+				label: formatMessage(commonMessages.deleteLabel),
+				icon: TrashIcon,
+				shown: !isRoot,
+				...write,
+				action: () => ui.showDeleteModal(info),
+				tone: 'red',
+			},
+		]
+	}
+
+	/** Opens the entry's menu at the pointer. */
+	function openMenu(event: MouseEvent, entry: FileInfo | FileItem, options?: EntryMenuOptions) {
+		event.preventDefault()
+		ui.handleContextMenu(event, menuFor(entry, options))
+	}
+
+	return { menuFor, openMenu }
+}
diff --git a/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts b/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
index 0ca680aa404..979ae3e572b 100644
--- a/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
+++ b/packages/ui/src/layouts/shared/files-tab/composables/file-tabs.ts
@@ -3,6 +3,7 @@ import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue'
 import { computed, ref, shallowReactive, shallowRef, toValue, watch } from 'vue'
 
 import {
+	infoFrom,
 	isSameInfo,
 	isWithinPath,
 	parentInfoFrom,
@@ -19,6 +20,10 @@ const MAX_HISTORY_LENGTH = 50
 const PENDING_LOCATION_TIMEOUT = 1000
 const WORKSPACE_STORAGE_PREFIX = 'files-workspace:'
 const WORKSPACE_VERSION = 1
+const MAX_RECENTLY_CLOSED = 10
+
+/** Where the workspace points while every tab is closed. */
+const ROOT_LOCATION = infoFrom('/')
 
 /** A browser-like tab: its own history of visited directories and files. */
 export interface FileTab {
@@ -54,14 +59,15 @@ export interface FileTabsOptions {
 	 * workspace's tabs; `null` keeps the tabs in memory only.
 	 */
 	workspaceId: MaybeRefOrGetter<string | null>
-	/** Whether the tab strip is shown and further tabs can be opened. */
+	/** Whether the tab strip is shown, further tabs can be opened and every tab can be closed. */
 	enabled: MaybeRefOrGetter<boolean>
 }
 
 export interface FileTabs {
 	tabs: Ref<FileTab[]>
 	activeTabId: Ref<string>
-	activeTab: ComputedRef<FileTab>
+	/** The active tab, or `null` while every tab is closed. */
+	activeTab: ComputedRef<FileTab | null>
 	activeLocation: ComputedRef<FileInfo>
 	canGoBack: ComputedRef<boolean>
 	canGoForward: ComputedRef<boolean>
@@ -75,6 +81,13 @@ export interface FileTabs {
 	openTab: (location: FileInfo) => void
 	activateTab: (id: string) => void
 	closeTab: (id: string) => Promise<void>
+	closeOtherTabs: (id: string) => Promise<void>
+	closeAllTabs: () => Promise<void>
+	/** Whether the tab can be closed; the last tab only can while tabs are enabled. */
+	canClose: ComputedRef<boolean>
+	/** Recently closed tabs, most recent first, with their history intact. */
+	recentlyClosed: Ref<FileTab[]>
+	reopenTab: (tab: FileTab) => void
 	closeFile: (tabId: string) => void
 	/** Prompts about unsaved changes in editors of files at or beneath any of `paths`. */
 	confirmDiscardWithin: (paths: string[]) => Promise<boolean>
@@ -120,10 +133,9 @@ function loadWorkspace(workspaceId: string | null): FileWorkspaceState | null {
 		const state = JSON.parse(raw) as Partial<FileWorkspaceState>
 		if (state.version !== WORKSPACE_VERSION || !Array.isArray(state.tabs)) return null
 		const tabs = state.tabs.filter(isFileTab)
-		if (tabs.length === 0) return null
 		const activeTabId = tabs.some((tab) => tab.id === state.activeTabId)
 			? state.activeTabId!
-			: tabs[0].id
+			: (tabs[0]?.id ?? '')
 		return { version: WORKSPACE_VERSION, tabs, activeTabId }
 	} catch {
 		return null
@@ -179,12 +191,20 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 	const tabs = ref<FileTab[]>([initialTab])
 	const activeTabId = ref(initialTab.id)
 
+	const recentlyClosed = ref<FileTab[]>([])
+
 	const activeTab = computed(
-		() => tabs.value.find((tab) => tab.id === activeTabId.value) ?? tabs.value[0],
+		() => tabs.value.find((tab) => tab.id === activeTabId.value) ?? tabs.value[0] ?? null,
+	)
+	const activeLocation = computed(() =>
+		activeTab.value ? currentLocation(activeTab.value) : ROOT_LOCATION,
 	)
-	const activeLocation = computed(() => currentLocation(activeTab.value))
-	const canGoBack = computed(() => activeTab.value.index > 0)
-	const canGoForward = computed(() => activeTab.value.index < activeTab.value.history.length - 1)
+	const canGoBack = computed(() => (activeTab.value?.index ?? 0) > 0)
+	const canGoForward = computed(() => {
+		const tab = activeTab.value
+		return !!tab && tab.index < tab.history.length - 1
+	})
+	const canClose = computed(() => tabs.value.length > 1 || toValue(options.enabled))
 
 	const editors = shallowReactive(new Map<string, FileEditorBridge>())
 	const activeEditor = computed(() => editors.get(activeTabId.value) ?? null)
@@ -228,13 +248,20 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 
 	watch(
 		contextLocation,
-		(location) => {
+		(location, previous) => {
+			// Hosts may hand back an equal location as a new object (e.g. echoed from the router).
+			if (previous && isSameInfo(location, previous)) return
 			if (pendingLocation) {
 				if (!isSameInfo(location, pendingLocation)) return
 				pendingLocation = null
 				clearTimeout(pendingTimeout)
+				return
+			}
+			if (activeTab.value) {
+				pushLocation(activeTab.value, location)
+			} else {
+				openTab(location)
 			}
-			pushLocation(activeTab.value, location)
 		},
 		{ flush: 'post' },
 	)
@@ -255,9 +282,16 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		activeTabId.value = state.activeTabId
 
 		const location = contextLocation.value
+		const tab = activeTab.value
 		if (!isRootDirectory(location)) {
-			pushLocation(activeTab.value, location)
-		} else {
+			if (tab) {
+				pushLocation(tab, location)
+			} else {
+				const opened = createTab(location)
+				tabs.value = [opened]
+				activeTabId.value = opened.id
+			}
+		} else if (tab) {
 			applyToContext(activeLocation.value)
 		}
 	}
@@ -286,6 +320,10 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 
 	async function navigate(location: FileInfo) {
 		const tab = activeTab.value
+		if (!tab) {
+			openTab(location)
+			return
+		}
 		if (!isSameInfo(currentLocation(tab), location)) {
 			if (!(await confirmLeave(tab))) return
 			pushLocation(tab, location)
@@ -295,6 +333,7 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 
 	async function go(delta: number) {
 		const tab = activeTab.value
+		if (!tab) return
 		const target = tab.index + delta
 		if (target < 0 || target >= tab.history.length) return
 		if (!(await confirmLeave(tab))) return
@@ -332,6 +371,8 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		try {
 			dockview.clear()
 			for (const tab of tabs.value) addPanel(tab, true)
+			if (tabs.value.length === 0) dockview.addGroup()
+			applyHeaderVisibility()
 			dockview.getPanel(activeTabId.value)?.api.setActive()
 		} finally {
 			renderingPanels = false
@@ -369,19 +410,65 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		activateTab(tab.id)
 	}
 
-	async function closeTab(id: string) {
-		if (tabs.value.length <= 1) return
-		const index = tabs.value.findIndex((tab) => tab.id === id)
-		const tab = tabs.value[index]
-		if (!tab || !(await confirmLeave(tab))) return
+	/** Removes a tab without asking about unsaved changes, remembering it to reopen later. */
+	function removeTab(tab: FileTab) {
+		const index = tabs.value.indexOf(tab)
+		if (index === -1) return
 
 		tabs.value.splice(index, 1)
-		editors.delete(id)
-		api.value?.getPanel(id)?.api.close()
+		editors.delete(tab.id)
+		api.value?.getPanel(tab.id)?.api.close()
+		recentlyClosed.value = [tab, ...recentlyClosed.value].slice(0, MAX_RECENTLY_CLOSED)
+
+		if (activeTabId.value !== tab.id) return
+		const next = tabs.value[index] ?? tabs.value[index - 1]
+		if (next) {
+			activateTab(next.id)
+		} else {
+			activeTabId.value = ''
+			applyToContext(ROOT_LOCATION)
+		}
+	}
+
+	/** Closes the given tabs, asking about all of their unsaved changes at once. */
+	async function closeTabs(ids: string[]) {
+		const closing = tabs.value.filter((tab) => ids.includes(tab.id))
+		if (closing.length === 0) return
+		if (closing.length === tabs.value.length && !toValue(options.enabled)) return
+
+		const dirty = closing.flatMap((tab) => {
+			const editor = editors.get(tab.id)
+			return currentLocation(tab).type === 'file' && editor ? [editor] : []
+		})
+		if (!(await options.confirmDiscard(dirty))) return
+
+		for (const tab of closing) removeTab(tab)
+	}
+
+	async function closeTab(id: string) {
+		const tab = getTab(id)
+		if (!tab || !canClose.value || !(await confirmLeave(tab))) return
+		removeTab(tab)
+	}
+
+	async function closeOtherTabs(id: string) {
+		await closeTabs(tabs.value.filter((tab) => tab.id !== id).map((tab) => tab.id))
+		activateTab(id)
+	}
 
-		if (activeTabId.value === id) {
-			activateTab((tabs.value[index] ?? tabs.value[index - 1]).id)
+	async function closeAllTabs() {
+		await closeTabs(tabs.value.map((tab) => tab.id))
+	}
+
+	function reopenTab(tab: FileTab) {
+		recentlyClosed.value = recentlyClosed.value.filter((closed) => closed !== tab)
+		if (!toValue(options.enabled)) {
+			navigate(currentLocation(tab))
+			return
 		}
+		tabs.value.push(tab)
+		addPanel(tab)
+		activateTab(tab.id)
 	}
 
 	function closeFile(tabId: string) {
@@ -410,7 +497,7 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 
 	/** Rewrites every tab's history through `map`, collapsing neighbouring entries that end up the same. */
 	function remapLocations(map: (location: FileInfo) => FileInfo) {
-		for (const tab of tabs.value) {
+		for (const tab of [...tabs.value, ...recentlyClosed.value]) {
 			const history: FileInfo[] = []
 			let index = 0
 			tab.history.forEach((entry, entryIndex) => {
@@ -422,7 +509,7 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 			tab.history = history
 			tab.index = index
 		}
-		applyToContext(activeLocation.value)
+		if (activeTab.value) applyToContext(activeLocation.value)
 	}
 
 	function relocate(from: FileInfo, to: FileInfo) {
@@ -484,6 +571,11 @@ export function useFileTabs(options: FileTabsOptions): FileTabs {
 		openTab,
 		activateTab,
 		closeTab,
+		closeOtherTabs,
+		closeAllTabs,
+		canClose,
+		recentlyClosed,
+		reopenTab,
 		closeFile,
 		confirmDiscardWithin,
 		relocate,
diff --git a/packages/ui/src/layouts/shared/files-tab/layout.vue b/packages/ui/src/layouts/shared/files-tab/layout.vue
index 630514cd361..3e1cbf86e53 100644
--- a/packages/ui/src/layouts/shared/files-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/files-tab/layout.vue
@@ -248,11 +248,19 @@ const messages = defineMessages({
 	},
 })
 
-const props = defineProps<{
-	showDebugInfo?: boolean
-	showRefreshButton?: boolean
-	constrainWidth?: boolean
-}>()
+const props = withDefaults(
+	defineProps<{
+		showDebugInfo?: boolean
+		showRefreshButton?: boolean
+		constrainWidth?: boolean
+		/**
+		 * Whether the sidebar search notes that it only covers folders opened so far. Hosts whose
+		 * `loadedEntries` cover the whole file system can turn it off.
+		 */
+		searchLoadedOnlyNotice?: boolean
+	}>(),
+	{ searchLoadedOnlyNotice: true },
+)
 
 const { addNotification } = injectNotificationManager()
 const ctx = injectFileManager()
@@ -396,7 +404,7 @@ const uploadZipUrlModal = ref<InstanceType<typeof FileUploadZipUrlModal>>()
 const contextMenuRef = ref<InstanceType<typeof ContextMenu>>()
 
 const newItemType = ref<'file' | 'directory'>('file')
-const selectedItem = ref<FileItem | null>(null)
+const selectedItem = ref<FileInfo | null>(null)
 
 const unsavedChangesModal = ref<InstanceType<typeof FileUnsavedChangesModal>>()
 
@@ -696,19 +704,19 @@ function showUnzipFromUrlModal(cf: boolean) {
 	uploadZipUrlModal.value?.show(cf)
 }
 
-function showRenameModal(item: FileItem) {
+function showRenameModal(item: FileInfo) {
 	if (isBusy.value || ctx.isReadOnly?.(item)) return
 	selectedItem.value = item
 	renameItemModal.value?.show(item)
 }
 
-function showMoveModal(item: FileItem) {
+function showMoveModal(item: FileInfo) {
 	if (isBusy.value || ctx.isReadOnly?.(item)) return
 	selectedItem.value = item
 	moveItemModal.value?.show()
 }
 
-function showDeleteModal(item: FileItem) {
+function showDeleteModal(item: FileInfo) {
 	if (isBusy.value || ctx.isReadOnly?.(item)) return
 	selectedItem.value = item
 	deleteItemModal.value?.show()
@@ -804,6 +812,7 @@ provideFileBrowserUI({
 	baseId,
 	showDebugInfo: computed(() => props.showDebugInfo ?? false),
 	showRefreshButton: computed(() => props.showRefreshButton ?? false),
+	searchLoadedOnlyNotice: computed(() => props.searchLoadedOnlyNotice),
 	reworkEnabled,
 	advancedView,
 	setAdvancedView,
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts b/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
index 86380bb9515..4dcfa589e18 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/file-browser-ui.ts
@@ -30,6 +30,8 @@ export interface FileBrowserUIContext extends FileManagerContext {
 	baseId: string
 	showDebugInfo: ComputedRef<boolean>
 	showRefreshButton: ComputedRef<boolean>
+	/** Whether the sidebar search notes that it only covers folders opened so far. */
+	searchLoadedOnlyNotice: ComputedRef<boolean>
 	/** Whether the files tab rework feature flag is on, which offers the view settings. */
 	reworkEnabled: ComputedRef<boolean>
 	/** Whether the advanced view (sidebar tree, tabs and column picker) is in use. */
@@ -84,9 +86,9 @@ export interface FileBrowserUIContext extends FileManagerContext {
 	handleItemPrefetch: (item: FileInfo) => void
 
 	showCreateModal: (type: 'file' | 'directory') => void
-	showRenameModal: (item: FileItem) => void
-	showMoveModal: (item: FileItem) => void
-	showDeleteModal: (item: FileItem) => void
+	showRenameModal: (item: FileInfo) => void
+	showMoveModal: (item: FileInfo) => void
+	showDeleteModal: (item: FileInfo) => void
 	showBulkDeleteModal: () => void
 	showUnzipFromUrlModal: (cf: boolean) => void
 
diff --git a/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts b/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
index 2a4e56c8b69..e8d527fa956 100644
--- a/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
+++ b/packages/ui/src/layouts/shared/files-tab/providers/file-manager.ts
@@ -3,7 +3,14 @@ import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue'
 
 import { createContext } from '#ui/providers/create-context'
 
-import type { ExtractDryRunResult, FileItem, FileOperation, UploadState } from '../types'
+import type {
+	ExtractDryRunResult,
+	FileEntryAction,
+	FileEntryDetail,
+	FileItem,
+	FileOperation,
+	UploadState,
+} from '../types'
 
 export type FileInfo<T extends FileTypes = FileTypes> = Pick<FileItem, 'path'> & {
 	name: string
@@ -42,6 +49,8 @@ export interface DirectoryTree {
 	prefetch: <T extends FileTypes>(file: FileInfo<T>) => void
 	/** Absolute paths of the directories expanded in the tree. Owned by the host so it survives remounts. */
 	expandedEntries: Ref<string[]>
+	/** Every entry of the listings loaded so far, which the sidebar search looks through. */
+	loadedEntries?: ComputedRef<FileItem[]>
 }
 
 export interface FileManagerContext {
@@ -109,6 +118,11 @@ export interface FileManagerContext {
 	restartServer?: () => Promise<void>
 	canShareToMclogs?: boolean
 	shareToMclogs?: (content: string) => Promise<void>
+
+	/** Extra actions offered in the menus of files and folders. */
+	entryActions?: FileEntryAction[]
+	/** Extra details listed in an entry's details, e.g. a hash. */
+	entryDetails?: FileEntryDetail[]
 }
 
 export const [injectFileManager, provideFileManager] = createContext<FileManagerContext>(
diff --git a/packages/ui/src/layouts/shared/files-tab/types.ts b/packages/ui/src/layouts/shared/files-tab/types.ts
index 9ebb2ea9a83..0c279d37aee 100644
--- a/packages/ui/src/layouts/shared/files-tab/types.ts
+++ b/packages/ui/src/layouts/shared/files-tab/types.ts
@@ -1,3 +1,6 @@
+import type { Component } from 'vue'
+
+import type { ButtonMenuItemBase } from '#ui/components/base/buttons/types'
 import type { FileInfo } from '#ui/layouts/shared/files-tab/providers/file-manager.ts'
 
 export interface FileItem {
@@ -50,6 +53,29 @@ export interface RenameOperation extends UndoableOperation {
 
 export type Operation = MoveOperation | RenameOperation
 
+/** A custom action offered in the menus of files and folders, next to the built-in ones. */
+export interface FileEntryAction {
+	id: string
+	label: string
+	icon?: Component
+	tone?: ButtonMenuItemBase['tone']
+	/** Whether the action applies to the entry; offered for every entry when omitted. */
+	shown?: (entry: FileInfo) => boolean
+	/** Whether the action changes files, which disables it while busy or for read-only entries. */
+	writes?: boolean
+	action: (entry: FileInfo) => void | Promise<void>
+}
+
+/** A custom detail listed after the built-in ones (size, items, dates) in an entry's details. */
+export interface FileEntryDetail {
+	id: string
+	label: string
+	/** Whether the detail applies to the entry; listed for every entry when omitted. */
+	shown?: (entry: FileItem) => boolean
+	/** The entry's value, or `null` when it has none. Promises are awaited once the details show. */
+	value: (entry: FileItem) => string | null | Promise<string | null>
+}
+
 export interface ExtractDryRunResult {
 	modpack_name: string | null
 	conflicting_files: string[]
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
index f26ec3bdbc3..129d6c916d5 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
@@ -9,6 +9,7 @@ import {
 	onScopeDispose,
 	type Ref,
 	ref,
+	shallowReactive,
 	watch,
 } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -591,7 +592,9 @@ function cancelUpload() {
 	fileUploadSession.cancelUpload()
 }
 
-const fileQueries = new Map<string, FileItemResultFrom<'file' | 'directory'> & FileQueryResult>()
+const fileQueries = shallowReactive(
+	new Map<string, FileItemResultFrom<'file' | 'directory'> & FileQueryResult>(),
+)
 
 /** Files and directories are cached apart, so a lookup can never return the other kind's result. */
 function queryCacheKey(info: FileInfo) {
@@ -626,6 +629,11 @@ const directoryTree = {
 		return query as FileItemResultFrom<T> & FileQueryResult
 	},
 	expandedEntries: expandedDirectories,
+	loadedEntries: computed(() =>
+		[...fileQueries.values()].flatMap((entry) =>
+			entry.type === 'directory' ? (entry as DirectoryResult).data.value : [],
+		),
+	),
 } satisfies DirectoryTree
 
 // Provide the file manager context
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 221725c631d..20d3850556a 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -1538,6 +1538,18 @@
   "files.editor.save-failed-title": {
     "defaultMessage": "Save failed"
   },
+  "files.empty-workspace.description": {
+    "defaultMessage": "Open a folder or file to get started."
+  },
+  "files.empty-workspace.open-home": {
+    "defaultMessage": "Open home folder"
+  },
+  "files.empty-workspace.recently-closed": {
+    "defaultMessage": "Recently closed"
+  },
+  "files.empty-workspace.title": {
+    "defaultMessage": "No open tabs"
+  },
   "files.error.go-to-home": {
     "defaultMessage": "Go to home folder"
   },
@@ -1739,6 +1751,15 @@
   "files.row.upload-or-create": {
     "defaultMessage": "New Entry"
   },
+  "files.search.loaded-only": {
+    "defaultMessage": "Searching folders that have been opened"
+  },
+  "files.search.no-results": {
+    "defaultMessage": "No matching files or folders"
+  },
+  "files.search.placeholder": {
+    "defaultMessage": "Go to file or folder"
+  },
   "files.table-header.advanced-view": {
     "defaultMessage": "Advanced view"
   },
@@ -1769,9 +1790,21 @@
   "files.table-header.view-settings": {
     "defaultMessage": "View settings"
   },
+  "files.tabs.all-tabs": {
+    "defaultMessage": "All tabs"
+  },
+  "files.tabs.close-all-tabs": {
+    "defaultMessage": "Close all tabs"
+  },
+  "files.tabs.close-other-tabs": {
+    "defaultMessage": "Close other tabs"
+  },
   "files.tabs.close-tab": {
     "defaultMessage": "Close {name}"
   },
+  "files.tabs.close-this-tab": {
+    "defaultMessage": "Close tab"
+  },
   "files.tabs.home": {
     "defaultMessage": "Home"
   },