new project settings header

apps/frontend/src/locales/cs-CZ/index.json

@@ -2378,12 +2378,6 @@
   "project.settings.permissions.sort.status": {
     "message": "Stav"
   },
-  "project.settings.title": {
-    "message": "Nastavení"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Přejít na přehled projektů"
-  },
   "project.versions.title": {
     "message": "Verze"
   },

apps/frontend/src/locales/da-DK/index.json

@@ -2486,12 +2486,6 @@
   "project.settings.tags.upload-version-first": {
     "message": "Upload venligst en version først for at kunne vælge tags!"
   },
-  "project.settings.title": {
-    "message": "Indstillinger"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Gå til projekt kontrolpanel"
-  },
   "project.status.archived.message": {
     "message": "{title} er blevet arkiveret. {title} vil ikke modtage flere opdateringer medmindre forfatteren beslutter sig for at fjerne projektet fra arkivet."
   },

apps/frontend/src/locales/de-CH/index.json

@@ -3941,12 +3941,6 @@
   "project.settings.tags.upload-version-first": {
     "message": "Bitte lade zuerst eine Version hoch, um Tags auswählen zu können!"
   },
-  "project.settings.title": {
-    "message": "Einstellungen"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Projekt-Dashboard besuchen"
-  },
   "project.status.archived.message": {
     "message": "{title} wurde archiviert. {title} wird keine weiteren Updates erhalten, es sei denn, der Autor entscheided sich, das Projekt zu Dearchivieren."
   },

apps/frontend/src/locales/de-DE/index.json

@@ -3941,12 +3941,6 @@
   "project.settings.tags.upload-version-first": {
     "message": "Bitte lade zuerst eine Version hoch, um Tags auswählen zu können!"
   },
-  "project.settings.title": {
-    "message": "Einstellungen"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Projekt-Dashboard besuchen"
-  },
   "project.status.archived.message": {
     "message": "{title} wurde archiviert. {title} wird keine weiteren Updates erhalten, es sei denn, der Autor entscheidet sich das Projekt zu dearchivieren."
   },

apps/frontend/src/locales/en-US/index.json

@@ -3458,6 +3458,12 @@
   "project-type.shader.singular": {
     "message": "Shader"
   },
+  "project.actions.back-to-all-projects": {
+    "message": "Back to all projects"
+  },
+  "project.actions.back-to-project-page": {
+    "message": "Back to project page"
+  },
   "project.actions.create-server": {
     "message": "Create a server"
   },
@@ -3470,6 +3476,9 @@
   "project.actions.edit-project": {
     "message": "Edit project"
   },
+  "project.actions.project-page": {
+    "message": "Project page"
+  },
   "project.actions.rescan-modpack": {
     "message": "Rescan modpack"
   },
@@ -3746,6 +3755,15 @@
   "project.notification.updated.title": {
     "message": "Project updated"
   },
+  "project.settings.back-to-all-projects": {
+    "message": "Back to all projects"
+  },
+  "project.settings.back-to-project-page": {
+    "message": "Back to project page"
+  },
+  "project.settings.editing-project": {
+    "message": "Editing {projectType} project"
+  },
   "project.settings.general.name.description": {
     "message": "Avoid prefixes, suffixes, parentheticals, or added descriptions—just the project's actual name."
   },
@@ -3974,12 +3992,6 @@
   "project.settings.tags.upload-version-first": {
     "message": "Please upload a version first in order to select tags!"
   },
-  "project.settings.title": {
-    "message": "Settings"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Visit projects dashboard"
-  },
   "project.status.archived.message": {
     "message": "{title} has been archived. {title} will not receive any further updates unless the author decides to unarchive the project."
   },

apps/frontend/src/locales/es-419/index.json

@@ -3497,12 +3497,6 @@
   "project.settings.permissions.sort.status": {
     "message": "Estado"
   },
-  "project.settings.title": {
-    "message": "Configuración"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Ver el panel de control de proyectos"
-  },
   "project.status.archived.message": {
     "message": "{title} se ha archivado. {title} no recibirá más actualizaciones hasta que el autor decida desarchivar el proyecto."
   },

apps/frontend/src/locales/es-ES/index.json

@@ -3221,12 +3221,6 @@
   "project.settings.permissions.sort.status": {
     "message": "Estado"
   },
-  "project.settings.title": {
-    "message": "Ajustes"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Visita el panel de proyectos"
-  },
   "project.status.archived.message": {
     "message": "{title} ha sido archivado. {title} no recibirá ninguna futura actualización excepto que el autor decida desarchivar el proyecto."
   },

apps/frontend/src/locales/fi-FI/index.json

@@ -980,9 +980,6 @@
   "project.settings.general.url.title": {
     "message": "URL"
   },
-  "project.settings.title": {
-    "message": "Asetukset"
-  },
   "project.versions.title": {
     "message": "Versiot"
   },

apps/frontend/src/locales/fil-PH/index.json

@@ -2411,12 +2411,6 @@
   "project.settings.permissions.sort.status": {
     "message": "Estado"
   },
-  "project.settings.title": {
-    "message": "Mga Setting"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Bisitahin ang dashboard ng mga proyekto"
-  },
   "project.status.archived.message": {
     "message": "Inarkibo ang {title}. Ang {title} ay hindi na tatanggap ng mga update maliban kung iwawala nila ang pagkaarkibo ng proyekto."
   },

apps/frontend/src/locales/fr-FR/index.json

@@ -3932,12 +3932,6 @@
   "project.settings.tags.upload-version-first": {
     "message": "Merci d'upload une version en premier afin de pouvoir sélectionner des tags !"
   },
-  "project.settings.title": {
-    "message": "Paramètres"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Visiter le tableau de contrôle des projets"
-  },
   "project.status.archived.message": {
     "message": "{title} a été archivé. {title} ne recevra plus de mises à jour jusqu'à ce que l'auteur du projet décide de désarchiver le projet."
   },

apps/frontend/src/locales/he-IL/index.json

@@ -2021,12 +2021,6 @@
   "project.settings.general.url.title": {
     "message": "URL"
   },
-  "project.settings.title": {
-    "message": "הגדרות"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "ללוח הבקרה של הפרויקטים"
-  },
   "project.status.archived.message": {
     "message": "הפרויקט {title} הועבר לארכיון. {title} לא יקבל עדכונים נוספים, אלא אם המחבר יחליט להוציא את הפרויקט מהארכיון."
   },

apps/frontend/src/locales/hu-HU/index.json

@@ -3506,12 +3506,6 @@
   "project.settings.tags.multiple-resolution-tags-warning": {
     "message": "{count} felbontási címkét választottál ki ({tags}). A forráscsomagoknak általában csak egy felbontási címkéjük lehet."
   },
-  "project.settings.title": {
-    "message": "Beállítások"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Projektek irányítópult megnyitása"
-  },
   "project.status.archived.message": {
     "message": "A(z) {title} archiválásra került. A(z) {title} nem kap további frissítéseket, kivéve, ha a fejlesztő úgy dönt, hogy visszavonja a projekt archiválását."
   },

apps/frontend/src/locales/id-ID/index.json

@@ -2414,12 +2414,6 @@
   "project.settings.general.url.title": {
     "message": "URL"
   },
-  "project.settings.title": {
-    "message": "Pengaturan"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Kunjungi dasbor proyek"
-  },
   "project.status.archived.message": {
     "message": "{title} telah diarsip. {title} tidak akan menerima pembaruan di masa mendatang kecuali pembuat memutuskan untuk membuka arsip proyek ini."
   },

apps/frontend/src/locales/it-IT/index.json

@@ -3947,12 +3947,6 @@
   "project.settings.tags.upload-version-first": {
     "message": "Carica una vesione prima di selezionare i tag!"
   },
-  "project.settings.title": {
-    "message": "Impostazioni"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Visita bacheca del progetto"
-  },
   "project.status.archived.message": {
     "message": "{title} è stato archiviato. {title} non riceverà più aggiornamenti a meno che l'autore decida di rimuoverlo dall'archivio."
   },

apps/frontend/src/locales/ja-JP/index.json

@@ -3002,12 +3002,6 @@
   "project.settings.permissions.sort.status": {
     "message": "ステータス"
   },
-  "project.settings.title": {
-    "message": "設定"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "プロジェクトダッシュボードを見る"
-  },
   "project.status.archived.message": {
     "message": "{title} はアーカイブされました。作者がプロジェクトのアーカイブを解除しない限り、今後 {title} に更新はありません。"
   },

apps/frontend/src/locales/ko-KR/index.json

@@ -3896,12 +3896,6 @@
   "project.settings.tags.upload-version-first": {
     "message": "먼저 버전을 업로드해야 태그를 선택할 수 있습니다!"
   },
-  "project.settings.title": {
-    "message": "설정"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "프로젝트 대시보드 방문"
-  },
   "project.status.archived.message": {
     "message": "{title} 은(는) 보관되었습니다. 작성자가 프로젝트 보관 해제를 결정하지 않는 한 더 이상 업데이트가 제공되지 않습니다."
   },

apps/frontend/src/locales/ms-MY/index.json

@@ -3038,12 +3038,6 @@
   "project.settings.permissions.sort.status": {
     "message": "Status"
   },
-  "project.settings.title": {
-    "message": "Tetapan"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Kunjungi papan pemuka projek"
-  },
   "project.status.archived.message": {
     "message": "{title} telah diarkibkan. {title} tidak akan menerima sebarang kemas kini lanjut melainkan pengarang memutuskan untuk menyaharkibkan projek."
   },

apps/frontend/src/locales/nl-NL/index.json

@@ -3968,12 +3968,6 @@
   "project.settings.tags.upload-version-first": {
     "message": "Upload eerst een versie om tags te kunnen selecteren!"
   },
-  "project.settings.title": {
-    "message": "Instellingen"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Bezoek het project dashboard"
-  },
   "project.status.archived.message": {
     "message": "{title} is gearchiveerd. {title} zal geen verdere updates krijgen tenzij de auteur het project de-archiveerd."
   },

apps/frontend/src/locales/no-NO/index.json

@@ -2888,12 +2888,6 @@
   "project.settings.permissions.sort.status": {
     "message": "Status"
   },
-  "project.settings.title": {
-    "message": "Innstillinger"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Besøk prosjekt-dashbordet"
-  },
   "project.status.archived.message": {
     "message": "{title} har blitt arkivert. {title} kommer ikke til å få noen nye oppdateringer, hvis ikke forfatteren bestemmer seg for å dearkivere prosjektet."
   },

apps/frontend/src/locales/pl-PL/index.json

@@ -3887,12 +3887,6 @@
   "project.settings.tags.upload-version-first": {
     "message": "Prześlij wersję, by móc wybierać tagi!"
   },
-  "project.settings.title": {
-    "message": "Ustawienia"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Odwiedź pulpit projektów"
-  },
   "project.status.archived.message": {
     "message": "{title} zostało zarchiwizowane. {title} nie będzie otrzymywać żadnych dalszych aktualizacji, chyba że autor zdecyduje się przywrócić projekt."
   },

apps/frontend/src/locales/pt-BR/index.json

@@ -3971,12 +3971,6 @@
   "project.settings.tags.upload-version-first": {
     "message": "Por favor, envie uma versão primeiro para que as etiquetas possam ser selecionadas!"
   },
-  "project.settings.title": {
-    "message": "Configurações"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Visitar painel de projetos"
-  },
   "project.status.archived.message": {
     "message": "{title} foi arquivado. {title} não receberá atualizações a menos que o autor decida desarquivar o projeto."
   },

apps/frontend/src/locales/pt-PT/index.json

@@ -2756,12 +2756,6 @@
   "project.settings.general.url.title": {
     "message": "URL"
   },
-  "project.settings.title": {
-    "message": "Definições"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Visitar o painel de projetos"
-  },
   "project.status.archived.message": {
     "message": "{title} foi arquivado. {title} não receberá mais atualizações, a menos que o autor decida desarquivar o projeto."
   },

apps/frontend/src/locales/ro-RO/index.json

@@ -1448,12 +1448,6 @@
   "project.settings.general.url.title": {
     "message": "URL"
   },
-  "project.settings.title": {
-    "message": "Setări"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Vizitează panoul de control al proiectelor"
-  },
   "project.status.archived.message": {
     "message": "Proiectul {title} a fost arhivat. Proiectul {title} nu va mai primi actualizări, cu excepția cazului în care autorul decide să-l dezarhiveze."
   },

apps/frontend/src/locales/ru-RU/index.json

@@ -3935,12 +3935,6 @@
   "project.settings.tags.upload-version-first": {
     "message": "Загрузите версию перед тем, как выбрать теги!"
   },
-  "project.settings.title": {
-    "message": "Настройки"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Управление проектами"
-  },
   "project.status.archived.message": {
     "message": "{title} помещён в архив. {title} больше не будет получать обновления, если только автор не решит разархивировать проект."
   },

apps/frontend/src/locales/sv-SE/index.json

@@ -3158,9 +3158,6 @@
   "project.settings.server.server-online": {
     "message": "Servern är online!"
   },
-  "project.settings.title": {
-    "message": "Inställningar"
-  },
   "project.status.archived.message": {
     "message": "{title} har arkiverats. {title} kommer inte få några ytterligare uppdateringar såvida inte författaren bestämmer sig för att avarkivera projektet."
   },

apps/frontend/src/locales/tr-TR/index.json

@@ -3443,12 +3443,6 @@
   "project.settings.permissions.sort.status": {
     "message": "Durum"
   },
-  "project.settings.title": {
-    "message": "Ayarlar"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Projeler panelini ziyaret et"
-  },
   "project.status.archived.message": {
     "message": "{title} arşivlenmiş. {title}, yapımcı fikrini değiştirmediği sürece daha fazla güncelleme almayacak."
   },

apps/frontend/src/locales/uk-UA/index.json

@@ -3899,12 +3899,6 @@
   "project.settings.tags.upload-version-first": {
     "message": "Спершу завантажте версію, щоб обирати теґи!"
   },
-  "project.settings.title": {
-    "message": "Налаштування"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Панель керування проєктами"
-  },
   "project.status.archived.message": {
     "message": "«{title}» було архівовано. «{title}» не отримуватиме подальших оновлень допоки автор не вирішить розархівувати проєкт."
   },

apps/frontend/src/locales/vi-VN/index.json

@@ -3179,12 +3179,6 @@
   "project.settings.permissions.learn-more": {
     "message": "Tìm hiểu thêm"
   },
-  "project.settings.title": {
-    "message": "Cài đặt"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "Truy cập bảng điều khiển dự án"
-  },
   "project.status.archived.message": {
     "message": "{title} đã được lưu trữ. {title} sẽ không nhận được bất kỳ bản cập nhật nào trong tương lai trừ khi tác giả quyết định hủy lưu trữ dự án."
   },

apps/frontend/src/locales/zh-CN/index.json

@@ -3971,12 +3971,6 @@
   "project.settings.tags.upload-version-first": {
     "message": "请先上传一个版本再选择标签！"
   },
-  "project.settings.title": {
-    "message": "设置"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "访问项目的控制面板"
-  },
   "project.status.archived.message": {
     "message": "{title} 已归档。除非作者决定取消归档，否则 {title} 将不再更新。"
   },

apps/frontend/src/locales/zh-TW/index.json

@@ -3971,12 +3971,6 @@
   "project.settings.tags.upload-version-first": {
     "message": "請先上傳一個版本再選擇標籤！"
   },
-  "project.settings.title": {
-    "message": "設定"
-  },
-  "project.settings.visit-dashboard": {
-    "message": "前往專案資訊主頁"
-  },
   "project.status.archived.message": {
     "message": "{title} 已封存。{title} 將不會再收到任何後續更新，除非作者決定解除封存該專案。"
   },

apps/frontend/src/pages/[type]/[project].vue

@@ -5,29 +5,49 @@
 		</Teleport>
 		<template v-if="isSettings">
 			<div v-if="canAccessSettings" class="normal-page no-sidebar">
-				<div class="normal-page__header">
+				<div class="normal-page__header mb-6">
-					<div
+					<PageHeader :title="project.title" :row-class="'items-center'">
-						class="mb-4 flex flex-wrap items-center gap-x-2 gap-y-3 border-0 border-b-[1px] border-solid border-divider pb-4 text-lg font-semibold"
+						<template #leading>
-					>
+							<ButtonStyled v-if="settingsBackDestination" circular size="large">
-						<nuxt-link
+								<NuxtLink
-							:to="`/${project.project_type}/${project.slug ? project.slug : project.id}`"
+									v-tooltip="settingsBackDestination.label"
-							class="flex items-center gap-2 hover:underline hover:brightness-[--hover-brightness]"
+									:to="settingsBackDestination.to"
-						>
+									:aria-label="settingsBackDestination.label"
-							<Avatar :src="project.icon_url" size="32px" />
+								>
-							{{ project.title }}
+									<LeftArrowIcon />
-						</nuxt-link>
+								</NuxtLink>
-						<ChevronRightIcon />
-						<span class="flex grow font-extrabold text-contrast">{{
-							formatMessage(messages.settingsTitle)
-						}}</span>
-						<div class="flex gap-2">
-							<ButtonStyled>
-								<nuxt-link to="/dashboard/projects"
-									><ListIcon /> {{ formatMessage(messages.visitProjectsDashboard) }}
-								</nuxt-link>
 							</ButtonStyled>
-						</div>
+							<Avatar :src="project.icon_url" :tint-by="project.id" size="64px" />
-					</div>
+						</template>
+						<template #metadata>
+							<PageHeaderMetadata>
+								<PageHeaderMetadataItem>
+									{{
+										formatMessage(messages.editingProject, {
+											projectType: projectTypeDisplay.toLowerCase(),
+										})
+									}}
+								</PageHeaderMetadataItem>
+								<PageHeaderMetadataItem>
+									{{
+										formatMessage(commonMessages.projectCreated, {
+											date: formatRelativeTime(project.published),
+										})
+									}}
+								</PageHeaderMetadataItem>
+							</PageHeaderMetadata>
+						</template>
+						<template #actions>
+							<PageHeaderActions>
+								<ButtonStyled>
+									<NuxtLink :to="`${projectPath}`">
+										<CompassIcon />
+										{{ formatMessage(messages.projectPage) }}
+									</NuxtLink>
+								</ButtonStyled>
+							</PageHeaderActions>
+						</template>
+					</PageHeader>
 					<ProjectMemberHeader
 						v-if="currentMember && false"
 						:project="project"
@@ -486,12 +506,12 @@
 <script setup>
 import {
 	ChartIcon,
-	ChevronRightIcon,
 	ClipboardCopyIcon,
+	CompassIcon,
 	DownloadIcon,
 	FolderSearchIcon,
 	HeartIcon,
-	ListIcon,
+	LeftArrowIcon,
 	MoreVerticalIcon,
 	PlayIcon,
 	ReportIcon,
@@ -514,6 +534,10 @@ import {
 	IntlFormatted,
 	NavTabs,
 	OpenInAppModal,
+	PageHeader,
+	PageHeaderActions,
+	PageHeaderMetadata,
+	PageHeaderMetadataItem,
 	PROJECT_DEP_MARKER_QUERY,
 	ProjectBackgroundGradient,
 	ProjectEnvironmentModal,
@@ -529,6 +553,7 @@ import {
 	TeleportOverflowMenu,
 	useDebugLogger,
 	useFormatPrice,
+	useRelativeTime,
 	useStickyObserver,
 	useVIntl,
 } from '@modrinth/ui'
@@ -600,6 +625,7 @@ watch(() => route.query.dep, absorbDepQuery, { immediate: true })
 const tags = useGeneratedState()
 const flags = useFeatureFlags()
 const cosmetics = useCosmetics()
+const formatRelativeTime = useRelativeTime()
 
 const { formatMessage } = useVIntl()
 const formatPrice = useFormatPrice()
@@ -644,10 +670,18 @@ const messages = defineMessages({
 		defaultMessage:
 			'{title} has been archived. {title} will not receive any further updates unless the author decides to unarchive the project.',
 	},
+	backToAllProjects: {
+		id: 'project.settings.back-to-all-projects',
+		defaultMessage: 'Back to all projects',
+	},
 	backToDiscover: {
 		id: 'project.install-context.back-to-discover',
 		defaultMessage: 'Back to discover',
 	},
+	backToProjectPage: {
+		id: 'project.settings.back-to-project-page',
+		defaultMessage: 'Back to project page',
+	},
 	changelogTab: {
 		id: 'project.navigation.changelog',
 		defaultMessage: 'Changelog',
@@ -742,6 +776,18 @@ const messages = defineMessages({
 		id: 'project.environment.migration.review-button',
 		defaultMessage: 'Review environment settings',
 	},
+	projectPage: {
+		id: 'project.actions.project-page',
+		defaultMessage: 'Project page',
+	},
+	backToProjectPage: {
+		id: 'project.actions.back-to-project-page',
+		defaultMessage: 'Back to project page',
+	},
+	backToAllProjects: {
+		id: 'project.actions.back-to-all-projects',
+		defaultMessage: 'Back to all projects',
+	},
 	reviewProject: {
 		id: 'project.actions.review-project',
 		defaultMessage: 'Review project',
@@ -762,17 +808,13 @@ const messages = defineMessages({
 		id: 'project.actions.servers-promo.title',
 		defaultMessage: 'Create a server',
 	},
-	settingsTitle: {
-		id: 'project.settings.title',
-		defaultMessage: 'Settings',
-	},
 	versionsTab: {
 		id: 'project.versions.title',
 		defaultMessage: 'Versions',
 	},
-	visitProjectsDashboard: {
+	editingProject: {
-		id: 'project.settings.visit-dashboard',
+		id: 'project.settings.editing-project',
-		defaultMessage: 'Visit projects dashboard',
+		defaultMessage: 'Editing {projectType} project',
 	},
 })
 
@@ -1572,6 +1614,38 @@ const projectPath = computed(() =>
 		? `/${project.value.project_type}/${project.value.slug ? project.value.slug : project.value.id}`
 		: '',
 )
+
+const settingsEntryRouteName = ref()
+
+function setSettingsEntryRoute() {
+	const backPath = window.history.state?.back
+	if (!isSettings.value || typeof backPath !== 'string') {
+		settingsEntryRouteName.value = undefined
+		return
+	}
+	settingsEntryRouteName.value = router.resolve(backPath).name?.toString()
+}
+
+onMounted(setSettingsEntryRoute)
+watch(isSettings, setSettingsEntryRoute)
+
+const settingsBackDestination = computed(() => {
+	switch (settingsEntryRouteName.value) {
+		case 'dashboard-projects':
+			return {
+				label: formatMessage(messages.backToAllProjects),
+				to: '/dashboard/projects',
+			}
+		case 'type-project':
+			return {
+				label: formatMessage(messages.backToProjectPage),
+				to: projectPath.value,
+			}
+		default:
+			return undefined
+	}
+})
+
 const projectHeaderPrimaryColor = computed(() =>
 	currentMember.value || route.name === 'type-project-version-version' ? 'standard' : 'brand',
 )