Merge branch 'develop'

25 files changed, 165 insertions, 97 deletions

diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts
index ef7eb8f60a..4c83b78c91 100644
--- a/packages/client/src/account.ts
+++ b/packages/client/src/account.ts
@@ -1,5 +1,6 @@
 import { del, get, set } from '@/scripts/idb-proxy';
 import { reactive } from 'vue';
+import * as misskey from 'misskey-js';
 import { apiUrl } from '@/config';
 import { waiting, api, popup, popupMenu, success } from '@/os';
 import { unisonReload, reloadChannel } from '@/scripts/unison-reload';
@@ -8,13 +9,7 @@ import { i18n } from './i18n';
 
 // TODO: 他のタブと永続化されたstateを同期
 
-type Account = {
-	id: string;
-	token: string;
-	isModerator: boolean;
-	isAdmin: boolean;
-	isDeleted: boolean;
-};
+type Account = misskey.entities.MeDetailed;
 
 const data = localStorage.getItem('account');
 
diff --git a/packages/client/src/components/autocomplete.vue b/packages/client/src/components/autocomplete.vue
index c50f032a5a..30be2ac741 100644
--- a/packages/client/src/components/autocomplete.vue
+++ b/packages/client/src/components/autocomplete.vue
@@ -157,7 +157,7 @@ export default defineComponent({
 			items: [],
 			mfmTags: [],
 			select: -1,
-			zIndex: os.claimZIndex(true),
+			zIndex: os.claimZIndex('high'),
 		}
 	},
 
diff --git a/packages/client/src/components/dialog.vue b/packages/client/src/components/dialog.vue
index 90cac9b5ea..c2fa1b02b8 100644
--- a/packages/client/src/components/dialog.vue
+++ b/packages/client/src/components/dialog.vue
@@ -1,5 +1,5 @@
 <template>
-<MkModal ref="modal" :prefer-type="'dialog'" :front="true" @click="done(true)" @closed="$emit('closed')">
+<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="$emit('closed')">
 	<div class="mk-dialog">
 		<div v-if="icon" class="icon">
 			<i :class="icon"></i>
diff --git a/packages/client/src/components/emoji-picker-dialog.vue b/packages/client/src/components/emoji-picker-dialog.vue
index d2a405ef5a..51c634dd8e 100644
--- a/packages/client/src/components/emoji-picker-dialog.vue
+++ b/packages/client/src/components/emoji-picker-dialog.vue
@@ -1,5 +1,5 @@
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="asReactionPicker && $store.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'" :transparent-bg="true" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'middle'" :prefer-type="asReactionPicker && $store.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'" :transparent-bg="true" :manual-showing="manualShowing" :src="src" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
 	<MkEmojiPicker ref="picker" class="ryghynhb _popup _shadow" :class="{ drawer: type === 'drawer' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" :as-drawer="type === 'drawer'" :max-height="maxHeight" @chosen="chosen"/>
 </MkModal>
 </template>
diff --git a/packages/client/src/components/image-viewer.vue b/packages/client/src/components/image-viewer.vue
index fc28c30b56..8584b91a61 100644
--- a/packages/client/src/components/image-viewer.vue
+++ b/packages/client/src/components/image-viewer.vue
@@ -1,5 +1,5 @@
 <template>
-<MkModal ref="modal" @click="$refs.modal.close()" @closed="$emit('closed')">
+<MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')">
 	<div class="xubzgfga">
 		<header>{{ image.name }}</header>
 		<img :src="image.url" :alt="image.comment" :title="image.comment" @click="$refs.modal.close()"/>
diff --git a/packages/client/src/components/notification-toast.vue b/packages/client/src/components/notification-toast.vue
new file mode 100644
index 0000000000..5449409ccc
--- /dev/null
+++ b/packages/client/src/components/notification-toast.vue
@@ -0,0 +1,74 @@
+<template>
+<div class="mk-notification-toast" :style="{ zIndex }">
+	<transition name="notification-toast" appear @after-leave="$emit('closed')">
+		<XNotification v-if="showing" :notification="notification" class="notification _acrylic"/>
+	</transition>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import XNotification from './notification.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		XNotification
+	},
+	props: {
+		notification: {
+			type: Object,
+			required: true
+		}
+	},
+	emits: ['closed'],
+	data() {
+		return {
+			showing: true,
+			zIndex: os.claimZIndex('high'),
+		};
+	},
+	mounted() {
+		setTimeout(() => {
+			this.showing = false;
+		}, 6000);
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.notification-toast-enter-active, .notification-toast-leave-active {
+	transition: opacity 0.3s, transform 0.3s !important;
+}
+.notification-toast-enter-from, .notification-toast-leave-to {
+	opacity: 0;
+	transform: translateX(-250px);
+}
+
+.mk-notification-toast {
+	position: fixed;
+	left: 0;
+	width: 250px;
+	top: 32px;
+	padding: 0 32px;
+	pointer-events: none;
+
+	@media (max-width: 700px) {
+		top: initial;
+		bottom: 112px;
+		padding: 0 16px;
+	}
+
+	@media (max-width: 500px) {
+		bottom: 92px;
+		padding: 0 8px;
+	}
+
+	> .notification {
+		height: 100%;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+		border-radius: 8px;
+		overflow: hidden;
+	}
+}
+</style>
diff --git a/packages/client/src/components/toast.vue b/packages/client/src/components/toast.vue
index 6561ba3854..914704c527 100644
--- a/packages/client/src/components/toast.vue
+++ b/packages/client/src/components/toast.vue
@@ -1,74 +1,70 @@
 <template>
-<div class="mk-toast" :style="{ zIndex }">
-	<transition name="notification-slide" appear @after-leave="$emit('closed')">
-		<XNotification v-if="showing" :notification="notification" class="notification _acrylic"/>
+<div class="mk-toast">
+	<transition name="toast" appear @after-leave="$emit('closed')">
+		<div v-if="showing" class="body _acrylic" :style="{ zIndex }">
+			<div class="message">
+				{{ message }}
+			</div>
+		</div>
 	</transition>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import XNotification from './notification.vue';
 import * as os from '@/os';
 
 export default defineComponent({
-	components: {
-		XNotification
-	},
 	props: {
-		notification: {
-			type: Object,
-			required: true
-		}
+		message: {
+			type: String,
+			required: true,
+		},
 	},
 	emits: ['closed'],
 	data() {
 		return {
 			showing: true,
-			zIndex: os.claimZIndex(true),
+			zIndex: os.claimZIndex('high'),
 		};
 	},
 	mounted() {
 		setTimeout(() => {
 			this.showing = false;
-		}, 6000);
+		}, 4000);
 	}
 });
 </script>
 
 <style lang="scss" scoped>
-.notification-slide-enter-active, .notification-slide-leave-active {
+.toast-enter-active, .toast-leave-active {
 	transition: opacity 0.3s, transform 0.3s !important;
 }
-.notification-slide-enter-from, .notification-slide-leave-to {
+.toast-enter-from, .toast-leave-to {
 	opacity: 0;
-	transform: translateX(-250px);
+	transform: translateY(-100%);
 }
 
 .mk-toast {
-	position: fixed;
-	left: 0;
-	width: 250px;
-	top: 32px;
-	padding: 0 32px;
-	pointer-events: none;
-
-	@media (max-width: 700px) {
-		top: initial;
-		bottom: 112px;
-		padding: 0 16px;
-	}
-
-	@media (max-width: 500px) {
-		bottom: 92px;
-		padding: 0 8px;
-	}
-
-	> .notification {
-		height: 100%;
+	> .body {
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		margin: 0 auto;
+		margin-top: 16px;
+		min-width: 300px;
+		max-width: calc(100% - 32px);
+		width: min-content;
 		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 		border-radius: 8px;
-		overflow: hidden;
+		overflow: clip;
+		text-align: center;
+		pointer-events: none;
+
+		> .message {
+			padding: 16px 24px;
+		}
 	}
 }
 </style>
diff --git a/packages/client/src/components/ui/context-menu.vue b/packages/client/src/components/ui/context-menu.vue
index 0438d3323e..85606bf6d5 100644
--- a/packages/client/src/components/ui/context-menu.vue
+++ b/packages/client/src/components/ui/context-menu.vue
@@ -1,6 +1,6 @@
 <template>
 <transition :name="$store.state.animation ? 'fade' : ''" appear>
-	<div class="nvlagfpb" @contextmenu.prevent.stop="() => {}">
+	<div class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
 		<MkMenu :items="items" class="_popup _shadow" :align="'left'" @close="$emit('closed')"/>
 	</div>
 </transition>
@@ -10,6 +10,7 @@
 import { defineComponent } from 'vue';
 import contains from '@/scripts/contains';
 import MkMenu from './menu.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -29,6 +30,11 @@ export default defineComponent({
 		},
 	},
 	emits: ['closed'],
+	data() {
+		return {
+			zIndex: os.claimZIndex('high'),
+		};
+	},
 	computed: {
 		keymap(): any {
 			return {
@@ -82,7 +88,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 .nvlagfpb {
 	position: absolute;
-	z-index: 65535;
 }
 
 .fade-enter-active, .fade-leave-active {
diff --git a/packages/client/src/components/ui/menu.vue b/packages/client/src/components/ui/menu.vue
index fde199bc6b..869709cf21 100644
--- a/packages/client/src/components/ui/menu.vue
+++ b/packages/client/src/components/ui/menu.vue
@@ -280,8 +280,7 @@ export default defineComponent({
 
 	> .divider {
 		margin: 8px 0;
-		height: 1px;
-		background: var(--divider);
+		border-top: solid 0.5px var(--divider);
 	}
 
 	&.asDrawer {
diff --git a/packages/client/src/components/ui/modal.vue b/packages/client/src/components/ui/modal.vue
index 81394be63f..b09d04c450 100644
--- a/packages/client/src/components/ui/modal.vue
+++ b/packages/client/src/components/ui/modal.vue
@@ -49,10 +49,10 @@ export default defineComponent({
 			type: String,
 			default: 'auto',
 		},
-		front: {
-			type: Boolean,
+		zPriority: {
+			type: String as PropType<'low' | 'middle' | 'high'>,
 			required: false,
-			default: false,
+			default: 'low',
 		},
 		noOverlap: {
 			type: Boolean,
@@ -74,7 +74,7 @@ export default defineComponent({
 		const transformOrigin = ref('center');
 		const showing = ref(true);
 		const content = ref<HTMLElement>();
-		const zIndex = os.claimZIndex(props.front);
+		const zIndex = os.claimZIndex(props.zPriority);
 		const type = computed(() => {
 			if (props.preferType === 'auto') {
 				if (isTouchUsing && window.innerWidth < 500 && window.innerHeight < 1000) {
diff --git a/packages/client/src/components/ui/popup-menu.vue b/packages/client/src/components/ui/popup-menu.vue
index f1eedcc622..8ffc4ad195 100644
--- a/packages/client/src/components/ui/popup-menu.vue
+++ b/packages/client/src/components/ui/popup-menu.vue
@@ -1,5 +1,5 @@
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :src="src" :transparent-bg="true" @click="$refs.modal.close()" @closed="$emit('closed')">
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="$refs.modal.close()" @closed="$emit('closed')">
 	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq _popup _shadow" :class="{ drawer: type === 'drawer' }" @close="$refs.modal.close()"/>
 </MkModal>
 </template>
diff --git a/packages/client/src/components/ui/tooltip.vue b/packages/client/src/components/ui/tooltip.vue
index 90326a0ff5..2e48ab623e 100644
--- a/packages/client/src/components/ui/tooltip.vue
+++ b/packages/client/src/components/ui/tooltip.vue
@@ -34,7 +34,7 @@ export default defineComponent({
 
 	setup(props, context) {
 		const el = ref<HTMLElement>();
-		const zIndex = os.claimZIndex(true);
+		const zIndex = os.claimZIndex('high');
 
 		const setPosition = () => {
 			if (el.value == null) return;
diff --git a/packages/client/src/components/ui/window.vue b/packages/client/src/components/ui/window.vue
index 265d86acd1..d01498d8df 100644
--- a/packages/client/src/components/ui/window.vue
+++ b/packages/client/src/components/ui/window.vue
@@ -155,7 +155,7 @@ export default defineComponent({
 
 		// 最前面へ移動
 		top() {
-			(this.$el as any).style.zIndex = os.claimZIndex(this.front);
+			(this.$el as any).style.zIndex = os.claimZIndex(this.front ? 'middle' : 'low');
 		},
 
 		onBodyMousedown() {
diff --git a/packages/client/src/components/updated.vue b/packages/client/src/components/updated.vue
index c021c60669..74f54524be 100644
--- a/packages/client/src/components/updated.vue
+++ b/packages/client/src/components/updated.vue
@@ -1,5 +1,5 @@
 <template>
-<MkModal ref="modal" @click="$refs.modal.close()" @closed="$emit('closed')">
+<MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')">
 	<div class="ewlycnyt">
 		<div class="title">{{ $ts.misskeyUpdated }}</div>
 		<div class="version">✨{{ version }}🚀</div>
diff --git a/packages/client/src/components/url-preview-popup.vue b/packages/client/src/components/url-preview-popup.vue
index 75c5bca7dd..c345bafcf9 100644
--- a/packages/client/src/components/url-preview-popup.vue
+++ b/packages/client/src/components/url-preview-popup.vue
@@ -35,7 +35,7 @@ export default defineComponent({
 			u: null,
 			top: 0,
 			left: 0,
-			zIndex: os.claimZIndex(),
+			zIndex: os.claimZIndex('middle'),
 		};
 	},
 
diff --git a/packages/client/src/components/user-preview.vue b/packages/client/src/components/user-preview.vue
index 9b3f15b61f..f85a32fbe7 100644
--- a/packages/client/src/components/user-preview.vue
+++ b/packages/client/src/components/user-preview.vue
@@ -65,7 +65,7 @@ export default defineComponent({
 			fetched: false,
 			top: 0,
 			left: 0,
-			zIndex: os.claimZIndex(),
+			zIndex: os.claimZIndex('middle'),
 		};
 	},
 
diff --git a/packages/client/src/components/visibility-picker.vue b/packages/client/src/components/visibility-picker.vue
index c75202d958..4200f4354e 100644
--- a/packages/client/src/components/visibility-picker.vue
+++ b/packages/client/src/components/visibility-picker.vue
@@ -1,5 +1,5 @@
 <template>
-<MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
+<MkModal ref="modal" :z-priority="'high'" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
 	<div class="gqyayizv _popup">
 		<button key="public" class="_button" :class="{ active: v == 'public' }" data-index="1" @click="choose('public')">
 			<div><i class="fas fa-globe"></i></div>
diff --git a/packages/client/src/components/waiting-dialog.vue b/packages/client/src/components/waiting-dialog.vue
index e9ca3b33b9..10aedbd8f6 100644
--- a/packages/client/src/components/waiting-dialog.vue
+++ b/packages/client/src/components/waiting-dialog.vue
@@ -1,5 +1,5 @@
 <template>
-<MkModal ref="modal" :prefer-type="'dialog'" @click="success ? done() : () => {}" @closed="$emit('closed')">
+<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="$emit('closed')">
 	<div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
 		<i v-if="success" class="fas fa-check icon success"></i>
 		<i v-else class="fas fa-spinner fa-pulse icon waiting"></i>
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index f0368cc1d7..82a1e169ce 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -26,7 +26,7 @@ import { router } from '@/router';
 import { applyTheme } from '@/scripts/theme';
 import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
 import { i18n } from '@/i18n';
-import { stream, confirm, alert, post, popup } from '@/os';
+import { stream, confirm, alert, post, popup, toast } from '@/os';
 import * as sound from '@/scripts/sound';
 import { $i, refreshAccount, login, updateAccount, signout } from '@/account';
 import { defaultStore, ColdDeviceStorage } from '@/store';
@@ -342,6 +342,18 @@ if ($i) {
 		});
 	}
 
+	const lastUsed = localStorage.getItem('lastUsed');
+	if (lastUsed) {
+		const lastUsedDate = parseInt(lastUsed, 10);
+		// 二時間以上前なら
+		if (Date.now() - lastUsedDate > 1000 * 60 * 60 * 2) {
+			toast(i18n.t('welcomeBackWithName', {
+				name: $i.name || $i.username,
+			}));
+		}
+	}
+	localStorage.setItem('lastUsed', Date.now().toString());
+
 	if ('Notification' in window) {
 		// 許可を得ていなかったらリクエスト
 		if (Notification.permission === 'default') {
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index 404fe24d8f..4ed69e0ec0 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -162,16 +162,14 @@ export const popups = ref([]) as Ref<{
 	props: Record<string, any>;
 }[]>;
 
-let popupZIndex = 1000000;
-let popupZIndexForFront = 2000000;
-export function claimZIndex(front = false): number {
-	if (front) {
-		popupZIndexForFront += 100;
-		return popupZIndexForFront;
-	} else {
-		popupZIndex += 100;
-		return popupZIndex;
-	}
+const zIndexes = {
+	low: 1000000,
+	middle: 2000000,
+	high: 3000000,
+};
+export function claimZIndex(priority: 'low' | 'middle' | 'high' = 'low'): number {
+	zIndexes[priority] += 100;
+	return zIndexes[priority];
 }
 
 export async function popup(component: Component | typeof import('*.vue') | Promise<Component | typeof import('*.vue')>, props: Record<string, any>, events = {}, disposeEvent?: string) {
@@ -223,7 +221,9 @@ export function modalPageWindow(path: string) {
 }
 
 export function toast(message: string) {
-	// TODO
+	popup(import('@/components/toast.vue'), {
+		message
+	}, {}, 'closed');
 }
 
 export function alert(props: {
diff --git a/packages/client/src/pages/emojis.emoji.vue b/packages/client/src/pages/emojis.emoji.vue
index 4ca7c15742..5dab72daea 100644
--- a/packages/client/src/pages/emojis.emoji.vue
+++ b/packages/client/src/pages/emojis.emoji.vue
@@ -12,7 +12,6 @@
 import { defineComponent } from 'vue';
 import * as os from '@/os';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
-import VanillaTilt from 'vanilla-tilt';
 
 export default defineComponent({
 	props: {
@@ -22,17 +21,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		if (this.$store.animation) {
-			VanillaTilt.init(this.$el, {
-				reverse: true,
-				gyroscope: false,
-				scale: 1.1,
-				speed: 500,
-			});
-		}
-	},
-
 	methods: {
 		menu(ev) {
 			os.popupMenu([{
@@ -59,8 +47,6 @@ export default defineComponent({
 	text-align: left;
 	background: var(--panel);
 	border-radius: 8px;
-	transform-style: preserve-3d;
-	transform: perspective(1000px);
 
 	&:hover {
 		border-color: var(--accent);
@@ -69,14 +55,12 @@ export default defineComponent({
 	> .img {
 		width: 42px;
 		height: 42px;
-		transform: translateZ(20px);
 	}
 
 	> .body {
 		padding: 0 0 0 8px;
 		white-space: nowrap;
 		overflow: hidden;
-		transform: translateZ(10px);
 
 		> .name {
 			text-overflow: ellipsis;
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index 1df61ac471..0d4db46936 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -30,7 +30,10 @@
 		<option :value="3">{{ $ts.large }}</option>
 	</FormRadios>
 
-	<FormSwitch v-model="reactionPickerUseDrawerForMobile" class="_formBlock">{{ $ts.useDrawerReactionPickerForMobile }}</FormSwitch>
+	<FormSwitch v-model="reactionPickerUseDrawerForMobile" class="_formBlock">
+		{{ $ts.useDrawerReactionPickerForMobile }}
+		<template #caption>{{ $ts.needReloadToApply }}</template>
+	</FormSwitch>
 
 	<FormSection>
 		<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue
index 4f93cf5e77..956ec556c1 100644
--- a/packages/client/src/ui/_common_/common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -34,7 +34,7 @@ export default defineComponent({
 					id: notification.id
 				});
 
-				popup(import('@/components/toast.vue'), {
+				popup(import('@/components/notification-toast.vue'), {
 					notification
 				}, {}, 'closed');
 			}
@@ -60,7 +60,7 @@ export default defineComponent({
 #wait {
 	display: block;
 	position: fixed;
-	z-index: 3000000;
+	z-index: 4000000;
 	top: 15px;
 	right: 15px;
 
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index 09d1529e7a..a1c5dcdecc 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -25,7 +25,7 @@ export default defineComponent({
 	data() {
 		return {
 			uploads: os.uploads,
-			zIndex: os.claimZIndex(true),
+			zIndex: os.claimZIndex('high'),
 		};
 	},
 });
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index e1b2887bb2..73dc83180f 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -82,7 +82,7 @@ export default defineComponent({
 		});
 
 		const columns = deckStore.reactiveState.columns;
-		const layout = deckStore.reactiveState.layout.value;
+		const layout = deckStore.reactiveState.layout;
 		const menuIndicated = computed(() => {
 			if ($i == null) return false;
 			for (const def in menuDef) {