From 018aa6381da73ceaef756c6dab65743f629526c6 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 29 Jun 2022 11:13:32 +0900
Subject: [PATCH 1/8] =?UTF-8?q?enhance(client):=20=E3=83=A1=E3=83=8B?=
 =?UTF-8?q?=E3=83=A5=E3=83=BC=E6=95=B4=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolve #6389
Fix #8035
---
 locales/ja-JP.yml                             |   1 +
 packages/client/src/components/launch-pad.vue |  29 ++++-
 packages/client/src/menu.ts                   |  29 -----
 .../{emojis.category.vue => about.emojis.vue} |   0
 .../client/src/pages/about.federation.vue     | 106 +++++++++++++++
 packages/client/src/pages/about.vue           |  14 +-
 packages/client/src/pages/admin/index.vue     |   2 +-
 packages/client/src/pages/emojis.vue          |  58 ---------
 packages/client/src/pages/federation.vue      | 122 ------------------
 packages/client/src/pages/mentions.vue        |  29 -----
 packages/client/src/pages/messages.vue        |  32 -----
 packages/client/src/pages/notifications.vue   |  44 +++++--
 .../client/src/pages/user/index.activity.vue  |   2 +-
 packages/client/src/router.ts                 |  12 --
 14 files changed, 181 insertions(+), 299 deletions(-)
 rename packages/client/src/pages/{emojis.category.vue => about.emojis.vue} (100%)
 create mode 100644 packages/client/src/pages/about.federation.vue
 delete mode 100644 packages/client/src/pages/emojis.vue
 delete mode 100644 packages/client/src/pages/federation.vue
 delete mode 100644 packages/client/src/pages/mentions.vue
 delete mode 100644 packages/client/src/pages/messages.vue

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 6b4a99c4a..95d2868ed 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -854,6 +854,7 @@ typeToConfirm: "この操作を行うには {x} と入力してください"
 deleteAccount: "アカウント削除"
 numberOfPageCache: "ページキャッシュ数"
 numberOfPageCacheDescription: "多くすると利便性が向上しますが、負荷とメモリ使用量が増えます。"
+document: "ドキュメント"
 
 _emailUnavailable:
   used: "既に使用されています"
diff --git a/packages/client/src/components/launch-pad.vue b/packages/client/src/components/launch-pad.vue
index 3c1d3f3c1..d875edb53 100644
--- a/packages/client/src/components/launch-pad.vue
+++ b/packages/client/src/components/launch-pad.vue
@@ -16,13 +16,13 @@
 			</template>
 		</div>
 		<div class="sub">
-			<a v-click-anime href="https://misskey-hub.net/help.html" target="_blank" @click.passive="close()">
+			<button v-click-anime class="_button" @click="help">
 				<i class="fas fa-question-circle icon"></i>
 				<div class="text">{{ i18n.ts.help }}</div>
-			</a>
+			</button>
 			<MkA v-click-anime to="/about" @click.passive="close()">
 				<i class="fas fa-info-circle icon"></i>
-				<div class="text">{{ i18n.t('aboutX', { x: instanceName }) }}</div>
+				<div class="text">{{ i18n.ts.instanceInfo }}</div>
 			</MkA>
 			<MkA v-click-anime to="/about-misskey" @click.passive="close()">
 				<img src="/static-assets/favicon.png" class="icon"/>
@@ -40,6 +40,7 @@ import { instanceName } from '@/config';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 import { deviceKind } from '@/scripts/device-kind';
+import * as os from '@/os';
 
 const props = withDefaults(defineProps<{
 	src?: HTMLElement;
@@ -72,6 +73,28 @@ const items = Object.keys(menuDef).filter(k => !menu.includes(k)).map(k => menuD
 function close() {
 	modal.close();
 }
+
+function help(ev: MouseEvent) {
+	os.popupMenu([{
+		type: 'link',
+		to: '/mfm-cheat-sheet',
+		text: i18n.ts._mfm.cheatSheet,
+		icon: 'fas fa-code',
+	}, {
+		type: 'link',
+		to: '/scratchpad',
+		text: i18n.ts.scratchpad,
+		icon: 'fas fa-terminal',
+	}, null, {
+		text: i18n.ts.document,
+		icon: 'fas fa-question-circle',
+		action: () => {
+			window.open('https://misskey-hub.net/help.html', '_blank');
+		},
+	}], ev.currentTarget ?? ev.target);
+
+	close();
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/menu.ts b/packages/client/src/menu.ts
index 7a5df5bf8..2261c9180 100644
--- a/packages/client/src/menu.ts
+++ b/packages/client/src/menu.ts
@@ -107,20 +107,6 @@ export const menuDef = reactive({
 			os.popupMenu(items, ev.currentTarget ?? ev.target);
 		},
 	},
-	mentions: {
-		title: 'mentions',
-		icon: 'fas fa-at',
-		show: computed(() => $i != null),
-		indicated: computed(() => $i != null && $i.hasUnreadMentions),
-		to: '/my/mentions',
-	},
-	messages: {
-		title: 'directNotes',
-		icon: 'fas fa-envelope',
-		show: computed(() => $i != null),
-		indicated: computed(() => $i != null && $i.hasUnreadSpecifiedNotes),
-		to: '/my/messages',
-	},
 	favorites: {
 		title: 'favorites',
 		icon: 'fas fa-star',
@@ -148,21 +134,6 @@ export const menuDef = reactive({
 		icon: 'fas fa-satellite-dish',
 		to: '/channels',
 	},
-	federation: {
-		title: 'federation',
-		icon: 'fas fa-globe',
-		to: '/federation',
-	},
-	emojis: {
-		title: 'emojis',
-		icon: 'fas fa-laugh',
-		to: '/emojis',
-	},
-	scratchpad: {
-		title: 'scratchpad',
-		icon: 'fas fa-terminal',
-		to: '/scratchpad',
-	},
 	ui: {
 		title: 'switchUi',
 		icon: 'fas fa-columns',
diff --git a/packages/client/src/pages/emojis.category.vue b/packages/client/src/pages/about.emojis.vue
similarity index 100%
rename from packages/client/src/pages/emojis.category.vue
rename to packages/client/src/pages/about.emojis.vue
diff --git a/packages/client/src/pages/about.federation.vue b/packages/client/src/pages/about.federation.vue
new file mode 100644
index 000000000..00ca44eec
--- /dev/null
+++ b/packages/client/src/pages/about.federation.vue
@@ -0,0 +1,106 @@
+<template>
+<div class="taeiyria">
+	<div class="query">
+		<MkInput v-model="host" :debounce="true" class="">
+			<template #prefix><i class="fas fa-search"></i></template>
+			<template #label>{{ $ts.host }}</template>
+		</MkInput>
+		<FormSplit style="margin-top: var(--margin);">
+			<MkSelect v-model="state">
+				<template #label>{{ $ts.state }}</template>
+				<option value="all">{{ $ts.all }}</option>
+				<option value="federating">{{ $ts.federating }}</option>
+				<option value="subscribing">{{ $ts.subscribing }}</option>
+				<option value="publishing">{{ $ts.publishing }}</option>
+				<option value="suspended">{{ $ts.suspended }}</option>
+				<option value="blocked">{{ $ts.blocked }}</option>
+				<option value="notResponding">{{ $ts.notResponding }}</option>
+			</MkSelect>
+			<MkSelect v-model="sort">
+				<template #label>{{ $ts.sort }}</template>
+				<option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option>
+				<option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option>
+				<option value="+notes">{{ $ts.notes }} ({{ $ts.descendingOrder }})</option>
+				<option value="-notes">{{ $ts.notes }} ({{ $ts.ascendingOrder }})</option>
+				<option value="+users">{{ $ts.users }} ({{ $ts.descendingOrder }})</option>
+				<option value="-users">{{ $ts.users }} ({{ $ts.ascendingOrder }})</option>
+				<option value="+following">{{ $ts.following }} ({{ $ts.descendingOrder }})</option>
+				<option value="-following">{{ $ts.following }} ({{ $ts.ascendingOrder }})</option>
+				<option value="+followers">{{ $ts.followers }} ({{ $ts.descendingOrder }})</option>
+				<option value="-followers">{{ $ts.followers }} ({{ $ts.ascendingOrder }})</option>
+				<option value="+caughtAt">{{ $ts.registeredAt }} ({{ $ts.descendingOrder }})</option>
+				<option value="-caughtAt">{{ $ts.registeredAt }} ({{ $ts.ascendingOrder }})</option>
+				<option value="+lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.descendingOrder }})</option>
+				<option value="-lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.ascendingOrder }})</option>
+			</MkSelect>
+		</FormSplit>
+	</div>
+
+	<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
+		<div class="dqokceoi">
+			<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Last communicated: ${new Date(instance.lastCommunicatedAt).toLocaleString()}\nStatus: ${getStatus(instance)}`" class="instance" :to="`/instance-info/${instance.host}`">
+				<MkInstanceCardMini :instance="instance"/>
+			</MkA>
+		</div>
+	</MkPagination>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/form/input.vue';
+import MkSelect from '@/components/form/select.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import MkInstanceCardMini from '@/components/instance-card-mini.vue';
+import FormSplit from '@/components/form/split.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+let host = $ref('');
+let state = $ref('federating');
+let sort = $ref('+pubSub');
+const pagination = {
+	endpoint: 'federation/instances' as const,
+	limit: 10,
+	offsetMode: true,
+	params: computed(() => ({
+		sort: sort,
+		host: host !== '' ? host : null,
+		...(
+			state === 'federating' ? { federating: true } :
+			state === 'subscribing' ? { subscribing: true } :
+			state === 'publishing' ? { publishing: true } :
+			state === 'suspended' ? { suspended: true } :
+			state === 'blocked' ? { blocked: true } :
+			state === 'notResponding' ? { notResponding: true } :
+			{}),
+	})),
+};
+
+function getStatus(instance) {
+	if (instance.isSuspended) return 'Suspended';
+	if (instance.isBlocked) return 'Blocked';
+	if (instance.isNotResponding) return 'Error';
+	return 'Alive';
+}
+</script>
+
+<style lang="scss" scoped>
+.taeiyria {
+	> .query {
+		background: var(--bg);
+		margin-bottom: 16px;
+	}
+}
+
+.dqokceoi {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+	grid-gap: 12px;
+
+	> .instance:hover {
+		text-decoration: none;
+	}
+}
+</style>
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index fcb82ee34..ca53f00a2 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -73,7 +73,7 @@
 	<MkSpacer v-else-if="tab === 'federation'" :content-max="1000" :margin-min="20">
 		<XFederation/>
 	</MkSpacer>
-	<MkSpacer v-else-if="tab === 'charts'" :content-max="1000" :margin-min="20">
+	<MkSpacer v-else-if="tab === 'charts'" :content-max="1200" :margin-min="20">
 		<MkInstanceStats :chart-limit="500" :detailed="true"/>
 	</MkSpacer>
 </MkStickyContainer>
@@ -81,6 +81,8 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
+import XEmojis from './about.emojis.vue';
+import XFederation from './about.federation.vue';
 import { version, host } from '@/config';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
@@ -112,10 +114,18 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => [{
 	key: 'overview',
 	title: i18n.ts.overview,
+}, {
+	key: 'emojis',
+	title: i18n.ts.customEmojis,
+	icon: 'fas fa-laugh',
+}, {
+	key: 'federation',
+	title: i18n.ts.federation,
+	icon: 'fas fa-globe',
 }, {
 	key: 'charts',
 	title: i18n.ts.charts,
-	icon: 'fas fa-chart-bar',
+	icon: 'fas fa-chart-simple',
 }]);
 
 definePageMetadata(computed(() => ({
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index cec58f800..ca33c9f87 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -190,7 +190,7 @@ const component = $computed(() => {
 		case 'overview': return defineAsyncComponent(() => import('./overview.vue'));
 		case 'users': return defineAsyncComponent(() => import('./users.vue'));
 		case 'emojis': return defineAsyncComponent(() => import('./emojis.vue'));
-		case 'federation': return defineAsyncComponent(() => import('../federation.vue'));
+		//case 'federation': return defineAsyncComponent(() => import('../federation.vue'));
 		case 'queue': return defineAsyncComponent(() => import('./queue.vue'));
 		case 'files': return defineAsyncComponent(() => import('./files.vue'));
 		case 'announcements': return defineAsyncComponent(() => import('./announcements.vue'));
diff --git a/packages/client/src/pages/emojis.vue b/packages/client/src/pages/emojis.vue
deleted file mode 100644
index fd8ca314f..000000000
--- a/packages/client/src/pages/emojis.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<div :class="$style.root">
-		<XCategory/>
-	</div>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed } from 'vue';
-import XCategory from './emojis.category.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-function menu(ev) {
-	os.popupMenu([{
-		icon: 'fas fa-download',
-		text: i18n.ts.export,
-		action: async () => {
-			os.api('export-custom-emojis', {
-			})
-			.then(() => {
-				os.alert({
-					type: 'info',
-					text: i18n.ts.exportRequested,
-				});
-			}).catch((err) => {
-				os.alert({
-					type: 'error',
-					text: err.message,
-				});
-			});
-		},
-	}], ev.currentTarget ?? ev.target);
-}
-
-const headerActions = $computed(() => [{
-	icon: 'fas fa-ellipsis-h',
-	handler: menu,
-}]);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.customEmojis,
-	icon: 'fas fa-laugh',
-	bg: 'var(--bg)',
-});
-</script>
-
-<style lang="scss" module>
-.root {
-	max-width: 1000px;
-	margin: 0 auto;
-}
-</style>
diff --git a/packages/client/src/pages/federation.vue b/packages/client/src/pages/federation.vue
deleted file mode 100644
index 28acf44f7..000000000
--- a/packages/client/src/pages/federation.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="1000">
-		<div class="taeiyria">
-			<div class="query">
-				<MkInput v-model="host" :debounce="true" class="">
-					<template #prefix><i class="fas fa-search"></i></template>
-					<template #label>{{ i18n.ts.host }}</template>
-				</MkInput>
-				<FormSplit style="margin-top: var(--margin);">
-					<MkSelect v-model="state">
-						<template #label>{{ i18n.ts.state }}</template>
-						<option value="all">{{ i18n.ts.all }}</option>
-						<option value="federating">{{ i18n.ts.federating }}</option>
-						<option value="subscribing">{{ i18n.ts.subscribing }}</option>
-						<option value="publishing">{{ i18n.ts.publishing }}</option>
-						<option value="suspended">{{ i18n.ts.suspended }}</option>
-						<option value="blocked">{{ i18n.ts.blocked }}</option>
-						<option value="notResponding">{{ i18n.ts.notResponding }}</option>
-					</MkSelect>
-					<MkSelect v-model="sort">
-						<template #label>{{ i18n.ts.sort }}</template>
-						<option value="+pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.descendingOrder }})</option>
-						<option value="-pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.ascendingOrder }})</option>
-						<option value="+notes">{{ i18n.ts.notes }} ({{ i18n.ts.descendingOrder }})</option>
-						<option value="-notes">{{ i18n.ts.notes }} ({{ i18n.ts.ascendingOrder }})</option>
-						<option value="+users">{{ i18n.ts.users }} ({{ i18n.ts.descendingOrder }})</option>
-						<option value="-users">{{ i18n.ts.users }} ({{ i18n.ts.ascendingOrder }})</option>
-						<option value="+following">{{ i18n.ts.following }} ({{ i18n.ts.descendingOrder }})</option>
-						<option value="-following">{{ i18n.ts.following }} ({{ i18n.ts.ascendingOrder }})</option>
-						<option value="+followers">{{ i18n.ts.followers }} ({{ i18n.ts.descendingOrder }})</option>
-						<option value="-followers">{{ i18n.ts.followers }} ({{ i18n.ts.ascendingOrder }})</option>
-						<option value="+caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.descendingOrder }})</option>
-						<option value="-caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.ascendingOrder }})</option>
-						<option value="+lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.descendingOrder }})</option>
-						<option value="-lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.ascendingOrder }})</option>
-					</MkSelect>
-				</FormSplit>
-			</div>
-
-			<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
-				<div class="dqokceoi">
-					<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Last communicated: ${new Date(instance.lastCommunicatedAt).toLocaleString()}\nStatus: ${getStatus(instance)}`" class="instance" :to="`/instance-info/${instance.host}`">
-						<MkInstanceCardMini :instance="instance"/>
-					</MkA>
-				</div>
-			</MkPagination>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import MkButton from '@/components/ui/button.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkPagination from '@/components/ui/pagination.vue';
-import MkInstanceCardMini from '@/components/instance-card-mini.vue';
-import FormSplit from '@/components/form/split.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let host = $ref('');
-let state = $ref('federating');
-let sort = $ref('+pubSub');
-const pagination = {
-	endpoint: 'federation/instances' as const,
-	limit: 10,
-	offsetMode: true,
-	params: computed(() => ({
-		sort,
-		host: host !== '' ? host : null,
-		...(
-			state === 'federating' ? { federating: true } :
-			state === 'subscribing' ? { subscribing: true } :
-			state === 'publishing' ? { publishing: true } :
-			state === 'suspended' ? { suspended: true } :
-			state === 'blocked' ? { blocked: true } :
-			state === 'notResponding' ? { notResponding: true } :
-			{}),
-	})),
-};
-
-function getStatus(instance) {
-	if (instance.isSuspended) return 'Suspended';
-	if (instance.isBlocked) return 'Blocked';
-	if (instance.isNotResponding) return 'Error';
-	return 'Alive';
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.federation,
-	icon: 'fas fa-globe',
-	bg: 'var(--bg)',
-});
-</script>
-
-<style lang="scss" scoped>
-.taeiyria {
-	> .query {
-		background: var(--bg);
-		margin-bottom: 16px;
-	}
-}
-
-.dqokceoi {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
-	grid-gap: 12px;
-
-	> .instance:hover {
-		text-decoration: none;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/mentions.vue b/packages/client/src/pages/mentions.vue
deleted file mode 100644
index 36720a011..000000000
--- a/packages/client/src/pages/mentions.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800">
-		<XNotes :pagination="pagination"/>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import XNotes from '@/components/notes.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const pagination = {
-	endpoint: 'notes/mentions' as const,
-	limit: 10,
-};
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.mentions,
-	icon: 'fas fa-at',
-	bg: 'var(--bg)',
-});
-</script>
diff --git a/packages/client/src/pages/messages.vue b/packages/client/src/pages/messages.vue
deleted file mode 100644
index 6ac07b165..000000000
--- a/packages/client/src/pages/messages.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800">
-		<XNotes :pagination="pagination"/>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import XNotes from '@/components/notes.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const pagination = {
-	endpoint: 'notes/mentions' as const,
-	limit: 10,
-	params: {
-		visibility: 'specified',
-	},
-};
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.directNotes,
-	icon: 'fas fa-envelope',
-	bg: 'var(--bg)',
-});
-</script>
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index c91d3bd4f..ec70851ca 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -2,8 +2,14 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
-		<div class="clupoqwt">
-			<XNotifications class="notifications" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
+		<div v-if="tab === 'all' || tab === 'unread'">
+			<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>
 	</MkSpacer>
 </MkStickyContainer>
@@ -13,12 +19,27 @@
 import { computed } from 'vue';
 import { notificationTypes } from 'foundkey-js';
 import XNotifications from '@/components/notifications.vue';
+import XNotes from '@/components/notes.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
 let tab = $ref('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) {
 	const typeItems = notificationTypes.map(t => ({
@@ -38,18 +59,18 @@ function setFilter(ev) {
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
-const headerActions = $computed(() => [{
+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',
@@ -57,6 +78,14 @@ const headerTabs = $computed(() => [{
 }, {
 	key: 'unread',
 	title: i18n.ts.unread,
+}, {
+	key: 'mentions',
+	title: i18n.ts.mentions,
+	icon: 'fas fa-at',
+}, {
+	key: 'directNotes',
+	title: i18n.ts.directNotes,
+	icon: 'fas fa-envelope',
 }]);
 
 definePageMetadata(computed(() => ({
@@ -64,8 +93,3 @@ definePageMetadata(computed(() => ({
 	icon: 'fas fa-bell',
 })));
 </script>
-
-<style lang="scss" scoped>
-.clupoqwt {
-}
-</style>
diff --git a/packages/client/src/pages/user/index.activity.vue b/packages/client/src/pages/user/index.activity.vue
index 90f1632ea..86f872e30 100644
--- a/packages/client/src/pages/user/index.activity.vue
+++ b/packages/client/src/pages/user/index.activity.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer>
-	<template #header><i class="fas fa-chart-bar" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
+	<template #header><i class="fas fa-chart-simple" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
 	<template #func>
 		<button class="_button" @click="showMenu">
 			<i class="fas fa-ellipsis-h"></i>
diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 9a9f14876..5454058fb 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -70,12 +70,6 @@ export const routes = [{
 }, {
 	path: '/explore',
 	component: page(() => import('./pages/explore.vue')),
-}, {
-	path: '/federation',
-	component: page(() => import('./pages/federation.vue')),
-}, {
-	path: '/emojis',
-	component: page(() => import('./pages/emojis.vue')),
 }, {
 	path: '/search',
 	component: page(() => import('./pages/search.vue')),
@@ -172,12 +166,6 @@ export const routes = [{
 	path: '/my/favorites',
 	component: page(() => import('./pages/favorites.vue')),
 	loginRequired: true,
-}, {
-	path: '/my/messages',
-	component: page(() => import('./pages/messages.vue')),
-}, {
-	path: '/my/mentions',
-	component: page(() => import('./pages/mentions.vue')),
 }, {
 	name: 'messaging',
 	path: '/my/messaging',

From 9e0936284cf545b09130ab1f03f8ebda9a5a79a0 Mon Sep 17 00:00:00 2001
From: Francis Dinh <normandy@biribiri.dev>
Date: Sat, 3 Sep 2022 14:29:55 -0400
Subject: [PATCH 2/8] Re-add in mentions and direct notes to menu

---
 packages/client/src/menu.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/client/src/menu.ts b/packages/client/src/menu.ts
index 2261c9180..8754cd75b 100644
--- a/packages/client/src/menu.ts
+++ b/packages/client/src/menu.ts
@@ -107,6 +107,20 @@ export const menuDef = reactive({
 			os.popupMenu(items, ev.currentTarget ?? ev.target);
 		},
 	},
+	mentions: {
+		title: 'mentions',
+		icon: 'fas fa-at',
+		show: computed(() => $i != null),
+		indicated: computed(() => $i != null && $i.hasUnreadMentions),
+		to: '/my/notifications#mentions',
+	},
+	messages: {
+		title: 'directNotes',
+		icon: 'fas fa-envelope',
+		show: computed(() => $i != null),
+		indicated: computed(() => $i != null && $i.hasUnreadSpecifiedNotes),
+		to: '/my/notifications#directNotes',
+	},
 	favorites: {
 		title: 'favorites',
 		icon: 'fas fa-star',

From f2ebf77ab1405e3b9f4edd0c5ba65fe1bee13e32 Mon Sep 17 00:00:00 2001
From: Francis Dinh <normandy@biribiri.dev>
Date: Sat, 3 Sep 2022 15:11:14 -0400
Subject: [PATCH 3/8] re-add federation and emojis to menu

---
 packages/client/src/menu.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/client/src/menu.ts b/packages/client/src/menu.ts
index 8754cd75b..cabc13eaa 100644
--- a/packages/client/src/menu.ts
+++ b/packages/client/src/menu.ts
@@ -148,6 +148,16 @@ export const menuDef = reactive({
 		icon: 'fas fa-satellite-dish',
 		to: '/channels',
 	},
+	federation: {
+		title: 'federation',
+		icon: 'fas fa-globe',
+		to: '/about#federation',
+	},
+	emojis: {
+		title: 'emojis',
+		icon: 'fas fa-laugh',
+		to: '/about#emojis',
+	},
 	ui: {
 		title: 'switchUi',
 		icon: 'fas fa-columns',

From f0ba8d187771039e5d9ba5d4b8519beb23eb3797 Mon Sep 17 00:00:00 2001
From: Francis Dinh <normandy@biribiri.dev>
Date: Sat, 3 Sep 2022 15:14:42 -0400
Subject: [PATCH 4/8] Make mentions and direct notes accessible via url
 fragments

---
 packages/client/src/pages/notifications.vue | 8 +++++++-
 packages/client/src/router.ts               | 1 +
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index ec70851ca..e75f40aa9 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -24,7 +24,13 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
-let tab = $ref('all');
+const props = withDefaults(defineProps<{
+	initialTab?: string;
+}>(), {
+	initialTab: 'all',
+});
+
+let tab = $ref(props.initialTab);
 let includeTypes = $ref<string[] | null>(null);
 let unreadOnly = $computed(() => tab === 'unread');
 
diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 5454058fb..a97282dbe 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -161,6 +161,7 @@ export const routes = [{
 }, {
 	path: '/my/notifications',
 	component: page(() => import('./pages/notifications.vue')),
+	hash: 'initialTab',
 	loginRequired: true,
 }, {
 	path: '/my/favorites',

From 6565289bd9d43fd37f1da66ec2f50326e277d201 Mon Sep 17 00:00:00 2001
From: Francis Dinh <normandy@biribiri.dev>
Date: Sat, 3 Sep 2022 15:43:37 -0400
Subject: [PATCH 5/8] Add en-US translation for document

---
 locales/en-US.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 7038dab5c..eff45c4a2 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -847,6 +847,7 @@ typeToConfirm: "Please enter {x} to confirm"
 deleteAccount: "Delete account"
 numberOfPageCache: "Number of cached pages"
 numberOfPageCacheDescription: "Increasing this number will improve convenience for users but cause more server load as well as more memory to be used."
+document: "Document"
 file: "File"
 unclip: "Unclip"
 confirmToUnclipAlreadyClippedNote: "This note is already part of the \"{name}\" clip. Do you want to remove it from this clip instead?"

From 29e3d8175f241150dd685ee92284f33e49c817bb Mon Sep 17 00:00:00 2001
From: Francis Dinh <normandy@biribiri.dev>
Date: Sat, 3 Sep 2022 17:31:14 -0400
Subject: [PATCH 6/8] make tab default to 'all' if not valid

---
 packages/client/src/pages/notifications.vue | 116 ++++++++++----------
 1 file changed, 58 insertions(+), 58 deletions(-)

diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index e75f40aa9..0c610fb42 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/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'">
-			<XNotifications class="notifications" :include-types="includeTypes" :unread-only="unreadOnly"/>
-		</div>
-		<div v-else-if="tab === 'mentions'">
+		<div v-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',

From 74ee7c84d6d289ef9f4f6da3ff9dbe3595895938 Mon Sep 17 00:00:00 2001
From: Francis Dinh <normandy@biribiri.dev>
Date: Sat, 3 Sep 2022 17:39:55 -0400
Subject: [PATCH 7/8] make defult about page tab 'overview' if invalid

---
 packages/client/src/pages/about.vue | 32 ++++++++++++++---------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index ca53f00a2..7a86b638f 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -95,22 +95,6 @@ import number from '@/filters/number';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
-const props = withDefaults(defineProps<{
-	initialTab?: string;
-}>(), {
-	initialTab: 'overview',
-});
-
-let stats = $ref(null);
-let tab = $ref(props.initialTab);
-
-const initStats = () => os.api('stats', {
-}).then((res) => {
-	stats = res;
-});
-
-const headerActions = $computed(() => []);
-
 const headerTabs = $computed(() => [{
 	key: 'overview',
 	title: i18n.ts.overview,
@@ -128,6 +112,22 @@ const headerTabs = $computed(() => [{
 	icon: 'fas fa-chart-simple',
 }]);
 
+const props = withDefaults(defineProps<{
+	initialTab?: string;
+}>(), {
+	initialTab: 'overview',
+});
+
+let stats = $ref(null);
+let tab = $ref(headerTabs.some(({ key }) => key === props.initialTab) ? props.initialTab : 'overview');
+
+const initStats = () => os.api('stats', {
+}).then((res) => {
+	stats = res;
+});
+
+const headerActions = $computed(() => []);
+
 definePageMetadata(computed(() => ({
 	title: i18n.ts.instanceInfo,
 	icon: 'fas fa-info-circle',

From 892a900aee3ac2032fa937a47f5da26969411c43 Mon Sep 17 00:00:00 2001
From: Francis Dinh <normandy@biribiri.dev>
Date: Sat, 3 Sep 2022 17:55:54 -0400
Subject: [PATCH 8/8] remove dead code

---
 packages/client/src/pages/admin/index.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index ca33c9f87..279be74aa 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -185,12 +185,10 @@ const menuDef = $computed(() => [{
 }]);
 
 const component = $computed(() => {
-	if (props.initialPage == null) return null;
 	switch (props.initialPage) {
 		case 'overview': return defineAsyncComponent(() => import('./overview.vue'));
 		case 'users': return defineAsyncComponent(() => import('./users.vue'));
 		case 'emojis': return defineAsyncComponent(() => import('./emojis.vue'));
-		//case 'federation': return defineAsyncComponent(() => import('../federation.vue'));
 		case 'queue': return defineAsyncComponent(() => import('./queue.vue'));
 		case 'files': return defineAsyncComponent(() => import('./files.vue'));
 		case 'announcements': return defineAsyncComponent(() => import('./announcements.vue'));
@@ -204,6 +202,7 @@ const component = $computed(() => {
 		case 'integrations': return defineAsyncComponent(() => import('./integrations.vue'));
 		case 'instance-block': return defineAsyncComponent(() => import('./instance-block.vue'));
 		case 'proxy-account': return defineAsyncComponent(() => import('./proxy-account.vue'));
+		default: return null;
 	}
 });