Merge branch 'develop' into sw-notification-action

src/client/components/date-separated-list.vue

@@ -48,15 +48,7 @@ export default defineComponent({
 	render() {
 		if (this.items.length === 0) return;
 
-		return h(this.$store.state.animation ? TransitionGroup : 'div', this.$store.state.animation ? {
-			class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
-			name: 'list',
-			tag: 'div',
-			'data-direction': this.direction,
-			'data-reversed': this.reversed ? 'true' : 'false',
-		} : {
-			class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
-		}, this.items.map((item, i) => {
+		const renderChildren = () => this.items.map((item, i) => {
 			const el = this.$slots.default({
 				item: item
 			})[0];
@@ -98,7 +90,19 @@ export default defineComponent({
 					return el;
 				}
 			}
-		}));
+		});
+
+		return h(this.$store.state.animation ? TransitionGroup : 'div', this.$store.state.animation ? {
+			class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
+			name: 'list',
+			tag: 'div',
+			'data-direction': this.direction,
+			'data-reversed': this.reversed ? 'true' : 'false',
+		} : {
+			class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
+		}, {
+			default: renderChildren
+		});
 	},
 });
 </script>

src/client/components/drive.file.vue

@@ -114,7 +114,7 @@ export default defineComponent({
 			if (this.selectMode) {
 				this.$emit('chosen', this.file);
 			} else {
-				os.modalMenu(this.getMenu(), ev.currentTarget || ev.target);
+				os.popupMenu(this.getMenu(), ev.currentTarget || ev.target);
 			}
 		},
 

src/client/components/drive.vue

@@ -629,7 +629,7 @@ export default defineComponent({
 		},
 
 		showMenu(ev) {
-			os.modalMenu(this.getMenu(), ev.currentTarget || ev.target);
+			os.popupMenu(this.getMenu(), ev.currentTarget || ev.target);
 		},
 
 		onContextmenu(ev) {

src/client/components/emoji-picker-dialog.vue

@@ -1,17 +1,17 @@
 <template>
-<MkModal ref="modal" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
-	<MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
-</MkModal>
+<MkPopup ref="popup" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.popup.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')" #default="{point}">
+	<MkEmojiPicker class="ryghynhb _popup _shadow" :class="{ pointer: point === 'top' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
+</MkPopup>
 </template>
 
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
-import MkModal from '@client/components/ui/modal.vue';
+import MkPopup from '@client/components/ui/popup.vue';
 import MkEmojiPicker from '@client/components/emoji-picker.vue';
 
 export default defineComponent({
 	components: {
-		MkModal,
+		MkPopup,
 		MkEmojiPicker,
 	},
 
@@ -33,7 +33,7 @@ export default defineComponent({
 		},
 	},
 
-	emits: ['done', 'closed'],
+	emits: ['done', 'close', 'closed'],
 
 	data() {
 		return {
@@ -44,7 +44,7 @@ export default defineComponent({
 	methods: {
 		chosen(emoji: any) {
 			this.$emit('done', emoji);
-			this.$refs.modal.close();
+			this.$refs.popup.close();
 		},
 
 		opening() {
@@ -56,145 +56,20 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.omfetrab {
-	$pad: 8px;
-	--eachSize: 40px;
-
-	display: flex;
-	flex-direction: column;
-	contain: content;
-
-	&.big {
-		--eachSize: 44px;
-	}
-
-	&.w1 {
-		width: calc((var(--eachSize) * 5) + (#{$pad} * 2));
-	}
-
-	&.w2 {
-		width: calc((var(--eachSize) * 6) + (#{$pad} * 2));
-	}
-
-	&.w3 {
-		width: calc((var(--eachSize) * 7) + (#{$pad} * 2));
-	}
-
-	&.h1 {
-		--height: calc((var(--eachSize) * 4) + (#{$pad} * 2));
-	}
-
-	&.h2 {
-		--height: calc((var(--eachSize) * 6) + (#{$pad} * 2));
-	}
-
-	&.h3 {
-		--height: calc((var(--eachSize) * 8) + (#{$pad} * 2));
-	}
-
-	> .search {
-		width: 100%;
-		padding: 12px;
-		box-sizing: border-box;
-		font-size: 1em;
-		outline: none;
-		border: none;
-		background: transparent;
-		color: var(--fg);
-
-		&:not(.filled) {
-			order: 1;
-			z-index: 2;
-			box-shadow: 0px -1px 0 0px var(--divider);
-		}
-	}
-
-	> .emojis {
-		height: var(--height);
-		overflow-y: auto;
-		overflow-x: hidden;
-
-		scrollbar-width: none;
-
-		&::-webkit-scrollbar {
-			display: none;
-		}
-
-		> .index {
-			min-height: var(--height);
-			position: relative;
-			border-bottom: solid 0.5px var(--divider);
-				
-			> .arrow {
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				width: 100%;
-				padding: 16px 0;
-				text-align: center;
-				opacity: 0.5;
-				pointer-events: none;
-			}
-		}
-
-		section {
-			> header {
-				position: sticky;
-				top: 0;
-				left: 0;
-				z-index: 1;
-				padding: 8px;
-				font-size: 12px;
-			}
-
-			> div {
-				padding: $pad;
-
-				> button {
-					position: relative;
-					padding: 0;
-					width: var(--eachSize);
-					height: var(--eachSize);
-					border-radius: 4px;
-
-					&:focus {
-						outline: solid 2px var(--focus);
-						z-index: 1;
-					}
-
-					&:hover {
-						background: rgba(0, 0, 0, 0.05);
-					}
-
-					&:active {
-						background: var(--accent);
-						box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
-					}
-
-					> * {
-						font-size: 24px;
-						height: 1.25em;
-						vertical-align: -.25em;
-						pointer-events: none;
-					}
-				}
-			}
-
-			&.result {
-				border-bottom: solid 0.5px var(--divider);
-
-				&:empty {
-					display: none;
-				}
-			}
-
-			&.unicode {
-				min-height: 384px;
-			}
-
-			&.custom {
-				min-height: 64px;
-			}
+.ryghynhb {
+	&.pointer {
+		&:before {
+			--size: 8px;
+			content: '';
+			display: block;
+			position: absolute;
+			top: calc(0px - (var(--size) * 2));
+			left: 0;
+			right: 0;
+			width: 0;
+			margin: auto;
+			border: solid var(--size) transparent;
+			border-bottom-color: var(--popup);
 		}
 	}
 }

src/client/components/emoji-picker.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="omfetrab _popup" :class="['w' + width, 'h' + height, { big }]">
+<div class="omfetrab" :class="['w' + width, 'h' + height, { big }]">
 	<input ref="search" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" v-model.trim="q" :placeholder="$ts.search" @paste.stop="paste" @keyup.enter="done()">
 	<div class="emojis" ref="emojis">
 		<section class="result">
@@ -346,7 +346,6 @@ export default defineComponent({
 
 	display: flex;
 	flex-direction: column;
-	contain: content;
 
 	&.big {
 		--eachSize: 44px;

src/client/components/form/form.scss

@@ -32,8 +32,8 @@
 	margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1);
 	padding: 8px calc(var(--formContentHMargin) + var(--formXPadding)) 8px calc(var(--formContentHMargin) + var(--formXPadding));
 	background: var(--X17);
-	-webkit-backdrop-filter: blur(10px);
-	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: var(--blur, blur(10px));
+	backdrop-filter: var(--blur, blur(10px));
 }
 
 ._themeChanging_ ._formLabel {

src/client/components/modal-page-window.vue

@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
-	<div class="hrmcaedk _popup _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
+	<div class="hrmcaedk _window _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
 		<div class="header" @contextmenu="onContextmenu">
 			<span class="title">
 				<XHeader :info="pageInfo" :back-button="history.length > 0" @back="back()" :close-button="true" @close="$refs.modal.close()"/>

src/client/components/note-detailed.vue

@@ -454,7 +454,7 @@ export default defineComponent({
 		renote(viaKeyboard = false) {
 			pleaseLogin();
 			this.blur();
-			os.modalMenu([{
+			os.popupMenu([{
 				text: this.$ts.renote,
 				icon: 'fas fa-retweet',
 				action: () => {
@@ -743,14 +743,14 @@ export default defineComponent({
 		},
 
 		menu(viaKeyboard = false) {
-			os.modalMenu(this.getMenu(), this.$refs.menuButton, {
+			os.popupMenu(this.getMenu(), this.$refs.menuButton, {
 				viaKeyboard
 			}).then(this.focus);
 		},
 
 		showRenoteMenu(viaKeyboard = false) {
 			if (!this.isMyRenote) return;
-			os.modalMenu([{
+			os.popupMenu([{
 				text: this.$ts.unrenote,
 				icon: 'fas fa-trash-alt',
 				danger: true,
@@ -794,7 +794,7 @@ export default defineComponent({
 
 		async clip() {
 			const clips = await os.api('clips/list');
-			os.modalMenu([{
+			os.popupMenu([{
 				icon: 'fas fa-plus',
 				text: this.$ts.createNew,
 				action: async () => {

src/client/components/note.vue

@@ -429,7 +429,7 @@ export default defineComponent({
 		renote(viaKeyboard = false) {
 			pleaseLogin();
 			this.blur();
-			os.modalMenu([{
+			os.popupMenu([{
 				text: this.$ts.renote,
 				icon: 'fas fa-retweet',
 				action: () => {
@@ -718,14 +718,14 @@ export default defineComponent({
 		},
 
 		menu(viaKeyboard = false) {
-			os.modalMenu(this.getMenu(), this.$refs.menuButton, {
+			os.popupMenu(this.getMenu(), this.$refs.menuButton, {
 				viaKeyboard
 			}).then(this.focus);
 		},
 
 		showRenoteMenu(viaKeyboard = false) {
 			if (!this.isMyRenote) return;
-			os.modalMenu([{
+			os.popupMenu([{
 				text: this.$ts.unrenote,
 				icon: 'fas fa-trash-alt',
 				danger: true,
@@ -769,7 +769,7 @@ export default defineComponent({
 
 		async clip() {
 			const clips = await os.api('clips/list');
-			os.modalMenu([{
+			os.popupMenu([{
 				icon: 'fas fa-plus',
 				text: this.$ts.createNew,
 				action: async () => {

src/client/components/poll-editor.vue

@@ -5,8 +5,7 @@
 	</p>
 	<ul ref="choices">
 		<li v-for="(choice, i) in choices" :key="i">
-			<MkInput class="input" :model-value="choice" @update:modelValue="onInput(i, $event)">
-				<template #label>{{ $t('_poll.choiceN', { n: i + 1 }) }}</template>
+			<MkInput class="input" :model-value="choice" @update:modelValue="onInput(i, $event)" :placeholder="$t('_poll.choiceN', { n: i + 1 })">
 			</MkInput>
 			<button @click="remove(i)" class="_button">
 				<i class="fas fa-times"></i>

src/client/components/post-form-attaches.vue

@@ -112,7 +112,7 @@ export default defineComponent({
 
 		showFileMenu(file, ev: MouseEvent) {
 			if (this.menu) return;
-			this.menu = os.modalMenu([{
+			this.menu = os.popupMenu([{
 				text: this.$ts.renameFile,
 				icon: 'fas fa-i-cursor',
 				action: () => { this.rename(file) }

src/client/components/post-form.vue

@@ -45,7 +45,7 @@
 			<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><i class="fas fa-poll-h"></i></button>
 			<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$ts.useCw"><i class="fas fa-eye-slash"></i></button>
 			<button class="_button" @click="insertMention" v-tooltip="$ts.mention"><i class="fas fa-at"></i></button>
-			<button class="_button" @click="withHashtags = !withHashtags" v-tooltip="$ts.hashtags"><i class="fas fa-hashtag"></i></button>
+			<button class="_button" @click="withHashtags = !withHashtags" :class="{ active: withHashtags }" v-tooltip="$ts.hashtags"><i class="fas fa-hashtag"></i></button>
 			<button class="_button" @click="insertEmoji" v-tooltip="$ts.emoji"><i class="fas fa-laugh-squint"></i></button>
 			<button class="_button" @click="showActions" v-tooltip="$ts.plugin" v-if="postFormActions.length > 0"><i class="fas fa-plug"></i></button>
 		</footer>
@@ -641,7 +641,7 @@ export default defineComponent({
 				viaMobile: isMobile
 			};
 
-			if (this.withHashtags) {
+			if (this.withHashtags && this.hashtags && this.hashtags.trim() !== '') {
 				const hashtags = this.hashtags.trim().split(' ').map(x => x.startsWith('#') ? x : '#' + x).join(' ');
 				data.text = data.text ? `${data.text} ${hashtags}` : hashtags;
 			}
@@ -690,7 +690,7 @@ export default defineComponent({
 		},
 
 		showActions(ev) {
-			os.modalMenu(postFormActions.map(action => ({
+			os.popupMenu(postFormActions.map(action => ({
 				text: action.title,
 				action: () => {
 					action.handler({

src/client/components/reactions-viewer.reaction.vue

@@ -170,7 +170,7 @@ export default defineComponent({
 		}
 
 		> span {
-			color: #fff;
+			color: var(--fgOnAccent);
 		}
 	}
 

src/client/components/sample.vue

@@ -93,7 +93,7 @@ export default defineComponent({
 		},
 
 		async openMenu(ev) {
-			os.modalMenu([{
+			os.popupMenu([{
 				type: 'label',
 				text: 'Fruits'
 			}, {

src/client/components/signin.vue

@@ -3,13 +3,11 @@
 	<div class="auth _section">
 		<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
 		<div class="normal-signin" v-if="!totpLogin">
-			<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange">
-				<template #label>{{ $ts.username }}</template>
+			<MkInput v-model="username" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange">
 				<template #prefix>@</template>
 				<template #suffix>@{{ host }}</template>
 			</MkInput>
-			<MkInput v-model="password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
-				<template #label>{{ $ts.password }}</template>
+			<MkInput v-model="password" :placeholder="$ts.password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
 				<template #prefix><i class="fas fa-lock"></i></template>
 				<template #caption><button class="_textButton" @click="resetPassword" type="button">{{ $ts.forgotPassword }}</button></template>
 			</MkInput>

src/client/components/ui/button.vue

@@ -115,7 +115,7 @@ export default defineComponent({
 	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
 	display: block;
 	min-width: 100px;
-	width: min-content;
+	width: max-content;
 	padding: 8px 14px;
 	text-align: center;
 	font-weight: normal;
@@ -127,6 +127,7 @@ export default defineComponent({
 	border-radius: 999px;
 	overflow: hidden;
 	box-sizing: border-box;
+	transition: background 0.1s ease;
 
 	&:not(:disabled):hover {
 		background: var(--buttonHoverBg);
@@ -142,7 +143,7 @@ export default defineComponent({
 
 	&.primary {
 		font-weight: bold;
-		color: #fff !important;
+		color: var(--fgOnAccent) !important;
 		background: var(--accent);
 
 		&:not(:disabled):hover {
@@ -176,17 +177,8 @@ export default defineComponent({
 	}
 
 	&:focus {
-		&:after {
-			content: "";
-			pointer-events: none;
-			position: absolute;
-			top: -5px;
-			right: -5px;
-			bottom: -5px;
-			left: -5px;
-			border: 2px solid var(--accentAlpha03);
-			border-radius: 10px;
-		}
+		outline: solid 2px var(--focus);
+		outline-offset: 2px;
 	}
 
 	&.inline + .bghgjjyj {

src/client/components/ui/folder.vue

@@ -102,8 +102,8 @@ export default defineComponent({
 		background: var(--panel);
 		/* TODO panelの半透明バージョンをプログラマティックに作りたい
 		background: var(--X17);
-		-webkit-backdrop-filter: blur(8px);
-		backdrop-filter: blur(20px);
+		-webkit-backdrop-filter: var(--blur, blur(8px));
+		backdrop-filter: var(--blur, blur(20px));
 		*/
 
 		> .title {

src/client/components/ui/input.vue

@@ -210,8 +210,7 @@ export default defineComponent({
 
 	> .label {
 		font-size: 0.85em;
-		padding: 0 0 6px 6px;
-		font-weight: bold;
+		padding: 0 0 8px 12px;
 		user-select: none;
 
 		&:empty {
@@ -221,7 +220,7 @@ export default defineComponent({
 
 	> .caption {
 		font-size: 0.8em;
-		padding: 6px 0 0 6px;
+		padding: 8px 0 0 12px;
 		color: var(--fgTransparentWeak);
 
 		&:empty {
@@ -251,6 +250,7 @@ export default defineComponent({
 			outline: none;
 			box-shadow: none;
 			box-sizing: border-box;
+			transition: border-color 0.1s ease-out;
 
 			&:hover {
 				border-color: var(--inputBorderHover);

src/client/components/ui/menu.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="rrevdjwt" :class="{ left: align === 'left' }"
+<div class="rrevdjwt" :class="{ left: align === 'left', pointer: point === 'top' }"
 	ref="items"
 	@contextmenu.self="e => e.preventDefault()"
 	v-hotkey="keymap"
@@ -58,7 +58,11 @@ export default defineComponent({
 		align: {
 			type: String,
 			requried: false
-		}
+		},
+		point: {
+			type: String,
+			requried: false
+		},
 	},
 	emits: ['close'],
 	data() {
@@ -137,6 +141,22 @@ export default defineComponent({
 .rrevdjwt {
 	padding: 8px 0;
 
+	&.pointer {
+		&:before {
+			--size: 8px;
+			content: '';
+			display: block;
+			position: absolute;
+			top: calc(0px - (var(--size) * 2));
+			left: 0;
+			right: 0;
+			width: 0;
+			margin: auto;
+			border: solid var(--size) transparent;
+			border-bottom-color: var(--popup);
+		}
+	}
+
 	&.left {
 		> .item {
 			text-align: left;
@@ -171,13 +191,13 @@ export default defineComponent({
 		}
 
 		&:hover {
-			color: #fff;
+			color: var(--fgOnAccent);
 			background: var(--accent);
 			text-decoration: none;
 		}
 
 		&:active {
-			color: #fff;
+			color: var(--fgOnAccent);
 			background: var(--accentDarken);
 		}
 

src/client/components/ui/modal-window.vue

@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
-	<div class="ebkgoccj _popup _narrow_" @keydown="onKeydown" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) :  (height ? `min(${height}px, 100%)` : '100%') }">
+	<div class="ebkgoccj _window _narrow_" @keydown="onKeydown" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) :  (height ? `min(${height}px, 100%)` : '100%') }">
 		<div class="header">
 			<button class="_button" v-if="withOkButton" @click="$emit('close')"><i class="fas fa-times"></i></button>
 			<span class="title">

src/client/components/ui/popup-menu.vue

@@ -1,19 +1,20 @@
 <template>
-<MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
-	<MkMenu :items="items" :align="align" @close="$refs.modal.close()" class="_popup"/>
-</MkModal>
+<MkPopup ref="popup" :src="src" @closed="$emit('closed')" #default="{point}">
+	<MkMenu :items="items" :align="align" :point="point" @close="$refs.popup.close()" class="_popup _shadow"/>
+</MkPopup>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import MkModal from './modal.vue';
+import MkPopup from './popup.vue';
 import MkMenu from './menu.vue';
 
 export default defineComponent({
 	components: {
-		MkModal,
+		MkPopup,
 		MkMenu,
 	},
+
 	props: {
 		items: {
 			type: Array,
@@ -31,17 +32,7 @@ export default defineComponent({
 			required: false
 		},
 	},
-	emits: ['closed'],
-	computed: {
-		keymap(): any {
-			return {
-				'esc': () => this.$refs.modal.close(),
-			};
-		},
-	},
+
+	emits: ['close', 'closed'],
 });
 </script>
-
-<style lang="scss" scoped>
-
-</style>

src/client/components/ui/popup.vue

@@ -0,0 +1,216 @@
+<template>
+<transition :name="$store.state.animation ? 'popup-menu' : ''" :duration="$store.state.animation ? 300 : 0" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
+	<div v-show="manualShowing != null ? manualShowing : showing" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" ref="content" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
+		<slot :point="point"></slot>
+	</div>
+</transition>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+function getFixedContainer(el: Element | null): Element | null {
+	if (el == null || el.tagName === 'BODY') return null;
+	const position = window.getComputedStyle(el).getPropertyValue('position');
+	if (position === 'fixed') {
+		return el;
+	} else {
+		return getFixedContainer(el.parentElement);
+	}
+}
+
+export default defineComponent({
+	props: {
+		manualShowing: {
+			type: Boolean,
+			required: false,
+			default: null,
+		},
+		srcCenter: {
+			type: Boolean,
+			required: false
+		},
+		src: {
+			type: Object as PropType<HTMLElement>,
+			required: false,
+		},
+		position: {
+			required: false
+		},
+		front: {
+			type: Boolean,
+			required: false,
+			default: false,
+		}
+	},
+
+	emits: ['opening', 'click', 'esc', 'close', 'closed'],
+
+	data() {
+		return {
+			showing: true,
+			fixed: false,
+			transformOrigin: 'center',
+			contentClicking: false,
+			point: null,
+		};
+	},
+
+	mounted() {
+		this.$watch('src', () => {
+			if (this.src) {
+				this.src.style.pointerEvents = 'none';
+			}
+			this.fixed = getFixedContainer(this.src) != null;
+			this.$nextTick(() => {
+				this.align();
+			});
+		}, { immediate: true });
+
+		this.$nextTick(() => {
+			const popover = this.$refs.content as any;
+			new ResizeObserver((entries, observer) => {
+				this.align();
+			}).observe(popover);
+		});
+
+		document.addEventListener('mousedown', this.onDocumentClick, { passive: true });
+	},
+
+	beforeUnmount() {
+		document.removeEventListener('mousedown', this.onDocumentClick);
+	},
+
+	methods: {
+		align() {
+			if (this.src == null) return;
+
+			const popover = this.$refs.content as any;
+
+			if (popover == null) return;
+
+			const rect = this.src.getBoundingClientRect();
+			
+			const width = popover.offsetWidth;
+			const height = popover.offsetHeight;
+
+			let left;
+			let top;
+
+			if (this.srcCenter) {
+				const x = rect.left + (this.fixed ? 0 : window.pageXOffset) + (this.src.offsetWidth / 2);
+				const y = rect.top + (this.fixed ? 0 : window.pageYOffset) + (this.src.offsetHeight / 2);
+				left = (x - (width / 2));
+				top = (y - (height / 2));
+			} else {
+				const x = rect.left + (this.fixed ? 0 : window.pageXOffset) + (this.src.offsetWidth / 2);
+				const y = rect.top + (this.fixed ? 0 : window.pageYOffset) + this.src.offsetHeight;
+				left = (x - (width / 2));
+				top = y;
+			}
+
+			if (this.fixed) {
+				if (left + width > window.innerWidth) {
+					left = window.innerWidth - width;
+				}
+
+				if (top + height > window.innerHeight) {
+					top = window.innerHeight - height;
+				}
+			} else {
+				if (left + width - window.pageXOffset > window.innerWidth) {
+					left = window.innerWidth - width + window.pageXOffset - 1;
+				}
+
+				if (top + height - window.pageYOffset > window.innerHeight) {
+					top = window.innerHeight - height + window.pageYOffset - 1;
+				}
+			}
+
+			if (top < 0) {
+				top = 0;
+			}
+
+			if (left < 0) {
+				left = 0;
+			}
+
+			if (top > rect.top + (this.fixed ? 0 : window.pageYOffset)) {
+				this.point = 'top';
+				this.transformOrigin = 'center top';
+			} else {
+				this.point = null;
+				this.transformOrigin = 'center';
+			}
+
+			popover.style.left = left + 'px';
+			popover.style.top = top + 'px';
+		},
+
+		childRendered() {
+			// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
+			const content = this.$refs.content.children[0];
+			content.addEventListener('mousedown', e => {
+				this.contentClicking = true;
+				window.addEventListener('mouseup', e => {
+					// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
+					setTimeout(() => {
+						this.contentClicking = false;
+					}, 100);
+				}, { passive: true, once: true });
+			}, { passive: true });
+		},
+
+		close() {
+			if (this.src) this.src.style.pointerEvents = 'auto';
+			this.showing = false;
+			this.$emit('close');
+		},
+
+		onClosed() {
+			this.$emit('closed');
+		},
+
+		onDocumentClick(ev) {
+			const flyoutElement = this.$refs.content;
+			let targetElement = ev.target;
+			do {
+				if (targetElement === flyoutElement) {
+					return;
+				}
+				targetElement = targetElement.parentNode;
+			} while (targetElement);
+			this.close();
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.popup-menu-enter-active {
+	transform-origin: var(--transformOrigin);
+	transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
+}
+.popup-menu-leave-active {
+	transform-origin: var(--transformOrigin);
+	transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.2s cubic-bezier(0.4, 0, 1, 1) !important;
+}
+.popup-menu-enter-from, .popup-menu-leave-to {
+	pointer-events: none;
+	opacity: 0;
+	transform: scale(0.9);
+}
+
+.ccczpooj {
+	position: absolute;
+	z-index: 10000;
+
+	&.fixed {
+		position: fixed;
+	}
+
+	&.front {
+		z-index: 20000;
+	}
+}
+</style>

src/client/components/ui/select.vue

@@ -155,8 +155,7 @@ export default defineComponent({
 
 	> .label {
 		font-size: 0.85em;
-		padding: 0 0 6px 6px;
-		font-weight: bold;
+		padding: 0 0 8px 12px;
 		user-select: none;
 
 		&:empty {
@@ -166,7 +165,7 @@ export default defineComponent({
 
 	> .caption {
 		font-size: 0.8em;
-		padding: 6px 0 0 6px;
+		padding: 8px 0 0 12px;
 		color: var(--fgTransparentWeak);
 
 		&:empty {
@@ -197,6 +196,7 @@ export default defineComponent({
 			box-shadow: none;
 			box-sizing: border-box;
 			cursor: pointer;
+			transition: border-color 0.1s ease-out;
 
 			&:hover {
 				border-color: var(--inputBorderHover);

src/client/components/ui/textarea.vue

@@ -176,8 +176,7 @@ export default defineComponent({
 
 	> .label {
 		font-size: 0.85em;
-		padding: 0 0 6px 6px;
-		font-weight: bold;
+		padding: 0 0 8px 12px;
 		user-select: none;
 
 		&:empty {
@@ -187,7 +186,7 @@ export default defineComponent({
 
 	> .caption {
 		font-size: 0.8em;
-		padding: 6px 0 0 6px;
+		padding: 8px 0 0 12px;
 		color: var(--fgTransparentWeak);
 
 		&:empty {
@@ -218,6 +217,7 @@ export default defineComponent({
 			outline: none;
 			box-shadow: none;
 			box-sizing: border-box;
+			transition: border-color 0.1s ease-out;
 
 			&:hover {
 				border-color: var(--inputBorderHover);

src/client/components/ui/window.vue

@@ -1,7 +1,7 @@
 <template>
 <transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
 	<div class="ebkgocck" :class="{ front }" v-if="showing">
-		<div class="body _popup _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
+		<div class="body _window _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
 			<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
 				<button v-if="closeButton" class="_button" @click="close()"><i class="fas fa-times"></i></button>
 
@@ -416,6 +416,7 @@ export default defineComponent({
 			flex-shrink: 0;
 			user-select: none;
 			height: var(--height);
+			border-bottom: solid 1px var(--divider);
 
 			> ::v-deep(button) {
 				height: var(--height);

src/client/components/widgets.vue

@@ -18,12 +18,12 @@
 				<div class="customize-container">
 					<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="fas fa-cog"></i></button>
 					<button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="fas fa-times"></i></button>
-					<component :is="`mkw-${element.name}`" :widget="element" :setting-callback="setting => settings[element.id] = setting" :column="column" @updateProps="updateWidget(element.id, $event)"/>
+					<component :is="`mkw-${element.name}`" :widget="element" :setting-callback="setting => settings[element.id] = setting" @updateProps="updateWidget(element.id, $event)"/>
 				</div>
 			</template>
 		</XDraggable>
 	</template>
-	<component v-else class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :column="column" @updateProps="updateWidget(widget.id, $event)"/>
+	<component v-else class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" @updateProps="updateWidget(widget.id, $event)"/>
 </div>
 </template>
 

src/client/init.ts

@@ -272,6 +272,14 @@ watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
 	document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
 }, { immediate: true });
 
+watch(defaultStore.reactiveState.useBlurEffect, v => {
+	if (v) {
+		document.documentElement.style.removeProperty('--blur');
+	} else {
+		document.documentElement.style.setProperty('--blur', 'none');
+	}
+}, { immediate: true });
+
 let reloadDialogShowing = false;
 stream.on('_disconnected_', async () => {
 	if (defaultStore.state.serverDisconnectedBehavior === 'reload') {

src/client/menu.ts

@@ -143,7 +143,7 @@ export const menuDef = {
 		title: 'switchUi',
 		icon: 'fas fa-columns',
 		action: (ev) => {
-			os.modalMenu([{
+			os.popupMenu([{
 				text: i18n.locale.default,
 				action: () => {
 					localStorage.setItem('ui', 'default');

src/client/os.ts

@@ -368,10 +368,10 @@ export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea:
 	});
 }
 
-export function modalMenu(items: any[], src?: HTMLElement, options?: { align?: string; viaKeyboard?: boolean }) {
+export function popupMenu(items: any[], src?: HTMLElement, options?: { align?: string; viaKeyboard?: boolean }) {
 	return new Promise((resolve, reject) => {
 		let dispose;
-		popup(import('@client/components/ui/modal-menu.vue'), {
+		popup(import('@client/components/ui/popup-menu.vue'), {
 			items,
 			src,
 			align: options?.align,

src/client/pages/about-misskey.vue

@@ -68,40 +68,58 @@ import * as symbols from '@client/symbols';
 const patrons = [
 	'Satsuki Yanagi',
 	'noellabo',
-	'Gargron',
-	'Atsuko Tominaga',
+	'mametsuko',
 	'AureoleArk',
+	'Gargron',
+	'Nokotaro Takeda',
+	'Suji Yan',
+	'Hekovic',
+	'Gitmo Life Services',
+	'nenohi',
 	'naga_rus',
 	'Melilot',
-	'Hekovic',
-	'Nokotaro Takeda',
-	'dansup',
-	'nenohi',
-	'motcha',
-	'nanami kan',
-	'Eduardo Quiros',
-	'Peter G.',
-	'YUKIMOCHI',
 	'Efertone',
-	'makokunsan',
+	'oi_yekssim',
+	'nanami kan',
+	'motcha',
+	'dansup',
+	'Quinton Macejkovic',
+	'YUKIMOCHI',
 	'mewl hayabusa',
+	'makokunsan',
+	'Peter G.',
+	'Nesakko',
+	'regtan',
 	'見当かなみ',
 	'natalie',
+	'Jerry',
 	'takimura',
 	'sikyosyounin',
-	'weepjp',
-	'mydarkstar',
-	'Nesakko',
+	'YuzuRyo61',
 	'sheeta.s',
 	'osapon',
-	'YuzuRyo61',
-	'wara',
 	'mkatze',
-	'kiritan',
 	'CG',
+	'nafuchoco',
+	'Takumi Sugita',
+	'chidori ninokura',
+	'mydarkstar',
+	'kiritan',
+	'kabo2468y',
+	'weepjp',
+	'Liaizon Wakest',
+	'Steffen K9',
+	'Roujo',
+	'uroco @99',
+	'totokoro',
+	'public_yusuke',
+	'wara',
+	'S Y',
 	'Denshi',
 	'Osushimaru',
-	'Liaizon Wakest',
+	'吴浥',
+	'DignifiedSilence',
+	't_w',
 ];
 
 export default defineComponent({

src/client/pages/advanced-theme-editor.vue

@@ -272,7 +272,7 @@ export default defineComponent({
 	
 		showTypeMenu(e: MouseEvent) {
 			return new Promise<ThemeValue>((resolve) => {
-				os.modalMenu([{
+				os.popupMenu([{
 					text: this.$ts._theme.defaultValue,
 					action: () => resolve(null),
 				}, {

src/client/pages/channel.vue

@@ -152,8 +152,8 @@ export default defineComponent({
 		left: 0;
 		width: 100%;
 		height: 100%;
-		-webkit-backdrop-filter: blur(16px);
-		backdrop-filter: blur(16px);
+		-webkit-backdrop-filter: var(--blur, blur(16px));
+		backdrop-filter: var(--blur, blur(16px));
 		background: rgba(0, 0, 0, 0.3);
 	}
 

src/client/pages/clip.vue

@@ -79,7 +79,7 @@ export default defineComponent({
 
 	methods: {
 		menu(ev) {
-			os.modalMenu([this.isOwned ? {
+			os.popupMenu([this.isOwned ? {
 				icon: 'fas fa-pencil-alt',
 				text: this.$ts.edit,
 				action: async () => {

src/client/pages/doc.vue

@@ -5,6 +5,7 @@
 		<div class="body" v-html="body"></div>
 		<div class="footer">
 			<MkLink :url="`https://github.com/misskey-dev/misskey/blob/master/src/docs/${lang}/${doc}.md`" class="at">{{ $ts.docSource }}</MkLink>
+			<p v-if="lang !== 'ja-JP'">{{ $ts.translateWarn }}</p>
 		</div>
 	</div>
 </div>
@@ -115,7 +116,7 @@ export default defineComponent({
 	line-height: 1.5;
 
 	&.max-width_500px {
-		padding: 16px;
+		padding: 24px;
 	}
 
 	> .main {

src/client/pages/emojis.vue

@@ -80,7 +80,7 @@ export default defineComponent({
 
 	methods: {
 		menu(emoji, ev) {
-			os.modalMenu([{
+			os.popupMenu([{
 				type: 'label',
 				text: ':' + emoji.name + ':',
 			}, {

src/client/pages/federation.vue

@@ -228,6 +228,7 @@ export default defineComponent({
 		> .footer {
 			display: flex;
 			align-items: center;
+			font-size: 0.9em;
 
 			> .status {
 				&.suspended {
@@ -249,7 +250,6 @@ export default defineComponent({
 
 			> .right {
 				margin-left: auto;
-				font-size: 0.9em;
 
 				> .latestStatus {
 					border: solid 1px var(--divider);

src/client/pages/instance-info.vue

@@ -14,6 +14,8 @@
 			</FormKeyValueView>
 		</FormGroup>
 
+		<FormButton v-if="$i.isAdmin || $i.isModerator" @click="info" primary>{{ $ts.settings }}</FormButton>
+
 		<FormTextarea readonly :value="instance.description">
 			<span>{{ $ts.description }}</span>
 		</FormTextarea>
@@ -147,6 +149,7 @@ import * as os from '@client/os';
 import number from '@client/filters/number';
 import bytes from '@client/filters/bytes';
 import * as symbols from '@client/symbols';
+import MkInstanceInfo from '@client/pages/instance/instance.vue';
 
 const chartLimit = 90;
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
@@ -440,6 +443,12 @@ export default defineComponent({
 				}]
 			};
 		},
+
+		info() {
+			os.popup(MkInstanceInfo, {
+				instance: this.instance
+			}, {}, 'closed');
+		}
 	}
 });
 </script>

src/client/pages/instance/emojis.vue

@@ -146,7 +146,7 @@ export default defineComponent({
 		},
 
 		remoteMenu(emoji, ev) {
-			os.modalMenu([{
+			os.popupMenu([{
 				type: 'label',
 				text: ':' + emoji.name + ':',
 			}, {

src/client/pages/instance/index.vue

@@ -167,7 +167,7 @@ export default defineComponent({
 		};
 
 		const lookup = (ev) => {
-			os.modalMenu([{
+			os.popupMenu([{
 				text: i18n.locale.user,
 				icon: 'fas fa-user',
 				action: () => {

src/client/pages/messaging/index.vue

@@ -116,7 +116,7 @@ export default defineComponent({
 		},
 
 		start(ev) {
-			os.modalMenu([{
+			os.popupMenu([{
 				text: this.$ts.messagingWithUser,
 				icon: 'fas fa-user',
 				action: () => { this.startUser() }

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

@@ -320,7 +320,7 @@ const Component = defineComponent({
 		menu(ev) {
 			const path = this.groupId ? `/my/messaging/group/${this.groupId}` : `/my/messaging/${this.userAcct}`;
 
-			os.modalMenu([this.inWindow ? undefined : {
+			os.popupMenu([this.inWindow ? undefined : {
 				text: this.$ts.openInWindow,
 				icon: 'fas fa-window-maximize',
 				action: () => {

src/client/pages/mfm-cheat-sheet.vue

@@ -333,8 +333,8 @@ export default defineComponent({
 			top: var(--stickyTop, 0px);
 			padding: 16px;
 			font-weight: bold;
-			-webkit-backdrop-filter: blur(10px);
-			backdrop-filter: blur(10px);
+			-webkit-backdrop-filter: var(--blur, blur(10px));
+			backdrop-filter: var(--blur, blur(10px));
 			background-color: var(--X16);
 		}
 

src/client/pages/my-lists/index.vue

@@ -1,11 +1,12 @@
 <template>
-<div class="qkcjvfiv _section">
+<div class="qkcjvfiv">
 	<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
 
 	<MkPagination :pagination="pagination" #default="{items}" class="lists _content" ref="list">
-		<div class="list _panel" v-for="(list, i) in items" :key="list.id">
-			<MkA :to="`/my/lists/${ list.id }`">{{ list.name }}</MkA>
-		</div>
+		<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
+			<div class="name">{{ list.name }}</div>
+			<MkAvatars :user-ids="list.userIds"/>
+		</MkA>
 	</MkPagination>
 </div>
 </template>
@@ -14,6 +15,7 @@
 import { defineComponent } from 'vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
+import MkAvatars from '@client/components/avatars.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
@@ -21,6 +23,7 @@ export default defineComponent({
 	components: {
 		MkPagination,
 		MkButton,
+		MkAvatars,
 	},
 
 	data() {
@@ -57,14 +60,27 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .qkcjvfiv {
+	padding: 16px;
+
 	> .add {
 		margin: 0 auto var(--margin) auto;
 	}
 
 	> .lists {
 		> .list {
-			display: flex;
+			display: block;
 			padding: 16px;
+			border: solid 1px var(--divider);
+			border-radius: 6px;
+
+			&:hover {
+				border: solid 1px var(--accent);
+				text-decoration: none;
+			}
+
+			> .name {
+				margin-bottom: 4px;
+			}
 		}
 	}
 }

src/client/pages/settings/accounts.vue

@@ -64,7 +64,7 @@ export default defineComponent({
 
 	methods: {
 		menu(account, ev) {
-			os.modalMenu([{
+			os.popupMenu([{
 				text: this.$ts.switch,
 				icon: 'fas fa-exchange-alt',
 				action: () => this.switchAccount(account),
@@ -77,7 +77,7 @@ export default defineComponent({
 		},
 
 		addAccount(ev) {
-			os.modalMenu([{
+			os.popupMenu([{
 				text: this.$ts.existingAccount,
 				action: () => { this.addExistingAccount(); },
 			}, {

src/client/pages/settings/general.vue

@@ -33,6 +33,7 @@
 		<template #label>{{ $ts.appearance }}</template>
 		<FormSwitch v-model:value="disableAnimatedMfm">{{ $ts.disableAnimatedMfm }}</FormSwitch>
 		<FormSwitch v-model:value="reduceAnimation">{{ $ts.reduceUiAnimation }}</FormSwitch>
+		<FormSwitch v-model:value="useBlurEffect">{{ $ts.useBlurEffect }}</FormSwitch>
 		<FormSwitch v-model:value="useBlurEffectForModal">{{ $ts.useBlurEffectForModal }}</FormSwitch>
 		<FormSwitch v-model:value="showGapBetweenNotesInTimeline">{{ $ts.showGapBetweenNotesInTimeline }}</FormSwitch>
 		<FormSwitch v-model:value="loadRawImages">{{ $ts.loadRawImages }}</FormSwitch>
@@ -132,6 +133,7 @@ export default defineComponent({
 		serverDisconnectedBehavior: defaultStore.makeGetterSetter('serverDisconnectedBehavior'),
 		reduceAnimation: defaultStore.makeGetterSetter('animation', v => !v, v => !v),
 		useBlurEffectForModal: defaultStore.makeGetterSetter('useBlurEffectForModal'),
+		useBlurEffect: defaultStore.makeGetterSetter('useBlurEffect'),
 		showGapBetweenNotesInTimeline: defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'),
 		disableAnimatedMfm: defaultStore.makeGetterSetter('animatedMfm', v => !v, v => !v),
 		useOsNativeEmojis: defaultStore.makeGetterSetter('useOsNativeEmojis'),

src/client/pages/settings/reaction.vue

@@ -94,7 +94,7 @@ export default defineComponent({
 		},
 
 		remove(reaction, ev) {
-			os.modalMenu([{
+			os.popupMenu([{
 				text: this.$ts.remove,
 				action: () => {
 					this.reactions = this.reactions.filter(x => x !== reaction)

src/client/pages/timeline.vue

@@ -147,7 +147,7 @@ export default defineComponent({
 					this.saveSrc();
 				}
 			}));
-			os.modalMenu(items, ev.currentTarget || ev.target);
+			os.popupMenu(items, ev.currentTarget || ev.target);
 		},
 
 		async chooseAntenna(ev) {
@@ -161,7 +161,7 @@ export default defineComponent({
 					this.saveSrc();
 				}
 			}));
-			os.modalMenu(items, ev.currentTarget || ev.target);
+			os.popupMenu(items, ev.currentTarget || ev.target);
 		},
 
 		async chooseChannel(ev) {
@@ -177,7 +177,7 @@ export default defineComponent({
 					this.$router.push(`/channels/${channel.id}`);
 				}
 			}));
-			os.modalMenu(items, ev.currentTarget || ev.target);
+			os.popupMenu(items, ev.currentTarget || ev.target);
 		},
 
 		saveSrc() {

src/client/pages/user/index.vue

@@ -338,7 +338,7 @@ export default defineComponent({
 		},
 
 		menu(ev) {
-			os.modalMenu(getUserMenu(this.user), ev.currentTarget || ev.target);
+			os.popupMenu(getUserMenu(this.user), ev.currentTarget || ev.target);
 		},
 
 		parallaxLoop() {
@@ -613,8 +613,8 @@ export default defineComponent({
 					position: absolute;
 					top: 12px;
 					right: 12px;
-					-webkit-backdrop-filter: blur(8px);
-					backdrop-filter: blur(8px);
+					-webkit-backdrop-filter: var(--blur, blur(8px));
+					backdrop-filter: var(--blur, blur(8px));
 					background: rgba(0, 0, 0, 0.2);
 					padding: 8px;
 					border-radius: 24px;

src/client/pages/welcome.entrance.a.vue

@@ -117,7 +117,7 @@ export default defineComponent({
 		},
 
 		showMenu(ev) {
-			os.modalMenu([{
+			os.popupMenu([{
 				text: this.$t('aboutX', { x: instanceName }),
 				icon: 'fas fa-info-circle',
 				action: () => {
@@ -260,6 +260,7 @@ export default defineComponent({
 					display: block;
 					margin: 0;
 					padding: 32px 32px 24px 32px;
+					font-size: 1.5em;
 
 					> .logo {
 						vertical-align: bottom;

src/client/pages/welcome.entrance.b.vue

@@ -101,7 +101,7 @@ export default defineComponent({
 		},
 
 		showMenu(ev) {
-			os.modalMenu([{
+			os.popupMenu([{
 				text: this.$t('aboutX', { x: instanceName }),
 				icon: 'fas fa-info-circle',
 				action: () => {

src/client/pages/welcome.entrance.c.vue

@@ -121,7 +121,7 @@ export default defineComponent({
 		},
 
 		showMenu(ev) {
-			os.modalMenu([{
+			os.popupMenu([{
 				text: this.$t('aboutX', { x: instanceName }),
 				icon: 'fas fa-info-circle',
 				action: () => {

src/client/scripts/paging.ts

@@ -201,7 +201,11 @@ export default (opts) => ({
 				if (isBottom) {
 					// オーバーフローしたら古いアイテムは捨てる
 					if (this.items.length >= opts.displayLimit) {
-						this.items = this.items.slice(-opts.displayLimit);
+						// このやり方だとVue 3.2以降アニメーションが動かなくなる
+						//this.items = this.items.slice(-opts.displayLimit);
+						while (this.items.length >= opts.displayLimit) {
+							this.items.shift();
+						}
 						this.more = true;
 					}
 				}
@@ -216,7 +220,11 @@ export default (opts) => ({
 
 					// オーバーフローしたら古いアイテムは捨てる
 					if (this.items.length >= opts.displayLimit) {
-						this.items = this.items.slice(0, opts.displayLimit);
+						// このやり方だとVue 3.2以降アニメーションが動かなくなる
+						//this.items = this.items.slice(0, opts.displayLimit);
+						while (this.items.length >= opts.displayLimit) {
+							this.items.pop();
+						}
 						this.more = true;
 					}
 				} else {

src/client/scripts/select-file.ts

@@ -69,7 +69,7 @@ export function selectFile(src: any, label: string | null, multiple = false) {
 			});
 		};
 
-		os.modalMenu([label ? {
+		os.popupMenu([label ? {
 			text: label,
 			type: 'label'
 		} : undefined, {

src/client/scripts/theme.ts

@@ -23,6 +23,7 @@ export const builtinThemes = [
 	require('@client/themes/d-dark.json5'),
 	require('@client/themes/d-persimmon.json5'),
 	require('@client/themes/d-astro.json5'),
+	require('@client/themes/d-future.json5'),
 	require('@client/themes/d-black.json5'),
 ] as Theme[];
 

src/client/store.ts

@@ -142,6 +142,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true
 	},
+	useBlurEffect: {
+		where: 'device',
+		default: false
+	},
 	showFixedPostForm: {
 		where: 'device',
 		default: false

src/client/style.scss

@@ -189,7 +189,7 @@ hr {
 
 ._buttonPrimary {
 	@extend ._button;
-	color: #fff;
+	color: var(--fgOnAccent);
 	background: var(--accent);
 
 	&:not(:disabled):hover {
@@ -318,12 +318,18 @@ hr {
 	}
 }
 
-._popup {
+._window {
 	background: var(--panel);
 	border-radius: var(--radius);
 	contain: content;
 }
 
+._popup {
+	background: var(--popup);
+	border-radius: var(--radius);
+	contain: layout; // ふき出しがボックスから飛び出て表示されるようなデザインをする場合もあるので paint は contain することができない
+}
+
 ._root {
 	box-sizing: border-box;
 	margin: var(--root-margin, 32px) auto;
@@ -398,8 +404,8 @@ hr {
 
 ._acrylic {
 	background: var(--acrylicPanel);
-	-webkit-backdrop-filter: blur(15px);
-	backdrop-filter: blur(15px);
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
 }
 
 ._inputSplit {

src/client/themes/_dark.json5

@@ -19,6 +19,7 @@
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		fgTransparent: ':alpha<0.5<@fg',
 		fgHighlighted: ':lighten<3<@fg',
+		fgOnAccent: '#fff',
 		divider: 'rgba(255, 255, 255, 0.1)',
 		indicator: '@accent',
 		panel: ':lighten<3<@bg',
@@ -28,6 +29,7 @@
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--divider)',
 		acrylicPanel: ':alpha<0.5<@panel',
+		popup: ':lighten<3<@panel',
 		shadow: 'rgba(0, 0, 0, 0.3)',
 		header: ':alpha<0.7<@panel',
 		navBg: '@panel',

src/client/themes/_light.json5

@@ -19,6 +19,7 @@
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		fgTransparent: ':alpha<0.5<@fg',
 		fgHighlighted: ':darken<3<@fg',
+		fgOnAccent: '#fff',
 		divider: 'rgba(0, 0, 0, 0.1)',
 		indicator: '@accent',
 		panel: ':lighten<3<@bg',
@@ -28,6 +29,7 @@
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--divider)',
 		acrylicPanel: ':alpha<0.5<@panel',
+		popup: ':lighten<3<@panel',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: ':alpha<0.7<@panel',
 		navBg: '@panel',

src/client/themes/d-future.json5

@@ -0,0 +1,25 @@
+{
+	id: '32a637ef-b47a-4775-bb7b-bacbb823f865',
+
+	name: 'Mi Future',
+	author: 'syuilo',
+
+	base: 'dark',
+
+	props: {
+		accent: '#63e2b7',
+		bg: '#101014',
+		fg: '#D5D5D6',
+		fgHighlighted: '#fff',
+		fgOnAccent: '#000',
+		divider: 'rgba(255, 255, 255, 0.1)',
+		panel: '#18181c',
+		panelHeaderBg: '@panel',
+		panelHeaderDivider: '@divider',
+		renote: '@accent',
+		mention: '#f2c97d',
+		mentionMe: '@accent',
+		hashtag: '#70c0e8',
+		link: '#e88080',
+	},
+}

src/client/ui/_common_/header.vue

@@ -31,7 +31,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { modalMenu } from '@client/os';
+import { popupMenu } from '@client/os';
 import { url } from '@client/config';
 
 export default defineComponent({
@@ -121,7 +121,7 @@ export default defineComponent({
 				if (menu.length > 0) menu.push(null);
 				menu = menu.concat(this.menu);
 			}
-			modalMenu(menu, ev.currentTarget || ev.target);
+			popupMenu(menu, ev.currentTarget || ev.target);
 		}
 	}
 });

src/client/ui/_common_/sidebar.vue

@@ -150,7 +150,7 @@ export default defineComponent({
 				});
 			}));
 
-			os.modalMenu([...[{
+			os.popupMenu([...[{
 				type: 'link',
 				text: this.$ts.profile,
 				to: `/@${ this.$i.username }`,
@@ -159,7 +159,7 @@ export default defineComponent({
 				icon: 'fas fa-plus',
 				text: this.$ts.addAccount,
 				action: () => {
-					os.modalMenu([{
+					os.popupMenu([{
 						text: this.$ts.existingAccount,
 						action: () => { this.addAccount(); },
 					}, {
@@ -374,8 +374,8 @@ export default defineComponent({
 					padding-top: 8px;
 					padding-bottom: 8px;
 					background: var(--X14);
-					-webkit-backdrop-filter: blur(8px);
-					backdrop-filter: blur(8px);
+					-webkit-backdrop-filter: var(--blur, blur(8px));
+					backdrop-filter: var(--blur, blur(8px));
 				}
 
 				&:first-child {

src/client/ui/chat/index.vue

@@ -55,7 +55,7 @@
 					<MkA to="/my/favorites" class="item"><i class="fas fa-star icon"></i>{{ $ts.favorites }}</MkA>
 				</div>
 			</div>
-			<MkAd class="a" prefer="square"/>
+			<MkAd class="a" :prefer="['square']"/>
 		</div>
 		<footer class="footer">
 			<div class="left">
@@ -373,8 +373,8 @@ export default defineComponent({
 					position: sticky;
 					top: 0;
 					background: var(--X17);
-					-webkit-backdrop-filter: blur(8px);
-					backdrop-filter: blur(8px);
+					-webkit-backdrop-filter: var(--blur, blur(8px));
+					backdrop-filter: var(--blur, blur(8px));
 					z-index: 1;
 					color: var(--fgTransparentWeak);
 

src/client/ui/chat/note.vue

@@ -432,7 +432,7 @@ export default defineComponent({
 			pleaseLogin();
 			this.operating = true;
 			this.blur();
-			os.modalMenu([{
+			os.popupMenu([{
 				text: this.$ts.renote,
 				icon: 'fas fa-retweet',
 				action: () => {
@@ -726,7 +726,7 @@ export default defineComponent({
 
 		menu(viaKeyboard = false) {
 			this.operating = true;
-			os.modalMenu(this.getMenu(), this.$refs.menuButton, {
+			os.popupMenu(this.getMenu(), this.$refs.menuButton, {
 				viaKeyboard
 			}).then(() => {
 				this.operating = false;
@@ -736,7 +736,7 @@ export default defineComponent({
 
 		showRenoteMenu(viaKeyboard = false) {
 			if (!this.isMyRenote) return;
-			os.modalMenu([{
+			os.popupMenu([{
 				text: this.$ts.unrenote,
 				icon: 'fas fa-trash-alt',
 				danger: true,
@@ -780,7 +780,7 @@ export default defineComponent({
 
 		async clip() {
 			const clips = await os.api('clips/list');
-			os.modalMenu([{
+			os.popupMenu([{
 				icon: 'fas fa-plus',
 				text: this.$ts.createNew,
 				action: async () => {

src/client/ui/chat/pages/channel.vue

@@ -178,7 +178,7 @@ export default defineComponent({
 		},
 
 		openChannelMenu(ev) {
-			os.modalMenu([{
+			os.popupMenu([{
 				text: this.$ts.copyUrl,
 				icon: 'fas fa-link',
 				action: () => {

src/client/ui/chat/post-form.vue

@@ -593,7 +593,7 @@ export default defineComponent({
 		},
 
 		showActions(ev) {
-			os.modalMenu(postFormActions.map(action => ({
+			os.popupMenu(postFormActions.map(action => ({
 				text: action.title,
 				action: () => {
 					action.handler({

src/client/ui/chat/side.vue

@@ -130,8 +130,8 @@ export default defineComponent({
 		width: 100%;
 		font-weight: bold;
 		//background-color: var(--panel);
-		-webkit-backdrop-filter: blur(32px);
-		backdrop-filter: blur(32px);
+		-webkit-backdrop-filter: var(--blur, blur(32px));
+		backdrop-filter: var(--blur, blur(32px));
 		background-color: var(--header);
 		border-bottom: solid 0.5px var(--divider);
 		box-sizing: border-box;

src/client/ui/deck/column.vue

@@ -305,8 +305,8 @@ export default defineComponent({
 
 	&.naked {
 		background: var(--acrylicBg) !important;
-		-webkit-backdrop-filter: blur(10px);
-		backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: var(--blur, blur(10px));
+		backdrop-filter: var(--blur, blur(10px));
 
 		> header {
 			background: transparent;

src/client/ui/default.header.vue

@@ -116,7 +116,7 @@ export default defineComponent({
 				});
 			}));
 
-			os.modalMenu([...[{
+			os.popupMenu([...[{
 				type: 'link',
 				text: this.$ts.profile,
 				to: `/@${ this.$i.username }`,
@@ -125,7 +125,7 @@ export default defineComponent({
 				icon: 'fas fa-plus',
 				text: this.$ts.addAccount,
 				action: () => {
-					os.modalMenu([{
+					os.popupMenu([{
 						text: this.$ts.existingAccount,
 						action: () => { this.addAccount(); },
 					}, {

src/client/ui/default.side.vue

@@ -138,8 +138,8 @@ export default defineComponent({
 			text-align: center;
 			font-weight: bold;
 			//background-color: var(--panel);
-			-webkit-backdrop-filter: blur(32px);
-			backdrop-filter: blur(32px);
+			-webkit-backdrop-filter: var(--blur, blur(32px));
+			backdrop-filter: var(--blur, blur(32px));
 			background-color: var(--header);
 
 			> ._button {

src/client/ui/default.sidebar.vue

@@ -136,7 +136,7 @@ export default defineComponent({
 				});
 			}));
 
-			os.modalMenu([...[{
+			os.popupMenu([...[{
 				type: 'link',
 				text: this.$ts.profile,
 				to: `/@${ this.$i.username }`,
@@ -145,7 +145,7 @@ export default defineComponent({
 				icon: 'fas fa-plus',
 				text: this.$ts.addAccount,
 				action: () => {
-					os.modalMenu([{
+					os.popupMenu([{
 						text: this.$ts.existingAccount,
 						action: () => { this.addAccount(); },
 					}, {

src/client/ui/default.vue

@@ -12,7 +12,7 @@
 			</div>
 		</template>
 
-		<main class="main _panel" @contextmenu.stop="onContextmenu">
+		<main class="main" @contextmenu.stop="onContextmenu">
 			<header class="header" @click="onHeaderClick">
 				<XHeader :info="pageInfo" :back-button="true" @back="back()"/>
 			</header>
@@ -240,7 +240,7 @@ export default defineComponent({
 
 	&.wallpaper {
 		background: var(--wallpaperOverlay);
-		//backdrop-filter: blur(4px);
+		//backdrop-filter: var(--blur, blur(4px));
 	}
 
 	&.isMobile {
@@ -292,7 +292,10 @@ export default defineComponent({
 			width: 750px;
 			margin: 0 16px 0 0;
 			background: var(--panel);
+			border-left: solid 1px var(--divider);
+			border-right: solid 1px var(--divider);
 			border-radius: 0;
+			overflow: clip;
 			--margin: 12px;
 
 			> .header {
@@ -300,8 +303,8 @@ export default defineComponent({
 				z-index: 1000;
 				top: var(--globalHeaderHeight, 0px);
 				height: $header-height;
-				-webkit-backdrop-filter: blur(32px);
-				backdrop-filter: blur(32px);
+				-webkit-backdrop-filter: var(--blur, blur(32px));
+				backdrop-filter: var(--blur, blur(32px));
 				background-color: var(--header);
 				border-bottom: solid 0.5px var(--divider);
 			}
@@ -343,6 +346,7 @@ export default defineComponent({
 
 			> .main {
 				margin-top: 0;
+				border: solid 1px var(--divider);
 				border-radius: var(--radius);
 			}
 
@@ -376,8 +380,8 @@ export default defineComponent({
 		display: flex;
 		width: 100%;
 		box-sizing: border-box;
-		-webkit-backdrop-filter: blur(32px);
-		backdrop-filter: blur(32px);
+		-webkit-backdrop-filter: var(--blur, blur(32px));
+		backdrop-filter: var(--blur, blur(32px));
 		background-color: var(--header);
 		border-top: solid 0.5px var(--divider);
 

src/client/ui/default.widgets.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="ddiqwdnk">
 	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
-	<MkAd class="a" prefer="square"/>
+	<MkAd class="a" :prefer="['square']"/>
 
 	<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
 	<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>

src/client/ui/universal.vue

@@ -250,7 +250,7 @@ export default defineComponent({
 
 	&.wallpaper {
 		background: var(--wallpaperOverlay);
-		//backdrop-filter: blur(4px);
+		//backdrop-filter: var(--blur, blur(4px));
 	}
 
 	> .contents {
@@ -269,8 +269,8 @@ export default defineComponent({
 			text-align: center;
 			font-weight: bold;
 			//background-color: var(--panel);
-			-webkit-backdrop-filter: blur(32px);
-			backdrop-filter: blur(32px);
+			-webkit-backdrop-filter: var(--blur, blur(32px));
+			backdrop-filter: var(--blur, blur(32px));
 			background-color: var(--header);
 			//border-bottom: solid 0.5px var(--divider);
 			user-select: none;
@@ -341,8 +341,8 @@ export default defineComponent({
 		display: flex;
 		width: 100%;
 		box-sizing: border-box;
-		-webkit-backdrop-filter: blur(32px);
-		backdrop-filter: blur(32px);
+		-webkit-backdrop-filter: var(--blur, blur(32px));
+		backdrop-filter: var(--blur, blur(32px));
 		background-color: var(--header);
 
 		&:not(.navHidden) {

src/client/ui/visitor/header.vue

@@ -90,8 +90,8 @@ export default defineComponent({
 	left: 0;
 	z-index: 1000;
 	line-height: $height;
-	-webkit-backdrop-filter: blur(32px);
-	backdrop-filter: blur(32px);
+	-webkit-backdrop-filter: var(--blur, blur(32px));
+	backdrop-filter: var(--blur, blur(32px));
 	background-color: var(--X16);
 
 	> .wide {

src/client/ui/visitor/kanban.vue

@@ -122,8 +122,8 @@ export default defineComponent({
 		background: rgba(0, 0, 0, 0.3);
 
 		&.transparent {
-			-webkit-backdrop-filter: blur(12px);
-			backdrop-filter: blur(12px);
+			-webkit-backdrop-filter: var(--blur, blur(12px));
+			backdrop-filter: var(--blur, blur(12px));
 		}
 	}
 
@@ -140,8 +140,8 @@ export default defineComponent({
 			margin: 0 auto;
 
 			> .panel {
-				-webkit-backdrop-filter: blur(8px);
-				backdrop-filter: blur(8px);
+				-webkit-backdrop-filter: var(--blur, blur(8px));
+				backdrop-filter: var(--blur, blur(8px));
 				background: rgba(0, 0, 0, 0.5);
 				border-radius: var(--radius);
 

src/client/ui/zen.vue

@@ -89,8 +89,8 @@ export default defineComponent({
 			line-height: $header-height;
 			text-align: center;
 			//background-color: var(--panel);
-			-webkit-backdrop-filter: blur(32px);
-			backdrop-filter: blur(32px);
+			-webkit-backdrop-filter: var(--blur, blur(32px));
+			backdrop-filter: var(--blur, blur(32px));
 			background-color: var(--header);
 			border-bottom: solid 0.5px var(--divider);
 		}

src/client/widgets/timeline.vue

@@ -86,7 +86,7 @@ export default defineComponent({
 					this.setSrc('list');
 				}
 			}));
-			os.modalMenu([{
+			os.popupMenu([{
 				text: this.$ts._timelines.home,
 				icon: 'fas fa-home',
 				action: () => { this.setSrc('home') }

src/docs/ar-SA/admin/disable-timelines.md

@@ -0,0 +1,8 @@
+# LTL/STL/GTLの無効化
+Misskeyでは、LTL/STL/GTLをそれぞれ無効化することができます。有効/無効を切り替えるには、インスタンスコントロールパネルで設定します。
+
+LTLやSTLは、そのインスタンス全員の投稿が見れるため、新規のユーザーにとってはユーザーを探す必要がなくなり、興味のあるユーザーを見つけやすいという利点があります。 しかし同時に、フォロー機能が活用されなくなったり、不適切な投稿が目につきやすくなったり、チャットのようになることで内輪感が生じて逆に新規ユーザーが参加しにくくなるといったデメリットも持ち合わせています。 サーバーによってメリット/デメリットどちらが優勢かは異なるので、オプションとして無効にできるようになっています。 もしデメリットの方が上回っていると感じたら、それらのタイムラインを無効化することも検討してください。
+
+<div class="warn">⚠️ 無効化を行うと、ユーザーが困惑し、短期的に見て利用者が減る可能性があります。そのため、無効化の際は影響を慎重に検討し、事前に説明してフォローを整える期間を一定程度設けることを推奨します。</div>
+
+なお、管理者/モデレーターは、これらのタイムラインの無効化状態は適用されず、引き続き利用することが可能です。

src/docs/ar-SA/admin/faq.md

@@ -0,0 +1,5 @@
+# よくある質問
+ここでは、サーバー管理者向けのよくある質問を掲載しています。
+
+## デフォルトテーマを設定したい
+現在、デフォルトテーマ設定機能は実装されていません。

src/docs/ar-SA/advanced/aiscript.md

@@ -0,0 +1,7 @@
+# AiScript
+AiScriptは、Misskeyで使用できるスクリプト言語です。
+
+<div class="info">ℹ️ AiScript実装はMisskeyとは別リポジトリで、<a href="https://github.com/syuilo/aiscript" target="_blank">オープンソースで公開されています。</a></div>
+
+## 使い方
+AiScriptの構文や組み込み関数などのドキュメントは、[こちら](https://github.com/syuilo/aiscript/tree/master/docs)で公開されています。

src/docs/ar-SA/advanced/api.md

@@ -0,0 +1,58 @@
+# Misskey API
+
+MisskeyAPIを使ってMisskeyクライアント、Misskey連携Webサービス、Bot等(以下「アプリケーション」と呼びます)を開発できます。 ストリーミングAPIもあるので、リアルタイム性のあるアプリケーションを作ることも可能です。
+
+APIを使い始めるには、まずアクセストークンを取得する必要があります。 このドキュメントでは、アクセストークンを取得する手順を説明した後、基本的なAPIの使い方を説明します。
+
+## アクセストークンの取得
+基本的に、APIはリクエストにはアクセストークンが必要となります。 APIにリクエストするのが自分自身なのか、不特定の利用者に使ってもらうアプリケーションなのかによって取得手順は異なります。
+
+* 前者の場合: [「自分自身のアクセストークンを手動発行する」](#自分自身のアクセストークンを手動発行する)に進む
+* 後者の場合: [「アプリケーション利用者にアクセストークンの発行をリクエストする」](#アプリケーション利用者にアクセストークンの発行をリクエストする)に進む
+
+### 自分自身のアクセストークンを手動発行する
+「設定 > API」で、自分のアクセストークンを発行できます。
+
+[「APIの使い方」へ進む](#APIの使い方)
+
+### アプリケーション利用者にアクセストークンの発行をリクエストする
+アプリケーション利用者のアクセストークンを取得するには、以下の手順で発行をリクエストします。
+
+#### Step 1
+
+UUIDを生成する。以後これをセッションIDと呼びます。
+
+> このセッションIDは毎回生成し、使いまわさないようにしてください。
+
+#### Step 2
+
+`{_URL_}/miauth/{session}`をユーザーのブラウザで表示させる。`{session}`の部分は、セッションIDに置き換えてください。
+> 例: `{_URL_}/miauth/c1f6d42b-468b-4fd2-8274-e58abdedef6f`
+
+表示する際、URLにクエリパラメータとしていくつかのオプションを設定できます:
+* `name` ... アプリケーション名
+    * > 例: `MissDeck`
+* `icon` ... アプリケーションのアイコン画像URL
+    * > 例: `https://missdeck.example.com/icon.png`
+* `callback` ... 認証が終わった後にリダイレクトするURL
+    * > 例: `https://missdeck.example.com/callback`
+    * リダイレクト時には、`session`というクエリパラメータでセッションIDが付きます
+* `permission` ... アプリケーションが要求する権限
+    * > 例: `write:notes,write:following,read:drive`
+    * 要求する権限を`,`で区切って列挙します
+    * どのような権限があるかは[APIリファレンス](/api-doc)で確認できます
+
+#### Step 3
+ユーザーが発行を許可した後、`{_URL_}/api/miauth/{session}/check`にPOSTリクエストすると、レスポンスとしてアクセストークンを含むJSONが返ります。
+
+レスポンスに含まれるプロパティ:
+* `token` ... ユーザーのアクセストークン
+* `user` ... ユーザーの情報
+
+[「APIの使い方」へ進む](#APIの使い方)
+
+## APIの使い方
+**APIはすべてPOSTで、リクエスト/レスポンスともにJSON形式です。RESTではありません。** アクセストークンは、`i`というパラメータ名でリクエストに含めます。
+
+* [APIリファレンス](/api-doc)
+* [ストリーミングAPI](./stream)

src/docs/ar-SA/advanced/create-plugin.md

@@ -0,0 +1,74 @@
+# プラグインの作成
+Misskey Webクライアントのプラグイン機能を使うと、クライアントを拡張し、様々な機能を追加できます。 ここではプラグインの作成にあたってのメタデータ定義や、AiScript APIリファレンスを掲載します。
+
+## البيانات الوصفية
+プラグインは、AiScriptのメタデータ埋め込み機能を使って、デフォルトとしてプラグインのメタデータを定義する必要があります。 メタデータは次のプロパティを含むオブジェクトです。
+
+### name
+プラグイン名
+
+### author
+プラグイン作者
+
+### version
+プラグインバージョン。数値を指定してください。
+
+### description
+プラグインの説明
+
+### permissions
+プラグインが要求する権限。MisskeyAPIにリクエストする際に用いられます。
+
+### config
+プラグインの設定情報を表すオブジェクト。 キーに設定名、値に以下のプロパティを含めます。
+
+#### type
+設定値の種類を表す文字列。以下から選択します。 string number boolean
+
+#### label
+ユーザーに表示する設定名
+
+#### description
+設定の説明
+
+#### default
+設定のデフォルト値
+
+## APIリファレンス
+AiScript標準で組み込まれているAPIは掲載しません。
+
+### Mk:dialog(title text type)
+ダイアログを表示します。typeには以下の値が設定できます。 info success warn error question 省略すると info になります。
+
+### Mk:confirm(title text type)
+確認ダイアログを表示します。typeには以下の値が設定できます。 info success warn error question 省略すると question になります。 ユーザーが"OK"を選択した場合は true を、"キャンセル"を選択した場合は false が返ります。
+
+### Mk:api(endpoint params)
+Misskey APIにリクエストします。第一引数にエンドポイント名、第二引数にパラメータオブジェクトを渡します。
+
+### Mk:save(key value)
+任意の値に任意の名前を付けて永続化します。永続化した値は、AiScriptコンテキストが終了しても残り、Mk:loadで読み取ることができます。
+
+### Mk:load(key)
+Mk:saveで永続化した指定の名前の値を読み取ります。
+
+### Plugin:register_post_form_action(title fn)
+投稿フォームにアクションを追加します。第一引数にアクション名、第二引数にアクションが選択された際のコールバック関数を渡します。 コールバック関数には、第一引数に投稿フォームオブジェクトが渡されます。
+
+### Plugin:register_note_action(title fn)
+ノートメニューに項目を追加します。第一引数に項目名、第二引数に項目が選択された際のコールバック関数を渡します。 コールバック関数には、第一引数に対象のノートオブジェクトが渡されます。
+
+### Plugin:register_user_action(title fn)
+ユーザーメニューに項目を追加します。第一引数に項目名、第二引数に項目が選択された際のコールバック関数を渡します。 コールバック関数には、第一引数に対象のユーザーオブジェクトが渡されます。
+
+### Plugin:register_note_view_interruptor(fn)
+UIに表示されるノート情報を書き換えます。 コールバック関数には、第一引数に対象のノートオブジェクトが渡されます。 コールバック関数の返り値でノートが書き換えられます。
+
+### Plugin:register_note_post_interruptor(fn)
+ノート投稿時にノート情報を書き換えます。 コールバック関数には、第一引数に対象のノートオブジェクトが渡されます。 コールバック関数の返り値でノートが書き換えられます。
+
+### Plugin:open_url(url)
+第一引数に渡されたURLをブラウザの新しいタブで開きます。
+
+### Plugin:config
+プラグインの設定が格納されるオブジェクト。プラグイン定義のconfigで設定したキーで値が入ります。

src/docs/ar-SA/advanced/develop-bot.md

@@ -0,0 +1,6 @@
+# Botの作成
+[Misskey API](./api)を利用してBotの開発が可能です。 また、いくつかのBot実装が公開されているため、ぜひ参考にしてください。
+
+- [syuilo/ai](https://github.com/syuilo/ai) ... Node.js上で動く、TypeScript製Bot実装
+
+Botを作成したときは、プロフィール設定からBotフラグをオンにしておくことを強くおすすめします。

src/docs/ar-SA/advanced/reversi-bot.md

@@ -0,0 +1,160 @@
+# MisskeyリバーシBotの開発
+Misskeyのリバーシ機能に対応したBotの開発方法をここに記します。
+
+1. `games/reversi`ストリームに以下のパラメータを付けて接続する:
+    * `i`: botアカウントのAPIキー
+
+2. 対局への招待が来たら、ストリームから`invited`イベントが流れてくる
+    * イベントの中身に、`parent`という名前で対局へ誘ってきたユーザーの情報が含まれている
+
+3. `games/reversi/match`へ、`user_id`として`parent`の`id`が含まれたリクエストを送信する
+
+4. 上手くいくとゲーム情報が返ってくるので、`games/reversi-game`ストリームへ、以下のパラメータを付けて接続する:
+    * `i`: botアカウントのAPIキー
+    * `game`: `game`の`id`
+
+5. この間、相手がゲームの設定を変更するとその都度`update-settings`イベントが流れてくるので、必要であれば何かしらの処理を行う
+
+6. 設定に満足したら、`{ type: 'accept' }`メッセージをストリームに送信する
+
+7. ゲームが開始すると、`started`イベントが流れてくる
+    * イベントの中身にはゲーム情報が含まれている
+
+8. 石を打つには、ストリームに`{ type: 'set', pos: <位置> }`を送信する(位置の計算方法は後述)
+
+9. 相手または自分が石を打つと、ストリームから`set`イベントが流れてくる
+    * `color`として石の色が含まれている
+    * `pos`として位置情報が含まれている
+
+## 位置の計算法
+8x8のマップを考える場合、各マスの位置(インデックスと呼びます)は次のようになっています:
+```
++--+--+--+--+--+--+--+--+
+| 0| 1| 2| 3| 4| 5| 6| 7|
++--+--+--+--+--+--+--+--+
+| 8| 9|10|11|12|13|14|15|
++--+--+--+--+--+--+--+--+
+|16|17|18|19|20|21|22|23|
+...
+```
+
+### X,Y座標 から インデックス に変換する
+```
+pos = x + (y * mapWidth)
+```
+`mapWidth`は、ゲーム情報の`map`から、次のようにして計算できます:
+```
+mapWidth = map[0].length
+```
+
+### インデックス から X,Y座標 に変換する
+```
+x = pos % mapWidth
+y = Math.floor(pos / mapWidth)
+```
+
+## マップ情報
+マップ情報は、ゲーム情報の`map`に入っています。 文字列の配列になっており、ひとつひとつの文字がマス情報を表しています。 それをもとにマップのデザインを知る事が出来ます:
+* `(スペース)` ... マス無し
+* `-` ... マス
+* `b` ... 初期配置される黒石
+* `w` ... 初期配置される白石
+
+例えば、4*4の次のような単純なマップがあるとします:
+```text
++---+---+---+---+
+|   |   |   |   |
++---+---+---+---+
+|   | ○ | ● |   |
++---+---+---+---+
+|   | ● | ○ |   |
++---+---+---+---+
+|   |   |   |   |
++---+---+---+---+
+```
+
+この場合、マップデータはこのようになります:
+```javascript
+['----', '-wb-', '-bw-', '----']
+```
+
+## ユーザーにフォームを提示して対話可能Botを作成する
+ユーザーとのコミュニケーションを行うため、ゲームの設定画面でユーザーにフォームを提示することができます。 例えば、Botの強さをユーザーが設定できるようにする、といったシナリオが考えられます。
+
+フォームを提示するには、`reversi-game`ストリームに次のメッセージを送信します:
+```javascript
+{
+  type: 'init-form',
+  body: [フォームコントロールの配列]
+}
+```
+
+フォームコントロールの配列については今から説明します。 フォームコントロールは、次のようなオブジェクトです:
+```javascript
+{
+  id: 'switch1',
+  type: 'switch',
+  label: 'Enable hoge',
+  value: false
+}
+```
+`id` ... コントロールのID。 `type` ... コントロールの種類。後述します。 `label` ... コントロールと一緒に表記するテキスト。 `value` ... コントロールのデフォルト値。
+
+### フォームの操作を受け取る
+ユーザーがフォームを操作すると、ストリームから`update-form`イベントが流れてきます。 イベントの中身には、コントロールのIDと、ユーザーが設定した値が含まれています。 例えば、上で示したスイッチをユーザーがオンにしたとすると、次のイベントが流れてきます:
+```javascript
+{
+  id: 'switch1',
+  value: true
+}
+```
+
+### フォームコントロールの種類
+#### スイッチ
+type: `switch` スイッチを表示します。何かの機能をオン/オフさせたい場合に有用です。
+
+##### プロパティ
+`label` ... スイッチに表記するテキスト。
+
+#### ラジオボタン
+type: `radio` ラジオボタンを表示します。選択肢を提示するのに有用です。例えば、Botの強さを設定させるなどです。
+
+##### プロパティ
+`items` ... ラジオボタンの選択肢。例:
+```javascript
+items: [{
+  label: '弱',
+  value: 1
+}, {
+  label: '中',
+  value: 2
+}, {
+  label: '強',
+  value: 3
+}]
+```
+
+#### スライダー
+type: `slider` スライダーを表示します。
+
+##### プロパティ
+`min` ... スライダーの下限。 `max` ... スライダーの上限。 `step` ... 入力欄で刻むステップ値。
+
+#### テキストボックス
+type: `textbox` テキストボックスを表示します。ユーザーになにか入力させる一般的な用途に利用できます。
+
+## ユーザーにメッセージを表示する
+設定画面でユーザーと対話する、フォーム以外のもうひとつの方法がこれです。ユーザーになにかメッセージを表示することができます。 例えば、ユーザーがBotの対応していないモードやマップを選択したとき、警告を表示するなどです。 メッセージを表示するには、次のメッセージをストリームに送信します:
+```javascript
+{
+  type: 'message',
+  body: {
+    text: 'メッセージ内容',
+    type: 'メッセージの種類'
+  }
+}
+```
+メッセージの種類: `success`, `info`, `warning`, `error`。
+
+## 投了する
+投了をするには、<a href="./api/endpoints/games/reversi/games/surrender">このエンドポイント</a>にリクエストします。

src/docs/ar-SA/advanced/stream.md

@@ -0,0 +1,350 @@
+# ストリーミングAPI
+
+ストリーミングAPIを使うと、リアルタイムで様々な情報(例えばタイムラインに新しい投稿が流れてきた、メッセージが届いた、フォローされた、など)を受け取ったり、様々な操作を行ったりすることができます。
+
+## ストリームに接続する
+
+ストリーミングAPIを利用するには、まずMisskeyサーバーに**websocket**接続する必要があります。
+
+以下のURLに、`i`というパラメータ名で認証情報を含めて、websocket接続してください。例:
+```
+%WS_URL%/streaming?i=xxxxxxxxxxxxxxx
+```
+
+認証情報は、自分のAPIキーや、アプリケーションからストリームに接続する際はユーザーのアクセストークンのことを指します。
+
+<div class="info">ℹ️ 認証情報の取得については、<a href="./api">こちらのドキュメント</a>をご確認ください。</div>
+
+---
+
+認証情報は省略することもできますが、その場合非ログインでの利用ということになり、受信できる情報や可能な操作は限られます。例:
+
+```
+%WS_URL%/streaming
+```
+
+---
+
+ストリームに接続すると、後述するAPI操作や、投稿の購読を行ったりすることができます。 しかしまだこの段階では、例えばタイムラインへの新しい投稿を受信したりすることはできません。 それを行うには、ストリーム上で、後述する**チャンネル**に接続する必要があります。
+
+**ストリームでのやり取りはすべてJSONです。**
+
+## チャンネル
+MisskeyのストリーミングAPIにはチャンネルという概念があります。これは、送受信する情報を分離するための仕組みです。 Misskeyのストリームに接続しただけでは、まだリアルタイムでタイムラインの投稿を受信したりはできません。 ストリーム上でチャンネルに接続することで、様々な情報を受け取ったり情報を送信したりすることができるようになります。
+
+ひとつのストリーム上で、同時に複数のチャンネルに接続することができます。
+
+### チャンネルに接続する
+チャンネルに接続するには、次のようなデータをJSONでストリームに送信します:
+
+```json
+{
+    type: 'connect',
+    body: {
+        channel: 'xxxxxxxx',
+        id: 'foobar',
+        params: {
+            ...
+        }
+    }
+}
+```
+
+ここで、
+* `channel`には接続したいチャンネル名を設定します。チャンネルの種類については後述します。
+* `id`にはそのチャンネルとやり取りするための任意のIDを設定します。ストリームでは様々なメッセージが流れるので、そのメッセージがどのチャンネルからのものなのか識別する必要があるからです。このIDは、UUIDや、乱数のようなもので構いません。
+* `params`はチャンネルに接続する際のパラメータです。チャンネルによって接続時に必要とされるパラメータは異なります。パラメータ不要のチャンネルに接続する際は、このプロパティは省略可能です。
+
+<div class="info">ℹ️ IDはチャンネルごとではなく「チャンネルの接続ごと」です。なぜなら、同じチャンネルに異なるパラメータで複数接続するケースもあるからです。</div>
+
+### チャンネルからのメッセージを受け取る
+例えばタイムラインのチャンネルなら、新しい投稿があった時にメッセージを発します。そのメッセージを受け取ることで、タイムラインに新しい投稿がされたことをリアルタイムで知ることができます。
+
+チャンネルがメッセージを発すると、次のようなデータがJSONでストリームに流れてきます:
+```json
+{
+    type: 'channel',
+    body: {
+        id: 'foobar',
+        type: 'something',
+        body: {
+            some: 'thing'
+        }
+    }
+}
+```
+
+ここで、
+* `id`には前述したそのチャンネルに接続する際に設定したIDが設定されています。これで、このメッセージがどのチャンネルからのものなのか知ることができます。
+* `type`にはメッセージの種類が設定されます。チャンネルによって、どのような種類のメッセージが流れてくるかは異なります。
+* `body`にはメッセージの内容が設定されます。チャンネルによって、どのような内容のメッセージが流れてくるかは異なります。
+
+### チャンネルに向けてメッセージを送信する
+チャンネルによっては、メッセージを受け取るだけでなく、こちらから何かメッセージを送信し、何らかの操作を行える場合があります。
+
+チャンネルにメッセージを送信するには、次のようなデータをJSONでストリームに送信します:
+```json
+{
+    type: 'channel',
+    body: {
+        id: 'foobar',
+        type: 'something',
+        body: {
+            some: 'thing'
+        }
+    }
+}
+```
+
+ここで、
+* `id`には前述したそのチャンネルに接続する際に設定したIDを設定します。これで、このメッセージがどのチャンネルに向けたものなのか識別させることができます。
+* `type`にはメッセージの種類を設定します。チャンネルによって、どのような種類のメッセージを受け付けるかは異なります。
+* `body`にはメッセージの内容を設定します。チャンネルによって、どのような内容のメッセージを受け付けるかは異なります。
+
+### チャンネルから切断する
+チャンネルから切断するには、次のようなデータをJSONでストリームに送信します:
+
+```json
+{
+    type: 'disconnect',
+    body: {
+        id: 'foobar'
+    }
+}
+```
+
+ここで、
+* `id`には前述したそのチャンネルに接続する際に設定したIDを設定します。
+
+## ストリームを経由してAPIリクエストする
+
+ストリームを経由してAPIリクエストすると、HTTPリクエストを発生させずにAPIを利用できます。そのため、コードを簡潔にできたり、パフォーマンスの向上を見込めるかもしれません。
+
+ストリームを経由してAPIリクエストするには、次のようなデータをJSONでストリームに送信します:
+```json
+{
+    type: 'api',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx',
+        endpoint: 'notes/create',
+        data: {
+            text: 'yee haw!'
+        }
+    }
+}
+```
+
+ここで、
+* `id`には、APIのレスポンスを識別するための、APIリクエストごとの一意なIDを設定する必要があります。UUIDや、簡単な乱数のようなもので構いません。
+* `endpoint`には、あなたがリクエストしたいAPIのエンドポイントを指定します。
+* `data`には、エンドポイントのパラメータを含めます。
+
+<div class="info">ℹ️ APIのエンドポイントやパラメータについてはAPIリファレンスをご確認ください。</div>
+
+### レスポンスの受信
+
+APIへリクエストすると、レスポンスがストリームから次のような形式で流れてきます。
+
+```json
+{
+    type: 'api:xxxxxxxxxxxxxxxx',
+    body: {
+        ...
+    }
+}
+```
+
+ここで、
+* `xxxxxxxxxxxxxxxx`の部分には、リクエストの際に設定された`id`が含まれています。これにより、どのリクエストに対するレスポンスなのか判別することができます。
+* `body`には、レスポンスが含まれています。
+
+## 投稿のキャプチャ
+
+Misskeyは投稿のキャプチャと呼ばれる仕組みを提供しています。これは、指定した投稿のイベントをストリームで受け取る機能です。
+
+例えばタイムラインを取得してユーザーに表示したとします。ここで誰かがそのタイムラインに含まれるどれかの投稿に対してリアクションしたとします。
+
+しかし、クライアントからするとある投稿にリアクションが付いたことなどは知る由がないため、リアルタイムでリアクションをタイムライン上の投稿に反映して表示するといったことができません。
+
+この問題を解決するために、Misskeyは投稿のキャプチャ機構を用意しています。投稿をキャプチャすると、その投稿に関するイベントを受け取ることができるため、リアルタイムでリアクションを反映させたりすることが可能になります。
+
+### 投稿をキャプチャする
+
+投稿をキャプチャするには、ストリームに次のようなメッセージを送信します:
+
+```json
+{
+    type: 'subNote',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx'
+    }
+}
+```
+
+ここで、
+* `id`にキャプチャしたい投稿の`id`を設定します。
+
+このメッセージを送信すると、Misskeyにキャプチャを要請したことになり、以後、その投稿に関するイベントが流れてくるようになります。
+
+例えば投稿にリアクションが付いたとすると、次のようなメッセージが流れてきます:
+
+```json
+{
+    type: 'noteUpdated',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx',
+        type: 'reacted',
+        body: {
+            reaction: 'like',
+            userId: 'yyyyyyyyyyyyyyyy'
+        }
+    }
+}
+```
+
+ここで、
+* `body`内の`id`に、イベントを発生させた投稿のIDが設定されます。
+* `body`内の`type`に、イベントの種類が設定されます。
+* `body`内の`body`に、イベントの詳細が設定されます。
+
+#### イベントの種類
+
+##### `reacted`
+その投稿にリアクションがされた時に発生します。
+
+* `reaction`に、リアクションの種類が設定されます。
+* `userId`に、リアクションを行ったユーザーのIDが設定されます。
+
+例:
+```json
+{
+    type: 'noteUpdated',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx',
+        type: 'reacted',
+        body: {
+            reaction: 'like',
+            userId: 'yyyyyyyyyyyyyyyy'
+        }
+    }
+}
+```
+
+##### `deleted`
+その投稿が削除された時に発生します。
+
+* `deletedAt`に、削除日時が設定されます。
+
+例:
+```json
+{
+    type: 'noteUpdated',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx',
+        type: 'deleted',
+        body: {
+            deletedAt: '2018-10-22T02:17:09.703Z'
+        }
+    }
+}
+```
+
+##### `pollVoted`
+その投稿に添付されたアンケートに投票された時に発生します。
+
+* `choice`に、選択肢IDが設定されます。
+* `userId`に、投票を行ったユーザーのIDが設定されます。
+
+例:
+```json
+{
+    type: 'noteUpdated',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx',
+        type: 'pollVoted',
+        body: {
+            choice: 2,
+            userId: 'yyyyyyyyyyyyyyyy'
+        }
+    }
+}
+```
+
+### 投稿のキャプチャを解除する
+
+その投稿がもう画面に表示されなくなったりして、その投稿に関するイベントをもう受け取る必要がなくなったときは、キャプチャの解除を申請してください。
+
+次のメッセージを送信します:
+
+```json
+{
+    type: 'unsubNote',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx'
+    }
+}
+```
+
+ここで、
+* `id`にキャプチャを解除したい投稿の`id`を設定します。
+
+このメッセージを送信すると、以後、その投稿に関するイベントは流れてこないようになります。
+
+# チャンネル一覧
+## `main`
+アカウントに関する基本的な情報が流れてきます。このチャンネルにパラメータはありません。
+
+### 流れてくるイベント一覧
+
+#### `renote`
+自分の投稿がRenoteされた時に発生するイベントです。自分自身の投稿をRenoteしたときは発生しません。
+
+#### `mention`
+誰かからメンションされたときに発生するイベントです。
+
+#### `readAllNotifications`
+自分宛ての通知がすべて既読になったことを表すイベントです。このイベントを利用して、「通知があることを示すアイコン」のようなものをオフにしたりする等のケースが想定されます。
+
+#### `meUpdated`
+自分の情報が更新されたことを表すイベントです。
+
+#### `follow`
+自分が誰かをフォローしたときに発生するイベントです。
+
+#### `unfollow`
+自分が誰かのフォローを解除したときに発生するイベントです。
+
+#### `followed`
+自分が誰かにフォローされたときに発生するイベントです。
+
+## `homeTimeline`
+ホームタイムラインの投稿情報が流れてきます。このチャンネルにパラメータはありません。
+
+### 流れてくるイベント一覧
+
+#### `note`
+タイムラインに新しい投稿が流れてきたときに発生するイベントです。
+
+## `localTimeline`
+ローカルタイムラインの投稿情報が流れてきます。このチャンネルにパラメータはありません。
+
+### 流れてくるイベント一覧
+
+#### `note`
+ローカルタイムラインに新しい投稿が流れてきたときに発生するイベントです。
+
+## `hybridTimeline`
+ソーシャルタイムラインの投稿情報が流れてきます。このチャンネルにパラメータはありません。
+
+### 流れてくるイベント一覧
+
+#### `note`
+ソーシャルタイムラインに新しい投稿が流れてきたときに発生するイベントです。
+
+## `globalTimeline`
+グローバルタイムラインの投稿情報が流れてきます。このチャンネルにパラメータはありません。
+
+### 流れてくるイベント一覧
+
+#### `note`
+グローバルタイムラインに新しい投稿が流れてきたときに発生するイベントです。

src/docs/ar-SA/features/antenna.md

@@ -0,0 +1,4 @@
+# الهوائيات
+アンテナは、自由に条件を設定して、合致するノートを自動で収集することができる機能です。
+
+条件を設定したアンテナが作成された状態で、条件に合致するノートが投稿されると、リアルタイムでそのアンテナのタイムラインにノートが追加されます。

src/docs/ar-SA/features/custom-emoji.md

@@ -0,0 +1,2 @@
+# إيموجي مخصص
+カスタム絵文字は、インスタンスで用意された画像を絵文字のように使える機能です。 ノート、リアクション、チャット、自己紹介、名前などの場所で使うことができます。 カスタム絵文字をそれらの場所で使うには、絵文字ピッカーボタン(ある場合)を押すか、`:`を入力して絵文字サジェストを表示します。 テキスト内に`:foo:`のような形式の文字列が見つかると、`foo`の部分がカスタム絵文字名と解釈され、表示時には対応したカスタム絵文字に置き換わります。

src/docs/ar-SA/features/deck.md

@@ -0,0 +1,18 @@
+# デッキ
+
+デッキは利用可能なUIのひとつです。「カラム」と呼ばれるビューを複数並べて表示させることで、カスタマイズ性が高く、情報量の多いUIが構築できることが特徴です。
+
+## カラムの追加
+デッキの背景を右クリックし、「カラムを追加」して任意のカラムを追加できます。
+
+## カラムの移動
+カラムは、ドラッグアンドドロップで他のカラムと位置を入れ替えることが出来るほか、カラムメニュー(カラムのヘッダー右クリック)から位置を移動させることもできます。
+
+## カラムの水平分割
+カラムは左右だけでなく、上下に並べることもできます。 カラムメニューを開き、「左に重ねる」を選択すると、左のカラムの下に現在のカラムが移動します。 上下分割を解除するには、カラムメニューの「右に出す」を選択します。
+
+## カラムの設定
+カラムメニューの「編集」を選択するとカラムの設定を編集できます。カラムの名前を変えたり、幅を変えたりできます。
+
+## デッキの設定
+デッキに関する設定は、[settings/deck](/settings/deck)で行えます。

src/docs/ar-SA/features/drive.md

@@ -0,0 +1,17 @@
+# قرص التخرين
+ドライブは、Misskey上でファイルを管理できる機能です。
+
+[ドライブのページ](/my/drive)から任意のファイルをアップロードできるほか、アバターに設定した画像や、ノートに添付したファイルなどもすべてドライブにアップロードされます。
+
+<div class="warn">⚠️ ドライブからファイルを削除すると、そのファイルが添付されたノートも消えます。</div>
+
+ドライブにアップロードされたファイルは、いつでもダウンロードすることができるほか、ノート作成時に「ドライブからファイルを添付」することでファイルを再利用することもできます。
+
+ドライブ内にフォルダを作り、複数のファイルをまとめて整理することもできます。
+
+## 閲覧注意 (NSFW)
+<div class="info">ℹ️ この項目が閲覧注意なわけではありません</div>
+
+閲覧注意またはNSFW (Not safe for work) は、ドライブのファイルに設定することができるフラグです。 閲覧注意フラグを設定されたファイルは、表示される際に閲覧者の操作なしには表示されなくなります。 このフラグは、例えば職場や公共の場で閲覧するのに適切でないと思われる画像などに設定し、そのような画像が突然表示されてしまうことを防ぐ目的で使われます。
+
+このフラグは手動でオンオフを切り替えられるほか、モデレーターの判断で設定される場合もあります。

src/docs/ar-SA/features/favorite.md

@@ -0,0 +1,4 @@
+# إضافة إلى المفضلة
+[ノート](./node)をお気に入りとして登録できる機能です。 お気に入り登録したノートは、[お気に入りページ](./my/favorites)で一覧することができます。 お気に入りに登録したことは相手に通知されず、お気に入りは自分しか見ることができません。
+
+ノートをお気に入り登録するには、ノートメニューの「お気に入り」を押します。お気に入り解除するには、ノートメニューの「お気に入り解除」を押します。

src/docs/ar-SA/features/follow.md

@@ -0,0 +1,2 @@
+# المتابَعون
+ユーザーをフォローすると、タイムラインにそのユーザーの投稿が表示されるようになります。ただし、他のユーザーに対する返信は含まれません。 ユーザーをフォローするには、ユーザーページの「フォロー」ボタンをクリックします。フォローを解除するには、もう一度クリックします。

src/docs/ar-SA/features/keyboard-shortcut.md

@@ -0,0 +1,66 @@
+# キーボードショートカット
+
+## الشامل
+これらのショートカットは基本的にどこでも使えます。
+<table>
+    <thead>
+        <tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+    </thead>
+    <tbody>
+        <tr><td><kbd class="key">P</kbd>, <kbd class="key">N</kbd></td><td>新規投稿</td><td><b>P</b>ost, <b>N</b>ew, <b>N</b>ote</td></tr>
+        <tr><td><kbd class="key">T</kbd></td><td>タイムラインの最も新しい投稿にフォーカス</td><td><b>T</b>imeline, <b>T</b>op</td></tr>
+        <tr><td><kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">N</kbd></kbd></td><td>通知を表示/隠す</td><td><b>N</b>otifications</td></tr>
+        <tr><td><kbd class="key">S</kbd></td><td>البحث</td><td><b>S</b>earch</td></tr>
+        <tr><td><kbd class="key">H</kbd>, <kbd class="key">?</kbd></td><td>ヘルプを表示</td><td><b>H</b>elp</td></tr>
+    </tbody>
+</table>
+
+## 投稿にフォーカスされた状態
+<table>
+    <thead>
+        <tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+    </thead>
+    <tbody>
+        <tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd>, <kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">Tab</kbd></kbd></td><td>上の投稿にフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">↓</kbd>, <kbd class="key">J</kbd>, <kbd class="key">Tab</kbd></td><td>下の投稿にフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">R</kbd></td><td>返信フォームを開く</td><td><b>R</b>eply</td></tr>
+        <tr><td><kbd class="key">Q</kbd></td><td>Renoteフォームを開く</td><td><b>Q</b>uote</td></tr>
+        <tr><td><kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">Q</kbd></kbd></td><td>即刻Renoteする(フォームを開かずに)</td><td>-</td></tr>
+        <tr><td><kbd class="key">E</kbd>, <kbd class="key">A</kbd>, <kbd class="key">+</kbd></td><td>リアクションフォームを開く</td><td><b>E</b>mote, re<b>A</b>ction</td></tr>
+        <tr><td><kbd class="key">0</kbd>~<kbd class="key">9</kbd></td><td>数字に対応したリアクションをする(対応については後述)</td><td>-</td></tr>
+        <tr><td><kbd class="key">F</kbd>, <kbd class="key">B</kbd></td><td>お気に入りに登録</td><td><b>F</b>avorite, <b>B</b>ookmark</td></tr>
+        <tr><td><kbd class="key">Del</kbd>, <kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">D</kbd></kbd></td><td>投稿を削除</td><td><b>D</b>elete</tr>
+        <tr><td><kbd class="key">M</kbd>, <kbd class="key">O</kbd></td><td>投稿に対するメニューを開く</td><td><b>M</b>ore, <b>O</b>ther</td></tr>
+        <tr><td><kbd class="key">S</kbd></td><td>CWで隠された部分を表示 or 隠す</td><td><b>S</b>how, <b>S</b>ee</td></tr>
+        <tr><td><kbd class="key">Esc</kbd></td><td>フォーカスを外す</td><td>-</td></tr>
+    </tbody>
+</table>
+
+## Renoteフォーム
+<table>
+    <thead>
+        <tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+    </thead>
+    <tbody>
+        <tr><td><kbd class="key">Enter</kbd></td><td>Renoteする</td><td>-</td></tr>
+        <tr><td><kbd class="key">Q</kbd></td><td>フォームを展開する</td><td><b>Q</b>uote</td></tr>
+        <tr><td><kbd class="key">Esc</kbd></td><td>フォームを閉じる</td><td>-</td></tr>
+    </tbody>
+</table>
+
+## リアクションフォーム
+デフォルトで「👍」にフォーカスが当たっている状態です。
+<table>
+    <thead>
+        <tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+    </thead>
+    <tbody>
+        <tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd></td><td>上のリアクションにフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">↓</kbd>, <kbd class="key">J</kbd></td><td>下のリアクションにフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">←</kbd>, <kbd class="key">H</kbd>, <kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">Tab</kbd></kbd></td><td>左のリアクションにフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">→</kbd>, <kbd class="key">L</kbd>, <kbd class="key">Tab</kbd></td><td>右のリアクションにフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">Enter</kbd>, <kbd class="key">Space</kbd>, <kbd class="key">+</kbd></td><td>リアクション確定</td><td>-</td></tr>
+        <tr><td><kbd class="key">0</kbd>~<kbd class="key">9</kbd></td><td>数字に対応したリアクションで確定</td><td>-</td></tr>
+        <tr><td><kbd class="key">Esc</kbd></td><td>リアクションするのをやめる</td><td>-</td></tr>
+    </tbody>
+</table>

src/docs/ar-SA/features/mfm.md

@@ -0,0 +1,12 @@
+# MFM
+MFMは、Misskey Flavored Markdownの略で、Misskeyの様々な場所で使用できる専用のマークアップ言語です。 MFMで使用可能な構文は[MFMチートシート](/mfm-cheat-sheet)で確認できます。
+
+## MFMが使用可能な場所の例
+- ノート本文
+- CW注釈
+- ユーザーの名前
+- ユーザーの自己紹介
+
+## 開発者向け情報
+MFMのパーサー実装はライブラリとして公開されており、簡単にクライアントにMFMを組み込むことが可能です。
+- [misskey-dev/mfm.js](https://github.com/misskey-dev/mfm.js) - JavaScriptパーサー実装

src/docs/ar-SA/features/mute.md

@@ -0,0 +1,13 @@
+# اكتم
+
+ユーザーをミュートすると、そのユーザーに関する次のコンテンツがMisskeyに表示されなくなります:
+
+* タイムラインや投稿の検索結果内の、そのユーザーの投稿(およびそれらの投稿に対する返信やRenote)
+* そのユーザーからの通知
+* メッセージ履歴一覧内の、そのユーザーとのメッセージ履歴
+
+ユーザーをミュートするには、対象のユーザーのユーザーページに表示されている「ミュート」ボタンを押します。
+
+ミュートを行ったことは相手に通知されず、ミュートされていることを知ることもできません。
+
+設定>ミュート から、自分がミュートしているユーザー一覧を確認することができます。

src/docs/ar-SA/features/note.md

@@ -0,0 +1,54 @@
+# الملاحظات
+ノートは、Misskeyに投稿される、文章、ファイル、アンケートなどを含むコンテンツで、Misskeyの中心的概念です。また、そのノートを作成する行為自体もノートと呼ばれます。
+
+ノートが作成されると、[タイムライン](./timeline)に追加され、自分の[フォロワー](./follow)やサーバーのユーザーが見れるようになります。
+
+ノートには、[リアクション](./reaction)を行うことができます。また、返信や引用もできます。
+
+ノートを[お気に入り](./favorite)登録することで、後で簡単に見返すことができます。
+
+## ノートを作成する
+ノートを作成するには、画面上にある鉛筆マークのボタンを押して、作成フォームを開きます。作成フォームに内容を入力し、「ノート」ボタンを押すことでノートが作成されます。 ノートには、画像、動画など任意のファイルや、[アンケート](./poll)を添付することができます。また、本文中には[MFM](./mfm)が使用でき、[メンション](./mention)や[ハッシュタグ](./hashtag)を含めることもできます。 他にも、CWや公開範囲といった設定も行えます(詳細は後述)。
+<div class="info">ℹ️ コンピューターのクリップボードに画像データがある状態で、フォーム内のテキストボックスにペーストするとその画像を添付することができます。</div>
+<div class="info">ℹ️ テキストボックス内で<kbd class="key">Ctrl + Enter</kbd>を押すことでも投稿できます。</div>
+
+## Renote
+既にあるノートを引用、もしくはそのノートを新しいノートとして共有する行為、またそれによって作成されたノートをRenoteと呼びます。 自分がフォローしているユーザーの、気に入ったノートを自分のフォロワーに共有したい場合や、過去の自分のノートを再度共有したい場合に使います。 同じノートに対して無制限にRenoteを行うことができますが、あまり連続して使用すると迷惑になる場合もあるので、注意しましょう。
+<div class="warn">⚠️ 公開範囲がフォロワーやダイレクトのノートはRenoteできません</div>
+
+Renoteを削除するには、Renoteの時刻表示の隣にある「...」を押し、「Renote解除」を選択します。
+
+## CW
+Contents Warningの略で、ノートの内容を、閲覧者の操作なしには表示しないようにできる機能です。主に長大な内容を隠すためや、ネタバレ防止などに使うことができます。 設定するには、フォームの「内容を隠す」ボタン(目のアイコン)を押します。すると新しい入力エリアが表れるので、そこに内容の要約を記入します。
+
+## 公開範囲
+ノートごとに、そのノートが公開される範囲を設定することができます。フォームの「ノート」ボタンの左にあるアイコンを押すと公開範囲を以下から選択できます。
+
+### للعامة
+全ての人に対してノートが公開されるほか、サーバーの全てのタイムライン(ホームタイムライン、ローカルタイムライン、ソーシャルタイムライン、グローバルタイムライン)にノートが流れます。
+<div class="warn">⚠️ アカウントが<a href="./silence">サイレンス</a>状態の時は、この公開範囲は使用できません。</div>
+
+### الرئيسي
+全ての人に対してノートが公開されますが、フォロワー以外のローカルタイムライン、ソーシャルタイムライン、グローバルタイムラインにはノートは流れません。
+
+### المتابِعين
+自分のフォロワーに対してのみノートを公開します。フォロワーの全てのタイムラインに流れます。
+
+### مباشرة
+指定したユーザーに対してのみノートを公開します。指定したユーザーの全てのタイムラインに流れます。
+
+### 「ローカルのみ」オプション
+このオプションを有効にすると、リモートにノートを連合しなくなります。
+
+### 公開範囲の比較
+<table>
+    <tr><th></th><th>للعامة</th><th>الرئيسي</th><th>المتابِعين</th><th>مباشرة</th></tr>
+    <tr><th>フォロワーのLTL/STL/GTL</th><td>✔</td><td>✔</td><td>✔</td><td></td></tr>
+    <tr><th>非フォロワーのLTL/STL/GTL</th><td>✔</td><td></td><td></td><td></td></tr>
+</table>
+
+## دبّسها على الصفحة الشخصية
+ノートをピン留めすると、ユーザーページに常にそのノートを表示しておくことができます。 ノートのメニューを開き、「ピン留め」を選択してピン留めできます。 複数のノートをピン留めできます。
+
+## راقب
+ノートをウォッチすると、自分以外のノートへのリアクションや返信などの通知を受け取ることができます。 ノートのメニューを開き、「ウォッチ」を選択してウォッチできます。

src/docs/ar-SA/features/pages.md

@@ -0,0 +1,10 @@
+# Pages
+
+## 変数
+変数を使うことで動的なページを作成できます。テキスト内で <b>{ 変数名 }</b> と書くとそこに変数の値を埋め込めます。例えば <b>Hello { thing } world!</b> というテキストで、変数(thing)の値が <b>ai</b> だった場合、テキストは <b>Hello ai world!</b> になります。
+
+変数の評価(値を算出すること)は上から下に行われるので、ある変数の中で自分より下の変数を参照することはできません。例えば上から <b>A、B、C</b> と3つの変数を定義したとき、<b>C</b>の中で<b>A</b>や<b>B</b>を参照することはできますが、<b>A</b>の中で<b>B</b>や<b>C</b>を参照することはできません。
+
+ユーザーからの入力を受け取るには、ページに「ユーザー入力」ブロックを設置し、「変数名」に入力を格納したい変数名を設定します(変数は自動で作成されます)。その変数を使ってユーザー入力に応じた動作を行えます。
+
+関数を使うと、値の算出処理を再利用可能な形にまとめることができます。関数を作るには、「関数」タイプの変数を作成します。関数にはスロット(引数)を設定することができ、スロットの値は関数内で変数として利用可能です。また、関数を引数に取る関数(高階関数と呼ばれます)も存在します。関数は予め定義しておくほかに、このような高階関数のスロットに即席でセットすることもできます。

src/docs/ar-SA/features/reaction.md

@@ -0,0 +1,11 @@
+# تفاعل
+他の人のノートに、絵文字を付けて簡単にあなたの反応を伝えられる機能です。 リアクションするには、ノートの + アイコンをクリックしてピッカーを表示し、絵文字を選択します。 リアクションには[カスタム絵文字](./custom-emoji)も使用できます。
+
+## リアクションピッカーのカスタマイズ
+ピッカーに表示される絵文字を自分好みにカスタマイズすることができます。 設定の「リアクション」で設定します。
+
+## リモート投稿へのリアクションについて
+リアクションはMisskeyオリジナルの機能であるため、リモートインスタンスがMisskeyでない限りは、ほとんどの場合「Like」としてアクティビティが送信されます。一般的にはLikeは「お気に入り」として実装されているようです。
+
+## リモートからのリアクションについて
+リモートから「Like」アクティビティを受信したとき、Misskeyでは「👍」のリアクションとして解釈されます。

src/docs/ar-SA/features/silence.md

@@ -0,0 +1,6 @@
+# اكتم
+サイレンスは、アカウントに設定される状態のひとつです。
+
+アカウントがサイレンス状態になると、ノートの公開範囲をパブリックにできなくなります。 ホーム、フォロワー、ダイレクトは選択可能なため、サイレンスを受けた場合でもフォロワーやあなたのユーザーページを直接訪れた場合は投稿を閲覧できますが、GTL(連合タイムライン)やLTL(ローカルタイムライン)には投稿が流れません。
+
+アカウントのサイレンス状態は、サーバーのモデレーターによって有効化/無効化されます。

src/docs/ar-SA/features/theme.md

@@ -0,0 +1,68 @@
+# المظهر
+
+テーマを設定して、Misskeyクライアントの見た目を変更できます。
+
+## テーマの設定
+設定 > テーマ
+
+## テーマを作成する
+テーマコードはJSON5で記述されたテーマオブジェクトです。 テーマは以下のようなオブジェクトです。
+``` js
+{
+    id: '17587283-dd92-4a2c-a22c-be0637c9e22a',
+
+    name: 'Danboard',
+    author: 'syuilo',
+
+    base: 'light',
+
+    props: {
+        accent: 'rgb(218, 141, 49)',
+        bg: 'rgb(218, 212, 190)',
+        fg: 'rgb(115, 108, 92)',
+        panel: 'rgb(236, 232, 220)',
+        renote: 'rgb(100, 152, 106)',
+        link: 'rgb(100, 152, 106)',
+        mention: '@accent',
+        hashtag: 'rgb(100, 152, 106)',
+        header: 'rgba(239, 227, 213, 0.75)',
+        navBg: 'rgb(216, 206, 182)',
+        inputBorder: 'rgba(0, 0, 0, 0.1)',
+    },
+}
+
+```
+
+* `id` ... テーマの一意なID。UUIDをおすすめします。
+* `name` ... テーマ名
+* `author` ... テーマの作者
+* `desc` ... テーマの説明(オプション)
+* `base` ... 明るいテーマか、暗いテーマか
+    * `light`にすると明るいテーマになり、`dark`にすると暗いテーマになります。
+    * テーマはここで設定されたベーステーマを継承します。
+* `props` ... テーマのスタイル定義。これから説明します。
+
+### テーマのスタイル定義
+`props`下にはテーマのスタイルを定義します。 キーがCSSの変数名になり、バリューで中身を指定します。 なお、この`props`オブジェクトはベーステーマから継承されます。 ベーステーマは、このテーマの`base`が`light`なら[_light.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_light.json5)で、`dark`なら[_dark.json5](https://github.com/misskey-dev/misskey/blob/develop/src/client/themes/_dark.json5)です。 つまり、このテーマ内の`props`に`panel`というキーが無くても、そこにはベーステーマの`panel`があると見なされます。
+
+#### バリューで使える構文
+* 16進数で表された色
+    * 例: `#00ff00`
+* `rgb(r, g, b)`形式で表された色
+    * 例: `rgb(0, 255, 0)`
+* `rgb(r, g, b, a)`形式で表された透明度を含む色
+    * 例: `rgba(0, 255, 0, 0.5)`
+* 他のキーの値の参照
+    * `@{キー名}`と書くと他のキーの値の参照になります。`{キー名}`は参照したいキーの名前に置き換えます。
+    * 例: `@panel`
+* 定数(後述)の参照
+    * `${定数名}`と書くと定数の参照になります。`{定数名}`は参照したい定数の名前に置き換えます。
+    * 例: `$main`
+* 関数(後述)
+    * `:{関数名}<{引数}<{色}`
+
+#### 定数
+「CSS変数として出力はしたくないが、他のCSS変数の値として使いまわしたい」値があるときは、定数を使うと便利です。 キー名を`$`で始めると、そのキーはCSS変数として出力されません。
+
+#### 関数
+wip

src/docs/ar-SA/features/timeline.md

@@ -0,0 +1,31 @@
+# الخيط الزمني
+タイムラインは、[ノート](./note)が時系列で表示される機能です。 タイムラインには以下で示す種類があり、種類によって表示されるノートも異なります。 なお、タイムラインの種類によってはサーバーにより無効になっている場合があります。
+
+## الرئيسي
+自分のフォローしているユーザーの投稿が流れます。HTLと略されます。
+
+## المحلي
+全てのローカルユーザーの「ホーム」指定されていない投稿が流れます。LTLと略されます。
+
+## الاجتماعي
+自分のフォローしているユーザーの投稿と、全てのローカルユーザーの「ホーム」指定されていない投稿が流れます。STLと略されます。
+
+## الشامل
+全てのローカルユーザーの「ホーム」指定されていない投稿と、サーバーに届いた全てのリモートユーザーの「ホーム」指定されていない投稿が流れます。GTLと略されます。
+
+## 比較
+| ソース          |            |         | الخيط الزمني |           |        |
+| ------------ | ---------- | ------- | ------------ | --------- | ------ |
+| المستخدمون   | 公開範囲       | الرئيسي | المحلي       | الاجتماعي | الشامل |
+| ローカル (フォロー)  | 公開         | ✔       | ✔            | ✔         | ✔      |
+|              | الرئيسي    | ✔       |              | ✔         |        |
+|              | المتابِعين | ✔       | ✔            | ✔         | ✔      |
+| リモート (フォロー)  | 公開         | ✔       |              | ✔         | ✔      |
+|              | الرئيسي    | ✔       |              | ✔         |        |
+|              | المتابِعين | ✔       |              | ✔         | ✔      |
+| ローカル (未フォロー) | 公開         |         | ✔            | ✔         | ✔      |
+|              | الرئيسي    |         |              |           |        |
+|              | المتابِعين |         |              |           |        |
+| リモート (未フォロー) | 公開         |         |              |           | ✔      |
+|              | الرئيسي    |         |              |           |        |
+|              | المتابِعين |         |              |           |        |