refactor: move title bar out of app shell

apps/app-frontend/src/App.vue

@@ -11,8 +11,6 @@ import {
 import {
 	ArrowBigUpDashIcon,
 	ArrowLeftRightIcon,
-	ChevronLeftIcon,
-	ChevronRightIcon,
 	CompassIcon,
 	ImageIcon,
 	LogInIcon,
@@ -21,7 +19,6 @@ import {
 	PlayIcon,
 	PlusIcon,
 	RefreshCwIcon,
-	RightArrowIcon,
 	ServerStackIcon,
 	SettingsIcon,
 	ShirtIcon,
@@ -54,7 +51,6 @@ import {
 	providePageContext,
 	providePopupNotificationManager,
 	TeleportOverflowMenu,
-	TextLogo,
 	TooltipDirective,
 	useDebugLogger,
 	useFormatBytes,
@@ -75,9 +71,8 @@ import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
 import { computed, nextTick, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 
+import AppTitleBar from '@/app/shell/title-bar/index.vue'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
-import AppActionBar from '@/components/ui/AppActionBar.vue'
-import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
 import ErrorModal from '@/components/ui/ErrorModal.vue'
 import FriendsList from '@/components/ui/friends/FriendsList.vue'
 import HostingUpdateRequired from '@/components/ui/HostingUpdateRequired.vue'
@@ -104,7 +99,6 @@ import {
 	markSyncInstancesUpdateNotificationShown,
 	shouldShowSyncInstancesUpdateNotification,
 } from '@/components/ui/sync-instances-update-modal/show-notification'
-import WindowControls from '@/components/ui/WindowControls.vue'
 import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
 import { useAppEvent } from '@/composables/use-app-event'
 import { useAppSettings } from '@/composables/use-app-settings.ts'
@@ -188,7 +182,6 @@ import {
 	openAppUpdateChangelog,
 	setAppUpdateActions,
 } from '@/providers/app-update.ts'
-import { createBreadcrumbManager, provideBreadcrumbManager } from '@/providers/breadcrumbs'
 import { createContentInstall, provideContentInstall } from '@/providers/content-install'
 import {
 	provideAppUpdateDownloadProgress,
@@ -200,6 +193,7 @@ import { setupAppEventsProvider } from '@/providers/setup/app-events'
 import { setupAuthProvider } from '@/providers/setup/auth'
 import { setupLoadingStateProvider } from '@/providers/setup/loading-state'
 import { setupAppUserPreferencesProvider } from '@/providers/setup/user-preferences.ts'
+import { createBreadcrumbManager, provideBreadcrumbManager } from '@/shared/breadcrumbs'
 import { appMessages } from '@/utils/app-messages'
 
 import { AppNotificationManager } from './providers/app-notifications'
@@ -597,9 +591,6 @@ const messages = defineMessages({
 		defaultMessage: 'Dismiss',
 	},
 	warning: { id: 'app.notification.warning', defaultMessage: 'Warning' },
-	goBack: { id: 'app.navigation.go-back', defaultMessage: 'Go back' },
-	goForward: { id: 'app.navigation.go-forward', defaultMessage: 'Go forward' },
-	nextImage: { id: 'app.navigation.next-image', defaultMessage: 'Next image' },
 	updateDownloadMissingVersion: {
 		id: 'app.update.download-error.missing-version',
 		defaultMessage: 'Failed to download update: no version available',
@@ -2390,56 +2381,13 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				<LogInIcon class="text-brand" />
 			</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 min-w-0 flex-1 items-center overflow-hidden p-2">
-				<TextLogo class="h-7 w-auto shrink-0 text-contrast pointer-events-none" />
-				<div data-tauri-drag-region class="ml-2 flex shrink-0 items-center gap-2">
-					<IconButton
-						type="outlined"
-						:label="formatMessage(messages.goBack)"
-						class="!h-7 !min-w-7 !w-7 !border !border-surface-4 !p-0 !opacity-100"
-						:disabled="!canNavigateBack"
-						@click="router.back()"
-					>
-						<ChevronLeftIcon
-							class="!size-4 !text-primary"
-							:class="{ 'opacity-20': !canNavigateBack }"
-						/>
-					</IconButton>
-					<IconButton
-						type="outlined"
-						:label="formatMessage(messages.goForward)"
-						class="!h-7 !min-w-7 !w-7 !border !border-surface-4 !p-0 !opacity-100"
-						:disabled="!canNavigateForward"
-						@click="router.forward()"
-					>
-						<ChevronRightIcon
-							class="!size-4 !text-primary"
-							:class="{ 'opacity-20': !canNavigateForward }"
-						/>
-					</IconButton>
-				</div>
-				<Breadcrumbs />
-			</div>
-			<section data-tauri-drag-region class="flex shrink-0 ml-auto items-center">
-				<IconButton
-					v-if="!forceSidebar && appSettings.toggleSidebar"
-					:type="sidebarToggled ? 'base' : 'quiet'"
-					:label="formatMessage(messages.nextImage)"
-					class="mr-3 transition-transform"
-					:class="{ 'rotate-180': !sidebarToggled }"
-					@click="sidebarToggled = !sidebarToggled"
-				>
-					<RightArrowIcon />
-				</IconButton>
-				<div class="flex mr-3">
-					<Suspense>
-						<AppActionBar />
-					</Suspense>
-				</div>
-				<WindowControls />
-			</section>
-		</div>
+		<AppTitleBar
+			:can-navigate-back="canNavigateBack"
+			:can-navigate-forward="canNavigateForward"
+			:show-sidebar-toggle="!forceSidebar && appSettings.toggleSidebar"
+			:sidebar-toggled="sidebarToggled"
+			@toggle-sidebar="sidebarToggled = !sidebarToggled"
+		/>
 	</div>
 	<div
 		v-if="stateInitialized"
@@ -2670,13 +2618,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	}
 }
 
-.app-grid-statusbar {
-	grid-area: status;
-	padding-right: var(--window-controls-width, 0px);
-	position: relative;
-	z-index: 2;
-}
-
 [data-tauri-drag-region-exclude] {
 	-webkit-app-region: no-drag;
 }
@@ -2862,16 +2803,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	--os-handle-bg-active: var(--color-scrollbar) !important;
 }
 
-.app-grid-statusbar {
-	padding-left: 0.25rem;
-}
-
-.mac-traffic-lights {
-	.app-grid-statusbar {
-		padding-left: 5rem;
-	}
-}
-
 .windows {
 	.fake-appbar {
 		height: 2.5rem !important;

apps/app-frontend/src/components/ui/Breadcrumbs.vue → apps/app-frontend/src/app/shell/title-bar/breadcrumbs.vue

@@ -3,7 +3,10 @@
 		ref="outerRef"
 		data-tauri-drag-region
 		class="min-w-0 overflow-hidden pl-4"
-		:class="{ 'breadcrumb-fade-mask': isOverflowing }"
+		:class="{
+			'[mask-image:linear-gradient(to_right,transparent,black_12px,black_calc(100%_-_12px),transparent)]':
+				isOverflowing,
+		}"
 		:style="isOverflowing ? { '--scroll-distance': `-${overflowAmount}px` } : undefined"
 		@mouseenter="onMouseEnter"
 		@mouseleave="onMouseLeave"
@@ -64,7 +67,7 @@ import { Avatar } from '@modrinth/ui'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 
-import { injectBreadcrumbManager } from '@/providers/breadcrumbs'
+import { injectBreadcrumbManager } from '@/shared/breadcrumbs'
 
 const { entries: breadcrumbs } = injectBreadcrumbManager()
 
@@ -130,16 +133,6 @@ watch(breadcrumbs, () => {
 </script>
 
 <style scoped>
-.breadcrumb-fade-mask {
-	mask-image: linear-gradient(
-		to right,
-		transparent,
-		black 12px,
-		black calc(100% - 12px),
-		transparent
-	);
-}
-
 .breadcrumbs-scroll {
 	animation: breadcrumb-scroll 10s ease-in-out infinite;
 }

apps/app-frontend/src/app/shell/title-bar/index.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ChevronLeftIcon, ChevronRightIcon, RightArrowIcon } from '@modrinth/assets'
+import { defineMessages, IconButton, TextLogo, useVIntl } from '@modrinth/ui'
+import { useRouter } from 'vue-router'
+
+import AppActionBar from './action-bar.vue'
+import Breadcrumbs from './breadcrumbs.vue'
+import WindowControls from './window-controls.vue'
+
+defineProps<{
+	canNavigateBack: boolean
+	canNavigateForward: boolean
+	showSidebarToggle: boolean
+	sidebarToggled: boolean
+}>()
+
+const emit = defineEmits<{
+	'toggle-sidebar': []
+}>()
+
+const router = useRouter()
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	goBack: { id: 'app.navigation.go-back', defaultMessage: 'Go back' },
+	goForward: { id: 'app.navigation.go-forward', defaultMessage: 'Go forward' },
+	nextImage: { id: 'app.navigation.next-image', defaultMessage: 'Next image' },
+})
+</script>
+
+<template>
+	<div
+		data-tauri-drag-region
+		class="app-title-bar relative z-[2] flex bg-bg-raised pl-1 [grid-area:status] [.mac-traffic-lights_&]:pl-20"
+	>
+		<div data-tauri-drag-region class="flex min-w-0 flex-1 items-center overflow-hidden p-2">
+			<TextLogo class="h-7 w-auto shrink-0 text-contrast pointer-events-none" />
+			<div data-tauri-drag-region class="ml-2 flex shrink-0 items-center gap-2">
+				<IconButton
+					type="outlined"
+					:label="formatMessage(messages.goBack)"
+					class="!h-7 !min-w-7 !w-7 !border !border-surface-4 !p-0 !opacity-100"
+					:disabled="!canNavigateBack"
+					@click="router.back()"
+				>
+					<ChevronLeftIcon
+						class="!size-4 !text-primary"
+						:class="{ 'opacity-20': !canNavigateBack }"
+					/>
+				</IconButton>
+				<IconButton
+					type="outlined"
+					:label="formatMessage(messages.goForward)"
+					class="!h-7 !min-w-7 !w-7 !border !border-surface-4 !p-0 !opacity-100"
+					:disabled="!canNavigateForward"
+					@click="router.forward()"
+				>
+					<ChevronRightIcon
+						class="!size-4 !text-primary"
+						:class="{ 'opacity-20': !canNavigateForward }"
+					/>
+				</IconButton>
+			</div>
+			<Breadcrumbs />
+		</div>
+		<section data-tauri-drag-region class="flex shrink-0 ml-auto items-center">
+			<IconButton
+				v-if="showSidebarToggle"
+				:type="sidebarToggled ? 'base' : 'quiet'"
+				:label="formatMessage(messages.nextImage)"
+				class="mr-3 transition-transform"
+				:class="{ 'rotate-180': !sidebarToggled }"
+				@click="emit('toggle-sidebar')"
+			>
+				<RightArrowIcon />
+			</IconButton>
+			<div class="flex mr-3">
+				<Suspense>
+					<AppActionBar />
+				</Suspense>
+			</div>
+			<WindowControls />
+		</section>
+	</div>
+</template>
+
+<style scoped>
+.app-title-bar {
+	height: var(--top-bar-height);
+	padding-right: var(--window-controls-width, 0px);
+}
+</style>

apps/app-frontend/src/components/ui/WindowControls.vue → apps/app-frontend/src/app/shell/title-bar/window-controls.vue

@@ -9,15 +9,15 @@
 			<IconButton
 				type="quiet"
 				label="Minimize window"
-				class="relative expanded-button"
+				class="relative before:absolute before:-inset-y-[9px] before:-inset-x-[6px] before:content-['']"
 				@click="getCurrentWindow().minimize()"
 			>
 				<MinimizeIcon />
 			</IconButton>
 			<IconButton
 				type="quiet"
 				label="Toggle maximize window"
-				class="relative expanded-button"
+				class="relative before:absolute before:-inset-y-[9px] before:-inset-x-[6px] before:content-['']"
 				@click="getCurrentWindow().toggleMaximize()"
 			>
 				<RestoreIcon v-if="isMaximized" />
@@ -26,7 +26,7 @@
 			<IconButton
 				type="quiet"
 				label="Close window"
-				class="relative expanded-button close-button hover:!bg-red focus-visible:!bg-red hover:!text-[var(--color-accent-contrast)]"
+				class="close-button relative before:absolute before:-inset-y-[9px] before:-left-[6px] before:-right-[9px] before:content-[''] hover:!bg-red focus-visible:!bg-red"
 				@click="handleClose"
 			>
 				<XIcon />
@@ -113,13 +113,7 @@ const handleClose = async () => {
 }
 </script>
 <style scoped>
-.expanded-button::before {
-	inset: -9px -6px;
-	content: '';
-	position: absolute;
-}
-
-.expanded-button.close-button::before {
-	inset: -9px -9px -9px -6px;
+.close-button:hover {
+	color: var(--color-accent-contrast) !important;
 }
 </style>

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

@@ -8,7 +8,7 @@ import {
 	downloadAvailableAppUpdate,
 	installAvailableAppUpdate,
 } from '@/providers/app-update'
-import { useRootBreadcrumb } from '@/providers/breadcrumbs'
+import { useRootBreadcrumb } from '@/shared/breadcrumbs'
 
 const { formatMessage } = useVIntl()
 

apps/app-frontend/src/pages/Browse.vue

@@ -56,13 +56,13 @@ import {
 	instanceKeys,
 	instanceLinkedProjectQueryOptions,
 } from '@/pages/instance/query-options'
-import { type BreadcrumbDefinition, injectBreadcrumbManager } from '@/providers/breadcrumbs'
 import { injectContentInstall } from '@/providers/content-install'
 import { injectServerInstall } from '@/providers/server-install'
 import {
 	createServerInstallContent,
 	provideServerInstallContent,
 } from '@/providers/setup/server-install-content'
+import { type BreadcrumbDefinition, injectBreadcrumbManager } from '@/shared/breadcrumbs'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()

apps/app-frontend/src/pages/Index.vue

@@ -13,8 +13,8 @@ import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
 import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { traceStartupStep } from '@/helpers/startup-debug'
 import { instanceListQueryOptions } from '@/pages/instance/query-options'
-import { useRootBreadcrumb } from '@/providers/breadcrumbs'
 import { injectOnboardingChecklist } from '@/providers/onboarding-checklist'
+import { useRootBreadcrumb } from '@/shared/breadcrumbs'
 
 defineOptions({
 	name: 'LibraryPage',

apps/app-frontend/src/pages/Screenshots.vue

@@ -4,7 +4,7 @@ import { defineMessages, useVIntl } from '@modrinth/ui'
 import { onActivated } from 'vue'
 
 import ScreenshotsPage from '@/components/ui/screenshots-page/index.vue'
-import { useRootBreadcrumb } from '@/providers/breadcrumbs'
+import { useRootBreadcrumb } from '@/shared/breadcrumbs'
 
 defineOptions({ name: 'ScreenshotsPage' })
 

apps/app-frontend/src/pages/Servers.vue

@@ -5,7 +5,7 @@ import { injectModrinthClient, ServersManagePageIndex } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 
-import { useRootBreadcrumb } from '@/providers/breadcrumbs'
+import { useRootBreadcrumb } from '@/shared/breadcrumbs'
 
 import { config } from '../config'
 

apps/app-frontend/src/pages/Skins.vue

@@ -54,7 +54,7 @@ import {
 	set_custom_skin_order,
 } from '@/helpers/skins.ts'
 import { hasPride26Badge } from '@/helpers/user-campaigns.ts'
-import { useRootBreadcrumb } from '@/providers/breadcrumbs'
+import { useRootBreadcrumb } from '@/shared/breadcrumbs'
 import { appMessages } from '@/utils/app-messages'
 
 useRootBreadcrumb({