Merge branch 'develop' into experiment/timelines

CONTRIBUTING.md

@@ -48,8 +48,8 @@ Thank you for your PR! Before creating a PR, please check the following:
 - If there is an Issue which will be resolved by this PR, please include a reference to the Issue in the text. Good examples include `Closing: #21` or `Resolves: #21`
 - Check if there are any documents that need to be created or updated due to this change.
 - If you have added a feature or fixed a bug, please add a test case if possible.
-- Please make sure that tests and Lint are passed in advance.
-  - You can run it with `pnpm run test` and `pnpm run lint`. [See more info](#testing)
+- Please make sure that formatting, tests and Lint are passed in advance.
+  - You can run it with `pnpm run format`, `pnpm run test` and `pnpm run lint`. [See more info](#testing)
 - If this PR includes UI changes, please attach a screenshot in the text.
 
 Thanks for your cooperation 🤗

Dockerfile

@@ -10,6 +10,7 @@ COPY package.json pnpm*.yaml ./
 COPY packages/backend/package.json packages/backend/package.json
 COPY packages/client/package.json packages/client/package.json
 COPY packages/sw/package.json packages/sw/package.json
+COPY packages/calckey-js/package.json packages/calckey-js/package.json
 COPY packages/backend/native-utils/package.json packages/backend/native-utils/package.json
 COPY packages/backend/native-utils/npm/linux-x64-musl/package.json packages/backend/native-utils/npm/linux-x64-musl/package.json
 COPY packages/backend/native-utils/npm/linux-arm64-musl/package.json packages/backend/native-utils/npm/linux-arm64-musl/package.json
@@ -43,6 +44,7 @@ COPY --from=build /calckey/node_modules /calckey/node_modules
 COPY --from=build /calckey/packages/backend/node_modules /calckey/packages/backend/node_modules
 COPY --from=build /calckey/packages/sw/node_modules /calckey/packages/sw/node_modules
 COPY --from=build /calckey/packages/client/node_modules /calckey/packages/client/node_modules
+COPY --from=build /calckey/packages/calckey-js/node_modules /calckey/packages/calckey-js/node_modules
 
 # Copy the finished compiled files
 COPY --from=build /calckey/built /calckey/built

locales/en-US.yml

@@ -953,9 +953,9 @@ license: "License"
 indexPosts: "Index posts"
 indexFrom: "Index from Post ID onwards (leave blank to index every post)"
 indexNotice: "Now indexing. This will probably take a while, please don't restart your server for at least an hour."
-customKaTeXMacro: "Custom KaTeX Macro"
+customKaTeXMacro: "Custom KaTeX macros"
 customKaTeXMacroDescription: "Set up macros to write mathematical expressions easily! The notation conforms to the LaTeX command definitions and is written as \\newcommand{\\name}{content} or \\newcommand{\\name}[number of arguments]{content}. For example, \\newcommand{\\add}[2]{#1 + #2} will expand \\add{3}{foo} to 3 + foo. The curly brackets surrounding the macro name can be changed to round or square brackets. This affects the brackets used for arguments. One (and only one) macro can be defined per line, and you can't break the line in the middle of the definition. Invalid lines are simply ignored. Only simple string substitution functions are supported; advanced syntax, such as conditional branching, cannot be used here."
-enableCustomKaTeXMacro: "Enable custom KaTeX macro"
+enableCustomKaTeXMacro: "Enable custom KaTeX macros"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing NSFW media via Machine Learning. This will slightly increase the load on the server."

locales/ja-JP.yml

@@ -612,7 +612,7 @@ regexpError: "正規表現エラー"
 regexpErrorDescription: "{tab}ワードミュートの{line}行目の正規表現にエラーが発生しました:"
 instanceMute: "インスタンスミュート"
 userSaysSomething: "{name}が何かを言いました"
-userSaysSomethingReason: "{name}前記{reason}"
+userSaysSomethingReason: "{name}が{reason}と言いました"
 makeActive: "アクティブにする"
 display: "表示"
 copy: "コピー"

package.json

@@ -27,7 +27,7 @@
 		"e2e": "start-server-and-test start:test http://localhost:61812 cy:run",
 		"mocha": "pnpm --filter backend run mocha",
 		"test": "pnpm run mocha",
-		"format": "gulp format",
+		"format": "pnpm rome format packages/**/* --write && pnpm --filter client run format",
 		"clean": "pnpm node ./scripts/clean.js",
 		"clean-all": "pnpm node ./scripts/clean-all.js",
 		"cleanall": "pnpm run clean-all"
@@ -40,7 +40,6 @@
 		"@bull-board/ui": "^4.10.2",
 		"@napi-rs/cli": "^2.15.0",
 		"@tensorflow/tfjs": "^3.21.0",
-		"calckey-js": "^0.0.22",
 		"js-yaml": "4.1.0",
 		"seedrandom": "^3.0.5"
 	},

packages/backend/package.json

@@ -49,7 +49,7 @@
 		"blurhash": "1.1.5",
 		"bull": "4.10.2",
 		"cacheable-lookup": "7.0.0",
-		"calckey-js": "^0.0.22",
+		"calckey-js": "workspace:*",
 		"cbor": "8.1.0",
 		"chalk": "5.2.0",
 		"chalk-template": "0.4.0",

packages/calckey-js/.editorconfig

@@ -0,0 +1,7 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 2
+charset = utf-8
+insert_final_newline = true

packages/calckey-js/.eslintignore

@@ -0,0 +1,7 @@
+node_modules
+/built
+/coverage
+/.eslintrc.js
+/jest.config.ts
+/test
+/test-d

packages/calckey-js/.eslintrc.js

@@ -0,0 +1,65 @@
+module.exports = {
+	root: true,
+	parser: "@typescript-eslint/parser",
+	parserOptions: {
+		tsconfigRootDir: __dirname,
+		project: ["./tsconfig.json"],
+	},
+	plugins: ["@typescript-eslint"],
+	extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+	rules: {
+		indent: [
+			"error",
+			"tab",
+			{
+				SwitchCase: 1,
+				MemberExpression: "off",
+				flatTernaryExpressions: true,
+				ArrayExpression: "first",
+				ObjectExpression: "first",
+			},
+		],
+		"eol-last": ["error", "always"],
+		semi: ["error", "always"],
+		quotes: ["error", "single"],
+		"comma-dangle": ["error", "always-multiline"],
+		"keyword-spacing": [
+			"error",
+			{
+				before: true,
+				after: true,
+			},
+		],
+		"key-spacing": [
+			"error",
+			{
+				beforeColon: false,
+				afterColon: true,
+			},
+		],
+		"space-infix-ops": ["error"],
+		"space-before-blocks": ["error", "always"],
+		"object-curly-spacing": ["error", "always"],
+		"nonblock-statement-body-position": ["error", "beside"],
+		eqeqeq: ["error", "always", { null: "ignore" }],
+		"no-multiple-empty-lines": ["error", { max: 1 }],
+		"no-multi-spaces": ["error"],
+		"no-var": ["error"],
+		"prefer-arrow-callback": ["error"],
+		"no-throw-literal": ["error"],
+		"no-param-reassign": ["warn"],
+		"no-constant-condition": ["warn"],
+		"no-empty-pattern": ["warn"],
+		"@typescript-eslint/no-unnecessary-condition": ["error"],
+		"@typescript-eslint/no-inferrable-types": ["warn"],
+		"@typescript-eslint/no-non-null-assertion": ["warn"],
+		"@typescript-eslint/explicit-function-return-type": ["warn"],
+		"@typescript-eslint/no-misused-promises": [
+			"error",
+			{
+				checksVoidReturn: false,
+			},
+		],
+		"@typescript-eslint/consistent-type-imports": "error",
+	},
+};

packages/calckey-js/.gitignore

@@ -0,0 +1,113 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# App
+temp
+# built
+
+# Yarn
+.yarn/*
+.pnp.cjs
+.pnp.loader.mjs

packages/calckey-js/CHANGELOG.md

@@ -0,0 +1,29 @@
+# 0.0.14
+- remove needless Object.freeze()
+
+# 0.0.13
+- expose ChannelConnection and Channels types
+
+# 0.0.12
+- fix a bug that cannot connect to streaming
+
+# 0.0.11
+- update user type
+- add missing main stream types
+
+# 0.0.10
+- add consts
+
+# 0.0.9
+- add list of api permission
+- Update Note type
+
+# 0.0.8
+- add type definition for `messagingMessage` event to main stream channel
+- Update Note type
+
+# 0.0.7
+- Notificationsの型を修正
+- MessagingMessageの型を修正
+- UserLiteの型を修正
+- apiでネイティブfetchを格納する際に無名関数でラップするように

packages/calckey-js/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-2022 syuilo and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/calckey-js/README.md

@@ -0,0 +1,7 @@
+# Calckey.js
+
+Fork of Misskey.js for Calckey
+
+https://www.npmjs.com/package/calckey-js
+
+![Parody of the Javascript logo with "CK" instead of "JS"](https://codeberg.org/repo-avatars/80771-4d86135f67b9a460cdd1be9e91648e5f)

packages/calckey-js/api-extractor.json

@@ -0,0 +1,364 @@
+/**
+ * Config file for API Extractor.  For more info, please visit: https://api-extractor.com
+ */
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+
+  /**
+   * Optionally specifies another JSON config file that this file extends from.  This provides a way for
+   * standard settings to be shared across multiple projects.
+   *
+   * If the path starts with "./" or "../", the path is resolved relative to the folder of the file that contains
+   * the "extends" field.  Otherwise, the first path segment is interpreted as an NPM package name, and will be
+   * resolved using NodeJS require().
+   *
+   * SUPPORTED TOKENS: none
+   * DEFAULT VALUE: ""
+   */
+  // "extends": "./shared/api-extractor-base.json"
+  // "extends": "my-package/include/api-extractor-base.json"
+
+  /**
+   * Determines the "<projectFolder>" token that can be used with other config file settings.  The project folder
+   * typically contains the tsconfig.json and package.json config files, but the path is user-defined.
+   *
+   * The path is resolved relative to the folder of the config file that contains the setting.
+   *
+   * The default value for "projectFolder" is the token "<lookup>", which means the folder is determined by traversing
+   * parent folders, starting from the folder containing api-extractor.json, and stopping at the first folder
+   * that contains a tsconfig.json file.  If a tsconfig.json file cannot be found in this way, then an error
+   * will be reported.
+   *
+   * SUPPORTED TOKENS: <lookup>
+   * DEFAULT VALUE: "<lookup>"
+   */
+  // "projectFolder": "..",
+
+  /**
+   * (REQUIRED) Specifies the .d.ts file to be used as the starting point for analysis.  API Extractor
+   * analyzes the symbols exported by this module.
+   *
+   * The file extension must be ".d.ts" and not ".ts".
+   *
+   * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+   * prepend a folder token such as "<projectFolder>".
+   *
+   * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+   */
+  "mainEntryPointFilePath": "<projectFolder>/built/index.d.ts",
+
+  /**
+   * A list of NPM package names whose exports should be treated as part of this package.
+   *
+   * For example, suppose that Webpack is used to generate a distributed bundle for the project "library1",
+   * and another NPM package "library2" is embedded in this bundle.  Some types from library2 may become part
+   * of the exported API for library1, but by default API Extractor would generate a .d.ts rollup that explicitly
+   * imports library2.  To avoid this, we can specify:
+   *
+   *   "bundledPackages": [ "library2" ],
+   *
+   * This would direct API Extractor to embed those types directly in the .d.ts rollup, as if they had been
+   * local files for library1.
+   */
+  "bundledPackages": [],
+
+  /**
+   * Determines how the TypeScript compiler engine will be invoked by API Extractor.
+   */
+  "compiler": {
+    /**
+     * Specifies the path to the tsconfig.json file to be used by API Extractor when analyzing the project.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * Note: This setting will be ignored if "overrideTsconfig" is used.
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/tsconfig.json"
+     */
+    // "tsconfigFilePath": "<projectFolder>/tsconfig.json",
+    /**
+     * Provides a compiler configuration that will be used instead of reading the tsconfig.json file from disk.
+     * The object must conform to the TypeScript tsconfig schema:
+     *
+     * http://json.schemastore.org/tsconfig
+     *
+     * If omitted, then the tsconfig.json file will be read from the "projectFolder".
+     *
+     * DEFAULT VALUE: no overrideTsconfig section
+     */
+    // "overrideTsconfig": {
+    //   . . .
+    // }
+    /**
+     * This option causes the compiler to be invoked with the --skipLibCheck option. This option is not recommended
+     * and may cause API Extractor to produce incomplete or incorrect declarations, but it may be required when
+     * dependencies contain declarations that are incompatible with the TypeScript engine that API Extractor uses
+     * for its analysis.  Where possible, the underlying issue should be fixed rather than relying on skipLibCheck.
+     *
+     * DEFAULT VALUE: false
+     */
+    // "skipLibCheck": true,
+  },
+
+  /**
+   * Configures how the API report file (*.api.md) will be generated.
+   */
+  "apiReport": {
+    /**
+     * (REQUIRED) Whether to generate an API report.
+     */
+    "enabled": true
+
+    /**
+     * The filename for the API report files.  It will be combined with "reportFolder" or "reportTempFolder" to produce
+     * a full file path.
+     *
+     * The file extension should be ".api.md", and the string should not contain a path separator such as "\" or "/".
+     *
+     * SUPPORTED TOKENS: <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<unscopedPackageName>.api.md"
+     */
+    // "reportFileName": "<unscopedPackageName>.api.md",
+
+    /**
+     * Specifies the folder where the API report file is written.  The file name portion is determined by
+     * the "reportFileName" setting.
+     *
+     * The API report file is normally tracked by Git.  Changes to it can be used to trigger a branch policy,
+     * e.g. for an API review.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/etc/"
+     */
+    // "reportFolder": "<projectFolder>/etc/",
+
+    /**
+     * Specifies the folder where the temporary report file is written.  The file name portion is determined by
+     * the "reportFileName" setting.
+     *
+     * After the temporary file is written to disk, it is compared with the file in the "reportFolder".
+     * If they are different, a production build will fail.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/temp/"
+     */
+    // "reportTempFolder": "<projectFolder>/temp/"
+  },
+
+  /**
+   * Configures how the doc model file (*.api.json) will be generated.
+   */
+  "docModel": {
+    /**
+     * (REQUIRED) Whether to generate a doc model file.
+     */
+    "enabled": true
+
+    /**
+     * The output path for the doc model file.  The file extension should be ".api.json".
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/temp/<unscopedPackageName>.api.json"
+     */
+    // "apiJsonFilePath": "<projectFolder>/temp/<unscopedPackageName>.api.json"
+  },
+
+  /**
+   * Configures how the .d.ts rollup file will be generated.
+   */
+  "dtsRollup": {
+    /**
+     * (REQUIRED) Whether to generate the .d.ts rollup file.
+     */
+    "enabled": false
+
+    /**
+     * Specifies the output path for a .d.ts rollup file to be generated without any trimming.
+     * This file will include all declarations that are exported by the main entry point.
+     *
+     * If the path is an empty string, then this file will not be written.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/dist/<unscopedPackageName>.d.ts"
+     */
+    // "untrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>.d.ts",
+
+    /**
+     * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "beta" release.
+     * This file will include only declarations that are marked as "@public" or "@beta".
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: ""
+     */
+    // "betaTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-beta.d.ts",
+
+    /**
+     * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "public" release.
+     * This file will include only declarations that are marked as "@public".
+     *
+     * If the path is an empty string, then this file will not be written.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: ""
+     */
+    // "publicTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-public.d.ts",
+
+    /**
+     * When a declaration is trimmed, by default it will be replaced by a code comment such as
+     * "Excluded from this release type: exampleMember".  Set "omitTrimmingComments" to true to remove the
+     * declaration completely.
+     *
+     * DEFAULT VALUE: false
+     */
+    // "omitTrimmingComments": true
+  },
+
+  /**
+   * Configures how the tsdoc-metadata.json file will be generated.
+   */
+  "tsdocMetadata": {
+    /**
+     * Whether to generate the tsdoc-metadata.json file.
+     *
+     * DEFAULT VALUE: true
+     */
+    // "enabled": true,
+    /**
+     * Specifies where the TSDoc metadata file should be written.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * The default value is "<lookup>", which causes the path to be automatically inferred from the "tsdocMetadata",
+     * "typings" or "main" fields of the project's package.json.  If none of these fields are set, the lookup
+     * falls back to "tsdoc-metadata.json" in the package folder.
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<lookup>"
+     */
+    // "tsdocMetadataFilePath": "<projectFolder>/dist/tsdoc-metadata.json"
+  },
+
+  /**
+   * Specifies what type of newlines API Extractor should use when writing output files.  By default, the output files
+   * will be written with Windows-style newlines.  To use POSIX-style newlines, specify "lf" instead.
+   * To use the OS's default newline kind, specify "os".
+   *
+   * DEFAULT VALUE: "crlf"
+   */
+  // "newlineKind": "crlf",
+
+  /**
+   * Configures how API Extractor reports error and warning messages produced during analysis.
+   *
+   * There are three sources of messages:  compiler messages, API Extractor messages, and TSDoc messages.
+   */
+  "messages": {
+    /**
+     * Configures handling of diagnostic messages reported by the TypeScript compiler engine while analyzing
+     * the input .d.ts files.
+     *
+     * TypeScript message identifiers start with "TS" followed by an integer.  For example: "TS2551"
+     *
+     * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
+     */
+    "compilerMessageReporting": {
+      /**
+       * Configures the default routing for messages that don't match an explicit rule in this table.
+       */
+      "default": {
+        /**
+         * Specifies whether the message should be written to the the tool's output log.  Note that
+         * the "addToApiReportFile" property may supersede this option.
+         *
+         * Possible values: "error", "warning", "none"
+         *
+         * Errors cause the build to fail and return a nonzero exit code.  Warnings cause a production build fail
+         * and return a nonzero exit code.  For a non-production build (e.g. when "api-extractor run" includes
+         * the "--local" option), the warning is displayed but the build will not fail.
+         *
+         * DEFAULT VALUE: "warning"
+         */
+        "logLevel": "warning"
+
+        /**
+         * When addToApiReportFile is true:  If API Extractor is configured to write an API report file (.api.md),
+         * then the message will be written inside that file; otherwise, the message is instead logged according to
+         * the "logLevel" option.
+         *
+         * DEFAULT VALUE: false
+         */
+        // "addToApiReportFile": false
+      }
+
+      // "TS2551": {
+      //   "logLevel": "warning",
+      //   "addToApiReportFile": true
+      // },
+      //
+      // . . .
+    },
+
+    /**
+     * Configures handling of messages reported by API Extractor during its analysis.
+     *
+     * API Extractor message identifiers start with "ae-".  For example: "ae-extra-release-tag"
+     *
+     * DEFAULT VALUE: See api-extractor-defaults.json for the complete table of extractorMessageReporting mappings
+     */
+    "extractorMessageReporting": {
+      "default": {
+        "logLevel": "none"
+        // "addToApiReportFile": false
+      }
+
+      // "ae-extra-release-tag": {
+      //   "logLevel": "warning",
+      //   "addToApiReportFile": true
+      // },
+      //
+      // . . .
+    },
+
+    /**
+     * Configures handling of messages reported by the TSDoc parser when analyzing code comments.
+     *
+     * TSDoc message identifiers start with "tsdoc-".  For example: "tsdoc-link-tag-unescaped-text"
+     *
+     * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
+     */
+    "tsdocMessageReporting": {
+      "default": {
+        "logLevel": "warning"
+        // "addToApiReportFile": false
+      }
+
+      // "tsdoc-link-tag-unescaped-text": {
+      //   "logLevel": "warning",
+      //   "addToApiReportFile": true
+      // },
+      //
+      // . . .
+    }
+  }
+}

packages/calckey-js/codecov.yml

@@ -0,0 +1,2 @@
+codecov:
+  token: d55e1270-f20a-4727-aa05-2bd57793315a

packages/calckey-js/jest.config.ts

@@ -0,0 +1,195 @@
+/*
+ * For a detailed explanation regarding each configuration property and type check, visit:
+ * https://jestjs.io/docs/en/configuration.html
+ */
+
+export default {
+	// All imported modules in your tests should be mocked automatically
+	// automock: false,
+
+	// Stop running tests after `n` failures
+	// bail: 0,
+
+	// The directory where Jest should store its cached dependency information
+	// cacheDirectory: "C:\\Users\\ai\\AppData\\Local\\Temp\\jest",
+
+	// Automatically clear mock calls and instances between every test
+	// clearMocks: false,
+
+	// Indicates whether the coverage information should be collected while executing the test
+	// collectCoverage: false,
+
+	// An array of glob patterns indicating a set of files for which coverage information should be collected
+	// collectCoverageFrom: undefined,
+
+	// The directory where Jest should output its coverage files
+	coverageDirectory: "coverage",
+
+	// An array of regexp pattern strings used to skip coverage collection
+	// coveragePathIgnorePatterns: [
+	//   "\\\\node_modules\\\\"
+	// ],
+
+	// Indicates which provider should be used to instrument code for coverage
+	coverageProvider: "v8",
+
+	// A list of reporter names that Jest uses when writing coverage reports
+	// coverageReporters: [
+	//   "json",
+	//   "text",
+	//   "lcov",
+	//   "clover"
+	// ],
+
+	// An object that configures minimum threshold enforcement for coverage results
+	// coverageThreshold: undefined,
+
+	// A path to a custom dependency extractor
+	// dependencyExtractor: undefined,
+
+	// Make calling deprecated APIs throw helpful error messages
+	// errorOnDeprecated: false,
+
+	// Force coverage collection from ignored files using an array of glob patterns
+	// forceCoverageMatch: [],
+
+	// A path to a module which exports an async function that is triggered once before all test suites
+	// globalSetup: undefined,
+
+	// A path to a module which exports an async function that is triggered once after all test suites
+	// globalTeardown: undefined,
+
+	// A set of global variables that need to be available in all test environments
+	// globals: {},
+
+	// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+	// maxWorkers: "50%",
+
+	// An array of directory names to be searched recursively up from the requiring module's location
+	// moduleDirectories: [
+	//   "node_modules"
+	// ],
+
+	// An array of file extensions your modules use
+	// moduleFileExtensions: [
+	//   "js",
+	//   "json",
+	//   "jsx",
+	//   "ts",
+	//   "tsx",
+	//   "node"
+	// ],
+
+	// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+	// moduleNameMapper: {},
+
+	// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+	// modulePathIgnorePatterns: [],
+
+	// Activates notifications for test results
+	// notify: false,
+
+	// An enum that specifies notification mode. Requires { notify: true }
+	// notifyMode: "failure-change",
+
+	// A preset that is used as a base for Jest's configuration
+	// preset: undefined,
+
+	// Run tests from one or more projects
+	// projects: undefined,
+
+	// Use this configuration option to add custom reporters to Jest
+	// reporters: undefined,
+
+	// Automatically reset mock state between every test
+	// resetMocks: false,
+
+	// Reset the module registry before running each individual test
+	// resetModules: false,
+
+	// A path to a custom resolver
+	// resolver: undefined,
+
+	// Automatically restore mock state between every test
+	// restoreMocks: false,
+
+	// The root directory that Jest should scan for tests and modules within
+	// rootDir: undefined,
+
+	// A list of paths to directories that Jest should use to search for files in
+	roots: ["<rootDir>"],
+
+	// Allows you to use a custom runner instead of Jest's default test runner
+	// runner: "jest-runner",
+
+	// The paths to modules that run some code to configure or set up the testing environment before each test
+	// setupFiles: [],
+
+	// A list of paths to modules that run some code to configure or set up the testing framework before each test
+	// setupFilesAfterEnv: [],
+
+	// The number of seconds after which a test is considered as slow and reported as such in the results.
+	// slowTestThreshold: 5,
+
+	// A list of paths to snapshot serializer modules Jest should use for snapshot testing
+	// snapshotSerializers: [],
+
+	// The test environment that will be used for testing
+	testEnvironment: "node",
+
+	// Options that will be passed to the testEnvironment
+	// testEnvironmentOptions: {},
+
+	// Adds a location field to test results
+	// testLocationInResults: false,
+
+	// The glob patterns Jest uses to detect test files
+	testMatch: [
+		"**/__tests__/**/*.[jt]s?(x)",
+		"**/?(*.)+(spec|test).[tj]s?(x)",
+		"<rootDir>/test/**/*",
+	],
+
+	// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+	// testPathIgnorePatterns: [
+	//   "\\\\node_modules\\\\"
+	// ],
+
+	// The regexp pattern or array of patterns that Jest uses to detect test files
+	// testRegex: [],
+
+	// This option allows the use of a custom results processor
+	// testResultsProcessor: undefined,
+
+	// This option allows use of a custom test runner
+	// testRunner: "jasmine2",
+
+	// This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
+	// testURL: "http://localhost",
+
+	// Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
+	// timers: "real",
+
+	// A map from regular expressions to paths to transformers
+	transform: {
+		"^.+\\.(ts|tsx)$": "ts-jest",
+	},
+
+	// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+	// transformIgnorePatterns: [
+	//   "\\\\node_modules\\\\",
+	//   "\\.pnp\\.[^\\\\]+$"
+	// ],
+
+	// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+	// unmockedModulePathPatterns: undefined,
+
+	// Indicates whether each individual test should be reported during the run
+	// verbose: undefined,
+
+	// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+	// watchPathIgnorePatterns: [],
+
+	// Whether to use watchman for file crawling
+	// watchman: true,
+};

packages/calckey-js/package.json

@@ -0,0 +1,47 @@
+{
+	"name": "calckey-js",
+	"version": "0.0.22",
+	"description": "Calckey SDK for JavaScript",
+	"main": "./built/index.js",
+	"types": "./built/index.d.ts",
+	"scripts": {
+		"build": "tsc",
+		"tsd": "tsd",
+		"api": "pnpm api-extractor run --local --verbose",
+		"api-prod": "pnpm api-extractor run --verbose",
+		"eslint": "eslint . --ext .js,.jsx,.ts,.tsx",
+		"typecheck": "tsc --noEmit",
+		"lint": "pnpm typecheck && pnpm eslint",
+		"jest": "jest --coverage --detectOpenHandles",
+		"test": "pnpm jest && pnpm tsd"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://codeberg.org/calckey/calckey.js"
+	},
+	"devDependencies": {
+		"@microsoft/api-extractor": "^7.19.3",
+		"@types/jest": "^27.4.0",
+		"@types/node": "17.0.5",
+		"@typescript-eslint/eslint-plugin": "5.8.1",
+		"@typescript-eslint/parser": "5.8.1",
+		"eslint": "8.6.0",
+		"jest": "^27.4.5",
+		"jest-fetch-mock": "^3.0.3",
+		"jest-websocket-mock": "^2.2.1",
+		"mock-socket": "^9.0.8",
+		"ts-jest": "^27.1.2",
+		"ts-node": "10.4.0",
+		"tsd": "^0.19.1",
+		"typescript": "4.5.4"
+	},
+	"files": [
+		"built"
+	],
+	"dependencies": {
+		"autobind-decorator": "^2.4.0",
+		"eventemitter3": "^4.0.7",
+		"reconnecting-websocket": "^4.4.0",
+		"semver": "^7.3.8"
+	}
+}

packages/calckey-js/src/acct.ts

@@ -0,0 +1,14 @@
+export type Acct = {
+	username: string;
+	host: string | null;
+};
+
+export function parse(acct: string): Acct {
+	if (acct.startsWith("@")) acct = acct.substr(1);
+	const split = acct.split("@", 2);
+	return { username: split[0], host: split[1] || null };
+}
+
+export function toString(acct: Acct): string {
+	return acct.host == null ? acct.username : `${acct.username}@${acct.host}`;
+}

packages/calckey-js/src/api.ts

@@ -0,0 +1,127 @@
+import { Endpoints } from "./api.types";
+
+const MK_API_ERROR = Symbol();
+
+export type APIError = {
+	id: string;
+	code: string;
+	message: string;
+	kind: "client" | "server";
+	info: Record<string, any>;
+};
+
+export function isAPIError(reason: any): reason is APIError {
+	return reason[MK_API_ERROR] === true;
+}
+
+export type FetchLike = (
+	input: string,
+	init?: {
+		method?: string;
+		body?: string;
+		credentials?: RequestCredentials;
+		cache?: RequestCache;
+	},
+) => Promise<{
+	status: number;
+	json(): Promise<any>;
+}>;
+
+type IsNeverType<T> = [T] extends [never] ? true : false;
+
+type StrictExtract<Union, Cond> = Cond extends Union ? Union : never;
+
+type IsCaseMatched<
+	E extends keyof Endpoints,
+	P extends Endpoints[E]["req"],
+	C extends number,
+> = IsNeverType<
+	StrictExtract<Endpoints[E]["res"]["$switch"]["$cases"][C], [P, any]>
+> extends false
+	? true
+	: false;
+
+type GetCaseResult<
+	E extends keyof Endpoints,
+	P extends Endpoints[E]["req"],
+	C extends number,
+> = StrictExtract<Endpoints[E]["res"]["$switch"]["$cases"][C], [P, any]>[1];
+
+export class APIClient {
+	public origin: string;
+	public credential: string | null | undefined;
+	public fetch: FetchLike;
+
+	constructor(opts: {
+		origin: APIClient["origin"];
+		credential?: APIClient["credential"];
+		fetch?: APIClient["fetch"] | null | undefined;
+	}) {
+		this.origin = opts.origin;
+		this.credential = opts.credential;
+		// ネイティブ関数をそのまま変数に代入して使おうとするとChromiumではIllegal invocationエラーが発生するため、
+		// 環境で実装されているfetchを使う場合は無名関数でラップして使用する
+		this.fetch = opts.fetch || ((...args) => fetch(...args));
+	}
+
+	public request<E extends keyof Endpoints, P extends Endpoints[E]["req"]>(
+		endpoint: E,
+		params: P = {} as P,
+		credential?: string | null | undefined,
+	): Promise<
+		Endpoints[E]["res"] extends {
+			$switch: { $cases: [any, any][]; $default: any };
+		}
+			? IsCaseMatched<E, P, 0> extends true
+				? GetCaseResult<E, P, 0>
+				: IsCaseMatched<E, P, 1> extends true
+				? GetCaseResult<E, P, 1>
+				: IsCaseMatched<E, P, 2> extends true
+				? GetCaseResult<E, P, 2>
+				: IsCaseMatched<E, P, 3> extends true
+				? GetCaseResult<E, P, 3>
+				: IsCaseMatched<E, P, 4> extends true
+				? GetCaseResult<E, P, 4>
+				: IsCaseMatched<E, P, 5> extends true
+				? GetCaseResult<E, P, 5>
+				: IsCaseMatched<E, P, 6> extends true
+				? GetCaseResult<E, P, 6>
+				: IsCaseMatched<E, P, 7> extends true
+				? GetCaseResult<E, P, 7>
+				: IsCaseMatched<E, P, 8> extends true
+				? GetCaseResult<E, P, 8>
+				: IsCaseMatched<E, P, 9> extends true
+				? GetCaseResult<E, P, 9>
+				: Endpoints[E]["res"]["$switch"]["$default"]
+			: Endpoints[E]["res"]
+	> {
+		const promise = new Promise((resolve, reject) => {
+			this.fetch(`${this.origin}/api/${endpoint}`, {
+				method: "POST",
+				body: JSON.stringify({
+					...params,
+					i: credential !== undefined ? credential : this.credential,
+				}),
+				credentials: "omit",
+				cache: "no-cache",
+			})
+				.then(async (res) => {
+					const body = res.status === 204 ? null : await res.json();
+
+					if (res.status === 200) {
+						resolve(body);
+					} else if (res.status === 204) {
+						resolve(null);
+					} else {
+						reject({
+							[MK_API_ERROR]: true,
+							...body.error,
+						});
+					}
+				})
+				.catch(reject);
+		});
+
+		return promise as any;
+	}
+}

packages/calckey-js/src/consts.ts

@@ -0,0 +1,60 @@
+export const notificationTypes = [
+	"follow",
+	"mention",
+	"reply",
+	"renote",
+	"quote",
+	"reaction",
+	"pollVote",
+	"pollEnded",
+	"receiveFollowRequest",
+	"followRequestAccepted",
+	"groupInvited",
+	"app",
+] as const;
+
+export const noteVisibilities = [
+	"public",
+	"home",
+	"followers",
+	"specified",
+] as const;
+
+export const mutedNoteReasons = ["word", "manual", "spam", "other"] as const;
+
+export const ffVisibility = ["public", "followers", "private"] as const;
+
+export const permissions = [
+	"read:account",
+	"write:account",
+	"read:blocks",
+	"write:blocks",
+	"read:drive",
+	"write:drive",
+	"read:favorites",
+	"write:favorites",
+	"read:following",
+	"write:following",
+	"read:messaging",
+	"write:messaging",
+	"read:mutes",
+	"write:mutes",
+	"write:notes",
+	"read:notifications",
+	"write:notifications",
+	"read:reactions",
+	"write:reactions",
+	"write:votes",
+	"read:pages",
+	"write:pages",
+	"write:page-likes",
+	"read:page-likes",
+	"read:user-groups",
+	"write:user-groups",
+	"read:channels",
+	"write:channels",
+	"read:gallery",
+	"write:gallery",
+	"read:gallery-likes",
+	"write:gallery-likes",
+];

packages/calckey-js/src/entities.ts

@@ -0,0 +1,490 @@
+export type ID = string;
+export type DateString = string;
+
+type TODO = Record<string, any>;
+
+// NOTE: 極力この型を使うのは避け、UserLite か UserDetailed か明示するように
+export type User = UserLite | UserDetailed;
+
+export type UserLite = {
+	id: ID;
+	username: string;
+	host: string | null;
+	name: string;
+	onlineStatus: "online" | "active" | "offline" | "unknown";
+	avatarUrl: string;
+	avatarBlurhash: string;
+	alsoKnownAs: string[];
+	movedToUri: any;
+	emojis: {
+		name: string;
+		url: string;
+	}[];
+	instance?: {
+		name: Instance["name"];
+		softwareName: Instance["softwareName"];
+		softwareVersion: Instance["softwareVersion"];
+		iconUrl: Instance["iconUrl"];
+		faviconUrl: Instance["faviconUrl"];
+		themeColor: Instance["themeColor"];
+	};
+};
+
+export type UserDetailed = UserLite & {
+	bannerBlurhash: string | null;
+	bannerColor: string | null;
+	bannerUrl: string | null;
+	birthday: string | null;
+	createdAt: DateString;
+	description: string | null;
+	ffVisibility: "public" | "followers" | "private";
+	fields: { name: string; value: string }[];
+	followersCount: number;
+	followingCount: number;
+	hasPendingFollowRequestFromYou: boolean;
+	hasPendingFollowRequestToYou: boolean;
+	isAdmin: boolean;
+	isBlocked: boolean;
+	isBlocking: boolean;
+	isBot: boolean;
+	isCat: boolean;
+	isFollowed: boolean;
+	isFollowing: boolean;
+	isLocked: boolean;
+	isModerator: boolean;
+	isMuted: boolean;
+	isSilenced: boolean;
+	isSuspended: boolean;
+	lang: string | null;
+	lastFetchedAt?: DateString;
+	location: string | null;
+	notesCount: number;
+	pinnedNoteIds: ID[];
+	pinnedNotes: Note[];
+	pinnedPage: Page | null;
+	pinnedPageId: string | null;
+	publicReactions: boolean;
+	securityKeys: boolean;
+	twoFactorEnabled: boolean;
+	updatedAt: DateString | null;
+	uri: string | null;
+	url: string | null;
+};
+
+export type UserGroup = TODO;
+
+export type UserList = {
+	id: ID;
+	createdAt: DateString;
+	name: string;
+	userIds: User["id"][];
+};
+
+export type MeDetailed = UserDetailed & {
+	avatarId: DriveFile["id"];
+	bannerId: DriveFile["id"];
+	autoAcceptFollowed: boolean;
+	alwaysMarkNsfw: boolean;
+	carefulBot: boolean;
+	emailNotificationTypes: string[];
+	hasPendingReceivedFollowRequest: boolean;
+	hasUnreadAnnouncement: boolean;
+	hasUnreadAntenna: boolean;
+	hasUnreadChannel: boolean;
+	hasUnreadMentions: boolean;
+	hasUnreadMessagingMessage: boolean;
+	hasUnreadNotification: boolean;
+	hasUnreadSpecifiedNotes: boolean;
+	hideOnlineStatus: boolean;
+	injectFeaturedNote: boolean;
+	integrations: Record<string, any>;
+	isDeleted: boolean;
+	isExplorable: boolean;
+	mutedWords: string[][];
+	mutingNotificationTypes: string[];
+	noCrawle: boolean;
+	receiveAnnouncementEmail: boolean;
+	usePasswordLessLogin: boolean;
+	[other: string]: any;
+};
+
+export type DriveFile = {
+	id: ID;
+	createdAt: DateString;
+	isSensitive: boolean;
+	name: string;
+	thumbnailUrl: string;
+	url: string;
+	type: string;
+	size: number;
+	md5: string;
+	blurhash: string;
+	comment: string | null;
+	properties: Record<string, any>;
+};
+
+export type DriveFolder = TODO;
+
+export type GalleryPost = TODO;
+
+export type Note = {
+	id: ID;
+	createdAt: DateString;
+	text: string | null;
+	cw: string | null;
+	user: User;
+	userId: User["id"];
+	reply?: Note;
+	replyId: Note["id"];
+	renote?: Note;
+	renoteId: Note["id"];
+	files: DriveFile[];
+	fileIds: DriveFile["id"][];
+	visibility: "public" | "home" | "followers" | "specified";
+	visibleUserIds?: User["id"][];
+	localOnly?: boolean;
+	myReaction?: string;
+	reactions: Record<string, number>;
+	renoteCount: number;
+	repliesCount: number;
+	poll?: {
+		expiresAt: DateString | null;
+		multiple: boolean;
+		choices: {
+			isVoted: boolean;
+			text: string;
+			votes: number;
+		}[];
+	};
+	emojis: {
+		name: string;
+		url: string;
+	}[];
+	uri?: string;
+	url?: string;
+	isHidden?: boolean;
+};
+
+export type NoteReaction = {
+	id: ID;
+	createdAt: DateString;
+	user: UserLite;
+	type: string;
+};
+
+export type Notification = {
+	id: ID;
+	createdAt: DateString;
+	isRead: boolean;
+} & (
+	| {
+			type: "reaction";
+			reaction: string;
+			user: User;
+			userId: User["id"];
+			note: Note;
+	  }
+	| {
+			type: "reply";
+			user: User;
+			userId: User["id"];
+			note: Note;
+	  }
+	| {
+			type: "renote";
+			user: User;
+			userId: User["id"];
+			note: Note;
+	  }
+	| {
+			type: "quote";
+			user: User;
+			userId: User["id"];
+			note: Note;
+	  }
+	| {
+			type: "mention";
+			user: User;
+			userId: User["id"];
+			note: Note;
+	  }
+	| {
+			type: "pollVote";
+			user: User;
+			userId: User["id"];
+			note: Note;
+	  }
+	| {
+			type: "follow";
+			user: User;
+			userId: User["id"];
+	  }
+	| {
+			type: "followRequestAccepted";
+			user: User;
+			userId: User["id"];
+	  }
+	| {
+			type: "receiveFollowRequest";
+			user: User;
+			userId: User["id"];
+	  }
+	| {
+			type: "groupInvited";
+			invitation: UserGroup;
+			user: User;
+			userId: User["id"];
+	  }
+	| {
+			type: "app";
+			header?: string | null;
+			body: string;
+			icon?: string | null;
+	  }
+);
+
+export type MessagingMessage = {
+	id: ID;
+	createdAt: DateString;
+	file: DriveFile | null;
+	fileId: DriveFile["id"] | null;
+	isRead: boolean;
+	reads: User["id"][];
+	text: string | null;
+	user: User;
+	userId: User["id"];
+	recipient?: User | null;
+	recipientId: User["id"] | null;
+	group?: UserGroup | null;
+	groupId: UserGroup["id"] | null;
+};
+
+export type CustomEmoji = {
+	id: string;
+	name: string;
+	url: string;
+	category: string;
+	aliases: string[];
+};
+
+export type LiteInstanceMetadata = {
+	maintainerName: string | null;
+	maintainerEmail: string | null;
+	version: string;
+	name: string | null;
+	uri: string;
+	description: string | null;
+	tosUrl: string | null;
+	disableRegistration: boolean;
+	disableLocalTimeline: boolean;
+	disableRecommendedTimeline: boolean;
+	disableGlobalTimeline: boolean;
+	driveCapacityPerLocalUserMb: number;
+	driveCapacityPerRemoteUserMb: number;
+	enableHcaptcha: boolean;
+	hcaptchaSiteKey: string | null;
+	enableRecaptcha: boolean;
+	recaptchaSiteKey: string | null;
+	swPublickey: string | null;
+	maxNoteTextLength: number;
+	enableEmail: boolean;
+	enableTwitterIntegration: boolean;
+	enableGithubIntegration: boolean;
+	enableDiscordIntegration: boolean;
+	enableServiceWorker: boolean;
+	emojis: CustomEmoji[];
+	ads: {
+		id: ID;
+		ratio: number;
+		place: string;
+		url: string;
+		imageUrl: string;
+	}[];
+};
+
+export type DetailedInstanceMetadata = LiteInstanceMetadata & {
+	features: Record<string, any>;
+};
+
+export type InstanceMetadata = LiteInstanceMetadata | DetailedInstanceMetadata;
+
+export type ServerInfo = {
+	machine: string;
+	cpu: {
+		model: string;
+		cores: number;
+	};
+	mem: {
+		total: number;
+	};
+	fs: {
+		total: number;
+		used: number;
+	};
+};
+
+export type Stats = {
+	notesCount: number;
+	originalNotesCount: number;
+	usersCount: number;
+	originalUsersCount: number;
+	instances: number;
+	driveUsageLocal: number;
+	driveUsageRemote: number;
+};
+
+export type Page = {
+	id: ID;
+	createdAt: DateString;
+	updatedAt: DateString;
+	userId: User["id"];
+	user: User;
+	content: Record<string, any>[];
+	variables: Record<string, any>[];
+	title: string;
+	name: string;
+	summary: string | null;
+	hideTitleWhenPinned: boolean;
+	alignCenter: boolean;
+	font: string;
+	script: string;
+	eyeCatchingImageId: DriveFile["id"] | null;
+	eyeCatchingImage: DriveFile | null;
+	attachedFiles: any;
+	likedCount: number;
+	isLiked?: boolean;
+};
+
+export type PageEvent = {
+	pageId: Page["id"];
+	event: string;
+	var: any;
+	userId: User["id"];
+	user: User;
+};
+
+export type Announcement = {
+	id: ID;
+	createdAt: DateString;
+	updatedAt: DateString | null;
+	text: string;
+	title: string;
+	imageUrl: string | null;
+	isRead?: boolean;
+};
+
+export type Antenna = {
+	id: ID;
+	createdAt: DateString;
+	name: string;
+	keywords: string[][]; // TODO
+	excludeKeywords: string[][]; // TODO
+	src: "home" | "all" | "users" | "list" | "group" | "instances";
+	userListId: ID | null; // TODO
+	userGroupId: ID | null; // TODO
+	users: string[]; // TODO
+	instances: string[];
+	caseSensitive: boolean;
+	notify: boolean;
+	withReplies: boolean;
+	withFile: boolean;
+	hasUnreadNote: boolean;
+};
+
+export type App = TODO;
+
+export type AuthSession = {
+	id: ID;
+	app: App;
+	token: string;
+};
+
+export type Ad = TODO;
+
+export type Clip = TODO;
+
+export type NoteFavorite = {
+	id: ID;
+	createdAt: DateString;
+	noteId: Note["id"];
+	note: Note;
+};
+
+export type FollowRequest = {
+	id: ID;
+	follower: User;
+	followee: User;
+};
+
+export type Channel = {
+	id: ID;
+	// TODO
+};
+
+export type Following = {
+	id: ID;
+	createdAt: DateString;
+	followerId: User["id"];
+	followeeId: User["id"];
+};
+
+export type FollowingFolloweePopulated = Following & {
+	followee: UserDetailed;
+};
+
+export type FollowingFollowerPopulated = Following & {
+	follower: UserDetailed;
+};
+
+export type Blocking = {
+	id: ID;
+	createdAt: DateString;
+	blockeeId: User["id"];
+	blockee: UserDetailed;
+};
+
+export type Instance = {
+	id: ID;
+	caughtAt: DateString;
+	host: string;
+	usersCount: number;
+	notesCount: number;
+	followingCount: number;
+	followersCount: number;
+	driveUsage: number;
+	driveFiles: number;
+	latestRequestSentAt: DateString | null;
+	latestStatus: number | null;
+	latestRequestReceivedAt: DateString | null;
+	lastCommunicatedAt: DateString;
+	isNotResponding: boolean;
+	isSuspended: boolean;
+	softwareName: string | null;
+	softwareVersion: string | null;
+	openRegistrations: boolean | null;
+	name: string | null;
+	description: string | null;
+	maintainerName: string | null;
+	maintainerEmail: string | null;
+	iconUrl: string | null;
+	faviconUrl: string | null;
+	themeColor: string | null;
+	infoUpdatedAt: DateString | null;
+};
+
+export type Signin = {
+	id: ID;
+	createdAt: DateString;
+	ip: string;
+	headers: Record<string, any>;
+	success: boolean;
+};
+
+export type UserSorting =
+	| "+follower"
+	| "-follower"
+	| "+createdAt"
+	| "-createdAt"
+	| "+updatedAt"
+	| "-updatedAt";
+export type OriginType = "combined" | "local" | "remote";

packages/calckey-js/src/index.ts

@@ -0,0 +1,20 @@
+import { Endpoints } from "./api.types";
+import Stream, { Connection } from "./streaming";
+import { Channels } from "./streaming.types";
+import { Acct } from "./acct";
+import * as consts from "./consts";
+
+export { Endpoints, Stream, Connection as ChannelConnection, Channels, Acct };
+
+export const permissions = consts.permissions;
+export const notificationTypes = consts.notificationTypes;
+export const noteVisibilities = consts.noteVisibilities;
+export const mutedNoteReasons = consts.mutedNoteReasons;
+export const ffVisibility = consts.ffVisibility;
+
+// api extractor not supported yet
+//export * as api from './api';
+//export * as entities from './entities';
+import * as api from "./api";
+import * as entities from "./entities";
+export { api, entities };

packages/calckey-js/src/streaming.ts

@@ -0,0 +1,393 @@
+import autobind from "autobind-decorator";
+import { EventEmitter } from "eventemitter3";
+import ReconnectingWebsocket from "reconnecting-websocket";
+import { BroadcastEvents, Channels } from "./streaming.types";
+
+export function urlQuery(
+	obj: Record<string, string | number | boolean | undefined>,
+): string {
+	const params = Object.entries(obj)
+		.filter(([, v]) => (Array.isArray(v) ? v.length : v !== undefined))
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		.reduce(
+			(a, [k, v]) => ((a[k] = v!), a),
+			{} as Record<string, string | number | boolean>,
+		);
+
+	return Object.entries(params)
+		.map((e) => `${e[0]}=${encodeURIComponent(e[1])}`)
+		.join("&");
+}
+
+type AnyOf<T extends Record<any, any>> = T[keyof T];
+
+type StreamEvents = {
+	_connected_: void;
+	_disconnected_: void;
+} & BroadcastEvents;
+
+/**
+ * Misskey stream connection
+ */
+export default class Stream extends EventEmitter<StreamEvents> {
+	private stream: ReconnectingWebsocket;
+	public state: "initializing" | "reconnecting" | "connected" = "initializing";
+	private sharedConnectionPools: Pool[] = [];
+	private sharedConnections: SharedConnection[] = [];
+	private nonSharedConnections: NonSharedConnection[] = [];
+	private idCounter = 0;
+
+	constructor(
+		origin: string,
+		user: { token: string } | null,
+		options?: {
+			WebSocket?: any;
+		},
+	) {
+		super();
+		options = options || {};
+
+		const query = urlQuery({
+			i: user?.token,
+
+			// To prevent cache of an HTML such as error screen
+			_t: Date.now(),
+		});
+
+		const wsOrigin = origin
+			.replace("http://", "ws://")
+			.replace("https://", "wss://");
+
+		this.stream = new ReconnectingWebsocket(
+			`${wsOrigin}/streaming?${query}`,
+			"",
+			{
+				minReconnectionDelay: 1, // https://github.com/pladaria/reconnecting-websocket/issues/91
+				WebSocket: options.WebSocket,
+			},
+		);
+		this.stream.addEventListener("open", this.onOpen);
+		this.stream.addEventListener("close", this.onClose);
+		this.stream.addEventListener("message", this.onMessage);
+	}
+
+	@autobind
+	private genId(): string {
+		return (++this.idCounter).toString();
+	}
+
+	@autobind
+	public useChannel<C extends keyof Channels>(
+		channel: C,
+		params?: Channels[C]["params"],
+		name?: string,
+	): Connection<Channels[C]> {
+		if (params) {
+			return this.connectToChannel(channel, params);
+		} else {
+			return this.useSharedConnection(channel, name);
+		}
+	}
+
+	@autobind
+	private useSharedConnection<C extends keyof Channels>(
+		channel: C,
+		name?: string,
+	): SharedConnection<Channels[C]> {
+		let pool = this.sharedConnectionPools.find((p) => p.channel === channel);
+
+		if (pool == null) {
+			pool = new Pool(this, channel, this.genId());
+			this.sharedConnectionPools.push(pool);
+		}
+
+		const connection = new SharedConnection(this, channel, pool, name);
+		this.sharedConnections.push(connection);
+		return connection;
+	}
+
+	@autobind
+	public removeSharedConnection(connection: SharedConnection): void {
+		this.sharedConnections = this.sharedConnections.filter(
+			(c) => c !== connection,
+		);
+	}
+
+	@autobind
+	public removeSharedConnectionPool(pool: Pool): void {
+		this.sharedConnectionPools = this.sharedConnectionPools.filter(
+			(p) => p !== pool,
+		);
+	}
+
+	@autobind
+	private connectToChannel<C extends keyof Channels>(
+		channel: C,
+		params: Channels[C]["params"],
+	): NonSharedConnection<Channels[C]> {
+		const connection = new NonSharedConnection(
+			this,
+			channel,
+			this.genId(),
+			params,
+		);
+		this.nonSharedConnections.push(connection);
+		return connection;
+	}
+
+	@autobind
+	public disconnectToChannel(connection: NonSharedConnection): void {
+		this.nonSharedConnections = this.nonSharedConnections.filter(
+			(c) => c !== connection,
+		);
+	}
+
+	/**
+	 * Callback of when open connection
+	 */
+	@autobind
+	private onOpen(): void {
+		const isReconnect = this.state === "reconnecting";
+
+		this.state = "connected";
+		this.emit("_connected_");
+
+		// チャンネル再接続
+		if (isReconnect) {
+			for (const p of this.sharedConnectionPools) p.connect();
+			for (const c of this.nonSharedConnections) c.connect();
+		}
+	}
+
+	/**
+	 * Callback of when close connection
+	 */
+	@autobind
+	private onClose(): void {
+		if (this.state === "connected") {
+			this.state = "reconnecting";
+			this.emit("_disconnected_");
+		}
+	}
+
+	/**
+	 * Callback of when received a message from connection
+	 */
+	@autobind
+	private onMessage(message: { data: string }): void {
+		const { type, body } = JSON.parse(message.data);
+
+		if (type === "channel") {
+			const id = body.id;
+
+			let connections: Connection[];
+
+			connections = this.sharedConnections.filter((c) => c.id === id);
+
+			if (connections.length === 0) {
+				const found = this.nonSharedConnections.find((c) => c.id === id);
+				if (found) {
+					connections = [found];
+				}
+			}
+
+			for (const c of connections) {
+				c.emit(body.type, body.body);
+				c.inCount++;
+			}
+		} else {
+			this.emit(type, body);
+		}
+	}
+
+	/**
+	 * Send a message to connection
+	 */
+	@autobind
+	public send(typeOrPayload: any, payload?: any): void {
+		const data =
+			payload === undefined
+				? typeOrPayload
+				: {
+						type: typeOrPayload,
+						body: payload,
+				  };
+
+		this.stream.send(JSON.stringify(data));
+	}
+
+	/**
+	 * Close this connection
+	 */
+	@autobind
+	public close(): void {
+		this.stream.close();
+	}
+}
+
+// TODO: これらのクラスを Stream クラスの内部クラスにすれば余計なメンバをpublicにしないで済むかも？
+// もしくは @internal を使う？ https://www.typescriptlang.org/tsconfig#stripInternal
+class Pool {
+	public channel: string;
+	public id: string;
+	protected stream: Stream;
+	public users = 0;
+	private disposeTimerId: any;
+	private isConnected = false;
+
+	constructor(stream: Stream, channel: string, id: string) {
+		this.channel = channel;
+		this.stream = stream;
+		this.id = id;
+
+		this.stream.on("_disconnected_", this.onStreamDisconnected);
+	}
+
+	@autobind
+	private onStreamDisconnected(): void {
+		this.isConnected = false;
+	}
+
+	@autobind
+	public inc(): void {
+		if (this.users === 0 && !this.isConnected) {
+			this.connect();
+		}
+
+		this.users++;
+
+		// タイマー解除
+		if (this.disposeTimerId) {
+			clearTimeout(this.disposeTimerId);
+			this.disposeTimerId = null;
+		}
+	}
+
+	@autobind
+	public dec(): void {
+		this.users--;
+
+		// そのコネクションの利用者が誰もいなくなったら
+		if (this.users === 0) {
+			// また直ぐに再利用される可能性があるので、一定時間待ち、
+			// 新たな利用者が現れなければコネクションを切断する
+			this.disposeTimerId = setTimeout(() => {
+				this.disconnect();
+			}, 3000);
+		}
+	}
+
+	@autobind
+	public connect(): void {
+		if (this.isConnected) return;
+		this.isConnected = true;
+		this.stream.send("connect", {
+			channel: this.channel,
+			id: this.id,
+		});
+	}
+
+	@autobind
+	private disconnect(): void {
+		this.stream.off("_disconnected_", this.onStreamDisconnected);
+		this.stream.send("disconnect", { id: this.id });
+		this.stream.removeSharedConnectionPool(this);
+	}
+}
+
+export abstract class Connection<
+	Channel extends AnyOf<Channels> = any,
+> extends EventEmitter<Channel["events"]> {
+	public channel: string;
+	protected stream: Stream;
+	public abstract id: string;
+
+	public name?: string; // for debug
+	public inCount = 0; // for debug
+	public outCount = 0; // for debug
+
+	constructor(stream: Stream, channel: string, name?: string) {
+		super();
+
+		this.stream = stream;
+		this.channel = channel;
+		this.name = name;
+	}
+
+	@autobind
+	public send<T extends keyof Channel["receives"]>(
+		type: T,
+		body: Channel["receives"][T],
+	): void {
+		this.stream.send("ch", {
+			id: this.id,
+			type: type,
+			body: body,
+		});
+
+		this.outCount++;
+	}
+
+	public abstract dispose(): void;
+}
+
+class SharedConnection<
+	Channel extends AnyOf<Channels> = any,
+> extends Connection<Channel> {
+	private pool: Pool;
+
+	public get id(): string {
+		return this.pool.id;
+	}
+
+	constructor(stream: Stream, channel: string, pool: Pool, name?: string) {
+		super(stream, channel, name);
+
+		this.pool = pool;
+		this.pool.inc();
+	}
+
+	@autobind
+	public dispose(): void {
+		this.pool.dec();
+		this.removeAllListeners();
+		this.stream.removeSharedConnection(this);
+	}
+}
+
+class NonSharedConnection<
+	Channel extends AnyOf<Channels> = any,
+> extends Connection<Channel> {
+	public id: string;
+	protected params: Channel["params"];
+
+	constructor(
+		stream: Stream,
+		channel: string,
+		id: string,
+		params: Channel["params"],
+	) {
+		super(stream, channel);
+
+		this.params = params;
+		this.id = id;
+
+		this.connect();
+	}
+
+	@autobind
+	public connect(): void {
+		this.stream.send("connect", {
+			channel: this.channel,
+			id: this.id,
+			params: this.params,
+		});
+	}
+
+	@autobind
+	public dispose(): void {
+		this.removeAllListeners();
+		this.stream.send("disconnect", { id: this.id });
+		this.stream.disconnectToChannel(this);
+	}
+}

packages/calckey-js/src/streaming.types.ts

@@ -0,0 +1,181 @@
+import {
+	Antenna,
+	CustomEmoji,
+	DriveFile,
+	MeDetailed,
+	MessagingMessage,
+	Note,
+	Notification,
+	PageEvent,
+	User,
+	UserGroup,
+} from "./entities";
+
+type FIXME = any;
+
+export type Channels = {
+	main: {
+		params: null;
+		events: {
+			notification: (payload: Notification) => void;
+			mention: (payload: Note) => void;
+			reply: (payload: Note) => void;
+			renote: (payload: Note) => void;
+			follow: (payload: User) => void; // 自分が他人をフォローしたとき
+			followed: (payload: User) => void; // 他人が自分をフォローしたとき
+			unfollow: (payload: User) => void; // 自分が他人をフォロー解除したとき
+			meUpdated: (payload: MeDetailed) => void;
+			pageEvent: (payload: PageEvent) => void;
+			urlUploadFinished: (payload: { marker: string; file: DriveFile }) => void;
+			readAllNotifications: () => void;
+			unreadNotification: (payload: Notification) => void;
+			unreadMention: (payload: Note["id"]) => void;
+			readAllUnreadMentions: () => void;
+			unreadSpecifiedNote: (payload: Note["id"]) => void;
+			readAllUnreadSpecifiedNotes: () => void;
+			readAllMessagingMessages: () => void;
+			messagingMessage: (payload: MessagingMessage) => void;
+			unreadMessagingMessage: (payload: MessagingMessage) => void;
+			readAllAntennas: () => void;
+			unreadAntenna: (payload: Antenna) => void;
+			readAllAnnouncements: () => void;
+			readAllChannels: () => void;
+			unreadChannel: (payload: Note["id"]) => void;
+			myTokenRegenerated: () => void;
+			reversiNoInvites: () => void;
+			reversiInvited: (payload: FIXME) => void;
+			signin: (payload: FIXME) => void;
+			registryUpdated: (payload: {
+				scope?: string[];
+				key: string;
+				value: any | null;
+			}) => void;
+			driveFileCreated: (payload: DriveFile) => void;
+			readAntenna: (payload: Antenna) => void;
+		};
+		receives: null;
+	};
+	homeTimeline: {
+		params: null;
+		events: {
+			note: (payload: Note) => void;
+		};
+		receives: null;
+	};
+	localTimeline: {
+		params: null;
+		events: {
+			note: (payload: Note) => void;
+		};
+		receives: null;
+	};
+	hybridTimeline: {
+		params: null;
+		events: {
+			note: (payload: Note) => void;
+		};
+		receives: null;
+	};
+	recommendedTimeline: {
+		params: null;
+		events: {
+			note: (payload: Note) => void;
+		};
+		receives: null;
+	};
+	globalTimeline: {
+		params: null;
+		events: {
+			note: (payload: Note) => void;
+		};
+		receives: null;
+	};
+	messaging: {
+		params: {
+			otherparty?: User["id"] | null;
+			group?: UserGroup["id"] | null;
+		};
+		events: {
+			message: (payload: MessagingMessage) => void;
+			deleted: (payload: MessagingMessage["id"]) => void;
+			read: (payload: MessagingMessage["id"][]) => void;
+			typers: (payload: User[]) => void;
+		};
+		receives: {
+			read: {
+				id: MessagingMessage["id"];
+			};
+		};
+	};
+	serverStats: {
+		params: null;
+		events: {
+			stats: (payload: FIXME) => void;
+		};
+		receives: {
+			requestLog: {
+				id: string | number;
+				length: number;
+			};
+		};
+	};
+	queueStats: {
+		params: null;
+		events: {
+			stats: (payload: FIXME) => void;
+		};
+		receives: {
+			requestLog: {
+				id: string | number;
+				length: number;
+			};
+		};
+	};
+};
+
+export type NoteUpdatedEvent =
+	| {
+			id: Note["id"];
+			type: "reacted";
+			body: {
+				reaction: string;
+				userId: User["id"];
+			};
+	  }
+	| {
+			id: Note["id"];
+			type: "unreacted";
+			body: {
+				reaction: string;
+				userId: User["id"];
+			};
+	  }
+	| {
+			id: Note["id"];
+			type: "deleted";
+			body: {
+				deletedAt: string;
+			};
+	  }
+	| {
+			id: Note["id"];
+			type: "pollVoted";
+			body: {
+				choice: number;
+				userId: User["id"];
+			};
+	  }
+	| {
+			id: Note["id"];
+			type: "replied";
+			body: {
+				id: Note["id"];
+			};
+	  };
+
+export type BroadcastEvents = {
+	noteUpdated: (payload: NoteUpdatedEvent) => void;
+	emojiAdded: (payload: {
+		emoji: CustomEmoji;
+	}) => void;
+};

packages/calckey-js/test-d/api.ts

@@ -0,0 +1,48 @@
+import { expectType } from "tsd";
+import * as Misskey from "../src";
+
+describe("API", () => {
+	test("success", async () => {
+		const cli = new Misskey.api.APIClient({
+			origin: "https://misskey.test",
+			credential: "TOKEN",
+		});
+		const res = await cli.request("meta", { detail: true });
+		expectType<Misskey.entities.DetailedInstanceMetadata>(res);
+	});
+
+	test("conditional respose type (meta)", async () => {
+		const cli = new Misskey.api.APIClient({
+			origin: "https://misskey.test",
+			credential: "TOKEN",
+		});
+
+		const res = await cli.request("meta", { detail: true });
+		expectType<Misskey.entities.DetailedInstanceMetadata>(res);
+
+		const res2 = await cli.request("meta", { detail: false });
+		expectType<Misskey.entities.LiteInstanceMetadata>(res2);
+
+		const res3 = await cli.request("meta", {});
+		expectType<Misskey.entities.LiteInstanceMetadata>(res3);
+
+		const res4 = await cli.request("meta", { detail: true as boolean });
+		expectType<
+			| Misskey.entities.LiteInstanceMetadata
+			| Misskey.entities.DetailedInstanceMetadata
+		>(res4);
+	});
+
+	test("conditional respose type (users/show)", async () => {
+		const cli = new Misskey.api.APIClient({
+			origin: "https://misskey.test",
+			credential: "TOKEN",
+		});
+
+		const res = await cli.request("users/show", { userId: "xxxxxxxx" });
+		expectType<Misskey.entities.UserDetailed>(res);
+
+		const res2 = await cli.request("users/show", { userIds: ["xxxxxxxx"] });
+		expectType<Misskey.entities.UserDetailed[]>(res2);
+	});
+});

packages/calckey-js/test-d/streaming.ts

@@ -0,0 +1,32 @@
+import { expectType } from "tsd";
+import * as Misskey from "../src";
+
+describe("Streaming", () => {
+	test("emit type", async () => {
+		const stream = new Misskey.Stream("https://misskey.test", {
+			token: "TOKEN",
+		});
+		const mainChannel = stream.useChannel("main");
+		mainChannel.on("notification", (notification) => {
+			expectType<Misskey.entities.Notification>(notification);
+		});
+	});
+
+	test("params type", async () => {
+		const stream = new Misskey.Stream("https://misskey.test", {
+			token: "TOKEN",
+		});
+		// TODO: 「stream.useChannel の第二引数として受け入れる型が
+		// {
+		//   otherparty?: User['id'] | null;
+		//   group?: UserGroup['id'] | null;
+		// }
+		// になっている」というテストを行いたいけどtsdでの書き方がわからない
+		const messagingChannel = stream.useChannel("messaging", {
+			otherparty: "aaa",
+		});
+		messagingChannel.on("message", (message) => {
+			expectType<Misskey.entities.MessagingMessage>(message);
+		});
+	});
+});

packages/calckey-js/test/api.ts

@@ -0,0 +1,222 @@
+import { APIClient, isAPIError } from "../src/api";
+import { enableFetchMocks } from "jest-fetch-mock";
+
+enableFetchMocks();
+
+function getFetchCall(call: any[]) {
+	const { body, method } = call[1];
+	if (body != null && typeof body != "string") {
+		throw new Error("invalid body");
+	}
+	return {
+		url: call[0],
+		method: method,
+		body: JSON.parse(body as any),
+	};
+}
+
+describe("API", () => {
+	test("success", async () => {
+		fetchMock.resetMocks();
+		fetchMock.mockResponse(async (req) => {
+			const body = await req.json();
+			if (req.method == "POST" && req.url == "https://misskey.test/api/i") {
+				if (body.i === "TOKEN") {
+					return JSON.stringify({ id: "foo" });
+				} else {
+					return { status: 400 };
+				}
+			} else {
+				return { status: 404 };
+			}
+		});
+
+		const cli = new APIClient({
+			origin: "https://misskey.test",
+			credential: "TOKEN",
+		});
+
+		const res = await cli.request("i");
+
+		expect(res).toEqual({
+			id: "foo",
+		});
+
+		expect(getFetchCall(fetchMock.mock.calls[0])).toEqual({
+			url: "https://misskey.test/api/i",
+			method: "POST",
+			body: { i: "TOKEN" },
+		});
+	});
+
+	test("with params", async () => {
+		fetchMock.resetMocks();
+		fetchMock.mockResponse(async (req) => {
+			const body = await req.json();
+			if (
+				req.method == "POST" &&
+				req.url == "https://misskey.test/api/notes/show"
+			) {
+				if (body.i === "TOKEN" && body.noteId === "aaaaa") {
+					return JSON.stringify({ id: "foo" });
+				} else {
+					return { status: 400 };
+				}
+			} else {
+				return { status: 404 };
+			}
+		});
+
+		const cli = new APIClient({
+			origin: "https://misskey.test",
+			credential: "TOKEN",
+		});
+
+		const res = await cli.request("notes/show", { noteId: "aaaaa" });
+
+		expect(res).toEqual({
+			id: "foo",
+		});
+
+		expect(getFetchCall(fetchMock.mock.calls[0])).toEqual({
+			url: "https://misskey.test/api/notes/show",
+			method: "POST",
+			body: { i: "TOKEN", noteId: "aaaaa" },
+		});
+	});
+
+	test("204 No Content で null が返る", async () => {
+		fetchMock.resetMocks();
+		fetchMock.mockResponse(async (req) => {
+			if (
+				req.method == "POST" &&
+				req.url == "https://misskey.test/api/reset-password"
+			) {
+				return { status: 204 };
+			} else {
+				return { status: 404 };
+			}
+		});
+
+		const cli = new APIClient({
+			origin: "https://misskey.test",
+			credential: "TOKEN",
+		});
+
+		const res = await cli.request("reset-password", {
+			token: "aaa",
+			password: "aaa",
+		});
+
+		expect(res).toEqual(null);
+
+		expect(getFetchCall(fetchMock.mock.calls[0])).toEqual({
+			url: "https://misskey.test/api/reset-password",
+			method: "POST",
+			body: { i: "TOKEN", token: "aaa", password: "aaa" },
+		});
+	});
+
+	test("インスタンスの credential が指定されていても引数で credential が null ならば null としてリクエストされる", async () => {
+		fetchMock.resetMocks();
+		fetchMock.mockResponse(async (req) => {
+			const body = await req.json();
+			if (req.method == "POST" && req.url == "https://misskey.test/api/i") {
+				if (typeof body.i === "string") {
+					return JSON.stringify({ id: "foo" });
+				} else {
+					return {
+						status: 401,
+						body: JSON.stringify({
+							error: {
+								message: "Credential required.",
+								code: "CREDENTIAL_REQUIRED",
+								id: "1384574d-a912-4b81-8601-c7b1c4085df1",
+							},
+						}),
+					};
+				}
+			} else {
+				return { status: 404 };
+			}
+		});
+
+		try {
+			const cli = new APIClient({
+				origin: "https://misskey.test",
+				credential: "TOKEN",
+			});
+
+			await cli.request("i", {}, null);
+		} catch (e) {
+			expect(isAPIError(e)).toEqual(true);
+		}
+	});
+
+	test("api error", async () => {
+		fetchMock.resetMocks();
+		fetchMock.mockResponse(async (req) => {
+			return {
+				status: 500,
+				body: JSON.stringify({
+					error: {
+						message:
+							"Internal error occurred. Please contact us if the error persists.",
+						code: "INTERNAL_ERROR",
+						id: "5d37dbcb-891e-41ca-a3d6-e690c97775ac",
+						kind: "server",
+					},
+				}),
+			};
+		});
+
+		try {
+			const cli = new APIClient({
+				origin: "https://misskey.test",
+				credential: "TOKEN",
+			});
+
+			await cli.request("i");
+		} catch (e: any) {
+			expect(isAPIError(e)).toEqual(true);
+			expect(e.id).toEqual("5d37dbcb-891e-41ca-a3d6-e690c97775ac");
+		}
+	});
+
+	test("network error", async () => {
+		fetchMock.resetMocks();
+		fetchMock.mockAbort();
+
+		try {
+			const cli = new APIClient({
+				origin: "https://misskey.test",
+				credential: "TOKEN",
+			});
+
+			await cli.request("i");
+		} catch (e) {
+			expect(isAPIError(e)).toEqual(false);
+		}
+	});
+
+	test("json parse error", async () => {
+		fetchMock.resetMocks();
+		fetchMock.mockResponse(async (req) => {
+			return {
+				status: 500,
+				body: "<html>I AM NOT JSON</html>",
+			};
+		});
+
+		try {
+			const cli = new APIClient({
+				origin: "https://misskey.test",
+				credential: "TOKEN",
+			});
+
+			await cli.request("i");
+		} catch (e) {
+			expect(isAPIError(e)).toEqual(false);
+		}
+	});
+});

packages/calckey-js/test/streaming.ts

@@ -0,0 +1,181 @@
+import WS from "jest-websocket-mock";
+import Stream from "../src/streaming";
+
+describe("Streaming", () => {
+	test("useChannel", async () => {
+		const server = new WS("wss://misskey.test/streaming");
+		const stream = new Stream("https://misskey.test", { token: "TOKEN" });
+		const mainChannelReceived: any[] = [];
+		const main = stream.useChannel("main");
+		main.on("meUpdated", (payload) => {
+			mainChannelReceived.push(payload);
+		});
+
+		const ws = await server.connected;
+		expect(new URLSearchParams(new URL(ws.url).search).get("i")).toEqual(
+			"TOKEN",
+		);
+
+		const msg = JSON.parse((await server.nextMessage) as string);
+		const mainChannelId = msg.body.id;
+		expect(msg.type).toEqual("connect");
+		expect(msg.body.channel).toEqual("main");
+		expect(mainChannelId != null).toEqual(true);
+
+		server.send(
+			JSON.stringify({
+				type: "channel",
+				body: {
+					id: mainChannelId,
+					type: "meUpdated",
+					body: {
+						id: "foo",
+					},
+				},
+			}),
+		);
+
+		expect(mainChannelReceived[0]).toEqual({
+			id: "foo",
+		});
+
+		stream.close();
+		server.close();
+	});
+
+	test("useChannel with parameters", async () => {
+		const server = new WS("wss://misskey.test/streaming");
+		const stream = new Stream("https://misskey.test", { token: "TOKEN" });
+		const messagingChannelReceived: any[] = [];
+		const messaging = stream.useChannel("messaging", { otherparty: "aaa" });
+		messaging.on("message", (payload) => {
+			messagingChannelReceived.push(payload);
+		});
+
+		const ws = await server.connected;
+		expect(new URLSearchParams(new URL(ws.url).search).get("i")).toEqual(
+			"TOKEN",
+		);
+
+		const msg = JSON.parse((await server.nextMessage) as string);
+		const messagingChannelId = msg.body.id;
+		expect(msg.type).toEqual("connect");
+		expect(msg.body.channel).toEqual("messaging");
+		expect(msg.body.params).toEqual({ otherparty: "aaa" });
+		expect(messagingChannelId != null).toEqual(true);
+
+		server.send(
+			JSON.stringify({
+				type: "channel",
+				body: {
+					id: messagingChannelId,
+					type: "message",
+					body: {
+						id: "foo",
+					},
+				},
+			}),
+		);
+
+		expect(messagingChannelReceived[0]).toEqual({
+			id: "foo",
+		});
+
+		stream.close();
+		server.close();
+	});
+
+	test("ちゃんとチャンネルごとにidが異なる", async () => {
+		const server = new WS("wss://misskey.test/streaming");
+		const stream = new Stream("https://misskey.test", { token: "TOKEN" });
+
+		stream.useChannel("messaging", { otherparty: "aaa" });
+		stream.useChannel("messaging", { otherparty: "bbb" });
+
+		const ws = await server.connected;
+		expect(new URLSearchParams(new URL(ws.url).search).get("i")).toEqual(
+			"TOKEN",
+		);
+
+		const msg = JSON.parse((await server.nextMessage) as string);
+		const messagingChannelId = msg.body.id;
+		const msg2 = JSON.parse((await server.nextMessage) as string);
+		const messagingChannelId2 = msg2.body.id;
+
+		expect(messagingChannelId != null).toEqual(true);
+		expect(messagingChannelId2 != null).toEqual(true);
+		expect(messagingChannelId).not.toEqual(messagingChannelId2);
+
+		stream.close();
+		server.close();
+	});
+
+	test("Connection#send", async () => {
+		const server = new WS("wss://misskey.test/streaming");
+		const stream = new Stream("https://misskey.test", { token: "TOKEN" });
+
+		const messaging = stream.useChannel("messaging", { otherparty: "aaa" });
+		messaging.send("read", { id: "aaa" });
+
+		const ws = await server.connected;
+		expect(new URLSearchParams(new URL(ws.url).search).get("i")).toEqual(
+			"TOKEN",
+		);
+
+		const connectMsg = JSON.parse((await server.nextMessage) as string);
+		const channelId = connectMsg.body.id;
+		const msg = JSON.parse((await server.nextMessage) as string);
+
+		expect(msg.type).toEqual("ch");
+		expect(msg.body.id).toEqual(channelId);
+		expect(msg.body.type).toEqual("read");
+		expect(msg.body.body).toEqual({ id: "aaa" });
+
+		stream.close();
+		server.close();
+	});
+
+	test("Connection#dispose", async () => {
+		const server = new WS("wss://misskey.test/streaming");
+		const stream = new Stream("https://misskey.test", { token: "TOKEN" });
+		const mainChannelReceived: any[] = [];
+		const main = stream.useChannel("main");
+		main.on("meUpdated", (payload) => {
+			mainChannelReceived.push(payload);
+		});
+
+		const ws = await server.connected;
+		expect(new URLSearchParams(new URL(ws.url).search).get("i")).toEqual(
+			"TOKEN",
+		);
+
+		const msg = JSON.parse((await server.nextMessage) as string);
+		const mainChannelId = msg.body.id;
+		expect(msg.type).toEqual("connect");
+		expect(msg.body.channel).toEqual("main");
+		expect(mainChannelId != null).toEqual(true);
+		main.dispose();
+
+		server.send(
+			JSON.stringify({
+				type: "channel",
+				body: {
+					id: mainChannelId,
+					type: "meUpdated",
+					body: {
+						id: "foo",
+					},
+				},
+			}),
+		);
+
+		expect(mainChannelReceived.length).toEqual(0);
+
+		stream.close();
+		server.close();
+	});
+
+	// TODO: SharedConnection#dispose して一定時間経ったら disconnect メッセージがサーバーに送られてくるかのテスト
+
+	// TODO: チャンネル接続が使いまわされるかのテスト
+});

packages/calckey-js/tsconfig.json

@@ -0,0 +1,25 @@
+{
+	"$schema": "http://json.schemastore.org/tsconfig",
+	"compilerOptions": {
+		"target": "es2020",
+		"module": "commonjs",
+		"declaration": true,
+		"declarationMap": true,
+		"sourceMap": true,
+		"outDir": "./built/",
+		"removeComments": true,
+		"strict": true,
+		"strictFunctionTypes": true,
+		"strictNullChecks": true,
+		"experimentalDecorators": true,
+		"noImplicitReturns": true,
+		"esModuleInterop": true
+	},
+	"include": [
+		"src/**/*"
+	],
+	"exclude": [
+		"node_modules",
+		"test/**/*"
+	]
+}

packages/client/.prettierrc

@@ -0,0 +1,15 @@
+{
+  "tabWidth": 4,
+  "useTabs": true,
+	"singleQuote": false,
+	"vueIndentScriptAndStyle": false,
+	"plugins": ["vue"],
+	"overrides": [
+		{
+			"files": "*.vue",
+			"options": {
+				"parser": "vue"
+			}
+		}
+	]
+}

packages/client/package.json

@@ -4,7 +4,8 @@
 	"scripts": {
 		"watch": "pnpm vite build --watch --mode development",
 		"build": "pnpm vite build",
-		"lint": "pnpm rome check \"src/**/*.{ts,vue}\""
+		"lint": "pnpm rome check \"src/**/*.{ts,vue}\"",
+		"format": "pnpm prettier --write '**/*.vue'"
 	},
 	"devDependencies": {
 		"@discordapp/twemoji": "14.0.2",
@@ -32,7 +33,7 @@
 		"blurhash": "1.1.5",
 		"broadcast-channel": "4.19.1",
 		"browser-image-resizer": "https://github.com/misskey-dev/browser-image-resizer.git",
-		"calckey-js": "^0.0.22",
+		"calckey-js": "workspace:*",
 		"chart.js": "4.1.1",
 		"chartjs-adapter-date-fns": "2.0.1",
 		"chartjs-chart-matrix": "^2.0.1",
@@ -54,6 +55,8 @@
 		"matter-js": "0.18.0",
 		"mfm-js": "0.23.2",
 		"photoswipe": "5.3.4",
+		"prettier": "2.8.7",
+		"prettier-plugin-vue": "1.1.6",
 		"prismjs": "1.29.0",
 		"punycode": "2.1.1",
 		"querystring": "0.2.1",

packages/client/src/components/MkAbuseReport.vue

@@ -1,16 +1,34 @@
 <template>
 	<div class="bcekxzvu _gap _panel">
 		<div class="target">
-		<MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`">
-			<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true" :disable-link="true"/>
+			<MkA
+				v-user-preview="report.targetUserId"
+				class="info"
+				:to="`/user-info/${report.targetUserId}`"
+			>
+				<MkAvatar
+					class="avatar"
+					:user="report.targetUser"
+					:show-indicator="true"
+					:disable-link="true"
+				/>
 				<div class="names">
 					<MkUserName class="name" :user="report.targetUser" />
-				<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
+					<MkAcct
+						class="acct"
+						:user="report.targetUser"
+						style="display: block"
+					/>
 				</div>
 			</MkA>
 			<MkKeyValue class="_formBlock">
 				<template #key>{{ i18n.ts.registeredDate }}</template>
-			<template #value>{{ new Date(report.targetUser.createdAt).toLocaleString() }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
+				<template #value
+					>{{
+						new Date(report.targetUser.createdAt).toLocaleString()
+					}}
+					(<MkTime :time="report.targetUser.createdAt" />)</template
+				>
 			</MkKeyValue>
 		</div>
 		<div class="detail">
@@ -18,47 +36,58 @@
 				<Mfm :text="report.comment" />
 			</div>
 			<hr />
-		<div>{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter"/></div>
+			<div>
+				{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter" />
+			</div>
 			<div v-if="report.assignee">
 				{{ i18n.ts.moderator }}:
 				<MkAcct :user="report.assignee" />
 			</div>
 			<div><MkTime :time="report.createdAt" /></div>
 			<div class="action">
-			<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
+				<MkSwitch
+					v-model="forward"
+					:disabled="
+						report.targetUser.host == null || report.resolved
+					"
+				>
 					{{ i18n.ts.forwardReport }}
-				<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
+					<template #caption>{{
+						i18n.ts.forwardReportIsAnonymous
+					}}</template>
 				</MkSwitch>
-			<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
+				<MkButton v-if="!report.resolved" primary @click="resolve">{{
+					i18n.ts.abuseMarkAsResolved
+				}}</MkButton>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import MkButton from '@/components/MkButton.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import { acct, userPage } from '@/filters/user';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import MkButton from "@/components/MkButton.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import { acct, userPage } from "@/filters/user";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	report: any;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'resolved', reportId: string): void;
+	(ev: "resolved", reportId: string): void;
 }>();
 
 let forward = $ref(props.report.forwarded);
 
 function resolve() {
-	os.apiWithDialog('admin/resolve-abuse-user-report', {
+	os.apiWithDialog("admin/resolve-abuse-user-report", {
 		forward: forward,
 		reportId: props.report.id,
 	}).then(() => {
-		emit('resolved', props.report.id);
+		emit("resolved", props.report.id);
 	});
 }
 </script>
@@ -81,7 +110,16 @@ function resolve() {
 			padding: 14px;
 			border-radius: 8px;
 			--c: rgb(255 196 0 / 15%);
-			background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+			background-image: linear-gradient(
+				45deg,
+				var(--c) 16.67%,
+				transparent 16.67%,
+				transparent 50%,
+				var(--c) 50%,
+				var(--c) 66.67%,
+				transparent 66.67%,
+				transparent 100%
+			);
 			background-size: 16px 16px;
 
 			> .avatar {

packages/client/src/components/MkAbuseReportWindow.vue

@@ -1,7 +1,16 @@
 <template>
-<XWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
+	<XWindow
+		ref="uiWindow"
+		:initial-width="400"
+		:initial-height="500"
+		:can-resize="true"
+		@closed="emit('closed')"
+	>
 		<template #header>
-		<i class="ph-warning-circle ph-bold ph-lg" style="margin-right: 0.5em;"></i>
+			<i
+				class="ph-warning-circle ph-bold ph-lg"
+				style="margin-right: 0.5em"
+			></i>
 			<I18n :src="i18n.ts.reportAbuseOf" tag="span">
 				<template #name>
 					<b><MkAcct :user="user" /></b>
@@ -12,24 +21,32 @@
 			<div class="_section">
 				<MkTextarea v-model="comment">
 					<template #label>{{ i18n.ts.details }}</template>
-				<template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template>
+					<template #caption>{{
+						i18n.ts.fillAbuseReportDescription
+					}}</template>
 				</MkTextarea>
 			</div>
 			<div class="_section">
-			<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
+				<MkButton
+					primary
+					full
+					:disabled="comment.length === 0"
+					@click="send"
+					>{{ i18n.ts.send }}</MkButton
+				>
 			</div>
 		</div>
 	</XWindow>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import XWindow from '@/components/MkWindow.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import * as Misskey from "calckey-js";
+import XWindow from "@/components/MkWindow.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	user: Misskey.entities.User;
@@ -37,23 +54,27 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 const uiWindow = ref<InstanceType<typeof XWindow>>();
-const comment = ref(props.initialComment || '');
+const comment = ref(props.initialComment || "");
 
 function send() {
-	os.apiWithDialog('users/report-abuse', {
+	os.apiWithDialog(
+		"users/report-abuse",
+		{
 			userId: props.user.id,
 			comment: comment.value,
-	}, undefined).then(res => {
+		},
+		undefined
+	).then((res) => {
 		os.alert({
-			type: 'success',
-			text: i18n.ts.abuseReported
+			type: "success",
+			text: i18n.ts.abuseReported,
 		});
 		uiWindow.value?.close();
-		emit('closed');
+		emit("closed");
 	});
 }
 </script>

packages/client/src/components/MkAnalogClock.vue

@@ -3,26 +3,56 @@
 		<template v-if="props.graduations === 'dots'">
 			<circle
 				v-for="(angle, i) in graduationsMajor"
-			:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
-			:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
+				:cx="5 + Math.sin(angle) * (5 - graduationsPadding)"
+				:cy="5 - Math.cos(angle) * (5 - graduationsPadding)"
 				:r="0.125"
-			:fill="(props.twentyfour ? h : h % 12) === i ? nowColor : majorGraduationColor"
-			:opacity="!props.fadeGraduations || (props.twentyfour ? h : h % 12) === i ? 1 : Math.max(0, 1 - (angleDiff(hAngle, angle) / Math.PI) - numbersOpacityFactor)"
+				:fill="
+					(props.twentyfour ? h : h % 12) === i
+						? nowColor
+						: majorGraduationColor
+				"
+				:opacity="
+					!props.fadeGraduations ||
+					(props.twentyfour ? h : h % 12) === i
+						? 1
+						: Math.max(
+								0,
+								1 -
+									angleDiff(hAngle, angle) / Math.PI -
+									numbersOpacityFactor
+						  )
+				"
 			/>
 		</template>
 		<template v-else-if="props.graduations === 'numbers'">
 			<text
 				v-for="(angle, i) in texts"
-			:x="5 + (Math.sin(angle) * (5 - textsPadding))"
-			:y="5 - (Math.cos(angle) * (5 - textsPadding))"
+				:x="5 + Math.sin(angle) * (5 - textsPadding)"
+				:y="5 - Math.cos(angle) * (5 - textsPadding)"
 				text-anchor="middle"
 				dominant-baseline="middle"
 				:font-size="(props.twentyfour ? h : h % 12) === i ? 1 : 0.7"
-			:font-weight="(props.twentyfour ? h : h % 12) === i ? 'bold' : 'normal'"
-			:fill="(props.twentyfour ? h : h % 12) === i ? nowColor : 'currentColor'"
-			:opacity="!props.fadeGraduations || (props.twentyfour ? h : h % 12) === i ? 1 : Math.max(0, 1 - (angleDiff(hAngle, angle) / Math.PI) - numbersOpacityFactor)"
+				:font-weight="
+					(props.twentyfour ? h : h % 12) === i ? 'bold' : 'normal'
+				"
+				:fill="
+					(props.twentyfour ? h : h % 12) === i
+						? nowColor
+						: 'currentColor'
+				"
+				:opacity="
+					!props.fadeGraduations ||
+					(props.twentyfour ? h : h % 12) === i
+						? 1
+						: Math.max(
+								0,
+								1 -
+									angleDiff(hAngle, angle) / Math.PI -
+									numbersOpacityFactor
+						  )
+				"
 			>
-			{{ i === 0 ? (props.twentyfour ? '24' : '12') : i }}
+				{{ i === 0 ? (props.twentyfour ? "24" : "12") : i }}
 			</text>
 		</template>
 
@@ -40,11 +70,15 @@
 
 		<line
 			class="s"
-		:class="{ animate: !disableSAnimate && sAnimation !== 'none', elastic: sAnimation === 'elastic', easeOut: sAnimation === 'easeOut' }"
-		:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
-		:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
-		:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
-		:y2="5 - (1 * ((sHandLengthRatio * 5) - handsPadding))"
+			:class="{
+				animate: !disableSAnimate && sAnimation !== 'none',
+				elastic: sAnimation === 'elastic',
+				easeOut: sAnimation === 'easeOut',
+			}"
+			:x1="5 - 0 * (sHandLengthRatio * handsTailLength)"
+			:y1="5 + 1 * (sHandLengthRatio * handsTailLength)"
+			:x2="5 + 0 * (sHandLengthRatio * 5 - handsPadding)"
+			:y2="5 - 1 * (sHandLengthRatio * 5 - handsPadding)"
 			:stroke="sHandColor"
 			:stroke-width="thickness / 2"
 			:style="`transform: rotateZ(${sAngle}rad)`"
@@ -52,20 +86,20 @@
 		/>
 
 		<line
-		:x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))"
-		:y1="5 + (Math.cos(mAngle) * (mHandLengthRatio * handsTailLength))"
-		:x2="5 + (Math.sin(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
-		:y2="5 - (Math.cos(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
+			:x1="5 - Math.sin(mAngle) * (mHandLengthRatio * handsTailLength)"
+			:y1="5 + Math.cos(mAngle) * (mHandLengthRatio * handsTailLength)"
+			:x2="5 + Math.sin(mAngle) * (mHandLengthRatio * 5 - handsPadding)"
+			:y2="5 - Math.cos(mAngle) * (mHandLengthRatio * 5 - handsPadding)"
 			:stroke="mHandColor"
 			:stroke-width="thickness"
 			stroke-linecap="round"
 		/>
 
 		<line
-		:x1="5 - (Math.sin(hAngle) * (hHandLengthRatio * handsTailLength))"
-		:y1="5 + (Math.cos(hAngle) * (hHandLengthRatio * handsTailLength))"
-		:x2="5 + (Math.sin(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
-		:y2="5 - (Math.cos(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
+			:x1="5 - Math.sin(hAngle) * (hHandLengthRatio * handsTailLength)"
+			:y1="5 + Math.cos(hAngle) * (hHandLengthRatio * handsTailLength)"
+			:x2="5 + Math.sin(hAngle) * (hHandLengthRatio * 5 - handsPadding)"
+			:y2="5 - Math.cos(hAngle) * (hHandLengthRatio * 5 - handsPadding)"
 			:stroke="hHandColor"
 			:stroke-width="thickness"
 			stroke-linecap="round"
@@ -74,14 +108,21 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount, shallowRef, nextTick } from 'vue';
-import tinycolor from 'tinycolor2';
-import { globalEvents } from '@/events.js';
+import {
+	ref,
+	computed,
+	onMounted,
+	onBeforeUnmount,
+	shallowRef,
+	nextTick,
+} from "vue";
+import tinycolor from "tinycolor2";
+import { globalEvents } from "@/events.js";
 
 // https://stackoverflow.com/questions/1878907/how-can-i-find-the-difference-between-two-angles
 const angleDiff = (a: number, b: number) => {
 	const x = Math.abs(a - b);
-	return Math.abs((x + Math.PI) % (Math.PI * 2) - Math.PI);
+	return Math.abs(((x + Math.PI) % (Math.PI * 2)) - Math.PI);
 };
 
 const graduationsPadding = 0.5;
@@ -93,28 +134,31 @@ const mHandLengthRatio = 1;
 const sHandLengthRatio = 1;
 const numbersOpacityFactor = 0.35;
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		thickness?: number;
 		offset?: number;
 		twentyfour?: boolean;
-	graduations?: 'none' | 'dots' | 'numbers';
+		graduations?: "none" | "dots" | "numbers";
 		fadeGraduations?: boolean;
-	sAnimation?: 'none' | 'elastic' | 'easeOut';
-}>(), {
+		sAnimation?: "none" | "elastic" | "easeOut";
+	}>(),
+	{
 		numbers: false,
 		thickness: 0.1,
 		offset: 0 - new Date().getTimezoneOffset(),
 		twentyfour: false,
-	graduations: 'dots',
+		graduations: "dots",
 		fadeGraduations: true,
-	sAnimation: 'elastic',
-});
+		sAnimation: "elastic",
+	}
+);
 
 const graduationsMajor = computed(() => {
 	const angles: number[] = [];
 	const times = props.twentyfour ? 24 : 12;
 	for (let i = 0; i < times; i++) {
-		const angle = Math.PI * i / (times / 2);
+		const angle = (Math.PI * i) / (times / 2);
 		angles.push(angle);
 	}
 	return angles;
@@ -123,7 +167,7 @@ const texts = computed(() => {
 	const angles: number[] = [];
 	const times = props.twentyfour ? 24 : 12;
 	for (let i = 0; i < times; i++) {
-		const angle = Math.PI * i / (times / 2);
+		const angle = (Math.PI * i) / (times / 2);
 		angles.push(angle);
 	}
 	return angles;
@@ -147,14 +191,19 @@ let sOneRound = false;
 
 function tick() {
 	const now = new Date();
-	now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
+	now.setMinutes(
+		now.getMinutes() + (new Date().getTimezoneOffset() + props.offset)
+	);
 	s = now.getSeconds();
 	m = now.getMinutes();
 	h = now.getHours();
-	hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6);
-	mAngle = Math.PI * (m + s / 60) / 30;
-	if (sOneRound) { // 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
-		sAngle = Math.PI * 60 / 30;
+	hAngle =
+		(Math.PI * ((h % (props.twentyfour ? 24 : 12)) + (m + s / 60) / 60)) /
+		(props.twentyfour ? 12 : 6);
+	mAngle = (Math.PI * (m + s / 60)) / 30;
+	if (sOneRound) {
+		// 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
+		sAngle = (Math.PI * 60) / 30;
 		window.setTimeout(() => {
 			disableSAnimate = true;
 			window.setTimeout(() => {
@@ -165,7 +214,7 @@ function tick() {
 			}, 100);
 		}, 700);
 	} else {
-		sAngle = Math.PI * s / 30;
+		sAngle = (Math.PI * s) / 30;
 	}
 	sOneRound = s === 59;
 }
@@ -174,12 +223,18 @@ tick();
 
 function calcColors() {
 	const computedStyle = getComputedStyle(document.documentElement);
-	const dark = tinycolor(computedStyle.getPropertyValue('--bg')).isDark();
-	const accent = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
-	majorGraduationColor = dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
+	const dark = tinycolor(computedStyle.getPropertyValue("--bg")).isDark();
+	const accent = tinycolor(
+		computedStyle.getPropertyValue("--accent")
+	).toHexString();
+	majorGraduationColor = dark
+		? "rgba(255, 255, 255, 0.3)"
+		: "rgba(0, 0, 0, 0.3)";
 	//minorGraduationColor = dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
-	sHandColor = dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)';
-	mHandColor = tinycolor(computedStyle.getPropertyValue('--fg')).toHexString();
+	sHandColor = dark ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.3)";
+	mHandColor = tinycolor(
+		computedStyle.getPropertyValue("--fg")
+	).toHexString();
 	hHandColor = accent;
 	nowColor = accent;
 }
@@ -195,13 +250,13 @@ onMounted(() => {
 	};
 	update();
 
-	globalEvents.on('themeChanged', calcColors);
+	globalEvents.on("themeChanged", calcColors);
 });
 
 onBeforeUnmount(() => {
 	enabled = false;
 
-	globalEvents.off('themeChanged', calcColors);
+	globalEvents.off("themeChanged", calcColors);
 });
 </script>
 
@@ -214,11 +269,11 @@ onBeforeUnmount(() => {
 		transform-origin: 50% 50%;
 
 		&.animate.elastic {
-			transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
+			transition: transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);
 		}
 
 		&.animate.easeOut {
-			transition: transform .7s cubic-bezier(0,.7,.3,1);
+			transition: transform 0.7s cubic-bezier(0, 0.7, 0.3, 1);
 		}
 	}
 }

packages/client/src/components/MkAutocomplete.vue

@@ -1,31 +1,81 @@
 <template>
-<div ref="rootEl" class="swhvrteh _popup _shadow" :style="{ zIndex }" @contextmenu.prevent="() => {}">
+	<div
+		ref="rootEl"
+		class="swhvrteh _popup _shadow"
+		:style="{ zIndex }"
+		@contextmenu.prevent="() => {}"
+	>
 		<ol v-if="type === 'user'" ref="suggests" class="users">
-		<li v-for="user in users" tabindex="-1" class="user" @click="complete(type, user)" @keydown="onKeydown">
+			<li
+				v-for="user in users"
+				tabindex="-1"
+				class="user"
+				@click="complete(type, user)"
+				@keydown="onKeydown"
+			>
 				<img class="avatar" :src="user.avatarUrl" />
 				<span class="name">
 					<MkUserName :key="user.id" :user="user" />
 				</span>
 				<span class="username">@{{ acct(user) }}</span>
 			</li>
-		<li tabindex="-1" class="choose" @click="chooseUser()" @keydown="onKeydown">{{ i18n.ts.selectUser }}</li>
+			<li
+				tabindex="-1"
+				class="choose"
+				@click="chooseUser()"
+				@keydown="onKeydown"
+			>
+				{{ i18n.ts.selectUser }}
+			</li>
 		</ol>
 		<ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags">
-		<li v-for="hashtag in hashtags" tabindex="-1" @click="complete(type, hashtag)" @keydown="onKeydown">
+			<li
+				v-for="hashtag in hashtags"
+				tabindex="-1"
+				@click="complete(type, hashtag)"
+				@keydown="onKeydown"
+			>
 				<span class="name">{{ hashtag }}</span>
 			</li>
 		</ol>
 		<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
-		<li v-for="emoji in emojis" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
-			<span v-if="emoji.isCustomEmoji" class="emoji"><img :src="defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
-			<span v-else-if="!defaultStore.state.useOsNativeEmojis" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
+			<li
+				v-for="emoji in emojis"
+				tabindex="-1"
+				@click="complete(type, emoji.emoji)"
+				@keydown="onKeydown"
+			>
+				<span v-if="emoji.isCustomEmoji" class="emoji"
+					><img
+						:src="
+							defaultStore.state.disableShowingAnimatedImages
+								? getStaticImageUrl(emoji.url)
+								: emoji.url
+						"
+						:alt="emoji.emoji"
+				/></span>
+				<span
+					v-else-if="!defaultStore.state.useOsNativeEmojis"
+					class="emoji"
+					><img :src="emoji.url" :alt="emoji.emoji"
+				/></span>
 				<span v-else class="emoji">{{ emoji.emoji }}</span>
-			<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
-			<span v-if="emoji.aliasOf" class="alias">({{ emoji.aliasOf }})</span>
+				<span
+					class="name"
+					v-html="emoji.name.replace(q, `<b>${q}</b>`)"
+				></span>
+				<span v-if="emoji.aliasOf" class="alias"
+					>({{ emoji.aliasOf }})</span
+				>
 			</li>
 		</ol>
 		<ol v-else-if="mfmTags.length > 0" ref="suggests" class="mfmTags">
-		<li v-for="tag in mfmTags" tabindex="-1" @click="complete(type, tag)" @keydown="onKeydown">
+			<li
+				v-for="tag in mfmTags"
+				tabindex="-1"
+				@click="complete(type, tag)"
+				@keydown="onKeydown"
+			>
 				<span class="tag">{{ tag }}</span>
 			</li>
 		</ol>
@@ -33,17 +83,25 @@
 </template>
 
 <script lang="ts">
-import { markRaw, ref, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
-import contains from '@/scripts/contains';
-import { char2filePath } from '@/scripts/twemoji-base';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { acct } from '@/filters/user';
-import * as os from '@/os';
-import { MFM_TAGS } from '@/scripts/mfm-tags';
-import { defaultStore } from '@/store';
-import { emojilist } from '@/scripts/emojilist';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
+import {
+	markRaw,
+	ref,
+	onUpdated,
+	onMounted,
+	onBeforeUnmount,
+	nextTick,
+	watch,
+} from "vue";
+import contains from "@/scripts/contains";
+import { char2filePath } from "@/scripts/twemoji-base";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import { acct } from "@/filters/user";
+import * as os from "@/os";
+import { MFM_TAGS } from "@/scripts/mfm-tags";
+import { defaultStore } from "@/store";
+import { emojilist } from "@/scripts/emojilist";
+import { instance } from "@/instance";
+import { i18n } from "@/i18n";
 
 type EmojiDef = {
 	emoji: string;
@@ -53,9 +111,9 @@ type EmojiDef = {
 	isCustomEmoji?: boolean;
 };
 
-const lib = emojilist.filter(x => x.category !== 'flags');
+const lib = emojilist.filter((x) => x.category !== "flags");
 
-const emjdb: EmojiDef[] = lib.map(x => ({
+const emjdb: EmojiDef[] = lib.map((x) => ({
 	emoji: x.char,
 	name: x.name,
 	url: char2filePath(x.char),
@@ -85,7 +143,7 @@ for (const x of customEmojis) {
 		name: x.name,
 		emoji: `:${x.name}:`,
 		url: x.url,
-		isCustomEmoji: true
+		isCustomEmoji: true,
 	});
 
 	if (x.aliases) {
@@ -95,7 +153,7 @@ for (const x of customEmojis) {
 				aliasOf: x.name,
 				emoji: `:${x.name}:`,
 				url: x.url,
-				isCustomEmoji: true
+				isCustomEmoji: true,
 			});
 		}
 	}
@@ -125,8 +183,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(event: 'done', value: { type: string; value: any }): void;
-	(event: 'closed'): void;
+	(event: "done", value: { type: string; value: any }): void;
+	(event: "closed"): void;
 }>();
 
 const suggests = ref<Element>();
@@ -135,36 +193,37 @@ const rootEl = ref<HTMLDivElement>();
 const fetching = ref(true);
 const users = ref<any[]>([]);
 const hashtags = ref<any[]>([]);
-const emojis = ref<(EmojiDef)[]>([]);
+const emojis = ref<EmojiDef[]>([]);
 const items = ref<Element[] | HTMLCollection>([]);
 const mfmTags = ref<string[]>([]);
 const select = ref(-1);
-const zIndex = os.claimZIndex('high');
+const zIndex = os.claimZIndex("high");
 
 function complete(type: string, value: any) {
-	emit('done', { type, value });
-	emit('closed');
-	if (type === 'emoji') {
+	emit("done", { type, value });
+	emit("closed");
+	if (type === "emoji") {
 		let recents = defaultStore.state.recentlyUsedEmojis;
 		recents = recents.filter((emoji: any) => emoji !== value);
 		recents.unshift(value);
-		defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
+		defaultStore.set("recentlyUsedEmojis", recents.splice(0, 32));
 	}
 }
 
 function setPosition() {
 	if (!rootEl.value) return;
 	if (props.x + rootEl.value.offsetWidth > window.innerWidth) {
-		rootEl.value.style.left = (window.innerWidth - rootEl.value.offsetWidth) + 'px';
+		rootEl.value.style.left =
+			window.innerWidth - rootEl.value.offsetWidth + "px";
 	} else {
 		rootEl.value.style.left = `${props.x}px`;
 	}
 	if (props.y + rootEl.value.offsetHeight > window.innerHeight) {
-		rootEl.value.style.top = (props.y - rootEl.value.offsetHeight) + 'px';
-		rootEl.value.style.marginTop = '0';
+		rootEl.value.style.top = props.y - rootEl.value.offsetHeight + "px";
+		rootEl.value.style.marginTop = "0";
 	} else {
-		rootEl.value.style.top = props.y + 'px';
-		rootEl.value.style.marginTop = 'calc(1em + 8px)';
+		rootEl.value.style.top = props.y + "px";
+		rootEl.value.style.marginTop = "calc(1em + 8px)";
 	}
 }
 
@@ -172,10 +231,10 @@ function exec() {
 	select.value = -1;
 	if (suggests.value) {
 		for (const el of Array.from(items.value)) {
-			el.removeAttribute('data-selected');
+			el.removeAttribute("data-selected");
 		}
 	}
-	if (props.type === 'user') {
+	if (props.type === "user") {
 		if (!props.q) {
 			users.value = [];
 			fetching.value = false;
@@ -189,20 +248,22 @@ function exec() {
 			users.value = JSON.parse(cache);
 			fetching.value = false;
 		} else {
-			os.api('users/search-by-username-and-host', {
+			os.api("users/search-by-username-and-host", {
 				username: props.q,
 				limit: 10,
-				detail: false
-			}).then(searchedUsers => {
+				detail: false,
+			}).then((searchedUsers) => {
 				users.value = searchedUsers as any[];
 				fetching.value = false;
 				// キャッシュ
 				sessionStorage.setItem(cacheKey, JSON.stringify(searchedUsers));
 			});
 		}
-	} else if (props.type === 'hashtag') {
-		if (!props.q || props.q === '') {
-			hashtags.value = JSON.parse(localStorage.getItem('hashtags') || '[]');
+	} else if (props.type === "hashtag") {
+		if (!props.q || props.q === "") {
+			hashtags.value = JSON.parse(
+				localStorage.getItem("hashtags") || "[]"
+			);
 			fetching.value = false;
 		} else {
 			const cacheKey = `autocomplete:hashtag:${props.q}`;
@@ -212,59 +273,80 @@ function exec() {
 				hashtags.value = hashtags;
 				fetching.value = false;
 			} else {
-				os.api('hashtags/search', {
+				os.api("hashtags/search", {
 					query: props.q,
-					limit: 30
-				}).then(searchedHashtags => {
+					limit: 30,
+				}).then((searchedHashtags) => {
 					hashtags.value = searchedHashtags as any[];
 					fetching.value = false;
 					// キャッシュ
-					sessionStorage.setItem(cacheKey, JSON.stringify(searchedHashtags));
+					sessionStorage.setItem(
+						cacheKey,
+						JSON.stringify(searchedHashtags)
+					);
 				});
 			}
 		}
-	} else if (props.type === 'emoji') {
-		if (!props.q || props.q === '') {
+	} else if (props.type === "emoji") {
+		if (!props.q || props.q === "") {
 			// 最近使った絵文字をサジェスト
-			emojis.value = defaultStore.state.recentlyUsedEmojis.map(emoji => emojiDb.find(dbEmoji => dbEmoji.emoji === emoji)).filter(x => x) as EmojiDef[];
+			emojis.value = defaultStore.state.recentlyUsedEmojis
+				.map((emoji) =>
+					emojiDb.find((dbEmoji) => dbEmoji.emoji === emoji)
+				)
+				.filter((x) => x) as EmojiDef[];
 			return;
 		}
 
 		const matched: EmojiDef[] = [];
 		const max = 30;
 
-		emojiDb.some(x => {
-			if (x.name.startsWith(props.q ?? '') && !x.aliasOf && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
+		emojiDb.some((x) => {
+			if (
+				x.name.startsWith(props.q ?? "") &&
+				!x.aliasOf &&
+				!matched.some((y) => y.emoji === x.emoji)
+			)
+				matched.push(x);
 			return matched.length === max;
 		});
 
 		if (matched.length < max) {
-			emojiDb.some(x => {
-				if (x.name.startsWith(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
+			emojiDb.some((x) => {
+				if (
+					x.name.startsWith(props.q ?? "") &&
+					!matched.some((y) => y.emoji === x.emoji)
+				)
+					matched.push(x);
 				return matched.length === max;
 			});
 		}
 
 		if (matched.length < max) {
-			emojiDb.some(x => {
-				if (x.name.includes(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
+			emojiDb.some((x) => {
+				if (
+					x.name.includes(props.q ?? "") &&
+					!matched.some((y) => y.emoji === x.emoji)
+				)
+					matched.push(x);
 				return matched.length === max;
 			});
 		}
 
 		emojis.value = matched;
-	} else if (props.type === 'mfmTag') {
-		if (!props.q || props.q === '') {
+	} else if (props.type === "mfmTag") {
+		if (!props.q || props.q === "") {
 			mfmTags.value = MFM_TAGS;
 			return;
 		}
 
-		mfmTags.value = MFM_TAGS.filter(tag => tag.startsWith(props.q ?? ''));
+		mfmTags.value = MFM_TAGS.filter((tag) => tag.startsWith(props.q ?? ""));
 	}
 }
 
 function onMousedown(event: Event) {
-	if (!contains(rootEl.value, event.target) && (rootEl.value !== event.target)) props.close();
+	if (!contains(rootEl.value, event.target) && rootEl.value !== event.target)
+		props.close();
 }
 
 function onKeydown(event: KeyboardEvent) {
@@ -274,7 +356,7 @@ function onKeydown(event: KeyboardEvent) {
 	};
 
 	switch (event.key) {
-		case 'Enter':
+		case "Enter":
 			if (select.value !== -1) {
 				cancel();
 				(items.value[select.value] as any).click();
@@ -283,12 +365,12 @@ function onKeydown(event: KeyboardEvent) {
 			}
 			break;
 
-		case 'Escape':
+		case "Escape":
 			cancel();
 			props.close();
 			break;
 
-		case 'ArrowUp':
+		case "ArrowUp":
 			if (select.value !== -1) {
 				cancel();
 				selectPrev();
@@ -297,8 +379,8 @@ function onKeydown(event: KeyboardEvent) {
 			}
 			break;
 
-		case 'Tab':
-		case 'ArrowDown':
+		case "Tab":
+		case "ArrowDown":
 			cancel();
 			selectNext();
 			break;
@@ -322,19 +404,19 @@ function selectPrev() {
 
 function applySelect() {
 	for (const el of Array.from(items.value)) {
-		el.removeAttribute('data-selected');
+		el.removeAttribute("data-selected");
 	}
 
 	if (select.value !== -1) {
-		items.value[select.value].setAttribute('data-selected', 'true');
+		items.value[select.value].setAttribute("data-selected", "true");
 		(items.value[select.value] as any).focus();
 	}
 }
 
 function chooseUser() {
 	props.close();
-	os.selectUser().then(user => {
-		complete('user', user);
+	os.selectUser().then((user) => {
+		complete("user", user);
 		props.textarea.focus();
 	});
 }
@@ -347,28 +429,31 @@ onUpdated(() => {
 onMounted(() => {
 	setPosition();
 
-	props.textarea.addEventListener('keydown', onKeydown);
+	props.textarea.addEventListener("keydown", onKeydown);
 
-	for (const el of Array.from(document.querySelectorAll('body *'))) {
-		el.addEventListener('mousedown', onMousedown);
+	for (const el of Array.from(document.querySelectorAll("body *"))) {
+		el.addEventListener("mousedown", onMousedown);
 	}
 
 	nextTick(() => {
 		exec();
 
-		watch(() => props.q, () => {
+		watch(
+			() => props.q,
+			() => {
 				nextTick(() => {
 					exec();
 				});
-		});
+			}
+		);
 	});
 });
 
 onBeforeUnmount(() => {
-	props.textarea.removeEventListener('keydown', onKeydown);
+	props.textarea.removeEventListener("keydown", onKeydown);
 
-	for (const el of Array.from(document.querySelectorAll('body *'))) {
-		el.removeEventListener('mousedown', onMousedown);
+	for (const el of Array.from(document.querySelectorAll("body *"))) {
+		el.removeEventListener("mousedown", onMousedown);
 	}
 });
 </script>
@@ -399,7 +484,8 @@ onBeforeUnmount(() => {
 			font-size: 0.9em;
 			cursor: default;
 
-			&, * {
+			&,
+			* {
 				user-select: none;
 			}
 
@@ -412,10 +498,11 @@ onBeforeUnmount(() => {
 				background: var(--X3);
 			}
 
-			&[data-selected='true'] {
+			&[data-selected="true"] {
 				background: var(--accent);
 
-				&, * {
+				&,
+				* {
 					color: #fff !important;
 				}
 			}
@@ -423,7 +510,8 @@ onBeforeUnmount(() => {
 			&:active {
 				background: var(--accentDarken);
 
-				&, * {
+				&,
+				* {
 					color: #fff !important;
 				}
 			}
@@ -431,7 +519,6 @@ onBeforeUnmount(() => {
 	}
 
 	> .users > li {
-
 		.avatar {
 			min-width: 28px;
 			min-height: 28px;
@@ -447,7 +534,6 @@ onBeforeUnmount(() => {
 	}
 
 	> .emojis > li {
-
 		.emoji {
 			display: inline-block;
 			margin: 0 4px 0 0;
@@ -465,7 +551,6 @@ onBeforeUnmount(() => {
 	}
 
 	> .mfmTags > li {
-
 		.name {
 		}
 	}

packages/client/src/components/MkAvatars.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import * as os from '@/os';
+import { onMounted, ref } from "vue";
+import * as os from "@/os";
 
 const props = defineProps<{
 	userIds: string[];
@@ -17,8 +17,8 @@ const props = defineProps<{
 const users = ref([]);
 
 onMounted(async () => {
-	users.value = await os.api('users/show', {
-		userIds: props.userIds
+	users.value = await os.api("users/show", {
+		userIds: props.userIds,
 	});
 });
 </script>

packages/client/src/components/MkButton.vue

@@ -1,6 +1,7 @@
 <template>
 	<button
-	v-if="!link" class="bghgjjyj _button"
+		v-if="!link"
+		class="bghgjjyj _button"
 		:class="{ inline, primary, gradate, danger, rounded, full }"
 		:type="type"
 		@click="emit('click', $event)"
@@ -12,7 +13,8 @@
 		</div>
 	</button>
 	<MkA
-	v-else class="bghgjjyj _button"
+		v-else
+		class="bghgjjyj _button"
 		:class="{ inline, primary, gradate, danger, rounded, full }"
 		:to="to"
 		@mousedown="onMousedown"
@@ -25,10 +27,10 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
+import { nextTick, onMounted } from "vue";
 
 const props = defineProps<{
-	type?: 'button' | 'submit' | 'reset';
+	type?: "button" | "submit" | "reset";
 	primary?: boolean;
 	gradate?: boolean;
 	rounded?: boolean;
@@ -42,7 +44,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'click', payload: MouseEvent): void;
+	(ev: "click", payload: MouseEvent): void;
 }>();
 
 let el = $ref<HTMLElement | null>(null);
@@ -73,23 +75,28 @@ function onMousedown(evt: MouseEvent): void {
 	const target = evt.target! as HTMLElement;
 	const rect = target.getBoundingClientRect();
 
-	const ripple = document.createElement('div');
-	ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
-	ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
+	const ripple = document.createElement("div");
+	ripple.style.top = (evt.clientY - rect.top - 1).toString() + "px";
+	ripple.style.left = (evt.clientX - rect.left - 1).toString() + "px";
 
 	ripples!.appendChild(ripple);
 
 	const circleCenterX = evt.clientX - rect.left;
 	const circleCenterY = evt.clientY - rect.top;
 
-	const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY);
+	const scale = calcCircleScale(
+		target.clientWidth,
+		target.clientHeight,
+		circleCenterX,
+		circleCenterY
+	);
 
 	window.setTimeout(() => {
-		ripple.style.transform = 'scale(' + (scale / 2) + ')';
+		ripple.style.transform = "scale(" + scale / 2 + ")";
 	}, 1);
 	window.setTimeout(() => {
-		ripple.style.transition = 'all 1s ease';
-		ripple.style.opacity = '0';
+		ripple.style.transition = "all 1s ease";
+		ripple.style.opacity = "0";
 	}, 1000);
 	window.setTimeout(() => {
 		if (ripples) ripples.removeChild(ripple);
@@ -151,7 +158,11 @@ function onMousedown(evt: MouseEvent): void {
 	&.gradate {
 		font-weight: bold;
 		color: var(--fgOnAccent) !important;
-		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+		background: linear-gradient(
+			90deg,
+			var(--buttonGradateA),
+			var(--buttonGradateB)
+		);
 
 		&:not(:disabled):hover {
 			background: linear-gradient(90deg, var(--X8), var(--X8));
@@ -212,7 +223,7 @@ function onMousedown(evt: MouseEvent): void {
 			background: rgba(0, 0, 0, 0.1);
 			opacity: 1;
 			transform: scale(1);
-			transition: all 0.5s cubic-bezier(0,.5,0,1);
+			transition: all 0.5s cubic-bezier(0, 0.5, 0, 1);
 		}
 	}
 

packages/client/src/components/MkCaptcha.vue

@@ -6,21 +6,34 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
+import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
 
 type Captcha = {
-	render(container: string | Node, options: {
-		readonly [_ in 'sitekey' | 'theme' | 'type' | 'size' | 'tabindex' | 'callback' | 'expired' | 'expired-callback' | 'error-callback' | 'endpoint']?: unknown;
-	}): string;
+	render(
+		container: string | Node,
+		options: {
+			readonly [_ in
+				| "sitekey"
+				| "theme"
+				| "type"
+				| "size"
+				| "tabindex"
+				| "callback"
+				| "expired"
+				| "expired-callback"
+				| "error-callback"
+				| "endpoint"]?: unknown;
+		}
+	): string;
 	remove(id: string): void;
 	execute(id: string): void;
 	reset(id?: string): void;
 	getResponse(id: string): string;
 };
 
-type CaptchaProvider = 'hcaptcha' | 'recaptcha';
+type CaptchaProvider = "hcaptcha" | "recaptcha";
 
 type CaptchaContainer = {
 	readonly [_ in CaptchaProvider]?: Captcha;
@@ -37,7 +50,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:modelValue', v: string | null): void;
+	(ev: "update:modelValue", v: string | null): void;
 }>();
 
 const available = ref(false);
@@ -46,8 +59,10 @@ const captchaEl = ref<HTMLDivElement | undefined>();
 
 const variable = computed(() => {
 	switch (props.provider) {
-		case 'hcaptcha': return 'hcaptcha';
-		case 'recaptcha': return 'grecaptcha';
+		case "hcaptcha":
+			return "hcaptcha";
+		case "recaptcha":
+			return "grecaptcha";
 	}
 });
 
@@ -55,22 +70,30 @@ const loaded = !!window[variable.value];
 
 const src = computed(() => {
 	switch (props.provider) {
-		case 'hcaptcha': return 'https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off';
-		case 'recaptcha': return 'https://www.recaptcha.net/recaptcha/api.js?render=explicit';
+		case "hcaptcha":
+			return "https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off";
+		case "recaptcha":
+			return "https://www.recaptcha.net/recaptcha/api.js?render=explicit";
 	}
 });
 
-const captcha = computed<Captcha>(() => window[variable.value] || {} as unknown as Captcha);
+const captcha = computed<Captcha>(
+	() => window[variable.value] || ({} as unknown as Captcha)
+);
 
 if (loaded) {
 	available.value = true;
 } else {
-	(document.getElementById(props.provider) || document.head.appendChild(Object.assign(document.createElement('script'), {
+	(
+		document.getElementById(props.provider) ||
+		document.head.appendChild(
+			Object.assign(document.createElement("script"), {
 				async: true,
 				id: props.provider,
 				src: src.value,
-	})))
-		.addEventListener('load', () => available.value = true);
+			})
+		)
+	).addEventListener("load", () => (available.value = true));
 }
 
 function reset() {
@@ -81,10 +104,10 @@ function requestRender() {
 	if (captcha.value.render && captchaEl.value instanceof Element) {
 		captcha.value.render(captchaEl.value, {
 			sitekey: props.sitekey,
-			theme: defaultStore.state.darkMode ? 'dark' : 'light',
+			theme: defaultStore.state.darkMode ? "dark" : "light",
 			callback: callback,
-			'expired-callback': callback,
-			'error-callback': callback,
+			"expired-callback": callback,
+			"error-callback": callback,
 		});
 	} else {
 		window.setTimeout(requestRender, 1);
@@ -92,7 +115,7 @@ function requestRender() {
 }
 
 function callback(response?: string) {
-	emit('update:modelValue', typeof response === 'string' ? response : null);
+	emit("update:modelValue", typeof response === "string" ? response : null);
 }
 
 onMounted(() => {
@@ -110,5 +133,4 @@ onBeforeUnmount(() => {
 defineExpose({
 	reset,
 });
-
 </script>

packages/client/src/components/MkChannelFollowButton.vue

@@ -1,34 +1,41 @@
 <template>
-<button class="hdcaacmi _button"
+	<button
+		class="hdcaacmi _button"
 		:class="{ wait, active: isFollowing, full }"
 		:disabled="wait"
 		@click="onClick"
 	>
 		<template v-if="!wait">
 			<template v-if="isFollowing">
-			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ph-minus ph-bold ph-lg"></i>
+				<span v-if="full">{{ i18n.ts.unfollow }}</span
+				><i class="ph-minus ph-bold ph-lg"></i>
 			</template>
 			<template v-else>
-			<span v-if="full">{{ i18n.ts.follow }}</span><i class="ph-plus ph-bold ph-lg"></i>
+				<span v-if="full">{{ i18n.ts.follow }}</span
+				><i class="ph-plus ph-bold ph-lg"></i>
 			</template>
 		</template>
 		<template v-else>
-		<span v-if="full">{{ i18n.ts.processing }}</span><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
+			<span v-if="full">{{ i18n.ts.processing }}</span
+			><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
 		</template>
 	</button>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		channel: Record<string, any>;
 		full?: boolean;
-}>(), {
+	}>(),
+	{
 		full: false,
-});
+	}
+);
 
 const isFollowing = ref<boolean>(props.channel.isFollowing);
 const wait = ref(false);
@@ -38,13 +45,13 @@ async function onClick() {
 
 	try {
 		if (isFollowing.value) {
-			await os.api('channels/unfollow', {
-				channelId: props.channel.id
+			await os.api("channels/unfollow", {
+				channelId: props.channel.id,
 			});
 			isFollowing.value = false;
 		} else {
-			await os.api('channels/follow', {
-				channelId: props.channel.id
+			await os.api("channels/follow", {
+				channelId: props.channel.id,
 			});
 			isFollowing.value = true;
 		}

packages/client/src/components/MkChannelPreview.vue

@@ -2,11 +2,17 @@
 	<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
 		<div class="banner" :style="bannerStyle">
 			<div class="fade"></div>
-		<div class="name"><i class="ph-television ph-bold ph-lg"></i> {{ channel.name }}</div>
+			<div class="name">
+				<i class="ph-television ph-bold ph-lg"></i> {{ channel.name }}
+			</div>
 			<div class="status">
 				<div>
 					<i class="ph-users ph-bold ph-lg ph-fw ph-lg"></i>
-				<I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;">
+					<I18n
+						:src="i18n.ts._channel.usersCount"
+						tag="span"
+						style="margin-left: 4px"
+					>
 						<template #n>
 							<b>{{ channel.usersCount }}</b>
 						</template>
@@ -14,7 +20,11 @@
 				</div>
 				<div>
 					<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i>
-				<I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;">
+					<I18n
+						:src="i18n.ts._channel.notesCount"
+						tag="span"
+						style="margin-left: 4px"
+					>
 						<template #n>
 							<b>{{ channel.notesCount }}</b>
 						</template>
@@ -23,7 +33,13 @@
 			</div>
 		</div>
 		<article v-if="channel.description">
-		<p :title="channel.description">{{ channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description }}</p>
+			<p :title="channel.description">
+				{{
+					channel.description.length > 85
+						? channel.description.slice(0, 85) + "…"
+						: channel.description
+				}}
+			</p>
 		</article>
 		<footer>
 			<span v-if="channel.lastNotedAt">
@@ -34,8 +50,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { i18n } from '@/i18n';
+import { computed } from "vue";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	channel: Record<string, any>;
@@ -45,7 +61,7 @@ const bannerStyle = computed(() => {
 	if (props.channel.bannerUrl) {
 		return { backgroundImage: `url(${props.channel.bannerUrl})` };
 	} else {
-		return { backgroundColor: '#4c5e6d' };
+		return { backgroundColor: "#4c5e6d" };
 	}
 });
 </script>
@@ -155,5 +171,4 @@ const bannerStyle = computed(() => {
 		}
 	}
 }
-
 </style>

packages/client/src/components/MkChartTooltip.vue

@@ -1,10 +1,25 @@
 <template>
-<MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :max-width="340" :direction="'top'" :inner-margin="16" @closed="emit('closed')">
+	<MkTooltip
+		ref="tooltip"
+		:showing="showing"
+		:x="x"
+		:y="y"
+		:max-width="340"
+		:direction="'top'"
+		:inner-margin="16"
+		@closed="emit('closed')"
+	>
 		<div v-if="title || series" class="qpcyisrl">
 			<div v-if="title" class="title">{{ title }}</div>
 			<template v-if="series">
 				<div v-for="x in series" class="series">
-				<span class="color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
+					<span
+						class="color"
+						:style="{
+							background: x.backgroundColor,
+							borderColor: x.borderColor,
+						}"
+					></span>
 					<span>{{ x.text }}</span>
 				</div>
 			</template>
@@ -13,8 +28,8 @@
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkTooltip from './MkTooltip.vue';
+import {} from "vue";
+import MkTooltip from "./MkTooltip.vue";
 
 const props = defineProps<{
 	showing: boolean;
@@ -29,7 +44,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 </script>
 

packages/client/src/components/MkChatPreview.vue

@@ -4,7 +4,9 @@
 		tabindex="-1"
 		:class="{
 			isMe: isMe(message),
-		isRead: message.groupId ? message.reads.includes($i?.id) : message.isRead,
+			isRead: message.groupId
+				? message.reads.includes($i?.id)
+				: message.isRead,
 		}"
 		:to="
 			message.groupId
@@ -31,14 +33,28 @@
 				<MkTime :time="message.createdAt" class="time" />
 			</header>
 			<header v-else>
-			<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
-			<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
+				<span class="name"
+					><MkUserName
+						:user="
+							isMe(message) ? message.recipient : message.user
+						"
+				/></span>
+				<span class="username"
+					>@{{
+						acct(isMe(message) ? message.recipient : message.user)
+					}}</span
+				>
 				<MkTime :time="message.createdAt" class="time" />
 			</header>
 			<div class="body">
 				<p class="text">
-				<span v-if="isMe(message)" class="me">{{ i18n.ts.you }}: </span>
-				<Mfm v-if="message.text != null && message.text.length > 0" :text="message.text"/>
+					<span v-if="isMe(message)" class="me"
+						>{{ i18n.ts.you }}:
+					</span>
+					<Mfm
+						v-if="message.text != null && message.text.length > 0"
+						:text="message.text"
+					/>
 					<span v-else> 📎</span>
 				</p>
 			</div>
@@ -47,10 +63,10 @@
 </template>
 
 <script lang="ts" setup>
-import * as Acct from 'calckey-js/built/acct';
-import { i18n } from '@/i18n';
-import { acct } from '@/filters/user';
-import { $i } from '@/account';
+import * as Acct from "calckey-js/built/acct";
+import { i18n } from "@/i18n";
+import { acct } from "@/filters/user";
+import { $i } from "@/account";
 
 const getAcct = Acct.toString;
 
@@ -138,7 +154,6 @@ function isMe(message): boolean {
 		}
 
 		> .body {
-
 			> .text {
 				display: block;
 				margin: 0 0 0 0;

packages/client/src/components/MkCheatSheetDialog.vue

@@ -16,13 +16,13 @@
 </template>
 
 <script lang="ts" setup>
-import XModalWindow from '@/components/MkModalWindow.vue';
-import XCheatSheet from '@/pages/mfm-cheat-sheet.vue';
-import { i18n } from '@/i18n';
+import XModalWindow from "@/components/MkModalWindow.vue";
+import XCheatSheet from "@/pages/mfm-cheat-sheet.vue";
+import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
-	(ev: 'done'): void;
-	(ev: 'closed'): void;
+	(ev: "done"): void;
+	(ev: "closed"): void;
 }>();
 
 const dialog = $ref<InstanceType<typeof XModalWindow>>();
@@ -41,6 +41,4 @@ function close(res) {
 .fade-leave-to {
 	opacity: 0;
 }
-
 </style>
-

packages/client/src/components/MkCode.core.vue

@@ -1,12 +1,15 @@
 <template>
 	<code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code>
-<pre v-else :class="`language-${prismLang}`"><code :class="`language-${prismLang}`" v-html="html"></code></pre>
+	<pre
+		v-else
+		:class="`language-${prismLang}`"
+	><code :class="`language-${prismLang}`" v-html="html"></code></pre>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import Prism from 'prismjs';
-import 'prismjs/themes/prism-okaidia.css';
+import { computed } from "vue";
+import Prism from "prismjs";
+import "prismjs/themes/prism-okaidia.css";
 
 const props = defineProps<{
 	code: string;
@@ -14,6 +17,14 @@ const props = defineProps<{
 	inline?: boolean;
 }>();
 
-const prismLang = computed(() => Prism.languages[props.lang] ? props.lang : 'js');
-const html = computed(() => Prism.highlight(props.code, Prism.languages[prismLang.value], prismLang.value));
+const prismLang = computed(() =>
+	Prism.languages[props.lang] ? props.lang : "js"
+);
+const html = computed(() =>
+	Prism.highlight(
+		props.code,
+		Prism.languages[prismLang.value],
+		prismLang.value
+	)
+);
 </script>

packages/client/src/components/MkCode.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
+import { defineAsyncComponent } from "vue";
 
 defineProps<{
 	code: string;
@@ -11,5 +11,7 @@ defineProps<{
 	inline?: boolean;
 }>();
 
-const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue'));
+const XCode = defineAsyncComponent(
+	() => import("@/components/MkCode.core.vue")
+);
 </script>

packages/client/src/components/MkContainer.vue

@@ -1,12 +1,30 @@
 <template>
-<div v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
+	<div
+		v-size="{ max: [380] }"
+		class="ukygtjoj _panel"
+		:class="{
+			naked,
+			thin,
+			hideHeader: !showHeader,
+			scrollable,
+			closed: !showBody,
+		}"
+	>
 		<header v-if="showHeader" ref="header">
 			<div class="title"><slot name="header"></slot></div>
 			<div class="sub">
 				<slot name="func"></slot>
-			<button v-if="foldable" class="_button" @click="() => showBody = !showBody">
-				<template v-if="showBody"><i class="ph-caret-up ph-bold ph-lg"></i></template>
-				<template v-else><i class="ph-caret-down ph-bold ph-lg"></i></template>
+				<button
+					v-if="foldable"
+					class="_button"
+					@click="() => (showBody = !showBody)"
+				>
+					<template v-if="showBody"
+						><i class="ph-caret-up ph-bold ph-lg"></i
+					></template>
+					<template v-else
+						><i class="ph-caret-down ph-bold ph-lg"></i
+					></template>
 				</button>
 			</div>
 		</header>
@@ -17,9 +35,23 @@
 			@leave="leave"
 			@after-leave="afterLeave"
 		>
-		<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
+			<div
+				v-show="showBody"
+				ref="content"
+				class="content"
+				:class="{ omitted }"
+			>
 				<slot></slot>
-			<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
+				<button
+					v-if="omitted"
+					class="fade _button"
+					@click="
+						() => {
+							ignoreOmit = true;
+							omitted = false;
+						}
+					"
+				>
 					<span>{{ i18n.ts.showMore }}</span>
 				</button>
 			</div>
@@ -28,8 +60,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	props: {
@@ -78,22 +110,29 @@ export default defineComponent({
 		};
 	},
 	mounted() {
-		this.$watch('showBody', showBody => {
-			const headerHeight = this.showHeader ? this.$refs.header.offsetHeight : 0;
+		this.$watch(
+			"showBody",
+			(showBody) => {
+				const headerHeight = this.showHeader
+					? this.$refs.header.offsetHeight
+					: 0;
 				this.$el.style.minHeight = `${headerHeight}px`;
 				if (showBody) {
-				this.$el.style.flexBasis = 'auto';
+					this.$el.style.flexBasis = "auto";
 				} else {
 					this.$el.style.flexBasis = `${headerHeight}px`;
 				}
-		}, {
+			},
+			{
 				immediate: true,
-		});
+			}
+		);
 
-		this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
+		this.$el.style.setProperty("--maxHeight", this.maxHeight + "px");
 
 		const calcOmit = () => {
-			if (this.omitted || this.ignoreOmit || this.maxHeight == null) return;
+			if (this.omitted || this.ignoreOmit || this.maxHeight == null)
+				return;
 			const height = this.$refs.content.offsetHeight;
 			this.omitted = height > this.maxHeight;
 		};
@@ -113,14 +152,14 @@ export default defineComponent({
 			const elementHeight = el.getBoundingClientRect().height;
 			el.style.height = 0;
 			el.offsetHeight; // reflow
-			el.style.height = elementHeight + 'px';
+			el.style.height = elementHeight + "px";
 		},
 		afterEnter(el) {
 			el.style.height = null;
 		},
 		leave(el) {
 			const elementHeight = el.getBoundingClientRect().height;
-			el.style.height = elementHeight + 'px';
+			el.style.height = elementHeight + "px";
 			el.offsetHeight; // reflow
 			el.style.height = 0;
 		},
@@ -132,7 +171,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.container-toggle-enter-active, .container-toggle-leave-active {
+.container-toggle-enter-active,
+.container-toggle-leave-active {
 	overflow-y: hidden;
 	transition: opacity 0.5s, height 0.5s !important;
 }
@@ -236,7 +276,8 @@ export default defineComponent({
 		}
 	}
 
-	&.max-width_380px, &.thin {
+	&.max-width_380px,
+	&.thin {
 		> header {
 			> .title {
 				padding: 8px 10px;

packages/client/src/components/MkContextMenu.vue

@@ -1,17 +1,22 @@
 <template>
 	<transition :name="$store.state.animation ? 'fade' : ''" appear>
-	<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
+		<div
+			ref="rootEl"
+			class="nvlagfpb"
+			:style="{ zIndex }"
+			@contextmenu.prevent.stop="() => {}"
+		>
 			<MkMenu :items="items" :align="'left'" @close="$emit('closed')" />
 		</div>
 	</transition>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import MkMenu from './MkMenu.vue';
-import { MenuItem } from './types/menu.vue';
-import contains from '@/scripts/contains';
-import * as os from '@/os';
+import { onMounted, onBeforeUnmount } from "vue";
+import MkMenu from "./MkMenu.vue";
+import { MenuItem } from "./types/menu.vue";
+import contains from "@/scripts/contains";
+import * as os from "@/os";
 
 const props = defineProps<{
 	items: MenuItem[];
@@ -19,12 +24,12 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 let rootEl = $ref<HTMLDivElement>();
 
-let zIndex = $ref<number>(os.claimZIndex('high'));
+let zIndex = $ref<number>(os.claimZIndex("high"));
 
 onMounted(() => {
 	let left = props.ev.pageX + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
@@ -52,19 +57,19 @@ onMounted(() => {
 	rootEl.style.top = `${top}px`;
 	rootEl.style.left = `${left}px`;
 
-	for (const el of Array.from(document.querySelectorAll('body *'))) {
-		el.addEventListener('mousedown', onMousedown);
+	for (const el of Array.from(document.querySelectorAll("body *"))) {
+		el.addEventListener("mousedown", onMousedown);
 	}
 });
 
 onBeforeUnmount(() => {
-	for (const el of Array.from(document.querySelectorAll('body *'))) {
-		el.removeEventListener('mousedown', onMousedown);
+	for (const el of Array.from(document.querySelectorAll("body *"))) {
+		el.removeEventListener("mousedown", onMousedown);
 	}
 });
 
 function onMousedown(evt: Event) {
-	if (!contains(rootEl, evt.target) && (rootEl !== evt.target)) emit('closed');
+	if (!contains(rootEl, evt.target) && rootEl !== evt.target) emit("closed");
 }
 </script>
 
@@ -73,12 +78,15 @@ function onMousedown(evt: Event) {
 	position: absolute;
 }
 
-.fade-enter-active, .fade-leave-active {
-	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
+		transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 	transform-origin: left top;
 }
 
-.fade-enter-from, .fade-leave-to {
+.fade-enter-from,
+.fade-leave-to {
 	opacity: 0;
 	transform: scale(0.9);
 }

packages/client/src/components/MkCropperDialog.vue

@@ -11,14 +11,22 @@
 	>
 		<template #header>{{ i18n.ts.cropImage }}</template>
 		<template #default="{ width, height }">
-		<div class="mk-cropper-dialog" :style="`--vw: ${width}px; --vh: ${height}px;`">
+			<div
+				class="mk-cropper-dialog"
+				:style="`--vw: ${width}px; --vh: ${height}px;`"
+			>
 				<Transition name="fade">
 					<div v-if="loading" class="loading">
 						<MkLoading />
 					</div>
 				</Transition>
 				<div class="container">
-				<img ref="imgEl" :src="imgUrl" style="display: none;" @load="onImageLoad">
+					<img
+						ref="imgEl"
+						:src="imgUrl"
+						style="display: none"
+						@load="onImageLoad"
+					/>
 				</div>
 			</div>
 		</template>
@@ -26,22 +34,22 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
-import * as misskey from 'calckey-js';
-import Cropper from 'cropperjs';
-import tinycolor from 'tinycolor2';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { defaultStore } from '@/store';
-import { apiUrl, url } from '@/config';
-import { query } from '@/scripts/url';
-import { i18n } from '@/i18n';
+import { nextTick, onMounted } from "vue";
+import * as misskey from "calckey-js";
+import Cropper from "cropperjs";
+import tinycolor from "tinycolor2";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { defaultStore } from "@/store";
+import { apiUrl, url } from "@/config";
+import { query } from "@/scripts/url";
+import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
-	(ev: 'ok', cropped: misskey.entities.DriveFile): void;
-	(ev: 'cancel'): void;
-	(ev: 'closed'): void;
+	(ev: "ok", cropped: misskey.entities.DriveFile): void;
+	(ev: "cancel"): void;
+	(ev: "closed"): void;
 }>();
 
 const props = defineProps<{
@@ -60,22 +68,22 @@ let loading = $ref(true);
 const ok = async () => {
 	const promise = new Promise<misskey.entities.DriveFile>(async (res) => {
 		const croppedCanvas = await cropper?.getCropperSelection()?.$toCanvas();
-		croppedCanvas.toBlob(blob => {
+		croppedCanvas.toBlob((blob) => {
 			const formData = new FormData();
-			formData.append('file', blob);
+			formData.append("file", blob);
 			if (defaultStore.state.uploadFolder) {
-				formData.append('folderId', defaultStore.state.uploadFolder);
+				formData.append("folderId", defaultStore.state.uploadFolder);
 			}
 
-			fetch(apiUrl + '/drive/files/create', {
-				method: 'POST',
+			fetch(apiUrl + "/drive/files/create", {
+				method: "POST",
 				body: formData,
 				headers: {
 					authorization: `Bearer ${$i.token}`,
 				},
 			})
-			.then(response => response.json())
-			.then(f => {
+				.then((response) => response.json())
+				.then((f) => {
 					res(f);
 				});
 		});
@@ -85,12 +93,12 @@ const ok = async () => {
 
 	const f = await promise;
 
-	emit('ok', f);
+	emit("ok", f);
 	dialogEl.close();
 };
 
 const cancel = () => {
-	emit('cancel');
+	emit("cancel");
 	dialogEl.close();
 };
 
@@ -98,31 +106,32 @@ const onImageLoad = () => {
 	loading = false;
 
 	if (cropper) {
-		cropper.getCropperImage()!.$center('contain');
+		cropper.getCropperImage()!.$center("contain");
 		cropper.getCropperSelection()!.$center();
 	}
 };
 
 onMounted(() => {
-	cropper = new Cropper(imgEl, {
-	});
+	cropper = new Cropper(imgEl, {});
 
 	const computedStyle = getComputedStyle(document.documentElement);
 
 	const selection = cropper.getCropperSelection()!;
-	selection.themeColor = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
+	selection.themeColor = tinycolor(
+		computedStyle.getPropertyValue("--accent")
+	).toHexString();
 	selection.aspectRatio = props.aspectRatio;
 	selection.initialAspectRatio = props.aspectRatio;
 	selection.outlined = true;
 
 	window.setTimeout(() => {
-		cropper.getCropperImage()!.$center('contain');
+		cropper.getCropperImage()!.$center("contain");
 		selection.$center();
 	}, 100);
 
 	// モーダルオープンアニメーションが終わったあとで再度調整
 	window.setTimeout(() => {
-		cropper.getCropperImage()!.$center('contain');
+		cropper.getCropperImage()!.$center("contain");
 		selection.$center();
 	}, 500);
 });

packages/client/src/components/MkCwButton.vue

@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { length } from 'stringz';
-import * as misskey from 'calckey-js';
-import { concat } from '@/scripts/array';
-import { i18n } from '@/i18n';
+import { computed } from "vue";
+import { length } from "stringz";
+import * as misskey from "calckey-js";
+import { concat } from "@/scripts/array";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	modelValue: boolean;
@@ -18,19 +18,23 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:modelValue', v: boolean): void;
+	(ev: "update:modelValue", v: boolean): void;
 }>();
 
 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.ts.poll] : []
-	] as string[][]).join(' / ');
+		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.ts.poll] : [],
+	] as string[][]).join(" / ");
 });
 
 const toggle = () => {
-	emit('update:modelValue', !props.modelValue);
+	emit("update:modelValue", !props.modelValue);
 };
 </script>
 
@@ -60,11 +64,11 @@ const toggle = () => {
 		margin-left: 4px;
 
 		&:before {
-			content: '(';
+			content: "(";
 		}
 
 		&:after {
-			content: ')';
+			content: ")";
 		}
 	}
 }

packages/client/src/components/MkDateSeparatedList.vue

@@ -1,19 +1,21 @@
 <script lang="ts">
-import { defineComponent, h, PropType, TransitionGroup } from 'vue';
-import MkAd from '@/components/global/MkAd.vue';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
+import { defineComponent, h, PropType, TransitionGroup } from "vue";
+import MkAd from "@/components/global/MkAd.vue";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
 export default defineComponent({
 	props: {
 		items: {
-			type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>,
+			type: Array as PropType<
+				{ id: string; createdAt: string; _shouldInsertAd_: boolean }[]
+			>,
 			required: true,
 		},
 		direction: {
 			type: String,
 			required: false,
-			default: 'down',
+			default: "down",
 		},
 		reversed: {
 			type: Boolean,
@@ -36,7 +38,7 @@ export default defineComponent({
 		function getDateText(time: string) {
 			const date = new Date(time).getDate();
 			const month = new Date(time).getMonth() + 1;
-			return i18n.t('monthAndDay', {
+			return i18n.t("monthAndDay", {
 				month: month.toString(),
 				day: date.toString(),
 			});
@@ -44,7 +46,8 @@ export default defineComponent({
 
 		if (props.items.length === 0) return;
 
-		const renderChildren = () => props.items.map((item, i) => {
+		const renderChildren = () =>
+			props.items.map((item, i) => {
 				if (!slots || !slots.default) return;
 
 				const el = slots.default({
@@ -54,54 +57,70 @@ export default defineComponent({
 
 				if (
 					i !== props.items.length - 1 &&
-				new Date(item.createdAt).getDate() !== new Date(props.items[i + 1].createdAt).getDate()
+					new Date(item.createdAt).getDate() !==
+						new Date(props.items[i + 1].createdAt).getDate()
 				) {
-				const separator = h('div', {
-					class: 'separator',
-					key: item.id + ':separator',
-				}, h('p', {
-					class: 'date',
-				}, [
-					h('span', [
-						h('i', {
-							class: 'ph-caret-up ph-bold ph-lg icon',
+					const separator = h(
+						"div",
+						{
+							class: "separator",
+							key: item.id + ":separator",
+						},
+						h(
+							"p",
+							{
+								class: "date",
+							},
+							[
+								h("span", [
+									h("i", {
+										class: "ph-caret-up ph-bold ph-lg icon",
 									}),
 									getDateText(item.createdAt),
 								]),
-					h('span', [
+								h("span", [
 									getDateText(props.items[i + 1].createdAt),
-						h('i', {
-							class: 'ph-caret-down ph-bold ph-lg icon',
+									h("i", {
+										class: "ph-caret-down ph-bold ph-lg icon",
 									}),
 								]),
-				]));
+							]
+						)
+					);
 
 					return [el, separator];
 				} else {
 					if (props.ad && item._shouldInsertAd_) {
-					return [h(MkAd, {
-						class: 'a', // advertiseの意(ブロッカー対策)
-						key: item.id + ':ad',
-						prefer: ['horizontal', 'horizontal-big'],
-					}), el];
+						return [
+							h(MkAd, {
+								class: "a", // advertiseの意(ブロッカー対策)
+								key: item.id + ":ad",
+								prefer: ["horizontal", "horizontal-big"],
+							}),
+							el,
+						];
 					} else {
 						return el;
 					}
 				}
 			});
 
-		return () => h(
-			defaultStore.state.animation ? TransitionGroup : 'div',
-			defaultStore.state.animation ? {
-				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
-				name: 'list',
-				tag: 'div',
-				'data-direction': props.direction,
-				'data-reversed': props.reversed ? 'true' : 'false',
-			} : {
-				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
+		return () =>
+			h(
+				defaultStore.state.animation ? TransitionGroup : "div",
+				defaultStore.state.animation
+					? {
+							class: "sqadhkmv" + (props.noGap ? " noGap" : ""),
+							name: "list",
+							tag: "div",
+							"data-direction": props.direction,
+							"data-reversed": props.reversed ? "true" : "false",
+					  }
+					: {
+							class: "sqadhkmv" + (props.noGap ? " noGap" : ""),
 					  },
-			{ default: renderChildren });
+				{ default: renderChildren }
+			);
 	},
 });
 </script>
@@ -121,7 +140,8 @@ export default defineComponent({
 	}
 
 	> .list-enter-active {
-		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
+			opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
 	}
 
 	&[data-direction="up"] {

packages/client/src/components/MkDialog.vue

@@ -1,63 +1,171 @@
 <template>
-	<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="emit('closed')">
+	<MkModal
+		ref="modal"
+		:prefer-type="'dialog'"
+		:z-priority="'high'"
+		@click="done(true)"
+		@closed="emit('closed')"
+	>
 		<div :class="$style.root">
 			<div v-if="icon" :class="$style.icon">
 				<i :class="icon"></i>
 			</div>
-			<div v-else-if="!input && !select" :class="[$style.icon, $style['type_' + type]]">
-				<i v-if="type === 'success'" :class="$style.iconInner" class="ph-check ph-bold ph-lg"></i>
-				<i v-else-if="type === 'error'" :class="$style.iconInner" class="ph-circle-wavy-warning ph-bold ph-lg"></i>
-				<i v-else-if="type === 'warning'" :class="$style.iconInner" class="ph-warning ph-bold ph-lg"></i>
-				<i v-else-if="type === 'info'" :class="$style.iconInner" class="ph-info ph-bold ph-lg"></i>
-				<i v-else-if="type === 'question'" :class="$style.iconInner" class="ph-circle-question ph-bold ph-lg"></i>
-				<MkLoading v-else-if="type === 'waiting'" :class="$style.iconInner" :em="true"/>
+			<div
+				v-else-if="!input && !select"
+				:class="[$style.icon, $style['type_' + type]]"
+			>
+				<i
+					v-if="type === 'success'"
+					:class="$style.iconInner"
+					class="ph-check ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="type === 'error'"
+					:class="$style.iconInner"
+					class="ph-circle-wavy-warning ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="type === 'warning'"
+					:class="$style.iconInner"
+					class="ph-warning ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="type === 'info'"
+					:class="$style.iconInner"
+					class="ph-info ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="type === 'question'"
+					:class="$style.iconInner"
+					class="ph-circle-question ph-bold ph-lg"
+				></i>
+				<MkLoading
+					v-else-if="type === 'waiting'"
+					:class="$style.iconInner"
+					:em="true"
+				/>
 			</div>
-			<header v-if="title" :class="$style.title"><Mfm :text="title"/></header>
-			<header v-if="title == null && (input && input.type === 'password')" :class="$style.title"><Mfm :text="i18n.ts.password"/></header>
+			<header v-if="title" :class="$style.title">
+				<Mfm :text="title" />
+			</header>
+			<header
+				v-if="title == null && input && input.type === 'password'"
+				:class="$style.title"
+			>
+				<Mfm :text="i18n.ts.password" />
+			</header>
 			<div v-if="text" :class="$style.text"><Mfm :text="text" /></div>
-			<MkInput v-if="input && input.type !== 'paragraph'" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" @keydown="onInputKeydown">
-				<template v-if="input.type === 'password'" #prefix><i class="ph-password ph-bold ph-lg"></i></template>
+			<MkInput
+				v-if="input && input.type !== 'paragraph'"
+				v-model="inputValue"
+				autofocus
+				:type="input.type || 'text'"
+				:placeholder="input.placeholder || undefined"
+				@keydown="onInputKeydown"
+			>
+				<template v-if="input.type === 'password'" #prefix
+					><i class="ph-password ph-bold ph-lg"></i
+				></template>
 			</MkInput>
-			<MkTextarea v-if="input && input.type === 'paragraph'" v-model="inputValue" autofocus :type="paragraph" :placeholder="input.placeholder || undefined">
+			<MkTextarea
+				v-if="input && input.type === 'paragraph'"
+				v-model="inputValue"
+				autofocus
+				:type="paragraph"
+				:placeholder="input.placeholder || undefined"
+			>
 			</MkTextarea>
 			<MkSelect v-if="select" v-model="selectedValue" autofocus>
 				<template v-if="select.items">
-					<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
+					<option v-for="item in select.items" :value="item.value">
+						{{ item.text }}
+					</option>
 				</template>
 				<template v-else>
-					<optgroup v-for="groupedItem in select.groupedItems" :label="groupedItem.label">
-						<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
+					<optgroup
+						v-for="groupedItem in select.groupedItems"
+						:label="groupedItem.label"
+					>
+						<option
+							v-for="item in groupedItem.items"
+							:value="item.value"
+						>
+							{{ item.text }}
+						</option>
 					</optgroup>
 				</template>
 			</MkSelect>
-			<div v-if="(showOkButton || showCancelButton) && !actions" :class="$style.buttons">
+			<div
+				v-if="(showOkButton || showCancelButton) && !actions"
+				:class="$style.buttons"
+			>
 				<div v-if="!isYesNo">
-					<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt }}</MkButton>
-					<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+					<MkButton
+						v-if="showOkButton"
+						inline
+						primary
+						:autofocus="!input && !select"
+						@click="ok"
+						>{{
+							showCancelButton || input || select
+								? i18n.ts.ok
+								: i18n.ts.gotIt
+						}}</MkButton
+					>
+					<MkButton
+						v-if="showCancelButton || input || select"
+						inline
+						@click="cancel"
+						>{{ i18n.ts.cancel }}</MkButton
+					>
 				</div>
 				<div v-else>
-					<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ i18n.ts.yes }}</MkButton>
-					<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.no }}</MkButton>
+					<MkButton
+						v-if="showOkButton"
+						inline
+						primary
+						:autofocus="!input && !select"
+						@click="ok"
+						>{{ i18n.ts.yes }}</MkButton
+					>
+					<MkButton
+						v-if="showCancelButton || input || select"
+						inline
+						@click="cancel"
+						>{{ i18n.ts.no }}</MkButton
+					>
 				</div>
 			</div>
 			<div v-if="actions" :class="$style.buttons">
-				<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); modal?.close(); }">{{ action.text }}</MkButton>
+				<MkButton
+					v-for="action in actions"
+					:key="action.text"
+					inline
+					:primary="action.primary"
+					@click="
+						() => {
+							action.callback();
+							modal?.close();
+						}
+					"
+					>{{ action.text }}</MkButton
+				>
 			</div>
 		</div>
 	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkSelect from '@/components/form/select.vue';
-import { i18n } from '@/i18n';
+import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import MkModal from "@/components/MkModal.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkSelect from "@/components/form/select.vue";
+import { i18n } from "@/i18n";
 
 type Input = {
-	type: HTMLInputElement['type'];
+	type: HTMLInputElement["type"];
 	placeholder?: string | null;
 	default: any | null;
 };
@@ -77,8 +185,15 @@ type Select = {
 	default: string | null;
 };
 
-const props = withDefaults(defineProps<{
-	type?: 'success' | 'error' | 'warning' | 'info' | 'question' | 'waiting';
+const props = withDefaults(
+	defineProps<{
+		type?:
+			| "success"
+			| "error"
+			| "warning"
+			| "info"
+			| "question"
+			| "waiting";
 		title: string;
 		text?: string;
 		input?: Input;
@@ -86,7 +201,7 @@ const props = withDefaults(defineProps<{
 		icon?: string;
 		actions?: {
 			text: string;
-		primary?: boolean,
+			primary?: boolean;
 			callback: (...args: any[]) => void;
 		}[];
 		showOkButton?: boolean;
@@ -96,18 +211,20 @@ const props = withDefaults(defineProps<{
 		cancelableByBgClick?: boolean;
 		okText?: string;
 		cancelText?: string;
-}>(), {
-	type: 'info',
+	}>(),
+	{
+		type: "info",
 		showOkButton: true,
 		showCancelButton: false,
 		isYesNo: false,
 
 		cancelableByBgClick: true,
-});
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'done', v: { canceled: boolean; result: any }): void;
-	(ev: 'closed'): void;
+	(ev: "done", v: { canceled: boolean; result: any }): void;
+	(ev: "closed"): void;
 }>();
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
@@ -116,17 +233,18 @@ const inputValue = ref(props.input?.default || null);
 const selectedValue = ref(props.select?.default || null);
 
 function done(canceled: boolean, result?) {
-	emit('done', { canceled, result });
+	emit("done", { canceled, result });
 	modal.value?.close();
 }
 
 async function ok() {
 	if (!props.showOkButton) return;
 
-	const result =
-		props.input ? inputValue.value :
-		props.select ? selectedValue.value :
-		true;
+	const result = props.input
+		? inputValue.value
+		: props.select
+		? selectedValue.value
+		: true;
 	done(false, result);
 }
 
@@ -139,11 +257,11 @@ function onBgClick() {
 }
 */
 function onKeydown(evt: KeyboardEvent) {
-	if (evt.key === 'Escape') cancel();
+	if (evt.key === "Escape") cancel();
 }
 
 function onInputKeydown(evt: KeyboardEvent) {
-	if (evt.key === 'Enter') {
+	if (evt.key === "Enter") {
 		evt.preventDefault();
 		evt.stopPropagation();
 		ok();
@@ -151,11 +269,11 @@ function onInputKeydown(evt: KeyboardEvent) {
 }
 
 onMounted(() => {
-	document.addEventListener('keydown', onKeydown);
+	document.addEventListener("keydown", onKeydown);
 });
 
 onBeforeUnmount(() => {
-	document.removeEventListener('keydown', onKeydown);
+	document.removeEventListener("keydown", onKeydown);
 });
 </script>
 

packages/client/src/components/MkDigitalClock.vue

@@ -11,23 +11,26 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, ref, watch } from 'vue';
+import { onUnmounted, ref, watch } from "vue";
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		showS?: boolean;
 		showMs?: boolean;
 		offset?: number;
-}>(), {
+	}>(),
+	{
 		showS: true,
 		showMs: false,
 		offset: 0 - new Date().getTimezoneOffset(),
-});
+	}
+);
 
 let intervalId;
-const hh = ref('');
-const mm = ref('');
-const ss = ref('');
-const ms = ref('');
+const hh = ref("");
+const mm = ref("");
+const ss = ref("");
+const ms = ref("");
 const showColon = ref(false);
 let prevSec: number | null = null;
 
@@ -41,21 +44,29 @@ watch(showColon, (v) => {
 
 const tick = () => {
 	const now = new Date();
-	now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
-	hh.value = now.getHours().toString().padStart(2, '0');
-	mm.value = now.getMinutes().toString().padStart(2, '0');
-	ss.value = now.getSeconds().toString().padStart(2, '0');
-	ms.value = Math.floor(now.getMilliseconds() / 10).toString().padStart(2, '0');
+	now.setMinutes(
+		now.getMinutes() + (new Date().getTimezoneOffset() + props.offset)
+	);
+	hh.value = now.getHours().toString().padStart(2, "0");
+	mm.value = now.getMinutes().toString().padStart(2, "0");
+	ss.value = now.getSeconds().toString().padStart(2, "0");
+	ms.value = Math.floor(now.getMilliseconds() / 10)
+		.toString()
+		.padStart(2, "0");
 	if (now.getSeconds() !== prevSec) showColon.value = true;
 	prevSec = now.getSeconds();
 };
 
 tick();
 
-watch(() => props.showMs, () => {
+watch(
+	() => props.showMs,
+	() => {
 		if (intervalId) window.clearInterval(intervalId);
 		intervalId = window.setInterval(tick, props.showMs ? 10 : 1000);
-}, { immediate: true });
+	},
+	{ immediate: true }
+);
 
 onUnmounted(() => {
 	window.clearInterval(intervalId);

packages/client/src/components/MkDrive.file.vue

@@ -25,78 +25,107 @@
 		<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain" />
 
 		<p class="name">
-		<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
-		<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
+			<span>{{
+				file.name.lastIndexOf(".") != -1
+					? file.name.substr(0, file.name.lastIndexOf("."))
+					: file.name
+			}}</span>
+			<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{
+				file.name.substr(file.name.lastIndexOf("."))
+			}}</span>
 		</p>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import bytes from '@/filters/bytes';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
+import { computed, defineAsyncComponent, ref } from "vue";
+import * as Misskey from "calckey-js";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import bytes from "@/filters/bytes";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		file: Misskey.entities.DriveFile;
 		isSelected?: boolean;
 		selectMode?: boolean;
-}>(), {
+	}>(),
+	{
 		isSelected: false,
 		selectMode: false,
-});
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'chosen', r: Misskey.entities.DriveFile): void;
-	(ev: 'dragstart'): void;
-	(ev: 'dragend'): void;
+	(ev: "chosen", r: Misskey.entities.DriveFile): void;
+	(ev: "dragstart"): void;
+	(ev: "dragend"): void;
 }>();
 
 const isDragging = ref(false);
 
-const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
+const title = computed(
+	() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`
+);
 
 function getMenu() {
-	return [{
+	return [
+		{
 			text: i18n.ts.rename,
-		icon: 'ph-cursor-text ph-bold ph-lg',
+			icon: "ph-cursor-text ph-bold ph-lg",
 			action: rename,
-	}, {
-		text: props.file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
-		icon: props.file.isSensitive ? 'ph-eye ph-bold ph-lg' : 'ph-eye-slash ph-bold ph-lg',
+		},
+		{
+			text: props.file.isSensitive
+				? i18n.ts.unmarkAsSensitive
+				: i18n.ts.markAsSensitive,
+			icon: props.file.isSensitive
+				? "ph-eye ph-bold ph-lg"
+				: "ph-eye-slash ph-bold ph-lg",
 			action: toggleSensitive,
-	}, {
+		},
+		{
 			text: i18n.ts.describeFile,
-		icon: 'ph-cursor-text ph-bold ph-lg',
+			icon: "ph-cursor-text ph-bold ph-lg",
 			action: describe,
-	}, null, {
+		},
+		null,
+		{
 			text: i18n.ts.copyUrl,
-		icon: 'ph-link-simple ph-bold ph-lg',
+			icon: "ph-link-simple ph-bold ph-lg",
 			action: copyUrl,
-	}, {
-		type: 'a',
+		},
+		{
+			type: "a",
 			href: props.file.url,
-		target: '_blank',
+			target: "_blank",
 			text: i18n.ts.download,
-		icon: 'ph-download-simple ph-bold ph-lg',
+			icon: "ph-download-simple ph-bold ph-lg",
 			download: props.file.name,
-	}, null, {
+		},
+		null,
+		{
 			text: i18n.ts.delete,
-		icon: 'ph-trash ph-bold ph-lg',
+			icon: "ph-trash ph-bold ph-lg",
 			danger: true,
 			action: deleteFile,
-	}];
+		},
+	];
 }
 
 function onClick(ev: MouseEvent) {
 	if (props.selectMode) {
-		emit('chosen', props.file);
+		emit("chosen", props.file);
 	} else {
-		os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+		os.popupMenu(
+			getMenu(),
+			(ev.currentTarget ?? ev.target ?? undefined) as
+				| HTMLElement
+				| undefined
+		);
 	}
 }
 
@@ -106,17 +135,20 @@ function onContextmenu(ev: MouseEvent) {
 
 function onDragstart(ev: DragEvent) {
 	if (ev.dataTransfer) {
-		ev.dataTransfer.effectAllowed = 'move';
-		ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
+		ev.dataTransfer.effectAllowed = "move";
+		ev.dataTransfer.setData(
+			_DATA_TRANSFER_DRIVE_FILE_,
+			JSON.stringify(props.file)
+		);
 	}
 	isDragging.value = true;
 
-	emit('dragstart');
+	emit("dragstart");
 }
 
 function onDragend() {
 	isDragging.value = false;
-	emit('dragend');
+	emit("dragend");
 }
 
 function rename() {
@@ -126,7 +158,7 @@ function rename() {
 		default: props.file.name,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
-		os.api('drive/files/update', {
+		os.api("drive/files/update", {
 			fileId: props.file.id,
 			name: name,
 		});
@@ -134,27 +166,32 @@ function rename() {
 }
 
 function describe() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
+	os.popup(
+		defineAsyncComponent(() => import("@/components/MkMediaCaption.vue")),
+		{
 			title: i18n.ts.describeFile,
 			input: {
 				placeholder: i18n.ts.inputNewDescription,
-			default: props.file.comment != null ? props.file.comment : '',
+				default: props.file.comment != null ? props.file.comment : "",
 			},
 			image: props.file,
-	}, {
-		done: result => {
+		},
+		{
+			done: (result) => {
 				if (!result || result.canceled) return;
 				let comment = result.result;
-			os.api('drive/files/update', {
+				os.api("drive/files/update", {
 					fileId: props.file.id,
 					comment: comment.length === 0 ? null : comment,
 				});
 			},
-	}, 'closed');
+		},
+		"closed"
+	);
 }
 
 function toggleSensitive() {
-	os.api('drive/files/update', {
+	os.api("drive/files/update", {
 		fileId: props.file.id,
 		isSensitive: !props.file.isSensitive,
 	});
@@ -171,12 +208,12 @@ function addApp() {
 */
 async function deleteFile() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('driveFileDeleteConfirm', { name: props.file.name }),
+		type: "warning",
+		text: i18n.t("driveFileDeleteConfirm", { name: props.file.name }),
 	});
 
 	if (canceled) return;
-	os.api('drive/files/delete', {
+	os.api("drive/files/delete", {
 		fileId: props.file.id,
 	});
 }
@@ -189,7 +226,8 @@ async function deleteFile() {
 	min-height: 180px;
 	border-radius: 8px;
 
-	&, * {
+	&,
+	* {
 		cursor: pointer;
 	}
 

packages/client/src/components/MkDrive.folder.vue

@@ -16,41 +16,53 @@
 		@dragend="onDragend"
 	>
 		<p class="name">
-		<template v-if="hover"><i class="ph-folder-notch-open ph-bold ph-lg ph-fw ph-lg"></i></template>
-		<template v-if="!hover"><i class="ph-folder-notch ph-bold ph-lg ph-fw ph-lg"></i></template>
+			<template v-if="hover"
+				><i class="ph-folder-notch-open ph-bold ph-lg ph-fw ph-lg"></i
+			></template>
+			<template v-if="!hover"
+				><i class="ph-folder-notch ph-bold ph-lg ph-fw ph-lg"></i
+			></template>
 			{{ folder.name }}
 		</p>
 		<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
 			{{ i18n.ts.uploadFolder }}
 		</p>
-	<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>
+		<button
+			v-if="selectMode"
+			class="checkbox _button"
+			:class="{ checked: isSelected }"
+			@click.prevent.stop="checkboxClicked"
+		></button>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
+import { computed, defineAsyncComponent, ref } from "vue";
+import * as Misskey from "calckey-js";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		folder: Misskey.entities.DriveFolder;
 		isSelected?: boolean;
 		selectMode?: boolean;
-}>(), {
+	}>(),
+	{
 		isSelected: false,
 		selectMode: false,
-});
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'chosen', v: Misskey.entities.DriveFolder): void;
-	(ev: 'move', v: Misskey.entities.DriveFolder): void;
-	(ev: 'upload', file: File, folder: Misskey.entities.DriveFolder);
-	(ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
-	(ev: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
-	(ev: 'dragstart'): void;
-	(ev: 'dragend'): void;
+	(ev: "chosen", v: Misskey.entities.DriveFolder): void;
+	(ev: "move", v: Misskey.entities.DriveFolder): void;
+	(ev: "upload", file: File, folder: Misskey.entities.DriveFolder);
+	(ev: "removeFile", v: Misskey.entities.DriveFile["id"]): void;
+	(ev: "removeFolder", v: Misskey.entities.DriveFolder["id"]): void;
+	(ev: "dragstart"): void;
+	(ev: "dragend"): void;
 }>();
 
 const hover = ref(false);
@@ -60,11 +72,11 @@ const isDragging = ref(false);
 const title = computed(() => props.folder.name);
 
 function checkboxClicked() {
-	emit('chosen', props.folder);
+	emit("chosen", props.folder);
 }
 
 function onClick() {
-	emit('move', props.folder);
+	emit("move", props.folder);
 }
 
 function onMouseover() {
@@ -81,18 +93,20 @@ function onDragover(ev: DragEvent) {
 	// 自分自身がドラッグされている場合
 	if (isDragging.value) {
 		// 自分自身にはドロップさせない
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 		return;
 	}
 
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isFile = ev.dataTransfer.items[0].kind === "file";
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
+	const isDriveFolder =
+		ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
 
 	if (isFile || isDriveFile || isDriveFolder) {
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		ev.dataTransfer.dropEffect =
+			ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
 	} else {
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 	}
 }
 
@@ -112,17 +126,17 @@ function onDrop(ev: DragEvent) {
 	// ファイルだったら
 	if (ev.dataTransfer.files.length > 0) {
 		for (const file of Array.from(ev.dataTransfer.files)) {
-			emit('upload', file, props.folder);
+			emit("upload", file, props.folder);
 		}
 		return;
 	}
 
 	//#region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
+	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
-		emit('removeFile', file.id);
-		os.api('drive/files/update', {
+		emit("removeFile", file.id);
+		os.api("drive/files/update", {
 			fileId: file.id,
 			folderId: props.folder.id,
 		});
@@ -131,21 +145,23 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのフォルダ
 	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
-	if (driveFolder != null && driveFolder !== '') {
+	if (driveFolder != null && driveFolder !== "") {
 		const folder = JSON.parse(driveFolder);
 
 		// 移動先が自分自身ならreject
 		if (folder.id === props.folder.id) return;
 
-		emit('removeFolder', folder.id);
-		os.api('drive/folders/update', {
+		emit("removeFolder", folder.id);
+		os.api("drive/folders/update", {
 			folderId: folder.id,
 			parentId: props.folder.id,
-		}).then(() => {
+		})
+			.then(() => {
 				// noop
-		}).catch(err => {
+			})
+			.catch((err) => {
 				switch (err) {
-				case 'detected-circular-definition':
+					case "detected-circular-definition":
 						os.alert({
 							title: i18n.ts.unableToProcess,
 							text: i18n.ts.circularReferenceFolder,
@@ -153,7 +169,7 @@ function onDrop(ev: DragEvent) {
 						break;
 					default:
 						os.alert({
-						type: 'error',
+							type: "error",
 							text: i18n.ts.somethingHappened,
 						});
 				}
@@ -165,22 +181,25 @@ function onDrop(ev: DragEvent) {
 function onDragstart(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
-	ev.dataTransfer.effectAllowed = 'move';
-	ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FOLDER_, JSON.stringify(props.folder));
+	ev.dataTransfer.effectAllowed = "move";
+	ev.dataTransfer.setData(
+		_DATA_TRANSFER_DRIVE_FOLDER_,
+		JSON.stringify(props.folder)
+	);
 	isDragging.value = true;
 
 	// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
 	// (=あなたの子供が、ドラッグを開始しましたよ)
-	emit('dragstart');
+	emit("dragstart");
 }
 
 function onDragend() {
 	isDragging.value = false;
-	emit('dragend');
+	emit("dragend");
 }
 
 function go() {
-	emit('move', props.folder.id);
+	emit("move", props.folder.id);
 }
 
 function rename() {
@@ -190,7 +209,7 @@ function rename() {
 		default: props.folder.name,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
-		os.api('drive/folders/update', {
+		os.api("drive/folders/update", {
 			folderId: props.folder.id,
 			name: name,
 		});
@@ -198,24 +217,26 @@ function rename() {
 }
 
 function deleteFolder() {
-	os.api('drive/folders/delete', {
+	os.api("drive/folders/delete", {
 		folderId: props.folder.id,
-	}).then(() => {
+	})
+		.then(() => {
 			if (defaultStore.state.uploadFolder === props.folder.id) {
-			defaultStore.set('uploadFolder', null);
+				defaultStore.set("uploadFolder", null);
 			}
-	}).catch(err => {
+		})
+		.catch((err) => {
 			switch (err.id) {
-			case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
+				case "b0fc8a17-963c-405d-bfbc-859a487295e1":
 					os.alert({
-					type: 'error',
+						type: "error",
 						title: i18n.ts.unableToDelete,
 						text: i18n.ts.hasChildFilesOrFolders,
 					});
 					break;
 				default:
 					os.alert({
-					type: 'error',
+						type: "error",
 						text: i18n.ts.unableToDelete,
 					});
 			}
@@ -223,29 +244,44 @@ function deleteFolder() {
 }
 
 function setAsUploadFolder() {
-	defaultStore.set('uploadFolder', props.folder.id);
+	defaultStore.set("uploadFolder", props.folder.id);
 }
 
 function onContextmenu(ev: MouseEvent) {
-	os.contextMenu([{
+	os.contextMenu(
+		[
+			{
 				text: i18n.ts.openInWindow,
-		icon: 'ph-copy ph-bold ph-lg',
+				icon: "ph-copy ph-bold ph-lg",
 				action: () => {
-			os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), {
+					os.popup(
+						defineAsyncComponent(
+							() => import("@/components/MkDriveWindow.vue")
+						),
+						{
 							initialFolder: props.folder,
-			}, {
-			}, 'closed');
 						},
-	}, null, {
+						{},
+						"closed"
+					);
+				},
+			},
+			null,
+			{
 				text: i18n.ts.rename,
-		icon: 'ph-cursor-text ph-bold ph-lg',
+				icon: "ph-cursor-text ph-bold ph-lg",
 				action: rename,
-	}, null, {
+			},
+			null,
+			{
 				text: i18n.ts.delete,
-		icon: 'ph-trash ph-bold ph-lg',
+				icon: "ph-trash ph-bold ph-lg",
 				danger: true,
 				action: deleteFolder,
-	}], ev);
+			},
+		],
+		ev
+	);
 }
 </script>
 
@@ -257,7 +293,8 @@ function onContextmenu(ev: MouseEvent) {
 	background: var(--driveFolderBg);
 	border-radius: 4px;
 
-	&, * {
+	&,
+	* {
 		cursor: pointer;
 	}
 

packages/client/src/components/MkDrive.navFolder.vue

@@ -1,5 +1,6 @@
 <template>
-<div class="drylbebk"
+	<div
+		class="drylbebk"
 		:class="{ draghover }"
 		@click="onClick"
 		@dragover.prevent.stop="onDragover"
@@ -13,10 +14,10 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import * as Misskey from "calckey-js";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	folder?: Misskey.entities.DriveFolder;
@@ -24,17 +25,21 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'move', v?: Misskey.entities.DriveFolder): void;
-	(ev: 'upload', file: File, folder?: Misskey.entities.DriveFolder | null): void;
-	(ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
-	(ev: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
+	(ev: "move", v?: Misskey.entities.DriveFolder): void;
+	(
+		ev: "upload",
+		file: File,
+		folder?: Misskey.entities.DriveFolder | null
+	): void;
+	(ev: "removeFile", v: Misskey.entities.DriveFile["id"]): void;
+	(ev: "removeFolder", v: Misskey.entities.DriveFolder["id"]): void;
 }>();
 
 const hover = ref(false);
 const draghover = ref(false);
 
 function onClick() {
-	emit('move', props.folder);
+	emit("move", props.folder);
 }
 
 function onMouseover() {
@@ -50,17 +55,19 @@ function onDragover(ev: DragEvent) {
 
 	// このフォルダがルートかつカレントディレクトリならドロップ禁止
 	if (props.folder == null && props.parentFolder == null) {
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 	}
 
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isFile = ev.dataTransfer.items[0].kind === "file";
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
+	const isDriveFolder =
+		ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
 
 	if (isFile || isDriveFile || isDriveFolder) {
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		ev.dataTransfer.dropEffect =
+			ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
 	} else {
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 	}
 
 	return false;
@@ -82,33 +89,33 @@ function onDrop(ev: DragEvent) {
 	// ファイルだったら
 	if (ev.dataTransfer.files.length > 0) {
 		for (const file of Array.from(ev.dataTransfer.files)) {
-			emit('upload', file, props.folder);
+			emit("upload", file, props.folder);
 		}
 		return;
 	}
 
 	//#region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
+	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
-		emit('removeFile', file.id);
-		os.api('drive/files/update', {
+		emit("removeFile", file.id);
+		os.api("drive/files/update", {
 			fileId: file.id,
-			folderId: props.folder ? props.folder.id : null
+			folderId: props.folder ? props.folder.id : null,
 		});
 	}
 	//#endregion
 
 	//#region ドライブのフォルダ
 	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
-	if (driveFolder != null && driveFolder !== '') {
+	if (driveFolder != null && driveFolder !== "") {
 		const folder = JSON.parse(driveFolder);
 		// 移動先が自分自身ならreject
 		if (props.folder && folder.id === props.folder.id) return;
-		emit('removeFolder', folder.id);
-		os.api('drive/folders/update', {
+		emit("removeFolder", folder.id);
+		os.api("drive/folders/update", {
 			folderId: folder.id,
-			parentId: props.folder ? props.folder.id : null
+			parentId: props.folder ? props.folder.id : null,
 		});
 	}
 	//#endregion

packages/client/src/components/MkDrive.vue

@@ -11,7 +11,9 @@
 					@removeFolder="removeFolder"
 				/>
 				<template v-for="f in hierarchyFolders">
-				<span class="separator"><i class="ph-caret-right ph-bold ph-lg"></i></span>
+					<span class="separator"
+						><i class="ph-caret-right ph-bold ph-lg"></i
+					></span>
 					<XNavFolder
 						:folder="f"
 						:parent-folder="folder"
@@ -21,13 +23,20 @@
 						@removeFolder="removeFolder"
 					/>
 				</template>
-			<span v-if="folder != null" class="separator"><i class="ph-caret-right ph-bold ph-lg"></i></span>
-			<span v-if="folder != null" class="folder current">{{ folder.name }}</span>
+				<span v-if="folder != null" class="separator"
+					><i class="ph-caret-right ph-bold ph-lg"></i
+				></span>
+				<span v-if="folder != null" class="folder current">{{
+					folder.name
+				}}</span>
 			</div>
-		<button class="menu _button" @click="showMenu"><i class="ph-dots-three-outline ph-bold ph-lg"></i></button>
+			<button class="menu _button" @click="showMenu">
+				<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+			</button>
 		</nav>
 		<div
-		ref="main" class="main"
+			ref="main"
+			class="main"
 			:class="{ uploading: uploadings.length > 0, fetching }"
 			@dragover.prevent.stop="onDragover"
 			@dragenter="onDragenter"
@@ -36,7 +45,11 @@
 			@contextmenu.stop="onContextmenu"
 		>
 			<div ref="contents" class="contents">
-			<div v-show="folders.length > 0" ref="foldersContainer" class="folders">
+				<div
+					v-show="folders.length > 0"
+					ref="foldersContainer"
+					class="folders"
+				>
 					<XFolder
 						v-for="(f, i) in folders"
 						:key="f.id"
@@ -44,7 +57,9 @@
 						class="folder"
 						:folder="f"
 						:select-mode="select === 'folder'"
-					:is-selected="selectedFolders.some(x => x.id === f.id)"
+						:is-selected="
+							selectedFolders.some((x) => x.id === f.id)
+						"
 						@chosen="chooseFolder"
 						@move="move"
 						@upload="upload"
@@ -55,9 +70,15 @@
 					/>
 					<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 					<div v-for="(n, i) in 16" :key="i" class="padding"></div>
-				<MkButton v-if="moreFolders" ref="moreFolders">{{ i18n.ts.loadMore }}</MkButton>
+					<MkButton v-if="moreFolders" ref="moreFolders">{{
+						i18n.ts.loadMore
+					}}</MkButton>
 				</div>
-			<div v-show="files.length > 0" ref="filesContainer" class="files">
+				<div
+					v-show="files.length > 0"
+					ref="filesContainer"
+					class="files"
+				>
 					<XFile
 						v-for="(file, i) in files"
 						:key="file.id"
@@ -65,57 +86,96 @@
 						class="file"
 						:file="file"
 						:select-mode="select === 'file'"
-					:is-selected="selectedFiles.some(x => x.id === file.id)"
+						:is-selected="
+							selectedFiles.some((x) => x.id === file.id)
+						"
 						@chosen="chooseFile"
 						@dragstart="isDragSource = true"
 						@dragend="isDragSource = false"
 					/>
 					<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 					<div v-for="(n, i) in 16" :key="i" class="padding"></div>
-				<MkButton v-show="moreFiles" ref="loadMoreFiles" @click="fetchMoreFiles">{{ i18n.ts.loadMore }}</MkButton>
+					<MkButton
+						v-show="moreFiles"
+						ref="loadMoreFiles"
+						@click="fetchMoreFiles"
+						>{{ i18n.ts.loadMore }}</MkButton
+					>
 				</div>
-			<div v-if="files.length == 0 && folders.length == 0 && !fetching" class="empty">
-				<p v-if="draghover">{{ i18n.t('empty-draghover') }}</p>
-				<p v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.t('empty-drive-description') }}</p>
-				<p v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</p>
+				<div
+					v-if="files.length == 0 && folders.length == 0 && !fetching"
+					class="empty"
+				>
+					<p v-if="draghover">{{ i18n.t("empty-draghover") }}</p>
+					<p v-if="!draghover && folder == null">
+						<strong>{{ i18n.ts.emptyDrive }}</strong
+						><br />{{ i18n.t("empty-drive-description") }}
+					</p>
+					<p v-if="!draghover && folder != null">
+						{{ i18n.ts.emptyFolder }}
+					</p>
 				</div>
 			</div>
 			<MkLoading v-if="fetching" />
 		</div>
 		<div v-if="draghover" class="dropzone"></div>
-	<input ref="fileInput" type="file" accept="*/*" multiple tabindex="-1" @change="onChangeFileInput"/>
+		<input
+			ref="fileInput"
+			type="file"
+			accept="*/*"
+			multiple
+			tabindex="-1"
+			@change="onChangeFileInput"
+		/>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import * as Misskey from 'calckey-js';
-import MkButton from './MkButton.vue';
-import XNavFolder from '@/components/MkDrive.navFolder.vue';
-import XFolder from '@/components/MkDrive.folder.vue';
-import XFile from '@/components/MkDrive.file.vue';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { uploadFile, uploads } from '@/scripts/upload';
+import {
+	markRaw,
+	nextTick,
+	onActivated,
+	onBeforeUnmount,
+	onMounted,
+	ref,
+	watch,
+} from "vue";
+import * as Misskey from "calckey-js";
+import MkButton from "./MkButton.vue";
+import XNavFolder from "@/components/MkDrive.navFolder.vue";
+import XFolder from "@/components/MkDrive.folder.vue";
+import XFile from "@/components/MkDrive.file.vue";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { uploadFile, uploads } from "@/scripts/upload";
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		initialFolder?: Misskey.entities.DriveFolder;
 		type?: string;
 		multiple?: boolean;
-	select?: 'file' | 'folder' | null;
-}>(), {
+		select?: "file" | "folder" | null;
+	}>(),
+	{
 		multiple: false,
 		select: null,
-});
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
-	(ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
-	(ev: 'move-root'): void;
-	(ev: 'cd', v: Misskey.entities.DriveFolder | null): void;
-	(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
+	(
+		ev: "selected",
+		v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder
+	): void;
+	(
+		ev: "change-selection",
+		v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]
+	): void;
+	(ev: "move-root"): void;
+	(ev: "cd", v: Misskey.entities.DriveFolder | null): void;
+	(ev: "open-folder", v: Misskey.entities.DriveFolder): void;
 }>();
 
 const loadMoreFiles = ref<InstanceType<typeof MkButton>>();
@@ -130,7 +190,7 @@ const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
 const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const uploadings = uploads;
-const connection = stream.useChannel('drive');
+const connection = stream.useChannel("drive");
 const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい
 
 // ドロップされようとしているか
@@ -143,10 +203,14 @@ const isDragSource = ref(false);
 const fetching = ref(true);
 
 const ilFilesObserver = new IntersectionObserver(
-	(entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles(),
+	(entries) =>
+		entries.some((entry) => entry.isIntersecting) &&
+		!fetching.value &&
+		moreFiles.value &&
+		fetchMoreFiles()
 );
 
-watch(folder, () => emit('cd', folder.value));
+watch(folder, () => emit("cd", folder.value));
 
 function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
 	addFile(file, true);
@@ -165,11 +229,15 @@ function onStreamDriveFileDeleted(fileId: string) {
 	removeFile(fileId);
 }
 
-function onStreamDriveFolderCreated(createdFolder: Misskey.entities.DriveFolder) {
+function onStreamDriveFolderCreated(
+	createdFolder: Misskey.entities.DriveFolder
+) {
 	addFolder(createdFolder, true);
 }
 
-function onStreamDriveFolderUpdated(updatedFolder: Misskey.entities.DriveFolder) {
+function onStreamDriveFolderUpdated(
+	updatedFolder: Misskey.entities.DriveFolder
+) {
 	const current = folder.value ? folder.value.id : null;
 	if (current !== updatedFolder.parentId) {
 		removeFolder(updatedFolder);
@@ -188,17 +256,19 @@ function onDragover(ev: DragEvent): any {
 	// ドラッグ元が自分自身の所有するアイテムだったら
 	if (isDragSource.value) {
 		// 自分自身にはドロップさせない
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 		return;
 	}
 
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isFile = ev.dataTransfer.items[0].kind === "file";
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
+	const isDriveFolder =
+		ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
 	if (isFile || isDriveFile || isDriveFolder) {
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		ev.dataTransfer.dropEffect =
+			ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
 	} else {
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 	}
 
 	return false;
@@ -227,11 +297,11 @@ function onDrop(ev: DragEvent): any {
 
 	//#region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
+	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
-		if (files.value.some(f => f.id === file.id)) return;
+		if (files.value.some((f) => f.id === file.id)) return;
 		removeFile(file.id);
-		os.api('drive/files/update', {
+		os.api("drive/files/update", {
 			fileId: file.id,
 			folderId: folder.value ? folder.value.id : null,
 		});
@@ -240,21 +310,23 @@ function onDrop(ev: DragEvent): any {
 
 	//#region ドライブのフォルダ
 	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
-	if (driveFolder != null && driveFolder !== '') {
+	if (driveFolder != null && driveFolder !== "") {
 		const droppedFolder = JSON.parse(driveFolder);
 
 		// 移動先が自分自身ならreject
 		if (folder.value && droppedFolder.id === folder.value.id) return false;
-		if (folders.value.some(f => f.id === droppedFolder.id)) return false;
+		if (folders.value.some((f) => f.id === droppedFolder.id)) return false;
 		removeFolder(droppedFolder.id);
-		os.api('drive/folders/update', {
+		os.api("drive/folders/update", {
 			folderId: droppedFolder.id,
 			parentId: folder.value ? folder.value.id : null,
-		}).then(() => {
+		})
+			.then(() => {
 				// noop
-		}).catch(err => {
+			})
+			.catch((err) => {
 				switch (err) {
-				case 'detected-circular-definition':
+					case "detected-circular-definition":
 						os.alert({
 							title: i18n.ts.unableToProcess,
 							text: i18n.ts.circularReferenceFolder,
@@ -262,7 +334,7 @@ function onDrop(ev: DragEvent): any {
 						break;
 					default:
 						os.alert({
-						type: 'error',
+							type: "error",
 							text: i18n.ts.somethingHappened,
 						});
 				}
@@ -278,11 +350,11 @@ function selectLocalFile() {
 function urlUpload() {
 	os.inputText({
 		title: i18n.ts.uploadFromUrl,
-		type: 'url',
+		type: "url",
 		placeholder: i18n.ts.uploadFromUrlDescription,
 	}).then(({ canceled, result: url }) => {
 		if (canceled || !url) return;
-		os.api('drive/files/upload-from-url', {
+		os.api("drive/files/upload-from-url", {
 			url: url,
 			folderId: folder.value ? folder.value.id : undefined,
 		});
@@ -300,10 +372,10 @@ function createFolder() {
 		placeholder: i18n.ts.folderName,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
-		os.api('drive/folders/create', {
+		os.api("drive/folders/create", {
 			name: name,
 			parentId: folder.value ? folder.value.id : undefined,
-		}).then(createdFolder => {
+		}).then((createdFolder) => {
 			addFolder(createdFolder, true);
 		});
 	});
@@ -316,10 +388,10 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
 		default: folderToRename.name,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
-		os.api('drive/folders/update', {
+		os.api("drive/folders/update", {
 			folderId: folderToRename.id,
 			name: name,
-		}).then(updatedFolder => {
+		}).then((updatedFolder) => {
 			// FIXME: 画面を更新するために自分自身に移動
 			move(updatedFolder);
 		});
@@ -327,23 +399,25 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
 }
 
 function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
-	os.api('drive/folders/delete', {
+	os.api("drive/folders/delete", {
 		folderId: folderToDelete.id,
-	}).then(() => {
+	})
+		.then(() => {
 			// 削除時に親フォルダに移動
 			move(folderToDelete.parentId);
-	}).catch(err => {
+		})
+		.catch((err) => {
 			switch (err.id) {
-			case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
+				case "b0fc8a17-963c-405d-bfbc-859a487295e1":
 					os.alert({
-					type: 'error',
+						type: "error",
 						title: i18n.ts.unableToDelete,
 						text: i18n.ts.hasChildFilesOrFolders,
 					});
 					break;
 				default:
 					os.alert({
-					type: 'error',
+						type: "error",
 						text: i18n.ts.unableToDelete,
 					});
 			}
@@ -357,46 +431,62 @@ function onChangeFileInput() {
 	}
 }
 
-function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null) {
-	uploadFile(file, (folderToUpload && typeof folderToUpload === 'object') ? folderToUpload.id : null, undefined, keepOriginal.value).then(res => {
+function upload(
+	file: File,
+	folderToUpload?: Misskey.entities.DriveFolder | null
+) {
+	uploadFile(
+		file,
+		folderToUpload && typeof folderToUpload === "object"
+			? folderToUpload.id
+			: null,
+		undefined,
+		keepOriginal.value
+	).then((res) => {
 		addFile(res, true);
 	});
 }
 
 function chooseFile(file: Misskey.entities.DriveFile) {
-	const isAlreadySelected = selectedFiles.value.some(f => f.id === file.id);
+	const isAlreadySelected = selectedFiles.value.some((f) => f.id === file.id);
 	if (props.multiple) {
 		if (isAlreadySelected) {
-			selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);
+			selectedFiles.value = selectedFiles.value.filter(
+				(f) => f.id !== file.id
+			);
 		} else {
 			selectedFiles.value.push(file);
 		}
-		emit('change-selection', selectedFiles.value);
+		emit("change-selection", selectedFiles.value);
 	} else {
 		if (isAlreadySelected) {
-			emit('selected', file);
+			emit("selected", file);
 		} else {
 			selectedFiles.value = [file];
-			emit('change-selection', [file]);
+			emit("change-selection", [file]);
 		}
 	}
 }
 
 function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
-	const isAlreadySelected = selectedFolders.value.some(f => f.id === folderToChoose.id);
+	const isAlreadySelected = selectedFolders.value.some(
+		(f) => f.id === folderToChoose.id
+	);
 	if (props.multiple) {
 		if (isAlreadySelected) {
-			selectedFolders.value = selectedFolders.value.filter(f => f.id !== folderToChoose.id);
+			selectedFolders.value = selectedFolders.value.filter(
+				(f) => f.id !== folderToChoose.id
+			);
 		} else {
 			selectedFolders.value.push(folderToChoose);
 		}
-		emit('change-selection', selectedFolders.value);
+		emit("change-selection", selectedFolders.value);
 	} else {
 		if (isAlreadySelected) {
-			emit('selected', folderToChoose);
+			emit("selected", folderToChoose);
 		} else {
 			selectedFolders.value = [folderToChoose];
-			emit('change-selection', [folderToChoose]);
+			emit("change-selection", [folderToChoose]);
 		}
 	}
 }
@@ -405,26 +495,26 @@ function move(target?: Misskey.entities.DriveFolder) {
 	if (!target) {
 		goRoot();
 		return;
-	} else if (typeof target === 'object') {
+	} else if (typeof target === "object") {
 		target = target.id;
 	}
 
 	fetching.value = true;
 
-	os.api('drive/folders/show', {
+	os.api("drive/folders/show", {
 		folderId: target,
-	}).then(folderToMove => {
+	}).then((folderToMove) => {
 		folder.value = folderToMove;
 		hierarchyFolders.value = [];
 
-		const dive = folderToDive => {
+		const dive = (folderToDive) => {
 			hierarchyFolders.value.unshift(folderToDive);
 			if (folderToDive.parent) dive(folderToDive.parent);
 		};
 
 		if (folderToMove.parent) dive(folderToMove.parent);
 
-		emit('open-folder', folderToMove);
+		emit("open-folder", folderToMove);
 		fetch();
 	});
 }
@@ -433,8 +523,8 @@ function addFolder(folderToAdd: Misskey.entities.DriveFolder, unshift = false) {
 	const current = folder.value ? folder.value.id : null;
 	if (current !== folderToAdd.parentId) return;
 
-	if (folders.value.some(f => f.id === folderToAdd.id)) {
-		const exist = folders.value.map(f => f.id).indexOf(folderToAdd.id);
+	if (folders.value.some((f) => f.id === folderToAdd.id)) {
+		const exist = folders.value.map((f) => f.id).indexOf(folderToAdd.id);
 		folders.value[exist] = folderToAdd;
 		return;
 	}
@@ -450,8 +540,8 @@ function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
 	const current = folder.value ? folder.value.id : null;
 	if (current !== fileToAdd.folderId) return;
 
-	if (files.value.some(f => f.id === fileToAdd.id)) {
-		const exist = files.value.map(f => f.id).indexOf(fileToAdd.id);
+	if (files.value.some((f) => f.id === fileToAdd.id)) {
+		const exist = files.value.map((f) => f.id).indexOf(fileToAdd.id);
 		files.value[exist] = fileToAdd;
 		return;
 	}
@@ -464,13 +554,14 @@ function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
 }
 
 function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
-	const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
-	folders.value = folders.value.filter(f => f.id !== folderIdToRemove);
+	const folderIdToRemove =
+		typeof folderToRemove === "object" ? folderToRemove.id : folderToRemove;
+	folders.value = folders.value.filter((f) => f.id !== folderIdToRemove);
 }
 
 function removeFile(file: Misskey.entities.DriveFile | string) {
-	const fileId = typeof file === 'object' ? file.id : file;
-	files.value = files.value.filter(f => f.id !== fileId);
+	const fileId = typeof file === "object" ? file.id : file;
+	files.value = files.value.filter((f) => f.id !== fileId);
 }
 
 function appendFile(file: Misskey.entities.DriveFile) {
@@ -495,7 +586,7 @@ function goRoot() {
 
 	folder.value = null;
 	hierarchyFolders.value = [];
-	emit('move-root');
+	emit("move-root");
 	fetch();
 }
 
@@ -509,10 +600,12 @@ async function fetch() {
 	const foldersMax = 30;
 	const filesMax = 30;
 
-	const foldersPromise = os.api('drive/folders', {
+	const foldersPromise = os
+		.api("drive/folders", {
 			folderId: folder.value ? folder.value.id : null,
 			limit: foldersMax + 1,
-	}).then(fetchedFolders => {
+		})
+		.then((fetchedFolders) => {
 			if (fetchedFolders.length === foldersMax + 1) {
 				moreFolders.value = true;
 				fetchedFolders.pop();
@@ -520,11 +613,13 @@ async function fetch() {
 			return fetchedFolders;
 		});
 
-	const filesPromise = os.api('drive/files', {
+	const filesPromise = os
+		.api("drive/files", {
 			folderId: folder.value ? folder.value.id : null,
 			type: props.type,
 			limit: filesMax + 1,
-	}).then(fetchedFiles => {
+		})
+		.then((fetchedFiles) => {
 			if (fetchedFiles.length === filesMax + 1) {
 				moreFiles.value = true;
 				fetchedFiles.pop();
@@ -532,7 +627,10 @@ async function fetch() {
 			return fetchedFiles;
 		});
 
-	const [fetchedFolders, fetchedFiles] = await Promise.all([foldersPromise, filesPromise]);
+	const [fetchedFolders, fetchedFiles] = await Promise.all([
+		foldersPromise,
+		filesPromise,
+	]);
 
 	for (const x of fetchedFolders) appendFolder(x);
 	for (const x of fetchedFiles) appendFile(x);
@@ -546,12 +644,12 @@ function fetchMoreFiles() {
 	const max = 30;
 
 	// ファイル一覧取得
-	os.api('drive/files', {
+	os.api("drive/files", {
 		folderId: folder.value ? folder.value.id : null,
 		type: props.type,
 		untilId: files.value[files.value.length - 1].id,
 		limit: max + 1,
-	}).then(files => {
+	}).then((files) => {
 		if (files.length === max + 1) {
 			moreFiles.value = true;
 			files.pop();
@@ -564,41 +662,71 @@ function fetchMoreFiles() {
 }
 
 function getMenu() {
-	return [{
-		type: 'switch',
+	return [
+		{
+			type: "switch",
 			text: i18n.ts.keepOriginalUploading,
 			ref: keepOriginal,
-	}, null, {
+		},
+		null,
+		{
 			text: i18n.ts.addFile,
-		type: 'label',
-	}, {
+			type: "label",
+		},
+		{
 			text: i18n.ts.upload,
-		icon: 'ph-upload-simple ph-bold ph-lg',
-		action: () => { selectLocalFile(); },
-	}, {
+			icon: "ph-upload-simple ph-bold ph-lg",
+			action: () => {
+				selectLocalFile();
+			},
+		},
+		{
 			text: i18n.ts.fromUrl,
-		icon: 'ph-link-simple ph-bold ph-lg',
-		action: () => { urlUpload(); },
-	}, null, {
+			icon: "ph-link-simple ph-bold ph-lg",
+			action: () => {
+				urlUpload();
+			},
+		},
+		null,
+		{
 			text: folder.value ? folder.value.name : i18n.ts.drive,
-		type: 'label',
-	}, folder.value ? {
+			type: "label",
+		},
+		folder.value
+			? {
 					text: i18n.ts.renameFolder,
-		icon: 'ph-cursor-text ph-bold ph-lg',
-		action: () => { renameFolder(folder.value); },
-	} : undefined, folder.value ? {
+					icon: "ph-cursor-text ph-bold ph-lg",
+					action: () => {
+						renameFolder(folder.value);
+					},
+			  }
+			: undefined,
+		folder.value
+			? {
 					text: i18n.ts.deleteFolder,
-		icon: 'ph-trash ph-bold ph-lg',
-		action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
-	} : undefined, {
+					icon: "ph-trash ph-bold ph-lg",
+					action: () => {
+						deleteFolder(
+							folder.value as Misskey.entities.DriveFolder
+						);
+					},
+			  }
+			: undefined,
+		{
 			text: i18n.ts.createFolder,
-		icon: 'ph-folder-notch-plus ph-bold ph-lg',
-		action: () => { createFolder(); },
-	}];
+			icon: "ph-folder-notch-plus ph-bold ph-lg",
+			action: () => {
+				createFolder();
+			},
+		},
+	];
 }
 
 function showMenu(ev: MouseEvent) {
-	os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+	os.popupMenu(
+		getMenu(),
+		(ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined
+	);
 }
 
 function onContextmenu(ev: MouseEvent) {
@@ -612,12 +740,12 @@ onMounted(() => {
 		});
 	}
 
-	connection.on('fileCreated', onStreamDriveFileCreated);
-	connection.on('fileUpdated', onStreamDriveFileUpdated);
-	connection.on('fileDeleted', onStreamDriveFileDeleted);
-	connection.on('folderCreated', onStreamDriveFolderCreated);
-	connection.on('folderUpdated', onStreamDriveFolderUpdated);
-	connection.on('folderDeleted', onStreamDriveFolderDeleted);
+	connection.on("fileCreated", onStreamDriveFileCreated);
+	connection.on("fileUpdated", onStreamDriveFileUpdated);
+	connection.on("fileDeleted", onStreamDriveFileDeleted);
+	connection.on("folderCreated", onStreamDriveFolderCreated);
+	connection.on("folderUpdated", onStreamDriveFolderUpdated);
+	connection.on("folderDeleted", onStreamDriveFolderDeleted);
 
 	if (props.initialFolder) {
 		move(props.initialFolder);
@@ -656,7 +784,8 @@ onBeforeUnmount(() => {
 		font-size: 0.9em;
 		box-shadow: 0 1px 0 var(--divider);
 
-		&, * {
+		&,
+		* {
 			user-select: none;
 		}
 
@@ -714,7 +843,8 @@ onBeforeUnmount(() => {
 		overflow: auto;
 		padding: var(--margin);
 
-		&, * {
+		&,
+		* {
 			user-select: none;
 		}
 
@@ -735,7 +865,6 @@ onBeforeUnmount(() => {
 		}
 
 		> .contents {
-
 			> .folders,
 			> .files {
 				display: flex;

packages/client/src/components/MkDriveFileThumbnail.vue

@@ -1,23 +1,48 @@
 <template>
 	<div ref="thumbnail" class="zdjebgpv">
-	<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
-	<i v-else-if="is === 'image'" class="ph-file-image ph-bold ph-lg icon"></i>
-	<i v-else-if="is === 'video'" class="ph-file-video ph-bold ph-lg icon"></i>
-	<i v-else-if="is === 'audio' || is === 'midi'" class="ph-file-audio ph-bold ph-lg icon"></i>
+		<ImgWithBlurhash
+			v-if="isThumbnailAvailable"
+			:hash="file.blurhash"
+			:src="file.thumbnailUrl"
+			:alt="file.name"
+			:title="file.name"
+			:cover="fit !== 'contain'"
+		/>
+		<i
+			v-else-if="is === 'image'"
+			class="ph-file-image ph-bold ph-lg icon"
+		></i>
+		<i
+			v-else-if="is === 'video'"
+			class="ph-file-video ph-bold ph-lg icon"
+		></i>
+		<i
+			v-else-if="is === 'audio' || is === 'midi'"
+			class="ph-file-audio ph-bold ph-lg icon"
+		></i>
 		<i v-else-if="is === 'csv'" class="ph-file-csv ph-bold ph-lg icon"></i>
 		<i v-else-if="is === 'pdf'" class="ph-file-pdf ph-bold ph-lg icon"></i>
-	<i v-else-if="is === 'textfile'" class="ph-file-text ph-bold ph-lg icon"></i>
-	<i v-else-if="is === 'archive'" class="ph-file-zip ph-bold ph-lg icon"></i>
+		<i
+			v-else-if="is === 'textfile'"
+			class="ph-file-text ph-bold ph-lg icon"
+		></i>
+		<i
+			v-else-if="is === 'archive'"
+			class="ph-file-zip ph-bold ph-lg icon"
+		></i>
 		<i v-else class="ph-file ph-bold ph-lg icon"></i>
 
-	<i v-if="isThumbnailAvailable && is === 'video'" class="ph-file-video ph-bold ph-lg icon-sub"></i>
+		<i
+			v-if="isThumbnailAvailable && is === 'video'"
+			class="ph-file-video ph-bold ph-lg icon-sub"
+		></i>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import type * as Misskey from 'calckey-js';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import { computed } from "vue";
+import type * as Misskey from "calckey-js";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 
 const props = defineProps<{
 	file: Misskey.entities.DriveFile;
@@ -25,30 +50,33 @@ const props = defineProps<{
 }>();
 
 const is = computed(() => {
-	if (props.file.type.startsWith('image/')) return 'image';
-	if (props.file.type.startsWith('video/')) return 'video';
-	if (props.file.type === 'audio/midi') return 'midi';
-	if (props.file.type.startsWith('audio/')) return 'audio';
-	if (props.file.type.endsWith('/csv')) return 'csv';
-	if (props.file.type.endsWith('/pdf')) return 'pdf';
-	if (props.file.type.startsWith('text/')) return 'textfile';
-	if ([
-		'application/zip',
-		'application/x-cpio',
-		'application/x-bzip',
-		'application/x-bzip2',
-		'application/java-archive',
-		'application/x-rar-compressed',
-		'application/x-tar',
-		'application/gzip',
-		'application/x-7z-compressed',
-	].some(archiveType => archiveType === props.file.type)) return 'archive';
-	return 'unknown';
+	if (props.file.type.startsWith("image/")) return "image";
+	if (props.file.type.startsWith("video/")) return "video";
+	if (props.file.type === "audio/midi") return "midi";
+	if (props.file.type.startsWith("audio/")) return "audio";
+	if (props.file.type.endsWith("/csv")) return "csv";
+	if (props.file.type.endsWith("/pdf")) return "pdf";
+	if (props.file.type.startsWith("text/")) return "textfile";
+	if (
+		[
+			"application/zip",
+			"application/x-cpio",
+			"application/x-bzip",
+			"application/x-bzip2",
+			"application/java-archive",
+			"application/x-rar-compressed",
+			"application/x-tar",
+			"application/gzip",
+			"application/x-7z-compressed",
+		].some((archiveType) => archiveType === props.file.type)
+	)
+		return "archive";
+	return "unknown";
 });
 
 const isThumbnailAvailable = computed(() => {
 	return props.file.thumbnailUrl
-		? (is.value === 'image' as const || is.value === 'video')
+		? is.value === ("image" as const) || is.value === "video"
 		: false;
 });
 </script>

packages/client/src/components/MkDriveSelectDialog.vue

@@ -4,38 +4,58 @@
 		:width="800"
 		:height="500"
 		:with-ok-button="true"
-	:ok-button-disabled="(type === 'file') && (selected.length === 0)"
+		:ok-button-disabled="type === 'file' && selected.length === 0"
 		@click="cancel()"
 		@close="cancel()"
 		@ok="ok()"
 		@closed="emit('closed')"
 	>
 		<template #header>
-		{{ multiple ? ((type === 'file') ? i18n.ts.selectFiles : i18n.ts.selectFolders) : ((type === 'file') ? i18n.ts.selectFile : i18n.ts.selectFolder) }}
-		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
+			{{
+				multiple
+					? type === "file"
+						? i18n.ts.selectFiles
+						: i18n.ts.selectFolders
+					: type === "file"
+					? i18n.ts.selectFile
+					: i18n.ts.selectFolder
+			}}
+			<span
+				v-if="selected.length > 0"
+				style="margin-left: 8px; opacity: 0.5"
+				>({{ number(selected.length) }})</span
+			>
 		</template>
-	<XDrive :multiple="multiple" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/>
+		<XDrive
+			:multiple="multiple"
+			:select="type"
+			@changeSelection="onChangeSelection"
+			@selected="ok()"
+		/>
 	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import XDrive from '@/components/MkDrive.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import * as Misskey from "calckey-js";
+import XDrive from "@/components/MkDrive.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
 
-withDefaults(defineProps<{
-	type?: 'file' | 'folder';
+withDefaults(
+	defineProps<{
+		type?: "file" | "folder";
 		multiple: boolean;
-}>(), {
-	type: 'file',
-});
+	}>(),
+	{
+		type: "file",
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'done', r?: Misskey.entities.DriveFile[]): void;
-	(ev: 'closed'): void;
+	(ev: "done", r?: Misskey.entities.DriveFile[]): void;
+	(ev: "closed"): void;
 }>();
 
 const dialog = ref<InstanceType<typeof XModalWindow>>();
@@ -43,12 +63,12 @@ const dialog = ref<InstanceType<typeof XModalWindow>>();
 const selected = ref<Misskey.entities.DriveFile[]>([]);
 
 function ok() {
-	emit('done', selected.value);
+	emit("done", selected.value);
 	dialog.value?.close();
 }
 
 function cancel() {
-	emit('done');
+	emit("done");
 	dialog.value?.close();
 }
 

packages/client/src/components/MkDriveWindow.vue

@@ -14,17 +14,17 @@
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as Misskey from 'calckey-js';
-import XDrive from '@/components/MkDrive.vue';
-import XWindow from '@/components/MkWindow.vue';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as Misskey from "calckey-js";
+import XDrive from "@/components/MkDrive.vue";
+import XWindow from "@/components/MkWindow.vue";
+import { i18n } from "@/i18n";
 
 defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 </script>

packages/client/src/components/MkEmojiPicker.section.vue

@@ -2,7 +2,15 @@
 	<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
 	<section>
 		<header class="_acrylic" @click="shown = !shown">
-		<i class="toggle ph-fw ph-lg" :class="shown ? 'ph-caret-down-bold ph-lg' : 'ph-caret-up ph-bold ph-lg'"></i> <slot></slot> ({{ emojis.length }})
+			<i
+				class="toggle ph-fw ph-lg"
+				:class="
+					shown
+						? 'ph-caret-down-bold ph-lg'
+						: 'ph-caret-up ph-bold ph-lg'
+				"
+			></i>
+			<slot></slot> ({{ emojis.length }})
 		</header>
 		<div v-if="shown" class="body">
 			<button
@@ -18,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 
 const props = defineProps<{
 	emojis: string[];
@@ -26,11 +34,10 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'chosen', v: string, event: MouseEvent): void;
+	(ev: "chosen", v: string, event: MouseEvent): void;
 }>();
 
 const shown = ref(!!props.initialShown);
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

packages/client/src/components/MkEmojiPicker.vue

@@ -1,6 +1,20 @@
 <template>
-<div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
-	<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @paste.stop="paste" @keyup.enter="done()">
+	<div
+		class="omfetrab"
+		:class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]"
+		:style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"
+	>
+		<input
+			ref="search"
+			v-model.trim="q"
+			class="search"
+			data-prevent-emoji-insert
+			:class="{ filled: q != null && q != '' }"
+			:placeholder="i18n.ts.search"
+			type="search"
+			@paste.stop="paste"
+			@keyup.enter="done()"
+		/>
 		<div ref="emojis" class="emojis">
 			<section class="result">
 				<div v-if="searchResultCustom.length > 0" class="body">
@@ -13,7 +27,14 @@
 						@click="chosen(emoji, $event)"
 					>
 						<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
-					<img class="emoji" :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
+						<img
+							class="emoji"
+							:src="
+								disableShowingAnimatedImages
+									? getStaticImageUrl(emoji.url)
+									: emoji.url
+							"
+						/>
 					</button>
 				</div>
 				<div v-if="searchResultUnicode.length > 0" class="body">
@@ -40,13 +61,20 @@
 							tabindex="0"
 							@click="chosen(emoji, $event)"
 						>
-						<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
+							<MkEmoji
+								class="emoji"
+								:emoji="emoji"
+								:normal="true"
+							/>
 						</button>
 					</div>
 				</section>
 
 				<section>
-				<header class="_acrylic"><i class="ph-alarm ph-bold ph-fw ph-lg"></i> {{ i18n.ts.recentUsed }}</header>
+					<header class="_acrylic">
+						<i class="ph-alarm ph-bold ph-fw ph-lg"></i>
+						{{ i18n.ts.recentUsed }}
+					</header>
 					<div class="body">
 						<button
 							v-for="emoji in recentlyUsedEmojis"
@@ -54,54 +82,110 @@
 							class="_button item"
 							@click="chosen(emoji, $event)"
 						>
-						<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
+							<MkEmoji
+								class="emoji"
+								:emoji="emoji"
+								:normal="true"
+							/>
 						</button>
 					</div>
 				</section>
 			</div>
 			<div v-once class="group">
 				<header>{{ i18n.ts.customEmojis }}</header>
-			<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
+				<XSection
+					v-for="category in customEmojiCategories"
+					:key="'custom:' + category"
+					:initial-shown="false"
+					:emojis="
+						customEmojis
+							.filter((e) => e.category === category)
+							.map((e) => ':' + e.name + ':')
+					"
+					@chosen="chosen"
+					>{{ category || i18n.ts.other }}</XSection
+				>
 			</div>
 			<div v-once class="group">
 				<header>{{ i18n.ts.emoji }}</header>
-			<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
+				<XSection
+					v-for="category in categories"
+					:key="category"
+					:emojis="
+						emojilist
+							.filter((e) => e.category === category)
+							.map((e) => e.char)
+					"
+					@chosen="chosen"
+					>{{ category }}</XSection
+				>
 			</div>
 		</div>
 		<div class="tabs">
-		<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="ph-asterisk ph-bold ph-lg ph-fw ph-lg"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="ph-smiley ph-bold ph-lg ph-fw ph-lg"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="ph-leaf ph-bold ph-lg ph-fw ph-lg"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="ph-hash ph-bold ph-lg ph-fw ph-lg"></i></button>
+			<button
+				class="_button tab"
+				:class="{ active: tab === 'index' }"
+				@click="tab = 'index'"
+			>
+				<i class="ph-asterisk ph-bold ph-lg ph-fw ph-lg"></i>
+			</button>
+			<button
+				class="_button tab"
+				:class="{ active: tab === 'custom' }"
+				@click="tab = 'custom'"
+			>
+				<i class="ph-smiley ph-bold ph-lg ph-fw ph-lg"></i>
+			</button>
+			<button
+				class="_button tab"
+				:class="{ active: tab === 'unicode' }"
+				@click="tab = 'unicode'"
+			>
+				<i class="ph-leaf ph-bold ph-lg ph-fw ph-lg"></i>
+			</button>
+			<button
+				class="_button tab"
+				:class="{ active: tab === 'tags' }"
+				@click="tab = 'tags'"
+			>
+				<i class="ph-hash ph-bold ph-lg ph-fw ph-lg"></i>
+			</button>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, onMounted } from 'vue';
-import * as Misskey from 'calckey-js';
-import XSection from '@/components/MkEmojiPicker.section.vue';
-import { emojilist, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import Ripple from '@/components/MkRipple.vue';
-import * as os from '@/os';
-import { isTouchUsing } from '@/scripts/touch';
-import { deviceKind } from '@/scripts/device-kind';
-import { emojiCategories, instance } from '@/instance';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
+import { ref, computed, watch, onMounted } from "vue";
+import * as Misskey from "calckey-js";
+import XSection from "@/components/MkEmojiPicker.section.vue";
+import {
+	emojilist,
+	UnicodeEmojiDef,
+	unicodeEmojiCategories as categories,
+} from "@/scripts/emojilist";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import Ripple from "@/components/MkRipple.vue";
+import * as os from "@/os";
+import { isTouchUsing } from "@/scripts/touch";
+import { deviceKind } from "@/scripts/device-kind";
+import { emojiCategories, instance } from "@/instance";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		showPinned?: boolean;
 		asReactionPicker?: boolean;
 		maxHeight?: number;
 		asDrawer?: boolean;
-}>(), {
+	}>(),
+	{
 		showPinned: true,
-});
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'chosen', v: string): void;
+	(ev: "chosen", v: string): void;
 }>();
 
 const search = ref<HTMLInputElement>();
@@ -116,41 +200,48 @@ const {
 	recentlyUsedEmojis,
 } = defaultStore.reactiveState;
 
-const size = computed(() => props.asReactionPicker ? reactionPickerSize.value : 1);
-const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3);
-const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2);
+const size = computed(() =>
+	props.asReactionPicker ? reactionPickerSize.value : 1
+);
+const width = computed(() =>
+	props.asReactionPicker ? reactionPickerWidth.value : 3
+);
+const height = computed(() =>
+	props.asReactionPicker ? reactionPickerHeight.value : 2
+);
 const customEmojiCategories = emojiCategories;
 const customEmojis = instance.emojis;
 const q = ref<string | null>(null);
 const searchResultCustom = ref<Misskey.entities.CustomEmoji[]>([]);
 const searchResultUnicode = ref<UnicodeEmojiDef[]>([]);
-const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
+const tab = ref<"index" | "custom" | "unicode" | "tags">("index");
 
 watch(q, () => {
 	if (emojis.value) emojis.value.scrollTop = 0;
 
-	if (q.value == null || q.value === '') {
+	if (q.value == null || q.value === "") {
 		searchResultCustom.value = [];
 		searchResultUnicode.value = [];
 		return;
 	}
 
-	const newQ = q.value.replace(/:/g, '').toLowerCase();
+	const newQ = q.value.replace(/:/g, "").toLowerCase();
 
 	const searchCustom = () => {
 		const max = 8;
 		const emojis = customEmojis;
 		const matches = new Set<Misskey.entities.CustomEmoji>();
 
-		const exactMatch = emojis.find(emoji => emoji.name === newQ);
+		const exactMatch = emojis.find((emoji) => emoji.name === newQ);
 		if (exactMatch) matches.add(exactMatch);
 
-		if (newQ.includes(' ')) { // AND検索
-			const keywords = newQ.split(' ');
+		if (newQ.includes(" ")) {
+			// AND検索
+			const keywords = newQ.split(" ");
 
 			// 名前にキーワードが含まれている
 			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword))) {
+				if (keywords.every((keyword) => emoji.name.includes(keyword))) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -159,7 +250,15 @@ watch(q, () => {
 
 			// 名前またはエイリアスにキーワードが含まれている
 			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.aliases.some(alias => alias.includes(keyword)))) {
+				if (
+					keywords.every(
+						(keyword) =>
+							emoji.name.includes(keyword) ||
+							emoji.aliases.some((alias) =>
+								alias.includes(keyword)
+							)
+					)
+				) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -174,7 +273,7 @@ watch(q, () => {
 			if (matches.size >= max) return matches;
 
 			for (const emoji of emojis) {
-				if (emoji.aliases.some(alias => alias.startsWith(newQ))) {
+				if (emoji.aliases.some((alias) => alias.startsWith(newQ))) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -190,7 +289,7 @@ watch(q, () => {
 			if (matches.size >= max) return matches;
 
 			for (const emoji of emojis) {
-				if (emoji.aliases.some(alias => alias.includes(newQ))) {
+				if (emoji.aliases.some((alias) => alias.includes(newQ))) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -205,15 +304,16 @@ watch(q, () => {
 		const emojis = emojilist;
 		const matches = new Set<UnicodeEmojiDef>();
 
-		const exactMatch = emojis.find(emoji => emoji.name === newQ);
+		const exactMatch = emojis.find((emoji) => emoji.name === newQ);
 		if (exactMatch) matches.add(exactMatch);
 
-		if (newQ.includes(' ')) { // AND検索
-			const keywords = newQ.split(' ');
+		if (newQ.includes(" ")) {
+			// AND検索
+			const keywords = newQ.split(" ");
 
 			// 名前にキーワードが含まれている
 			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword))) {
+				if (keywords.every((keyword) => emoji.name.includes(keyword))) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -222,7 +322,15 @@ watch(q, () => {
 
 			// 名前またはエイリアスにキーワードが含まれている
 			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.keywords.some(alias => alias.includes(keyword)))) {
+				if (
+					keywords.every(
+						(keyword) =>
+							emoji.name.includes(keyword) ||
+							emoji.keywords.some((alias) =>
+								alias.includes(keyword)
+							)
+					)
+				) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -237,7 +345,9 @@ watch(q, () => {
 			if (matches.size >= max) return matches;
 
 			for (const emoji of emojis) {
-				if (emoji.keywords.some(keyword => keyword.startsWith(newQ))) {
+				if (
+					emoji.keywords.some((keyword) => keyword.startsWith(newQ))
+				) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -253,7 +363,7 @@ watch(q, () => {
 			if (matches.size >= max) return matches;
 
 			for (const emoji of emojis) {
-				if (emoji.keywords.some(keyword => keyword.includes(newQ))) {
+				if (emoji.keywords.some((keyword) => keyword.includes(newQ))) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -268,7 +378,7 @@ watch(q, () => {
 });
 
 function focus() {
-	if (!['smartphone', 'tablet'].includes(deviceKind) && !isTouchUsing) {
+	if (!["smartphone", "tablet"].includes(deviceKind) && !isTouchUsing) {
 		search.value?.focus({
 			preventScroll: true,
 		});
@@ -277,36 +387,40 @@ function focus() {
 
 function reset() {
 	if (emojis.value) emojis.value.scrollTop = 0;
-	q.value = '';
+	q.value = "";
 }
 
-function getKey(emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef): string {
-	return typeof emoji === 'string' ? emoji : (emoji.char || `:${emoji.name}:`);
+function getKey(
+	emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef
+): string {
+	return typeof emoji === "string" ? emoji : emoji.char || `:${emoji.name}:`;
 }
 
 function chosen(emoji: any, ev?: MouseEvent) {
-	const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
+	const el =
+		ev &&
+		((ev.currentTarget ?? ev.target) as HTMLElement | null | undefined);
 	if (el) {
 		const rect = el.getBoundingClientRect();
-		const x = rect.left + (el.offsetWidth / 2);
-		const y = rect.top + (el.offsetHeight / 2);
-		os.popup(Ripple, { x, y }, {}, 'end');
+		const x = rect.left + el.offsetWidth / 2;
+		const y = rect.top + el.offsetHeight / 2;
+		os.popup(Ripple, { x, y }, {}, "end");
 	}
 
 	const key = getKey(emoji);
-	emit('chosen', key);
+	emit("chosen", key);
 
 	// 最近使った絵文字更新
 	if (!pinned.value.includes(key)) {
 		let recents = defaultStore.state.recentlyUsedEmojis;
 		recents = recents.filter((emoji: any) => emoji !== key);
 		recents.unshift(key);
-		defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
+		defaultStore.set("recentlyUsedEmojis", recents.splice(0, 32));
 	}
 }
 
 function paste(event: ClipboardEvent) {
-	const paste = (event.clipboardData || window.clipboardData).getData('text');
+	const paste = (event.clipboardData || window.clipboardData).getData("text");
 	if (done(paste)) {
 		event.preventDefault();
 	}
@@ -314,15 +428,17 @@ function paste(event: ClipboardEvent) {
 
 function done(query?: any): boolean | void {
 	if (query == null) query = q.value;
-	if (query == null || typeof query !== 'string') return;
+	if (query == null || typeof query !== "string") return;
 
-	const q2 = query.replaceAll(':', '');
-	const exactMatchCustom = customEmojis.find(emoji => emoji.name === q2);
+	const q2 = query.replaceAll(":", "");
+	const exactMatchCustom = customEmojis.find((emoji) => emoji.name === q2);
 	if (exactMatchCustom) {
 		chosen(exactMatchCustom);
 		return true;
 	}
-	const exactMatchUnicode = emojilist.find(emoji => emoji.char === q2 || emoji.name === q2);
+	const exactMatchUnicode = emojilist.find(
+		(emoji) => emoji.char === q2 || emoji.name === q2
+	);
 	if (exactMatchUnicode) {
 		chosen(exactMatchUnicode);
 		return true;
@@ -543,7 +659,7 @@ defineExpose({
 
 					> .emoji {
 						height: 1.25em;
-						vertical-align: -.25em;
+						vertical-align: -0.25em;
 						pointer-events: none;
 					}
 				}

packages/client/src/components/MkEmojiPickerDialog.vue

@@ -3,7 +3,12 @@
 		ref="modal"
 		v-slot="{ type, maxHeight }"
 		:z-priority="'middle'"
-	:prefer-type="asReactionPicker && defaultStore.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'"
+		:prefer-type="
+			asReactionPicker &&
+			defaultStore.state.reactionPickerUseDrawerForMobile === false
+				? 'popup'
+				: 'auto'
+		"
 		:transparent-bg="true"
 		:manual-showing="manualShowing"
 		:src="src"
@@ -26,33 +31,36 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
-import { defaultStore } from '@/store';
+import { ref } from "vue";
+import MkModal from "@/components/MkModal.vue";
+import MkEmojiPicker from "@/components/MkEmojiPicker.vue";
+import { defaultStore } from "@/store";
 
-withDefaults(defineProps<{
+withDefaults(
+	defineProps<{
 		manualShowing?: boolean | null;
 		src?: HTMLElement;
 		showPinned?: boolean;
 		asReactionPicker?: boolean;
-}>(), {
+	}>(),
+	{
 		manualShowing: null,
 		showPinned: true,
 		asReactionPicker: false,
-});
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'done', v: any): void;
-	(ev: 'close'): void;
-	(ev: 'closed'): void;
+	(ev: "done", v: any): void;
+	(ev: "close"): void;
+	(ev: "closed"): void;
 }>();
 
 const modal = ref<InstanceType<typeof MkModal>>();
 const picker = ref<InstanceType<typeof MkEmojiPicker>>();
 
 function chosen(emoji: any) {
-	emit('done', emoji);
+	emit("done", emoji);
 	modal.value?.close();
 }
 

packages/client/src/components/MkFeaturedPhotos.vue

@@ -1,15 +1,19 @@
 <template>
-<div v-if="meta" class="xfbouadm" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
+	<div
+		v-if="meta"
+		class="xfbouadm"
+		:style="{ backgroundImage: `url(${meta.backgroundImageUrl})` }"
+	></div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import * as os from '@/os';
+import { ref } from "vue";
+import * as Misskey from "calckey-js";
+import * as os from "@/os";
 
 const meta = ref<Misskey.entities.DetailedInstanceMetadata>();
 
-os.api('meta', { detail: true }).then(gotMeta => {
+os.api("meta", { detail: true }).then((gotMeta) => {
 	meta.value = gotMeta;
 });
 </script>

packages/client/src/components/MkFileListForAdmin.vue

@@ -1,29 +1,49 @@
 <template>
 	<div>
-	<MkPagination v-slot="{items}" :pagination="pagination" class="urempief" :class="{ grid: viewMode === 'grid' }">
+		<MkPagination
+			v-slot="{ items }"
+			:pagination="pagination"
+			class="urempief"
+			:class="{ grid: viewMode === 'grid' }"
+		>
 			<MkA
 				v-for="file in items"
 				:key="file.id"
-			v-tooltip.mfm="`${file.type}\n${bytes(file.size)}\n${new Date(file.createdAt).toLocaleString()}\nby ${file.user ? '@' + Acct.toString(file.user) : 'system'}`"
+				v-tooltip.mfm="
+					`${file.type}\n${bytes(file.size)}\n${new Date(
+						file.createdAt
+					).toLocaleString()}\nby ${
+						file.user ? '@' + Acct.toString(file.user) : 'system'
+					}`
+				"
 				:to="`/admin/file/${file.id}`"
 				class="file _button"
 			>
-			<div v-if="file.isSensitive" class="sensitive-label">{{ i18n.ts.sensitive }}</div>
-			<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
+				<div v-if="file.isSensitive" class="sensitive-label">
+					{{ i18n.ts.sensitive }}
+				</div>
+				<MkDriveFileThumbnail
+					class="thumbnail"
+					:file="file"
+					fit="contain"
+				/>
 				<div v-if="viewMode === 'list'" class="body">
 					<div>
-					<small style="opacity: 0.7;">{{ file.name }}</small>
+						<small style="opacity: 0.7">{{ file.name }}</small>
 					</div>
 					<div>
 						<MkAcct v-if="file.user" :user="file.user" />
 						<div v-else>{{ i18n.ts.system }}</div>
 					</div>
 					<div>
-					<span style="margin-right: 1em;">{{ file.type }}</span>
+						<span style="margin-right: 1em">{{ file.type }}</span>
 						<span>{{ bytes(file.size) }}</span>
 					</div>
 					<div>
-					<span>{{ i18n.ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
+						<span
+							>{{ i18n.ts.registeredDate }}:
+							<MkTime :time="file.createdAt" mode="detail"
+						/></span>
 					</div>
 				</div>
 			</MkA>
@@ -32,25 +52,29 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import MkSwitch from '@/components/ui/switch.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import bytes from '@/filters/bytes';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { computed } from "vue";
+import * as Acct from "calckey-js/built/acct";
+import MkSwitch from "@/components/ui/switch.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import bytes from "@/filters/bytes";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	pagination: any;
-	viewMode: 'grid' | 'list';
+	viewMode: "grid" | "list";
 }>();
 </script>
 
 <style lang="scss" scoped>
 @keyframes sensitive-blink {
-	0% { opacity: 1; }
-	50% { opacity: 0; }
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0;
+	}
 }
 
 .urempief {

packages/client/src/components/MkFileTypeIcon.vue

@@ -1,15 +1,17 @@
 <template>
 	<span class="mk-file-type-icon">
-	<template v-if="kind == 'image'"><i class="ph-file-image ph-bold ph-lg"></i></template>
+		<template v-if="kind == 'image'"
+			><i class="ph-file-image ph-bold ph-lg"></i
+		></template>
 	</span>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed } from "vue";
 
 const props = defineProps<{
 	type: string;
 }>();
 
-const kind = computed(() => props.type.split('/')[0]);
+const kind = computed(() => props.type.split("/")[0]);
 </script>

packages/client/src/components/MkFolder.vue

@@ -1,11 +1,19 @@
 <template>
 	<div v-size="{ max: [500] }" class="ssazuxis">
-	<header class="_button" :style="{ background: bg }" @click="showBody = !showBody">
+		<header
+			class="_button"
+			:style="{ background: bg }"
+			@click="showBody = !showBody"
+		>
 			<div class="title"><slot name="header"></slot></div>
 			<div class="divider"></div>
 			<button class="_button">
-			<template v-if="showBody"><i class="ph-caret-up ph-bold ph-lg"></i></template>
-			<template v-else><i class="ph-caret-down ph-bold ph-lg"></i></template>
+				<template v-if="showBody"
+					><i class="ph-caret-up ph-bold ph-lg"></i
+				></template>
+				<template v-else
+					><i class="ph-caret-down ph-bold ph-lg"></i
+				></template>
 			</button>
 		</header>
 		<transition
@@ -23,11 +31,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import tinycolor from 'tinycolor2';
-
-const localStoragePrefix = 'ui:folder:';
+import { defineComponent } from "vue";
+import tinycolor from "tinycolor2";
 
+const localStoragePrefix = "ui:folder:";
 
 export default defineComponent({
 	props: {
@@ -45,19 +52,28 @@ export default defineComponent({
 	data() {
 		return {
 			bg: null,
-			showBody: (this.persistKey && localStorage.getItem(localStoragePrefix + this.persistKey)) ? localStorage.getItem(localStoragePrefix + this.persistKey) === 't' : this.expanded,
+			showBody:
+				this.persistKey &&
+				localStorage.getItem(localStoragePrefix + this.persistKey)
+					? localStorage.getItem(
+							localStoragePrefix + this.persistKey
+					  ) === "t"
+					: this.expanded,
 		};
 	},
 	watch: {
 		showBody() {
 			if (this.persistKey) {
-				localStorage.setItem(localStoragePrefix + this.persistKey, this.showBody ? 't' : 'f');
+				localStorage.setItem(
+					localStoragePrefix + this.persistKey,
+					this.showBody ? "t" : "f"
+				);
 			}
 		},
 	},
 	mounted() {
 		function getParentBg(el: Element | null): string {
-			if (el == null || el.tagName === 'BODY') return 'var(--bg)';
+			if (el == null || el.tagName === "BODY") return "var(--bg)";
 			const bg = el.style.background || el.style.backgroundColor;
 			if (bg) {
 				return bg;
@@ -66,7 +82,13 @@ export default defineComponent({
 			}
 		}
 		const rawBg = getParentBg(this.$el);
-		const bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+		const bg = tinycolor(
+			rawBg.startsWith("var(")
+				? getComputedStyle(document.documentElement).getPropertyValue(
+						rawBg.slice(4, -1)
+				  )
+				: rawBg
+		);
 		bg.setAlpha(0.85);
 		this.bg = bg.toRgbString();
 	},
@@ -79,14 +101,14 @@ export default defineComponent({
 			const elementHeight = el.getBoundingClientRect().height;
 			el.style.height = 0;
 			el.offsetHeight; // reflow
-			el.style.height = elementHeight + 'px';
+			el.style.height = elementHeight + "px";
 		},
 		afterEnter(el) {
 			el.style.height = null;
 		},
 		leave(el) {
 			const elementHeight = el.getBoundingClientRect().height;
-			el.style.height = elementHeight + 'px';
+			el.style.height = elementHeight + "px";
 			el.offsetHeight; // reflow
 			el.style.height = 0;
 		},
@@ -98,7 +120,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.folder-toggle-enter-active, .folder-toggle-leave-active {
+.folder-toggle-enter-active,
+.folder-toggle-leave-active {
 	overflow-y: hidden;
 	transition: opacity 0.5s, height 0.5s !important;
 }

packages/client/src/components/MkFollowButton.vue

@@ -6,67 +6,82 @@
 			active: isFollowing || hasPendingFollowRequestFromYou,
 			full,
 			large,
-		blocking: isBlocking
+			blocking: isBlocking,
 		}"
 		:disabled="wait"
 		@click="onClick"
 	>
 		<template v-if="!wait">
 			<template v-if="isBlocking">
-			<span v-if="full">{{ i18n.ts.blocked }}</span><i class="ph-prohibit ph-bold ph-lg"></i>
+				<span v-if="full">{{ i18n.ts.blocked }}</span
+				><i class="ph-prohibit ph-bold ph-lg"></i>
 			</template>
-		<template v-else-if="hasPendingFollowRequestFromYou && user.isLocked">
-			<span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="ph-hourglass-medium ph-bold ph-lg"></i>
+			<template
+				v-else-if="hasPendingFollowRequestFromYou && user.isLocked"
+			>
+				<span v-if="full">{{ i18n.ts.followRequestPending }}</span
+				><i class="ph-hourglass-medium ph-bold ph-lg"></i>
 			</template>
-		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
+			<template
+				v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"
+			>
 				<!-- つまりリモートフォローの場合。 -->
-			<span v-if="full">{{ i18n.ts.processing }}</span><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
+				<span v-if="full">{{ i18n.ts.processing }}</span
+				><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
 			</template>
 			<template v-else-if="isFollowing">
-			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ph-minus ph-bold ph-lg"></i>
+				<span v-if="full">{{ i18n.ts.unfollow }}</span
+				><i class="ph-minus ph-bold ph-lg"></i>
 			</template>
 			<template v-else-if="!isFollowing && user.isLocked">
-			<span v-if="full">{{ i18n.ts.followRequest }}</span><i class="ph-plus ph-bold ph-lg"></i>
+				<span v-if="full">{{ i18n.ts.followRequest }}</span
+				><i class="ph-plus ph-bold ph-lg"></i>
 			</template>
 			<template v-else-if="!isFollowing && !user.isLocked">
-			<span v-if="full">{{ i18n.ts.follow }}</span><i class="ph-plus ph-bold ph-lg"></i>
+				<span v-if="full">{{ i18n.ts.follow }}</span
+				><i class="ph-plus ph-bold ph-lg"></i>
 			</template>
 		</template>
 		<template v-else>
-		<span v-if="full">{{ i18n.ts.processing }}</span><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
+			<span v-if="full">{{ i18n.ts.processing }}</span
+			><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
 		</template>
 	</button>
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted } from 'vue';
-import type * as Misskey from 'calckey-js';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
+import { computed, onBeforeUnmount, onMounted } from "vue";
+import type * as Misskey from "calckey-js";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { i18n } from "@/i18n";
 
-const emit = defineEmits(['refresh'])
-const props = withDefaults(defineProps<{
-		user: Misskey.entities.UserDetailed,
-		full?: boolean,
-		large?: boolean,
-	}>(), {
+const emit = defineEmits(["refresh"]);
+const props = withDefaults(
+	defineProps<{
+		user: Misskey.entities.UserDetailed;
+		full?: boolean;
+		large?: boolean;
+	}>(),
+	{
 		full: false,
 		large: false,
-});
+	}
+);
 
 const isBlocking = computed(() => props.user.isBlocking);
 
 let isFollowing = $ref(props.user.isFollowing);
-let hasPendingFollowRequestFromYou = $ref(props.user.hasPendingFollowRequestFromYou);
+let hasPendingFollowRequestFromYou = $ref(
+	props.user.hasPendingFollowRequestFromYou
+);
 let wait = $ref(false);
-const connection = stream.useChannel('main');
+const connection = stream.useChannel("main");
 
 if (props.user.isFollowing == null) {
-	os.api('users/show', {
+	os.api("users/show", {
 		userId: props.user.id,
-	})
-		.then(onFollowChange);
+	}).then(onFollowChange);
 }
 
 function onFollowChange(user: Misskey.entities.UserDetailed) {
@@ -82,40 +97,41 @@ async function onClick() {
 	try {
 		if (isBlocking.value) {
 			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: i18n.t('unblockConfirm'),
+				type: "warning",
+				text: i18n.t("unblockConfirm"),
 			});
-			if (canceled) return
+			if (canceled) return;
 
 			await os.api("blocking/delete", {
 				userId: props.user.id,
-			})
+			});
 			if (props.user.isMuted) {
 				await os.api("mute/delete", {
 					userId: props.user.id,
-				})
+				});
 			}
-			emit('refresh')
-		}
-		else if (isFollowing) {
+			emit("refresh");
+		} else if (isFollowing) {
 			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }),
+				type: "warning",
+				text: i18n.t("unfollowConfirm", {
+					name: props.user.name || props.user.username,
+				}),
 			});
 
 			if (canceled) return;
 
-			await os.api('following/delete', {
+			await os.api("following/delete", {
 				userId: props.user.id,
 			});
 		} else {
 			if (hasPendingFollowRequestFromYou) {
-				await os.api('following/requests/cancel', {
+				await os.api("following/requests/cancel", {
 					userId: props.user.id,
 				});
 				hasPendingFollowRequestFromYou = false;
 			} else {
-				await os.api('following/create', {
+				await os.api("following/create", {
 					userId: props.user.id,
 				});
 				hasPendingFollowRequestFromYou = true;
@@ -129,8 +145,8 @@ async function onClick() {
 }
 
 onMounted(() => {
-	connection.on('follow', onFollowChange);
-	connection.on('unfollow', onFollowChange);
+	connection.on("follow", onFollowChange);
+	connection.on("unfollow", onFollowChange);
 });
 
 onBeforeUnmount(() => {

packages/client/src/components/MkForgotPassword.vue

@@ -1,5 +1,6 @@
 <template>
-<XModalWindow ref="dialog"
+	<XModalWindow
+		ref="dialog"
 		:width="370"
 		:height="400"
 		@close="dialog.close()"
@@ -7,22 +8,51 @@
 	>
 		<template #header>{{ i18n.ts.forgotPassword }}</template>
 
-	<form v-if="instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit">
+		<form
+			v-if="instance.enableEmail"
+			class="bafeceda"
+			@submit.prevent="onSubmit"
+		>
 			<div class="main _formRoot">
-			<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required>
+				<MkInput
+					v-model="username"
+					class="_formBlock"
+					type="text"
+					pattern="^[a-zA-Z0-9_]+$"
+					:spellcheck="false"
+					autofocus
+					required
+				>
 					<template #label>{{ i18n.ts.username }}</template>
 					<template #prefix>@</template>
 				</MkInput>
 
-			<MkInput v-model="email" class="_formBlock" type="email" :spellcheck="false" required>
+				<MkInput
+					v-model="email"
+					class="_formBlock"
+					type="email"
+					:spellcheck="false"
+					required
+				>
 					<template #label>{{ i18n.ts.emailAddress }}</template>
-				<template #caption>{{ i18n.ts._forgotPassword.enterEmail }}</template>
+					<template #caption>{{
+						i18n.ts._forgotPassword.enterEmail
+					}}</template>
 				</MkInput>
 
-			<MkButton class="_formBlock" type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ i18n.ts.send }}</MkButton>
+				<MkButton
+					class="_formBlock"
+					type="submit"
+					:disabled="processing"
+					primary
+					style="margin: 0 auto"
+					>{{ i18n.ts.send }}</MkButton
+				>
 			</div>
 			<div class="sub">
-			<MkA to="/about" class="_link">{{ i18n.ts._forgotPassword.ifNoEmail }}</MkA>
+				<MkA to="/about" class="_link">{{
+					i18n.ts._forgotPassword.ifNoEmail
+				}}</MkA>
 			</div>
 		</form>
 		<div v-else class="bafecedb">
@@ -32,32 +62,32 @@
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import * as os from '@/os';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import * as os from "@/os";
+import { instance } from "@/instance";
+import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
-	(ev: 'done'): void;
-	(ev: 'closed'): void;
+	(ev: "done"): void;
+	(ev: "closed"): void;
 }>();
 
 let dialog: InstanceType<typeof XModalWindow> = $ref();
 
-let username = $ref('');
-let email = $ref('');
+let username = $ref("");
+let email = $ref("");
 let processing = $ref(false);
 
 async function onSubmit() {
 	processing = true;
-	await os.apiWithDialog('request-reset-password', {
+	await os.apiWithDialog("request-reset-password", {
 		username,
 		email,
 	});
-	emit('done');
+	emit("done");
 	dialog.close();
 }
 </script>

packages/client/src/components/MkFormDialog.vue

@@ -16,36 +16,136 @@
 
 		<MkSpacer :margin-min="20" :margin-max="32">
 			<div class="xkpnjxcv _formRoot">
-			<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
-				<FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+				<template
+					v-for="item in Object.keys(form).filter(
+						(item) => !form[item].hidden
+					)"
+				>
+					<FormInput
+						v-if="form[item].type === 'number'"
+						v-model="values[item]"
+						type="number"
+						:step="form[item].step || 1"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<template v-if="form[item].description" #caption>{{
+							form[item].description
+						}}</template>
 					</FormInput>
-				<FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+					<FormInput
+						v-else-if="
+							form[item].type === 'string' &&
+							!form[item].multiline
+						"
+						v-model="values[item]"
+						type="text"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<template v-if="form[item].description" #caption>{{
+							form[item].description
+						}}</template>
 					</FormInput>
-				<FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+					<FormTextarea
+						v-else-if="
+							form[item].type === 'string' && form[item].multiline
+						"
+						v-model="values[item]"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<template v-if="form[item].description" #caption>{{
+							form[item].description
+						}}</template>
 					</FormTextarea>
-				<FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]" class="_formBlock">
+					<FormSwitch
+						v-else-if="form[item].type === 'boolean'"
+						v-model="values[item]"
+						class="_formBlock"
+					>
 						<span v-text="form[item].label || item"></span>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+						<template v-if="form[item].description" #caption>{{
+							form[item].description
+						}}</template>
 					</FormSwitch>
-				<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option>
+					<FormSelect
+						v-else-if="form[item].type === 'enum'"
+						v-model="values[item]"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<option
+							v-for="item in form[item].enum"
+							:key="item.value"
+							:value="item.value"
+						>
+							{{ item.label }}
+						</option>
 					</FormSelect>
-				<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
+					<FormRadios
+						v-else-if="form[item].type === 'radio'"
+						v-model="values[item]"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<option
+							v-for="item in form[item].options"
+							:key="item.value"
+							:value="item.value"
+						>
+							{{ item.label }}
+						</option>
 					</FormRadios>
-				<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].min" :max="form[item].max" :step="form[item].step" :text-converter="form[item].textConverter" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+					<FormRange
+						v-else-if="form[item].type === 'range'"
+						v-model="values[item]"
+						:min="form[item].min"
+						:max="form[item].max"
+						:step="form[item].step"
+						:text-converter="form[item].textConverter"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<template v-if="form[item].description" #caption>{{
+							form[item].description
+						}}</template>
 					</FormRange>
-				<MkButton v-else-if="form[item].type === 'button'" class="_formBlock" @click="form[item].action($event, values)">
+					<MkButton
+						v-else-if="form[item].type === 'button'"
+						class="_formBlock"
+						@click="form[item].action($event, values)"
+					>
 						<span v-text="form[item].content || item"></span>
 					</MkButton>
 				</template>
@@ -55,16 +155,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import FormInput from './form/input.vue';
-import FormTextarea from './form/textarea.vue';
-import FormSwitch from './form/switch.vue';
-import FormSelect from './form/select.vue';
-import FormRange from './form/range.vue';
-import MkButton from './MkButton.vue';
-import FormRadios from './form/radios.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import FormInput from "./form/input.vue";
+import FormTextarea from "./form/textarea.vue";
+import FormSwitch from "./form/switch.vue";
+import FormSelect from "./form/select.vue";
+import FormRange from "./form/range.vue";
+import MkButton from "./MkButton.vue";
+import FormRadios from "./form/radios.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -89,7 +189,7 @@ export default defineComponent({
 		},
 	},
 
-	emits: ['done'],
+	emits: ["done"],
 
 	data() {
 		return {
@@ -106,14 +206,14 @@ export default defineComponent({
 
 	methods: {
 		ok() {
-			this.$emit('done', {
+			this.$emit("done", {
 				result: this.values,
 			});
 			this.$refs.dialog.close();
 		},
 
 		cancel() {
-			this.$emit('done', {
+			this.$emit("done", {
 				canceled: true,
 			});
 			this.$refs.dialog.close();
@@ -124,6 +224,5 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .xkpnjxcv {
-
 }
 </style>

packages/client/src/components/MkFormula.vue

@@ -3,12 +3,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import * as os from '@/os';
+import { defineComponent, defineAsyncComponent } from "vue";
+import * as os from "@/os";
 
 export default defineComponent({
 	components: {
-		XFormula: defineAsyncComponent(() => import('@/components/MkFormulaCore.vue')),
+		XFormula: defineAsyncComponent(
+			() => import("@/components/MkFormulaCore.vue")
+		),
 	},
 	props: {
 		formula: {

packages/client/src/components/MkFormulaCore.vue

@@ -4,27 +4,27 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import katex from 'katex';
+import { defineComponent } from "vue";
+import katex from "katex";
 
 export default defineComponent({
 	props: {
 		formula: {
 			type: String,
-			required: true
+			required: true,
 		},
 		block: {
 			type: Boolean,
-			required: true
-		}
+			required: true,
+		},
 	},
 	computed: {
 		compiledFormula(): any {
 			return katex.renderToString(this.formula, {
-				throwOnError: false
+				throwOnError: false,
 			} as any);
-		}
-	}
+		},
+	},
 });
 </script>
 

packages/client/src/components/MkGalleryPostPreview.vue

@@ -1,7 +1,11 @@
 <template>
 	<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1">
 		<div class="thumbnail">
-		<ImgWithBlurhash class="img" :src="post.files[0].thumbnailUrl" :hash="post.files[0].blurhash"/>
+			<ImgWithBlurhash
+				class="img"
+				:src="post.files[0].thumbnailUrl"
+				:hash="post.files[0].blurhash"
+			/>
 		</div>
 		<article>
 			<header>
@@ -15,9 +19,9 @@
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { userName } from '@/filters/user';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import {} from "vue";
+import { userName } from "@/filters/user";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 
 const props = defineProps<{
 	post: any;

packages/client/src/components/MkGoogle.vue

@@ -1,13 +1,16 @@
 <template>
 	<div class="mk-google">
-	<input v-model="query" type="search" :placeholder="q">
-	<button @click="search"><i class="ph-magnifying-glass ph-bold ph-lg"></i> {{ i18n.ts.searchByGoogle }}</button>
+		<input v-model="query" type="search" :placeholder="q" />
+		<button @click="search">
+			<i class="ph-magnifying-glass ph-bold ph-lg"></i>
+			{{ i18n.ts.searchByGoogle }}
+		</button>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	q: string;
@@ -16,7 +19,10 @@ const props = defineProps<{
 const query = ref(props.q);
 
 const search = () => {
-	window.open(`https://search.annoyingorange.xyz/search?q=${query.value}`, '_blank');
+	window.open(
+		`https://search.annoyingorange.xyz/search?q=${query.value}`,
+		"_blank"
+	);
 };
 </script>
 

packages/client/src/components/MkHeatmap.vue

@@ -8,16 +8,23 @@
 </template>
 
 <script lang="ts" setup>
-import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
-import { Chart } from 'chart.js';
-import tinycolor from 'tinycolor2';
-import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { chartVLine } from '@/scripts/chart-vline';
-import { alpha } from '@/scripts/color';
-import { initChart } from '@/scripts/init-chart';
+import {
+	markRaw,
+	version as vueVersion,
+	onMounted,
+	onBeforeUnmount,
+	nextTick,
+	watch,
+} from "vue";
+import { Chart } from "chart.js";
+import tinycolor from "tinycolor2";
+import { MatrixController, MatrixElement } from "chartjs-chart-matrix";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
+import { chartVLine } from "@/scripts/chart-vline";
+import { alpha } from "@/scripts/color";
+import { initChart } from "@/scripts/init-chart";
 
 initChart();
 
@@ -32,7 +39,7 @@ let chartInstance: Chart = null;
 let fetching = $ref(true);
 
 const { handler: externalTooltipHandler } = useChartTooltip({
-	position: 'middle',
+	position: "middle",
 });
 
 async function renderChart() {
@@ -57,7 +64,9 @@ async function renderChart() {
 	const format = (arr) => {
 		return arr.map((v, i) => {
 			const dt = getDate(i);
-			const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1).toString().padStart(2, '0')}-${dt.getDate().toString().padStart(2, '0')}`;
+			const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1)
+				.toString()
+				.padStart(2, "0")}-${dt.getDate().toString().padStart(2, "0")}`;
 			return {
 				x: iso,
 				y: dt.getDay(),
@@ -69,20 +78,35 @@ async function renderChart() {
 
 	let values;
 
-	if (props.src === 'active-users') {
-		const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' });
+	if (props.src === "active-users") {
+		const raw = await os.api("charts/active-users", {
+			limit: chartLimit,
+			span: "day",
+		});
 		values = raw.readWrite;
-	} else if (props.src === 'notes') {
-		const raw = await os.api('charts/notes', { limit: chartLimit, span: 'day' });
+	} else if (props.src === "notes") {
+		const raw = await os.api("charts/notes", {
+			limit: chartLimit,
+			span: "day",
+		});
 		values = raw.local.inc;
-	} else if (props.src === 'ap-requests-inbox-received') {
-		const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
+	} else if (props.src === "ap-requests-inbox-received") {
+		const raw = await os.api("charts/ap-request", {
+			limit: chartLimit,
+			span: "day",
+		});
 		values = raw.inboxReceived;
-	} else if (props.src === 'ap-requests-deliver-succeeded') {
-		const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
+	} else if (props.src === "ap-requests-deliver-succeeded") {
+		const raw = await os.api("charts/ap-request", {
+			limit: chartLimit,
+			span: "day",
+		});
 		values = raw.deliverSucceeded;
-	} else if (props.src === 'ap-requests-deliver-failed') {
-		const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
+	} else if (props.src === "ap-requests-deliver-failed") {
+		const raw = await os.api("charts/ap-request", {
+			limit: chartLimit,
+			span: "day",
+		});
 		values = raw.deliverFailed;
 	}
 
@@ -90,29 +114,36 @@ async function renderChart() {
 
 	await nextTick();
 
-	const color = defaultStore.state.darkMode ? '#ebbcba' : '#d7827e';
+	const color = defaultStore.state.darkMode ? "#ebbcba" : "#d7827e";
 
 	// 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする
-	const max = values.slice().sort((a, b) => b - a).slice(0, 3).reduce((a, b) => a + b, 0) / 3;
+	const max =
+		values
+			.slice()
+			.sort((a, b) => b - a)
+			.slice(0, 3)
+			.reduce((a, b) => a + b, 0) / 3;
 
 	const min = Math.max(0, Math.min(...values) - 1);
 
 	const marginEachCell = 4;
 
 	chartInstance = new Chart(chartEl, {
-		type: 'matrix',
+		type: "matrix",
 		data: {
-			datasets: [{
-				label: 'Read & Write',
+			datasets: [
+				{
+					label: "Read & Write",
 					data: format(values),
 					pointRadius: 0,
 					borderWidth: 0,
-				borderJoinStyle: 'round',
+					borderJoinStyle: "round",
 					borderRadius: 3,
 					backgroundColor(c) {
 						const value = c.dataset.data[c.dataIndex].v;
 						let a = (value - min) / max;
-					if (value !== 0) { // 0でない限りは完全に不可視にはしない
+						if (value !== 0) {
+							// 0でない限りは完全に不可視にはしない
 							a = Math.max(a, 0.05);
 						}
 						return alpha(color, a);
@@ -126,7 +157,8 @@ async function renderChart() {
 						const a = c.chart.chartArea ?? {};
 						return (a.bottom - a.top) / 7 - marginEachCell;
 					},
-			}],
+				},
+			],
 		},
 		options: {
 			aspectRatio: wide ? 6 : narrow ? 1.8 : 3.2,
@@ -140,17 +172,17 @@ async function renderChart() {
 			},
 			scales: {
 				x: {
-					type: 'time',
+					type: "time",
 					offset: true,
-					position: 'bottom',
+					position: "bottom",
 					time: {
-						unit: 'week',
-						round: 'week',
+						unit: "week",
+						round: "week",
 						isoWeekday: 0,
 						displayFormats: {
-							day: 'M/d',
-							month: 'Y/M',
-							week: 'M/d',
+							day: "M/d",
+							month: "Y/M",
+							week: "M/d",
 						},
 					},
 					grid: {
@@ -165,7 +197,7 @@ async function renderChart() {
 				y: {
 					offset: true,
 					reverse: true,
-					position: 'right',
+					position: "right",
 					grid: {
 						display: false,
 					},
@@ -176,7 +208,8 @@ async function renderChart() {
 						font: {
 							size: 9,
 						},
-						callback: (value, index, values) => ['', 'Mon', '', 'Wed', '', 'Fri', ''][value],
+						callback: (value, index, values) =>
+							["", "Mon", "", "Wed", "", "Fri", ""][value],
 					},
 				},
 			},
@@ -188,12 +221,13 @@ async function renderChart() {
 					enabled: false,
 					callbacks: {
 						title(context) {
-							const v = context[0].dataset.data[context[0].dataIndex];
+							const v =
+								context[0].dataset.data[context[0].dataIndex];
 							return v.d;
 						},
 						label(context) {
 							const v = context.dataset.data[context.dataIndex];
-							return ['Active: ' + v.v];
+							return ["Active: " + v.v];
 						},
 					},
 					//mode: 'index',
@@ -207,10 +241,13 @@ async function renderChart() {
 	});
 }
 
-watch(() => props.src, () => {
+watch(
+	() => props.src,
+	() => {
 		fetching = true;
 		renderChart();
-});
+	}
+);
 
 onMounted(async () => {
 	renderChart();

packages/client/src/components/MkImageViewer.vue

@@ -1,31 +1,46 @@
 <template>
-<MkModal ref="modal" :z-priority="'middle'" @click="modal.close()" @closed="emit('closed')">
+	<MkModal
+		ref="modal"
+		:z-priority="'middle'"
+		@click="modal.close()"
+		@closed="emit('closed')"
+	>
 		<div class="xubzgfga">
 			<header>{{ image.name }}</header>
-		<img :src="image.url" :alt="image.comment" :title="image.comment" @click="modal.close()"/>
+			<img
+				:src="image.url"
+				:alt="image.comment"
+				:title="image.comment"
+				@click="modal.close()"
+			/>
 			<footer>
 				<span>{{ image.type }}</span>
 				<span>{{ bytes(image.size) }}</span>
-			<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
+				<span v-if="image.properties && image.properties.width"
+					>{{ number(image.properties.width) }}px ×
+					{{ number(image.properties.height) }}px</span
+				>
 			</footer>
 		</div>
 	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import type * as misskey from 'calckey-js';
-import bytes from '@/filters/bytes';
-import number from '@/filters/number';
-import MkModal from '@/components/MkModal.vue';
+import {} from "vue";
+import type * as misskey from "calckey-js";
+import bytes from "@/filters/bytes";
+import number from "@/filters/number";
+import MkModal from "@/components/MkModal.vue";
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		image: misskey.entities.DriveFile;
-}>(), {
-});
+	}>(),
+	{}
+);
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 const modal = $ref<InstanceType<typeof MkModal>>();

packages/client/src/components/MkImgWithBlurhash.vue

@@ -1,15 +1,29 @@
 <template>
 	<div class="xubzgfgb" :class="{ cover }" :title="title">
-	<canvas v-if="!loaded" ref="canvas" :width="size" :height="size" :title="title"/>
-	<img v-if="src" :src="src" :title="title" :type="type" :alt="alt" @load="onLoad"/>
+		<canvas
+			v-if="!loaded"
+			ref="canvas"
+			:width="size"
+			:height="size"
+			:title="title"
+		/>
+		<img
+			v-if="src"
+			:src="src"
+			:title="title"
+			:type="type"
+			:alt="alt"
+			@load="onLoad"
+		/>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import { decode } from 'blurhash';
+import { onMounted } from "vue";
+import { decode } from "blurhash";
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		src?: string | null;
 		hash?: string;
 		alt?: string;
@@ -17,14 +31,16 @@ const props = withDefaults(defineProps<{
 		title?: string | null;
 		size?: number;
 		cover?: boolean;
-}>(), {
+	}>(),
+	{
 		src: null,
 		type: null,
-	alt: '',
+		alt: "",
 		title: null,
 		size: 64,
 		cover: true,
-});
+	}
+);
 
 const canvas = $ref<HTMLCanvasElement>();
 let loaded = $ref(false);
@@ -32,7 +48,7 @@ let loaded = $ref(false);
 function draw() {
 	if (props.hash == null) return;
 	const pixels = decode(props.hash, props.size, props.size);
-	const ctx = canvas.getContext('2d');
+	const ctx = canvas.getContext("2d");
 	const imageData = ctx!.createImageData(props.size, props.size);
 	imageData.data.set(pixels);
 	ctx!.putImageData(imageData, 0, 0);

packages/client/src/components/MkInfo.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 
 defineProps<{
 	warn?: boolean;

packages/client/src/components/MkInstanceCardMini.vue

@@ -1,19 +1,32 @@
 <template>
-<div :class="[$style.root, { yellow: instance.isNotResponding, red: instance.isBlocked, gray: instance.isSuspended }]">
+	<div
+		:class="[
+			$style.root,
+			{
+				yellow: instance.isNotResponding,
+				red: instance.isBlocked,
+				gray: instance.isSuspended,
+			},
+		]"
+	>
 		<img class="icon" :src="getInstanceIcon(instance)" alt="" />
 		<div class="body">
 			<span class="host">{{ instance.name ?? instance.host }}</span>
-		<span class="sub _monospace"><b>{{ instance.host }}</b> / {{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</span>
+			<span class="sub _monospace"
+				><b>{{ instance.host }}</b> /
+				{{ instance.softwareName || "?" }}
+				{{ instance.softwareVersion }}</span
+			>
 		</div>
 		<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" />
 	</div>
 </template>
 
 <script lang="ts" setup>
-import * as misskey from 'calckey-js';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+import * as misskey from "calckey-js";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
 const props = defineProps<{
 	instance: misskey.entities.Instance;
@@ -21,14 +34,22 @@ const props = defineProps<{
 
 let chartValues = $ref<number[] | null>(null);
 
-os.apiGet('charts/instance', { host: props.instance.host, limit: 16 + 1, span: 'day' }).then(res => {
+os.apiGet("charts/instance", {
+	host: props.instance.host,
+	limit: 16 + 1,
+	span: "day",
+}).then((res) => {
 	// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
 	res.requests.received.splice(0, 1);
 	chartValues = res.requests.received;
 });
 
 function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+	return (
+		getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
+		getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
+		"/client-assets/dummy.png"
+	);
 }
 </script>
 
@@ -86,19 +107,46 @@ function getInstanceIcon(instance): string {
 
 	&:global(.yellow) {
 		--c: rgb(255 196 0 / 15%);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+		background-image: linear-gradient(
+			45deg,
+			var(--c) 16.67%,
+			transparent 16.67%,
+			transparent 50%,
+			var(--c) 50%,
+			var(--c) 66.67%,
+			transparent 66.67%,
+			transparent 100%
+		);
 		background-size: 16px 16px;
 	}
 
 	&:global(.red) {
 		--c: rgb(255 0 0 / 15%);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+		background-image: linear-gradient(
+			45deg,
+			var(--c) 16.67%,
+			transparent 16.67%,
+			transparent 50%,
+			var(--c) 50%,
+			var(--c) 66.67%,
+			transparent 66.67%,
+			transparent 100%
+		);
 		background-size: 16px 16px;
 	}
 
 	&:global(.gray) {
 		--c: var(--bg);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+		background-image: linear-gradient(
+			45deg,
+			var(--c) 16.67%,
+			transparent 16.67%,
+			transparent 50%,
+			var(--c) 50%,
+			var(--c) 66.67%,
+			transparent 66.67%,
+			transparent 100%
+		);
 		background-size: 16px 16px;
 	}
 }

packages/client/src/components/MkInstanceSelectDialog.vue

@@ -11,15 +11,38 @@
 		<template #header>{{ i18n.ts.selectInstance }}</template>
 		<div class="mehkoush">
 			<div class="form">
-				<MkInput v-model="hostname" :autofocus="true" @update:modelValue="search">
+				<MkInput
+					v-model="hostname"
+					:autofocus="true"
+					@update:modelValue="search"
+				>
 					<template #label>{{ i18n.ts.instance }}</template>
 				</MkInput>
 			</div>
-		<div v-if="hostname != ''" class="result" :class="{ hit: instances.length > 0 }">
+			<div
+				v-if="hostname != ''"
+				class="result"
+				:class="{ hit: instances.length > 0 }"
+			>
 				<div v-if="instances.length > 0" class="instances">
-				<div v-for="item in instances" :key="item.id" class="instance" :class="{ selected: selected && selected.id === item.id }" @click="selected = item" @dblclick="ok()">
+					<div
+						v-for="item in instances"
+						:key="item.id"
+						class="instance"
+						:class="{
+							selected: selected && selected.id === item.id,
+						}"
+						@click="selected = item"
+						@dblclick="ok()"
+					>
 						<div class="body">
-						<img class="icon" :src="item.iconUrl ?? '/client-assets/dummy.png'" aria-hidden="true"/>
+							<img
+								class="icon"
+								:src="
+									item.iconUrl ?? '/client-assets/dummy.png'
+								"
+								aria-hidden="true"
+							/>
 							<span class="name">{{ item.host }}</span>
 						</div>
 					</div>
@@ -33,55 +56,58 @@
 </template>
 
 <script lang="ts" setup>
-import MkInput from '@/components/form/input.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { Instance } from 'calckey-js/built/entities';
+import MkInput from "@/components/form/input.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { Instance } from "calckey-js/built/entities";
 
 const emit = defineEmits<{
-	(ev: 'ok', selected: Instance): void;
-	(ev: 'cancel'): void;
-	(ev: 'closed'): void;
+	(ev: "ok", selected: Instance): void;
+	(ev: "cancel"): void;
+	(ev: "closed"): void;
 }>();
 
-let hostname = $ref('');
+let hostname = $ref("");
 let instances: Instance[] = $ref([]);
 let selected: Instance | null = $ref(null);
 let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
 
 let searchOrderLatch = 0;
 const search = () => {
-	if (hostname === '') {
+	if (hostname === "") {
 		instances = [];
 		return;
 	}
 
 	const searchId = ++searchOrderLatch;
-	os.api('federation/instances', {
+	os.api("federation/instances", {
 		host: hostname,
 		limit: 10,
 		blocked: false,
 		suspended: false,
-		sort: '+pubSub',
-	}).then(_instances => {
+		sort: "+pubSub",
+	}).then((_instances) => {
 		if (searchId !== searchOrderLatch) return;
-		instances = _instances.map(x => ({
+		instances = _instances.map(
+			(x) =>
+				({
 					id: x.id,
 					host: x.host,
 					iconUrl: x.iconUrl,
-		} as Instance));
+				} as Instance)
+		);
 	});
 };
 
 const ok = () => {
 	if (selected == null) return;
-	emit('ok', selected);
+	emit("ok", selected);
 	dialogEl?.close();
 };
 
 const cancel = () => {
-	emit('cancel');
+	emit("cancel");
 	dialogEl?.close();
 };
 </script>

packages/client/src/components/MkInstanceStats.vue

@@ -4,46 +4,79 @@
 			<template #header>Chart</template>
 			<div :class="$style.chart">
 				<div class="selects">
-					<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
+					<MkSelect v-model="chartSrc" style="margin: 0; flex: 1">
 						<optgroup :label="i18n.ts.federation">
-							<option value="federation">{{ i18n.ts._charts.federation }}</option>
-							<option value="ap-request">{{ i18n.ts._charts.apRequest }}</option>
+							<option value="federation">
+								{{ i18n.ts._charts.federation }}
+							</option>
+							<option value="ap-request">
+								{{ i18n.ts._charts.apRequest }}
+							</option>
 						</optgroup>
 						<optgroup :label="i18n.ts.users">
-							<option value="users">{{ i18n.ts._charts.usersIncDec }}</option>
-							<option value="users-total">{{ i18n.ts._charts.usersTotal }}</option>
-							<option value="active-users">{{ i18n.ts._charts.activeUsers }}</option>
+							<option value="users">
+								{{ i18n.ts._charts.usersIncDec }}
+							</option>
+							<option value="users-total">
+								{{ i18n.ts._charts.usersTotal }}
+							</option>
+							<option value="active-users">
+								{{ i18n.ts._charts.activeUsers }}
+							</option>
 						</optgroup>
 						<optgroup :label="i18n.ts.notes">
-							<option value="notes">{{ i18n.ts._charts.notesIncDec }}</option>
-							<option value="local-notes">{{ i18n.ts._charts.localNotesIncDec }}</option>
-							<option value="remote-notes">{{ i18n.ts._charts.remoteNotesIncDec }}</option>
-							<option value="notes-total">{{ i18n.ts._charts.notesTotal }}</option>
+							<option value="notes">
+								{{ i18n.ts._charts.notesIncDec }}
+							</option>
+							<option value="local-notes">
+								{{ i18n.ts._charts.localNotesIncDec }}
+							</option>
+							<option value="remote-notes">
+								{{ i18n.ts._charts.remoteNotesIncDec }}
+							</option>
+							<option value="notes-total">
+								{{ i18n.ts._charts.notesTotal }}
+							</option>
 						</optgroup>
 						<optgroup :label="i18n.ts.drive">
-							<option value="drive-files">{{ i18n.ts._charts.filesIncDec }}</option>
-							<option value="drive">{{ i18n.ts._charts.storageUsageIncDec }}</option>
+							<option value="drive-files">
+								{{ i18n.ts._charts.filesIncDec }}
+							</option>
+							<option value="drive">
+								{{ i18n.ts._charts.storageUsageIncDec }}
+							</option>
 						</optgroup>
 					</MkSelect>
-					<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px;">
+					<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px">
 						<option value="hour">{{ i18n.ts.perHour }}</option>
 						<option value="day">{{ i18n.ts.perDay }}</option>
 					</MkSelect>
 				</div>
 				<div class="chart _panel">
-					<MkChart :src="chartSrc" :span="chartSpan" :limit="chartLimit" :detailed="true"></MkChart>
+					<MkChart
+						:src="chartSrc"
+						:span="chartSpan"
+						:limit="chartLimit"
+						:detailed="true"
+					></MkChart>
 				</div>
 			</div>
 		</MkFolder>
 
 		<MkFolder class="item">
 			<template #header>Active users heatmap</template>
-			<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0;">
+			<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0">
 				<option value="active-users">Active users</option>
 				<option value="notes">Notes</option>
-				<option value="ap-requests-inbox-received">Fediverse Requests: inboxReceived</option>
-				<option value="ap-requests-deliver-succeeded">Fediverse Requests: deliverSucceeded</option>
-				<option value="ap-requests-deliver-failed">Fediverse Requests: deliverFailed</option>
+				<option value="ap-requests-inbox-received">
+					Fediverse Requests: inboxReceived
+				</option>
+				<option value="ap-requests-deliver-succeeded">
+					Fediverse Requests: deliverSucceeded
+				</option>
+				<option value="ap-requests-deliver-failed">
+					Fediverse Requests: deliverFailed
+				</option>
 			</MkSelect>
 			<div class="_panel" :class="$style.heatmap">
 				<MkHeatmap :src="heatmapSrc" />
@@ -69,45 +102,49 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import { Chart } from 'chart.js';
-import MkSelect from '@/components/form/select.vue';
-import MkChart from '@/components/MkChart.vue';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import MkHeatmap from '@/components/MkHeatmap.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import { initChart } from '@/scripts/init-chart';
+import { onMounted } from "vue";
+import { Chart } from "chart.js";
+import MkSelect from "@/components/form/select.vue";
+import MkChart from "@/components/MkChart.vue";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import MkHeatmap from "@/components/MkHeatmap.vue";
+import MkFolder from "@/components/MkFolder.vue";
+import { initChart } from "@/scripts/init-chart";
 
 initChart();
 
 const chartLimit = 500;
-let chartSpan = $ref<'hour' | 'day'>('hour');
-let chartSrc = $ref('active-users');
-let heatmapSrc = $ref('active-users');
+let chartSpan = $ref<"hour" | "day">("hour");
+let chartSrc = $ref("active-users");
+let heatmapSrc = $ref("active-users");
 let subDoughnutEl = $shallowRef<HTMLCanvasElement>();
 let pubDoughnutEl = $shallowRef<HTMLCanvasElement>();
 
 const { handler: externalTooltipHandler1 } = useChartTooltip({
-	position: 'middle',
+	position: "middle",
 });
 const { handler: externalTooltipHandler2 } = useChartTooltip({
-	position: 'middle',
+	position: "middle",
 });
 
 function createDoughnut(chartEl, tooltip, data) {
 	const chartInstance = new Chart(chartEl, {
-		type: 'doughnut',
+		type: "doughnut",
 		data: {
-			labels: data.map(x => x.name),
-			datasets: [{
-				backgroundColor: data.map(x => x.color),
-				borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
+			labels: data.map((x) => x.name),
+			datasets: [
+				{
+					backgroundColor: data.map((x) => x.color),
+					borderColor: getComputedStyle(
+						document.documentElement
+					).getPropertyValue("--panel"),
 					borderWidth: 2,
 					hoverOffset: 0,
-				data: data.map(x => x.value),
-			}],
+					data: data.map((x) => x.value),
+				},
+			],
 		},
 		options: {
 			maintainAspectRatio: false,
@@ -120,7 +157,12 @@ function createDoughnut(chartEl, tooltip, data) {
 				},
 			},
 			onClick: (ev) => {
-				const hit = chartInstance.getElementsAtEventForMode(ev, 'nearest', { intersect: true }, false)[0];
+				const hit = chartInstance.getElementsAtEventForMode(
+					ev,
+					"nearest",
+					{ intersect: true },
+					false
+				)[0];
 				if (hit && data[hit.index].onClick) {
 					data[hit.index].onClick();
 				}
@@ -131,7 +173,7 @@ function createDoughnut(chartEl, tooltip, data) {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
@@ -145,24 +187,48 @@ function createDoughnut(chartEl, tooltip, data) {
 }
 
 onMounted(() => {
-	os.apiGet('federation/stats', { limit: 30 }).then(fedStats => {
-		createDoughnut(subDoughnutEl, externalTooltipHandler1, fedStats.topSubInstances.map(x => ({
+	os.apiGet("federation/stats", { limit: 30 }).then((fedStats) => {
+		createDoughnut(
+			subDoughnutEl,
+			externalTooltipHandler1,
+			fedStats.topSubInstances
+				.map((x) => ({
 					name: x.host,
 					color: x.themeColor,
 					value: x.followersCount,
 					onClick: () => {
 						os.pageWindow(`/instance-info/${x.host}`);
 					},
-		})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowersCount }]));
+				}))
+				.concat([
+					{
+						name: "(other)",
+						color: "#80808080",
+						value: fedStats.otherFollowersCount,
+					},
+				])
+		);
 
-		createDoughnut(pubDoughnutEl, externalTooltipHandler2, fedStats.topPubInstances.map(x => ({
+		createDoughnut(
+			pubDoughnutEl,
+			externalTooltipHandler2,
+			fedStats.topPubInstances
+				.map((x) => ({
 					name: x.host,
 					color: x.themeColor,
 					value: x.followingCount,
 					onClick: () => {
 						os.pageWindow(`/instance-info/${x.host}`);
 					},
-		})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowingCount }]));
+				}))
+				.concat([
+					{
+						name: "(other)",
+						color: "#80808080",
+						value: fedStats.otherFollowingCount,
+					},
+				])
+		);
 	});
 });
 </script>
@@ -205,7 +271,8 @@ onMounted(() => {
 			display: flex;
 			gap: 16px;
 
-			> .sub, > .pub {
+			> .sub,
+			> .pub {
 				flex: 1;
 				min-width: 0;
 				position: relative;

packages/client/src/components/MkInstanceTicker.vue

@@ -6,36 +6,45 @@
 </template>
 
 <script lang="ts" setup>
-import { instanceName } from '@/config';
-import { instance as Instance } from '@/instance';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+import { instanceName } from "@/config";
+import { instance as Instance } from "@/instance";
+import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
 const props = defineProps<{
 	instance?: {
-		faviconUrl?: string
-		name: string
-		themeColor?: string
-	}
+		faviconUrl?: string;
+		name: string;
+		themeColor?: string;
+	};
 }>();
 
 let ticker = $ref<HTMLElement | null>(null);
 
 // if no instance data is given, this is for the local instance
 const instance = props.instance ?? {
-	faviconUrl: Instance.iconUrl || Instance.faviconUrl || '/favicon.ico',
+	faviconUrl: Instance.iconUrl || Instance.faviconUrl || "/favicon.ico",
 	name: instanceName,
-	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content
+	themeColor: (
+		document.querySelector(
+			'meta[name="theme-color-orig"]'
+		) as HTMLMetaElement
+	)?.content,
 };
 
 const computedStyle = getComputedStyle(document.documentElement);
-const themeColor = instance.themeColor ?? computedStyle.getPropertyValue('--bg');
+const themeColor =
+	instance.themeColor ?? computedStyle.getPropertyValue("--bg");
 
 const bg = {
 	background: `linear-gradient(90deg, ${themeColor}, ${themeColor}55)`,
 };
 
 function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+	return (
+		getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
+		getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
+		"/client-assets/dummy.png"
+	);
 }
 </script>
 
@@ -48,10 +57,10 @@ function getInstanceIcon(instance): string {
 	align-items: center;
 	height: 1.1em;
 	justify-self: flex-end;
-	padding: .2em .4em;
-	padding: .2em .4em;
+	padding: 0.2em 0.4em;
+	padding: 0.2em 0.4em;
 	border-radius: 100px;
-	font-size: .8em;
+	font-size: 0.8em;
 	text-shadow: 0 2px 2px var(--shadow);
 	overflow: hidden;
 	.header > .body & {
@@ -80,11 +89,14 @@ function getInstanceIcon(instance): string {
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg), -1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
-		.article > .main &, .header > .body & {
+		text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg),
+			-1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
+		.article > .main &,
+		.header > .body & {
 			display: unset;
 		}
-		.article > .main &, .header > .body & {
+		.article > .main &,
+		.header > .body & {
 			display: unset;
 		}
 	}

packages/client/src/components/MkKeyValue.vue

@@ -5,24 +5,35 @@
 		</div>
 		<div class="value">
 			<slot name="value"></slot>
-		<button v-if="copy" v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="ph-clipboard-text ph-bold"></i></button>
+			<button
+				v-if="copy"
+				v-tooltip="i18n.ts.copy"
+				class="_textButton"
+				style="margin-left: 0.5em"
+				@click="copy_"
+			>
+				<i class="ph-clipboard-text ph-bold"></i>
+			</button>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		copy?: string | null;
 		oneline?: boolean;
-}>(), {
+	}>(),
+	{
 		copy: null,
 		oneline: false,
-});
+	}
+);
 
 const copy_ = () => {
 	copyToClipboard(props.copy);

packages/client/src/components/MkLaunchPad.vue

@@ -1,17 +1,49 @@
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="preferedModalType" :anchor="anchor" :transparent-bg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
-	<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
+	<MkModal
+		ref="modal"
+		v-slot="{ type, maxHeight }"
+		:prefer-type="preferedModalType"
+		:anchor="anchor"
+		:transparent-bg="true"
+		:src="src"
+		@click="modal.close()"
+		@closed="emit('closed')"
+	>
+		<div
+			class="szkkfdyq _popup _shadow"
+			:class="{ asDrawer: type === 'drawer' }"
+			:style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }"
+		>
 			<div class="main">
 				<template v-for="item in items">
-				<button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
+					<button
+						v-if="item.action"
+						v-click-anime
+						class="_button"
+						@click="
+							($event) => {
+								item.action($event);
+								close();
+							}
+						"
+					>
 						<i class="icon" :class="item.icon"></i>
 						<div class="text">{{ item.text }}</div>
-					<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
+						<span v-if="item.indicate" class="indicator"
+							><i class="ph-circle ph-fill"></i
+						></span>
 					</button>
-				<MkA v-else v-click-anime :to="item.to" @click.passive="close()">
+					<MkA
+						v-else
+						v-click-anime
+						:to="item.to"
+						@click.passive="close()"
+					>
 						<i class="icon" :class="item.icon"></i>
 						<div class="text">{{ item.text }}</div>
-					<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
+						<span v-if="item.indicate" class="indicator"
+							><i class="ph-circle ph-fill"></i
+						></span>
 					</MkA>
 				</template>
 			</div>
@@ -20,36 +52,46 @@
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import { navbarItemDef } from '@/navbar';
-import { instanceName } from '@/config';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { deviceKind } from '@/scripts/device-kind';
-import * as os from '@/os';
+import {} from "vue";
+import MkModal from "@/components/MkModal.vue";
+import { navbarItemDef } from "@/navbar";
+import { instanceName } from "@/config";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { deviceKind } from "@/scripts/device-kind";
+import * as os from "@/os";
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		src?: HTMLElement;
-	anchor?: { x: string; y: string; };
-}>(), {
-	anchor: () => ({ x: 'right', y: 'center' }),
-});
+		anchor?: { x: string; y: string };
+	}>(),
+	{
+		anchor: () => ({ x: "right", y: "center" }),
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
-const preferedModalType = (deviceKind === 'desktop' && props.src != null) ? 'popup' :
-	deviceKind === 'smartphone' ? 'drawer' :
-	'dialog';
+const preferedModalType =
+	deviceKind === "desktop" && props.src != null
+		? "popup"
+		: deviceKind === "smartphone"
+		? "drawer"
+		: "dialog";
 
 const modal = $ref<InstanceType<typeof MkModal>>();
 
 const menu = defaultStore.state.menu;
 
-const items = Object.keys(navbarItemDef).filter(k => !menu.includes(k)).map(k => navbarItemDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
-	type: def.to ? 'link' : 'button',
+const items = Object.keys(navbarItemDef)
+	.filter((k) => !menu.includes(k))
+	.map((k) => navbarItemDef[k])
+	.filter((def) => (def.show == null ? true : def.show))
+	.map((def) => ({
+		type: def.to ? "link" : "button",
 		text: i18n.ts[def.title],
 		icon: def.icon,
 		to: def.to,
@@ -82,7 +124,8 @@ function close() {
 		text-align: center;
 	}
 
-	> .main, > .sub {
+	> .main,
+	> .sub {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 

packages/client/src/components/MkLink.vue

@@ -1,36 +1,55 @@
 <template>
-<component :is="self ? 'MkA' : 'a'" ref="el" class="xlcxczvw _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
-	:title="url" @click.stop
+	<component
+		:is="self ? 'MkA' : 'a'"
+		ref="el"
+		class="xlcxczvw _link"
+		:[attr]="self ? url.substr(local.length) : url"
+		:rel="rel"
+		:target="target"
+		:title="url"
+		@click.stop
 	>
 		<slot></slot>
-	<i v-if="target === '_blank'" class="ph-arrow-square-out ph-bold ph-lg icon"></i>
+		<i
+			v-if="target === '_blank'"
+			class="ph-arrow-square-out ph-bold ph-lg icon"
+		></i>
 	</component>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { url as local } from '@/config';
-import { useTooltip } from '@/scripts/use-tooltip';
-import * as os from '@/os';
+import { defineAsyncComponent } from "vue";
+import { url as local } from "@/config";
+import { useTooltip } from "@/scripts/use-tooltip";
+import * as os from "@/os";
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		url: string;
 		rel?: null | string;
-}>(), {
-});
+	}>(),
+	{}
+);
 
 const self = props.url.startsWith(local);
-const attr = self ? 'to' : 'href';
-const target = self ? null : '_blank';
+const attr = self ? "to" : "href";
+const target = self ? null : "_blank";
 
 const el = $ref();
 
 useTooltip($$(el), (showing) => {
-	os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkUrlPreviewPopup.vue")
+		),
+		{
 			showing,
 			url: props.url,
 			source: el,
-	}, {}, 'closed');
+		},
+		{},
+		"closed"
+	);
 });
 </script>
 
@@ -40,7 +59,7 @@ useTooltip($$(el), (showing) => {
 
 	> .icon {
 		padding-left: 2px;
-		font-size: .9em;
+		font-size: 0.9em;
 	}
 }
 </style>

packages/client/src/components/MkMarquee.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
-import { h, onMounted, onUnmounted, ref, watch } from 'vue';
+import { h, onMounted, onUnmounted, ref, watch } from "vue";
 
 export default {
-	name: 'MarqueeText',
+	name: "MarqueeText",
 	props: {
 		duration: {
 			type: Number,
@@ -38,37 +38,35 @@ export default {
 			calc();
 		});
 
-		onUnmounted(() => {
-		});
+		onUnmounted(() => {});
 
 		return {
 			contentEl,
 		};
 	},
-	render({
-		$slots, $style, $props: {
-			duration, repeat, paused, reverse,
+	render({ $slots, $style, $props: { duration, repeat, paused, reverse } }) {
+		return h("div", { class: [$style.wrap] }, [
+			h(
+				"span",
+				{
+					ref: "contentEl",
+					class: [paused ? $style.paused : undefined, $style.content],
 				},
-	}) {
-		return h('div', { class: [$style.wrap] }, [
-			h('span', {
-				ref: 'contentEl',
-				class: [
-					paused
-						? $style.paused
-						: undefined,
-					$style.content,
-				],
-			}, Array(repeat).fill(
-				h('span', {
+				Array(repeat).fill(
+					h(
+						"span",
+						{
 							class: $style.text,
 							style: {
 								animationDirection: reverse
-							? 'reverse'
+									? "reverse"
 									: undefined,
 							},
-				}, $slots.default()),
-			)),
+						},
+						$slots.default()
+					)
+				)
+			),
 		]);
 	},
 };
@@ -100,7 +98,11 @@ export default {
 	animation-play-state: paused;
 }
 @keyframes marquee {
-	0% { transform:translateX(0); }
-	100% { transform:translateX(-100%); }
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-100%);
+	}
 }
 </style>

packages/client/src/components/MkMediaBanner.vue

@@ -1,11 +1,20 @@
 <template>
 	<div class="mk-media-banner">
-	<div v-if="media.isSensitive && hide" class="sensitive" @click="hide = false">
+		<div
+			v-if="media.isSensitive && hide"
+			class="sensitive"
+			@click="hide = false"
+		>
 			<span class="icon"><i class="ph-warning ph-bold ph-lg"></i></span>
 			<b>{{ i18n.ts.sensitive }}</b>
 			<span>{{ i18n.ts.clickToShow }}</span>
 		</div>
-	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
+		<div
+			v-else-if="
+				media.type.startsWith('audio') && media.type !== 'audio/midi'
+			"
+			class="audio"
+		>
 			<VuePlyr
 				:options="{
 					controls: [
@@ -32,39 +41,44 @@
 			</VuePlyr>
 		</div>
 		<a
-		v-else class="download"
+			v-else
+			class="download"
 			:href="media.url"
 			:title="media.name"
 			:download="media.name"
 		>
-		<span class="icon"><i class="ph-download-simple ph-bold ph-lg"></i></span>
+			<span class="icon"
+				><i class="ph-download-simple ph-bold ph-lg"></i
+			></span>
 			<b>{{ media.name }}</b>
 		</a>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import VuePlyr from 'vue-plyr';
-import type * as misskey from 'calckey-js';
-import { ColdDeviceStorage } from '@/store';
-import 'vue-plyr/dist/vue-plyr.css';
-import { i18n } from '@/i18n';
+import { onMounted } from "vue";
+import VuePlyr from "vue-plyr";
+import type * as misskey from "calckey-js";
+import { ColdDeviceStorage } from "@/store";
+import "vue-plyr/dist/vue-plyr.css";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		media: misskey.entities.DriveFile;
-}>(), {
-});
+	}>(),
+	{}
+);
 
 const audioEl = $ref<HTMLAudioElement | null>();
 let hide = $ref(true);
 
 function volumechange() {
-	if (audioEl) ColdDeviceStorage.set('mediaVolume', audioEl.volume);
+	if (audioEl) ColdDeviceStorage.set("mediaVolume", audioEl.volume);
 }
 
 onMounted(() => {
-	if (audioEl) audioEl.volume = ColdDeviceStorage.get('mediaVolume');
+	if (audioEl) audioEl.volume = ColdDeviceStorage.get("mediaVolume");
 });
 </script>
 
@@ -97,7 +111,7 @@ onMounted(() => {
 		}
 
 		> *:not(:last-child) {
-			margin-right: .2em;
+			margin-right: 0.2em;
 		}
 
 		> .icon {

packages/client/src/components/MkMediaCaption.vue

@@ -5,24 +5,60 @@
 				<div class="mk-dialog">
 					<header>
 						<Mfm v-if="title" class="title" :text="title" />
-					<span class="text-count" :class="{ over: remainingLength < 0 }">{{ remainingLength }}</span>
+						<span
+							class="text-count"
+							:class="{ over: remainingLength < 0 }"
+							>{{ remainingLength }}</span
+						>
 						<br />
 					</header>
-				<textarea id="captioninput" v-model="inputValue" autofocus :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
-				<div v-if="(showOkButton || showCaptionButton || showCancelButton)" class="buttons">
-					<MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ i18n.ts.ok }}</MkButton>
-					<MkButton inline @click="caption">{{ i18n.ts.caption }}</MkButton>
-					<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+					<textarea
+						id="captioninput"
+						v-model="inputValue"
+						autofocus
+						:placeholder="input.placeholder"
+						@keydown="onInputKeydown"
+					></textarea>
+					<div
+						v-if="
+							showOkButton ||
+							showCaptionButton ||
+							showCancelButton
+						"
+						class="buttons"
+					>
+						<MkButton
+							inline
+							primary
+							:disabled="remainingLength < 0"
+							@click="ok"
+							>{{ i18n.ts.ok }}</MkButton
+						>
+						<MkButton inline @click="caption">{{
+							i18n.ts.caption
+						}}</MkButton>
+						<MkButton inline @click="cancel">{{
+							i18n.ts.cancel
+						}}</MkButton>
 					</div>
 				</div>
 			</div>
 			<div class="hdrwpsaf fullwidth">
 				<header>{{ image.name }}</header>
-			<img id="imgtocaption" :src="image.url" :alt="image.comment" :title="image.comment" @click="$refs.modal.close()"/>
+				<img
+					id="imgtocaption"
+					:src="image.url"
+					:alt="image.comment"
+					:title="image.comment"
+					@click="$refs.modal.close()"
+				/>
 				<footer>
 					<span>{{ image.type }}</span>
 					<span>{{ bytes(image.size) }}</span>
-				<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
+					<span v-if="image.properties && image.properties.width"
+						>{{ number(image.properties.width) }}px ×
+						{{ number(image.properties.height) }}px</span
+					>
 				</footer>
 			</div>
 		</div>
@@ -30,16 +66,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import insertTextAtCursor from 'insert-text-at-cursor';
-import { length } from 'stringz';
-import * as os from '@/os';
-import MkModal from '@/components/MkModal.vue';
-import MkButton from '@/components/MkButton.vue';
-import bytes from '@/filters/bytes';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
+import { defineComponent } from "vue";
+import insertTextAtCursor from "insert-text-at-cursor";
+import { length } from "stringz";
+import * as os from "@/os";
+import MkModal from "@/components/MkModal.vue";
+import MkButton from "@/components/MkButton.vue";
+import bytes from "@/filters/bytes";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
+import { instance } from "@/instance";
 
 export default defineComponent({
 	components: {
@@ -77,7 +113,7 @@ export default defineComponent({
 		},
 	},
 
-	emits: ['done', 'closed'],
+	emits: ["done", "closed"],
 
 	data() {
 		return {
@@ -91,15 +127,15 @@ export default defineComponent({
 			const maxCaptionLength = instance.maxCaptionTextLength ?? 512;
 			if (typeof this.inputValue !== "string") return maxCaptionLength;
 			return maxCaptionLength - length(this.inputValue);
-		}
+		},
 	},
 
 	mounted() {
-		document.addEventListener('keydown', this.onKeydown);
+		document.addEventListener("keydown", this.onKeydown);
 	},
 
 	beforeUnmount() {
-		document.removeEventListener('keydown', this.onKeydown);
+		document.removeEventListener("keydown", this.onKeydown);
 	},
 
 	methods: {
@@ -107,7 +143,7 @@ export default defineComponent({
 		number,
 
 		done(canceled, result?) {
-			this.$emit('done', { canceled, result });
+			this.$emit("done", { canceled, result });
 			this.$refs.modal.close();
 		},
 
@@ -129,13 +165,15 @@ export default defineComponent({
 		},
 
 		onKeydown(evt) {
-			if (evt.which === 27) { // ESC
+			if (evt.which === 27) {
+				// ESC
 				this.cancel();
 			}
 		},
 
 		onInputKeydown(evt) {
-			if (evt.which === 13) { // Enter
+			if (evt.which === 13) {
+				// Enter
 				if (evt.ctrlKey) {
 					evt.preventDefault();
 					evt.stopPropagation();
@@ -145,12 +183,16 @@ export default defineComponent({
 		},
 
 		caption() {
-			const img = document.getElementById('imgtocaption') as HTMLImageElement;
-			const ta = document.getElementById('captioninput') as HTMLTextAreaElement;
-			os.api('drive/files/caption-image', {
+			const img = document.getElementById(
+				"imgtocaption"
+			) as HTMLImageElement;
+			const ta = document.getElementById(
+				"captioninput"
+			) as HTMLTextAreaElement;
+			os.api("drive/files/caption-image", {
 				url: img.src,
-			}).then(text => {
-				insertTextAtCursor(ta, text.slice(0, (512 - ta.value.length)));
+			}).then((text) => {
+				insertTextAtCursor(ta, text.slice(0, 512 - ta.value.length));
 			});
 		},
 	},

packages/client/src/components/MkMediaImage.vue

@@ -1,32 +1,50 @@
 <template>
 	<div v-if="hide" class="qjewsnkg" @click="hide = false">
-	<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
+		<ImgWithBlurhash
+			class="bg"
+			:hash="image.blurhash"
+			:title="image.comment"
+			:alt="image.comment"
+		/>
 		<div class="text">
 			<div class="wrapper">
-			<b style="display: block;"><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
-			<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
+				<b style="display: block"
+					><i class="ph-warning ph-bold ph-lg"></i>
+					{{ i18n.ts.sensitive }}</b
+				>
+				<span style="display: block">{{ i18n.ts.clickToShow }}</span>
 			</div>
 		</div>
 	</div>
 	<div v-else class="gqnyydlz">
-	<a
-		:href="image.url"
-		:title="image.name"
-	>
-		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :type="image.type" :title="image.comment" :cover="false"/>
+		<a :href="image.url" :title="image.name">
+			<ImgWithBlurhash
+				:hash="image.blurhash"
+				:src="url"
+				:alt="image.comment"
+				:type="image.type"
+				:title="image.comment"
+				:cover="false"
+			/>
 			<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
 		</a>
-	<button v-tooltip="i18n.ts.hide" class="_button hide" @click="hide = true"><i class="ph-eye-slash ph-bold ph-lg"></i></button>
+		<button
+			v-tooltip="i18n.ts.hide"
+			class="_button hide"
+			@click="hide = true"
+		>
+			<i class="ph-eye-slash ph-bold ph-lg"></i>
+		</button>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
-import type * as misskey from 'calckey-js';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
+import { watch } from "vue";
+import type * as misskey from "calckey-js";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	image: misskey.entities.DriveFile;
@@ -35,19 +53,28 @@ const props = defineProps<{
 
 let hide = $ref(true);
 
-const url = (props.raw || defaultStore.state.loadRawImages)
+const url =
+	props.raw || defaultStore.state.loadRawImages
 		? props.image.url
 		: defaultStore.state.disableShowingAnimatedImages
 		? getStaticImageUrl(props.image.thumbnailUrl)
 		: props.image.thumbnailUrl;
 
 // Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
-watch(() => props.image, () => {
-	hide = (defaultStore.state.nsfw === 'force') ? true : props.image.isSensitive && (defaultStore.state.nsfw !== 'ignore');
-}, {
+watch(
+	() => props.image,
+	() => {
+		hide =
+			defaultStore.state.nsfw === "force"
+				? true
+				: props.image.isSensitive &&
+				  defaultStore.state.nsfw !== "ignore";
+	},
+	{
 		deep: true,
 		immediate: true,
-});
+	}
+);
 </script>
 
 <style lang="scss" scoped>
@@ -120,7 +147,7 @@ watch(() => props.image, () => {
 			font-size: 14px;
 			font-weight: bold;
 			left: 12px;
-			opacity: .5;
+			opacity: 0.5;
 			padding: 0 6px;
 			text-align: center;
 			top: 12px;

packages/client/src/components/MkMediaList.vue

@@ -1,11 +1,40 @@
 <template>
 	<div class="hoawjimk">
-	<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
-	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" :class="{ dmWidth: inDm }">
-		<div ref="gallery" :data-count="mediaList.filter(media => previewable(media)).length" @click.stop>
-			<template v-for="media in mediaList.filter(media => previewable(media))">
-				<XVideo v-if="media.type.startsWith('video')" :key="media.id" :video="media"/>
-				<XImage v-else-if="media.type.startsWith('image')" :key="media.id" class="image" :data-id="media.id" :image="media" :raw="raw"/>
+		<XBanner
+			v-for="media in mediaList.filter((media) => !previewable(media))"
+			:key="media.id"
+			:media="media"
+		/>
+		<div
+			v-if="mediaList.filter((media) => previewable(media)).length > 0"
+			class="gird-container"
+			:class="{ dmWidth: inDm }"
+		>
+			<div
+				ref="gallery"
+				:data-count="
+					mediaList.filter((media) => previewable(media)).length
+				"
+				@click.stop
+			>
+				<template
+					v-for="media in mediaList.filter((media) =>
+						previewable(media)
+					)"
+				>
+					<XVideo
+						v-if="media.type.startsWith('video')"
+						:key="media.id"
+						:video="media"
+					/>
+					<XImage
+						v-else-if="media.type.startsWith('image')"
+						:key="media.id"
+						class="image"
+						:data-id="media.id"
+						:image="media"
+						:raw="raw"
+					/>
 				</template>
 			</div>
 		</div>
@@ -13,17 +42,17 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import * as misskey from 'calckey-js';
-import PhotoSwipeLightbox from 'photoswipe/lightbox';
-import PhotoSwipe from 'photoswipe';
-import 'photoswipe/style.css';
-import XBanner from '@/components/MkMediaBanner.vue';
-import XImage from '@/components/MkMediaImage.vue';
-import XVideo from '@/components/MkMediaVideo.vue';
-import * as os from '@/os';
-import { FILE_TYPE_BROWSERSAFE } from '@/const';
-import { defaultStore } from '@/store';
+import { onMounted, ref } from "vue";
+import * as misskey from "calckey-js";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import PhotoSwipe from "photoswipe";
+import "photoswipe/style.css";
+import XBanner from "@/components/MkMediaBanner.vue";
+import XImage from "@/components/MkMediaImage.vue";
+import XVideo from "@/components/MkMediaVideo.vue";
+import * as os from "@/os";
+import { FILE_TYPE_BROWSERSAFE } from "@/const";
+import { defaultStore } from "@/store";
 
 const props = defineProps<{
 	mediaList: misskey.entities.DriveFile[];
@@ -32,60 +61,72 @@ const props = defineProps<{
 }>();
 
 const gallery = ref(null);
-const pswpZIndex = os.claimZIndex('middle');
+const pswpZIndex = os.claimZIndex("middle");
 
 onMounted(() => {
 	const lightbox = new PhotoSwipeLightbox({
 		dataSource: props.mediaList
-			.filter(media => {
-				if (media.type === 'image/svg+xml') return true; // svgのwebpublicはpngなのでtrue
-				return media.type.startsWith('image') && FILE_TYPE_BROWSERSAFE.includes(media.type);
+			.filter((media) => {
+				if (media.type === "image/svg+xml") return true; // svgのwebpublicはpngなのでtrue
+				return (
+					media.type.startsWith("image") &&
+					FILE_TYPE_BROWSERSAFE.includes(media.type)
+				);
 			})
-			.map(media => {
+			.map((media) => {
 				const item = {
 					src: media.url,
 					w: media.properties.width,
 					h: media.properties.height,
 					alt: media.comment,
 				};
-				if (media.properties.orientation != null && media.properties.orientation >= 5) {
+				if (
+					media.properties.orientation != null &&
+					media.properties.orientation >= 5
+				) {
 					[item.w, item.h] = [item.h, item.w];
 				}
 				return item;
 			}),
 		gallery: gallery.value,
-		children: '.image',
-		thumbSelector: '.image',
+		children: ".image",
+		thumbSelector: ".image",
 		loop: false,
-		padding: window.innerWidth > 500 ? {
+		padding:
+			window.innerWidth > 500
+				? {
 						top: 32,
 						bottom: 32,
 						left: 32,
 						right: 32,
-		} : {
+				  }
+				: {
 						top: 0,
 						bottom: 0,
 						left: 0,
 						right: 0,
 				  },
-		imageClickAction: 'close',
-		tapAction: 'toggle-controls',
+		imageClickAction: "close",
+		tapAction: "toggle-controls",
 		pswpModule: PhotoSwipe,
 	});
 
-	lightbox.on('itemData', (ev) => {
+	lightbox.on("itemData", (ev) => {
 		const { itemData } = ev;
 
 		// element is children
 		const { element } = itemData;
 
 		const id = element.dataset.id;
-		const file = props.mediaList.find(media => media.id === id);
+		const file = props.mediaList.find((media) => media.id === id);
 
 		itemData.src = file.url;
 		itemData.w = Number(file.properties.width);
 		itemData.h = Number(file.properties.height);
-		if (file.properties.orientation != null && file.properties.orientation >= 5) {
+		if (
+			file.properties.orientation != null &&
+			file.properties.orientation >= 5
+		) {
 			[itemData.w, itemData.h] = [itemData.h, itemData.w];
 		}
 		itemData.msrc = file.thumbnailUrl;
@@ -93,14 +134,14 @@ onMounted(() => {
 		itemData.thumbCropped = true;
 	});
 
-	lightbox.on('uiRegister', () => {
+	lightbox.on("uiRegister", () => {
 		lightbox.pswp.ui.registerElement({
-			name: 'altText',
-			className: 'pwsp__alt-text-container',
-			appendTo: 'wrapper',
+			name: "altText",
+			className: "pwsp__alt-text-container",
+			appendTo: "wrapper",
 			onInit: (el, pwsp) => {
-				let textBox = document.createElement('p');
-				textBox.className = 'pwsp__alt-text';
+				let textBox = document.createElement("p");
+				textBox.className = "pwsp__alt-text";
 				el.appendChild(textBox);
 
 				let preventProp = function (ev: Event): void {
@@ -114,7 +155,7 @@ onMounted(() => {
 				el.onpointercancel = preventProp;
 				el.onpointermove = preventProp;
 
-				pwsp.on('change', () => {
+				pwsp.on("change", () => {
 					textBox.textContent = pwsp.currSlide.data.alt?.trim();
 				});
 			},
@@ -125,15 +166,17 @@ onMounted(() => {
 });
 
 const previewable = (file: misskey.entities.DriveFile): boolean => {
-	if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
+	if (file.type === "image/svg+xml") return true; // svgのwebpublic/thumbnailはpngなのでtrue
 	// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
-	return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
+	return (
+		(file.type.startsWith("video") || file.type.startsWith("image")) &&
+		FILE_TYPE_BROWSERSAFE.includes(file.type)
+	);
 };
 </script>
 
 <style lang="scss" scoped>
 .hoawjimk {
-
 	> .dmWidth {
 		min-width: 20rem;
 		max-width: 40rem;
@@ -147,9 +190,9 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 		overflow: hidden;
 
 		&:before {
-			content: '';
+			content: "";
 			display: block;
-			padding-top: 56.25% // 16:9;
+			padding-top: 56.25%; // 16:9;
 		}
 
 		> div {
@@ -254,5 +297,4 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 .pwsp__alt-text:empty {
 	display: none;
 }
-
 </style>

packages/client/src/components/MkMediaVideo.vue

@@ -1,7 +1,14 @@
 <template>
-<div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
+	<div
+		v-if="hide"
+		class="icozogqfvdetwohsdglrbswgrejoxbdj"
+		@click="hide = false"
+	>
 		<div>
-		<b><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
+			<b
+				><i class="ph-warning ph-bold ph-lg"></i>
+				{{ i18n.ts.sensitive }}</b
+			>
 			<span>{{ i18n.ts.clickToShow }}</span>
 		</div>
 	</div>
@@ -17,7 +24,7 @@
 					'volume',
 					'pip',
 					'download',
-				'fullscreen'
+					'fullscreen',
 				],
 				disableContextMenu: false,
 			}"
@@ -30,10 +37,7 @@
 				controls
 				@contextmenu.stop
 			>
-			<source
-				:src="video.url"
-				:type="video.type"
-			>
+				<source :src="video.url" :type="video.type" />
 			</video>
 		</VuePlyr>
 		<i class="ph-eye-slash ph-bold ph-lg" @click="hide = true"></i>
@@ -41,18 +45,22 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import VuePlyr from 'vue-plyr';
-import type * as misskey from 'calckey-js';
-import { defaultStore } from '@/store';
-import 'vue-plyr/dist/vue-plyr.css';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import VuePlyr from "vue-plyr";
+import type * as misskey from "calckey-js";
+import { defaultStore } from "@/store";
+import "vue-plyr/dist/vue-plyr.css";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	video: misskey.entities.DriveFile;
 }>();
 
-const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
+const hide = ref(
+	defaultStore.state.nsfw === "force"
+		? true
+		: props.video.isSensitive && defaultStore.state.nsfw !== "ignore"
+);
 </script>
 
 <style lang="scss" scoped>
@@ -67,7 +75,7 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe
 		background-color: var(--fg);
 		color: var(--accentLighten);
 		font-size: 14px;
-		opacity: .5;
+		opacity: 0.5;
 		padding: 3px 6px;
 		text-align: center;
 		cursor: pointer;

packages/client/src/components/MkMention.vue

@@ -1,12 +1,32 @@
 <template>
-<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }" @click.stop>
-	<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
+	<MkA
+		v-if="url.startsWith('/')"
+		v-user-preview="canonical"
+		class="akbvjaqn"
+		:class="{ isMe }"
+		:to="url"
+		:style="{ background: bgCss }"
+		@click.stop
+	>
+		<img class="icon" :src="`/avatar/@${username}@${host}`" alt="" />
 		<span class="main">
 			<span class="username">@{{ username }}</span>
-		<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
+			<span
+				v-if="host != localHost || $store.state.showFullAcct"
+				class="host"
+				>@{{ toUnicode(host) }}</span
+			>
 		</span>
 	</MkA>
-<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }" @click.stop>
+	<a
+		v-else
+		class="akbvjaqn"
+		:href="url"
+		target="_blank"
+		rel="noopener"
+		:style="{ background: bgCss }"
+		@click.stop
+	>
 		<span class="main">
 			<span class="username">@{{ username }}</span>
 			<span class="host">@{{ toUnicode(host) }}</span>
@@ -15,26 +35,34 @@
 </template>
 
 <script lang="ts" setup>
-import { toUnicode } from 'punycode';
-import { } from 'vue';
-import tinycolor from 'tinycolor2';
-import { host as localHost } from '@/config';
-import { $i } from '@/account';
+import { toUnicode } from "punycode";
+import {} from "vue";
+import tinycolor from "tinycolor2";
+import { host as localHost } from "@/config";
+import { $i } from "@/account";
 
 const props = defineProps<{
 	username: string;
 	host: string;
 }>();
 
-const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`;
+const canonical =
+	props.host === localHost
+		? `@${props.username}`
+		: `@${props.username}@${toUnicode(props.host)}`;
 
 const url = `/${canonical}`;
 
-const isMe = $i && (
-	`@${props.username}@${toUnicode(props.host)}` === `@${$i.username}@${toUnicode(localHost)}`.toLowerCase()
-);
+const isMe =
+	$i &&
+	`@${props.username}@${toUnicode(props.host)}` ===
+		`@${$i.username}@${toUnicode(localHost)}`.toLowerCase();
 
-const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue(isMe ? '--mentionMe' : '--mention'));
+const bg = tinycolor(
+	getComputedStyle(document.documentElement).getPropertyValue(
+		isMe ? "--mentionMe" : "--mention"
+	)
+);
 bg.setAlpha(0.1);
 const bgCss = bg.toRgbString();
 </script>

packages/client/src/components/MkMenu.child.vue

@@ -1,15 +1,29 @@
 <template>
 	<div ref="el" class="sfhdhdhr">
-	<MkMenu ref="menu" :items="items" :align="align" :width="width" :as-drawer="false" @close="onChildClosed"/>
+		<MkMenu
+			ref="menu"
+			:items="items"
+			:align="align"
+			:width="width"
+			:as-drawer="false"
+			@close="onChildClosed"
+		/>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { on } from 'events';
-import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
-import MkMenu from './MkMenu.vue';
-import { MenuItem } from '@/types/menu';
-import * as os from '@/os';
+import { on } from "events";
+import {
+	nextTick,
+	onBeforeUnmount,
+	onMounted,
+	onUnmounted,
+	ref,
+	watch,
+} from "vue";
+import MkMenu from "./MkMenu.vue";
+import { MenuItem } from "@/types/menu";
+import * as os from "@/os";
 
 const props = defineProps<{
 	items: MenuItem[];
@@ -20,27 +34,27 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
-	(ev: 'actioned'): void;
+	(ev: "closed"): void;
+	(ev: "actioned"): void;
 }>();
 
 const el = ref<HTMLElement>();
-const align = 'left';
+const align = "left";
 
 function setPosition() {
 	const rootRect = props.rootElement.getBoundingClientRect();
 	const rect = props.targetElement.getBoundingClientRect();
 	const left = props.targetElement.offsetWidth;
-	const top = (rect.top - rootRect.top) - 8;
-	el.value.style.left = left + 'px';
-	el.value.style.top = top + 'px';
+	const top = rect.top - rootRect.top - 8;
+	el.value.style.left = left + "px";
+	el.value.style.top = top + "px";
 }
 
 function onChildClosed(actioned?: boolean) {
 	if (actioned) {
-		emit('actioned');
+		emit("actioned");
 	} else {
-		emit('closed');
+		emit("closed");
 	}
 }
 
@@ -53,7 +67,7 @@ onMounted(() => {
 
 defineExpose({
 	checkHit: (ev: MouseEvent) => {
-		return (ev.target === el.value || el.value.contains(ev.target));
+		return ev.target === el.value || el.value.contains(ev.target);
 	},
 });
 </script>

packages/client/src/components/MkMenu.vue

@@ -1,60 +1,174 @@
 <template>
 	<div>
 		<div
-		ref="itemsEl" v-hotkey="keymap"
+			ref="itemsEl"
+			v-hotkey="keymap"
 			class="rrevdjwt _popup _shadow"
 			:class="{ center: align === 'center', asDrawer }"
-		:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
-		@contextmenu.self="e => e.preventDefault()"
+			:style="{
+				width: width && !asDrawer ? width + 'px' : '',
+				maxHeight: maxHeight ? maxHeight + 'px' : '',
+			}"
+			@contextmenu.self="(e) => e.preventDefault()"
 		>
 			<template v-for="(item, i) in items2">
 				<div v-if="item === null" class="divider"></div>
 				<span v-else-if="item.type === 'label'" class="label item">
 					<span :style="item.textStyle || ''">{{ item.text }}</span>
 				</span>
-			<span v-else-if="item.type === 'pending'" :tabindex="i" class="pending item">
+				<span
+					v-else-if="item.type === 'pending'"
+					:tabindex="i"
+					class="pending item"
+				>
 					<span><MkEllipsis /></span>
 				</span>
-			<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
+				<MkA
+					v-else-if="item.type === 'link'"
+					:to="item.to"
+					:tabindex="i"
+					class="_button item"
+					@click.passive="close(true)"
+					@mouseenter.passive="onItemMouseEnter(item)"
+					@mouseleave.passive="onItemMouseLeave(item)"
+				>
+					<i
+						v-if="item.icon"
+						class="ph-fw ph-lg"
+						:class="item.icon"
+					></i>
 					<span v-else-if="item.icons">
-					<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
+						<i
+							v-for="icon in item.icons"
+							class="ph-fw ph-lg"
+							:class="icon"
+						></i>
 					</span>
-				<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
+					<MkAvatar
+						v-if="item.avatar"
+						:user="item.avatar"
+						class="avatar"
+					/>
 					<span :style="item.textStyle || ''">{{ item.text }}</span>
-				<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
+					<span v-if="item.indicate" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
 				</MkA>
-			<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
+				<a
+					v-else-if="item.type === 'a'"
+					:href="item.href"
+					:target="item.target"
+					:download="item.download"
+					:tabindex="i"
+					class="_button item"
+					@click="close(true)"
+					@mouseenter.passive="onItemMouseEnter(item)"
+					@mouseleave.passive="onItemMouseLeave(item)"
+				>
+					<i
+						v-if="item.icon"
+						class="ph-fw ph-lg"
+						:class="item.icon"
+					></i>
 					<span v-else-if="item.icons">
-					<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
+						<i
+							v-for="icon in item.icons"
+							class="ph-fw ph-lg"
+							:class="icon"
+						></i>
 					</span>
 					<span :style="item.textStyle || ''">{{ item.text }}</span>
-				<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
+					<span v-if="item.indicate" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
 				</a>
-			<button v-else-if="item.type === 'user' && !items.hidden" :tabindex="i" class="_button item" :class="{ active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
-				<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
+				<button
+					v-else-if="item.type === 'user' && !items.hidden"
+					:tabindex="i"
+					class="_button item"
+					:class="{ active: item.active }"
+					:disabled="item.active"
+					@click="clicked(item.action, $event)"
+					@mouseenter.passive="onItemMouseEnter(item)"
+					@mouseleave.passive="onItemMouseLeave(item)"
+				>
+					<MkAvatar :user="item.user" class="avatar" /><MkUserName
+						:user="item.user"
+					/>
+					<span v-if="item.indicate" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
 				</button>
-			<span v-else-if="item.type === 'switch'" :tabindex="i" class="item" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<FormSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch" :style="item.textStyle || ''">{{ item.text }}</FormSwitch>
+				<span
+					v-else-if="item.type === 'switch'"
+					:tabindex="i"
+					class="item"
+					@mouseenter.passive="onItemMouseEnter(item)"
+					@mouseleave.passive="onItemMouseLeave(item)"
+				>
+					<FormSwitch
+						v-model="item.ref"
+						:disabled="item.disabled"
+						class="form-switch"
+						:style="item.textStyle || ''"
+						>{{ item.text }}</FormSwitch
+					>
 				</span>
-			<button v-else-if="item.type === 'parent'" :tabindex="i" class="_button item parent" :class="{ childShowing: childShowingItem === item }" @mouseenter="showChildren(item, $event)">
-				<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
+				<button
+					v-else-if="item.type === 'parent'"
+					:tabindex="i"
+					class="_button item parent"
+					:class="{ childShowing: childShowingItem === item }"
+					@mouseenter="showChildren(item, $event)"
+				>
+					<i
+						v-if="item.icon"
+						class="ph-fw ph-lg"
+						:class="item.icon"
+					></i>
 					<span v-else-if="item.icons">
-					<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
+						<i
+							v-for="icon in item.icons"
+							class="ph-fw ph-lg"
+							:class="icon"
+						></i>
 					</span>
 					<span :style="item.textStyle || ''">{{ item.text }}</span>
-				<span class="caret"><i class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"></i></span>
+					<span class="caret"
+						><i class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"></i
+					></span>
 				</button>
-			<button v-else-if="!item.hidden" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
+				<button
+					v-else-if="!item.hidden"
+					:tabindex="i"
+					class="_button item"
+					:class="{ danger: item.danger, active: item.active }"
+					:disabled="item.active"
+					@click="clicked(item.action, $event)"
+					@mouseenter.passive="onItemMouseEnter(item)"
+					@mouseleave.passive="onItemMouseLeave(item)"
+				>
+					<i
+						v-if="item.icon"
+						class="ph-fw ph-lg"
+						:class="item.icon"
+					></i>
 					<span v-else-if="item.icons">
-					<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
+						<i
+							v-for="icon in item.icons"
+							class="ph-fw ph-lg"
+							:class="icon"
+						></i>
 					</span>
-				<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
+					<MkAvatar
+						v-if="item.avatar"
+						:user="item.avatar"
+						class="avatar"
+					/>
 					<span :style="item.textStyle || ''">{{ item.text }}</span>
-				<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
+					<span v-if="item.indicate" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
 				</button>
 			</template>
 			<span v-if="items2.length === 0" class="none item">
@@ -62,32 +176,50 @@
 			</span>
 		</div>
 		<div v-if="childMenu" class="child">
-		<XChild ref="child" :items="childMenu" :target-element="childTarget" :root-element="itemsEl" showing @actioned="childActioned"/>
+			<XChild
+				ref="child"
+				:items="childMenu"
+				:target-element="childTarget"
+				:root-element="itemsEl"
+				showing
+				@actioned="childActioned"
+			/>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, menu, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
-import { focusPrev, focusNext } from '@/scripts/focus';
-import FormSwitch from '@/components/form/switch.vue';
-import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import {
+	computed,
+	menu,
+	defineAsyncComponent,
+	nextTick,
+	onBeforeUnmount,
+	onMounted,
+	onUnmounted,
+	Ref,
+	ref,
+	watch,
+} from "vue";
+import { focusPrev, focusNext } from "@/scripts/focus";
+import FormSwitch from "@/components/form/switch.vue";
+import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from "@/types/menu";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue'));
+const XChild = defineAsyncComponent(() => import("./MkMenu.child.vue"));
 
 const props = defineProps<{
 	items: MenuItem[];
 	viaKeyboard?: boolean;
 	asDrawer?: boolean;
-	align?: 'center' | string;
+	align?: "center" | string;
 	width?: number;
 	maxHeight?: number;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'close', actioned?: boolean): void;
+	(ev: "close", actioned?: boolean): void;
 }>();
 
 let itemsEl = $ref<HTMLDivElement>();
@@ -97,31 +229,38 @@ let items2: InnerMenuItem[] = $ref([]);
 let child = $ref<InstanceType<typeof XChild>>();
 
 let keymap = computed(() => ({
-	'up|k|shift+tab': focusUp,
-	'down|j|tab': focusDown,
-	'esc': close,
+	"up|k|shift+tab": focusUp,
+	"down|j|tab": focusDown,
+	esc: close,
 }));
 
 let childShowingItem = $ref<MenuItem | null>();
 
-watch(() => props.items, () => {
-	const items: (MenuItem | MenuPending)[] = [...props.items].filter(item => item !== undefined);
+watch(
+	() => props.items,
+	() => {
+		const items: (MenuItem | MenuPending)[] = [...props.items].filter(
+			(item) => item !== undefined
+		);
 
 		for (let i = 0; i < items.length; i++) {
 			const item = items[i];
 
-		if (item && 'then' in item) { // if item is Promise
-			items[i] = { type: 'pending' };
-			item.then(actualItem => {
+			if (item && "then" in item) {
+				// if item is Promise
+				items[i] = { type: "pending" };
+				item.then((actualItem) => {
 					items2[i] = actualItem;
 				});
 			}
 		}
 
 		items2 = items as InnerMenuItem[];
-}, {
+	},
+	{
 		immediate: true,
-});
+	}
+);
 
 let childMenu = $ref<MenuItem[] | null>();
 let childTarget = $ref<HTMLElement | null>();
@@ -137,7 +276,11 @@ function childActioned() {
 }
 
 function onGlobalMousedown(event: MouseEvent) {
-	if (childTarget && (event.target === childTarget || childTarget.contains(event.target))) return;
+	if (
+		childTarget &&
+		(event.target === childTarget || childTarget.contains(event.target))
+	)
+		return;
 	if (child && child.checkHit(event)) return;
 	closeChild();
 }
@@ -169,7 +312,7 @@ function clicked(fn: MenuAction, ev: MouseEvent) {
 }
 
 function close(actioned = false) {
-	emit('close', actioned);
+	emit("close", actioned);
 }
 
 function focusUp() {
@@ -187,11 +330,13 @@ onMounted(() => {
 		});
 	}
 
-	document.addEventListener('mousedown', onGlobalMousedown, { passive: true });
+	document.addEventListener("mousedown", onGlobalMousedown, {
+		passive: true,
+	});
 });
 
 onBeforeUnmount(() => {
-	document.removeEventListener('mousedown', onGlobalMousedown);
+	document.removeEventListener("mousedown", onGlobalMousedown);
 });
 </script>
 

packages/client/src/components/MkMiniChart.vue

@@ -3,7 +3,11 @@
 		<defs>
 			<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
 				<stop offset="0%" :stop-color="color" stop-opacity="0"></stop>
-			<stop offset="100%" :stop-color="color" stop-opacity="0.65"></stop>
+				<stop
+					offset="100%"
+					:stop-color="color"
+					stop-opacity="0.65"
+				></stop>
 			</linearGradient>
 		</defs>
 		<polygon
@@ -16,20 +20,15 @@
 			:stroke="color"
 			stroke-width="2"
 		/>
-	<circle
-		:cx="headX"
-		:cy="headY"
-		r="3"
-		:fill="color"
-	/>
+		<circle :cx="headX" :cy="headY" r="3" :fill="color" />
 	</svg>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
-import tinycolor from 'tinycolor2';
-import { useInterval } from '@/scripts/use-interval';
+import { onUnmounted, watch } from "vue";
+import { v4 as uuid } from "uuid";
+import tinycolor from "tinycolor2";
+import { useInterval } from "@/scripts/use-interval";
 
 const props = defineProps<{
 	src: number[];
@@ -38,12 +37,14 @@ const props = defineProps<{
 const viewBoxX = 50;
 const viewBoxY = 50;
 const gradientId = uuid();
-let polylinePoints = $ref('');
-let polygonPoints = $ref('');
+let polylinePoints = $ref("");
+let polygonPoints = $ref("");
 let headX = $ref<number | null>(null);
 let headY = $ref<number | null>(null);
 let clock = $ref<number | null>(null);
-const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
+const accent = tinycolor(
+	getComputedStyle(document.documentElement).getPropertyValue("--accent")
+);
 const color = accent.toRgbString();
 
 function draw(): void {
@@ -52,10 +53,10 @@ function draw(): void {
 
 	const _polylinePoints = stats.map((n, i) => [
 		i * (viewBoxX / (stats.length - 1)),
-		(1 - (n / peak)) * viewBoxY,
+		(1 - n / peak) * viewBoxY,
 	]);
 
-	polylinePoints = _polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+	polylinePoints = _polylinePoints.map((xy) => `${xy[0]},${xy[1]}`).join(" ");
 
 	polygonPoints = `0,${viewBoxY} ${polylinePoints} ${viewBoxX},${viewBoxY}`;
 

packages/client/src/components/MkModal.vue

@@ -1,15 +1,64 @@
 <template>
 	<Transition
 		:name="transitionName"
-		:enter-active-class="$style['transition_' + transitionName + '_enterActive']"
-		:leave-active-class="$style['transition_' + transitionName + '_leaveActive']"
-		:enter-from-class="$style['transition_' + transitionName + '_enterFrom']"
+		:enter-active-class="
+			$style['transition_' + transitionName + '_enterActive']
+		"
+		:leave-active-class="
+			$style['transition_' + transitionName + '_leaveActive']
+		"
+		:enter-from-class="
+			$style['transition_' + transitionName + '_enterFrom']
+		"
 		:leave-to-class="$style['transition_' + transitionName + '_leaveTo']"
-		:duration="transitionDuration" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened"
+		:duration="transitionDuration"
+		appear
+		@after-leave="emit('closed')"
+		@enter="emit('opening')"
+		@after-enter="onOpened"
+	>
+		<div
+			v-show="manualShowing != null ? manualShowing : showing"
+			v-hotkey.global="keymap"
+			:class="[
+				$style.root,
+				{
+					[$style.drawer]: type === 'drawer',
+					[$style.dialog]: type === 'dialog' || type === 'dialog:top',
+					[$style.popup]: type === 'popup',
+				},
+			]"
+			:style="{
+				zIndex,
+				pointerEvents: (manualShowing != null ? manualShowing : showing)
+					? 'auto'
+					: 'none',
+				'--transformOrigin': transformOrigin,
+			}"
+		>
+			<div
+				class="_modalBg data-cy-bg"
+				:class="[
+					$style.bg,
+					{
+						[$style.bgTransparent]: isEnableBgTransparent,
+						'data-cy-transparent': isEnableBgTransparent,
+					},
+				]"
+				:style="{ zIndex }"
+				@click="onBgClick"
+				@mousedown="onBgClick"
+				@contextmenu.prevent.stop="() => {}"
+			></div>
+			<div
+				ref="content"
+				:class="[
+					$style.content,
+					{ [$style.fixed]: fixed, top: type === 'dialog:top' },
+				]"
+				:style="{ zIndex }"
+				@click.self="onBgClick"
 			>
-		<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog' || type === 'dialog:top', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
-			<div class="_modalBg data-cy-bg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent, 'data-cy-transparent': isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
-			<div ref="content" :class="[$style.content, { [$style.fixed]: fixed, top: type === 'dialog:top' }]" :style="{ zIndex }" @click.self="onBgClick">
 				<slot :max-height="maxHeight" :type="type"></slot>
 			</div>
 		</div>
@@ -17,94 +66,103 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, watch, provide } from 'vue';
-import * as os from '@/os';
-import { isTouchUsing } from '@/scripts/touch';
-import { defaultStore } from '@/store';
-import { deviceKind } from '@/scripts/device-kind';
+import { nextTick, onMounted, watch, provide } from "vue";
+import * as os from "@/os";
+import { isTouchUsing } from "@/scripts/touch";
+import { defaultStore } from "@/store";
+import { deviceKind } from "@/scripts/device-kind";
 
 function getFixedContainer(el: Element | null): Element | null {
-	if (el == null || el.tagName === 'BODY') return null;
-	const position = window.getComputedStyle(el).getPropertyValue('position');
-	if (position === 'fixed') {
+	if (el == null || el.tagName === "BODY") return null;
+	const position = window.getComputedStyle(el).getPropertyValue("position");
+	if (position === "fixed") {
 		return el;
 	} else {
 		return getFixedContainer(el.parentElement);
 	}
 }
 
-type ModalTypes = 'popup' | 'dialog' | 'dialog:top' | 'drawer';
+type ModalTypes = "popup" | "dialog" | "dialog:top" | "drawer";
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		manualShowing?: boolean | null;
-	anchor?: { x: string; y: string; };
+		anchor?: { x: string; y: string };
 		src?: HTMLElement;
-	preferType?: ModalTypes | 'auto';
-	zPriority?: 'low' | 'middle' | 'high';
+		preferType?: ModalTypes | "auto";
+		zPriority?: "low" | "middle" | "high";
 		noOverlap?: boolean;
 		transparentBg?: boolean;
-}>(), {
+	}>(),
+	{
 		manualShowing: null,
 		src: null,
-	anchor: () => ({ x: 'center', y: 'bottom' }),
-	preferType: 'auto',
-	zPriority: 'low',
+		anchor: () => ({ x: "center", y: "bottom" }),
+		preferType: "auto",
+		zPriority: "low",
 		noOverlap: true,
 		transparentBg: false,
-});
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'opening'): void;
-	(ev: 'opened'): void;
-	(ev: 'click'): void;
-	(ev: 'esc'): void;
-	(ev: 'close'): void;
-	(ev: 'closed'): void;
+	(ev: "opening"): void;
+	(ev: "opened"): void;
+	(ev: "click"): void;
+	(ev: "esc"): void;
+	(ev: "close"): void;
+	(ev: "closed"): void;
 }>();
 
-provide('modal', true);
+provide("modal", true);
 
 let maxHeight = $ref<number>();
 let fixed = $ref(false);
-let transformOrigin = $ref('center');
+let transformOrigin = $ref("center");
 let showing = $ref(true);
 let content = $shallowRef<HTMLElement>();
 const zIndex = os.claimZIndex(props.zPriority);
 let useSendAnime = $ref(false);
 const type = $computed<ModalTypes>(() => {
-	if (props.preferType === 'auto') {
-		if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
-			return 'drawer';
+	if (props.preferType === "auto") {
+		if (
+			!defaultStore.state.disableDrawer &&
+			isTouchUsing &&
+			deviceKind === "smartphone"
+		) {
+			return "drawer";
 		} else {
-			return props.src != null ? 'popup' : 'dialog';
+			return props.src != null ? "popup" : "dialog";
 		}
 	} else {
 		return props.preferType!;
 	}
 });
-const isEnableBgTransparent = $computed(() => props.transparentBg && (type === 'popup'));
-let transitionName = $computed((() =>
+const isEnableBgTransparent = $computed(
+	() => props.transparentBg && type === "popup"
+);
+let transitionName = $computed(() =>
 	defaultStore.state.animation
 		? useSendAnime
-			? 'send'
-			: type === 'drawer'
-				? 'modal-drawer'
-				: type === 'popup'
-					? 'modal-popup'
-					: 'modal'
-		: ''
-));
-let transitionDuration = $computed((() =>
-	transitionName === 'send'
+			? "send"
+			: type === "drawer"
+			? "modal-drawer"
+			: type === "popup"
+			? "modal-popup"
+			: "modal"
+		: ""
+);
+let transitionDuration = $computed(() =>
+	transitionName === "send"
 		? 400
-		: transitionName === 'modal-popup'
+		: transitionName === "modal-popup"
 		? 100
-			: transitionName === 'modal'
+		: transitionName === "modal"
 		? 200
-				: transitionName === 'modal-drawer'
+		: transitionName === "modal-drawer"
 		? 200
 		: 0
-));
+);
 
 let contentClicking = false;
 
@@ -114,30 +172,30 @@ function close(opts: { useSendAnimation?: boolean } = {}) {
 	}
 
 	// eslint-disable-next-line vue/no-mutating-props
-	if (props.src) props.src.style.pointerEvents = 'auto';
+	if (props.src) props.src.style.pointerEvents = "auto";
 	showing = false;
-	emit('close');
+	emit("close");
 }
 
 function onBgClick() {
 	if (contentClicking) return;
-	emit('click');
+	emit("click");
 }
 
-if (type === 'drawer') {
+if (type === "drawer") {
 	maxHeight = window.innerHeight / 1.5;
 }
 
 const keymap = {
-	'esc': () => emit('esc'),
+	esc: () => emit("esc"),
 };
 
 const MARGIN = 16;
 
 const align = () => {
 	if (props.src == null) return;
-	if (type === 'drawer') return;
-	if (type === 'dialog') return;
+	if (type === "drawer") return;
+	if (type === "dialog") return;
 
 	if (content == null) return;
 
@@ -152,19 +210,19 @@ const align = () => {
 	const x = srcRect.left + (fixed ? 0 : window.pageXOffset);
 	const y = srcRect.top + (fixed ? 0 : window.pageYOffset);
 
-	if (props.anchor.x === 'center') {
-		left = x + (props.src.offsetWidth / 2) - (width / 2);
-	} else if (props.anchor.x === 'left') {
+	if (props.anchor.x === "center") {
+		left = x + props.src.offsetWidth / 2 - width / 2;
+	} else if (props.anchor.x === "left") {
 		// TODO
-	} else if (props.anchor.x === 'right') {
+	} else if (props.anchor.x === "right") {
 		left = x + props.src.offsetWidth;
 	}
 
-	if (props.anchor.y === 'center') {
-		top = (y - (height / 2));
-	} else if (props.anchor.y === 'top') {
+	if (props.anchor.y === "center") {
+		top = y - height / 2;
+	} else if (props.anchor.y === "top") {
 		// TODO
-	} else if (props.anchor.y === 'bottom') {
+	} else if (props.anchor.y === "bottom") {
 		top = y + props.src.offsetHeight;
 	}
 
@@ -174,20 +232,20 @@ const align = () => {
 			left = window.innerWidth - width;
 		}
 
-		const underSpace = (window.innerHeight - MARGIN) - top;
-		const upperSpace = (srcRect.top - MARGIN);
+		const underSpace = window.innerHeight - MARGIN - top;
+		const upperSpace = srcRect.top - MARGIN;
 
 		// 画面から縦にはみ出る場合
-		if (top + height > (window.innerHeight - MARGIN)) {
-			if (props.noOverlap && props.anchor.x === 'center') {
-				if (underSpace >= (upperSpace / 3)) {
+		if (top + height > window.innerHeight - MARGIN) {
+			if (props.noOverlap && props.anchor.x === "center") {
+				if (underSpace >= upperSpace / 3) {
 					maxHeight = underSpace;
 				} else {
 					maxHeight = upperSpace;
-					top = (upperSpace + MARGIN) - height;
+					top = upperSpace + MARGIN - height;
 				}
 			} else {
-				top = (window.innerHeight - MARGIN) - height;
+				top = window.innerHeight - MARGIN - height;
 			}
 		} else {
 			maxHeight = underSpace;
@@ -198,20 +256,26 @@ const align = () => {
 			left = window.innerWidth - width + window.scrollX - 1;
 		}
 
-		const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset);
-		const upperSpace = (srcRect.top - MARGIN);
+		const underSpace =
+			window.innerHeight - MARGIN - (top - window.pageYOffset);
+		const upperSpace = srcRect.top - MARGIN;
 
 		// 画面から縦にはみ出る場合
-		if (top + height - window.scrollY > (window.innerHeight - MARGIN)) {
-			if (props.noOverlap && props.anchor.x === 'center') {
-				if (underSpace >= (upperSpace / 3)) {
+		if (top + height - window.scrollY > window.innerHeight - MARGIN) {
+			if (props.noOverlap && props.anchor.x === "center") {
+				if (underSpace >= upperSpace / 3) {
 					maxHeight = underSpace;
 				} else {
 					maxHeight = upperSpace;
-					top = window.scrollY + ((upperSpace + MARGIN) - height);
+					top = window.scrollY + (upperSpace + MARGIN - height);
 				}
 			} else {
-				top = (window.innerHeight - MARGIN) - height + window.pageYOffset - 1;
+				top =
+					window.innerHeight -
+					MARGIN -
+					height +
+					window.pageYOffset -
+					1;
 			}
 		} else {
 			maxHeight = underSpace;
@@ -226,55 +290,76 @@ const align = () => {
 		left = 0;
 	}
 
-	let transformOriginX = 'center';
-	let transformOriginY = 'center';
+	let transformOriginX = "center";
+	let transformOriginY = "center";
 
-	if (top >= srcRect.top + props.src.offsetHeight + (fixed ? 0 : window.pageYOffset)) {
-		transformOriginY = 'top';
-	} else if ((top + height) <= srcRect.top + (fixed ? 0 : window.pageYOffset)) {
-		transformOriginY = 'bottom';
+	if (
+		top >=
+		srcRect.top + props.src.offsetHeight + (fixed ? 0 : window.pageYOffset)
+	) {
+		transformOriginY = "top";
+	} else if (top + height <= srcRect.top + (fixed ? 0 : window.pageYOffset)) {
+		transformOriginY = "bottom";
 	}
 
-	if (left >= srcRect.left + props.src.offsetWidth + (fixed ? 0 : window.pageXOffset)) {
-		transformOriginX = 'left';
-	} else if ((left + width) <= srcRect.left + (fixed ? 0 : window.pageXOffset)) {
-		transformOriginX = 'right';
+	if (
+		left >=
+		srcRect.left + props.src.offsetWidth + (fixed ? 0 : window.pageXOffset)
+	) {
+		transformOriginX = "left";
+	} else if (
+		left + width <=
+		srcRect.left + (fixed ? 0 : window.pageXOffset)
+	) {
+		transformOriginX = "right";
 	}
 
 	transformOrigin = `${transformOriginX} ${transformOriginY}`;
 
-	content.style.left = left + 'px';
-	content.style.top = top + 'px';
+	content.style.left = left + "px";
+	content.style.top = top + "px";
 };
 
 const onOpened = () => {
-	emit('opened');
+	emit("opened");
 
 	// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
 	const el = content!.children[0];
-	el.addEventListener('mousedown', ev => {
+	el.addEventListener(
+		"mousedown",
+		(ev) => {
 			contentClicking = true;
-		window.addEventListener('mouseup', ev => {
+			window.addEventListener(
+				"mouseup",
+				(ev) => {
 					// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
 					window.setTimeout(() => {
 						contentClicking = false;
 					}, 100);
-		}, { passive: true, once: true });
-	}, { passive: true });
+				},
+				{ passive: true, once: true }
+			);
+		},
+		{ passive: true }
+	);
 };
 
 onMounted(() => {
-	watch(() => props.src, async () => {
+	watch(
+		() => props.src,
+		async () => {
 			if (props.src) {
 				// eslint-disable-next-line vue/no-mutating-props
-			props.src.style.pointerEvents = 'none';
+				props.src.style.pointerEvents = "none";
 			}
-		fixed = (type === 'drawer') || (getFixedContainer(props.src) != null);
+			fixed = type === "drawer" || getFixedContainer(props.src) != null;
 
 			await nextTick();
 
 			align();
-	}, { immediate: true });
+		},
+		{ immediate: true }
+	);
 
 	nextTick(() => {
 		new ResizeObserver((entries, observer) => {
@@ -297,7 +382,8 @@ defineExpose({
 
 	> .content {
 		transform: translateY(0px);
-		transition: opacity 0.3s ease-in, transform 0.3s cubic-bezier(.5,-0.5,1,.5) !important;
+		transition: opacity 0.3s ease-in,
+			transform 0.3s cubic-bezier(0.5, -0.5, 1, 0.5) !important;
 	}
 }
 .transition_send_enterFrom,
@@ -346,7 +432,8 @@ defineExpose({
 
 	> .content {
 		transform-origin: var(--transformOrigin);
-		transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
+		transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
+			transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
 	}
 }
 .transition_modal-popup_enterFrom,
@@ -369,7 +456,7 @@ defineExpose({
 	}
 
 	> .content {
-		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
+		transition: transform 0.2s cubic-bezier(0, 0.5, 0, 1) !important;
 	}
 }
 .transition_modal-drawer_leaveActive {
@@ -378,7 +465,7 @@ defineExpose({
 	}
 
 	> .content {
-		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
+		transition: transform 0.2s cubic-bezier(0, 0.5, 0, 1) !important;
 	}
 }
 .transition_modal-drawer_enterFrom,
@@ -404,15 +491,39 @@ defineExpose({
 			margin: auto;
 			padding: 32px;
 			// TODO: mask-imageはiOSだとやたら重い。なんとかしたい
-			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
-			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
+			-webkit-mask-image: linear-gradient(
+				0deg,
+				rgba(0, 0, 0, 0) 0%,
+				rgba(0, 0, 0, 1) 32px,
+				rgba(0, 0, 0, 1) calc(100% - 32px),
+				rgba(0, 0, 0, 0) 100%
+			);
+			mask-image: linear-gradient(
+				0deg,
+				rgba(0, 0, 0, 0) 0%,
+				rgba(0, 0, 0, 1) 32px,
+				rgba(0, 0, 0, 1) calc(100% - 32px),
+				rgba(0, 0, 0, 0) 100%
+			);
 			overflow: auto;
 			display: flex;
 
 			@media (max-width: 500px) {
 				padding: 16px;
-				-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
-				mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
+				-webkit-mask-image: linear-gradient(
+					0deg,
+					rgba(0, 0, 0, 0) 0%,
+					rgba(0, 0, 0, 1) 16px,
+					rgba(0, 0, 0, 1) calc(100% - 16px),
+					rgba(0, 0, 0, 0) 100%
+				);
+				mask-image: linear-gradient(
+					0deg,
+					rgba(0, 0, 0, 0) 0%,
+					rgba(0, 0, 0, 1) 16px,
+					rgba(0, 0, 0, 1) calc(100% - 16px),
+					rgba(0, 0, 0, 0) 100%
+				);
 			}
 
 			> ::v-deep(*) {
@@ -424,7 +535,6 @@ defineExpose({
 					margin-top: 0;
 				}
 			}
-
 		}
 	}