feat: content tab rewrite for worlds

CLAUDE.md

@@ -67,10 +67,22 @@ Each project may have its own `CLAUDE.md` with detailed instructions:
 - [`apps/labrinth/CLAUDE.md`](apps/labrinth/CLAUDE.md) — Backend API
 - [`apps/frontend/CLAUDE.md`](apps/frontend/CLAUDE.md) - Frontend Website
 
+## Skills (`.claude/skills/`)
+
+Project-specific skill files with detailed patterns. Use them when the task matches:
+
+- **`api-module`** — Adding a new API endpoint module to `packages/api-client` (types, module class, registry registration)
+- **`cross-platform-pages`** — Building a page that needs to work in both the website (`apps/frontend`) and the desktop app (`apps/app-frontend`)
+- **`dependency-injection`** — Creating or wiring up a `provide`/`inject` context for platform abstraction or deep component state sharing
+- **`figma-mcp`** — Translating a Figma design into Vue components using the Figma MCP tools
+- **`i18n-convert`** — Converting hardcoded English strings in Vue SFCs into the `@modrinth/ui` i18n system (`defineMessages`, `formatMessage`, `IntlFormatted`)
+- **`multistage-modals`** — Building a wizard-like modal with multiple stages, progress tracking, and per-stage buttons using `MultiStageModal`
+- **`tanstack-query`** — Fetching, caching, or mutating server data with `@tanstack/vue-query` (queries, mutations, invalidation, optimistic updates)
+
 ## Code Guidelines
 
 ### Comments
-- DO NOT use "heading" comments like: // === Helper methods === .
+- DO NOT use "heading" comments like: `=== Helper methods ===`.
 - Use doc comments, but avoid inline comments unless ABSOLUTELY necessary for clarity. Code should aim to be self documenting!
 
 ## Bash Guidelines

apps/app-frontend/package.json

@@ -28,17 +28,18 @@
 		"@tauri-apps/plugin-updater": "^2.7.1",
 		"@tauri-apps/plugin-window-state": "^2.2.2",
 		"@types/three": "^0.172.0",
-		"intl-messageformat": "^10.7.7",
-		"vue-i18n": "^10.0.0",
 		"@vueuse/core": "^11.1.0",
 		"dayjs": "^1.11.10",
 		"floating-vue": "^5.2.2",
+		"fuse.js": "^6.6.2",
+		"intl-messageformat": "^10.7.7",
 		"ofetch": "^1.3.4",
 		"pinia": "^3.0.0",
 		"posthog-js": "^1.158.2",
 		"three": "^0.172.0",
 		"vite-svg-loader": "^5.1.0",
 		"vue": "^3.5.13",
+		"vue-i18n": "^10.0.0",
 		"vue-multiselect": "3.0.0",
 		"vue-router": "^4.6.0",
 		"vue-virtual-scroller": "v2.0.0-beta.8"

apps/app-frontend/src/App.vue

@@ -31,12 +31,14 @@ import {
 	Button,
 	ButtonStyled,
 	commonMessages,
+	CreationFlowModal,
 	defineMessages,
 	I18nDebugPanel,
 	NewsArticleCard,
 	NotificationPanel,
 	OverflowMenu,
 	ProgressSpinner,
+	provideModalBehavior,
 	provideModrinthClient,
 	provideNotificationManager,
 	providePageContext,
@@ -64,7 +66,6 @@ import FriendsList from '@/components/ui/friends/FriendsList.vue'
 import IncompatibilityWarningModal from '@/components/ui/install_flow/IncompatibilityWarningModal.vue'
 import InstallConfirmModal from '@/components/ui/install_flow/InstallConfirmModal.vue'
 import ModInstallModal from '@/components/ui/install_flow/ModInstallModal.vue'
-import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
 import MinecraftAuthErrorModal from '@/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue'
 import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
 import AuthGrantFlowWaitModal from '@/components/ui/modal/AuthGrantFlowWaitModal.vue'
@@ -84,6 +85,7 @@ import { get_user } from '@/helpers/cache.js'
 import { command_listener, warning_listener } from '@/helpers/events.js'
 import { useFetch } from '@/helpers/fetch.js'
 import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.ts'
+import { create_profile_and_install_from_file } from '@/helpers/pack'
 import { list } from '@/helpers/profile.js'
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
 import { get_opening_command, initialize_state } from '@/helpers/state'
@@ -100,11 +102,11 @@ import {
 	provideAppUpdateDownloadProgress,
 	subscribeToDownloadProgress,
 } from '@/providers/download-progress.ts'
+import { setupProviders } from '@/providers/setup'
 import { useError } from '@/store/error.js'
 import { useInstall } from '@/store/install.js'
 import { useLoading, useTheming } from '@/store/state'
 
-import { create_profile_and_install_from_file } from './helpers/pack'
 import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
 import { get_available_capes, get_available_skins } from './helpers/skins'
 import { AppNotificationManager } from './providers/app-notifications'
@@ -129,6 +131,15 @@ providePageContext({
 	hierarchicalSidebarAvailable: ref(true),
 	showAds: ref(false),
 })
+provideModalBehavior({
+	noblur: computed(() => !themeStore.advancedRendering),
+	onShow: () => hide_ads_window(),
+	onHide: () => show_ads_window(),
+})
+
+const { installationModal, handleCreate, handleBrowseModpacks } =
+	setupProviders(notificationManager)
+
 const news = ref([])
 const availableSurvey = ref(false)
 
@@ -801,9 +812,13 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		<Suspense>
 			<AuthGrantFlowWaitModal ref="modrinthLoginFlowWaitModal" @flow-cancel="cancelLogin" />
 		</Suspense>
-		<Suspense>
-			<InstanceCreationModal ref="installationModal" />
-		</Suspense>
+		<CreationFlowModal
+			ref="installationModal"
+			type="instance"
+			show-snapshot-toggle
+			@create="handleCreate"
+			@browse-modpacks="handleBrowseModpacks"
+		/>
 		<div
 			class="app-grid-navbar bg-bg-raised flex flex-col p-[0.5rem] pt-0 gap-[0.5rem] w-[--left-bar-width]"
 		>
@@ -849,7 +864,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			</suspense>
 			<NavButton
 				v-tooltip.right="'Create new instance'"
-				:to="() => $refs.installationModal.show()"
+				:to="() => installationModal?.show()"
 				:disabled="offline"
 			>
 				<PlusIcon />
@@ -937,9 +952,9 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			</NavButton>
 		</div>
 		<div data-tauri-drag-region class="app-grid-statusbar bg-bg-raised h-[--top-bar-height] flex">
-			<div data-tauri-drag-region class="flex p-3">
-				<ModrinthAppLogo class="h-full w-auto text-contrast pointer-events-none" />
-				<div data-tauri-drag-region class="flex items-center gap-1 ml-3">
+			<div data-tauri-drag-region class="flex min-w-0 flex-1 overflow-hidden p-3">
+				<ModrinthAppLogo class="h-full w-auto shrink-0 text-contrast pointer-events-none" />
+				<div data-tauri-drag-region class="flex shrink-0 items-center gap-1 ml-3">
 					<button
 						class="cursor-pointer p-0 m-0 text-contrast border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
 						@click="router.back()"
@@ -955,7 +970,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				</div>
 				<Breadcrumbs class="pt-[2px]" />
 			</div>
-			<section data-tauri-drag-region class="flex ml-auto items-center">
+			<section data-tauri-drag-region class="flex shrink-0 ml-auto items-center">
 				<ButtonStyled
 					v-if="!forceSidebar && themeStore.toggleSidebar"
 					:type="sidebarToggled ? 'standard' : 'transparent'"

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

@@ -1,64 +1,147 @@
 <template>
-	<div data-tauri-drag-region class="flex items-center gap-1 pl-3">
-		<Button v-if="false" class="breadcrumbs__back transparent" icon-only @click="$router.back()">
-			<ChevronLeftIcon />
-		</Button>
-		<Button
-			v-if="false"
-			class="breadcrumbs__forward transparent"
-			icon-only
-			@click="$router.forward()"
+	<div
+		ref="outerRef"
+		data-tauri-drag-region
+		class="min-w-0 overflow-hidden pl-3"
+		:style="isOverflowing ? { '--scroll-distance': `-${overflowAmount}px` } : undefined"
+		@mouseenter="onMouseEnter"
+		@mouseleave="onMouseLeave"
+	>
+		<div
+			ref="innerRef"
+			data-tauri-drag-region
+			class="flex w-fit items-center gap-1"
+			:class="{ 'breadcrumbs-scroll': isAnimating }"
+			@animationiteration="onAnimationIteration"
 		>
-			<ChevronRightIcon />
-		</Button>
-		{{ breadcrumbData.resetToNames(breadcrumbs) }}
-		<template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name">
-			<router-link
-				v-if="breadcrumb.link"
-				:to="{
-					path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id)),
-					query: breadcrumb.query,
-				}"
-				class="text-primary"
-				>{{
-					breadcrumb.name.charAt(0) === '?'
-						? breadcrumbData.getName(breadcrumb.name.slice(1))
-						: breadcrumb.name
-				}}
-			</router-link>
-			<span
-				v-else
-				data-tauri-drag-region
-				class="text-contrast font-semibold cursor-default select-none"
-				>{{
-					breadcrumb.name.charAt(0) === '?'
-						? breadcrumbData.getName(breadcrumb.name.slice(1))
-						: breadcrumb.name
-				}}</span
-			>
-			<ChevronRightIcon v-if="breadcrumb.link" data-tauri-drag-region class="w-5 h-5" />
-		</template>
+			{{ breadcrumbData.resetToNames(breadcrumbs) }}
+			<template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name">
+				<router-link
+					v-if="breadcrumb.link"
+					:to="{
+						path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id as string)),
+						query: breadcrumb.query,
+					}"
+					class="shrink-0 whitespace-nowrap text-primary"
+				>
+					{{ resolveLabel(breadcrumb.name) }}
+				</router-link>
+				<span
+					v-else
+					data-tauri-drag-region
+					class="shrink-0 whitespace-nowrap text-contrast font-semibold cursor-default select-none"
+				>
+					{{ resolveLabel(breadcrumb.name) }}
+				</span>
+				<ChevronRightIcon v-if="breadcrumb.link" data-tauri-drag-region class="w-5 h-5 shrink-0" />
+			</template>
+		</div>
 	</div>
 </template>
 
-<script setup>
-import { ChevronLeftIcon, ChevronRightIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
-import { computed } from 'vue'
+<script setup lang="ts">
+import { ChevronRightIcon } from '@modrinth/assets'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 
-const route = useRoute()
+interface Breadcrumb {
+	name: string
+	link?: string
+	query?: Record<string, string>
+}
 
+const route = useRoute()
 const breadcrumbData = useBreadcrumbs()
-const breadcrumbs = computed(() => {
+
+const breadcrumbs = computed<Breadcrumb[]>(() => {
 	const additionalContext =
 		route.meta.useContext === true
 			? breadcrumbData.context
 			: route.meta.useRootContext === true
 				? breadcrumbData.rootContext
 				: null
-	return additionalContext ? [additionalContext, ...route.meta.breadcrumb] : route.meta.breadcrumb
+	const crumbs = (route.meta.breadcrumb ?? []) as Breadcrumb[]
+	return additionalContext ? [additionalContext as Breadcrumb, ...crumbs] : crumbs
+})
+
+function resolveLabel(name: string): string {
+	return name.charAt(0) === '?' ? breadcrumbData.getName(name.slice(1)) : name
+}
+
+// Overflow detection
+const outerRef = ref<HTMLDivElement | null>(null)
+const innerRef = ref<HTMLDivElement | null>(null)
+const isOverflowing = ref(false)
+const isAnimating = ref(false)
+const overflowAmount = ref(0)
+
+let hovered = false
+let stopping = false
+
+function checkOverflow() {
+	if (!outerRef.value || !innerRef.value) return
+	const overflow = innerRef.value.scrollWidth - outerRef.value.clientWidth
+	isOverflowing.value = overflow > 0
+	overflowAmount.value = overflow + 12
+}
+
+function onMouseEnter() {
+	hovered = true
+	stopping = false
+	if (isOverflowing.value) {
+		isAnimating.value = true
+	}
+}
+
+function onMouseLeave() {
+	hovered = false
+	if (isAnimating.value) {
+		stopping = true
+	}
+}
+
+function onAnimationIteration() {
+	if (stopping && !hovered) {
+		isAnimating.value = false
+		stopping = false
+	}
+}
+
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+	checkOverflow()
+	resizeObserver = new ResizeObserver(checkOverflow)
+	if (outerRef.value) resizeObserver.observe(outerRef.value)
+	if (innerRef.value) resizeObserver.observe(innerRef.value)
+})
+
+onBeforeUnmount(() => {
+	resizeObserver?.disconnect()
+})
+
+watch(breadcrumbs, () => {
+	requestAnimationFrame(checkOverflow)
 })
 </script>
+
+<style scoped>
+.breadcrumbs-scroll {
+	animation: breadcrumb-scroll 10s ease-in-out infinite;
+}
+
+@keyframes breadcrumb-scroll {
+	0% {
+		transform: translateX(0);
+	}
+	35%,
+	65% {
+		transform: translateX(var(--scroll-distance));
+	}
+	100% {
+		transform: translateX(0);
+	}
+}
+</style>