fix: 404 when returning to collections dashboard (#5963)

* fix 404 when returning to collections dashboard, fix a couple hydration
issues

* fix clippy

* fmt

* fix hydration issue on revenue page

* fix transfer history page error

---------

Co-authored-by: aecsocket <aecsocket@tutanota.com>

apps/frontend/src/app.vue

@@ -1,7 +1,9 @@
 <template>
 	<NuxtLayout>
 		<NuxtRouteAnnouncer />
-		<LoadingBar />
+		<ClientOnly>
+			<LoadingBar />
+		</ClientOnly>
 		<NotificationPanel />
 		<I18nDebugPanel />
 		<NuxtPage />

apps/frontend/src/pages/collection/[id].vue

@@ -186,7 +186,9 @@
 												getProjectTypeSentenceMessage(
 													projectTypes.length === 1 ? projectTypes[0] : 'project',
 												),
-												{ count: formatCompactNumberPlural(projects?.length || 0) },
+												{
+													count: formatCompactNumberPlural(projects?.length || 0),
+												},
 											),
 										}"
 									>
@@ -532,8 +534,8 @@ const returnLink = computed(() => {
 	return null
 })
 
-const isFollowingCollection = computed(() => route.params.id === 'following')
 const collectionId = computed(() => route.params.id)
+const isFollowingCollection = computed(() => collectionId.value === 'following')
 
 // Static collection for "following" page
 const followingCollection = computed(() =>
@@ -560,13 +562,13 @@ const {
 } = useQuery({
 	queryKey: computed(() => ['collection', collectionId.value]),
 	queryFn: () => api.labrinth.collections.get(collectionId.value),
-	enabled: computed(() => !isFollowingCollection.value),
+	enabled: computed(() => !!collectionId.value && !isFollowingCollection.value),
 })
 
 watch(
 	collectionError,
 	(error) => {
-		if (error && !isFollowingCollection.value) {
+		if (error && collectionId.value && !isFollowingCollection.value) {
 			const status = error.statusCode ?? error.status ?? 404
 			showError({
 				fatal: true,

apps/frontend/src/pages/dashboard/revenue/index.vue

@@ -70,7 +70,12 @@
 								date: date.date ? formatDate(date.date) : '',
 							})
 						}}
-						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']" no-auto-focus>
+						<Tooltip
+							theme="dismissable-prompt"
+							:triggers="['hover', 'focus']"
+							no-auto-focus
+							:aria-id="`${baseId}-date-segment-tooltip-${i}`"
+						>
 							<nuxt-link
 								class="inline-flex items-center justify-center text-link"
 								to="/legal/cmp-info#pending"
@@ -99,7 +104,12 @@
 							class="zone--striped-small zone--striped--gray my-auto block size-4 rounded-full bg-button-bg opacity-90 md:size-5"
 						></span>
 						{{ formatMessage(messages.processing) }}
-						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']" no-auto-focus>
+						<Tooltip
+							theme="dismissable-prompt"
+							:triggers="['hover', 'focus']"
+							no-auto-focus
+							:aria-id="`${baseId}-processing-tooltip`"
+						>
 							<InProgressIcon class="inline-block size-4 align-middle md:size-5" />
 							<template #popper>
 								<div class="w-[250px] font-semibold text-contrast">
@@ -292,6 +302,8 @@ type RevenueBarSegment = {
 
 const hoveredSeg = ref<string | null>(null)
 
+const baseId = useId()
+
 const withdrawModal = ref<InstanceType<typeof CreatorWithdrawModal>>()
 async function openWithdrawModal() {
 	withdrawModal.value?.show?.()

apps/frontend/src/pages/dashboard/revenue/transfers.vue

@@ -117,6 +117,53 @@ const formatMonth = useFormatDateTime({
 const client = injectModrinthClient()
 const generatedState = useGeneratedState()
 
+const messages = defineMessages({
+	transactionsHeader: {
+		id: 'dashboard.revenue.transactions.header',
+		defaultMessage: 'Transactions',
+	},
+	headTitle: {
+		id: 'dashboard.revenue.transactions.head-title',
+		defaultMessage: 'Transaction history',
+	},
+	received: {
+		id: 'dashboard.revenue.stats.received',
+		defaultMessage: 'Received',
+	},
+	withdrawn: {
+		id: 'dashboard.revenue.stats.withdrawn',
+		defaultMessage: 'Withdrawn',
+	},
+	transactions: {
+		id: 'dashboard.revenue.stats.transactions',
+		defaultMessage: 'Transactions',
+	},
+	noTransactions: {
+		id: 'dashboard.revenue.transactions.none',
+		defaultMessage: 'No transactions',
+	},
+	noTransactionsDesc: {
+		id: 'dashboard.revenue.transactions.none.desc',
+		defaultMessage: 'Your payouts and withdrawals will appear here.',
+	},
+	downloadCsv: {
+		id: 'dashboard.revenue.transactions.btn.download-csv',
+		defaultMessage: 'Download as CSV',
+	},
+	allYears: {
+		id: 'dashboard.revenue.transactions.year.all',
+		defaultMessage: 'All years',
+	},
+	thisMonth: {
+		id: 'dashboard.revenue.transactions.period.this-month',
+		defaultMessage: 'This month',
+	},
+	lastMonth: {
+		id: 'dashboard.revenue.transactions.period.last-month',
+		defaultMessage: 'Last month',
+	},
+})
+
 useHead({
 	title: () => `${formatMessage(messages.headTitle)} - Modrinth`,
 })
@@ -318,51 +365,4 @@ const downloadTransactionsCSV = () => {
 }
 
 const onDownloadCSV = useClientTry(async () => await downloadTransactionsCSV())
-
-const messages = defineMessages({
-	transactionsHeader: {
-		id: 'dashboard.revenue.transactions.header',
-		defaultMessage: 'Transactions',
-	},
-	headTitle: {
-		id: 'dashboard.revenue.transactions.head-title',
-		defaultMessage: 'Transaction history',
-	},
-	received: {
-		id: 'dashboard.revenue.stats.received',
-		defaultMessage: 'Received',
-	},
-	withdrawn: {
-		id: 'dashboard.revenue.stats.withdrawn',
-		defaultMessage: 'Withdrawn',
-	},
-	transactions: {
-		id: 'dashboard.revenue.stats.transactions',
-		defaultMessage: 'Transactions',
-	},
-	noTransactions: {
-		id: 'dashboard.revenue.transactions.none',
-		defaultMessage: 'No transactions',
-	},
-	noTransactionsDesc: {
-		id: 'dashboard.revenue.transactions.none.desc',
-		defaultMessage: 'Your payouts and withdrawals will appear here.',
-	},
-	downloadCsv: {
-		id: 'dashboard.revenue.transactions.btn.download-csv',
-		defaultMessage: 'Download as CSV',
-	},
-	allYears: {
-		id: 'dashboard.revenue.transactions.year.all',
-		defaultMessage: 'All years',
-	},
-	thisMonth: {
-		id: 'dashboard.revenue.transactions.period.this-month',
-		defaultMessage: 'This month',
-	},
-	lastMonth: {
-		id: 'dashboard.revenue.transactions.period.last-month',
-		defaultMessage: 'Last month',
-	},
-})
 </script>