make tab default to 'all' if not valid

packages/client/src/pages/notifications.vue

@@ -2,15 +2,15 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
-		<div v-if="tab === 'all' || tab === 'unread'">
+		<div v-if="tab === 'mentions'">
-			<XNotifications class="notifications" :include-types="includeTypes" :unread-only="unreadOnly"/>
-		</div>
-		<div v-else-if="tab === 'mentions'">
 			<XNotes :pagination="mentionsPagination"/>
 		</div>
 		<div v-else-if="tab === 'directNotes'">
 			<XNotes :pagination="directNotesPagination"/>
 		</div>
+		<div v-else>
+			<XNotifications class="notifications" :include-types="includeTypes" :unread-only="unreadOnly"/>
+		</div>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -24,60 +24,6 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
-const props = withDefaults(defineProps<{
-	initialTab?: string;
-}>(), {
-	initialTab: 'all',
-});
-
-let tab = $ref(props.initialTab);
-let includeTypes = $ref<string[] | null>(null);
-let unreadOnly = $computed(() => tab === 'unread');
-
-const mentionsPagination = {
-	endpoint: 'notes/mentions' as const,
-	limit: 10,
-};
-
-const directNotesPagination = {
-	endpoint: 'notes/mentions' as const,
-	limit: 10,
-	params: {
-		visibility: 'specified',
-	},
-};
-
-function setFilter(ev) {
-	const typeItems = notificationTypes.map(t => ({
-		text: i18n.t(`_notification._types.${t}`),
-		active: includeTypes && includeTypes.includes(t),
-		action: () => {
-			includeTypes = [t];
-		},
-	}));
-	const items = includeTypes != null ? [{
-		icon: 'fas fa-times',
-		text: i18n.ts.clear,
-		action: () => {
-			includeTypes = null;
-		},
-	}, null, ...typeItems] : typeItems;
-	os.popupMenu(items, ev.currentTarget ?? ev.target);
-}
-
-const headerActions = $computed(() => [tab === 'all' ? {
-	text: i18n.ts.filter,
-	icon: 'fas fa-filter',
-	highlighted: includeTypes != null,
-	handler: setFilter,
-} : undefined, tab === 'all' ? {
-	text: i18n.ts.markAllAsRead,
-	icon: 'fas fa-check',
-	handler: () => {
-		os.apiWithDialog('notifications/mark-all-as-read');
-	},
-} : undefined].filter(x => x !== undefined));
-
 const headerTabs = $computed(() => [{
 	key: 'all',
 	title: i18n.ts.all,
@@ -94,6 +40,60 @@ const headerTabs = $computed(() => [{
 	icon: 'fas fa-envelope',
 }]);
 
+const props = withDefaults(defineProps<{
+	initialTab?: string;
+}>(), {
+	initialTab: 'all',
+});
+
+let tab = $ref(headerTabs.some(({ key }) => key === props.initialTab) ? props.initialTab : 'all');
+let includeTypes = $ref<string[] | null>(null);
+let unreadOnly = $computed(() => tab === 'unread');
+
+const mentionsPagination = {
+	endpoint: 'notes/mentions' as const,
+	limit: 10,
+};
+
+const directNotesPagination = {
+	endpoint: 'notes/mentions' as const,
+	limit: 10,
+	params: {
+		visibility: 'specified',
+	},
+};
+
+function setFilter(ev: Event): void {
+	const typeItems = notificationTypes.map(t => ({
+		text: i18n.t(`_notification._types.${t}`),
+		active: includeTypes && includeTypes.includes(t),
+		action: () => {
+			includeTypes = [t];
+		},
+	}));
+	const items = includeTypes != null ? [{
+		icon: 'fas fa-times',
+		text: i18n.ts.clear,
+		action: () => {
+			includeTypes = null;
+		},
+	}, null, ...typeItems] : typeItems;
+	os.popupMenu(items, ev.currentTarget ?? ev.target);
+}
+
+const headerActions = $computed(() => tab === 'all' ? [{
+	text: i18n.ts.filter,
+	icon: 'fas fa-filter',
+	highlighted: includeTypes != null,
+	handler: setFilter,
+},{
+	text: i18n.ts.markAllAsRead,
+	icon: 'fas fa-check',
+	handler: () => {
+		os.apiWithDialog('notifications/mark-all-as-read');
+	},
+}] : []);
+
 definePageMetadata(computed(() => ({
 	title: i18n.ts.notifications,
 	icon: 'fas fa-bell',