Merge branch 'develop'

21 files changed, 542 insertions, 2677 deletions

diff --git a/packages/client/src/scripts/autocomplete.ts b/packages/client/src/scripts/autocomplete.ts
index f2d5806484..f4a3a4c0fc 100644
--- a/packages/client/src/scripts/autocomplete.ts
+++ b/packages/client/src/scripts/autocomplete.ts
@@ -1,4 +1,4 @@
-import { Ref, ref } from 'vue';
+import { nextTick, Ref, ref } from 'vue';
 import * as getCaretCoordinates from 'textarea-caret';
 import { toASCII } from 'punycode/';
 import { popup } from '@/os';
@@ -10,26 +10,23 @@ export class Autocomplete {
 		q: Ref<string | null>;
 		close: Function;
 	} | null;
-	private textarea: any;
-	private vm: any;
+	private textarea: HTMLInputElement | HTMLTextAreaElement;
 	private currentType: string;
-	private opts: {
-		model: string;
-	};
+	private textRef: Ref<string>;
 	private opening: boolean;
 
 	private get text(): string {
-		return this.vm[this.opts.model];
+		return this.textRef.value;
 	}
 
 	private set text(text: string) {
-		this.vm[this.opts.model] = text;
+		this.textRef.value = text;
 	}
 
 	/**
 	 * 対象のテキストエリアを与えてインスタンスを初期化します。
 	 */
-	constructor(textarea, vm, opts) {
+	constructor(textarea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>) {
 		//#region BIND
 		this.onInput = this.onInput.bind(this);
 		this.complete = this.complete.bind(this);
@@ -38,8 +35,7 @@ export class Autocomplete {
 
 		this.suggestion = null;
 		this.textarea = textarea;
-		this.vm = vm;
-		this.opts = opts;
+		this.textRef = textRef;
 		this.opening = false;
 
 		this.attach();
@@ -218,7 +214,7 @@ export class Autocomplete {
 			this.text = `${trimmedBefore}@${acct} ${after}`;
 
 			// キャレットを戻す
-			this.vm.$nextTick(() => {
+			nextTick(() => {
 				this.textarea.focus();
 				const pos = trimmedBefore.length + (acct.length + 2);
 				this.textarea.setSelectionRange(pos, pos);
@@ -234,7 +230,7 @@ export class Autocomplete {
 			this.text = `${trimmedBefore}#${value} ${after}`;
 
 			// キャレットを戻す
-			this.vm.$nextTick(() => {
+			nextTick(() => {
 				this.textarea.focus();
 				const pos = trimmedBefore.length + (value.length + 2);
 				this.textarea.setSelectionRange(pos, pos);
@@ -250,7 +246,7 @@ export class Autocomplete {
 			this.text = trimmedBefore + value + after;
 
 			// キャレットを戻す
-			this.vm.$nextTick(() => {
+			nextTick(() => {
 				this.textarea.focus();
 				const pos = trimmedBefore.length + value.length;
 				this.textarea.setSelectionRange(pos, pos);
@@ -266,7 +262,7 @@ export class Autocomplete {
 			this.text = `${trimmedBefore}$[${value} ]${after}`;
 
 			// キャレットを戻す
-			this.vm.$nextTick(() => {
+			nextTick(() => {
 				this.textarea.focus();
 				const pos = trimmedBefore.length + (value.length + 3);
 				this.textarea.setSelectionRange(pos, pos);
diff --git a/packages/client/src/scripts/check-word-mute.ts b/packages/client/src/scripts/check-word-mute.ts
index 3b1fa75b1e..55637bb3b3 100644
--- a/packages/client/src/scripts/check-word-mute.ts
+++ b/packages/client/src/scripts/check-word-mute.ts
@@ -1,4 +1,4 @@
-export async function checkWordMute(note: Record<string, any>, me: Record<string, any> | null | undefined, mutedWords: string[][]): Promise<boolean> {
+export function checkWordMute(note: Record<string, any>, me: Record<string, any> | null | undefined, mutedWords: string[][]): boolean {
 	// 自分自身
 	if (me && (note.userId === me.id)) return false;
 
diff --git a/packages/client/src/scripts/emojilist.ts b/packages/client/src/scripts/emojilist.ts
index de7591f5a0..bd8689e4f8 100644
--- a/packages/client/src/scripts/emojilist.ts
+++ b/packages/client/src/scripts/emojilist.ts
@@ -1,7 +1,11 @@
-// initial converted from https://github.com/muan/emojilib/commit/242fe68be86ed6536843b83f7e32f376468b38fb
-export const emojilist = require('../emojilist.json') as {
+export const unicodeEmojiCategories = ['face', 'people', 'animals_and_nature', 'food_and_drink', 'activity', 'travel_and_places', 'objects', 'symbols', 'flags'] as const;
+
+export type UnicodeEmojiDef = {
 	name: string;
 	keywords: string[];
 	char: string;
-	category: 'people' | 'animals_and_nature' | 'food_and_drink' | 'activity' | 'travel_and_places' | 'objects' | 'symbols' | 'flags';
-}[];
+	category: typeof unicodeEmojiCategories[number];
+}
+
+// initial converted from https://github.com/muan/emojilib/commit/242fe68be86ed6536843b83f7e32f376468b38fb
+export const emojilist = require('../emojilist.json') as UnicodeEmojiDef[];
diff --git a/packages/client/src/scripts/form.ts b/packages/client/src/scripts/form.ts
index 7bf6cec452..7f321cc0ae 100644
--- a/packages/client/src/scripts/form.ts
+++ b/packages/client/src/scripts/form.ts
@@ -23,9 +23,37 @@ export type FormItem = {
 	enum: string[];
 } | {
 	label?: string;
+	type: 'radio';
+	default: unknown | null;
+	hidden?: boolean;
+	options: {
+		label: string;
+		value: unknown;
+	}[];
+} | {
+	label?: string;
+	type: 'object';
+	default: Record<string, unknown> | null;
+	hidden: true;
+} | {
+	label?: string;
 	type: 'array';
 	default: unknown[] | null;
-	hidden?: boolean;
+	hidden: true;
 };
 
 export type Form = Record<string, FormItem>;
+
+type GetItemType<Item extends FormItem> =
+	Item['type'] extends 'string' ? string :
+	Item['type'] extends 'number' ? number :
+	Item['type'] extends 'boolean' ? boolean :
+	Item['type'] extends 'radio' ? unknown :
+	Item['type'] extends 'enum' ? string :
+	Item['type'] extends 'array' ? unknown[] :
+	Item['type'] extends 'object' ? Record<string, unknown>
+	: never;
+
+export type GetFormResultType<F extends Form> = {
+	[P in keyof F]: GetItemType<F[P]>;
+};
diff --git a/packages/client/src/scripts/games/reversi/core.ts b/packages/client/src/scripts/games/reversi/core.ts
deleted file mode 100644
index 0cb8922e19..0000000000
--- a/packages/client/src/scripts/games/reversi/core.ts
+++ /dev/null
@@ -1,263 +0,0 @@
-import { count, concat } from '@/scripts/array';
-
-// MISSKEY REVERSI ENGINE
-
-/**
- * true ... 黒
- * false ... 白
- */
-export type Color = boolean;
-const BLACK = true;
-const WHITE = false;
-
-export type MapPixel = 'null' | 'empty';
-
-export type Options = {
-	isLlotheo: boolean;
-	canPutEverywhere: boolean;
-	loopedBoard: boolean;
-};
-
-export type Undo = {
-	/**
-	 * 色
-	 */
-	color: Color;
-
-	/**
-	 * どこに打ったか
-	 */
-	pos: number;
-
-	/**
-	 * 反転した石の位置の配列
-	 */
-	effects: number[];
-
-	/**
-	 * ターン
-	 */
-	turn: Color | null;
-};
-
-/**
- * リバーシエンジン
- */
-export default class Reversi {
-	public map: MapPixel[];
-	public mapWidth: number;
-	public mapHeight: number;
-	public board: (Color | null | undefined)[];
-	public turn: Color | null = BLACK;
-	public opts: Options;
-
-	public prevPos = -1;
-	public prevColor: Color | null = null;
-
-	private logs: Undo[] = [];
-
-	/**
-	 * ゲームを初期化します
-	 */
-	constructor(map: string[], opts: Options) {
-		//#region binds
-		this.put = this.put.bind(this);
-		//#endregion
-
-		//#region Options
-		this.opts = opts;
-		if (this.opts.isLlotheo == null) this.opts.isLlotheo = false;
-		if (this.opts.canPutEverywhere == null) this.opts.canPutEverywhere = false;
-		if (this.opts.loopedBoard == null) this.opts.loopedBoard = false;
-		//#endregion
-
-		//#region Parse map data
-		this.mapWidth = map[0].length;
-		this.mapHeight = map.length;
-		const mapData = map.join('');
-
-		this.board = mapData.split('').map(d => d === '-' ? null : d === 'b' ? BLACK : d === 'w' ? WHITE : undefined);
-
-		this.map = mapData.split('').map(d => d === '-' || d === 'b' || d === 'w' ? 'empty' : 'null');
-		//#endregion
-
-		// ゲームが始まった時点で片方の色の石しかないか、始まった時点で勝敗が決定するようなマップの場合がある
-		if (!this.canPutSomewhere(BLACK))
-			this.turn = this.canPutSomewhere(WHITE) ? WHITE : null;
-	}
-
-	/**
-	 * 黒石の数
-	 */
-	public get blackCount() {
-		return count(BLACK, this.board);
-	}
-
-	/**
-	 * 白石の数
-	 */
-	public get whiteCount() {
-		return count(WHITE, this.board);
-	}
-
-	public transformPosToXy(pos: number): number[] {
-		const x = pos % this.mapWidth;
-		const y = Math.floor(pos / this.mapWidth);
-		return [x, y];
-	}
-
-	public transformXyToPos(x: number, y: number): number {
-		return x + (y * this.mapWidth);
-	}
-
-	/**
-	 * 指定のマスに石を打ちます
-	 * @param color 石の色
-	 * @param pos 位置
-	 */
-	public put(color: Color, pos: number) {
-		this.prevPos = pos;
-		this.prevColor = color;
-
-		this.board[pos] = color;
-
-		// 反転させられる石を取得
-		const effects = this.effects(color, pos);
-
-		// 反転させる
-		for (const pos of effects) {
-			this.board[pos] = color;
-		}
-
-		const turn = this.turn;
-
-		this.logs.push({
-			color,
-			pos,
-			effects,
-			turn
-		});
-
-		this.calcTurn();
-	}
-
-	private calcTurn() {
-		// ターン計算
-		this.turn =
-			this.canPutSomewhere(!this.prevColor) ? !this.prevColor :
-			this.canPutSomewhere(this.prevColor!) ? this.prevColor :
-			null;
-	}
-
-	public undo() {
-		const undo = this.logs.pop()!;
-		this.prevColor = undo.color;
-		this.prevPos = undo.pos;
-		this.board[undo.pos] = null;
-		for (const pos of undo.effects) {
-			const color = this.board[pos];
-			this.board[pos] = !color;
-		}
-		this.turn = undo.turn;
-	}
-
-	/**
-	 * 指定した位置のマップデータのマスを取得します
-	 * @param pos 位置
-	 */
-	public mapDataGet(pos: number): MapPixel {
-		const [x, y] = this.transformPosToXy(pos);
-		return x < 0 || y < 0 || x >= this.mapWidth || y >= this.mapHeight ? 'null' : this.map[pos];
-	}
-
-	/**
-	 * 打つことができる場所を取得します
-	 */
-	public puttablePlaces(color: Color): number[] {
-		return Array.from(this.board.keys()).filter(i => this.canPut(color, i));
-	}
-
-	/**
-	 * 打つことができる場所があるかどうかを取得します
-	 */
-	public canPutSomewhere(color: Color): boolean {
-		return this.puttablePlaces(color).length > 0;
-	}
-
-	/**
-	 * 指定のマスに石を打つことができるかどうかを取得します
-	 * @param color 自分の色
-	 * @param pos 位置
-	 */
-	public canPut(color: Color, pos: number): boolean {
-		return (
-			this.board[pos] !== null ? false : // 既に石が置いてある場所には打てない
-			this.opts.canPutEverywhere ? this.mapDataGet(pos) == 'empty' : // 挟んでなくても置けるモード
-			this.effects(color, pos).length !== 0); // 相手の石を1つでも反転させられるか
-	}
-
-	/**
-	 * 指定のマスに石を置いた時の、反転させられる石を取得します
-	 * @param color 自分の色
-	 * @param initPos 位置
-	 */
-	public effects(color: Color, initPos: number): number[] {
-		const enemyColor = !color;
-
-		const diffVectors: [number, number][] = [
-			[  0,  -1], // 上
-			[ +1,  -1], // 右上
-			[ +1,   0], // 右
-			[ +1,  +1], // 右下
-			[  0,  +1], // 下
-			[ -1,  +1], // 左下
-			[ -1,   0], // 左
-			[ -1,  -1]  // 左上
-		];
-
-		const effectsInLine = ([dx, dy]: [number, number]): number[] => {
-			const nextPos = (x: number, y: number): [number, number] => [x + dx, y + dy];
-
-			const found: number[] = []; // 挟めるかもしれない相手の石を入れておく配列
-			let [x, y] = this.transformPosToXy(initPos);
-			while (true) {
-				[x, y] = nextPos(x, y);
-
-				// 座標が指し示す位置がボード外に出たとき
-				if (this.opts.loopedBoard && this.transformXyToPos(
-					(x = ((x % this.mapWidth) + this.mapWidth) % this.mapWidth),
-					(y = ((y % this.mapHeight) + this.mapHeight) % this.mapHeight)) === initPos)
-						// 盤面の境界でループし、自分が石を置く位置に戻ってきたとき、挟めるようにしている (ref: Test4のマップ)
-					return found;
-				else if (x === -1 || y === -1 || x === this.mapWidth || y === this.mapHeight)
-					return []; // 挟めないことが確定 (盤面外に到達)
-
-				const pos = this.transformXyToPos(x, y);
-				if (this.mapDataGet(pos) === 'null') return []; // 挟めないことが確定 (配置不可能なマスに到達)
-				const stone = this.board[pos];
-				if (stone === null) return []; // 挟めないことが確定 (石が置かれていないマスに到達)
-				if (stone === enemyColor) found.push(pos); // 挟めるかもしれない (相手の石を発見)
-				if (stone === color) return found; // 挟めることが確定 (対となる自分の石を発見)
-			}
-		};
-
-		return concat(diffVectors.map(effectsInLine));
-	}
-
-	/**
-	 * ゲームが終了したか否か
-	 */
-	public get isEnded(): boolean {
-		return this.turn === null;
-	}
-
-	/**
-	 * ゲームの勝者 (null = 引き分け)
-	 */
-	public get winner(): Color | null {
-		return this.isEnded ?
-			this.blackCount == this.whiteCount ? null :
-			this.opts.isLlotheo === this.blackCount > this.whiteCount ? WHITE : BLACK :
-			undefined as never;
-	}
-}
diff --git a/packages/client/src/scripts/games/reversi/maps.ts b/packages/client/src/scripts/games/reversi/maps.ts
deleted file mode 100644
index dc0d1bf9d0..0000000000
--- a/packages/client/src/scripts/games/reversi/maps.ts
+++ /dev/null
@@ -1,896 +0,0 @@
-/**
- * 組み込みマップ定義
- *
- * データ値:
- * (スペース) ... マス無し
- * - ... マス
- * b ... 初期配置される黒石
- * w ... 初期配置される白石
- */
-
-export type Map = {
-	name?: string;
-	category?: string;
-	author?: string;
-	data: string[];
-};
-
-export const fourfour: Map = {
-	name: '4x4',
-	category: '4x4',
-	data: [
-		'----',
-		'-wb-',
-		'-bw-',
-		'----'
-	]
-};
-
-export const sixsix: Map = {
-	name: '6x6',
-	category: '6x6',
-	data: [
-		'------',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		'------'
-	]
-};
-
-export const roundedSixsix: Map = {
-	name: '6x6 rounded',
-	category: '6x6',
-	author: 'syuilo',
-	data: [
-		' ---- ',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		' ---- '
-	]
-};
-
-export const roundedSixsix2: Map = {
-	name: '6x6 rounded 2',
-	category: '6x6',
-	author: 'syuilo',
-	data: [
-		'  --  ',
-		' ---- ',
-		'--wb--',
-		'--bw--',
-		' ---- ',
-		'  --  '
-	]
-};
-
-export const eighteight: Map = {
-	name: '8x8',
-	category: '8x8',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const eighteightH1: Map = {
-	name: '8x8 handicap 1',
-	category: '8x8',
-	data: [
-		'b-------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const eighteightH2: Map = {
-	name: '8x8 handicap 2',
-	category: '8x8',
-	data: [
-		'b-------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'-------b'
-	]
-};
-
-export const eighteightH3: Map = {
-	name: '8x8 handicap 3',
-	category: '8x8',
-	data: [
-		'b------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'-------b'
-	]
-};
-
-export const eighteightH4: Map = {
-	name: '8x8 handicap 4',
-	category: '8x8',
-	data: [
-		'b------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'b------b'
-	]
-};
-
-export const eighteightH28: Map = {
-	name: '8x8 handicap 28',
-	category: '8x8',
-	data: [
-		'bbbbbbbb',
-		'b------b',
-		'b------b',
-		'b--wb--b',
-		'b--bw--b',
-		'b------b',
-		'b------b',
-		'bbbbbbbb'
-	]
-};
-
-export const roundedEighteight: Map = {
-	name: '8x8 rounded',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		' ------ ',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		' ------ '
-	]
-};
-
-export const roundedEighteight2: Map = {
-	name: '8x8 rounded 2',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'  ----  ',
-		' ------ ',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		' ------ ',
-		'  ----  '
-	]
-};
-
-export const roundedEighteight3: Map = {
-	name: '8x8 rounded 3',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'   --   ',
-		'  ----  ',
-		' ------ ',
-		'---wb---',
-		'---bw---',
-		' ------ ',
-		'  ----  ',
-		'   --   '
-	]
-};
-
-export const eighteightWithNotch: Map = {
-	name: '8x8 with notch',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'---  ---',
-		'--------',
-		'--------',
-		' --wb-- ',
-		' --bw-- ',
-		'--------',
-		'--------',
-		'---  ---'
-	]
-};
-
-export const eighteightWithSomeHoles: Map = {
-	name: '8x8 with some holes',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--- ----',
-		'----- --',
-		'-- -----',
-		'---wb---',
-		'---bw- -',
-		' -------',
-		'--- ----',
-		'--------'
-	]
-};
-
-export const circle: Map = {
-	name: 'Circle',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'   --   ',
-		' ------ ',
-		' ------ ',
-		'---wb---',
-		'---bw---',
-		' ------ ',
-		' ------ ',
-		'   --   '
-	]
-};
-
-export const smile: Map = {
-	name: 'Smile',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		' ------ ',
-		'--------',
-		'-- -- --',
-		'---wb---',
-		'-- bw --',
-		'---  ---',
-		'--------',
-		' ------ '
-	]
-};
-
-export const window: Map = {
-	name: 'Window',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--------',
-		'-  --  -',
-		'-  --  -',
-		'---wb---',
-		'---bw---',
-		'-  --  -',
-		'-  --  -',
-		'--------'
-	]
-};
-
-export const reserved: Map = {
-	name: 'Reserved',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'w------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'b------w'
-	]
-};
-
-export const x: Map = {
-	name: 'X',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'w------b',
-		'-w----b-',
-		'--w--b--',
-		'---wb---',
-		'---bw---',
-		'--b--w--',
-		'-b----w-',
-		'b------w'
-	]
-};
-
-export const parallel: Map = {
-	name: 'Parallel',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---bb---',
-		'---ww---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const lackOfBlack: Map = {
-	name: 'Lack of Black',
-	category: '8x8',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---w----',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const squareParty: Map = {
-	name: 'Square Party',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--------',
-		'-wwwbbb-',
-		'-w-wb-b-',
-		'-wwwbbb-',
-		'-bbbwww-',
-		'-b-bw-w-',
-		'-bbbwww-',
-		'--------'
-	]
-};
-
-export const minesweeper: Map = {
-	name: 'Minesweeper',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'b-b--w-w',
-		'-w-wb-b-',
-		'w-b--w-b',
-		'-b-wb-w-',
-		'-w-bw-b-',
-		'b-w--b-w',
-		'-b-bw-w-',
-		'w-w--b-b'
-	]
-};
-
-export const tenthtenth: Map = {
-	name: '10x10',
-	category: '10x10',
-	data: [
-		'----------',
-		'----------',
-		'----------',
-		'----------',
-		'----wb----',
-		'----bw----',
-		'----------',
-		'----------',
-		'----------',
-		'----------'
-	]
-};
-
-export const hole: Map = {
-	name: 'The Hole',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'----------',
-		'----------',
-		'--wb--wb--',
-		'--bw--bw--',
-		'----  ----',
-		'----  ----',
-		'--wb--wb--',
-		'--bw--bw--',
-		'----------',
-		'----------'
-	]
-};
-
-export const grid: Map = {
-	name: 'Grid',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'----------',
-		'- - -- - -',
-		'----------',
-		'- - -- - -',
-		'----wb----',
-		'----bw----',
-		'- - -- - -',
-		'----------',
-		'- - -- - -',
-		'----------'
-	]
-};
-
-export const cross: Map = {
-	name: 'Cross',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		'   ----   ',
-		'   ----   ',
-		'   ----   ',
-		'----------',
-		'----wb----',
-		'----bw----',
-		'----------',
-		'   ----   ',
-		'   ----   ',
-		'   ----   '
-	]
-};
-
-export const charX: Map = {
-	name: 'Char X',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'---    ---',
-		'----  ----',
-		'----------',
-		' -------- ',
-		'  --wb--  ',
-		'  --bw--  ',
-		' -------- ',
-		'----------',
-		'----  ----',
-		'---    ---'
-	]
-};
-
-export const charY: Map = {
-	name: 'Char Y',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'---    ---',
-		'----  ----',
-		'----------',
-		' -------- ',
-		'  --wb--  ',
-		'  --bw--  ',
-		'  ------  ',
-		'  ------  ',
-		'  ------  ',
-		'  ------  '
-	]
-};
-
-export const walls: Map = {
-	name: 'Walls',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		' bbbbbbbb ',
-		'w--------w',
-		'w--------w',
-		'w--------w',
-		'w---wb---w',
-		'w---bw---w',
-		'w--------w',
-		'w--------w',
-		'w--------w',
-		' bbbbbbbb '
-	]
-};
-
-export const cpu: Map = {
-	name: 'CPU',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		' b b  b b ',
-		'w--------w',
-		' -------- ',
-		'w--------w',
-		' ---wb--- ',
-		' ---bw--- ',
-		'w--------w',
-		' -------- ',
-		'w--------w',
-		' b b  b b '
-	]
-};
-
-export const checker: Map = {
-	name: 'Checker',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		'----------',
-		'----------',
-		'----------',
-		'---wbwb---',
-		'---bwbw---',
-		'---wbwb---',
-		'---bwbw---',
-		'----------',
-		'----------',
-		'----------'
-	]
-};
-
-export const japaneseCurry: Map = {
-	name: 'Japanese curry',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'w-b-b-b-b-',
-		'-w-b-b-b-b',
-		'w-w-b-b-b-',
-		'-w-w-b-b-b',
-		'w-w-wwb-b-',
-		'-w-wbb-b-b',
-		'w-w-w-b-b-',
-		'-w-w-w-b-b',
-		'w-w-w-w-b-',
-		'-w-w-w-w-b'
-	]
-};
-
-export const mosaic: Map = {
-	name: 'Mosaic',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'- - - - - ',
-		' - - - - -',
-		'- - - - - ',
-		' - w w - -',
-		'- - b b - ',
-		' - w w - -',
-		'- - b b - ',
-		' - - - - -',
-		'- - - - - ',
-		' - - - - -',
-	]
-};
-
-export const arena: Map = {
-	name: 'Arena',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'- - -- - -',
-		' - -  - - ',
-		'- ------ -',
-		' -------- ',
-		'- --wb-- -',
-		'- --bw-- -',
-		' -------- ',
-		'- ------ -',
-		' - -  - - ',
-		'- - -- - -'
-	]
-};
-
-export const reactor: Map = {
-	name: 'Reactor',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'-w------b-',
-		'b- -  - -w',
-		'- --wb-- -',
-		'---b  w---',
-		'- b wb w -',
-		'- w bw b -',
-		'---w  b---',
-		'- --bw-- -',
-		'w- -  - -b',
-		'-b------w-'
-	]
-};
-
-export const sixeight: Map = {
-	name: '6x8',
-	category: 'Special',
-	data: [
-		'------',
-		'------',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		'------',
-		'------'
-	]
-};
-
-export const spark: Map = {
-	name: 'Spark',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' -      - ',
-		'----------',
-		' -------- ',
-		' -------- ',
-		' ---wb--- ',
-		' ---bw--- ',
-		' -------- ',
-		' -------- ',
-		'----------',
-		' -      - '
-	]
-};
-
-export const islands: Map = {
-	name: 'Islands',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'--------  ',
-		'---wb---  ',
-		'---bw---  ',
-		'--------  ',
-		'  -    -  ',
-		'  -    -  ',
-		'  --------',
-		'  --------',
-		'  --------',
-		'  --------'
-	]
-};
-
-export const galaxy: Map = {
-	name: 'Galaxy',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'   ------   ',
-		'  --www---  ',
-		' ------w--- ',
-		'---bbb--w---',
-		'--b---b-w-b-',
-		'-b--wwb-w-b-',
-		'-b-w-bww--b-',
-		'-b-w-b---b--',
-		'---w--bbb---',
-		' ---w------ ',
-		'  ---www--  ',
-		'   ------   '
-	]
-};
-
-export const triangle: Map = {
-	name: 'Triangle',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'    --    ',
-		'    --    ',
-		'   ----   ',
-		'   ----   ',
-		'  --wb--  ',
-		'  --bw--  ',
-		' -------- ',
-		' -------- ',
-		'----------',
-		'----------'
-	]
-};
-
-export const iphonex: Map = {
-	name: 'iPhone X',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' --  -- ',
-		'--------',
-		'--------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------',
-		'--------',
-		' ------ '
-	]
-};
-
-export const dealWithIt: Map = {
-	name: 'Deal with it!',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'------------',
-		'--w-b-------',
-		' --b-w------',
-		'  --w-b---- ',
-		'   -------  '
-	]
-};
-
-export const experiment: Map = {
-	name: 'Let\'s experiment',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' ------------ ',
-		'------wb------',
-		'------bw------',
-		'--------------',
-		'    -    -    ',
-		'------  ------',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'wwwwww  bbbbbb'
-	]
-};
-
-export const bigBoard: Map = {
-	name: 'Big board',
-	category: 'Special',
-	data: [
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'-------wb-------',
-		'-------bw-------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------'
-	]
-};
-
-export const twoBoard: Map = {
-	name: 'Two board',
-	category: 'Special',
-	author: 'Aya',
-	data: [
-		'-------- --------',
-		'-------- --------',
-		'-------- --------',
-		'---wb--- ---wb---',
-		'---bw--- ---bw---',
-		'-------- --------',
-		'-------- --------',
-		'-------- --------'
-	]
-};
-
-export const test1: Map = {
-	name: 'Test1',
-	category: 'Test',
-	data: [
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------'
-	]
-};
-
-export const test2: Map = {
-	name: 'Test2',
-	category: 'Test',
-	data: [
-		'------',
-		'------',
-		'-b--w-',
-		'-w--b-',
-		'-w--b-'
-	]
-};
-
-export const test3: Map = {
-	name: 'Test3',
-	category: 'Test',
-	data: [
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'---',
-		'b--',
-	]
-};
-
-export const test4: Map = {
-	name: 'Test4',
-	category: 'Test',
-	data: [
-		'-w--b-',
-		'-w--b-',
-		'------',
-		'-w--b-',
-		'-w--b-'
-	]
-};
-
-// 検証用: この盤面で藍(lv3)が黒で始めると何故か(?)A1に打ってしまう
-export const test6: Map = {
-	name: 'Test6',
-	category: 'Test',
-	data: [
-		'--wwwww-',
-		'wwwwwwww',
-		'wbbbwbwb',
-		'wbbbbwbb',
-		'wbwbbwbb',
-		'wwbwbbbb',
-		'--wbbbbb',
-		'-wwwww--',
-	]
-};
-
-// 検証用: この盤面で藍(lv3)が黒で始めると何故か(?)G7に打ってしまう
-export const test7: Map = {
-	name: 'Test7',
-	category: 'Test',
-	data: [
-		'b--w----',
-		'b-wwww--',
-		'bwbwwwbb',
-		'wbwwwwb-',
-		'wwwwwww-',
-		'-wwbbwwb',
-		'--wwww--',
-		'--wwww--',
-	]
-};
-
-// 検証用: この盤面で藍(lv5)が黒で始めると何故か(?)A1に打ってしまう
-export const test8: Map = {
-	name: 'Test8',
-	category: 'Test',
-	data: [
-		'--------',
-		'-----w--',
-		'w--www--',
-		'wwwwww--',
-		'bbbbwww-',
-		'wwwwww--',
-		'--www---',
-		'--ww----',
-	]
-};
diff --git a/packages/client/src/scripts/games/reversi/package.json b/packages/client/src/scripts/games/reversi/package.json
deleted file mode 100644
index a4415ad141..0000000000
--- a/packages/client/src/scripts/games/reversi/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "misskey-reversi",
-  "version": "0.0.5",
-  "description": "Misskey reversi engine",
-  "keywords": [
-    "misskey"
-  ],
-  "author": "syuilo <i@syuilo.com>",
-  "license": "MIT",
-  "repository": "https://github.com/misskey-dev/misskey.git",
-  "bugs": "https://github.com/misskey-dev/misskey/issues",
-  "main": "./built/core.js",
-  "types": "./built/core.d.ts",
-  "scripts": {
-    "build": "tsc"
-  },
-  "dependencies": {}
-}
diff --git a/packages/client/src/scripts/games/reversi/tsconfig.json b/packages/client/src/scripts/games/reversi/tsconfig.json
deleted file mode 100644
index 851fb6b7e4..0000000000
--- a/packages/client/src/scripts/games/reversi/tsconfig.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-	"compilerOptions": {
-		"noEmitOnError": false,
-		"noImplicitAny": false,
-		"noImplicitReturns": true,
-		"noFallthroughCasesInSwitch": true,
-		"experimentalDecorators": true,
-		"declaration": true,
-		"sourceMap": false,
-		"target": "es2017",
-		"module": "commonjs",
-		"removeComments": false,
-		"noLib": false,
-		"outDir": "./built",
-		"rootDir": "./"
-	},
-	"compileOnSave": false,
-	"include": [
-		"./core.ts"
-	]
-}
diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
new file mode 100644
index 0000000000..3634f39632
--- /dev/null
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -0,0 +1,310 @@
+import { Ref } from 'vue';
+import * as misskey from 'misskey-js';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+import * as os from '@/os';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import { url } from '@/config';
+import { noteActions } from '@/store';
+import { pleaseLogin } from './please-login';
+
+export function getNoteMenu(props: {
+	note: misskey.entities.Note;
+	menuButton: Ref<HTMLElement>;
+	translation: Ref<any>;
+	translating: Ref<boolean>;
+}) {
+	const isRenote = (
+		props.note.renote != null &&
+		props.note.text == null &&
+		props.note.fileIds.length === 0 &&
+		props.note.poll == null
+	);
+
+	let appearNote = isRenote ? props.note.renote as misskey.entities.Note : props.note;
+
+	function del(): void {
+		os.confirm({
+			type: 'warning',
+			text: i18n.locale.noteDeleteConfirm,
+		}).then(({ canceled }) => {
+			if (canceled) return;
+
+			os.api('notes/delete', {
+				noteId: appearNote.id
+			});
+		});
+	}
+
+	function delEdit(): void {
+		os.confirm({
+			type: 'warning',
+			text: i18n.locale.deleteAndEditConfirm,
+		}).then(({ canceled }) => {
+			if (canceled) return;
+
+			os.api('notes/delete', {
+				noteId: appearNote.id
+			});
+
+			os.post({ initialNote: appearNote, renote: appearNote.renote, reply: appearNote.reply, channel: appearNote.channel });
+		});
+	}
+
+	function toggleFavorite(favorite: boolean): void {
+		os.apiWithDialog(favorite ? 'notes/favorites/create' : 'notes/favorites/delete', {
+			noteId: appearNote.id
+		});
+	}
+
+	function toggleWatch(watch: boolean): void {
+		os.apiWithDialog(watch ? 'notes/watching/create' : 'notes/watching/delete', {
+			noteId: appearNote.id
+		});
+	}
+
+	function toggleThreadMute(mute: boolean): void {
+		os.apiWithDialog(mute ? 'notes/thread-muting/create' : 'notes/thread-muting/delete', {
+			noteId: appearNote.id
+		});
+	}
+
+	function copyContent(): void {
+		copyToClipboard(appearNote.text);
+		os.success();
+	}
+
+	function copyLink(): void {
+		copyToClipboard(`${url}/notes/${appearNote.id}`);
+		os.success();
+	}
+
+	function togglePin(pin: boolean): void {
+		os.apiWithDialog(pin ? 'i/pin' : 'i/unpin', {
+			noteId: appearNote.id
+		}, undefined, null, e => {
+			if (e.id === '72dab508-c64d-498f-8740-a8eec1ba385a') {
+				os.alert({
+					type: 'error',
+					text: i18n.locale.pinLimitExceeded
+				});
+			}
+		});
+	}
+
+	async function clip(): Promise<void> {
+		const clips = await os.api('clips/list');
+		os.popupMenu([{
+			icon: 'fas fa-plus',
+			text: i18n.locale.createNew,
+			action: async () => {
+				const { canceled, result } = await os.form(i18n.locale.createNewClip, {
+					name: {
+						type: 'string',
+						label: i18n.locale.name
+					},
+					description: {
+						type: 'string',
+						required: false,
+						multiline: true,
+						label: i18n.locale.description
+					},
+					isPublic: {
+						type: 'boolean',
+						label: i18n.locale.public,
+						default: false
+					}
+				});
+				if (canceled) return;
+
+				const clip = await os.apiWithDialog('clips/create', result);
+
+				os.apiWithDialog('clips/add-note', { clipId: clip.id, noteId: appearNote.id });
+			}
+		}, null, ...clips.map(clip => ({
+			text: clip.name,
+			action: () => {
+				os.apiWithDialog('clips/add-note', { clipId: clip.id, noteId: appearNote.id });
+			}
+		}))], props.menuButton.value, {
+		}).then(focus);
+	}
+
+	async function promote(): Promise<void> {
+		const { canceled, result: days } = await os.inputNumber({
+			title: i18n.locale.numberOfDays,
+		});
+
+		if (canceled) return;
+
+		os.apiWithDialog('admin/promo/create', {
+			noteId: appearNote.id,
+			expiresAt: Date.now() + (86400000 * days),
+		});
+	}
+
+	function share(): void {
+		navigator.share({
+			title: i18n.t('noteOf', { user: appearNote.user.name }),
+			text: appearNote.text,
+			url: `${url}/notes/${appearNote.id}`,
+		});
+	}
+
+	async function translate(): Promise<void> {
+		if (props.translation.value != null) return;
+		props.translating.value = true;
+		const res = await os.api('notes/translate', {
+			noteId: appearNote.id,
+			targetLang: localStorage.getItem('lang') || navigator.language,
+		});
+		props.translating.value = false;
+		props.translation.value = res;
+	}
+
+	let menu;
+	if ($i) {
+		const statePromise = os.api('notes/state', {
+			noteId: appearNote.id
+		});
+
+		menu = [{
+			icon: 'fas fa-copy',
+			text: i18n.locale.copyContent,
+			action: copyContent
+		}, {
+			icon: 'fas fa-link',
+			text: i18n.locale.copyLink,
+			action: copyLink
+		}, (appearNote.url || appearNote.uri) ? {
+			icon: 'fas fa-external-link-square-alt',
+			text: i18n.locale.showOnRemote,
+			action: () => {
+				window.open(appearNote.url || appearNote.uri, '_blank');
+			}
+		} : undefined,
+		{
+			icon: 'fas fa-share-alt',
+			text: i18n.locale.share,
+			action: share
+		},
+		instance.translatorAvailable ? {
+			icon: 'fas fa-language',
+			text: i18n.locale.translate,
+			action: translate
+		} : undefined,
+		null,
+		statePromise.then(state => state.isFavorited ? {
+			icon: 'fas fa-star',
+			text: i18n.locale.unfavorite,
+			action: () => toggleFavorite(false)
+		} : {
+			icon: 'fas fa-star',
+			text: i18n.locale.favorite,
+			action: () => toggleFavorite(true)
+		}),
+		{
+			icon: 'fas fa-paperclip',
+			text: i18n.locale.clip,
+			action: () => clip()
+		},
+		(appearNote.userId != $i.id) ? statePromise.then(state => state.isWatching ? {
+			icon: 'fas fa-eye-slash',
+			text: i18n.locale.unwatch,
+			action: () => toggleWatch(false)
+		} : {
+			icon: 'fas fa-eye',
+			text: i18n.locale.watch,
+			action: () => toggleWatch(true)
+		}) : undefined,
+		statePromise.then(state => state.isMutedThread ? {
+			icon: 'fas fa-comment-slash',
+			text: i18n.locale.unmuteThread,
+			action: () => toggleThreadMute(false)
+		} : {
+			icon: 'fas fa-comment-slash',
+			text: i18n.locale.muteThread,
+			action: () => toggleThreadMute(true)
+		}),
+		appearNote.userId == $i.id ? ($i.pinnedNoteIds || []).includes(appearNote.id) ? {
+			icon: 'fas fa-thumbtack',
+			text: i18n.locale.unpin,
+			action: () => togglePin(false)
+		} : {
+			icon: 'fas fa-thumbtack',
+			text: i18n.locale.pin,
+			action: () => togglePin(true)
+		} : undefined,
+		/*
+		...($i.isModerator || $i.isAdmin ? [
+			null,
+			{
+				icon: 'fas fa-bullhorn',
+				text: i18n.locale.promote,
+				action: promote
+			}]
+			: []
+		),*/
+		...(appearNote.userId != $i.id ? [
+			null,
+			{
+				icon: 'fas fa-exclamation-circle',
+				text: i18n.locale.reportAbuse,
+				action: () => {
+					const u = appearNote.url || appearNote.uri || `${url}/notes/${appearNote.id}`;
+					os.popup(import('@/components/abuse-report-window.vue'), {
+						user: appearNote.user,
+						initialComment: `Note: ${u}\n-----\n`
+					}, {}, 'closed');
+				}
+			}]
+			: []
+		),
+		...(appearNote.userId == $i.id || $i.isModerator || $i.isAdmin ? [
+			null,
+			appearNote.userId == $i.id ? {
+				icon: 'fas fa-edit',
+				text: i18n.locale.deleteAndEdit,
+				action: delEdit
+			} : undefined,
+			{
+				icon: 'fas fa-trash-alt',
+				text: i18n.locale.delete,
+				danger: true,
+				action: del
+			}]
+			: []
+		)]
+		.filter(x => x !== undefined);
+	} else {
+		menu = [{
+			icon: 'fas fa-copy',
+			text: i18n.locale.copyContent,
+			action: copyContent
+		}, {
+			icon: 'fas fa-link',
+			text: i18n.locale.copyLink,
+			action: copyLink
+		}, (appearNote.url || appearNote.uri) ? {
+			icon: 'fas fa-external-link-square-alt',
+			text: i18n.locale.showOnRemote,
+			action: () => {
+				window.open(appearNote.url || appearNote.uri, '_blank');
+			}
+		} : undefined]
+		.filter(x => x !== undefined);
+	}
+
+	if (noteActions.length > 0) {
+		menu = menu.concat([null, ...noteActions.map(action => ({
+			icon: 'fas fa-plug',
+			text: action.title,
+			action: () => {
+				action.handler(appearNote);
+			}
+		}))]);
+	}
+
+	return menu;
+}
diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts
index ebe101bc0f..7b910a0083 100644
--- a/packages/client/src/scripts/get-user-menu.ts
+++ b/packages/client/src/scripts/get-user-menu.ts
@@ -5,7 +5,7 @@ import * as Acct from 'misskey-js/built/acct';
 import * as os from '@/os';
 import { userActions } from '@/store';
 import { router } from '@/router';
-import { $i } from '@/account';
+import { $i, iAmModerator } from '@/account';
 
 export function getUserMenu(user) {
 	const meId = $i ? $i.id : null;
@@ -175,7 +175,7 @@ export function getUserMenu(user) {
 			action: reportAbuse
 		}]);
 
-		if ($i && ($i.isAdmin || $i.isModerator)) {
+		if (iAmModerator) {
 			menu = menu.concat([null, {
 				icon: 'fas fa-microphone-slash',
 				text: user.isSilenced ? i18n.locale.unsilence : i18n.locale.silence,
diff --git a/packages/client/src/scripts/paging.ts b/packages/client/src/scripts/paging.ts
deleted file mode 100644
index ef63ecc450..0000000000
--- a/packages/client/src/scripts/paging.ts
+++ /dev/null
@@ -1,246 +0,0 @@
-import { markRaw } from 'vue';
-import * as os from '@/os';
-import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer } from './scroll';
-
-const SECOND_FETCH_LIMIT = 30;
-
-// reversed: items 配列の中身を逆順にする(新しい方が最後)
-
-export default (opts) => ({
-	emits: ['queue'],
-
-	data() {
-		return {
-			items: [],
-			queue: [],
-			offset: 0,
-			fetching: true,
-			moreFetching: false,
-			inited: false,
-			more: false,
-			backed: false, // 遡り中か否か
-			isBackTop: false,
-		};
-	},
-
-	computed: {
-		empty(): boolean {
-			return this.items.length === 0 && !this.fetching && this.inited;
-		},
-
-		error(): boolean {
-			return !this.fetching && !this.inited;
-		},
-	},
-
-	watch: {
-		pagination: {
-			handler() {
-				this.init();
-			},
-			deep: true
-		},
-
-		queue: {
-			handler(a, b) {
-				if (a.length === 0 && b.length === 0) return;
-				this.$emit('queue', this.queue.length);
-			},
-			deep: true
-		}
-	},
-
-	created() {
-		opts.displayLimit = opts.displayLimit || 30;
-		this.init();
-	},
-
-	activated() {
-		this.isBackTop = false;
-	},
-
-	deactivated() {
-		this.isBackTop = window.scrollY === 0;
-	},
-
-	methods: {
-		reload() {
-			this.items = [];
-			this.init();
-		},
-
-		replaceItem(finder, data) {
-			const i = this.items.findIndex(finder);
-			this.items[i] = data;
-		},
-
-		removeItem(finder) {
-			const i = this.items.findIndex(finder);
-			this.items.splice(i, 1);
-		},
-
-		async init() {
-			this.queue = [];
-			this.fetching = true;
-			if (opts.before) opts.before(this);
-			let params = typeof this.pagination.params === 'function' ? this.pagination.params(true) : this.pagination.params;
-			if (params && params.then) params = await params;
-			if (params === null) return;
-			const endpoint = typeof this.pagination.endpoint === 'function' ? this.pagination.endpoint() : this.pagination.endpoint;
-			await os.api(endpoint, {
-				...params,
-				limit: this.pagination.noPaging ? (this.pagination.limit || 10) : (this.pagination.limit || 10) + 1,
-			}).then(items => {
-				for (let i = 0; i < items.length; i++) {
-					const item = items[i];
-					markRaw(item);
-					if (this.pagination.reversed) {
-						if (i === items.length - 2) item._shouldInsertAd_ = true;
-					} else {
-						if (i === 3) item._shouldInsertAd_ = true;
-					}
-				}
-				if (!this.pagination.noPaging && (items.length > (this.pagination.limit || 10))) {
-					items.pop();
-					this.items = this.pagination.reversed ? [...items].reverse() : items;
-					this.more = true;
-				} else {
-					this.items = this.pagination.reversed ? [...items].reverse() : items;
-					this.more = false;
-				}
-				this.offset = items.length;
-				this.inited = true;
-				this.fetching = false;
-				if (opts.after) opts.after(this, null);
-			}, e => {
-				this.fetching = false;
-				if (opts.after) opts.after(this, e);
-			});
-		},
-
-		async fetchMore() {
-			if (!this.more || this.fetching || this.moreFetching || this.items.length === 0) return;
-			this.moreFetching = true;
-			this.backed = true;
-			let params = typeof this.pagination.params === 'function' ? this.pagination.params(false) : this.pagination.params;
-			if (params && params.then) params = await params;
-			const endpoint = typeof this.pagination.endpoint === 'function' ? this.pagination.endpoint() : this.pagination.endpoint;
-			await os.api(endpoint, {
-				...params,
-				limit: SECOND_FETCH_LIMIT + 1,
-				...(this.pagination.offsetMode ? {
-					offset: this.offset,
-				} : {
-					untilId: this.pagination.reversed ? this.items[0].id : this.items[this.items.length - 1].id,
-				}),
-			}).then(items => {
-				for (let i = 0; i < items.length; i++) {
-					const item = items[i];
-					markRaw(item);
-					if (this.pagination.reversed) {
-						if (i === items.length - 9) item._shouldInsertAd_ = true;
-					} else {
-						if (i === 10) item._shouldInsertAd_ = true;
-					}
-				}
-				if (items.length > SECOND_FETCH_LIMIT) {
-					items.pop();
-					this.items = this.pagination.reversed ? [...items].reverse().concat(this.items) : this.items.concat(items);
-					this.more = true;
-				} else {
-					this.items = this.pagination.reversed ? [...items].reverse().concat(this.items) : this.items.concat(items);
-					this.more = false;
-				}
-				this.offset += items.length;
-				this.moreFetching = false;
-			}, e => {
-				this.moreFetching = false;
-			});
-		},
-
-		async fetchMoreFeature() {
-			if (!this.more || this.fetching || this.moreFetching || this.items.length === 0) return;
-			this.moreFetching = true;
-			let params = typeof this.pagination.params === 'function' ? this.pagination.params(false) : this.pagination.params;
-			if (params && params.then) params = await params;
-			const endpoint = typeof this.pagination.endpoint === 'function' ? this.pagination.endpoint() : this.pagination.endpoint;
-			await os.api(endpoint, {
-				...params,
-				limit: SECOND_FETCH_LIMIT + 1,
-				...(this.pagination.offsetMode ? {
-					offset: this.offset,
-				} : {
-					sinceId: this.pagination.reversed ? this.items[0].id : this.items[this.items.length - 1].id,
-				}),
-			}).then(items => {
-				for (const item of items) {
-					markRaw(item);
-				}
-				if (items.length > SECOND_FETCH_LIMIT) {
-					items.pop();
-					this.items = this.pagination.reversed ? [...items].reverse().concat(this.items) : this.items.concat(items);
-					this.more = true;
-				} else {
-					this.items = this.pagination.reversed ? [...items].reverse().concat(this.items) : this.items.concat(items);
-					this.more = false;
-				}
-				this.offset += items.length;
-				this.moreFetching = false;
-			}, e => {
-				this.moreFetching = false;
-			});
-		},
-
-		prepend(item) {
-			if (this.pagination.reversed) {
-				const container = getScrollContainer(this.$el);
-				const pos = getScrollPosition(this.$el);
-				const viewHeight = container.clientHeight;
-				const height = container.scrollHeight;
-				const isBottom = (pos + viewHeight > height - 32);
-				if (isBottom) {
-					// オーバーフローしたら古いアイテムは捨てる
-					if (this.items.length >= opts.displayLimit) {
-						// このやり方だとVue 3.2以降アニメーションが動かなくなる
-						//this.items = this.items.slice(-opts.displayLimit);
-						while (this.items.length >= opts.displayLimit) {
-							this.items.shift();
-						}
-						this.more = true;
-					}
-				}
-				this.items.push(item);
-				// TODO
-			} else {
-				const isTop = this.isBackTop || (document.body.contains(this.$el) && isTopVisible(this.$el));
-
-				if (isTop) {
-					// Prepend the item
-					this.items.unshift(item);
-
-					// オーバーフローしたら古いアイテムは捨てる
-					if (this.items.length >= opts.displayLimit) {
-						// このやり方だとVue 3.2以降アニメーションが動かなくなる
-						//this.items = this.items.slice(0, opts.displayLimit);
-						while (this.items.length >= opts.displayLimit) {
-							this.items.pop();
-						}
-						this.more = true;
-					}
-				} else {
-					this.queue.push(item);
-					onScrollTop(this.$el, () => {
-						for (const item of this.queue) {
-							this.prepend(item);
-						}
-						this.queue = [];
-					});
-				}
-			}
-		},
-
-		append(item) {
-			this.items.push(item);
-		},
-	}
-});
diff --git a/packages/client/src/scripts/physics.ts b/packages/client/src/scripts/physics.ts
index 445b6296eb..36e476b6f9 100644
--- a/packages/client/src/scripts/physics.ts
+++ b/packages/client/src/scripts/physics.ts
@@ -136,7 +136,7 @@ export function physics(container: HTMLElement) {
 	}
 
 	// 奈落に落ちたオブジェクトは消す
-	const intervalId = setInterval(() => {
+	const intervalId = window.setInterval(() => {
 		for (const obj of objs) {
 			if (obj.position.y > (containerHeight + 1024)) Matter.World.remove(world, obj);
 		}
@@ -146,7 +146,7 @@ export function physics(container: HTMLElement) {
 		stop: () => {
 			stop = true;
 			Matter.Runner.stop(runner);
-			clearInterval(intervalId);
+			window.clearInterval(intervalId);
 		}
 	};
 }
diff --git a/packages/client/src/scripts/popout.ts b/packages/client/src/scripts/popout.ts
index 51b8d72868..b8286a2a76 100644
--- a/packages/client/src/scripts/popout.ts
+++ b/packages/client/src/scripts/popout.ts
@@ -1,8 +1,8 @@
 import * as config from '@/config';
 
 export function popout(path: string, w?: HTMLElement) {
-	let url = path.startsWith('http://') || path.startsWith('https://') ? path : config.url + path;
-	url += '?zen'; // TODO: ちゃんとURLパースしてクエリ付ける
+	let url = path.startsWith('http://') || path.startsWith('https://') ? path : config.url + "/" + path;
+	url += '?zen';
 	if (w) {
 		const position = w.getBoundingClientRect();
 		const width = parseInt(getComputedStyle(w, '').width, 10);
diff --git a/packages/client/src/scripts/room/furniture.ts b/packages/client/src/scripts/room/furniture.ts
deleted file mode 100644
index 7734e32668..0000000000
--- a/packages/client/src/scripts/room/furniture.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export type RoomInfo = {
-	roomType: string;
-	carpetColor: string;
-	furnitures: Furniture[];
-};
-
-export type Furniture = {
-	id: string; // 同じ家具が複数ある場合にそれぞれを識別するためのIDであり、家具IDではない
-	type: string; // こっちが家具ID(chairとか)
-	position: {
-		x: number;
-		y: number;
-		z: number;
-	};
-	rotation: {
-		x: number;
-		y: number;
-		z: number;
-	};
-	props?: Record<string, any>;
-};
diff --git a/packages/client/src/scripts/room/furnitures.json5 b/packages/client/src/scripts/room/furnitures.json5
deleted file mode 100644
index 4a40994107..0000000000
--- a/packages/client/src/scripts/room/furnitures.json5
+++ /dev/null
@@ -1,407 +0,0 @@
-// 家具メタデータ
-
-// 家具IDはglbファイル及びそのディレクトリ名と一致する必要があります
-
-// 家具にはユーザーが設定できるプロパティを設定可能です:
-//
-// props: {
-//   <propname>: <proptype>
-// }
-//
-// proptype一覧:
-// * image ... 画像選択ダイアログを出し、その画像のURLが格納されます
-// * color ... 色選択コントロールを出し、選択された色が格納されます
-
-// 家具にカスタムテクスチャを適用できるようにするには、textureプロパティに以下の追加の情報を含めます:
-// 便宜上そのUVのどの部分にカスタムテクスチャを貼り合わせるかのエリアをテクスチャエリアと呼びます。
-// UVは1024*1024だと仮定します。
-//
-// <key>: {
-//   prop: <プロパティ名>,
-//   uv: {
-//     x: <テクスチャエリアX座標>,
-//     y: <テクスチャエリアY座標>,
-//     width: <テクスチャエリアの幅>,
-//     height: <テクスチャエリアの高さ>,
-//   },
-// }
-//
-// <key>には、カスタムテクスチャを適用したいメッシュ名を指定します
-// <プロパティ名>には、カスタムテクスチャとして使用する画像を格納するプロパティ(前述)名を指定します
-
-// 家具にカスタムカラーを適用できるようにするには、colorプロパティに以下の追加の情報を含めます:
-//
-// <key>: <プロパティ名>
-//
-// <key>には、カスタムカラーを適用したいマテリアル名を指定します
-// <プロパティ名>には、カスタムカラーとして使用する色を格納するプロパティ(前述)名を指定します
-
-[
-	{
-		id: "milk",
-		place: "floor"
-	},
-	{
-		id: "bed",
-		place: "floor"
-	},
-	{
-		id: "low-table",
-		place: "floor",
-		props: {
-			color: 'color'
-		},
-		color: {
-			Table: 'color'
-		}
-	},
-	{
-		id: "desk",
-		place: "floor",
-		props: {
-			color: 'color'
-		},
-		color: {
-			Board: 'color'
-		}
-	},
-	{
-		id: "chair",
-		place: "floor",
-		props: {
-			color: 'color'
-		},
-		color: {
-			Chair: 'color'
-		}
-	},
-	{
-		id: "chair2",
-		place: "floor",
-		props: {
-			color1: 'color',
-			color2: 'color'
-		},
-		color: {
-			Cushion: 'color1',
-			Leg: 'color2'
-		}
-	},
-	{
-		id: "fan",
-		place: "wall"
-	},
-	{
-		id: "pc",
-		place: "floor"
-	},
-	{
-		id: "plant",
-		place: "floor"
-	},
-	{
-		id: "plant2",
-		place: "floor"
-	},
-	{
-		id: "eraser",
-		place: "floor"
-	},
-	{
-		id: "pencil",
-		place: "floor"
-	},
-	{
-		id: "pudding",
-		place: "floor"
-	},
-	{
-		id: "cardboard-box",
-		place: "floor"
-	},
-	{
-		id: "cardboard-box2",
-		place: "floor"
-	},
-	{
-		id: "cardboard-box3",
-		place: "floor"
-	},
-	{
-		id: "book",
-		place: "floor",
-		props: {
-			color: 'color'
-		},
-		color: {
-			Cover: 'color'
-		}
-	},
-	{
-		id: "book2",
-		place: "floor"
-	},
-	{
-		id: "piano",
-		place: "floor"
-	},
-	{
-		id: "facial-tissue",
-		place: "floor"
-	},
-	{
-		id: "server",
-		place: "floor"
-	},
-	{
-		id: "moon",
-		place: "floor"
-	},
-	{
-		id: "corkboard",
-		place: "wall"
-	},
-	{
-		id: "mousepad",
-		place: "floor",
-		props: {
-			color: 'color'
-		},
-		color: {
-			Pad: 'color'
-		}
-	},
-	{
-		id: "monitor",
-		place: "floor",
-		props: {
-			screen: 'image'
-		},
-		texture: {
-			Screen: {
-				prop: 'screen',
-				uv: {
-					x: 0,
-					y: 434,
-					width: 1024,
-					height: 588,
-				},
-			},
-		},
-	},
-	{
-		id: "tv",
-		place: "floor",
-		props: {
-			screen: 'image'
-		},
-		texture: {
-			Screen: {
-				prop: 'screen',
-				uv: {
-					x: 0,
-					y: 434,
-					width: 1024,
-					height: 588,
-				},
-			},
-		},
-	},
-	{
-		id: "keyboard",
-		place: "floor"
-	},
-	{
-		id: "carpet-stripe",
-		place: "floor",
-		props: {
-			color1: 'color',
-			color2: 'color'
-		},
-		color: {
-			CarpetAreaA: 'color1',
-			CarpetAreaB: 'color2'
-		},
-	},
-	{
-		id: "mat",
-		place: "floor",
-		props: {
-			color: 'color'
-		},
-		color: {
-			Mat: 'color'
-		}
-	},
-	{
-		id: "color-box",
-		place: "floor",
-		props: {
-			color: 'color'
-		},
-		color: {
-			main: 'color'
-		}
-	},
-	{
-		id: "wall-clock",
-		place: "wall"
-	},
-	{
-		id: "cube",
-		place: "floor",
-		props: {
-			color: 'color'
-		},
-		color: {
-			Cube: 'color'
-		}
-	},
-	{
-		id: "photoframe",
-		place: "wall",
-		props: {
-			photo: 'image',
-			color: 'color'
-		},
-		texture: {
-			Photo: {
-				prop: 'photo',
-				uv: {
-					x: 0,
-					y: 342,
-					width: 1024,
-					height: 683,
-				},
-			},
-		},
-		color: {
-			Frame: 'color'
-		}
-	},
-	{
-		id: "pinguin",
-		place: "floor",
-		props: {
-			body: 'color',
-			belly: 'color'
-		},
-		color: {
-			Body: 'body',
-			Belly: 'belly',
-		}
-	},
-	{
-		id: "rubik-cube",
-		place: "floor",
-	},
-	{
-		id: "poster-h",
-		place: "wall",
-		props: {
-			picture: 'image'
-		},
-		texture: {
-			Poster: {
-				prop: 'picture',
-				uv: {
-					x: 0,
-					y: 277,
-					width: 1024,
-					height: 745,
-				},
-			},
-		},
-	},
-	{
-		id: "poster-v",
-		place: "wall",
-		props: {
-			picture: 'image'
-		},
-		texture: {
-			Poster: {
-				prop: 'picture',
-				uv: {
-					x: 0,
-					y: 0,
-					width: 745,
-					height: 1024,
-				},
-			},
-		},
-	},
-	{
-		id: "sofa",
-		place: "floor",
-		props: {
-			color: 'color'
-		},
-		color: {
-			Sofa: 'color'
-		}
-	},
-	{
-		id: "spiral",
-		place: "floor",
-		props: {
-			color: 'color'
-		},
-		color: {
-			Step: 'color'
-		}
-	},
-	{
-		id: "bin",
-		place: "floor",
-		props: {
-			color: 'color'
-		},
-		color: {
-			Bin: 'color'
-		}
-	},
-	{
-		id: "cup-noodle",
-		place: "floor"
-	},
-	{
-		id: "holo-display",
-		place: "floor",
-		props: {
-			image: 'image'
-		},
-		texture: {
-			Image_Front: {
-				prop: 'image',
-				uv: {
-					x: 0,
-					y: 0,
-					width: 1024,
-					height: 1024,
-				},
-			},
-			Image_Back: {
-				prop: 'image',
-				uv: {
-					x: 0,
-					y: 0,
-					width: 1024,
-					height: 1024,
-				},
-			},
-		},
-	},
-	{
-		id: 'energy-drink',
-		place: "floor",
-	},
-	{
-		id: 'doll-ai',
-		place: "floor",
-	},
-	{
-		id: 'banknote',
-		place: "floor",
-	},
-]
diff --git a/packages/client/src/scripts/room/room.ts b/packages/client/src/scripts/room/room.ts
deleted file mode 100644
index 7e04bec646..0000000000
--- a/packages/client/src/scripts/room/room.ts
+++ /dev/null
@@ -1,775 +0,0 @@
-import autobind from 'autobind-decorator';
-import { v4 as uuid } from 'uuid';
-import * as THREE from 'three';
-import { GLTFLoader, GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
-import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
-import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
-import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
-import { BloomPass } from 'three/examples/jsm/postprocessing/BloomPass.js';
-import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
-import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
-import { Furniture, RoomInfo } from './furniture';
-import { query as urlQuery } from '@/scripts/url';
-const furnitureDefs = require('./furnitures.json5');
-
-THREE.ImageUtils.crossOrigin = '';
-
-type Options = {
-	graphicsQuality: Room['graphicsQuality'];
-	onChangeSelect: Room['onChangeSelect'];
-	useOrthographicCamera: boolean;
-};
-
-/**
- * MisskeyRoom Core Engine
- */
-export class Room {
-	private clock: THREE.Clock;
-	private scene: THREE.Scene;
-	private renderer: THREE.WebGLRenderer;
-	private camera: THREE.PerspectiveCamera | THREE.OrthographicCamera;
-	private controls: OrbitControls;
-	private composer: EffectComposer;
-	private mixers: THREE.AnimationMixer[] = [];
-	private furnitureControl: TransformControls;
-	private roomInfo: RoomInfo;
-	private graphicsQuality: 'cheep' | 'low' | 'medium' | 'high' | 'ultra';
-	private roomObj: THREE.Object3D;
-	private objects: THREE.Object3D[] = [];
-	private selectedObject: THREE.Object3D = null;
-	private onChangeSelect: Function;
-	private isTransformMode = false;
-	private renderFrameRequestId: number;
-
-	private get canvas(): HTMLCanvasElement {
-		return this.renderer.domElement;
-	}
-
-	private get furnitures(): Furniture[] {
-		return this.roomInfo.furnitures;
-	}
-
-	private set furnitures(furnitures: Furniture[]) {
-		this.roomInfo.furnitures = furnitures;
-	}
-
-	private get enableShadow() {
-		return this.graphicsQuality != 'cheep';
-	}
-
-	private get usePostFXs() {
-		return this.graphicsQuality !== 'cheep' && this.graphicsQuality !== 'low';
-	}
-
-	private get shadowQuality() {
-		return (
-			this.graphicsQuality === 'ultra' ? 16384 :
-			this.graphicsQuality === 'high' ? 8192 :
-			this.graphicsQuality === 'medium' ? 4096 :
-			this.graphicsQuality === 'low' ? 1024 :
-			0); // cheep
-	}
-
-	constructor(user, isMyRoom, roomInfo: RoomInfo, container: Element, options: Options) {
-		this.roomInfo = roomInfo;
-		this.graphicsQuality = options.graphicsQuality;
-		this.onChangeSelect = options.onChangeSelect;
-
-		this.clock = new THREE.Clock(true);
-
-		//#region Init a scene
-		this.scene = new THREE.Scene();
-
-		const width = container.clientWidth;
-		const height = container.clientHeight;
-
-		//#region Init a renderer
-		this.renderer = new THREE.WebGLRenderer({
-			antialias: false,
-			stencil: false,
-			alpha: false,
-			powerPreference:
-				this.graphicsQuality === 'ultra' ? 'high-performance' :
-				this.graphicsQuality === 'high' ? 'high-performance' :
-				this.graphicsQuality === 'medium' ? 'default' :
-				this.graphicsQuality === 'low' ? 'low-power' :
-				'low-power' // cheep
-		});
-
-		this.renderer.setPixelRatio(window.devicePixelRatio);
-		this.renderer.setSize(width, height);
-		this.renderer.autoClear = false;
-		this.renderer.setClearColor(new THREE.Color(0x051f2d));
-		this.renderer.shadowMap.enabled = this.enableShadow;
-		this.renderer.shadowMap.type =
-			this.graphicsQuality === 'ultra' ? THREE.PCFSoftShadowMap :
-			this.graphicsQuality === 'high' ? THREE.PCFSoftShadowMap :
-			this.graphicsQuality === 'medium' ? THREE.PCFShadowMap :
-			this.graphicsQuality === 'low' ? THREE.BasicShadowMap :
-			THREE.BasicShadowMap; // cheep
-
-		container.insertBefore(this.canvas, container.firstChild);
-		//#endregion
-
-		//#region Init a camera
-		this.camera = options.useOrthographicCamera
-			? new THREE.OrthographicCamera(
-				width / - 2, width / 2, height / 2, height / - 2, -10, 10)
-			: new THREE.PerspectiveCamera(45, width / height);
-
-		if (options.useOrthographicCamera) {
-			this.camera.position.x = 2;
-			this.camera.position.y = 2;
-			this.camera.position.z = 2;
-			this.camera.zoom = 100;
-			this.camera.updateProjectionMatrix();
-		} else {
-			this.camera.position.x = 5;
-			this.camera.position.y = 2;
-			this.camera.position.z = 5;
-		}
-
-		this.scene.add(this.camera);
-		//#endregion
-
-		//#region AmbientLight
-		const ambientLight = new THREE.AmbientLight(0xffffff, 1);
-		this.scene.add(ambientLight);
-		//#endregion
-
-		if (this.graphicsQuality !== 'cheep') {
-			//#region Room light
-			const roomLight = new THREE.SpotLight(0xffffff, 0.1);
-
-			roomLight.position.set(0, 8, 0);
-			roomLight.castShadow = this.enableShadow;
-			roomLight.shadow.bias = -0.0001;
-			roomLight.shadow.mapSize.width = this.shadowQuality;
-			roomLight.shadow.mapSize.height = this.shadowQuality;
-			roomLight.shadow.camera.near = 0.1;
-			roomLight.shadow.camera.far = 9;
-			roomLight.shadow.camera.fov = 45;
-
-			this.scene.add(roomLight);
-			//#endregion
-		}
-
-		//#region Out light
-		const outLight1 = new THREE.SpotLight(0xffffff, 0.4);
-		outLight1.position.set(9, 3, -2);
-		outLight1.castShadow = this.enableShadow;
-		outLight1.shadow.bias = -0.001; // アクネ、アーチファクト対策 その代わりピーターパンが発生する可能性がある
-		outLight1.shadow.mapSize.width = this.shadowQuality;
-		outLight1.shadow.mapSize.height = this.shadowQuality;
-		outLight1.shadow.camera.near = 6;
-		outLight1.shadow.camera.far = 15;
-		outLight1.shadow.camera.fov = 45;
-		this.scene.add(outLight1);
-
-		const outLight2 = new THREE.SpotLight(0xffffff, 0.2);
-		outLight2.position.set(-2, 3, 9);
-		outLight2.castShadow = false;
-		outLight2.shadow.bias = -0.001; // アクネ、アーチファクト対策 その代わりピーターパンが発生する可能性がある
-		outLight2.shadow.camera.near = 6;
-		outLight2.shadow.camera.far = 15;
-		outLight2.shadow.camera.fov = 45;
-		this.scene.add(outLight2);
-		//#endregion
-
-		//#region Init a controller
-		this.controls = new OrbitControls(this.camera, this.canvas);
-
-		this.controls.target.set(0, 1, 0);
-		this.controls.enableZoom = true;
-		this.controls.enablePan = isMyRoom;
-		this.controls.minPolarAngle = 0;
-		this.controls.maxPolarAngle = Math.PI / 2;
-		this.controls.minAzimuthAngle = 0;
-		this.controls.maxAzimuthAngle = Math.PI / 2;
-		this.controls.enableDamping = true;
-		this.controls.dampingFactor = 0.2;
-		//#endregion
-
-		//#region POST FXs
-		if (!this.usePostFXs) {
-			this.composer = null;
-		} else {
-			const renderTarget = new THREE.WebGLRenderTarget(width, height, {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBFormat,
-				stencilBuffer: false,
-			});
-
-			const fxaa = new ShaderPass(FXAAShader);
-			fxaa.uniforms['resolution'].value = new THREE.Vector2(1 / width, 1 / height);
-			fxaa.renderToScreen = true;
-
-			this.composer = new EffectComposer(this.renderer, renderTarget);
-			this.composer.addPass(new RenderPass(this.scene, this.camera));
-			if (this.graphicsQuality === 'ultra') {
-				this.composer.addPass(new BloomPass(0.25, 30, 128.0, 512));
-			}
-			this.composer.addPass(fxaa);
-		}
-		//#endregion
-		//#endregion
-
-		//#region Label
-		//#region Avatar
-		const avatarUrl = `/proxy/?${urlQuery({ url: user.avatarUrl })}`;
-
-		const textureLoader = new THREE.TextureLoader();
-		textureLoader.crossOrigin = 'anonymous';
-
-		const iconTexture = textureLoader.load(avatarUrl);
-		iconTexture.wrapS = THREE.RepeatWrapping;
-		iconTexture.wrapT = THREE.RepeatWrapping;
-		iconTexture.anisotropy = 16;
-
-		const avatarMaterial = new THREE.MeshBasicMaterial({
-			map: iconTexture,
-			side: THREE.DoubleSide,
-			alphaTest: 0.5
-		});
-
-		const iconGeometry = new THREE.PlaneGeometry(1, 1);
-
-		const avatarObject = new THREE.Mesh(iconGeometry, avatarMaterial);
-		avatarObject.position.set(-3, 2.5, 2);
-		avatarObject.rotation.y = Math.PI / 2;
-		avatarObject.castShadow = false;
-
-		this.scene.add(avatarObject);
-		//#endregion
-
-		//#region Username
-		const name = user.username;
-
-		new THREE.FontLoader().load('/assets/fonts/helvetiker_regular.typeface.json', font => {
-			const nameGeometry = new THREE.TextGeometry(name, {
-				size: 0.5,
-				height: 0,
-				curveSegments: 8,
-				font: font,
-				bevelThickness: 0,
-				bevelSize: 0,
-				bevelEnabled: false
-			});
-
-			const nameMaterial = new THREE.MeshLambertMaterial({
-				color: 0xffffff
-			});
-
-			const nameObject = new THREE.Mesh(nameGeometry, nameMaterial);
-			nameObject.position.set(-3, 2.25, 1.25);
-			nameObject.rotation.y = Math.PI / 2;
-			nameObject.castShadow = false;
-
-			this.scene.add(nameObject);
-		});
-		//#endregion
-		//#endregion
-
-		//#region Interaction
-		if (isMyRoom) {
-			this.furnitureControl = new TransformControls(this.camera, this.canvas);
-			this.scene.add(this.furnitureControl);
-
-			// Hover highlight
-			this.canvas.onmousemove = this.onmousemove;
-
-			// Click
-			this.canvas.onmousedown = this.onmousedown;
-		}
-		//#endregion
-
-		//#region Init room
-		this.loadRoom();
-		//#endregion
-
-		//#region Load furnitures
-		for (const furniture of this.furnitures) {
-			this.loadFurniture(furniture).then(obj => {
-				this.scene.add(obj.scene);
-				this.objects.push(obj.scene);
-			});
-		}
-		//#endregion
-
-		// Start render
-		if (this.usePostFXs) {
-			this.renderWithPostFXs();
-		} else {
-			this.renderWithoutPostFXs();
-		}
-	}
-
-	@autobind
-	private renderWithoutPostFXs() {
-		this.renderFrameRequestId =
-			window.requestAnimationFrame(this.renderWithoutPostFXs);
-
-		// Update animations
-		const clock = this.clock.getDelta();
-		for (const mixer of this.mixers) {
-			mixer.update(clock);
-		}
-
-		this.controls.update();
-		this.renderer.render(this.scene, this.camera);
-	}
-
-	@autobind
-	private renderWithPostFXs() {
-		this.renderFrameRequestId =
-			window.requestAnimationFrame(this.renderWithPostFXs);
-
-		// Update animations
-		const clock = this.clock.getDelta();
-		for (const mixer of this.mixers) {
-			mixer.update(clock);
-		}
-
-		this.controls.update();
-		this.renderer.clear();
-		this.composer.render();
-	}
-
-	@autobind
-	private loadRoom() {
-		const type = this.roomInfo.roomType;
-		new GLTFLoader().load(`/client-assets/room/rooms/${type}/${type}.glb`, gltf => {
-			gltf.scene.traverse(child => {
-				if (!(child instanceof THREE.Mesh)) return;
-
-				child.receiveShadow = this.enableShadow;
-
-				child.material = new THREE.MeshLambertMaterial({
-					color: (child.material as THREE.MeshStandardMaterial).color,
-					map: (child.material as THREE.MeshStandardMaterial).map,
-					name: (child.material as THREE.MeshStandardMaterial).name,
-				});
-
-				// 異方性フィルタリング
-				if ((child.material as THREE.MeshLambertMaterial).map && this.graphicsQuality !== 'cheep') {
-					(child.material as THREE.MeshLambertMaterial).map.minFilter = THREE.LinearMipMapLinearFilter;
-					(child.material as THREE.MeshLambertMaterial).map.magFilter = THREE.LinearMipMapLinearFilter;
-					(child.material as THREE.MeshLambertMaterial).map.anisotropy = 8;
-				}
-			});
-
-			gltf.scene.position.set(0, 0, 0);
-
-			this.scene.add(gltf.scene);
-			this.roomObj = gltf.scene;
-			if (this.roomInfo.roomType === 'default') {
-				this.applyCarpetColor();
-			}
-		});
-	}
-
-	@autobind
-	private loadFurniture(furniture: Furniture) {
-		const def = furnitureDefs.find(d => d.id === furniture.type);
-		return new Promise<GLTF>((res, rej) => {
-			const loader = new GLTFLoader();
-			loader.load(`/client-assets/room/furnitures/${furniture.type}/${furniture.type}.glb`, gltf => {
-				const model = gltf.scene;
-
-				// Load animation
-				if (gltf.animations.length > 0) {
-					const mixer = new THREE.AnimationMixer(model);
-					this.mixers.push(mixer);
-					for (const clip of gltf.animations) {
-						mixer.clipAction(clip).play();
-					}
-				}
-
-				model.name = furniture.id;
-				model.position.x = furniture.position.x;
-				model.position.y = furniture.position.y;
-				model.position.z = furniture.position.z;
-				model.rotation.x = furniture.rotation.x;
-				model.rotation.y = furniture.rotation.y;
-				model.rotation.z = furniture.rotation.z;
-
-				model.traverse(child => {
-					if (!(child instanceof THREE.Mesh)) return;
-					child.castShadow = this.enableShadow;
-					child.receiveShadow = this.enableShadow;
-					(child.material as THREE.MeshStandardMaterial).metalness = 0;
-
-					// 異方性フィルタリング
-					if ((child.material as THREE.MeshStandardMaterial).map && this.graphicsQuality !== 'cheep') {
-						(child.material as THREE.MeshStandardMaterial).map.minFilter = THREE.LinearMipMapLinearFilter;
-						(child.material as THREE.MeshStandardMaterial).map.magFilter = THREE.LinearMipMapLinearFilter;
-						(child.material as THREE.MeshStandardMaterial).map.anisotropy = 8;
-					}
-				});
-
-				if (def.color) { // カスタムカラー
-					this.applyCustomColor(model);
-				}
-
-				if (def.texture) { // カスタムテクスチャ
-					this.applyCustomTexture(model);
-				}
-
-				res(gltf);
-			}, null, rej);
-		});
-	}
-
-	@autobind
-	private applyCarpetColor() {
-		this.roomObj.traverse(child => {
-			if (!(child instanceof THREE.Mesh)) return;
-			if (child.material &&
-				(child.material as THREE.MeshStandardMaterial).name &&
-				(child.material as THREE.MeshStandardMaterial).name === 'Carpet'
-			) {
-				const colorHex = parseInt(this.roomInfo.carpetColor.substr(1), 16);
-				(child.material as THREE.MeshStandardMaterial).color.setHex(colorHex);
-			}
-		});
-	}
-
-	@autobind
-	private applyCustomColor(model: THREE.Object3D) {
-		const furniture = this.furnitures.find(furniture => furniture.id === model.name);
-		const def = furnitureDefs.find(d => d.id === furniture.type);
-		if (def.color == null) return;
-		model.traverse(child => {
-			if (!(child instanceof THREE.Mesh)) return;
-			for (const t of Object.keys(def.color)) {
-				if (!child.material ||
-					!(child.material as THREE.MeshStandardMaterial).name ||
-					(child.material as THREE.MeshStandardMaterial).name !== t
-				) continue;
-
-				const prop = def.color[t];
-				const val = furniture.props ? furniture.props[prop] : undefined;
-
-				if (val == null) continue;
-
-				const colorHex = parseInt(val.substr(1), 16);
-				(child.material as THREE.MeshStandardMaterial).color.setHex(colorHex);
-			}
-		});
-	}
-
-	@autobind
-	private applyCustomTexture(model: THREE.Object3D) {
-		const furniture = this.furnitures.find(furniture => furniture.id === model.name);
-		const def = furnitureDefs.find(d => d.id === furniture.type);
-		if (def.texture == null) return;
-
-		model.traverse(child => {
-			if (!(child instanceof THREE.Mesh)) return;
-			for (const t of Object.keys(def.texture)) {
-				if (child.name !== t) continue;
-
-				const prop = def.texture[t].prop;
-				const val = furniture.props ? furniture.props[prop] : undefined;
-
-				if (val == null) continue;
-
-				const canvas = document.createElement('canvas');
-				canvas.height = 1024;
-				canvas.width = 1024;
-
-				child.material = new THREE.MeshLambertMaterial({
-					emissive: 0x111111,
-					side: THREE.DoubleSide,
-					alphaTest: 0.5,
-				});
-
-				const img = new Image();
-				img.crossOrigin = 'anonymous';
-				img.onload = () => {
-					const uvInfo = def.texture[t].uv;
-
-					const ctx = canvas.getContext('2d');
-					ctx.drawImage(img,
-						0, 0, img.width, img.height,
-						uvInfo.x, uvInfo.y, uvInfo.width, uvInfo.height);
-
-					const texture = new THREE.Texture(canvas);
-					texture.wrapS = THREE.RepeatWrapping;
-					texture.wrapT = THREE.RepeatWrapping;
-					texture.anisotropy = 16;
-					texture.flipY = false;
-
-					(child.material as THREE.MeshLambertMaterial).map = texture;
-					(child.material as THREE.MeshLambertMaterial).needsUpdate = true;
-					(child.material as THREE.MeshLambertMaterial).map.needsUpdate = true;
-				};
-				img.src = val;
-			}
-		});
-	}
-
-	@autobind
-	private onmousemove(ev: MouseEvent) {
-		if (this.isTransformMode) return;
-
-		const rect = (ev.target as HTMLElement).getBoundingClientRect();
-		const x = ((ev.clientX - rect.left) / rect.width) * 2 - 1;
-		const y = -((ev.clientY - rect.top) / rect.height) * 2 + 1;
-		const pos = new THREE.Vector2(x, y);
-
-		this.camera.updateMatrixWorld();
-
-		const raycaster = new THREE.Raycaster();
-		raycaster.setFromCamera(pos, this.camera);
-
-		const intersects = raycaster.intersectObjects(this.objects, true);
-
-		for (const object of this.objects) {
-			if (this.isSelectedObject(object)) continue;
-			object.traverse(child => {
-				if (child instanceof THREE.Mesh) {
-					(child.material as THREE.MeshStandardMaterial).emissive.setHex(0x000000);
-				}
-			});
-		}
-
-		if (intersects.length > 0) {
-			const intersected = this.getRoot(intersects[0].object);
-			if (this.isSelectedObject(intersected)) return;
-			intersected.traverse(child => {
-				if (child instanceof THREE.Mesh) {
-					(child.material as THREE.MeshStandardMaterial).emissive.setHex(0x191919);
-				}
-			});
-		}
-	}
-
-	@autobind
-	private onmousedown(ev: MouseEvent) {
-		if (this.isTransformMode) return;
-		if (ev.target !== this.canvas || ev.button !== 0) return;
-
-		const rect = (ev.target as HTMLElement).getBoundingClientRect();
-		const x = ((ev.clientX - rect.left) / rect.width) * 2 - 1;
-		const y = -((ev.clientY - rect.top) / rect.height) * 2 + 1;
-		const pos = new THREE.Vector2(x, y);
-
-		this.camera.updateMatrixWorld();
-
-		const raycaster = new THREE.Raycaster();
-		raycaster.setFromCamera(pos, this.camera);
-
-		const intersects = raycaster.intersectObjects(this.objects, true);
-
-		for (const object of this.objects) {
-			object.traverse(child => {
-				if (child instanceof THREE.Mesh) {
-					(child.material as THREE.MeshStandardMaterial).emissive.setHex(0x000000);
-				}
-			});
-		}
-
-		if (intersects.length > 0) {
-			const selectedObj = this.getRoot(intersects[0].object);
-			this.selectFurniture(selectedObj);
-		} else {
-			this.selectedObject = null;
-			this.onChangeSelect(null);
-		}
-	}
-
-	@autobind
-	private getRoot(obj: THREE.Object3D): THREE.Object3D {
-		let found = false;
-		let x = obj.parent;
-		while (!found) {
-			if (x.parent.parent == null) {
-				found = true;
-			} else {
-				x = x.parent;
-			}
-		}
-		return x;
-	}
-
-	@autobind
-	private isSelectedObject(obj: THREE.Object3D): boolean {
-		if (this.selectedObject == null) {
-			return false;
-		} else {
-			return obj.name === this.selectedObject.name;
-		}
-	}
-
-	@autobind
-	private selectFurniture(obj: THREE.Object3D) {
-		this.selectedObject = obj;
-		this.onChangeSelect(obj);
-		obj.traverse(child => {
-			if (child instanceof THREE.Mesh) {
-				(child.material as THREE.MeshStandardMaterial).emissive.setHex(0xff0000);
-			}
-		});
-	}
-
-	/**
-	 * 家具の移動/回転モードにします
-	 * @param type 移動か回転か
-	 */
-	@autobind
-	public enterTransformMode(type: 'translate' | 'rotate') {
-		this.isTransformMode = true;
-		this.furnitureControl.setMode(type);
-		this.furnitureControl.attach(this.selectedObject);
-		this.controls.enableRotate = false;
-	}
-
-	/**
-	 * 家具の移動/回転モードを終了します
-	 */
-	@autobind
-	public exitTransformMode() {
-		this.isTransformMode = false;
-		this.furnitureControl.detach();
-		this.controls.enableRotate = true;
-	}
-
-	/**
-	 * 家具プロパティを更新します
-	 * @param key プロパティ名
-	 * @param value 値
-	 */
-	@autobind
-	public updateProp(key: string, value: any) {
-		const furniture = this.furnitures.find(furniture => furniture.id === this.selectedObject.name);
-		if (furniture.props == null) furniture.props = {};
-		furniture.props[key] = value;
-		this.applyCustomColor(this.selectedObject);
-		this.applyCustomTexture(this.selectedObject);
-	}
-
-	/**
-	 * 部屋に家具を追加します
-	 * @param type 家具の種類
-	 */
-	@autobind
-	public addFurniture(type: string) {
-		const furniture = {
-			id: uuid(),
-			type: type,
-			position: {
-				x: 0,
-				y: 0,
-				z: 0,
-			},
-			rotation: {
-				x: 0,
-				y: 0,
-				z: 0,
-			},
-		};
-
-		this.furnitures.push(furniture);
-
-		this.loadFurniture(furniture).then(obj => {
-			this.scene.add(obj.scene);
-			this.objects.push(obj.scene);
-		});
-	}
-
-	/**
-	 * 現在選択されている家具を部屋から削除します
-	 */
-	@autobind
-	public removeFurniture() {
-		this.exitTransformMode();
-		const obj = this.selectedObject;
-		this.scene.remove(obj);
-		this.objects = this.objects.filter(object => object.name !== obj.name);
-		this.furnitures = this.furnitures.filter(furniture => furniture.id !== obj.name);
-		this.selectedObject = null;
-		this.onChangeSelect(null);
-	}
-
-	/**
-	 * 全ての家具を部屋から削除します
-	 */
-	@autobind
-	public removeAllFurnitures() {
-		this.exitTransformMode();
-		for (const obj of this.objects) {
-			this.scene.remove(obj);
-		}
-		this.objects = [];
-		this.furnitures = [];
-		this.selectedObject = null;
-		this.onChangeSelect(null);
-	}
-
-	/**
-	 * 部屋の床の色を変更します
-	 * @param color 色
-	 */
-	@autobind
-	public updateCarpetColor(color: string) {
-		this.roomInfo.carpetColor = color;
-		this.applyCarpetColor();
-	}
-
-	/**
-	 * 部屋の種類を変更します
-	 * @param type 種類
-	 */
-	@autobind
-	public changeRoomType(type: string) {
-		this.roomInfo.roomType = type;
-		this.scene.remove(this.roomObj);
-		this.loadRoom();
-	}
-
-	/**
-	 * 部屋データを取得します
-	 */
-	@autobind
-	public getRoomInfo() {
-		for (const obj of this.objects) {
-			const furniture = this.furnitures.find(f => f.id === obj.name);
-			furniture.position.x = obj.position.x;
-			furniture.position.y = obj.position.y;
-			furniture.position.z = obj.position.z;
-			furniture.rotation.x = obj.rotation.x;
-			furniture.rotation.y = obj.rotation.y;
-			furniture.rotation.z = obj.rotation.z;
-		}
-
-		return this.roomInfo;
-	}
-
-	/**
-	 * 選択されている家具を取得します
-	 */
-	@autobind
-	public getSelectedObject() {
-		return this.selectedObject;
-	}
-
-	@autobind
-	public findFurnitureById(id: string) {
-		return this.furnitures.find(furniture => furniture.id === id);
-	}
-
-	/**
-	 * レンダリングを終了します
-	 */
-	@autobind
-	public destroy() {
-		// Stop render loop
-		window.cancelAnimationFrame(this.renderFrameRequestId);
-
-		this.controls.dispose();
-		this.scene.dispose();
-	}
-}
diff --git a/packages/client/src/scripts/select-file.ts b/packages/client/src/scripts/select-file.ts
index 6019890444..6bb3f8bf8a 100644
--- a/packages/client/src/scripts/select-file.ts
+++ b/packages/client/src/scripts/select-file.ts
@@ -1,4 +1,5 @@
 import * as os from '@/os';
+import { stream } from '@/stream';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 import { DriveFile } from 'misskey-js/built/entities';
@@ -48,7 +49,7 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
 
 				const marker = Math.random().toString(); // TODO: UUIDとか使う
 
-				const connection = os.stream.useChannel('main');
+				const connection = stream.useChannel('main');
 				connection.on('urlUploadFinished', data => {
 					if (data.marker === marker) {
 						res(multiple ? [data.file] : data.file);
diff --git a/packages/client/src/scripts/theme.ts b/packages/client/src/scripts/theme.ts
index 3b7f003d0f..85c087331b 100644
--- a/packages/client/src/scripts/theme.ts
+++ b/packages/client/src/scripts/theme.ts
@@ -34,11 +34,11 @@ export const builtinThemes = [
 let timeout = null;
 
 export function applyTheme(theme: Theme, persist = true) {
-	if (timeout) clearTimeout(timeout);
+	if (timeout) window.clearTimeout(timeout);
 
 	document.documentElement.classList.add('_themeChanging_');
 
-	timeout = setTimeout(() => {
+	timeout = window.setTimeout(() => {
 		document.documentElement.classList.remove('_themeChanging_');
 	}, 1000);
 
diff --git a/packages/client/src/scripts/touch.ts b/packages/client/src/scripts/touch.ts
index 06b4f8b2ed..5251bc2e27 100644
--- a/packages/client/src/scripts/touch.ts
+++ b/packages/client/src/scripts/touch.ts
@@ -14,6 +14,10 @@ if (isTouchSupported) {
 	}, { passive: true });
 	
 	window.addEventListener('touchend', () => {
+		// 子要素のtouchstartイベントでstopPropagation()が呼ばれると親要素に伝搬されずタッチされたと判定されないため、
+		// touchendイベントでもtouchstartイベントと同様にtrueにする
+		isTouchUsing = true;
+
 		isScreenTouching = false;
 	}, { passive: true });
 }
diff --git a/packages/client/src/scripts/use-leave-guard.ts b/packages/client/src/scripts/use-leave-guard.ts
new file mode 100644
index 0000000000..3984256251
--- /dev/null
+++ b/packages/client/src/scripts/use-leave-guard.ts
@@ -0,0 +1,46 @@
+import { inject, onUnmounted, Ref } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
+import { i18n } from '@/i18n';
+import * as os from '@/os';
+
+export function useLeaveGuard(enabled: Ref<boolean>) {
+	const setLeaveGuard = inject('setLeaveGuard');
+
+	if (setLeaveGuard) {
+		setLeaveGuard(async () => {
+			if (!enabled.value) return false;
+
+			const { canceled } = await os.confirm({
+				type: 'warning',
+				text: i18n.locale.leaveConfirm,
+			});
+
+			return canceled;
+		});
+	} else {
+		onBeforeRouteLeave(async (to, from) => {
+			if (!enabled.value) return true;
+
+			const { canceled } = await os.confirm({
+				type: 'warning',
+				text: i18n.locale.leaveConfirm,
+			});
+
+			return !canceled;
+		});
+	}
+
+	/*
+	function onBeforeLeave(ev: BeforeUnloadEvent) {
+		if (enabled.value) {
+			ev.preventDefault();
+			ev.returnValue = '';
+		}
+	}
+
+	window.addEventListener('beforeunload', onBeforeLeave);
+	onUnmounted(() => {
+		window.removeEventListener('beforeunload', onBeforeLeave);
+	});
+	*/
+}
diff --git a/packages/client/src/scripts/use-note-capture.ts b/packages/client/src/scripts/use-note-capture.ts
new file mode 100644
index 0000000000..bb00e464e3
--- /dev/null
+++ b/packages/client/src/scripts/use-note-capture.ts
@@ -0,0 +1,123 @@
+import { onUnmounted, Ref } from 'vue';
+import * as misskey from 'misskey-js';
+import { stream } from '@/stream';
+import { $i } from '@/account';
+
+export function useNoteCapture(props: {
+	rootEl: Ref<HTMLElement>;
+	appearNote: Ref<misskey.entities.Note>;
+}) {
+	const appearNote = props.appearNote;
+	const connection = $i ? stream : null;
+
+	function onStreamNoteUpdated(data): void {
+		const { type, id, body } = data;
+
+		if (id !== appearNote.value.id) return;
+
+		switch (type) {
+			case 'reacted': {
+				const reaction = body.reaction;
+
+				const updated = JSON.parse(JSON.stringify(appearNote.value));
+
+				if (body.emoji) {
+					const emojis = appearNote.value.emojis || [];
+					if (!emojis.includes(body.emoji)) {
+						updated.emojis = [...emojis, body.emoji];
+					}
+				}
+
+				// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
+				const currentCount = (appearNote.value.reactions || {})[reaction] || 0;
+
+				updated.reactions[reaction] = currentCount + 1;
+
+				if ($i && (body.userId === $i.id)) {
+					updated.myReaction = reaction;
+				}
+
+				appearNote.value = updated;
+				break;
+			}
+
+			case 'unreacted': {
+				const reaction = body.reaction;
+
+				const updated = JSON.parse(JSON.stringify(appearNote.value));
+
+				// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
+				const currentCount = (appearNote.value.reactions || {})[reaction] || 0;
+
+				updated.reactions[reaction] = Math.max(0, currentCount - 1);
+
+				if ($i && (body.userId === $i.id)) {
+					updated.myReaction = null;
+				}
+
+				appearNote.value = updated;
+				break;
+			}
+
+			case 'pollVoted': {
+				const choice = body.choice;
+
+				const updated = JSON.parse(JSON.stringify(appearNote.value));
+
+				const choices = [...appearNote.value.poll.choices];
+				choices[choice] = {
+					...choices[choice],
+					votes: choices[choice].votes + 1,
+					...($i && (body.userId === $i.id) ? {
+						isVoted: true
+					} : {})
+				};
+
+				updated.poll.choices = choices;
+
+				appearNote.value = updated;
+				break;
+			}
+
+			case 'deleted': {
+				const updated = JSON.parse(JSON.stringify(appearNote.value));
+				updated.value = true;
+				appearNote.value = updated;
+				break;
+			}
+		}
+	}
+
+	function capture(withHandler = false): void {
+		if (connection) {
+			// TODO: このノートがストリーミング経由で流れてきた場合のみ sr する
+			connection.send(document.body.contains(props.rootEl.value) ? 'sr' : 's', { id: appearNote.value.id });
+			if (withHandler) connection.on('noteUpdated', onStreamNoteUpdated);
+		}
+	}
+
+	function decapture(withHandler = false): void {
+		if (connection) {
+			connection.send('un', {
+				id: appearNote.value.id,
+			});
+			if (withHandler) connection.off('noteUpdated', onStreamNoteUpdated);
+		}
+	}
+
+	function onStreamConnected() {
+		capture(false);
+	}
+	
+	capture(true);
+	if (connection) {
+		connection.on('_connected_', onStreamConnected);
+	}
+	
+	onUnmounted(() => {
+		decapture(true);
+		if (connection) {
+			connection.off('_connected_', onStreamConnected);
+		}
+	});
+}