Merge branch 'develop' into pizzax-indexeddb

13 files changed, 99 insertions, 511 deletions

diff --git a/packages/client/src/components/avatars.vue b/packages/client/src/components/avatars.vue
index e843d26daa..958e5db0a1 100644
--- a/packages/client/src/components/avatars.vue
+++ b/packages/client/src/components/avatars.vue
@@ -1,30 +1,24 @@
 <template>
 <div>
-	<div v-for="user in us" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
+	<div v-for="user in users" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
 		<MkAvatar :user="user" style="width:32px;height:32px;" :show-indicator="true"/>
 	</div>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
 import * as os from '@/os';
 
-export default defineComponent({
-	props: {
-		userIds: {
-			required: true
-		},
-	},
-	data() {
-		return {
-			us: []
-		};
-	},
-	async created() {
-		this.us = await os.api('users/show', {
-			userIds: this.userIds
-		});
-	}
+const props = defineProps<{
+	userIds: string[];
+}>();
+
+const users = ref([]);
+
+onMounted(async () => {
+	users.value = await os.api('users/show', {
+		userIds: props.userIds
+	});
 });
 </script>
diff --git a/packages/client/src/components/cw-button.vue b/packages/client/src/components/cw-button.vue
index 4bec7b511e..b0a9860de2 100644
--- a/packages/client/src/components/cw-button.vue
+++ b/packages/client/src/components/cw-button.vue
@@ -5,41 +5,33 @@
 </button>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
 import { length } from 'stringz';
+import * as misskey from 'misskey-js';
 import { concat } from '@/scripts/array';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	props: {
-		modelValue: {
-			type: Boolean,
-			required: true
-		},
-		note: {
-			type: Object,
-			required: true
-		}
-	},
-
-	computed: {
-		label(): string {
-			return concat([
-				this.note.text ? [this.$t('_cw.chars', { count: length(this.note.text) })] : [],
-				this.note.files && this.note.files.length !== 0 ? [this.$t('_cw.files', { count: this.note.files.length }) ] : [],
-				this.note.poll != null ? [this.$ts.poll] : []
-			] as string[][]).join(' / ');
-		}
-	},
+const props = defineProps<{
+	modelValue: boolean;
+	note: misskey.entities.Note;
+}>();
 
-	methods: {
-		length,
+const emit = defineEmits<{
+	(e: 'update:modelValue', v: boolean): void;
+}>();
 
-		toggle() {
-			this.$emit('update:modelValue', !this.modelValue);
-		}
-	}
+const label = computed(() => {
+	return concat([
+		props.note.text ? [i18n.t('_cw.chars', { count: length(props.note.text) })] : [],
+		props.note.files && props.note.files.length !== 0 ? [i18n.t('_cw.files', { count: props.note.files.length }) ] : [],
+		props.note.poll != null ? [i18n.locale.poll] : []
+	] as string[][]).join(' / ');
 });
+
+const toggle = () => {
+	emit('update:modelValue', !props.modelValue);
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/file-type-icon.vue b/packages/client/src/components/file-type-icon.vue
index be1af5e501..11d28188cc 100644
--- a/packages/client/src/components/file-type-icon.vue
+++ b/packages/client/src/components/file-type-icon.vue
@@ -4,25 +4,12 @@
 </span>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import * as os from '@/os';
+<script lang="ts" setup>
+import { computed } from 'vue';
 
-export default defineComponent({
-	props: {
-		type: {
-			type: String,
-			required: true,
-		}
-	},
-	data() {
-		return {
-		};
-	},
-	computed: {
-		kind(): string {
-			return this.type.split('/')[0];
-		}
-	}
-});
+const props = defineProps<{
+	type: string;
+}>();
+
+const kind = computed(() => props.type.split('/')[0]);
 </script>
diff --git a/packages/client/src/components/global/acct.vue b/packages/client/src/components/global/acct.vue
index 018826153c..c3e806b5fb 100644
--- a/packages/client/src/components/global/acct.vue
+++ b/packages/client/src/components/global/acct.vue
@@ -5,28 +5,17 @@
 </span>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import * as misskey from 'misskey-js';
 import { toUnicode } from 'punycode/';
-import { host } from '@/config';
+import { host as hostRaw } from '@/config';
 
-export default defineComponent({
-	props: {
-		user: {
-			type: Object,
-			required: true
-		},
-		detail: {
-			type: Boolean,
-			default: false
-		},
-	},
-	data() {
-		return {
-			host: toUnicode(host),
-		};
-	}
-});
+defineProps<{
+	user: misskey.entities.UserDetailed;
+	detail?: boolean;
+}>();
+
+const host = toUnicode(hostRaw);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/global/error.vue b/packages/client/src/components/global/error.vue
index d759186167..98b96fb414 100644
--- a/packages/client/src/components/global/error.vue
+++ b/packages/client/src/components/global/error.vue
@@ -8,19 +8,8 @@
 </transition>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import MkButton from '@/components/ui/button.vue';
-
-export default defineComponent({
-	components: {
-		MkButton,
-	},
-	data() {
-		return {
-		};
-	},
-});
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/google.vue b/packages/client/src/components/google.vue
index a39168b80f..210ca72bfe 100644
--- a/packages/client/src/components/google.vue
+++ b/packages/client/src/components/google.vue
@@ -5,31 +5,18 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import * as os from '@/os';
+<script lang="ts" setup>
+import { ref } from 'vue';
 
-export default defineComponent({
-	props: {
-		q: {
-			type: String,
-			required: true,
-		}
-	},
-	data() {
-		return {
-			query: null,
-		};
-	},
-	mounted() {
-		this.query = this.q;
-	},
-	methods: {
-		search() {
-			window.open(`https://www.google.com/search?q=${this.query}`, '_blank');
-		}
-	}
-});
+const props = defineProps<{
+	q: string;
+}>();
+
+const query = ref(props.q);
+
+const search = () => {
+	window.open(`https://www.google.com/search?q=${query.value}`, '_blank');
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/media-video.vue
index a0dc57b657..680eb27e64 100644
--- a/packages/client/src/components/media-video.vue
+++ b/packages/client/src/components/media-video.vue
@@ -22,26 +22,16 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import * as os from '@/os';
+<script lang="ts" setup>
+import { ref } from 'vue';
+import * as misskey from 'misskey-js';
+import { defaultStore } from '@/store';
 
-export default defineComponent({
-	props: {
-		video: {
-			type: Object,
-			required: true
-		}
-	},
-	data() {
-		return {
-			hide: true,
-		};
-	},
-	created() {
-		this.hide = (this.$store.state.nsfw === 'force') ? true : this.video.isSensitive && (this.$store.state.nsfw !== 'ignore');
-	},
-});
+const props = defineProps<{
+	video: misskey.entities.DriveFile;
+}>();
+
+const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/remote-caution.vue b/packages/client/src/components/remote-caution.vue
index c496ea8f48..aa623f0fb0 100644
--- a/packages/client/src/components/remote-caution.vue
+++ b/packages/client/src/components/remote-caution.vue
@@ -2,22 +2,10 @@
 <div class="jmgmzlwq _block"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>{{ $ts.remoteUserCaution }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $ts.showOnRemote }}</a></div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import * as os from '@/os';
-
-export default defineComponent({
-	props: {
-		href: {
-			type: String,
-			required: true
-		},
-	},
-	data() {
-		return {
-		};
-	}
-});
+<script lang="ts" setup>
+defineProps<{
+	href: string;
+}>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/taskmanager.api-window.vue b/packages/client/src/components/taskmanager.api-window.vue
deleted file mode 100644
index 6ec4da3a59..0000000000
--- a/packages/client/src/components/taskmanager.api-window.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-<XWindow ref="window"
-	:initial-width="370"
-	:initial-height="450"
-	:can-resize="true"
-	@close="$refs.window.close()"
-	@closed="$emit('closed')"
->
-	<template #header>Req Viewer</template>
-
-	<div class="rlkneywz">
-		<MkTab v-model="tab" style="border-bottom: solid 0.5px var(--divider);">
-			<option value="req">Request</option>
-			<option value="res">Response</option>
-		</MkTab>
-
-		<code v-if="tab === 'req'" class="_monospace">{{ reqStr }}</code>
-		<code v-if="tab === 'res'" class="_monospace">{{ resStr }}</code>
-	</div>
-</XWindow>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import * as JSON5 from 'json5';
-import XWindow from '@/components/ui/window.vue';
-import MkTab from '@/components/tab.vue';
-
-export default defineComponent({
-	components: {
-		XWindow,
-		MkTab,
-	},
-
-	props: {
-		req: {
-			required: true,
-		}
-	},
-
-	emits: ['closed'],
-
-	data() {
-		return {
-			tab: 'req',
-			reqStr: JSON5.stringify(this.req.req, null, '\t'),
-			resStr: JSON5.stringify(this.req.res, null, '\t'),
-		}
-	},
-
-	methods: {
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.rlkneywz {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-
-	> code {
-		display: block;
-		flex: 1;
-		padding: 8px;
-		overflow: auto;
-		font-size: 0.9em;
-		tab-size: 2;
-		white-space: pre;
-	}
-}
-</style>
diff --git a/packages/client/src/components/taskmanager.vue b/packages/client/src/components/taskmanager.vue
deleted file mode 100644
index c5d2c6d8f8..0000000000
--- a/packages/client/src/components/taskmanager.vue
+++ /dev/null
@@ -1,234 +0,0 @@
-<template>
-<XWindow ref="window" :initial-width="650" :initial-height="420" :can-resize="true" @closed="$emit('closed')">
-	<template #header>
-		<i class="fas fa-terminal" style="margin-right: 0.5em;"></i>Task Manager
-	</template>
-	<div class="qljqmnzj _monospace">
-		<MkTab v-model="tab" style="border-bottom: solid 0.5px var(--divider);">
-			<option value="windows">Windows</option>
-			<option value="stream">Stream</option>
-			<option value="streamPool">Stream (Pool)</option>
-			<option value="api">API</option>
-		</MkTab>
-
-		<div class="content">
-			<div v-if="tab === 'windows'" v-follow class="windows">
-				<div class="header">
-					<div>#ID</div>
-					<div>Component</div>
-					<div>Action</div>
-				</div>
-				<div v-for="p in popups">
-					<div>#{{ p.id }}</div>
-					<div>{{ p.component.name ? p.component.name : '<anonymous>' }}</div>
-					<div><button class="_textButton" @click="killPopup(p)">Kill</button></div>
-				</div>
-			</div>
-			<div v-if="tab === 'stream'" v-follow class="stream">
-				<div class="header">
-					<div>#ID</div>
-					<div>Ch</div>
-					<div>Handle</div>
-					<div>In</div>
-					<div>Out</div>
-				</div>
-				<div v-for="c in connections">
-					<div>#{{ c.id }}</div>
-					<div>{{ c.channel }}</div>
-					<div v-if="c.users !== null">(shared)<span v-if="c.name">{{ ' ' + c.name }}</span></div>
-					<div v-else>{{ c.name ? c.name : '<anonymous>' }}</div>
-					<div>{{ c.in }}</div>
-					<div>{{ c.out }}</div>
-				</div>
-			</div>
-			<div v-if="tab === 'streamPool'" v-follow class="streamPool">
-				<div class="header">
-					<div>#ID</div>
-					<div>Ch</div>
-					<div>Users</div>
-				</div>
-				<div v-for="p in pools">
-					<div>#{{ p.id }}</div>
-					<div>{{ p.channel }}</div>
-					<div>{{ p.users }}</div>
-				</div>
-			</div>
-			<div v-if="tab === 'api'" v-follow class="api">
-				<div class="header">
-					<div>#ID</div>
-					<div>Endpoint</div>
-					<div>State</div>
-				</div>
-				<div v-for="req in apiRequests" @click="showReq(req)">
-					<div>#{{ req.id }}</div>
-					<div>{{ req.endpoint }}</div>
-					<div class="state" :class="req.state">{{ req.state }}</div>
-				</div>
-			</div>
-		</div>
-
-		<footer>
-			<div><span class="label">Windows</span>{{ popups.length }}</div>
-			<div><span class="label">Stream</span>{{ connections.length }}</div>
-			<div><span class="label">Stream (Pool)</span>{{ pools.length }}</div>
-		</footer>
-	</div>
-</XWindow>
-</template>
-
-<script lang="ts">
-import { defineComponent, markRaw, onBeforeUnmount, ref, shallowRef } from 'vue';
-import XWindow from '@/components/ui/window.vue';
-import MkTab from '@/components/tab.vue';
-import MkButton from '@/components/ui/button.vue';
-import follow from '@/directives/follow-append';
-import * as os from '@/os';
-import { stream } from '@/stream';
-
-export default defineComponent({
-	components: {
-		XWindow,
-		MkTab,
-		MkButton,
-	},
-
-	directives: {
-		follow
-	},
-
-	props: {
-	},
-
-	emits: ['closed'],
-
-	setup() {
-		const connections = shallowRef([]);
-		const pools = shallowRef([]);
-		const refreshStreamInfo = () => {
-			console.log(stream.sharedConnectionPools, stream.sharedConnections, stream.nonSharedConnections);
-			const conn = stream.sharedConnections.map(c => ({
-				id: c.id, name: c.name, channel: c.channel, users: c.pool.users, in: c.inCount, out: c.outCount,
-			})).concat(stream.nonSharedConnections.map(c => ({
-				id: c.id, name: c.name, channel: c.channel, users: null, in: c.inCount, out: c.outCount,
-			})));
-			conn.sort((a, b) => (a.id > b.id) ? 1 : -1);
-			connections.value = conn;
-			pools.value = stream.sharedConnectionPools;
-		};
-		const interval = setInterval(refreshStreamInfo, 1000);
-		onBeforeUnmount(() => {
-			clearInterval(interval);
-		});
-
-		const killPopup = p => {
-			os.popups.value = os.popups.value.filter(x => x !== p);
-		};
-
-		const showReq = req => {
-			os.popup(import('./taskmanager.api-window.vue'), {
-				req: req
-			}, {
-			}, 'closed');
-		};
-
-		return {
-			tab: ref('stream'),
-			popups: os.popups,
-			apiRequests: os.apiRequests,
-			connections,
-			pools,
-			killPopup,
-			showReq,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.qljqmnzj {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-
-	> .content {
-		flex: 1;
-		overflow: auto;
-
-		> div {
-			display: table;
-			width: 100%;
-			padding: 16px;
-			box-sizing: border-box;
-
-			> div {
-				display: table-row;
-
-				&:nth-child(even) {
-					//background: rgba(0, 0, 0, 0.1);
-				}
-
-				&.header {
-					opacity: 0.7;
-				}
-
-				> div {
-					display: table-cell;
-					white-space: nowrap;
-
-					&:not(:last-child) {
-						padding-right: 8px;
-					}
-				}
-			}
-
-			&.api {
-				> div {
-					&:not(.header) {
-						cursor: pointer;
-
-						&:hover {
-							color: var(--accent);
-						}
-					}
-
-					> .state {
-						&.pending {
-							color: var(--warn);
-						}
-
-						&.success {
-							color: var(--success);
-						}
-
-						&.failed {
-							color: var(--error);
-						}
-					}
-				}
-			}
-		}
-	}
-
-	> footer {
-		display: flex;
-		width: 100%;
-		padding: 8px 16px;
-		box-sizing: border-box;
-		border-top: solid 0.5px var(--divider);
-		font-size: 0.9em;
-
-		> div {
-			flex: 1;
-
-			> .label {
-				opacity: 0.7;
-				margin-right: 0.5em;
-
-				&:after {
-					content: ":";
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/toast.vue b/packages/client/src/components/toast.vue
index 914704c527..869182d8e1 100644
--- a/packages/client/src/components/toast.vue
+++ b/packages/client/src/components/toast.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-toast">
-	<transition name="toast" appear @after-leave="$emit('closed')">
+	<transition name="toast" appear @after-leave="emit('closed')">
 		<div v-if="showing" class="body _acrylic" :style="{ zIndex }">
 			<div class="message">
 				{{ message }}
@@ -10,29 +10,25 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
 import * as os from '@/os';
 
-export default defineComponent({
-	props: {
-		message: {
-			type: String,
-			required: true,
-		},
-	},
-	emits: ['closed'],
-	data() {
-		return {
-			showing: true,
-			zIndex: os.claimZIndex('high'),
-		};
-	},
-	mounted() {
-		setTimeout(() => {
-			this.showing = false;
-		}, 4000);
-	}
+defineProps<{
+	message: string;
+}>();
+
+const emit = defineEmits<{
+	(e: 'closed'): void;
+}>();
+
+const showing = ref(true);
+const zIndex = os.claimZIndex('high');
+
+onMounted(() => {
+	setTimeout(() => {
+		showing.value = false;
+	}, 4000);
 });
 </script>
 
diff --git a/packages/client/src/components/url-preview.vue b/packages/client/src/components/url-preview.vue
index fe88985a62..dff74800ed 100644
--- a/packages/client/src/components/url-preview.vue
+++ b/packages/client/src/components/url-preview.vue
@@ -76,7 +76,7 @@ export default defineComponent({
 			tweetExpanded: this.detail,
 			embedId: `embed${Math.random().toString().replace(/\D/,'')}`,
 			tweetHeight: 150,
- 			tweetLeft: 0,
+			tweetLeft: 0,
 			playerEnabled: false,
 			self: self,
 			attr: self ? 'to' : 'href',
diff --git a/packages/client/src/components/user-info.vue b/packages/client/src/components/user-info.vue
index 779a71358d..6a25d412fc 100644
--- a/packages/client/src/components/user-info.vue
+++ b/packages/client/src/components/user-info.vue
@@ -27,32 +27,14 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import * as misskey from 'misskey-js';
 import MkFollowButton from './follow-button.vue';
 import { userPage } from '@/filters/user';
 
-export default defineComponent({
-	components: {
-		MkFollowButton
-	},
-
-	props: {
-		user: {
-			type: Object,
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	methods: {
-		userPage,
-	}
-});
+defineProps<{
+	user: misskey.entities.UserDetailed;
+}>();
 </script>
 
 <style lang="scss" scoped>