Merge branch 'develop'

CHANGELOG.md

@@ -17,6 +17,23 @@ npm i -g ts-node
 npm run migrate
 ```
 
+11.20.0 (2019/05/27)
+--------------------
+### ✨Improvements
+* 管理画面からリモートファイルのキャッシュをすべて削除できるように
+* 投稿フォームに投稿のURLをペーストしようとすると引用RNにできるように
+* モバイル版の投稿フォームにファイルをドロップできるように
+* モバイル版でも投稿の下書き自動保存ができるように
+* リモートファイルのキャッシュが期限切れになったときにサムネイルが無くならないように
+* ジョブキュー管理画面を強化
+
+### 🐛Fixes
+* 投稿内のローカルなURLプレビューをクリックしたとき not found になることがある問題を修正
+* デスクトップでユーザーページに遷移するときページが再度読み込みされることがある問題を修正
+* フォロー申請自動承認オプションが常にオフで表示される問題を修正
+* ポートを設定せずに起動したときに適切なエラーメッセージが表示されない問題を修正
+* i18n
+
 11.19.1 (2019/05/26)
 --------------------
 ### 🐛Fixes

locales/ja-JP.yml

@@ -101,6 +101,34 @@ common:
     follow-users-to-make-your-timeline: "ユーザーをフォローすると投稿がタイムラインに表示されます。"
     explore: "ユーザーを探索する"
 
+  post-form:
+    attach-location-information: "位置情報を添付する"
+    hide-contents: "内容を隠す"
+    reply-placeholder: "この投稿への返信..."
+    quote-placeholder: "この投稿を引用..."
+    option-quote-placeholder: "この投稿を引用... (オプション)"
+    quote-attached: "引用付き"
+    quote-question: "引用として添付しますか？"
+    submit: "投稿"
+    reply: "返信"
+    renote: "Renote"
+    posting: "投稿中"
+    attach-media-from-local: "PCからメディアを添付"
+    attach-media-from-drive: "ドライブからメディアを添付"
+    insert-a-kao: "v('ω')v"
+    create-poll: "アンケートを作成"
+    text-remain: "残り{}文字"
+    recent-tags: "最近"
+    local-only-message: "この投稿はローカルにのみ公開されます"
+    click-to-tagging: "クリックでタグ付け"
+    visibility: "公開範囲"
+    geolocation-alert: "お使いの端末は位置情報に対応していません"
+    error: "エラー"
+    enter-username: "ユーザー名を入力してください"
+    add-visible-user: "ユーザーを追加"
+    cw-placeholder: "内容への注釈 (オプション)"
+    username-prompt: "ユーザー名を入力してください"
+
   weekday-short:
     sunday: "日"
     monday: "月"
@@ -1017,34 +1045,12 @@ desktop/views/components/notifications.vue:
   empty: "ありません！"
 
 desktop/views/components/post-form.vue:
-  add-visible-user: "+ユーザーを追加"
-  attach-location-information: "位置情報を添付する"
-  hide-contents: "内容を隠す"
-  reply-placeholder: "この投稿への返信..."
-  quote-placeholder: "この投稿を引用..."
-  submit: "投稿"
-  reply: "返信"
-  renote: "Renote"
   posted: "投稿しました！"
   replied: "返信しました！"
   reposted: "Renoteしました！"
   note-failed: "投稿に失敗しました"
   reply-failed: "返信に失敗しました"
   renote-failed: "Renoteに失敗しました"
-  posting: "投稿中"
-  attach-media-from-local: "PCからメディアを添付"
-  attach-media-from-drive: "ドライブからメディアを添付"
-  insert-a-kao: "v('ω')v"
-  create-poll: "アンケートを作成"
-  text-remain: "残り{}文字"
-  recent-tags: "最近"
-  local-only-message: "この投稿はローカルにのみ公開されます"
-  click-to-tagging: "クリックでタグ付け"
-  visibility: "公開範囲"
-  geolocation-alert: "お使いの端末は位置情報に対応していません"
-  error: "エラー"
-  enter-username: "ユーザー名を入力してください"
-  annotations: "内容への注釈 (オプション)"
 
 desktop/views/components/post-form-window.vue:
   note: "新規投稿"
@@ -1234,6 +1240,33 @@ admin/views/dashboard.vue:
 admin/views/queue.vue:
   title: "キュー"
   remove-all-jobs: "すべてのジョブをクリア"
+  jobs: "ジョブ"
+  queue: "キュー"
+  domains:
+    deliver: "配送"
+    inbox: "受信"
+    db: "データベース"
+    objectStorage: "オブジェクトストレージ"
+  state: "状態"
+  states:
+    active: "処理中"
+    delayed: "予約済み"
+    waiting: "順番待ち"
+  result-is-truncated: "結果は省略されています"
+  other-queues: "その他のキュー"
+
+admin/views/logs.vue:
+  logs: "ログ"
+  domain: "ドメイン"
+  level: "レベル"
+  levels:
+    all: "全て"
+    info: "情報"
+    success: "成功"
+    warning: "警告"
+    error: "エラー"
+    debug: "デバッグ"
+  delete-all: "全て削除"
 
 admin/views/abuse.vue:
   title: "スパム報告"
@@ -1389,6 +1422,9 @@ admin/views/drive.vue:
   unmark-as-sensitive: "閲覧注意を解除"
   marked-as-sensitive: "閲覧注意に設定しました"
   unmarked-as-sensitive: "閲覧注意を解除しました"
+  clean-remote-files: "リモートファイルのキャッシュを削除"
+  clean-remote-files-are-you-sure: "すべてのリモートファイルのキャッシュを削除してもよろしいですか？"
+  clean-up: "クリーンアップ"
 
 admin/views/users.vue:
   operation: "操作"
@@ -1541,6 +1577,7 @@ admin/views/federation.vue:
     day: "1日ごと"
   blocked-hosts: "ブロック"
   blocked-hosts-info: "ブロックしたいホストを改行で区切って記述します。"
+  save: "保存"
 
 desktop/views/pages/welcome.vue:
   about: "詳しく..."
@@ -1703,18 +1740,6 @@ mobile/views/components/note-sub.vue:
 mobile/views/components/notifications.vue:
   empty: "ありません！"
 
-mobile/views/components/post-form.vue:
-  add-visible-user: "ユーザーを追加"
-  submit: "投稿"
-  reply: "返信"
-  renote: "Renote"
-  quote-placeholder: "この投稿を引用... (オプション)"
-  reply-placeholder: "この投稿への返信..."
-  cw-placeholder: "内容への注釈 (オプション)"
-  geolocation-alert: "お使いの端末は位置情報に対応していません"
-  error: "エラー"
-  username-prompt: "ユーザー名を入力してください"
-
 mobile/views/components/sub-note-content.vue:
   private: "この投稿は非公開です"
   deleted: "この投稿は削除されました"

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "11.19.1",
+	"version": "11.20.0",
 	"codename": "daybreak",
 	"repository": {
 		"type": "git",

src/boot/master.ts

@@ -50,7 +50,7 @@ export async function masterMain() {
 		// initialize app
 		config = await init();
 
-		if (config.port == null) {
+		if (config.port == null || Number.isNaN(config.port)) {
 			bootLogger.error('The port is not configured. Please configure port.', null, true);
 			process.exit(1);
 		}

src/client/app/admin/views/drive.vue

@@ -14,6 +14,10 @@
 			<ui-button @click="show()"><fa :icon="faSearch"/> {{ $t('lookup') }}</ui-button>
 			<ui-textarea v-if="file" :value="file | json5" readonly tall style="margin-top:16px;"></ui-textarea>
 		</section>
+		<section>
+			<ui-button @click="cleanUp()"><fa :icon="faTrashAlt"/> {{ $t('clean-up') }}</ui-button>
+			<ui-button @click="cleanRemoteFiles()"><fa :icon="faTrashAlt"/> {{ $t('clean-remote-files') }}</ui-button>
+		</section>
 	</ui-card>
 
 	<ui-card>
@@ -227,6 +231,29 @@ export default Vue.extend({
 				});
 			});
 		},
+
+		cleanRemoteFiles() {
+			this.$root.dialog({
+				type: 'warning',
+				text: this.$t('clean-remote-files-are-you-sure'),
+				showCancelButton: true
+			}).then(({ canceled }) => {
+				if (canceled) return;
+				this.$root.api('admin/drive/clean-remote-files');
+				this.$root.dialog({
+					type: 'success',
+					splash: true
+				});
+			});
+		},
+
+		cleanUp() {
+			this.$root.api('admin/drive/cleanup');
+			this.$root.dialog({
+				type: 'success',
+				splash: true
+			});
+		}
 	}
 });
 </script>

src/client/app/admin/views/queue.chart.vue

@@ -0,0 +1,181 @@
+<template>
+<div>
+	<ui-info warn v-if="latestStats && latestStats.waiting > 0">The queue is jammed.</ui-info>
+	<ui-horizon-group inputs v-if="latestStats" class="fit-bottom">
+		<ui-input :value="latestStats.activeSincePrevTick | number" type="text" readonly>
+			<span>Process</span>
+			<template #prefix><fa :icon="fasPlayCircle"/></template>
+			<template #suffix>jobs/tick</template>
+		</ui-input>
+		<ui-input :value="latestStats.active | number" type="text" readonly>
+			<span>Active</span>
+			<template #prefix><fa :icon="farPlayCircle"/></template>
+			<template #suffix>jobs</template>
+		</ui-input>
+		<ui-input :value="latestStats.waiting | number" type="text" readonly>
+			<span>Waiting</span>
+			<template #prefix><fa :icon="faStopCircle"/></template>
+			<template #suffix>jobs</template>
+		</ui-input>
+		<ui-input :value="latestStats.delayed | number" type="text" readonly>
+			<span>Delayed</span>
+			<template #prefix><fa :icon="faStopwatch"/></template>
+			<template #suffix>jobs</template>
+		</ui-input>
+	</ui-horizon-group>
+	<div ref="chart" class="wptihjuy"></div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../i18n';
+import ApexCharts from 'apexcharts';
+import * as tinycolor from 'tinycolor2';
+import { faStopwatch, faPlayCircle as fasPlayCircle } from '@fortawesome/free-solid-svg-icons';
+import { faStopCircle, faPlayCircle as farPlayCircle } from '@fortawesome/free-regular-svg-icons';
+
+export default Vue.extend({
+	i18n: i18n('admin/views/queue.vue'),
+
+	props: {
+		type: {
+			type: String,
+			required: true
+		},
+		connection: {
+			required: true
+		},
+		limit: {
+			type: Number,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			stats: [],
+			chart: null,
+			faStopwatch, faStopCircle, farPlayCircle, fasPlayCircle
+		};
+	},
+
+	computed: {
+		latestStats(): any {
+			return this.stats.length > 0 ? this.stats[this.stats.length - 1][this.type] : null;
+		}
+	},
+
+	watch: {
+		stats(stats) {
+			this.chart.updateSeries([{
+				name: 'Process',
+				type: 'area',
+				data: stats.map((x, i) => ({ x: i, y: x[this.type].activeSincePrevTick }))
+			}, {
+				name: 'Active',
+				type: 'area',
+				data: stats.map((x, i) => ({ x: i, y: x[this.type].active }))
+			}, {
+				name: 'Waiting',
+				type: 'line',
+				data: stats.map((x, i) => ({ x: i, y: x[this.type].waiting }))
+			}, {
+				name: 'Delayed',
+				type: 'line',
+				data: stats.map((x, i) => ({ x: i, y: x[this.type].delayed }))
+			}]);
+		},
+	},
+
+	mounted() {
+		this.chart = new ApexCharts(this.$refs.chart, {
+			chart: {
+				id: this.type,
+				group: 'queue',
+				type: 'area',
+				height: 200,
+				animations: {
+					dynamicAnimation: {
+						enabled: false
+					}
+				},
+				toolbar: {
+					show: false
+				},
+				zoom: {
+					enabled: false
+				}
+			},
+			dataLabels: {
+				enabled: false
+			},
+			grid: {
+				clipMarkers: false,
+				borderColor: 'rgba(0, 0, 0, 0.1)',
+				xaxis: {
+					lines: {
+						show: true,
+					}
+				},
+			},
+			stroke: {
+				curve: 'straight',
+				width: 2
+			},
+			tooltip: {
+				enabled: false
+			},
+			legend: {
+				labels: {
+					colors: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
+				},
+			},
+			series: [] as any,
+			colors: ['#00E396', '#00BCD4', '#FFB300', '#e53935'],
+			xaxis: {
+				type: 'numeric',
+				labels: {
+					show: false
+				},
+				tooltip: {
+					enabled: false
+				}
+			},
+			yaxis: {
+				show: false,
+				min: 0,
+			}
+		});
+
+		this.chart.render();
+
+		this.connection.on('stats', this.onStats);
+		this.connection.on('statsLog', this.onStatsLog);
+
+		this.$once('hook:beforeDestroy', () => {
+			if (this.chart) this.chart.destroy();
+		});
+	},
+
+	methods: {
+		onStats(stats) {
+			this.stats.push(stats);
+			if (this.stats.length > this.limit) this.stats.shift();
+		},
+
+		onStatsLog(statsLog) {
+			for (const stats of statsLog.reverse()) {
+				this.onStats(stats);
+			}
+		},
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.wptihjuy
+	min-height 200px !important
+	margin -8px
+
+</style>

src/client/app/admin/views/queue.vue

@@ -2,59 +2,27 @@
 <div>
 	<ui-card>
 		<template #title><fa :icon="faChartBar"/> {{ $t('title') }}</template>
-		<section class="wptihjuy">
+		<section>
-			<header><fa :icon="faPaperPlane"/> Deliver</header>
+			<header><fa :icon="faPaperPlane"/> {{ $t('domains.deliver') }}</header>
-			<ui-info warn v-if="latestStats && latestStats.deliver.waiting > 0">The queue is jammed.</ui-info>
+			<x-chart v-if="connection" :connection="connection" :limit="chartLimit" type="deliver"/>
-			<ui-horizon-group inputs v-if="latestStats" class="fit-bottom">
-				<ui-input :value="latestStats.deliver.activeSincePrevTick | number" type="text" readonly>
-					<span>Process</span>
-					<template #prefix><fa :icon="fasPlayCircle"/></template>
-					<template #suffix>jobs/tick</template>
-				</ui-input>
-				<ui-input :value="latestStats.deliver.active | number" type="text" readonly>
-					<span>Active</span>
-					<template #prefix><fa :icon="farPlayCircle"/></template>
-					<template #suffix>jobs</template>
-				</ui-input>
-				<ui-input :value="latestStats.deliver.waiting | number" type="text" readonly>
-					<span>Waiting</span>
-					<template #prefix><fa :icon="faStopCircle"/></template>
-					<template #suffix>jobs</template>
-				</ui-input>
-				<ui-input :value="latestStats.deliver.delayed | number" type="text" readonly>
-					<span>Delayed</span>
-					<template #prefix><fa :icon="faStopwatch"/></template>
-					<template #suffix>jobs</template>
-				</ui-input>
-			</ui-horizon-group>
-			<div ref="deliverChart" class="chart"></div>
 		</section>
-		<section class="wptihjuy">
+		<section>
-			<header><fa :icon="faInbox"/> Inbox</header>
+			<header><fa :icon="faInbox"/> {{ $t('domains.inbox') }}</header>
-			<ui-info warn v-if="latestStats && latestStats.inbox.waiting > 0">The queue is jammed.</ui-info>
+			<x-chart v-if="connection" :connection="connection" :limit="chartLimit" type="inbox"/>
-			<ui-horizon-group inputs v-if="latestStats" class="fit-bottom">
+		</section>
-				<ui-input :value="latestStats.inbox.activeSincePrevTick | number" type="text" readonly>
+		<section>
-					<span>Process</span>
+			<details>
-					<template #prefix><fa :icon="fasPlayCircle"/></template>
+				<summary>{{ $t('other-queues') }}</summary>
-					<template #suffix>jobs/tick</template>
+				<section>
-				</ui-input>
+					<header><fa :icon="faDatabase"/> {{ $t('domains.db') }}</header>
-				<ui-input :value="latestStats.inbox.active | number" type="text" readonly>
+					<x-chart v-if="connection" :connection="connection" :limit="chartLimit" type="db"/>
-					<span>Active</span>
+				</section>
-					<template #prefix><fa :icon="farPlayCircle"/></template>
+				<ui-hr/>
-					<template #suffix>jobs</template>
+				<section>
-				</ui-input>
+					<header><fa :icon="faCloud"/> {{ $t('domains.objectStorage') }}</header>
-				<ui-input :value="latestStats.inbox.waiting | number" type="text" readonly>
+					<x-chart v-if="connection" :connection="connection" :limit="chartLimit" type="objectStorage"/>
-					<span>Waiting</span>
+				</section>
-					<template #prefix><fa :icon="faStopCircle"/></template>
+			</details>
-					<template #suffix>jobs</template>
-				</ui-input>
-				<ui-input :value="latestStats.inbox.delayed | number" type="text" readonly>
-					<span>Delayed</span>
-					<template #prefix><fa :icon="faStopwatch"/></template>
-					<template #suffix>jobs</template>
-				</ui-input>
-			</ui-horizon-group>
-			<div ref="inboxChart" class="chart"></div>
 		</section>
 		<section>
 			<ui-button @click="removeAllJobs">{{ $t('remove-all-jobs') }}</ui-button>
@@ -69,9 +37,13 @@
 					<template #label>{{ $t('queue') }}</template>
 					<option value="deliver">{{ $t('domains.deliver') }}</option>
 					<option value="inbox">{{ $t('domains.inbox') }}</option>
+					<option value="db">{{ $t('domains.db') }}</option>
+					<option value="objectStorage">{{ $t('domains.objectStorage') }}</option>
 				</ui-select>
 				<ui-select v-model="state">
 					<template #label>{{ $t('state') }}</template>
+					<option value="active">{{ $t('states.active') }}</option>
+					<option value="waiting">{{ $t('states.waiting') }}</option>
 					<option value="delayed">{{ $t('states.delayed') }}</option>
 				</ui-select>
 			</ui-horizon-group>
@@ -94,74 +66,31 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { faTasks, faInbox, faDatabase, faCloud } from '@fortawesome/free-solid-svg-icons';
+import { faPaperPlane, faChartBar } from '@fortawesome/free-regular-svg-icons';
 import i18n from '../../i18n';
-import ApexCharts from 'apexcharts';
+import XChart from './queue.chart.vue';
-import * as tinycolor from 'tinycolor2';
-import { faTasks, faInbox, faStopwatch, faPlayCircle as fasPlayCircle } from '@fortawesome/free-solid-svg-icons';
-import { faPaperPlane, faStopCircle, faPlayCircle as farPlayCircle, faChartBar } from '@fortawesome/free-regular-svg-icons';
-
-const limit = 200;
 
 export default Vue.extend({
 	i18n: i18n('admin/views/queue.vue'),
 
+	components: {
+		XChart
+	},
+
 	data() {
 		return {
-			stats: [],
+			connection: null,
-			deliverChart: null,
+			chartLimit: 200,
-			inboxChart: null,
 			jobs: [],
 			jobsLimit: 50,
 			domain: 'deliver',
 			state: 'delayed',
-			faTasks, faPaperPlane, faInbox, faStopwatch, faStopCircle, farPlayCircle, fasPlayCircle, faChartBar
+			faTasks, faPaperPlane, faInbox, faChartBar, faDatabase, faCloud
 		};
 	},
 
-	computed: {
-		latestStats(): any {
-			return this.stats[this.stats.length - 1];
-		}
-	},
-
 	watch: {
-		stats(stats) {
-			this.inboxChart.updateSeries([{
-				name: 'Process',
-				type: 'area',
-				data: stats.map((x, i) => ({ x: i, y: x.inbox.activeSincePrevTick }))
-			}, {
-				name: 'Active',
-				type: 'area',
-				data: stats.map((x, i) => ({ x: i, y: x.inbox.active }))
-			}, {
-				name: 'Waiting',
-				type: 'line',
-				data: stats.map((x, i) => ({ x: i, y: x.inbox.waiting }))
-			}, {
-				name: 'Delayed',
-				type: 'line',
-				data: stats.map((x, i) => ({ x: i, y: x.inbox.delayed }))
-			}]);
-			this.deliverChart.updateSeries([{
-				name: 'Process',
-				type: 'area',
-				data: stats.map((x, i) => ({ x: i, y: x.deliver.activeSincePrevTick }))
-			}, {
-				name: 'Active',
-				type: 'area',
-				data: stats.map((x, i) => ({ x: i, y: x.deliver.active }))
-			}, {
-				name: 'Waiting',
-				type: 'line',
-				data: stats.map((x, i) => ({ x: i, y: x.deliver.waiting }))
-			}, {
-				name: 'Delayed',
-				type: 'line',
-				data: stats.map((x, i) => ({ x: i, y: x.deliver.delayed }))
-			}]);
-		},
-
 		domain() {
 			this.jobs = [];
 			this.fetchJobs();
@@ -176,83 +105,14 @@ export default Vue.extend({
 	mounted() {
 		this.fetchJobs();
 
-		const chartOpts = id => ({
+		this.connection = this.$root.stream.useSharedConnection('queueStats');
-			chart: {
+		this.connection.send('requestLog', {
-				id,
-				group: 'queue',
-				type: 'area',
-				height: 200,
-				animations: {
-					dynamicAnimation: {
-						enabled: false
-					}
-				},
-				toolbar: {
-					show: false
-				},
-				zoom: {
-					enabled: false
-				}
-			},
-			dataLabels: {
-				enabled: false
-			},
-			grid: {
-				clipMarkers: false,
-				borderColor: 'rgba(0, 0, 0, 0.1)',
-				xaxis: {
-					lines: {
-						show: true,
-					}
-				},
-			},
-			stroke: {
-				curve: 'straight',
-				width: 2
-			},
-			tooltip: {
-				enabled: false
-			},
-			legend: {
-				labels: {
-					colors: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
-				},
-			},
-			series: [] as any,
-			colors: ['#00E396', '#00BCD4', '#FFB300', '#e53935'],
-			xaxis: {
-				type: 'numeric',
-				labels: {
-					show: false
-				},
-				tooltip: {
-					enabled: false
-				}
-			},
-			yaxis: {
-				show: false,
-				min: 0,
-			}
-		});
-
-		this.inboxChart = new ApexCharts(this.$refs.inboxChart, chartOpts('a'));
-		this.deliverChart = new ApexCharts(this.$refs.deliverChart, chartOpts('b'));
-
-		this.inboxChart.render();
-		this.deliverChart.render();
-
-		const connection = this.$root.stream.useSharedConnection('queueStats');
-		connection.on('stats', this.onStats);
-		connection.on('statsLog', this.onStatsLog);
-		connection.send('requestLog', {
 			id: Math.random().toString().substr(2, 8),
-			length: limit
+			length: this.chartLimit
 		});
 
 		this.$once('hook:beforeDestroy', () => {
-			connection.dispose();
+			this.connection.dispose();
-			this.inboxChart.destroy();
-			this.deliverChart.destroy();
 		});
 	},
 
@@ -274,17 +134,6 @@ export default Vue.extend({
 			});
 		},
 
-		onStats(stats) {
-			this.stats.push(stats);
-			if (this.stats.length > limit) this.stats.shift();
-		},
-
-		onStatsLog(statsLog) {
-			for (const stats of statsLog.reverse()) {
-				this.onStats(stats);
-			}
-		},
-
 		fetchJobs() {
 			this.$root.api('admin/queue/jobs', {
 				domain: this.domain,
@@ -299,11 +148,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.wptihjuy
-	> .chart
-		min-height 200px !important
-		margin 0 -8px
-
 .xvvuvgsv
 	> b
 		margin-right 16px

src/client/app/common/scripts/post-form.ts

@@ -0,0 +1,478 @@
+import insertTextAtCursor from 'insert-text-at-cursor';
+import { length } from 'stringz';
+import { toASCII } from 'punycode';
+import MkVisibilityChooser from '../views/components/visibility-chooser.vue';
+import getFace from './get-face';
+import { parse } from '../../../../mfm/parse';
+import { host, url } from '../../config';
+import i18n from '../../i18n';
+import { erase, unique } from '../../../../prelude/array';
+import extractMentions from '../../../../misc/extract-mentions';
+
+export default (opts) => ({
+	i18n: i18n(),
+
+	components: {
+		XPostFormAttaches: () => import('../views/components/post-form-attaches.vue').then(m => m.default),
+		XPollEditor: () => import('../views/components/poll-editor.vue').then(m => m.default)
+	},
+
+	props: {
+		reply: {
+			type: Object,
+			required: false
+		},
+		renote: {
+			type: Object,
+			required: false
+		},
+		mention: {
+			type: Object,
+			required: false
+		},
+		initialText: {
+			type: String,
+			required: false
+		},
+		instant: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			posting: false,
+			text: '',
+			files: [],
+			uploadings: [],
+			poll: false,
+			pollChoices: [],
+			pollMultiple: false,
+			pollExpiration: [],
+			useCw: false,
+			cw: null,
+			geo: null,
+			visibility: 'public',
+			visibleUsers: [],
+			localOnly: false,
+			autocomplete: null,
+			draghover: false,
+			quoteId: null,
+			recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]'),
+			maxNoteTextLength: 1000
+		};
+	},
+
+	computed: {
+		draftId(): string {
+			return this.renote
+				? `renote:${this.renote.id}`
+				: this.reply
+					? `reply:${this.reply.id}`
+					: 'note';
+		},
+
+		placeholder(): string {
+			const xs = [
+				this.$t('@.note-placeholders.a'),
+				this.$t('@.note-placeholders.b'),
+				this.$t('@.note-placeholders.c'),
+				this.$t('@.note-placeholders.d'),
+				this.$t('@.note-placeholders.e'),
+				this.$t('@.note-placeholders.f')
+			];
+			const x = xs[Math.floor(Math.random() * xs.length)];
+
+			return this.renote
+				? opts.mobile ? this.$t('@.post-form.option-quote-placeholder') : this.$t('@.post-form.quote-placeholder')
+				: this.reply
+					? this.$t('@.post-form.reply-placeholder')
+					: x;
+		},
+
+		submitText(): string {
+			return this.renote
+				? this.$t('@.post-form.renote')
+				: this.reply
+					? this.$t('@.post-form.reply')
+					: this.$t('@.post-form.submit');
+		},
+
+		canPost(): boolean {
+			return !this.posting &&
+				(1 <= this.text.length || 1 <= this.files.length || this.poll || this.renote) &&
+				(length(this.text.trim()) <= this.maxNoteTextLength) &&
+				(!this.poll || this.pollChoices.length >= 2);
+		}
+	},
+
+	created() {
+		this.$root.getMeta().then(meta => {
+			this.maxNoteTextLength = meta.maxNoteTextLength;
+		});
+	},
+
+	mounted() {
+		if (this.initialText) {
+			this.text = this.initialText;
+		}
+
+		if (this.mention) {
+			this.text = this.mention.host ? `@${this.mention.username}@${toASCII(this.mention.host)}` : `@${this.mention.username}`;
+			this.text += ' ';
+		}
+
+		if (this.reply && this.reply.user.host != null) {
+			this.text = `@${this.reply.user.username}@${toASCII(this.reply.user.host)} `;
+		}
+
+		if (this.reply && this.reply.text != null) {
+			const ast = parse(this.reply.text);
+
+			for (const x of extractMentions(ast)) {
+				const mention = x.host ? `@${x.username}@${toASCII(x.host)}` : `@${x.username}`;
+
+				// 自分は除外
+				if (this.$store.state.i.username == x.username && x.host == null) continue;
+				if (this.$store.state.i.username == x.username && x.host == host) continue;
+
+				// 重複は除外
+				if (this.text.indexOf(`${mention} `) != -1) continue;
+
+				this.text += `${mention} `;
+			}
+		}
+
+		// デフォルト公開範囲
+		this.applyVisibility(this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : this.$store.state.settings.defaultNoteVisibility);
+
+		// 公開以外へのリプライ時は元の公開範囲を引き継ぐ
+		if (this.reply && ['home', 'followers', 'specified'].includes(this.reply.visibility)) {
+			this.visibility = this.reply.visibility;
+		}
+
+		if (this.reply) {
+			this.$root.api('users/show', { userId: this.reply.userId }).then(user => {
+				this.visibleUsers.push(user);
+			});
+		}
+
+		// keep cw when reply
+		if (this.$store.state.settings.keepCw && this.reply && this.reply.cw) {
+			this.useCw = true;
+			this.cw = this.reply.cw;
+		}
+
+		this.focus();
+
+		this.$nextTick(() => {
+			this.focus();
+		});
+
+		this.$nextTick(() => {
+			// 書きかけの投稿を復元
+			if (!this.instant && !this.mention) {
+				const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId];
+				if (draft) {
+					this.text = draft.data.text;
+					this.files = (draft.data.files || []).filter(e => e);
+					if (draft.data.poll) {
+						this.poll = true;
+						this.$nextTick(() => {
+							(this.$refs.poll as any).set(draft.data.poll);
+						});
+					}
+					this.$emit('change-attached-files', this.files);
+				}
+			}
+
+			this.$nextTick(() => this.watch());
+		});
+	},
+
+	methods: {
+		watch() {
+			this.$watch('text', () => this.saveDraft());
+			this.$watch('poll', () => this.saveDraft());
+			this.$watch('files', () => this.saveDraft());
+		},
+
+		trimmedLength(text: string) {
+			return length(text.trim());
+		},
+
+		addTag(tag: string) {
+			insertTextAtCursor(this.$refs.text, ` #${tag} `);
+		},
+
+		focus() {
+			(this.$refs.text as any).focus();
+		},
+
+		chooseFile() {
+			(this.$refs.file as any).click();
+		},
+
+		chooseFileFromDrive() {
+			this.$chooseDriveFile({
+				multiple: true
+			}).then(files => {
+				for (const x of files) this.attachMedia(x);
+			});
+		},
+
+		attachMedia(driveFile) {
+			this.files.push(driveFile);
+			this.$emit('change-attached-files', this.files);
+		},
+
+		detachMedia(id) {
+			this.files = this.files.filter(x => x.id != id);
+			this.$emit('change-attached-files', this.files);
+		},
+
+		onChangeFile() {
+			for (const x of Array.from((this.$refs.file as any).files)) this.upload(x);
+		},
+
+		upload(file) {
+			(this.$refs.uploader as any).upload(file);
+		},
+
+		onChangeUploadings(uploads) {
+			this.$emit('change-uploadings', uploads);
+		},
+
+		onPollUpdate() {
+			const got = this.$refs.poll.get();
+			this.pollChoices = got.choices;
+			this.pollMultiple = got.multiple;
+			this.pollExpiration = [got.expiration, got.expiresAt || got.expiredAfter];
+			this.saveDraft();
+		},
+
+		setGeo() {
+			if (navigator.geolocation == null) {
+				this.$root.dialog({
+					type: 'warning',
+					text: this.$t('@.post-form.geolocation-alert')
+				});
+				return;
+			}
+
+			navigator.geolocation.getCurrentPosition(pos => {
+				this.geo = pos.coords;
+				this.$emit('geo-attached', this.geo);
+			}, err => {
+				this.$root.dialog({
+					type: 'error',
+					title: this.$t('@.post-form.error'),
+					text: err.message
+				});
+			}, {
+					enableHighAccuracy: true
+				});
+		},
+
+		removeGeo() {
+			this.geo = null;
+			this.$emit('geo-dettached');
+		},
+
+		setVisibility() {
+			const w = this.$root.new(MkVisibilityChooser, {
+				source: this.$refs.visibilityButton,
+				currentVisibility: this.visibility
+			});
+			w.$once('chosen', v => {
+				this.applyVisibility(v);
+			});
+		},
+
+		applyVisibility(v: string) {
+			const m = v.match(/^local-(.+)/);
+			if (m) {
+				this.localOnly = true;
+				this.visibility = m[1];
+			} else {
+				this.localOnly = false;
+				this.visibility = v;
+			}
+		},
+
+		addVisibleUser() {
+			this.$root.dialog({
+				title: this.$t('@.post-form.enter-username'),
+				user: true
+			}).then(({ canceled, result: user }) => {
+				if (canceled) return;
+				this.visibleUsers.push(user);
+			});
+		},
+
+		removeVisibleUser(user) {
+			this.visibleUsers = erase(user, this.visibleUsers);
+		},
+
+		clear() {
+			this.text = '';
+			this.files = [];
+			this.poll = false;
+			this.$emit('change-attached-files', this.files);
+		},
+
+		onKeydown(e) {
+			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey) && this.canPost) this.post();
+		},
+
+		async onPaste(e) {
+			for (const item of Array.from(e.clipboardData.items)) {
+				if (item.kind == 'file') {
+					this.upload(item.getAsFile());
+				}
+			}
+
+			const paste = e.clipboardData.getData('text');
+
+			if (paste.startsWith(url + '/notes/')) {
+				e.preventDefault();
+
+				this.$root.dialog({
+					type: 'info',
+					text: this.$t('@.post-form.quote-question'),
+					showCancelButton: true
+				}).then(({ canceled }) => {
+					if (canceled) {
+						insertTextAtCursor(this.$refs.text, paste);
+						return;
+					}
+
+					this.quoteId = paste.substr(url.length).match(/^\/notes\/(.+?)\/?$/)[1];
+				});
+			}
+		},
+
+		onDragover(e) {
+			const isFile = e.dataTransfer.items[0].kind == 'file';
+			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
+			if (isFile || isDriveFile) {
+				e.preventDefault();
+				this.draghover = true;
+				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
+			}
+		},
+
+		onDragenter(e) {
+			this.draghover = true;
+		},
+
+		onDragleave(e) {
+			this.draghover = false;
+		},
+
+		onDrop(e): void {
+			this.draghover = false;
+
+			// ファイルだったら
+			if (e.dataTransfer.files.length > 0) {
+				e.preventDefault();
+				for (const x of Array.from(e.dataTransfer.files)) this.upload(x);
+				return;
+			}
+
+			//#region ドライブのファイル
+			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			if (driveFile != null && driveFile != '') {
+				const file = JSON.parse(driveFile);
+				this.files.push(file);
+				this.$emit('change-attached-files', this.files);
+				e.preventDefault();
+			}
+			//#endregion
+		},
+
+		async emoji() {
+			const Picker = await import('../../desktop/views/components/emoji-picker-dialog.vue').then(m => m.default);
+			const button = this.$refs.emoji;
+			const rect = button.getBoundingClientRect();
+			const vm = this.$root.new(Picker, {
+				x: button.offsetWidth + rect.left + window.pageXOffset,
+				y: rect.top + window.pageYOffset
+			});
+			vm.$once('chosen', emoji => {
+				insertTextAtCursor(this.$refs.text, emoji);
+			});
+		},
+
+		saveDraft() {
+			if (this.instant) return;
+
+			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
+
+			data[this.draftId] = {
+				updatedAt: new Date(),
+				data: {
+					text: this.text,
+					files: this.files,
+					poll: this.poll && this.$refs.poll ? (this.$refs.poll as any).get() : undefined
+				}
+			};
+
+			localStorage.setItem('drafts', JSON.stringify(data));
+		},
+
+		deleteDraft() {
+			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
+
+			delete data[this.draftId];
+
+			localStorage.setItem('drafts', JSON.stringify(data));
+		},
+
+		kao() {
+			this.text += getFace();
+		},
+
+		post() {
+			this.posting = true;
+			const viaMobile = opts.mobile && !this.$store.state.settings.disableViaMobile;
+			this.$root.api('notes/create', {
+				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,
+				renoteId: this.renote ? this.renote.id : this.quoteId ? this.quoteId : undefined,
+				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
+				cw: this.useCw ? this.cw || '' : undefined,
+				visibility: this.visibility,
+				visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined,
+				localOnly: this.localOnly,
+				geo: this.geo ? {
+					coordinates: [this.geo.longitude, this.geo.latitude],
+					altitude: this.geo.altitude,
+					accuracy: this.geo.accuracy,
+					altitudeAccuracy: this.geo.altitudeAccuracy,
+					heading: isNaN(this.geo.heading) ? null : this.geo.heading,
+					speed: this.geo.speed,
+				} : null,
+				viaMobile: viaMobile
+			}).then(data => {
+				this.clear();
+				this.deleteDraft();
+				this.$emit('posted');
+				if (opts.onSuccess) opts.onSuccess(this);
+			}).catch(err => {
+				if (opts.onSuccess) opts.onFailure(this);
+			}).then(() => {
+				this.posting = false;
+			});
+
+			if (this.text && this.text != '') {
+				const hashtags = parse(this.text).filter(x => x.node.type === 'hashtag').map(x => x.node.props.hashtag);
+				const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
+				localStorage.setItem('hashtags', JSON.stringify(unique(hashtags.concat(history))));
+			}
+		},
+	}
+});

src/client/app/common/views/components/ui/input.vue

@@ -210,17 +210,25 @@ export default Vue.extend({
 		}
 
 		this.$nextTick(() => {
-			if (this.$refs.prefix) {
+			// このコンポーネントが作成された時、非表示状態である場合がある
-				this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
+			// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
-				if (this.$refs.prefix.offsetWidth) {
+			const clock = setInterval(() => {
-					this.$refs.input.style.paddingLeft = this.$refs.prefix.offsetWidth + 'px';
+				if (this.$refs.prefix) {
+					this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
+					if (this.$refs.prefix.offsetWidth) {
+						this.$refs.input.style.paddingLeft = this.$refs.prefix.offsetWidth + 'px';
+					}
 				}
-			}
+				if (this.$refs.suffix) {
-			if (this.$refs.suffix) {
+					if (this.$refs.suffix.offsetWidth) {
-				if (this.$refs.suffix.offsetWidth) {
+						this.$refs.input.style.paddingRight = this.$refs.suffix.offsetWidth + 'px';
-					this.$refs.input.style.paddingRight = this.$refs.suffix.offsetWidth + 'px';
+					}
 				}
-			}
+			}, 100);
+
+			this.$once('hook:beforeDestroy', () => {
+				clearInterval(clock);
+			});
 		});
 
 		this.$on('keydown', (e: KeyboardEvent) => {

src/client/app/common/views/components/url-preview.vue

@@ -9,7 +9,7 @@
 	</blockquote>
 </div>
 <div v-else class="mk-url-preview">
-	<component :is="self ? 'router-link' : 'a'" :class="{ mini: narrow, compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="self ? null : '_blank'" :title="url" v-if="!fetching">
+	<component :is="hasRoute ? 'router-link' : 'a'" :class="{ mini: narrow, compact }" :[attr]="hasRoute ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url" v-if="!fetching">
 		<div class="thumbnail" v-if="thumbnail" :style="`background-image: url('${thumbnail}')`">
 			<button v-if="!playerEnabled && player.url" @click.prevent="playerEnabled = true" :title="$t('enable-player')"><fa :icon="['far', 'play-circle']"/></button>
 		</div>
@@ -61,7 +61,13 @@ export default Vue.extend({
 	},
 
 	data() {
+		const isSelf = this.url.startsWith(local);
+		const hasRoute =
+			this.url.substr(local.length).startsWith('/@') ||
+			this.url.substr(local.length).startsWith('/notes/') ||
+			this.url.substr(local.length).startsWith('/pages/');
 		return {
+			local,
 			fetching: true,
 			title: null,
 			description: null,
@@ -75,9 +81,10 @@ export default Vue.extend({
 			},
 			tweetUrl: null,
 			playerEnabled: false,
-			local,
+			self: isSelf,
-			self: this.url.startsWith(local),
+			hasRoute: hasRoute,
-			attr: this.url.startsWith(local) ? 'to' : 'href'
+			attr: hasRoute ? 'to' : 'href',
+			target: hasRoute ? null : '_blank'
 		};
 	},
 

src/client/app/common/views/pages/page-editor/els/page-editor.el.counter.vue

@@ -5,7 +5,7 @@
 	<section style="padding: 0 16px 0 16px;">
 		<ui-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('blocks._counter.name') }}</span></ui-input>
 		<ui-input v-model="value.text"><span>{{ $t('blocks._counter.text') }}</span></ui-input>
-		<ui-input v-model="value.inc" type="number"><span>{{ $t('blocks._counter.increment') }}</span></ui-input>
+		<ui-input v-model="value.inc" type="number"><span>{{ $t('blocks._counter.inc') }}</span></ui-input>
 	</section>
 </x-container>
 </template>

src/client/app/desktop/views/components/notifications.vue

@@ -104,18 +104,18 @@
 									<mk-user-name :user="notification.note.user"/>
 								</router-link>
 							</p>
-							<a class="note-preview" :href="notification.note | notePage" :title="getNoteSummary(notification.note)">
+							<router-link class="note-preview" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
 								<mfm :text="getNoteSummary(notification.note)" :should-break="false" :plain-text="true" :custom-emojis="notification.note.emojis"/>
-							</a>
+							</router-link>
 						</div>
 					</template>
 
 					<template v-if="notification.type == 'pollVote'">
 						<mk-avatar class="avatar" :user="notification.user"/>
 						<div class="text">
-							<p><fa icon="chart-pie"/><a :href="notification.user | userPage" v-user-preview="notification.user.id">
+							<p><fa icon="chart-pie"/><router-link :to="notification.user | userPage" v-user-preview="notification.user.id">
 								<mk-user-name :user="notification.user"/>
-							</a></p>
+							</router-link></p>
 							<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
 								<fa icon="quote-left"/>
 									<mfm :text="getNoteSummary(notification.note)" :should-break="false" :plain-text="true" :custom-emojis="notification.note.emojis"/>

src/client/app/desktop/views/components/post-form.vue

@@ -10,14 +10,15 @@
 			<span v-for="u in visibleUsers">
 				<mk-user-name :user="u"/><a @click="removeVisibleUser(u)">[x]</a>
 			</span>
-			<a @click="addVisibleUser">{{ $t('add-visible-user') }}</a>
+			<a @click="addVisibleUser">{{ $t('@.post-form.add-visible-user') }}</a>
 		</div>
 		<div class="hashtags" v-if="recentHashtags.length > 0 && $store.state.settings.suggestRecentHashtags">
-			<b>{{ $t('recent-tags') }}:</b>
+			<b>{{ $t('@.post-form.recent-tags') }}:</b>
-			<a v-for="tag in recentHashtags.slice(0, 5)" @click="addTag(tag)" :title="$t('click-to-tagging')">#{{ tag }}</a>
+			<a v-for="tag in recentHashtags.slice(0, 5)" @click="addTag(tag)" :title="$t('@.post-form.click-to-tagging')">#{{ tag }}</a>
 		</div>
-		<div class="local-only" v-if="localOnly == true">{{ $t('local-only-message') }}</div>
+		<div class="with-quote" v-if="quoteId">{{ $t('@.post-form.quote-attached') }}</div>
-		<input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('annotations')" v-autocomplete="{ model: 'cw' }">
+		<div class="local-only" v-if="localOnly == true">{{ $t('@.post-form.local-only-message') }}</div>
+		<input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('@.post-form.cw-placeholder')" v-autocomplete="{ model: 'cw' }">
 		<div class="textarea">
 			<textarea :class="{ with: (files.length != 0 || poll) }"
 				ref="text" v-model="text" :disabled="posting"
@@ -32,13 +33,13 @@
 		</div>
 	</div>
 	<mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
-	<button class="upload" :title="$t('attach-media-from-local')" @click="chooseFile"><fa icon="upload"/></button>
+	<button class="upload" :title="$t('@.post-form.attach-media-from-local')" @click="chooseFile"><fa icon="upload"/></button>
-	<button class="drive" :title="$t('attach-media-from-drive')" @click="chooseFileFromDrive"><fa icon="cloud"/></button>
+	<button class="drive" :title="$t('@.post-form.attach-media-from-drive')" @click="chooseFileFromDrive"><fa icon="cloud"/></button>
-	<button class="kao" :title="$t('insert-a-kao')" @click="kao"><fa :icon="['far', 'smile']"/></button>
+	<button class="kao" :title="$t('@.post-form.insert-a-kao')" @click="kao"><fa :icon="['far', 'smile']"/></button>
-	<button class="poll" :title="$t('create-poll')" @click="poll = !poll"><fa icon="chart-pie"/></button>
+	<button class="poll" :title="$t('@.post-form.create-poll')" @click="poll = !poll"><fa icon="chart-pie"/></button>
-	<button class="cw" :title="$t('hide-contents')" @click="useCw = !useCw"><fa :icon="['far', 'eye-slash']"/></button>
+	<button class="cw" :title="$t('@.post-form.hide-contents')" @click="useCw = !useCw"><fa :icon="['far', 'eye-slash']"/></button>
-	<button class="geo" :title="$t('attach-location-information')" @click="geo ? removeGeo() : setGeo()"><fa icon="map-marker-alt"/></button>
+	<button class="geo" :title="$t('@.post-form.attach-location-information')" @click="geo ? removeGeo() : setGeo()"><fa icon="map-marker-alt"/></button>
-	<button class="visibility" :title="$t('visibility')" @click="setVisibility" ref="visibilityButton">
+	<button class="visibility" :title="$t('@.post-form.visibility')" @click="setVisibility" ref="visibilityButton">
 		<span v-if="visibility === 'public'"><fa icon="globe"/></span>
 		<span v-if="visibility === 'home'"><fa icon="home"/></span>
 		<span v-if="visibility === 'followers'"><fa icon="unlock"/></span>
@@ -46,7 +47,7 @@
 	</button>
 	<p class="text-count" :class="{ over: trimmedLength(text) > maxNoteTextLength }">{{ maxNoteTextLength - trimmedLength(text) }}</p>
 	<ui-button primary :wait="posting" class="submit" :disabled="!canPost" @click="post">
-		{{ posting ? $t('posting') : submitText }}<mk-ellipsis v-if="posting"/>
+		{{ posting ? $t('@.post-form.posting') : submitText }}<mk-ellipsis v-if="posting"/>
 	</ui-button>
 	<input ref="file" type="file" multiple="multiple" tabindex="-1" @change="onChangeFile"/>
 	<div class="dropzone" v-if="draghover"></div>
@@ -56,465 +57,29 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import insertTextAtCursor from 'insert-text-at-cursor';
+import form from '../../../common/scripts/post-form';
-import getFace from '../../../common/scripts/get-face';
-import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
-import { parse } from '../../../../../mfm/parse';
-import { host } from '../../../config';
-import { erase, unique } from '../../../../../prelude/array';
-import { length } from 'stringz';
-import { toASCII } from 'punycode';
-import extractMentions from '../../../../../misc/extract-mentions';
-import XPostFormAttaches from '../../../common/views/components/post-form-attaches.vue';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/post-form.vue'),
 
-	components: {
+	mixins: [
-		MkVisibilityChooser,
+		form({
-		XPostFormAttaches,
+			onSuccess: self => {
-		XPollEditor: () => import('../../../common/views/components/poll-editor.vue').then(m => m.default)
+				self.$notify(self.renote
-	},
+					? self.$t('reposted')
-
+					: self.reply
-	props: {
+						? self.$t('replied')
-		reply: {
+						: self.$t('posted'));
-			type: Object,
+			},
-			required: false
+			onFailure: self => {
-		},
+				self.$notify(self.renote
-		renote: {
+					? self.$t('renote-failed')
-			type: Object,
+					: self.reply
-			required: false
+						? self.$t('reply-failed')
-		},
+						: self.$t('note-failed'));
-		mention: {
-			type: Object,
-			required: false
-		},
-		initialText: {
-			type: String,
-			required: false
-		},
-		instant: {
-			type: Boolean,
-			required: false,
-			default: false
-		}
-	},
-
-	data() {
-		return {
-			posting: false,
-			text: '',
-			files: [],
-			uploadings: [],
-			poll: false,
-			pollChoices: [],
-			pollMultiple: false,
-			pollExpiration: [],
-			useCw: false,
-			cw: null,
-			geo: null,
-			visibility: 'public',
-			visibleUsers: [],
-			localOnly: false,
-			autocomplete: null,
-			draghover: false,
-			recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]'),
-			maxNoteTextLength: 1000
-		};
-	},
-
-	created() {
-		this.$root.getMeta().then(meta => {
-			this.maxNoteTextLength = meta.maxNoteTextLength;
-		});
-	},
-
-	computed: {
-		draftId(): string {
-			return this.renote
-				? `renote:${this.renote.id}`
-				: this.reply
-					? `reply:${this.reply.id}`
-					: 'note';
-		},
-
-		placeholder(): string {
-			const xs = [
-				this.$t('@.note-placeholders.a'),
-				this.$t('@.note-placeholders.b'),
-				this.$t('@.note-placeholders.c'),
-				this.$t('@.note-placeholders.d'),
-				this.$t('@.note-placeholders.e'),
-				this.$t('@.note-placeholders.f')
-			];
-			const x = xs[Math.floor(Math.random() * xs.length)];
-
-			return this.renote
-				? this.$t('quote-placeholder')
-				: this.reply
-					? this.$t('reply-placeholder')
-					: x;
-		},
-
-		submitText(): string {
-			return this.renote
-				? this.$t('renote')
-				: this.reply
-					? this.$t('reply')
-					: this.$t('submit');
-		},
-
-		canPost(): boolean {
-			return !this.posting &&
-				(1 <= this.text.length || 1 <= this.files.length || this.poll || this.renote) &&
-				(length(this.text.trim()) <= this.maxNoteTextLength) &&
-				(!this.poll || this.pollChoices.length >= 2);
-		}
-	},
-
-	mounted() {
-		if (this.initialText) {
-			this.text = this.initialText;
-		}
-
-		if (this.mention) {
-			this.text = this.mention.host ? `@${this.mention.username}@${toASCII(this.mention.host)}` : `@${this.mention.username}`;
-			this.text += ' ';
-		}
-
-		if (this.reply && this.reply.user.host != null) {
-			this.text = `@${this.reply.user.username}@${toASCII(this.reply.user.host)} `;
-		}
-
-		if (this.reply && this.reply.text != null) {
-			const ast = parse(this.reply.text);
-
-			for (const x of extractMentions(ast)) {
-				const mention = x.host ? `@${x.username}@${toASCII(x.host)}` : `@${x.username}`;
-
-				// 自分は除外
-				if (this.$store.state.i.username == x.username && x.host == null) continue;
-				if (this.$store.state.i.username == x.username && x.host == host) continue;
-
-				// 重複は除外
-				if (this.text.indexOf(`${mention} `) != -1) continue;
-
-				this.text += `${mention} `;
 			}
-		}
+		}),
-
+	],
-		// デフォルト公開範囲
-		this.applyVisibility(this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : this.$store.state.settings.defaultNoteVisibility);
-
-		// 公開以外へのリプライ時は元の公開範囲を引き継ぐ
-		if (this.reply && ['home', 'followers', 'specified'].includes(this.reply.visibility)) {
-			this.visibility = this.reply.visibility;
-		}
-
-		if (this.reply) {
-			this.$root.api('users/show', { userId: this.reply.userId }).then(user => {
-				this.visibleUsers.push(user);
-			});
-		}
-
-		// keep cw when reply
-		if (this.$store.state.settings.keepCw && this.reply && this.reply.cw) {
-			this.useCw = true;
-			this.cw = this.reply.cw;
-		}
-
-		this.$nextTick(() => {
-			// 書きかけの投稿を復元
-			if (!this.instant && !this.mention) {
-				const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId];
-				if (draft) {
-					this.text = draft.data.text;
-					this.files = (draft.data.files || []).filter(e => e);
-					if (draft.data.poll) {
-						this.poll = true;
-						this.$nextTick(() => {
-							(this.$refs.poll as any).set(draft.data.poll);
-						});
-					}
-					this.$emit('change-attached-files', this.files);
-				}
-			}
-
-			this.$nextTick(() => this.watch());
-		});
-	},
-
-	methods: {
-		trimmedLength(text: string) {
-			return length(text.trim());
-		},
-
-		addTag(tag: string) {
-			insertTextAtCursor(this.$refs.text, ` #${tag} `);
-		},
-
-		watch() {
-			this.$watch('text', () => this.saveDraft());
-			this.$watch('poll', () => this.saveDraft());
-			this.$watch('files', () => this.saveDraft());
-		},
-
-		focus() {
-			(this.$refs.text as any).focus();
-		},
-
-		chooseFile() {
-			(this.$refs.file as any).click();
-		},
-
-		chooseFileFromDrive() {
-			this.$chooseDriveFile({
-				multiple: true
-			}).then(files => {
-				for (const x of files) this.attachMedia(x);
-			});
-		},
-
-		attachMedia(driveFile) {
-			this.files.push(driveFile);
-			this.$emit('change-attached-files', this.files);
-		},
-
-		detachMedia(id) {
-			this.files = this.files.filter(x => x.id != id);
-			this.$emit('change-attached-files', this.files);
-		},
-
-		onChangeFile() {
-			for (const x of Array.from((this.$refs.file as any).files)) this.upload(x);
-		},
-
-		onPollUpdate() {
-			const got = this.$refs.poll.get();
-			this.pollChoices = got.choices;
-			this.pollMultiple = got.multiple;
-			this.pollExpiration = [got.expiration, got.expiresAt || got.expiredAfter];
-			this.saveDraft();
-		},
-
-		upload(file) {
-			(this.$refs.uploader as any).upload(file);
-		},
-
-		onChangeUploadings(uploads) {
-			this.$emit('change-uploadings', uploads);
-		},
-
-		clear() {
-			this.text = '';
-			this.files = [];
-			this.poll = false;
-			this.$emit('change-attached-files', this.files);
-		},
-
-		onKeydown(e) {
-			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey) && this.canPost) this.post();
-		},
-
-		onPaste(e) {
-			for (const item of Array.from(e.clipboardData.items)) {
-				if (item.kind == 'file') {
-					this.upload(item.getAsFile());
-				}
-			}
-		},
-
-		onDragover(e) {
-			const isFile = e.dataTransfer.items[0].kind == 'file';
-			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
-			if (isFile || isDriveFile) {
-				e.preventDefault();
-				this.draghover = true;
-				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
-			}
-		},
-
-		onDragenter(e) {
-			this.draghover = true;
-		},
-
-		onDragleave(e) {
-			this.draghover = false;
-		},
-
-		onDrop(e): void {
-			this.draghover = false;
-
-			// ファイルだったら
-			if (e.dataTransfer.files.length > 0) {
-				e.preventDefault();
-				for (const x of Array.from(e.dataTransfer.files)) this.upload(x);
-				return;
-			}
-
-			//#region ドライブのファイル
-			const driveFile = e.dataTransfer.getData('mk_drive_file');
-			if (driveFile != null && driveFile != '') {
-				const file = JSON.parse(driveFile);
-				this.files.push(file);
-				this.$emit('change-attached-files', this.files);
-				e.preventDefault();
-			}
-			//#endregion
-		},
-
-		setGeo() {
-			if (navigator.geolocation == null) {
-				this.$root.dialog({
-					type: 'warning',
-					text: this.$t('geolocation-alert')
-				});
-				return;
-			}
-
-			navigator.geolocation.getCurrentPosition(pos => {
-				this.geo = pos.coords;
-				this.$emit('geo-attached', this.geo);
-			}, err => {
-				this.$root.dialog({
-					type: 'error',
-					title: this.$t('error'),
-					text: err.message
-				});
-			}, {
-					enableHighAccuracy: true
-				});
-		},
-
-		removeGeo() {
-			this.geo = null;
-			this.$emit('geo-dettached');
-		},
-
-		setVisibility() {
-			const w = this.$root.new(MkVisibilityChooser, {
-				source: this.$refs.visibilityButton,
-				currentVisibility: this.visibility
-			});
-			w.$once('chosen', v => {
-				this.applyVisibility(v);
-			});
-		},
-
-		applyVisibility(v :string) {
-			const m = v.match(/^local-(.+)/);
-			if (m) {
-				this.localOnly = true;
-				this.visibility = m[1];
-			} else {
-				this.localOnly = false;
-				this.visibility = v;
-			}
-		},
-
-		addVisibleUser() {
-			this.$root.dialog({
-				title: this.$t('enter-username'),
-				user: true
-			}).then(({ canceled, result: user }) => {
-				if (canceled) return;
-				this.visibleUsers.push(user);
-			});
-		},
-
-		removeVisibleUser(user) {
-			this.visibleUsers = erase(user, this.visibleUsers);
-		},
-
-		async emoji() {
-			const Picker = await import('./emoji-picker-dialog.vue').then(m => m.default);
-			const button = this.$refs.emoji;
-			const rect = button.getBoundingClientRect();
-			const vm = this.$root.new(Picker, {
-				x: button.offsetWidth + rect.left + window.pageXOffset,
-				y: rect.top + window.pageYOffset
-			});
-			vm.$once('chosen', emoji => {
-				insertTextAtCursor(this.$refs.text, emoji);
-			});
-		},
-
-		post() {
-			this.posting = true;
-
-			this.$root.api('notes/create', {
-				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,
-				renoteId: this.renote ? this.renote.id : undefined,
-				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
-				cw: this.useCw ? this.cw || '' : undefined,
-				visibility: this.visibility,
-				visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined,
-				localOnly: this.localOnly,
-				geo: this.geo ? {
-					coordinates: [this.geo.longitude, this.geo.latitude],
-					altitude: this.geo.altitude,
-					accuracy: this.geo.accuracy,
-					altitudeAccuracy: this.geo.altitudeAccuracy,
-					heading: isNaN(this.geo.heading) ? null : this.geo.heading,
-					speed: this.geo.speed,
-				} : null
-			}).then(data => {
-				this.clear();
-				this.deleteDraft();
-				this.$emit('posted');
-				this.$notify(this.renote
-					? this.$t('reposted')
-					: this.reply
-						? this.$t('replied')
-						: this.$t('posted'));
-			}).catch(err => {
-				this.$notify(this.renote
-					? this.$t('renote-failed')
-					: this.reply
-						? this.$t('reply-failed')
-						: this.$t('note-failed'));
-			}).then(() => {
-				this.posting = false;
-			});
-
-			if (this.text && this.text != '') {
-				const hashtags = parse(this.text).filter(x => x.node.type === 'hashtag').map(x => x.node.props.hashtag);
-				const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
-				localStorage.setItem('hashtags', JSON.stringify(unique(hashtags.concat(history))));
-			}
-		},
-
-		saveDraft() {
-			if (this.instant) return;
-
-			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
-
-			data[this.draftId] = {
-				updatedAt: new Date(),
-				data: {
-					text: this.text,
-					files: this.files,
-					poll: this.poll && this.$refs.poll ? (this.$refs.poll as any).get() : undefined
-				}
-			}
-
-			localStorage.setItem('drafts', JSON.stringify(data));
-		},
-
-		deleteDraft() {
-			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
-
-			delete data[this.draftId];
-
-			localStorage.setItem('drafts', JSON.stringify(data));
-		},
-
-		kao() {
-			this.text += getFace();
-		},
-	}
 });
 </script>
 

src/client/app/mobile/views/components/post-form.vue

@@ -1,6 +1,11 @@
 <template>
 <div class="gafaadew">
-	<div class="form">
+	<div class="form"
+		@dragover.stop="onDragover"
+		@dragenter="onDragenter"
+		@dragleave="onDragleave"
+		@drop.stop="onDrop"
+	>
 		<header>
 			<button class="cancel" @click="cancel"><fa icon="times"/></button>
 			<div>
@@ -17,10 +22,11 @@
 					<mk-user-name :user="u"/>
 					<a @click="removeVisibleUser(u)">[x]</a>
 				</span>
-				<a @click="addVisibleUser">+{{ $t('add-visible-user') }}</a>
+				<a @click="addVisibleUser">+{{ $t('@.post-form.add-visible-user') }}</a>
 			</div>
-			<input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('annotations')" v-autocomplete="{ model: 'cw' }">
+			<input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('@.post-form.cw-placeholder')" v-autocomplete="{ model: 'cw' }">
-			<textarea v-model="text" ref="text" :disabled="posting" :placeholder="placeholder" v-autocomplete="{ model: 'text' }"></textarea>
+			<textarea v-model="text" ref="text" :disabled="posting" :placeholder="placeholder" v-autocomplete="{ model: 'text' }" @paste="onPaste"></textarea>
+			<div class="with-quote" v-if="quoteId">{{ $t('@.post-form.quote-attached') }}</div>
 			<x-post-form-attaches class="attaches" :files="files"/>
 			<x-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="onPollUpdate()"/>
 			<mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
@@ -50,337 +56,21 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import insertTextAtCursor from 'insert-text-at-cursor';
+import form from '../../../common/scripts/post-form';
-import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
-import getFace from '../../../common/scripts/get-face';
-import { parse } from '../../../../../mfm/parse';
-import { host } from '../../../config';
-import { erase, unique } from '../../../../../prelude/array';
-import { length } from 'stringz';
-import { toASCII } from 'punycode';
-import extractMentions from '../../../../../misc/extract-mentions';
 
 export default Vue.extend({
-	i18n: i18n('mobile/views/components/post-form.vue'),
+	i18n: i18n(),
-	components: {
-		XPostFormAttaches: () => import('../../../common/views/components/post-form-attaches.vue').then(m => m.default),
-		XPollEditor: () => import('../../../common/views/components/poll-editor.vue').then(m => m.default)
-	},
 
-	props: {
+	mixins: [
-		reply: {
+		form({
-			type: Object,
+			mobile: true
-			required: false
+		}),
-		},
+	],
-		renote: {
-			type: Object,
-			required: false
-		},
-		mention: {
-			type: Object,
-			required: false
-		},
-		initialText: {
-			type: String,
-			required: false
-		},
-		instant: {
-			type: Boolean,
-			required: false,
-			default: false
-		}
-	},
-
-	data() {
-		return {
-			posting: false,
-			text: '',
-			uploadings: [],
-			files: [],
-			poll: false,
-			pollChoices: [],
-			pollMultiple: false,
-			geo: null,
-			visibility: 'public',
-			visibleUsers: [],
-			localOnly: false,
-			useCw: false,
-			cw: null,
-			recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]'),
-			maxNoteTextLength: 1000
-		};
-	},
-
-	created() {
-		this.$root.getMeta().then(meta => {
-			this.maxNoteTextLength = meta.maxNoteTextLength;
-		});
-	},
-
-	computed: {
-		draftId(): string {
-			return this.renote
-				? `renote:${this.renote.id}`
-				: this.reply
-					? `reply:${this.reply.id}`
-					: 'note';
-		},
-
-		placeholder(): string {
-			const xs = [
-				this.$t('@.note-placeholders.a'),
-				this.$t('@.note-placeholders.b'),
-				this.$t('@.note-placeholders.c'),
-				this.$t('@.note-placeholders.d'),
-				this.$t('@.note-placeholders.e'),
-				this.$t('@.note-placeholders.f')
-			];
-			const x = xs[Math.floor(Math.random() * xs.length)];
-
-			return this.renote
-				? this.$t('quote-placeholder')
-				: this.reply
-					? this.$t('reply-placeholder')
-					: x;
-		},
-
-		submitText(): string {
-			return this.renote
-				? this.$t('renote')
-				: this.reply
-					? this.$t('reply')
-					: this.$t('submit');
-		},
-
-		canPost(): boolean {
-			return !this.posting &&
-				(1 <= this.text.length || 1 <= this.files.length || this.poll || this.renote) &&
-				(this.text.trim().length <= this.maxNoteTextLength) &&
-				(!this.poll || this.pollChoices.length >= 2);
-		}
-	},
-
-	mounted() {
-		if (this.initialText) {
-			this.text = this.initialText;
-		}
-
-		if (this.reply && this.reply.user.host != null) {
-			this.text = `@${this.reply.user.username}@${toASCII(this.reply.user.host)} `;
-		}
-
-		if (this.mention) {
-			this.text = this.mention.host ? `@${this.mention.username}@${toASCII(this.mention.host)}` : `@${this.mention.username}`;
-			this.text += ' ';
-		}
-
-		if (this.reply && this.reply.text != null) {
-			const ast = parse(this.reply.text);
-
-			for (const x of extractMentions(ast)) {
-				const mention = x.host ? `@${x.username}@${toASCII(x.host)}` : `@${x.username}`;
-
-				// 自分は除外
-				if (this.$store.state.i.username == x.username && x.host == null) continue;
-				if (this.$store.state.i.username == x.username && x.host == host) continue;
-
-				// 重複は除外
-				if (this.text.indexOf(`${mention} `) != -1) continue;
-
-				this.text += `${mention} `;
-			}
-		}
-
-		// デフォルト公開範囲
-		this.applyVisibility(this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : this.$store.state.settings.defaultNoteVisibility);
-
-		// 公開以外へのリプライ時は元の公開範囲を引き継ぐ
-		if (this.reply && ['home', 'followers', 'specified'].includes(this.reply.visibility)) {
-			this.visibility = this.reply.visibility;
-		}
-
-		if (this.reply) {
-			this.$root.api('users/show', { userId: this.reply.userId }).then(user => {
-				this.visibleUsers.push(user);
-			});
-		}
-
-		// keep cw when reply
-		if (this.$store.state.settings.keepCw && this.reply && this.reply.cw) {
-			this.useCw = true;
-			this.cw = this.reply.cw;
-		}
-
-		this.focus();
-
-		this.$nextTick(() => {
-			this.focus();
-		});
-	},
 
 	methods: {
-		trimmedLength(text: string) {
-			return length(text.trim());
-		},
-
-		addTag(tag: string) {
-			insertTextAtCursor(this.$refs.text, ` #${tag} `);
-		},
-
-		focus() {
-			(this.$refs.text as any).focus();
-		},
-
-		addVisibleUser() {
-			this.$root.dialog({
-				title: this.$t('enter-username'),
-				user: true
-			}).then(({ canceled, result: user }) => {
-				if (canceled) return;
-				this.visibleUsers.push(user);
-			});
-		},
-
-		chooseFile() {
-			(this.$refs.file as any).click();
-		},
-
-		chooseFileFromDrive() {
-			this.$chooseDriveFile({
-				multiple: true
-			}).then(files => {
-				for (const x of files) this.attachMedia(x);
-			});
-		},
-
-		attachMedia(driveFile) {
-			this.files.push(driveFile);
-			this.$emit('change-attached-files', this.files);
-		},
-
-		detachMedia(id) {
-			this.files = this.files.filter(x => x.id != id);
-			this.$emit('change-attached-files', this.files);
-		},
-
-		onChangeFile() {
-			for (const x of Array.from((this.$refs.file as any).files)) this.upload(x);
-		},
-
-		onPollUpdate() {
-			const got = this.$refs.poll.get();
-			this.pollChoices = got.choices;
-			this.pollMultiple = got.multiple;
-		},
-
-		upload(file) {
-			(this.$refs.uploader as any).upload(file);
-		},
-
-		onChangeUploadings(uploads) {
-			this.$emit('change-uploadings', uploads);
-		},
-
-		setGeo() {
-			if (navigator.geolocation == null) {
-				this.$root.dialog({
-					type: 'warning',
-					text: this.$t('geolocation-alert')
-				});
-				return;
-			}
-
-			navigator.geolocation.getCurrentPosition(pos => {
-				this.geo = pos.coords;
-			}, err => {
-				this.$root.dialog({
-					type: 'error',
-					title: this.$t('error'),
-					text: err.message
-				});
-			}, {
-					enableHighAccuracy: true
-				});
-		},
-
-		removeGeo() {
-			this.geo = null;
-		},
-
-		setVisibility() {
-			const w = this.$root.new(MkVisibilityChooser, {
-				source: this.$refs.visibilityButton,
-				currentVisibility: this.visibility
-			});
-			w.$once('chosen', v => {
-				this.applyVisibility(v);
-			});
-		},
-
-		applyVisibility(v :string) {
-			const m = v.match(/^local-(.+)/);
-			if (m) {
-				this.localOnly = true;
-				this.visibility = m[1];
-			} else {
-				this.localOnly = false;
-				this.visibility = v;
-			}
-		},
-
-		removeVisibleUser(user) {
-			this.visibleUsers = erase(user, this.visibleUsers);
-		},
-
-		clear() {
-			this.text = '';
-			this.files = [];
-			this.poll = false;
-			this.$emit('change-attached-files');
-		},
-
-		post() {
-			this.posting = true;
-			const viaMobile = !this.$store.state.settings.disableViaMobile;
-			this.$root.api('notes/create', {
-				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,
-				renoteId: this.renote ? this.renote.id : undefined,
-				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
-				cw: this.useCw ? this.cw || '' : undefined,
-				geo: this.geo ? {
-					coordinates: [this.geo.longitude, this.geo.latitude],
-					altitude: this.geo.altitude,
-					accuracy: this.geo.accuracy,
-					altitudeAccuracy: this.geo.altitudeAccuracy,
-					heading: isNaN(this.geo.heading) ? null : this.geo.heading,
-					speed: this.geo.speed,
-				} : null,
-				visibility: this.visibility,
-				visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined,
-				localOnly: this.localOnly,
-				viaMobile: viaMobile
-			}).then(data => {
-				this.$emit('posted');
-			}).catch(err => {
-				this.posting = false;
-			});
-
-			if (this.text && this.text != '') {
-				const hashtags = parse(this.text).filter(x => x.node.type === 'hashtag').map(x => x.node.props.hashtag);
-				const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
-				localStorage.setItem('hashtags', JSON.stringify(unique(hashtags.concat(history))));
-			}
-		},
-
 		cancel() {
 			this.$emit('cancel');
 		},
-
-		kao() {
-			this.text += getFace();
-		}
 	}
 });
 </script>

src/daemons/queue-stats.ts

@@ -1,6 +1,6 @@
 import * as Deque from 'double-ended-queue';
 import Xev from 'xev';
-import { deliverQueue, inboxQueue } from '../queue';
+import { deliverQueue, inboxQueue, dbQueue, objectStorageQueue } from '../queue';
 
 const ev = new Xev();
 
@@ -18,6 +18,8 @@ export default function() {
 
 	let activeDeliverJobs = 0;
 	let activeInboxJobs = 0;
+	let activeDbJobs = 0;
+	let activeObjectStorageJobs = 0;
 
 	deliverQueue.on('global:active', () => {
 		activeDeliverJobs++;
@@ -27,9 +29,19 @@ export default function() {
 		activeInboxJobs++;
 	});
 
+	dbQueue.on('global:active', () => {
+		activeDbJobs++;
+	});
+
+	objectStorageQueue.on('global:active', () => {
+		activeObjectStorageJobs++;
+	});
+
 	async function tick() {
 		const deliverJobCounts = await deliverQueue.getJobCounts();
 		const inboxJobCounts = await inboxQueue.getJobCounts();
+		const dbJobCounts = await dbQueue.getJobCounts();
+		const objectStorageJobCounts = await objectStorageQueue.getJobCounts();
 
 		const stats = {
 			deliver: {
@@ -43,7 +55,19 @@ export default function() {
 				active: inboxJobCounts.active,
 				waiting: inboxJobCounts.waiting,
 				delayed: inboxJobCounts.delayed
-			}
+			},
+			db: {
+				activeSincePrevTick: activeDbJobs,
+				active: dbJobCounts.active,
+				waiting: dbJobCounts.waiting,
+				delayed: dbJobCounts.delayed
+			},
+			objectStorage: {
+				activeSincePrevTick: activeObjectStorageJobs,
+				active: objectStorageJobCounts.active,
+				waiting: objectStorageJobCounts.waiting,
+				delayed: objectStorageJobCounts.delayed
+			},
 		};
 
 		ev.emit('queueStats', stats);
@@ -53,6 +77,8 @@ export default function() {
 
 		activeDeliverJobs = 0;
 		activeInboxJobs = 0;
+		activeDbJobs = 0;
+		activeObjectStorageJobs = 0;
 	}
 
 	tick();

src/models/repositories/user.ts

@@ -176,6 +176,7 @@ export class UserRepository extends Repository<User> {
 				autoWatch: profile!.autoWatch,
 				alwaysMarkNsfw: profile!.alwaysMarkNsfw,
 				carefulBot: profile!.carefulBot,
+				autoAcceptFollowed: profile!.autoAcceptFollowed,
 				hasUnreadMessagingMessage: this.getHasUnreadMessagingMessage(user.id),
 				hasUnreadNotification: Notifications.count({
 					where: {

src/queue/index.ts

@@ -8,6 +8,7 @@ import { program } from '../argv';
 import processDeliver from './processors/deliver';
 import processInbox from './processors/inbox';
 import processDb from './processors/db';
+import procesObjectStorage from './processors/object-storage';
 import { queueLogger } from './logger';
 import { DriveFile } from '../models/entities/drive-file';
 
@@ -34,9 +35,12 @@ function renderError(e: Error): any {
 export const deliverQueue = initializeQueue('deliver');
 export const inboxQueue = initializeQueue('inbox');
 export const dbQueue = initializeQueue('db');
+export const objectStorageQueue = initializeQueue('objectStorage');
 
 const deliverLogger = queueLogger.createSubLogger('deliver');
 const inboxLogger = queueLogger.createSubLogger('inbox');
+const dbLogger = queueLogger.createSubLogger('db');
+const objectStorageLogger = queueLogger.createSubLogger('objectStorage');
 
 deliverQueue
 	.on('waiting', (jobId) => deliverLogger.debug(`waiting id=${jobId}`))
@@ -54,6 +58,22 @@ inboxQueue
 	.on('error', (job: any, err: Error) => inboxLogger.error(`error ${err}`, { job, e: renderError(err) }))
 	.on('stalled', (job) => inboxLogger.warn(`stalled id=${job.id} activity=${job.data.activity ? job.data.activity.id : 'none'}`));
 
+dbQueue
+	.on('waiting', (jobId) => dbLogger.debug(`waiting id=${jobId}`))
+	.on('active', (job) => dbLogger.debug(`active id=${job.id}`))
+	.on('completed', (job, result) => dbLogger.debug(`completed(${result}) id=${job.id}`))
+	.on('failed', (job, err) => dbLogger.warn(`failed(${err}) id=${job.id}`, { job, e: renderError(err) }))
+	.on('error', (job: any, err: Error) => dbLogger.error(`error ${err}`, { job, e: renderError(err) }))
+	.on('stalled', (job) => dbLogger.warn(`stalled id=${job.id}`));
+
+objectStorageQueue
+	.on('waiting', (jobId) => objectStorageLogger.debug(`waiting id=${jobId}`))
+	.on('active', (job) => objectStorageLogger.debug(`active id=${job.id}`))
+	.on('completed', (job, result) => objectStorageLogger.debug(`completed(${result}) id=${job.id}`))
+	.on('failed', (job, err) => objectStorageLogger.warn(`failed(${err}) id=${job.id}`, { job, e: renderError(err) }))
+	.on('error', (job: any, err: Error) => objectStorageLogger.error(`error ${err}`, { job, e: renderError(err) }))
+	.on('stalled', (job) => objectStorageLogger.warn(`stalled id=${job.id}`));
+
 export function deliver(user: ILocalUser, content: any, to: any) {
 	if (content == null) return null;
 
@@ -165,11 +185,21 @@ export function createImportUserListsJob(user: ILocalUser, fileId: DriveFile['id
 	});
 }
 
+export function createDeleteObjectStorageFileJob(key: string) {
+	return objectStorageQueue.add('deleteFile', {
+		key: key
+	}, {
+		removeOnComplete: true,
+		removeOnFail: true
+	});
+}
+
 export default function() {
 	if (!program.onlyServer) {
 		deliverQueue.process(128, processDeliver);
 		inboxQueue.process(128, processInbox);
 		processDb(dbQueue);
+		procesObjectStorage(objectStorageQueue);
 	}
 }
 

src/queue/processors/db/delete-drive-files.ts

@@ -1,7 +1,7 @@
 import * as Bull from 'bull';
 
 import { queueLogger } from '../../logger';
-import deleteFile from '../../../services/drive/delete-file';
+import { deleteFile } from '../../../services/drive/delete-file';
 import { Users, DriveFiles } from '../../../models';
 import { MoreThan } from 'typeorm';
 

src/queue/processors/object-storage/delete-file.ts

@@ -0,0 +1,22 @@
+import * as Bull from 'bull';
+import * as Minio from 'minio';
+import { fetchMeta } from '../../../misc/fetch-meta';
+
+export default async (job: Bull.Job) => {
+	const meta = await fetchMeta();
+
+	const minio = new Minio.Client({
+		endPoint: meta.objectStorageEndpoint!,
+		region: meta.objectStorageRegion ? meta.objectStorageRegion : undefined,
+		port: meta.objectStoragePort ? meta.objectStoragePort : undefined,
+		useSSL: meta.objectStorageUseSSL,
+		accessKey: meta.objectStorageAccessKey!,
+		secretKey: meta.objectStorageSecretKey!,
+	});
+
+	const key: string = job.data.key;
+
+	await minio.removeObject(meta.objectStorageBucket!, key);
+
+	return 'Success';
+};

src/queue/processors/object-storage/index.ts

@@ -0,0 +1,12 @@
+import * as Bull from 'bull';
+import deleteFile from './delete-file';
+
+const jobs = {
+	deleteFile,
+} as any;
+
+export default function(q: Bull.Queue) {
+	for (const [k, v] of Object.entries(jobs)) {
+		q.process(k, v as any);
+	}
+}

src/server/api/endpoints/admin/delete-all-files-of-a-user.ts

@@ -1,6 +1,6 @@
 import $ from 'cafy';
 import define from '../../define';
-import del from '../../../../services/drive/delete-file';
+import { deleteFile } from '../../../../services/drive/delete-file';
 import { DriveFiles } from '../../../../models';
 import { ID } from '../../../../misc/cafy-id';
 
@@ -27,6 +27,6 @@ export default define(meta, async (ps, me) => {
 	});
 
 	for (const file of files) {
-		del(file);
+		deleteFile(file);
 	}
 });

src/server/api/endpoints/admin/drive/clean-remote-files.ts

@@ -0,0 +1,21 @@
+import { Not, IsNull } from 'typeorm';
+import define from '../../../define';
+import { deleteFile } from '../../../../../services/drive/delete-file';
+import { DriveFiles } from '../../../../../models';
+
+export const meta = {
+	tags: ['admin'],
+
+	requireCredential: true,
+	requireModerator: true,
+};
+
+export default define(meta, async (ps, me) => {
+	const files = await DriveFiles.find({
+		userHost: Not(IsNull())
+	});
+
+	for (const file of files) {
+		deleteFile(file, true);
+	}
+});

src/server/api/endpoints/admin/drive/cleanup.ts

@@ -0,0 +1,21 @@
+import { IsNull } from 'typeorm';
+import define from '../../../define';
+import { deleteFile } from '../../../../../services/drive/delete-file';
+import { DriveFiles } from '../../../../../models';
+
+export const meta = {
+	tags: ['admin'],
+
+	requireCredential: true,
+	requireModerator: true,
+};
+
+export default define(meta, async (ps, me) => {
+	const files = await DriveFiles.find({
+		userId: IsNull()
+	});
+
+	for (const file of files) {
+		deleteFile(file);
+	}
+});

src/server/api/endpoints/admin/federation/delete-all-files.ts

@@ -1,6 +1,6 @@
 import $ from 'cafy';
 import define from '../../../define';
-import del from '../../../../../services/drive/delete-file';
+import { deleteFile } from '../../../../../services/drive/delete-file';
 import { DriveFiles } from '../../../../../models';
 
 export const meta = {
@@ -22,6 +22,6 @@ export default define(meta, async (ps, me) => {
 	});
 
 	for (const file of files) {
-		del(file);
+		deleteFile(file);
 	}
 });

src/server/api/endpoints/admin/queue/stats.ts

@@ -1,5 +1,5 @@
 import define from '../../../define';
-import { deliverQueue, inboxQueue } from '../../../../../queue';
+import { deliverQueue, inboxQueue, dbQueue, objectStorageQueue } from '../../../../../queue';
 
 export const meta = {
 	tags: ['admin'],
@@ -13,9 +13,13 @@ export const meta = {
 export default define(meta, async (ps) => {
 	const deliverJobCounts = await deliverQueue.getJobCounts();
 	const inboxJobCounts = await inboxQueue.getJobCounts();
+	const dbJobCounts = await dbQueue.getJobCounts();
+	const objectStorageJobCounts = await objectStorageQueue.getJobCounts();
 
 	return {
 		deliver: deliverJobCounts,
-		inbox: inboxJobCounts
+		inbox: inboxJobCounts,
+		db: dbJobCounts,
+		objectStorage: objectStorageJobCounts,
 	};
 });

src/server/api/endpoints/drive/files/delete.ts

@@ -1,6 +1,6 @@
 import $ from 'cafy';
 import { ID } from '../../../../../misc/cafy-id';
-import del from '../../../../../services/drive/delete-file';
+import { deleteFile } from '../../../../../services/drive/delete-file';
 import { publishDriveStream } from '../../../../../services/stream';
 import define from '../../../define';
 import { ApiError } from '../../../error';
@@ -57,7 +57,7 @@ export default define(meta, async (ps, user) => {
 	}
 
 	// Delete
-	await del(file);
+	await deleteFile(file);
 
 	// Publish fileDeleted event
 	publishDriveStream(user.id, 'fileDeleted', file.id);

src/services/drive/add-file.ts

@@ -7,7 +7,7 @@ import * as uuid from 'uuid';
 import * as sharp from 'sharp';
 
 import { publishMainStream, publishDriveStream } from '../stream';
-import delFile from './delete-file';
+import { deleteFile } from './delete-file';
 import { fetchMeta } from '../../misc/fetch-meta';
 import { GenerateVideoThumbnail } from './generate-video-thumbnail';
 import { driveLogger } from './logger';
@@ -233,7 +233,7 @@ async function deleteOldFile(user: IRemoteUser) {
 	const oldFile = await q.getOne();
 
 	if (oldFile) {
-		delFile(oldFile, true);
+		deleteFile(oldFile, true);
 	}
 }
 

src/services/drive/delete-file.ts

@@ -1,11 +1,10 @@
-import * as Minio from 'minio';
 import { DriveFile } from '../../models/entities/drive-file';
 import { InternalStorage } from './internal-storage';
 import { DriveFiles, Instances, Notes } from '../../models';
 import { driveChart, perUserDriveChart, instanceChart } from '../chart';
-import { fetchMeta } from '../../misc/fetch-meta';
+import { createDeleteObjectStorageFileJob } from '../../queue';
 
-export default async function(file: DriveFile, isExpired = false) {
+export async function deleteFile(file: DriveFile, isExpired = false) {
 	if (file.storedInternal) {
 		InternalStorage.del(file.accessKey!);
 
@@ -17,25 +16,14 @@ export default async function(file: DriveFile, isExpired = false) {
 			InternalStorage.del(file.webpublicAccessKey!);
 		}
 	} else if (!file.isLink) {
-		const meta = await fetchMeta();
+		createDeleteObjectStorageFileJob(file.accessKey!);
-
-		const minio = new Minio.Client({
-			endPoint: meta.objectStorageEndpoint!,
-			region: meta.objectStorageRegion ? meta.objectStorageRegion : undefined,
-			port: meta.objectStoragePort ? meta.objectStoragePort : undefined,
-			useSSL: meta.objectStorageUseSSL,
-			accessKey: meta.objectStorageAccessKey!,
-			secretKey: meta.objectStorageSecretKey!,
-		});
-
-		await minio.removeObject(meta.objectStorageBucket!, file.accessKey!);
 
 		if (file.thumbnailUrl) {
-			await minio.removeObject(meta.objectStorageBucket!, file.thumbnailAccessKey!);
+			createDeleteObjectStorageFileJob(file.thumbnailAccessKey!);
 		}
 
 		if (file.webpublicUrl) {
-			await minio.removeObject(meta.objectStorageBucket!, file.webpublicAccessKey!);
+			createDeleteObjectStorageFileJob(file.webpublicAccessKey!);
 		}
 	}
 
@@ -44,8 +32,8 @@ export default async function(file: DriveFile, isExpired = false) {
 		DriveFiles.update(file.id, {
 			isLink: true,
 			url: file.uri,
-			thumbnailUrl: null,
+			thumbnailUrl: file.uri,
-			webpublicUrl: null
+			webpublicUrl: file.uri
 		});
 	} else {
 		DriveFiles.delete(file.id);

src/tools/clean-remote-files.ts

@@ -1,26 +0,0 @@
-import * as promiseLimit from 'promise-limit';
-import del from '../services/drive/delete-file';
-import { DriveFiles } from '../models';
-import { Not, IsNull } from 'typeorm';
-import { DriveFile } from '../models/entities/drive-file';
-import { ensure } from '../prelude/ensure';
-
-const limit = promiseLimit(16);
-
-DriveFiles.find({
-	userHost: Not(IsNull())
-}).then(async files => {
-	console.log(`there is ${files.length} files`);
-
-	await Promise.all(files.map(file => limit(() => job(file))));
-
-	console.log('ALL DONE');
-});
-
-async function job(file: DriveFile): Promise<any> {
-	file = await DriveFiles.findOne(file.id).then(ensure);
-
-	await del(file, true);
-
-	console.log('done', file.id);
-}