Changeable mascot

Doing this later ;)

packages/backend/src/server/web/views/base.pug

@@ -31,9 +31,6 @@ html
 		link(rel='icon' href= icon || '/favicon.ico')
 		link(rel='apple-touch-icon' href= icon || '/apple-touch-icon.png')
 		link(rel='manifest' href='/manifest.json')
-		link(rel='prefetch' href='https://xn--931a.moe/assets/info.jpg')
-		link(rel='prefetch' href='https://xn--931a.moe/assets/not-found.jpg')
-		link(rel='prefetch' href='https://xn--931a.moe/assets/error.jpg')
 		link(rel='stylesheet' href='/assets/fontawesome/css/all.css')
 		link(rel='modulepreload' href=`/assets/${clientEntry.file}`)
 

packages/client/src/components/MkNotes.vue

@@ -2,7 +2,7 @@
 <MkPagination ref="pagingComponent" :pagination="pagination">
 	<template #empty>
 		<div class="_fullinfo">
-			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+			<img src="/client-assets/mascot/info.jpg" class="_ghost"/>
 			<div>{{ i18n.ts.noNotes }}</div>
 		</div>
 	</template>

packages/client/src/components/MkNotifications.vue

@@ -2,7 +2,7 @@
 <MkPagination ref="pagingComponent" :pagination="pagination">
 	<template #empty>
 		<div class="_fullinfo">
-			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+			<img src="/client-assets/mascot/info.jpg" class="_ghost"/>
 			<div>{{ i18n.ts.noNotifications }}</div>
 		</div>
 	</template>

packages/client/src/components/MkPagination.vue

@@ -7,7 +7,7 @@
 	<div v-else-if="empty" key="_empty_" class="empty">
 		<slot name="empty">
 			<div class="_fullinfo">
-				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+				<img src="/client-assets/mascot/info.jpg" class="_ghost"/>
 				<div>{{ i18n.ts.nothing }}</div>
 			</div>
 		</slot>

packages/client/src/components/MkUserList.vue

@@ -2,7 +2,7 @@
 <MkPagination ref="pagingComponent" :pagination="pagination">
 	<template #empty>
 		<div class="_fullinfo">
-			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+			<img src="/client-assets/mascot/info.jpg" class="_ghost"/>
 			<div>{{ i18n.ts.noUsers }}</div>
 		</div>
 	</template>

packages/client/src/components/global/MkError.vue

@@ -1,7 +1,7 @@
 <template>
 <transition :name="$store.state.animation ? 'zoom' : ''" appear>
 	<div class="mjndxjcg">
-		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
+		<img src="/client-assets/mascot/error.jpg" class="_ghost"/>
 		<p><i class="fas fa-exclamation-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
 		<MkButton class="button" @click="() => $emit('retry')">{{ i18n.ts.retry }}</MkButton>
 	</div>

packages/client/src/components/global/RouterView.vue

@@ -1,5 +1,5 @@
 <template>
-<KeepAlive :max="defaultStore.state.numberOfPageCache">
+<KeepAlive :max="defaultStore.state.numberOfPageCache" v-bind="props.keepalive">
 	<Suspense>
 		<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
 
@@ -17,6 +17,7 @@ import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	router?: Router;
+	keepalive?: any;
 }>();
 
 const router = props.router ?? inject('router');

packages/client/src/pages/_error_.vue

@@ -2,7 +2,7 @@
 <MkLoading v-if="!loaded"/>
 <transition :name="$store.state.animation ? 'zoom' : ''" appear>
 	<div v-show="loaded" class="mjndxjch">
-		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
+		<img src="/client-assets/mascot/error.jpg" class="_ghost"/>
 		<p><b><i class="fas fa-exclamation-triangle"></i> {{ i18n.ts.pageLoadError }}</b></p>
 		<p v-if="meta && (version === meta.version)">{{ i18n.ts.pageLoadErrorDescription }}</p>
 		<p v-else-if="serverIsDead">{{ i18n.ts.serverIsDead }}</p>

packages/client/src/pages/favorites.vue

@@ -5,7 +5,7 @@
 		<MkPagination ref="pagingComponent" :pagination="pagination">
 			<template #empty>
 				<div class="_fullinfo">
-					<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+					<img src="/client-assets/mascot/info.jpg" class="_ghost"/>
 					<div>{{ i18n.ts.noNotes }}</div>
 				</div>
 			</template>

packages/client/src/pages/follow-requests.vue

@@ -5,7 +5,7 @@
 		<MkPagination ref="paginationComponent" :pagination="pagination">
 			<template #empty>
 				<div class="_fullinfo">
-					<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+					<img src="/client-assets/mascot/info.jpg" class="_ghost"/>
 					<div>{{ i18n.ts.noFollowRequests }}</div>
 				</div>
 			</template>

packages/client/src/pages/messaging/index.vue

@@ -33,7 +33,7 @@
 				</MkA>
 			</div>
 			<div v-if="!fetching && messages.length == 0" class="_fullinfo">
-				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+				<img src="/client-assets/mascot/info.jpg" class="_ghost"/>
 				<div>{{ $ts.noHistory }}</div>
 			</div>
 			<MkLoading v-if="fetching"/>

packages/client/src/pages/messaging/messaging-room.vue

@@ -10,7 +10,7 @@
 			<MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
 				<template #empty>
 					<div class="_fullinfo">
-						<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+						<img src="/client-assets/mascot/info.jpg" class="_ghost"/>
 						<div>{{ i18n.ts.noMessagesYet }}</div>
 					</div>
 				</template>

packages/client/src/pages/not-found.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="ipledcug">
 	<div class="_fullinfo">
-		<img src="https://xn--931a.moe/assets/not-found.jpg" class="_ghost"/>
+		<img src="/client-assets/mascot/not-found.jpg" class="_ghost"/>
 		<div>{{ i18n.ts.notFoundDescription }}</div>
 	</div>
 </div>

packages/client/src/pages/settings/apps.vue

@@ -3,7 +3,7 @@
 	<FormPagination ref="list" :pagination="pagination">
 		<template #empty>
 			<div class="_fullinfo">
-				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+				<img src="/client-assets/mascot/info.jpg" class="_ghost"/>
 				<div>{{ i18n.ts.nothing }}</div>
 			</div>
 		</template>

packages/client/src/ui/chat.vue

@@ -3,14 +3,13 @@
 	<div class="nav">
 		<header class="header">
 			<div class="left">
-				<button class="_button account" @click="openAccountMenu">
+				<button class="_button account" @click="handleAccountSwitcher">
 					<MkAvatar :user="$i" class="avatar"/><!--<MkAcct class="text" :user="$i"/>-->
 				</button>
 			</div>
 			<div class="right">
+				<MkA v-tooltip="$ts.favorites" class="item" to="/my/favorites"><i class="fas fa-star icon"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></MkA>
 				<MkA v-tooltip="$ts.messaging" class="item" to="/my/messaging"><i class="fas fa-comments icon"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></MkA>
-				<MkA v-tooltip="$ts.directNotes" class="item" to="/my/messages"><i class="fas fa-envelope icon"></i><span v-if="$i.hasUnreadSpecifiedNotes" class="indicator"><i class="fas fa-circle"></i></span></MkA>
-				<MkA v-tooltip="$ts.mentions" class="item" to="/my/mentions"><i class="fas fa-at icon"></i><span v-if="$i.hasUnreadMentions" class="indicator"><i class="fas fa-circle"></i></span></MkA>
 				<MkA v-tooltip="$ts.notifications" class="item" to="/my/notifications"><i class="fas fa-bell icon"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></MkA>
 			</div>
 		</header>
@@ -48,11 +47,6 @@
 					<MkA v-for="antenna in antennas" :key="antenna.id" :to="`/timeline/antenna/${ antenna.id }`" class="item" :class="{ active: tl === `antenna:${ antenna.id }` }"><i class="fas fa-satellite icon"></i>{{ antenna.name }}</MkA>
 				</div>
 			</div>
-			<div class="container">
-				<div class="body">
-					<MkA to="/my/favorites" class="item"><i class="fas fa-star icon"></i>{{ $ts.favorites }}</MkA>
-				</div>
-			</div>
 			<MkAd class="a" :prefer="['square']"/>
 		</div>
 		<footer class="footer">
@@ -71,13 +65,7 @@
 	</div>
 
 	<main class="main" @contextmenu.stop="onContextmenu">
-		<RouterView v-slot="{ Component }">
+		<RouterView :keepalive="{ exclude: ['timeline'] }"/>
-			<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
-				<KeepAlive :include="['timeline']">
-					<component :is="Component" class="body"/>
-				</KeepAlive>
-			</transition>
-		</RouterView>
 	</main>
 
 	<XSide ref="side" class="side" @open="sideViewOpening = true" @close="sideViewOpening = false"/>
@@ -117,7 +105,7 @@ import makeList from '@/scripts/new-list.ts';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 import { store } from './chat/store';
-import { openAccountMenu } from '@/account';
+import { openAccountMenu, $i } from '@/account';
 
 const side = ref();
 
@@ -268,6 +256,12 @@ function onContextmenu(e) {
 	}], e);
 };
 
+function handleAccountSwitcher(ev: event) {
+	return openAccountMenu({
+		withExtraOperation: true,
+	}, ev);
+}
+
 
 onMounted(() => {
 	if (window.innerWidth < 1024) {
@@ -304,7 +298,7 @@ onMounted(() => {
 }
 
 .mk-app {
-	$header-height: 54px; // TODO: どこかに集約したい
+	$header-height: 55px; // TODO: どこかに集約したい
 	$ui-font-size: 1em; // TODO: どこかに集約したい
 
 	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

packages/client/src/ui/chat/notes.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="">
 	<div v-if="empty" class="_fullinfo">
-		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+		<img src="/client-assets/mascot/info.jpg" class="_ghost"/>
 		<div>{{ $ts.noNotes }}</div>
 	</div>
 

packages/client/src/ui/chat/pages/timeline.vue

@@ -1,20 +1,21 @@
 <template>
-<div class="dbiokgaf">
+	<MkPageHeader @click="goTop()"/>
-	<div v-if="date" class="info">
+	<div class="dbiokgaf">
-		<MkInfo>{{ i18n.ts.showingPastTimeline }} <button class="_textButton clear" @click="timetravel()">{{ i18n.ts.clear }}</button></MkInfo>
+		<div v-if="date" class="info">
+			<MkInfo>{{ i18n.ts.showingPastTimeline }} <button class="_textButton clear" @click="timetravel()">{{ i18n.ts.clear }}</button></MkInfo>
+		</div>
+		<div class="top">
+			<XPostForm/>
+		</div>
+		<div ref="body" class="tl">
+			<div v-if="queue > 0" class="new" :style="{ width: width + 'px', top: top + 'px' }"><button class="_buttonPrimary" @click="goTop()">{{ i18n.ts.newNoteRecived }}</button></div>
+			<XNotes ref="tl" class="tl" :pagination="pagination" @queue="queueUpdated"/>
+		</div>
 	</div>
-	<div class="top">
-		<XPostForm/>
-	</div>
-	<div ref="body" class="tl">
-		<div v-if="queue > 0" class="new" :style="{ width: width + 'px', top: top + 'px' }"><button class="_buttonPrimary" @click="goTop()">{{ i18n.ts.newNoteRecived }}</button></div>
-		<XNotes ref="tl" class="tl" :pagination="pagination" @queue="queueUpdated"/>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, markRaw, onBeforeUnmount, ref, reactive, withDefaults } from 'vue';
+import { computed, markRaw, onBeforeUnmount, ref, reactive, withDefaults, watchEffect } from 'vue';
 import XNotes from '../notes.vue';
 import * as os from '@/os';
 import { stream } from '@/stream';
@@ -41,8 +42,6 @@ const baseQuery = {
 	includeLocalRenotes: defaultStore.state.showLocalRenotes
 };
 
-const connection = ref(null);
-const connection2 = ref(null);
 const query = reactive({});
 const queue = ref(0);
 const width = ref(0);
@@ -78,32 +77,43 @@ const onChangeFollowing = () => {
 	}
 };
 
-let endpoint;
+const connection = ref(null);
+const connection2 = ref(null);
+const endpoint = ref(null);
 
-if (props.src == 'home') {
+watchEffect((onCleanup) => {
-	endpoint = 'notes/timeline';
+	console.log(props.src, defaultStore.state.numberOfPageCache);
-	connection.value = markRaw(stream.useChannel('homeTimeline'));
+	if (props.src == 'home') {
-	connection.value.on('note', prepend);
+		endpoint.value = 'notes/timeline';
+		connection.value = markRaw(stream.useChannel('homeTimeline'));
+		connection.value.on('note', prepend);
 
-	connection2.value = markRaw(stream.useChannel('main'));
+		connection2.value = markRaw(stream.useChannel('main'));
-	connection2.value.on('follow', onChangeFollowing);
+		connection2.value.on('follow', onChangeFollowing);
-	connection2.value.on('unfollow', onChangeFollowing);
+		connection2.value.on('unfollow', onChangeFollowing);
-} else if (props.src == 'local') {
+	} else if (props.src == 'local') {
-	endpoint = 'notes/local-timeline';
+		endpoint.value = 'notes/local-timeline';
-	connection.value = markRaw(stream.useChannel('localTimeline'));
+		connection.value = markRaw(stream.useChannel('localTimeline'));
-	connection.value.on('note', prepend);
+		connection.value.on('note', prepend);
-} else if (props.src == 'social') {
+	} else if (props.src == 'social') {
-	endpoint = 'notes/hybrid-timeline';
+		endpoint.value = 'notes/hybrid-timeline';
-	connection.value = markRaw(stream.useChannel('hybridTimeline'));
+		connection.value = markRaw(stream.useChannel('hybridTimeline'));
-	connection.value.on('note', prepend);
+		connection.value.on('note', prepend);
-} else if (props.src == 'global') {
+	} else if (props.src == 'global') {
-	endpoint = 'notes/global-timeline';
+		endpoint.value = 'notes/global-timeline';
-	connection.value = markRaw(stream.useChannel('globalTimeline'));
+		connection.value = markRaw(stream.useChannel('globalTimeline'));
-	connection.value.on('note', prepend);
+		connection.value.on('note', prepend);
-}
+	}
+
+	onCleanup(() => {
+		console.log('cleaning');
+		connection.value.dispose();
+		if (connection2.value) connection2.value.dispose();
+	});
+});
 
 const pagination = computed(() => ({
-	endpoint: endpoint,
+	endpoint: endpoint.value,
 	limit: 10,
 	params: init => ({
 		untilDate: date.value?.getTime(),
@@ -112,11 +122,6 @@ const pagination = computed(() => ({
 }));
 
 
-onBeforeUnmount(() => {
-	connection.value.dispose();
-	if (connection2.value) connection2.value.dispose();
-});
-
 function focus() {
 	body.value.focus();
 };

packages/client/src/ui/chat/side.vue

@@ -104,7 +104,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .mrajymqm {
-	$header-height: 54px; // TODO: どこかに集約したい
+	$header-height: 55px; // TODO: どこかに集約したい
 
 	--root-margin: 16px;
 	--margin: var(--marginHalf);