Merge branch 'develop' into vue3

2020-07-30 10:34:39 +09:00
parent 098d960f10 770e7378be
commit 66f6c8c3fd
101 changed files with 1671 additions and 370 deletions
--- a/src/client/components/deck/antenna-column.vue
+++ b/src/client/components/deck/antenna-column.vue
@@ -4,7 +4,7 @@
 		<fa :icon="faSatellite"/><span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>

-	<x-timeline ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => $emit('loaded')"/>
+	<x-timeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => $emit('loaded')"/>
 </x-column>
 </template>

@@ -33,7 +33,6 @@ export default defineComponent({

 	data() {
 		return {
-			menu: null,
 			faSatellite
 		};
 	},
@@ -47,28 +46,36 @@ export default defineComponent({
 	created() {
 		this.menu = [{
 			icon: faCog,
-			text: this.$t('antenna'),
-			action: async () => {
-				const antennas = await this.$root.api('antennas/list');
-				this.$root.dialog({
-					title: this.$t('antenna'),
-					type: null,
-					select: {
-						items: antennas.map(x => ({
-							value: x, text: x.name
-						}))
-					},
-					showCancelButton: true
-				}).then(({ canceled, result: antenna }) => {
-					if (canceled) return;
-					this.column.antennaId = antenna.id;
-					this.$store.commit('deviceUser/updateDeckColumn', this.column);
-				});
-			}
+			text: this.$t('selectAntenna'),
+			action: this.setAntenna
 		}];
 	},

+	mounted() {
+		if (this.column.antennaId == null) {
+			this.setAntenna();
+		}
+	},
+
 	methods: {
+		async setAntenna() {
+			const antennas = await this.$root.api('antennas/list');
+			const { canceled, result: antenna } = await this.$root.dialog({
+				title: this.$t('selectAntenna'),
+				type: null,
+				select: {
+					items: antennas.map(x => ({
+						value: x, text: x.name
+					})),
+				default: this.column.antennaId
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;
+			Vue.set(this.column, 'antennaId', antenna.id);
+			this.$store.commit('deviceUser/updateDeckColumn', this.column);
+		},
+
 		focus() {
 			(this.$refs.timeline as any).focus();
 		}
--- a/src/client/components/deck/column.vue
+++ b/src/client/components/deck/column.vue
@@ -150,37 +150,37 @@ export default defineComponent({
 				}
 			}, null, {
 				icon: faArrowLeft,
-				text: this.$t('swap-left'),
+				text: this.$t('_deck.swapLeft'),
 				action: () => {
 					this.$store.commit('deviceUser/swapLeftDeckColumn', this.column.id);
 				}
 			}, {
 				icon: faArrowRight,
-				text: this.$t('swap-right'),
+				text: this.$t('_deck.swapRight'),
 				action: () => {
 					this.$store.commit('deviceUser/swapRightDeckColumn', this.column.id);
 				}
 			}, this.isStacked ? {
 				icon: faArrowUp,
-				text: this.$t('swap-up'),
+				text: this.$t('_deck.swapUp'),
 				action: () => {
 					this.$store.commit('deviceUser/swapUpDeckColumn', this.column.id);
 				}
 			} : undefined, this.isStacked ? {
 				icon: faArrowDown,
-				text: this.$t('swap-down'),
+				text: this.$t('_deck.swapDown'),
 				action: () => {
 					this.$store.commit('deviceUser/swapDownDeckColumn', this.column.id);
 				}
 			} : undefined, null, {
 				icon: faWindowRestore,
-				text: this.$t('stack-left'),
+				text: this.$t('_deck.stackLeft'),
 				action: () => {
 					this.$store.commit('deviceUser/stackLeftDeckColumn', this.column.id);
 				}
 			}, this.isStacked ? {
 				icon: faWindowMaximize,
-				text: this.$t('pop-right'),
+				text: this.$t('_deck.popRight'),
 				action: () => {
 					this.$store.commit('deviceUser/popRightDeckColumn', this.column.id);
 				}
--- a/src/client/components/deck/list-column.vue
+++ b/src/client/components/deck/list-column.vue
@@ -46,7 +46,7 @@ export default defineComponent({
 	created() {
 		this.menu = [{
 			icon: faCog,
-			text: this.$t('list'),
+			text: this.$t('selectList'),
 			action: this.setList
 		}];
 	},
@@ -61,7 +61,7 @@ export default defineComponent({
 		async setList() {
 			const lists = await this.$root.api('users/lists/list');
 			const { canceled, result: list } = await this.$root.dialog({
-				title: this.$t('list'),
+				title: this.$t('selectList'),
 				type: null,
 				select: {
 					items: lists.map(x => ({
--- a/src/client/components/deck/notifications-column.vue
+++ b/src/client/components/deck/notifications-column.vue
@@ -45,14 +45,14 @@ export default defineComponent({

 		this.menu = [{
 			icon: faCog,
-			text: this.$t('@.notification-type'),
+			text: this.$t('notificationType'),
 			action: () => {
 				this.$root.dialog({
-					title: this.$t('@.notification-type'),
+					title: this.$t('notificationType'),
 					type: null,
 					select: {
 						items: ['all', 'follow', 'mention', 'reply', 'renote', 'quote', 'reaction', 'pollVote', 'receiveFollowRequest'].map(x => ({
-							value: x, text: this.$t('@.notification-types.' + x)
+							value: x, text: this.$t(`_notification._types.${x}`)
 						}))
 						default: this.column.notificationType,
 					},
--- a/src/client/components/deck/widgets-column.vue
+++ b/src/client/components/deck/widgets-column.vue
@@ -5,9 +5,12 @@
 	<div class="wtdtxvec">
 		<template v-if="edit">
 			<header>
-				<select v-model="widgetAdderSelected" @change="addWidget">
-					<option v-for="widget in widgets" :value="widget" :key="widget">{{ widget }}</option>
-				</select>
+				<mk-select v-model="widgetAdderSelected" style="margin-bottom: var(--margin)">
+					<template #label>{{ $t('selectWidget') }}</template>
+					<option v-for="widget in widgets" :value="widget" :key="widget">{{ $t(`_widgets.${widget}`) }}</option>
+				</mk-select>
+				<mk-button inline @click="addWidget" primary><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
+				<mk-button inline @click="edit = false">{{ $t('close') }}</mk-button>
 			</header>
 			<x-draggable
 				:list="column.widgets"
@@ -15,7 +18,7 @@
 				@sort="onWidgetSort"
 			>
 				<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @click="widgetFunc(widget.id)">
-					<button class="remove _button" @click="removeWidget(widget)"><fa :icon="faTimes"/></button>
+					<button class="remove _button" @click.prevent.stop="removeWidget(widget)"><fa :icon="faTimes"/></button>
 					<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" :column="column"/>
 				</div>
 			</x-draggable>
@@ -29,7 +32,9 @@
 import { defineComponent } from 'vue';
 import * as XDraggable from 'vuedraggable';
 import { v4 as uuid } from 'uuid';
-import { faWindowMaximize, faTimes, faCog } from '@fortawesome/free-solid-svg-icons';
+import { faWindowMaximize, faTimes, faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
+import MkSelect from '../../components/ui/select.vue';
+import MkButton from '../../components/ui/button.vue';
 import XColumn from './column.vue';
 import { widgets } from '../../widgets';

@@ -37,6 +42,8 @@ export default defineComponent({
 	components: {
 		XColumn,
 		XDraggable,
+		MkSelect,
+		MkButton,
 	},

 	props: {
@@ -56,7 +63,7 @@ export default defineComponent({
 			menu: null,
 			widgetAdderSelected: null,
 			widgets,
-			faWindowMaximize, faTimes
+			faWindowMaximize, faTimes, faPlus
 		};
 	},

@@ -80,6 +87,8 @@ export default defineComponent({
 		},

 		addWidget() {
+			if (this.widgetAdderSelected == null) return;
+
 			this.$store.commit('deviceUser/addDeckWidget', {
 				id: this.column.id,
 				widget: {
--- a/src/client/components/form-window.vue
+++ b/src/client/components/form-window.vue
@@ -5,10 +5,22 @@
 	</template>
 	<div class="xkpnjxcv">
 		<label v-for="item in Object.keys(form).filter(item => !form[item].hidden)" :key="item">
-			<mk-input v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1"><span v-text="form[item].label || item"></span></mk-input>
-			<mk-input v-else-if="form[item].type === 'string' && !item.multiline" v-model="values[item]" type="text"><span v-text="form[item].label || item"></span></mk-input>
-			<mk-textarea v-else-if="form[item].type === 'string' && item.multiline" v-model="values[item]"><span v-text="form[item].label || item"></span></mk-textarea>
-			<mk-switch v-else-if="form[item].type === 'boolean'" v-model="values[item]"><span v-text="form[item].label || item"></span></mk-switch>
+			<mk-input v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1">
+				<span v-text="form[item].label || item"></span>
+				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
+			</mk-input>
+			<mk-input v-else-if="form[item].type === 'string' && !item.multiline" v-model="values[item]" type="text">
+				<span v-text="form[item].label || item"></span>
+				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
+			</mk-input>
+			<mk-textarea v-else-if="form[item].type === 'string' && item.multiline" v-model="values[item]">
+				<span v-text="form[item].label || item"></span>
+				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
+			</mk-textarea>
+			<mk-switch v-else-if="form[item].type === 'boolean'" v-model="values[item]">
+				<span v-text="form[item].label || item"></span>
+				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
+			</mk-switch>
 		</label>
 	</div>
 </x-window>
@@ -48,7 +60,7 @@ export default defineComponent({

 	created() {
 		for (const item in this.form) {
-			Vue.set(this.values, item, this.form[item].default || null);
+			Vue.set(this.values, item, this.form[item].hasOwnProperty('default') ? this.form[item].default : null);
 		}
 	},

--- a/src/client/components/mini-chart.vue
+++ b/src/client/components/mini-chart.vue
@@ -0,0 +1,89 @@
+<template>
+<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" style="overflow:visible">
+	<defs>
+		<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
+			<stop offset="0%" stop-color="hsl(200, 80%, 70%)"></stop>
+			<stop offset="100%" stop-color="hsl(90, 80%, 70%)"></stop>
+		</linearGradient>
+		<mask :id="maskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
+			<polygon
+				:points="polygonPoints"
+				fill="#fff"
+				fill-opacity="0.5"/>
+			<polyline
+				:points="polylinePoints"
+				fill="none"
+				stroke="#fff"
+				stroke-width="2"/>
+			<circle
+				:cx="headX"
+				:cy="headY"
+				r="3"
+				fill="#fff"/>
+		</mask>
+	</defs>
+	<rect
+		x="-10" y="-10"
+		:width="viewBoxX + 20" :height="viewBoxY + 20"
+		:style="`stroke: none; fill: url(#${ gradientId }); mask: url(#${ maskId })`"/>
+</svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { v4 as uuid } from 'uuid';
+
+export default defineComponent({
+	props: {
+		src: {
+			type: Array,
+			required: true
+		}
+	},
+	data() {
+		return {
+			viewBoxX: 50,
+			viewBoxY: 30,
+			gradientId: uuid(),
+			maskId: uuid(),
+			polylinePoints: '',
+			polygonPoints: '',
+			headX: null,
+			headY: null,
+			clock: null
+		};
+	},
+	watch: {
+		src() {
+			this.draw();
+		}
+	},
+	created() {
+		this.draw();
+
+		// Vueが何故かWatchを発動させない場合があるので
+		this.clock = setInterval(this.draw, 1000);
+	},
+	beforeDestroy() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		draw() {
+			const stats = this.src.slice().reverse();
+			const peak = Math.max.apply(null, stats) || 1;
+
+			const polylinePoints = stats.map((n, i) => [
+				i * (this.viewBoxX / (stats.length - 1)),
+				(1 - (n / peak)) * this.viewBoxY
+			]);
+
+			this.polylinePoints = polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+
+			this.polygonPoints = `0,${ this.viewBoxY } ${ this.polylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
+
+			this.headX = polylinePoints[polylinePoints.length - 1][0];
+			this.headY = polylinePoints[polylinePoints.length - 1][1];
+		}
+	}
+});
+</script>
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -1,7 +1,8 @@
 <template>
 <div
 	class="note _panel"
-	v-show="!isDeleted && !hideThisNote"
+	v-if="!muted"
+	v-show="!isDeleted"
 	:tabindex="!isDeleted ? '-1' : null"
 	:class="{ renote: isRenote }"
 	v-hotkey="keymap"
@@ -34,19 +35,19 @@
 		</div>
 	</div>
 	<article class="article">
-		<mk-avatar class="avatar" :user="appearNote.user" v-once/>
+		<mk-avatar class="avatar" :user="appearNote.user"/>
 		<div class="main">
 			<x-note-header class="header" :note="appearNote" :mini="true"/>
-			<div class="body" v-if="appearNote.deletedAt == null" ref="noteBody">
+			<div class="body" ref="noteBody">
 				<p v-if="appearNote.cw != null" class="cw">
-				<mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" v-once/>
+				<mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
 					<x-cw-button v-model="showContent" :note="appearNote"/>
 				</p>
 				<div class="content" v-show="appearNote.cw == null || showContent">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $t('private') }})</span>
 						<router-link class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><fa :icon="faReply"/></router-link>
-						<mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" v-once/>
+						<mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
 						<a class="rp" v-if="appearNote.renote != null">RN:</a>
 					</div>
 					<div class="files" v-if="appearNote.files.length > 0">
@@ -57,7 +58,7 @@
 					<div class="renote" v-if="appearNote.renote"><x-note-preview :note="appearNote.renote"/></div>
 				</div>
 			</div>
-			<footer v-if="appearNote.deletedAt == null" class="footer">
+			<footer class="footer">
 				<x-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
 				<button @click="reply()" class="button _button">
 					<template v-if="appearNote.reply"><fa :icon="faReplyAll"/></template>
@@ -80,11 +81,17 @@
 					<fa :icon="faEllipsisH"/>
 				</button>
 			</footer>
-			<div class="deleted" v-if="appearNote.deletedAt != null">{{ $t('deleted') }}</div>
 		</div>
 	</article>
 	<x-sub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
 </div>
+<div v-else class="_panel muted" @click="muted = false">
+	<i18n-t path="userSaysSomething" tag="small">
+		<router-link class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.userId" place="name">
+			<mk-user-name :user="appearNote.user"/>
+		</router-link>
+	</i18n-t>
+</div>
 </template>

 <script lang="ts">
@@ -106,9 +113,16 @@ import pleaseLogin from '../scripts/please-login';
 import { focusPrev, focusNext } from '../scripts/focus';
 import { url } from '../config';
 import copyToClipboard from '../scripts/copy-to-clipboard';
+import { checkWordMute } from '../scripts/check-word-mute';
+import { utils } from '@syuilo/aiscript';
 import { userPage } from '../filters/user';

 export default defineComponent({
+	model: {
+		prop: 'note',
+		event: 'updated'
+	},
+
 	components: {
 		XSub,
 		XNoteHeader,
@@ -143,7 +157,8 @@ export default defineComponent({
 			conversation: [],
 			replies: [],
 			showContent: false,
-			hideThisNote: false,
+			isDeleted: false,
+			muted: false,
 			noteBody: this.$refs.noteBody,
 			faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug
 		};
@@ -187,10 +202,6 @@ export default defineComponent({
 			return this.isRenote ? this.note.renote : this.note;
 		},

-		isDeleted(): boolean {
-			return this.appearNote.deletedAt != null || this.note.deletedAt != null;
-		},
-
 		isMyNote(): boolean {
 			return this.$store.getters.isSignedIn && (this.$store.state.i.id === this.appearNote.userId);
 		},
@@ -232,11 +243,22 @@ export default defineComponent({
 		}
 	},

-	created() {
+	async created() {
 		if (this.$store.getters.isSignedIn) {
 			this.connection = this.$root.stream;
 		}

+		// plugin
+		if (this.$store.state.noteViewInterruptors.length > 0) {
+			let result = this.note;
+			for (const interruptor of this.$store.state.noteViewInterruptors) {
+				result = utils.valToJs(await interruptor.handler(JSON.parse(JSON.stringify(result))));
+			}
+			this.$emit('updated', Object.freeze(result));
+		}
+
+		this.muted = await checkWordMute(this.appearNote, this.$store.state.i, this.$store.state.settings.mutedWords);
+
 		if (this.detail) {
 			this.$root.api('notes/children', {
 				noteId: this.appearNote.id,
@@ -262,7 +284,7 @@ export default defineComponent({
 			this.connection.on('_connected_', this.onStreamConnected);
 		}

-		this.noteBody = this.$refs.noteBody
+		this.noteBody = this.$refs.noteBody;
 	},

 	beforeDestroy() {
@@ -274,11 +296,24 @@ export default defineComponent({
 	},

 	methods: {
+		updateAppearNote(v) {
+			this.$emit('updated', Object.freeze(this.isRenote ? {
+				...this.note,
+				renote: {
+					...this.note.renote,
+					...v
+				}
+			} : {
+				...this.note,
+				...v
+			}));
+		},
+
 		readPromo() {
 			(this as any).$root.api('promo/read', {
 				noteId: this.appearNote.id
 			});
-			this.hideThisNote = true;
+			this.isDeleted = true;
 		},

 		capture(withHandler = false) {
@@ -310,67 +345,88 @@ export default defineComponent({
 				case 'reacted': {
 					const reaction = body.reaction;

+					// DeepではなくShallowコピーであることに注意。n.reactions[reaction] = hogeとかしないように(親からもらったデータをミューテートすることになるので)
+					let n = {
+						...this.appearNote,
+					};
+
 					if (body.emoji) {
 						const emojis = this.appearNote.emojis || [];
 						if (!emojis.includes(body.emoji)) {
-							emojis.push(body.emoji);
-							Vue.set(this.appearNote, 'emojis', emojis);
+							n.emojis = [...emojis, body.emoji];
 						}
 					}

-					if (this.appearNote.reactions == null) {
-						Vue.set(this.appearNote, 'reactions', {});
-					}
-
-					if (this.appearNote.reactions[reaction] == null) {
-						Vue.set(this.appearNote.reactions, reaction, 0);
-					}
+					// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
+					const currentCount = (this.appearNote.reactions || {})[reaction] || 0;

 					// Increment the count
-					this.appearNote.reactions[reaction]++;
+					n.reactions = {
+						...this.appearNote.reactions,
+						[reaction]: currentCount + 1
+					};

-					if (body.userId == this.$store.state.i.id) {
-						Vue.set(this.appearNote, 'myReaction', reaction);
+					if (body.userId === this.$store.state.i.id) {
+						n.myReaction = reaction;
 					}
+
+					this.updateAppearNote(n);
 					break;
 				}

 				case 'unreacted': {
 					const reaction = body.reaction;

-					if (this.appearNote.reactions == null) {
-						return;
-					}
+					// DeepではなくShallowコピーであることに注意。n.reactions[reaction] = hogeとかしないように(親からもらったデータをミューテートすることになるので)
+					let n = {
+						...this.appearNote,
+					};

-					if (this.appearNote.reactions[reaction] == null) {
-						return;
-					}
+					// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
+					const currentCount = (this.appearNote.reactions || {})[reaction] || 0;

 					// Decrement the count
-					if (this.appearNote.reactions[reaction] > 0) this.appearNote.reactions[reaction]--;
+					n.reactions = {
+						...this.appearNote.reactions,
+						[reaction]: Math.max(0, currentCount - 1)
+					};

-					if (body.userId == this.$store.state.i.id) {
-						Vue.set(this.appearNote, 'myReaction', null);
+					if (body.userId === this.$store.state.i.id) {
+						n.myReaction = null;
 					}
+
+					this.updateAppearNote(n);
 					break;
 				}

 				case 'pollVoted': {
 					const choice = body.choice;
-					this.appearNote.poll.choices[choice].votes++;
-					if (body.userId == this.$store.state.i.id) {
-						Vue.set(this.appearNote.poll.choices[choice], 'isVoted', true);
-					}
+
+					// DeepではなくShallowコピーであることに注意。n.reactions[reaction] = hogeとかしないように(親からもらったデータをミューテートすることになるので)
+					let n = {
+						...this.appearNote,
+					};
+
+					n.poll = {
+						...this.appearNote.poll,
+						choices: {
+							...this.appearNote.poll.choices,
+							[choice]: {
+								...this.appearNote.poll.choices[choice],
+								votes: this.appearNote.poll.choices[choice].votes + 1,
+								...(body.userId === this.$store.state.i.id ? {
+									isVoted: true
+								} : {})
+							}
+						}
+					};
+
+					this.updateAppearNote(n);
 					break;
 				}

 				case 'deleted': {
-					Vue.set(this.appearNote, 'deletedAt', body.deletedAt);
-					Vue.set(this.appearNote, 'renote', null);
-					this.appearNote.text = null;
-					this.appearNote.fileIds = [];
-					this.appearNote.poll = null;
-					this.appearNote.cw = null;
+					this.isDeleted = true;
 					break;
 				}
 			}
@@ -639,7 +695,7 @@ export default defineComponent({
 						this.$root.api('notes/delete', {
 							noteId: this.note.id
 						});
-						Vue.set(this.note, 'deletedAt', new Date());
+						this.isDeleted = true;
 					}
 				}],
 				source: this.$refs.renoteTime,
@@ -928,10 +984,6 @@ export default defineComponent({
 					}
 				}
 			}
-
-			> .deleted {
-				opacity: 0.7;
-			}
 		}
 	}

@@ -998,4 +1050,10 @@ export default defineComponent({
 		}
 	}
 }
+
+.muted {
+	padding: 8px;
+	text-align: center;
+	opacity: 0.7;
+}
 </style>
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -15,7 +15,7 @@
 	</div>

 	<x-list ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
-		<x-note :note="note" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
+		<x-note :note="note" @updated="updated(note, $event)" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
 	</x-list>

 	<div v-show="more && !reversed" style="margin-top: var(--margin);">
@@ -62,14 +62,15 @@ export default defineComponent({
 			default: false
 		},

-		extract: {
+		prop: {
+			type: String,
 			required: false
 		}
 	},

 	computed: {
 		notes(): any[] {
-			return this.extract ? this.extract(this.items) : this.items;
+			return this.prop ? this.items.map(item => item[this.prop]) : this.items;
 		},

 		reversed(): boolean {
@@ -78,6 +79,15 @@ export default defineComponent({
 	},

 	methods: {
+		updated(oldValue, newValue) {
+			const i = this.notes.findIndex(n => n === oldValue);
+			if (this.prop) {
+				Vue.set(this.items[i], this.prop, newValue);
+			} else {
+				Vue.set(this.items, i, newValue);
+			}
+		},
+
 		focus() {
 			this.$refs.notes.focus();
 		}
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mfcuwfyp">
 	<x-list class="notifications" :items="items" v-slot="{ item: notification }">
-		<x-note v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" :key="notification.id"/>
+		<x-note v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @updated="noteUpdated(notification.note, $event)" :key="notification.id"/>
 		<x-notification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
 	</x-list>

@@ -75,11 +75,20 @@ export default defineComponent({
 				this.$root.stream.send('readNotification', {
 					id: notification.id
 				});
-
-				notification.isRead = true;
 			}

-			this.prepend(notification);
+			this.prepend({
+				...notification,
+				isRead: document.visibilityState === 'visible'
+			});
+		},
+
+		noteUpdated(oldValue, newValue) {
+			const i = this.items.findIndex(n => n.note === oldValue);
+			Vue.set(this.items, i, {
+				...this.items[i],
+				note: newValue
+			});
 		},
 	}
 });
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -69,6 +69,7 @@ import getAcct from '../../misc/acct/render';
 import { formatTimeString } from '../../misc/format-time-string';
 import { selectDriveFile } from '../scripts/select-drive-file';
 import { noteVisibilities } from '../../types';
+import { utils } from '@syuilo/aiscript';

 export default defineComponent({
 	components: {
@@ -533,9 +534,8 @@ export default defineComponent({
 			localStorage.setItem('drafts', JSON.stringify(data));
 		},

-		post() {
-			this.posting = true;
-			this.$root.api('notes/create', {
+		async post() {
+			let data = {
 				text: this.text == '' ? undefined : this.text,
 				fileIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
 				replyId: this.reply ? this.reply.id : undefined,
@@ -546,7 +546,17 @@ export default defineComponent({
 				visibility: this.visibility,
 				visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined,
 				viaMobile: this.$root.isMobile
-			}).then(data => {
+			};
+
+			// plugin
+			if (this.$store.state.notePostInterruptors.length > 0) {
+				for (const interruptor of this.$store.state.notePostInterruptors) {
+					data = utils.valToJs(await interruptor.handler(JSON.parse(JSON.stringify(data))));
+				}
+			}
+
+			this.posting = true;
+			this.$root.api('notes/create', data).then(() => {
 				this.clear();
 				this.deleteDraft();
 				this.$emit('posted');
--- a/src/client/components/tab.vue
+++ b/src/client/components/tab.vue
@@ -0,0 +1,46 @@
+<template>
+<div class="pxhvhrfw" v-size="[{ max: 500 }]">
+	<button v-for="item in items" class="_button" @click="$emit('input', item.value)" :class="{ active: value === item.value }" :key="item.value"><fa v-if="item.icon" :icon="item.icon" class="icon"/>{{ item.label }}</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		items: {
+			type: Array,
+			required: true,
+		},
+		value: {
+			required: true,
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.pxhvhrfw {
+	display: flex;
+
+	> button {
+		flex: 1;
+		padding: 11px 8px 8px 8px;
+		border-bottom: solid 3px transparent;
+
+		&.active {
+			color: var(--accent);
+			border-bottom-color: var(--accent);
+		}
+
+		> .icon {
+			margin-right: 6px;
+		}
+	}
+
+	&.max-width_500px {
+		font-size: 80%;
+	}
+}
+</style>
--- a/src/client/components/timeline.vue
+++ b/src/client/components/timeline.vue
@@ -47,8 +47,7 @@ export default defineComponent({

 	created() {
 		const prepend = note => {
-			const _note = JSON.parse(JSON.stringify(note));	// deepcopy
-			(this.$refs.tl as any).prepend(_note);
+			(this.$refs.tl as any).prepend(note);

 			this.$emit('note');