Merge remote-branch 'misskey/develop'

2023-11-03 17:42:10 +09:00 · 2023-11-03 17:42:10 +09:00 · f6a6fa2d51
parent 8c75295588 24e629ca5c
commit f6a6fa2d51
75 changed files with 1764 additions and 850 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -24,12 +24,17 @@
 - Enhance: 未読の通知数を表示できるように
 - Enhance: ローカリゼーションの更新
 - Enhance: 依存関係の更新
+- Enhance: アカウント登録時のメールアドレス認証に30分の有効期限を設定
+  - 有効期限が切れた後であれば、登録時に使用した招待コードを再度利用できるように変更しました。
+  - ユーザーが誤ったメールアドレスを入力した場合に招待コードが失効してしまう問題が解消されます。
+- Change: CWを使用する場合、注釈を空にすることは許可されなくなりました

 ### Client
 - Feat: プラグイン・テーマを外部サイトから直接インストールできるようになりました
 	- 外部サイトでの実装が必要です。詳細は Misskey Hub をご覧ください
 	  https://misskey-hub.net/docs/advanced/publish-on-your-website.html
 - Feat: 通知をグルーピングして表示するオプション(オプトアウト)
+- Feat: Misskeyの基本的なチュートリアルを実装
 - Feat: スワイプしてタイムラインを再読込できるように
 	- PCの場合は右上のボタンからでも再読込できます
 - Enhance: タイムラインの自動更新を無効にできるように
@ -49,8 +54,10 @@
 - Fix: チャンネルの作成・更新時に失敗した場合何も表示されない問題を修正 #11983
 - Fix: 個人カードのemojiがバッテリーになっている問題を修正
 - Fix: 標準テーマと同じIDを使用してインストールできてしまう問題を修正
+- Fix: 絵文字ピッカーでバッテリーの絵文字が複数表示される問題を修正 #12197

 ### Server
+- Feat: Registry APIがサードパーティから利用可能になりました
 - Enhance: RedisへのTLのキャッシュ(FTT)をオフにできるように
 - Enhance: フォローしているチャンネルをフォロー解除した時（またはその逆）、タイムラインに反映される間隔を改善
 - Enhance: プロフィールの自己紹介欄のMFMが連合するようになりました
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -15,7 +15,7 @@ Before creating an issue, please check the following:
 - To avoid duplication, please search for similar issues before creating a new issue.
 - Do not use Issues to ask questions or troubleshooting.
 	- Issues should only be used to feature requests, suggestions, and bug tracking.
-	- Please ask questions or troubleshooting in ~~the [Misskey Forum](https://forum.misskey.io/)~~ [GitHub Discussions](https://github.com/kokonect-link/cherrypick/discussions) or [Discord](https://discord.gg/V8qghB28Aj).
+	- Please ask questions or troubleshooting in [GitHub Discussions](https://github.com/kokonect-link/cherrypick/discussions) or [Discord](https://discord.gg/V8qghB28Aj).

 > **Warning**
 > Do not close issues that are about to be resolved. It should remain open until a commit that actually resolves it is merged.
@ -40,7 +40,7 @@ Thank you for your PR! Before creating a PR, please check the following:
  - `fix` / `refactor` / `feat` / `enhance` / `perf` / `chore` etc
  - Also, make sure that the granularity of this PR is appropriate. Please do not include more than one type of change or interest in a single PR.
 - If there is an Issue which will be resolved by this PR, please include a reference to the Issue in the text.
- Please add the summary of the changes to [`CHANGELOG.md`](/CHANGELOG.md). However, this is not necessary for changes that do not affect the users, such as refactoring.
+- Please add the summary of the changes to [`CHANGELOG_CHERRYPICK.md`](/CHANGELOG_CHERRYPICK.md). However, this is not necessary for changes that do not affect the users, such as refactoring.
 - 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.
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@ -1264,11 +1264,6 @@ _showingAnimatedImages:
  inactive: "Stop after a certain amount of time"
 _messaging:
  direct: "Direct Message"
-_tlTutorial:
-  step1_1: 'The {icon} Home timeline is where you can see posts from the accounts you follow.'
-  step1_2: 'The {icon} Local timeline is where you can see posts from everyone else on this server.'
-  step1_3: 'The {icon} Social timeline is a combination of the Home and Local timelines.'
-  step1_4: 'The {icon} Global timeline is where you can see posts from every other connected server.'
 _announcement:
  forExistingUsers: "Existing users only"
  forExistingUsersDescription: "This announcement will only be shown to users existing at the point of publishment if enabled. If disabled, those newly signing up after it has been posted will also see it."
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@ -3,6 +3,7 @@
 // Do not edit this file directly.
 export interface Locale {
    "_lang_": string;
+    "nsfwOpenBehavior": string;
    "previewNoteProfile": string;
    "noteEdited": string;
    "removeModalBgColorForBlur": string;
@ -1246,13 +1247,18 @@ export interface Locale {
    "pullDownToRefresh": string;
    "disableStreamingTimeline": string;
    "useGroupedNotifications": string;
+    "signupPendingError": string;
+    "cwNotationRequired": string;
    "showUnreadNotificationsCount": string;
    "showCatOnly": string;
    "additionalPermissionsForFlash": string;
    "thisFlashRequiresTheFollowingPermissions": string;
    "doYouWantToAllowThisPlayToAccessYourAccount": string;
    "translateProfile": string;
-    "nsfwOpenBehavior": string;
+    "_nsfwOpenBehavior": {
+        "click": string;
+        "doubleClick": string;
+    };
    "_vibrations": {
        "click": string;
        "note": string;
@ -1269,12 +1275,6 @@ export interface Locale {
    "_messaging": {
        "direct": string;
    };
-    "_tlTutorial": {
-        "step1_1": string;
-        "step1_2": string;
-        "step1_3": string;
-        "step1_4": string;
-    };
    "_announcement": {
        "forExistingUsers": string;
        "forExistingUsersDescription": string;
@ -1346,11 +1346,94 @@ export interface Locale {
        "pushNotificationDescription": string;
        "initialAccountSettingCompleted": string;
        "haveFun": string;
-        "ifYouNeedLearnMore": string;
+        "youCanContinueTutorial": string;
+        "startTutorial": string;
        "skipAreYouSure": string;
        "skipAreYouSureDescription": string;
        "laterAreYouSure": string;
    };
+    "_initialTutorial": {
+        "launchTutorial": string;
+        "title": string;
+        "wellDone": string;
+        "skipAreYouSure": string;
+        "_landing": {
+            "title": string;
+            "description": string;
+        };
+        "_note": {
+            "title": string;
+            "description": string;
+            "reply": string;
+            "renote": string;
+            "like": string;
+            "reaction": string;
+            "quote": string;
+            "menu": string;
+        };
+        "_reaction": {
+            "title": string;
+            "description": string;
+            "letsTryReacting": string;
+            "reactToContinue": string;
+            "reactNotification": string;
+            "reactDone": string;
+        };
+        "_timeline": {
+            "title": string;
+            "description1": string;
+            "home": string;
+            "local": string;
+            "social": string;
+            "global": string;
+            "description2": string;
+            "description3": string;
+        };
+        "_postNote": {
+            "title": string;
+            "description1": string;
+            "_visibility": {
+                "description": string;
+                "public": string;
+                "home": string;
+                "followers": string;
+                "direct": string;
+                "doNotSendConfidencialOnDirect1": string;
+                "doNotSendConfidencialOnDirect2": string;
+                "localOnly": string;
+            };
+            "_cw": {
+                "title": string;
+                "description": string;
+                "_exampleNote": {
+                    "cw": string;
+                    "note": string;
+                };
+                "useCases": string;
+            };
+        };
+        "_howToMakeAttachmentsSensitive": {
+            "title": string;
+            "description": string;
+            "tryThisFile": string;
+            "_exampleNote": {
+                "note": string;
+            };
+            "method": string;
+            "sensitiveSucceeded": string;
+            "doItToContinue": string;
+        };
+        "_done": {
+            "title": string;
+            "description": string;
+        };
+    };
+    "_timelineDescription": {
+        "home": string;
+        "local": string;
+        "social": string;
+        "global": string;
+    };
    "_serverRules": {
        "description": string;
    };
@ -1725,6 +1808,10 @@ export interface Locale {
                "title": string;
                "description": string;
            };
+            "_tutorialCompleted": {
+                "title": string;
+                "description": string;
+            };
        };
    };
    "_role": {
@ -2153,17 +2240,6 @@ export interface Locale {
        "hour": string;
        "day": string;
    };
-    "_timelineTutorial": {
-        "title": string;
-        "step1_1": string;
-        "step1_2": string;
-        "step2_1": string;
-        "step2_2": string;
-        "step3_1": string;
-        "step3_2": string;
-        "step4_1": string;
-        "step4_2": string;
-    };
    "_2fa": {
        "alreadyRegistered": string;
        "registerTOTP": string;
@ -2713,10 +2789,6 @@ export interface Locale {
            };
        };
    };
-    "_nsfwOpenBehavior": {
-        "click": string;
-        "doubleClick": string;
-    };
 }
 declare const locales: {
    [lang: string]: Locale;
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -1244,6 +1244,8 @@ refreshing: "リロード中"
 pullDownToRefresh: "引っ張ってリロード"
 disableStreamingTimeline: "タイムラインのリアルタイム更新を無効にする"
 useGroupedNotifications: "通知をグルーピングして表示する"
+signupPendingError: "メールアドレスの確認中に問題が発生しました。リンクの有効期限が切れている可能性があります。"
+cwNotationRequired: "「内容を隠す」がオンの場合は注釈の記述が必要です。"
 showUnreadNotificationsCount: "未読の通知の数を表示する"
 showCatOnly: "キャット付きのみ"
 additionalPermissionsForFlash: "Playへの追加許可"
@ -1271,12 +1273,6 @@ _showingAnimatedImages:
 _messaging:
  direct: "ダイレクトメッセージ"

-_tlTutorial:
-  step1_1: '{icon} ホームタイムラインは、あなたがフォローしているアカウントの投稿を見られます。'
-  step1_2: '{icon} ローカルタイムラインでは、このサーバーにいるみんなの投稿を見られます。'
-  step1_3: '{icon} ソーシャルタイムラインでは、ホームタイムラインとローカルタイムラインの投稿が両方表示されます。'
-  step1_4: '{icon} グローバルタイムラインでは、このサーバーに接続されているすべてのサーバーからの投稿を見られます。'
-
 _announcement:
  forExistingUsers: "既存ユーザーのみ"
  forExistingUsersDescription: "有効にすると、このお知らせ作成時点で存在するユーザーにのみお知らせが表示されます。無効にすると、このお知らせ作成後にアカウントを作成したユーザーにもお知らせが表示されます。"
@ -1334,7 +1330,7 @@ _requireRefreshBehavior:

 _initialAccountSetting:
  accountCreated: "アカウントの作成が完了しました！"
-  letsStartAccountSetup: "アカウントの初期設定を行いましょう。"
+  letsStartAccountSetup: "さっそくアカウントの初期設定を行いましょう。"
  letsFillYourProfile: "まずはあなたのプロフィールを設定しましょう。"
  profileSetting: "プロフィール設定"
  privacySetting: "プライバシー設定"
@ -1347,11 +1343,83 @@ _initialAccountSetting:
  pushNotificationDescription: "プッシュ通知を有効にすると{name}の通知をお使いのデバイスで受け取ることができます。"
  initialAccountSettingCompleted: "初期設定が完了しました！"
  haveFun: "{name}をお楽しみください！"
-  ifYouNeedLearnMore: "{name}(CherryPick)の使い方などを詳しく知るには{link}をご覧ください。"
+  youCanContinueTutorial: "このまま{name}(CherryPick)の使い方についてのチュートリアルに進むこともできますが、ここで中断してすぐに使い始めることもできます。"
+  startTutorial: "チュートリアルを開始"
  skipAreYouSure: "初期設定をスキップしますか？"
  skipAreYouSureDescription: "今すぐ初期設定を中断しても、[もっと！ - ヘルプ - 初期設定のリプレイ]から再開することができます。"
  laterAreYouSure: "初期設定をあとでやり直しますか？"

+_initialTutorial:
+  launchTutorial: "チュートリアルを見る"
+  title: "チュートリアル"
+  wellDone: "よくできました"
+  skipAreYouSure: "チュートリアルを終了しますか？"
+  _landing:
+    title: "チュートリアルへようこそ"
+    description: "ここでは、CherryPickの基本的な使い方や機能を確認できます。"
+  _note:
+    title: "ノートって何？"
+    description: "CherryPickでの投稿は「ノート」と呼びます。ノートはタイムラインに時系列で並んでいて、リアルタイムで更新されていきます。"
+    reply: "返信することができます。返信に対しての返信も可能で、スレッドのように会話を続けることもできます。"
+    renote: "そのノートを自分のタイムラインに流して共有することができます。テキストを追加して引用することも可能です。"
+    like: "ハートリアクションを送ることができます。"
+    reaction: "リアクションをつけることができます。詳しくは次のページで解説します。"
+    quote: "引用を付けることができます。何らかの内容に基づき意見を付け加えたいときに便利です。"
+    menu: "ノートの詳細を表示したり、リンクをコピーしたりなどの様々な操作が行えます。"
+  _reaction:
+    title: "リアクションって何？"
+    description: "ノートには「リアクション」をつけることができます。「いいね」では伝わらないニュアンスも、リアクションで簡単・気軽に表現できます。"
+    letsTryReacting: "リアクションは、ノートの「＋」ボタンをクリックするとつけられます。試しにこのサンプルのノートにリアクションをつけてみてください！"
+    reactToContinue: "リアクションをつけると先に進めるようになります。"
+    reactNotification: "あなたのノートが誰かにリアクションされると、リアルタイムで通知を受け取ります。"
+    reactDone: "「ー」ボタンを押すとリアクションを取り消すことができます。"
+  _timeline:
+    title: "タイムラインのしくみ"
+    description1: "CherryPickには、使い方に応じて複数のタイムラインが用意されています（サーバーによってはいずれかが無効になっていることがあります）。"
+    home: "あなたがフォローしているアカウントの投稿を見られます。"
+    local: "このサーバーにいるユーザー全員の投稿を見られます。"
+    social: "ホームタイムラインとローカルタイムラインの投稿が両方表示されます。"
+    global: "接続している他のすべてのサーバーからの投稿を見られます。"
+    description2: "それぞれのタイムラインは、画面上部でいつでも切り替えられます。"
+    description3: "その他にも、リストタイムラインやチャンネルタイムラインなどがあります。詳しくは{link}をご覧ください。"
+  _postNote:
+    title: "ノートの投稿設定"
+    description1: "CherryPickにノートを投稿する際には、様々なオプションの設定が可能です。投稿フォームはこのようになっています。"
+    _visibility:
+      description: "ノートを表示できる相手を制限できます。"
+      public: "すべてのユーザーに公開。"
+      home: "ホームタイムラインのみに公開。フォロワー・プロフィールを見に来た人・リノートから、他のユーザーも見ることができます。"
+      followers: "フォロワーにのみ公開。本人以外がリノートすることはできず、またフォロワー以外は閲覧できません。"
+      direct: "指定したユーザーにのみ公開され、また相手に通知が入ります。ダイレクトメッセージのかわりにお使いいただけます。"
+      doNotSendConfidencialOnDirect1: "機密情報は送信する際は注意してください。"
+      doNotSendConfidencialOnDirect2: "送信先のサーバーの管理者は投稿内容を見ることが可能なので、信頼できないサーバーのユーザーにダイレクト投稿を送信する場合は、機密情報の扱いに注意が必要です。"
+      localOnly: "他のサーバーに投稿を連合しません。上記の公開範囲に関わらず、他のサーバーのユーザーは、この設定がついたノートを直接閲覧することができなくなります。"
+    _cw:
+      title: "内容を隠す（CW）"
+      description: "本文のかわりに「注釈」に書いた内容が表示されます。「もっと見る」を押すと本文が表示されます。"
+      _exampleNote:
+        cw: "飯テロ注意"
+        note: "チョコのかかったドーナツを食べました🍩😋"
+      useCases: "サーバーのガイドラインにより必要とされるノートに指定したり、ネタバレ投稿やセンシティブな文章を自主規制したりするときに使います。"
+  _howToMakeAttachmentsSensitive:
+    title: "添付ファイルをセンシティブにするには？"
+    description: "サーバーのガイドラインにより必要とされる際や、そのまま見れる状態にしておくべきではない添付ファイルには、「センシティブ」設定を付けます。"
+    tryThisFile: "試しに、このフォームに添付された画像をセンシティブにしてみてください！"
+    _exampleNote:
+      note: "納豆のフタ開けるのミスったわね…"
+    method: "添付ファイルをセンシティブにする際は、そのファイルをクリックしてメニューを開き、「センシティブとして設定」をクリックします。"
+    sensitiveSucceeded: "ファイルを添付する際は、サーバーのガイドラインに従ってセンシティブを適切に設定してください。"
+    doItToContinue: "画像をセンシティブに設定すると先に進めるようになります。"
+  _done:
+    title: "チュートリアルは終了です🎉"
+    description: "ここで紹介した機能はほんの一部にすぎません。CherryPickの使い方をより詳しく知るには、{link}をご覧ください。"
+
+_timelineDescription:
+  home: "ホームタイムラインでは、あなたがフォローしているアカウントの投稿を見られます。"
+  local: "ローカルタイムラインでは、このサーバーにいるユーザー全員の投稿を見られます。"
+  social: "ソーシャルタイムラインには、ホームタイムラインとローカルタイムラインの投稿が両方表示されます。"
+  global: "グローバルタイムラインでは、接続している他のすべてのサーバーからの投稿を見られます。"
+
 _serverRules:
  description: "新規登録前に表示する、サーバーの簡潔なルールを設定します。内容は利用規約の要約とすることを推奨します。"

@ -1651,6 +1719,9 @@ _achievements:
    _smashTestNotificationButton:
      title: "テスト過剰"
      description: "通知のテストをごく短時間のうちに連続して行った"
+    _tutorialCompleted:
+      title: "CherryPick初心者講座 修了証"
+      description: "チュートリアルを完了した"

 _role:
  new: "ロールの作成"
@ -1756,7 +1827,7 @@ _ffVisibility:
 _signup:
  almostThere: "ほとんど完了です"
  emailAddressInfo: "あなたが使っているメールアドレスを入力してください。メールアドレスが公開されることはありません。"
-  emailSent: "入力されたメールアドレス({email})宛に確認のメールが送信されました。メールに記載されたリンクにアクセスすると、アカウントの作成が完了します。\nもしメールが来なかったらスパムメールボックスを確認してください。"
+  emailSent: "入力されたメールアドレス({email})宛に確認のメールが送信されました。メールに記載されたリンクにアクセスすると、アカウントの作成が完了します。\nもしメールが来なかったらスパムメールボックスを確認してください。\nメールに記載されているリンクの有効期限は30分です。"

 _accountDelete:
  accountDelete: "アカウントの削除"
@ -2071,17 +2142,6 @@ _time:
  hour: "時間"
  day: "日"

-_timelineTutorial:
-  title: "CherryPickの使い方"
-  step1_1: "この画面は「タイムライン」です。{name}に投稿された「ノート」が時系列で表示されます。"
-  step1_2: "タイムラインにはいくつか種類があり、例えば「ホームタイムライン」にはあなたがフォローしている人のノートが流れ、「ローカルタイムライン」には{name}全体のノートが流れます。"
-  step2_1: "試しに、何かノートを投稿してみましょう。画面上にある鉛筆マークのボタンを押すとフォームが開きます。"
-  step2_2: "初めてのノートの内容は、あなたの自己紹介や「{name}始めました」などがおすすめです。"
-  step3_1: "投稿できましたか？"
-  step3_2: "あなたのノートがタイムラインに表示されていれば成功です。"
-  step4_1: "ノートには、「リアクション」を付けることができます。"
-  step4_2: "リアクションを付けるには、ノートの「+」マークをクリックして、好きな絵文字を選択します。"
-
 _2fa:
  alreadyRegistered: "既に設定は完了しています。"
  registerTOTP: "認証アプリの設定を開始"
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@ -1,6 +1,6 @@
 ---
 _lang_: "한국어"
-nsfwOpenBehavior: "NSFW로 설정된 미디어를 열 때"
+nsfwOpenBehavior: "민감한 콘텐츠로 표시된 미디어를 열 때"
 previewNoteProfile: "프로필 표시"
 noteEdited: "노트를 편집했어요!"
 removeModalBgColorForBlur: "모달 배경색 제거"
@ -1240,11 +1240,6 @@ _showingAnimatedImages:
  inactive: "일정 시간이 지나면 멈춤"
 _messaging:
  direct: "다이렉트 메시지"
-_tlTutorial:
-  step1_1: '{icon} 홈 타임라인은 내가 팔로우하고 있는 계정의 게시물을 볼 수 있어요.'
-  step1_2: '{icon} 로컬 타임라인은 이 서버의 모든 유저가 올린 게시물을 볼 수 있어요.'
-  step1_3: '{icon} 소셜 타임라인은 홈 타임라인과 로컬 타임라인을 합친 것과 같아요.'
-  step1_4: '{icon} 글로벌 타임라인에서는 이 서버와 연결된 모든 서버의 게시물을 볼 수 있어요.'
 _announcement:
  forExistingUsers: "기존 유저에게만 알리기"
  forExistingUsersDescription: "활성화하면 이 공지사항을 게시한 시점에서 이미 가입한 유저에게만 표시해요. 비활성화하면 게시 후에 가입한 유저에게도 표시해요."
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@ -75,9 +75,9 @@
 		"@fastify/view": "8.2.0",
 		"@google-cloud/logging": "^10.5.0",
 		"@google-cloud/translate": "^7.2.1",
-		"@nestjs/common": "10.2.7",
-		"@nestjs/core": "10.2.7",
-		"@nestjs/testing": "10.2.7",
+		"@nestjs/common": "10.2.8",
+		"@nestjs/core": "10.2.8",
+		"@nestjs/testing": "10.2.8",
 		"@peertube/http-signature": "1.7.0",
 		"@simplewebauthn/server": "8.3.5",
 		"@sinonjs/fake-timers": "11.2.2",
@ -91,7 +91,7 @@
 		"bcryptjs": "2.4.3",
 		"blurhash": "2.0.5",
 		"body-parser": "1.20.2",
-		"bullmq": "4.12.7",
+		"bullmq": "4.12.8",
 		"cacheable-lookup": "7.0.0",
 		"cbor": "9.0.1",
 		"chalk": "5.3.0",
@ -106,7 +106,7 @@
 		"deep-email-validator": "0.1.21",
 		"fastify": "4.24.3",
 		"feed": "4.2.2",
-		"file-type": "18.5.0",
+		"file-type": "18.6.0",
 		"fluent-ffmpeg": "2.1.2",
 		"form-data": "4.0.0",
 		"got": "13.0.0",
--- a/packages/backend/src/core/AchievementService.ts
+++ b/packages/backend/src/core/AchievementService.ts
@ -86,6 +86,7 @@ export const ACHIEVEMENT_TYPES = [
 	'cookieClicked',
 	'brainDiver',
 	'smashTestNotificationButton',
+	'tutorialCompleted',
 ] as const;

@Injectable()
--- a/packages/backend/src/core/CoreModule.ts
+++ b/packages/backend/src/core/CoreModule.ts
@ -66,6 +66,7 @@ import { ClipService } from './ClipService.js';
 import { FeaturedService } from './FeaturedService.js';
 import { FunoutTimelineService } from './FunoutTimelineService.js';
 import { ChannelFollowingService } from './ChannelFollowingService.js';
+import { RegistryApiService } from './RegistryApiService.js';
 import { ChartLoggerService } from './chart/ChartLoggerService.js';
 import FederationChart from './chart/charts/federation.js';
 import NotesChart from './chart/charts/notes.js';
@ -203,6 +204,7 @@ const $ClipService: Provider = { provide: 'ClipService', useExisting: ClipServic
 const $FeaturedService: Provider = { provide: 'FeaturedService', useExisting: FeaturedService };
 const $FunoutTimelineService: Provider = { provide: 'FunoutTimelineService', useExisting: FunoutTimelineService };
 const $ChannelFollowingService: Provider = { provide: 'ChannelFollowingService', useExisting: ChannelFollowingService };
+const $RegistryApiService: Provider = { provide: 'RegistryApiService', useExisting: RegistryApiService };

 const $ChartLoggerService: Provider = { provide: 'ChartLoggerService', useExisting: ChartLoggerService };
 const $FederationChart: Provider = { provide: 'FederationChart', useExisting: FederationChart };
@ -344,6 +346,7 @@ const $ApEventService: Provider = { provide: 'ApEventService', useExisting: ApEv
 		FeaturedService,
 		FunoutTimelineService,
 		ChannelFollowingService,
+		RegistryApiService,
 		ChartLoggerService,
 		FederationChart,
 		NotesChart,
@ -478,6 +481,7 @@ const $ApEventService: Provider = { provide: 'ApEventService', useExisting: ApEv
 		$FeaturedService,
 		$FunoutTimelineService,
 		$ChannelFollowingService,
+		$RegistryApiService,
 		$ChartLoggerService,
 		$FederationChart,
 		$NotesChart,
@ -613,6 +617,7 @@ const $ApEventService: Provider = { provide: 'ApEventService', useExisting: ApEv
 		FeaturedService,
 		FunoutTimelineService,
 		ChannelFollowingService,
+		RegistryApiService,
 		FederationChart,
 		NotesChart,
 		UsersChart,
@ -746,6 +751,7 @@ const $ApEventService: Provider = { provide: 'ApEventService', useExisting: ApEv
 		$FeaturedService,
 		$FunoutTimelineService,
 		$ChannelFollowingService,
+		$RegistryApiService,
 		$FederationChart,
 		$NotesChart,
 		$UsersChart,
--- a/packages/backend/src/core/RegistryApiService.ts
+++ b/packages/backend/src/core/RegistryApiService.ts
@ -0,0 +1,147 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import type { MiRegistryItem, RegistryItemsRepository } from '@/models/_.js';
+import { IdentifiableError } from '@/misc/identifiable-error.js';
+import type { MiUser } from '@/models/User.js';
+import { IdService } from '@/core/IdService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { bindThis } from '@/decorators.js';
+
+@Injectable()
+export class RegistryApiService {
+	constructor(
+		@Inject(DI.registryItemsRepository)
+		private registryItemsRepository: RegistryItemsRepository,
+
+		private idService: IdService,
+		private globalEventService: GlobalEventService,
+	) {
+	}
+
+	@bindThis
+	public async set(userId: MiUser['id'], domain: string | null, scope: string[], key: string, value: any) {
+		// TODO: 作成できるキーの数を制限する
+
+		const query = this.registryItemsRepository.createQueryBuilder('item');
+		if (domain) {
+			query.where('item.domain = :domain', { domain: domain });
+		} else {
+			query.where('item.domain IS NULL');
+		}
+		query.andWhere('item.userId = :userId', { userId: userId });
+		query.andWhere('item.key = :key', { key: key });
+		query.andWhere('item.scope = :scope', { scope: scope });
+
+		const existingItem = await query.getOne();
+
+		if (existingItem) {
+			await this.registryItemsRepository.update(existingItem.id, {
+				updatedAt: new Date(),
+				value: value,
+			});
+		} else {
+			await this.registryItemsRepository.insert({
+				id: this.idService.gen(),
+				updatedAt: new Date(),
+				userId: userId,
+				domain: domain,
+				scope: scope,
+				key: key,
+				value: value,
+			});
+		}
+
+		if (domain == null) {
+			// TODO: サードパーティアプリが傍受出来てしまうのでどうにかする
+			this.globalEventService.publishMainStream(userId, 'registryUpdated', {
+				scope: scope,
+				key: key,
+				value: value,
+			});
+		}
+	}
+
+	@bindThis
+	public async getItem(userId: MiUser['id'], domain: string | null, scope: string[], key: string): Promise<MiRegistryItem | null> {
+		const query = this.registryItemsRepository.createQueryBuilder('item')
+			.where(domain == null ? 'item.domain IS NULL' : 'item.domain = :domain', { domain: domain })
+			.andWhere('item.userId = :userId', { userId: userId })
+			.andWhere('item.key = :key', { key: key })
+			.andWhere('item.scope = :scope', { scope: scope });
+
+		const item = await query.getOne();
+
+		return item;
+	}
+
+	@bindThis
+	public async getAllItemsOfScope(userId: MiUser['id'], domain: string | null, scope: string[]): Promise<MiRegistryItem[]> {
+		const query = this.registryItemsRepository.createQueryBuilder('item');
+		query.where(domain == null ? 'item.domain IS NULL' : 'item.domain = :domain', { domain: domain });
+		query.andWhere('item.userId = :userId', { userId: userId });
+		query.andWhere('item.scope = :scope', { scope: scope });
+
+		const items = await query.getMany();
+
+		return items;
+	}
+
+	@bindThis
+	public async getAllKeysOfScope(userId: MiUser['id'], domain: string | null, scope: string[]): Promise<string[]> {
+		const query = this.registryItemsRepository.createQueryBuilder('item');
+		query.select('item.key');
+		query.where(domain == null ? 'item.domain IS NULL' : 'item.domain = :domain', { domain: domain });
+		query.andWhere('item.userId = :userId', { userId: userId });
+		query.andWhere('item.scope = :scope', { scope: scope });
+
+		const items = await query.getMany();
+
+		return items.map(x => x.key);
+	}
+
+	@bindThis
+	public async getAllScopeAndDomains(userId: MiUser['id']): Promise<{ domain: string | null; scopes: string[][] }[]> {
+		const query = this.registryItemsRepository.createQueryBuilder('item')
+			.select(['item.scope', 'item.domain'])
+			.where('item.userId = :userId', { userId: userId });
+
+		const items = await query.getMany();
+
+		const res = [] as { domain: string | null; scopes: string[][] }[];
+
+		for (const item of items) {
+			const target = res.find(x => x.domain === item.domain);
+			if (target) {
+				if (target.scopes.some(scope => scope.join('.') === item.scope.join('.'))) continue;
+				target.scopes.push(item.scope);
+			} else {
+				res.push({
+					domain: item.domain,
+					scopes: [item.scope],
+				});
+			}
+		}
+
+		return res;
+	}
+
+	@bindThis
+	public async remove(userId: MiUser['id'], domain: string | null, scope: string[], key: string) {
+		const query = this.registryItemsRepository.createQueryBuilder().delete();
+		if (domain) {
+			query.where('domain = :domain', { domain: domain });
+		} else {
+			query.where('domain IS NULL');
+		}
+		query.andWhere('userId = :userId', { userId: userId });
+		query.andWhere('key = :key', { key: key });
+		query.andWhere('scope = :scope', { scope: scope });
+
+		await query.execute();
+	}
+}
--- a/packages/backend/src/server/api/EndpointsModule.ts
+++ b/packages/backend/src/server/api/EndpointsModule.ts
@ -238,7 +238,7 @@ import * as ep___i_registry_get from './endpoints/i/registry/get.js';
 import * as ep___i_registry_keysWithType from './endpoints/i/registry/keys-with-type.js';
 import * as ep___i_registry_keys from './endpoints/i/registry/keys.js';
 import * as ep___i_registry_remove from './endpoints/i/registry/remove.js';
-import * as ep___i_registry_scopes from './endpoints/i/registry/scopes.js';
+import * as ep___i_registry_scopesWithDomain from './endpoints/i/registry/scopes-with-domain.js';
 import * as ep___i_registry_set from './endpoints/i/registry/set.js';
 import * as ep___i_revokeToken from './endpoints/i/revoke-token.js';
 import * as ep___i_signinHistory from './endpoints/i/signin-history.js';
@ -625,7 +625,7 @@ const $i_registry_get: Provider = { provide: 'ep:i/registry/get', useClass: ep__
 const $i_registry_keysWithType: Provider = { provide: 'ep:i/registry/keys-with-type', useClass: ep___i_registry_keysWithType.default };
 const $i_registry_keys: Provider = { provide: 'ep:i/registry/keys', useClass: ep___i_registry_keys.default };
 const $i_registry_remove: Provider = { provide: 'ep:i/registry/remove', useClass: ep___i_registry_remove.default };
-const $i_registry_scopes: Provider = { provide: 'ep:i/registry/scopes', useClass: ep___i_registry_scopes.default };
+const $i_registry_scopesWithDomain: Provider = { provide: 'ep:i/registry/scopes-with-domain', useClass: ep___i_registry_scopesWithDomain.default };
 const $i_registry_set: Provider = { provide: 'ep:i/registry/set', useClass: ep___i_registry_set.default };
 const $i_revokeToken: Provider = { provide: 'ep:i/revoke-token', useClass: ep___i_revokeToken.default };
 const $i_signinHistory: Provider = { provide: 'ep:i/signin-history', useClass: ep___i_signinHistory.default };
@ -1017,7 +1017,7 @@ const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention
 		$i_registry_keysWithType,
 		$i_registry_keys,
 		$i_registry_remove,
-		$i_registry_scopes,
+		$i_registry_scopesWithDomain,
 		$i_registry_set,
 		$i_revokeToken,
 		$i_signinHistory,
@ -1402,7 +1402,7 @@ const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention
 		$i_registry_keysWithType,
 		$i_registry_keys,
 		$i_registry_remove,
-		$i_registry_scopes,
+		$i_registry_scopesWithDomain,
 		$i_registry_set,
 		$i_revokeToken,
 		$i_signinHistory,
--- a/packages/backend/src/server/api/SignupApiService.ts
+++ b/packages/backend/src/server/api/SignupApiService.ts
@ -136,7 +136,20 @@ export class SignupApiService {
 				return;
 			}

-			if (ticket.usedAt) {
+			// メアド認証が有効の場合
+			if (instance.emailRequiredForSignup) {
+				// メアド認証済みならエラー
+				if (ticket.usedBy) {
+					reply.code(400);
+					return;
+				}
+
+				// 認証しておらず、メール送信から30分以内ならエラー
+				if (ticket.usedAt && ticket.usedAt.getTime() + (1000 * 60 * 30) > Date.now()) {
+					reply.code(400);
+					return;
+				}
+			} else if (ticket.usedAt) {
 				reply.code(400);
 				return;
 			}
@ -224,6 +237,10 @@ export class SignupApiService {
 		try {
 			const pendingUser = await this.userPendingsRepository.findOneByOrFail({ code });

+			if (this.idService.parse(pendingUser.id).date.getTime() + (1000 * 60 * 30) < Date.now()) {
+				throw new FastifyReplyError(400, 'EXPIRED');
+			}
+
 			const { account, secret } = await this.signupService.signup({
 				username: pendingUser.username,
 				passwordHash: pendingUser.password,
--- a/packages/backend/src/server/api/endpoints.ts
+++ b/packages/backend/src/server/api/endpoints.ts
@ -237,7 +237,7 @@ import * as ep___i_registry_get from './endpoints/i/registry/get.js';
 import * as ep___i_registry_keysWithType from './endpoints/i/registry/keys-with-type.js';
 import * as ep___i_registry_keys from './endpoints/i/registry/keys.js';
 import * as ep___i_registry_remove from './endpoints/i/registry/remove.js';
-import * as ep___i_registry_scopes from './endpoints/i/registry/scopes.js';
+import * as ep___i_registry_scopesWithDomain from './endpoints/i/registry/scopes-with-domain.js';
 import * as ep___i_registry_set from './endpoints/i/registry/set.js';
 import * as ep___i_revokeToken from './endpoints/i/revoke-token.js';
 import * as ep___i_signinHistory from './endpoints/i/signin-history.js';
@ -622,7 +622,7 @@ const eps = [
 	['i/registry/keys-with-type', ep___i_registry_keysWithType],
 	['i/registry/keys', ep___i_registry_keys],
 	['i/registry/remove', ep___i_registry_remove],
-	['i/registry/scopes', ep___i_registry_scopes],
+	['i/registry/scopes-with-domain', ep___i_registry_scopesWithDomain],
 	['i/registry/set', ep___i_registry_set],
 	['i/revoke-token', ep___i_revokeToken],
 	['i/signin-history', ep___i_signinHistory],
--- a/packages/backend/src/server/api/endpoints/i/registry/get-all.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/get-all.ts
@ -5,13 +5,10 @@

 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { RegistryItemsRepository } from '@/models/_.js';
-import { DI } from '@/di-symbols.js';
+import { RegistryApiService } from '@/core/RegistryApiService.js';

 export const meta = {
 	requireCredential: true,
-
-	secure: true,
 } as const;

 export const paramDef = {
@ -20,23 +17,18 @@ export const paramDef = {
 		scope: { type: 'array', default: [], items: {
 			type: 'string', pattern: /^[a-zA-Z0-9_]+$/.toString().slice(1, -1),
 		} },
+		domain: { type: 'string', nullable: true },
 	},
-	required: [],
+	required: ['scope'],
 } as const;

@Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
-		@Inject(DI.registryItemsRepository)
-		private registryItemsRepository: RegistryItemsRepository,
+		private registryApiService: RegistryApiService,
 	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.registryItemsRepository.createQueryBuilder('item')
-				.where('item.domain IS NULL')
-				.andWhere('item.userId = :userId', { userId: me.id })
-				.andWhere('item.scope = :scope', { scope: ps.scope });
-
-			const items = await query.getMany();
+		super(meta, paramDef, async (ps, me, accessToken) => {
+			const items = await this.registryApiService.getAllItemsOfScope(me.id, accessToken != null ? accessToken.id : (ps.domain ?? null), ps.scope);

 			const res = {} as Record<string, any>;

--- a/packages/backend/src/server/api/endpoints/i/registry/get-detail.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/get-detail.ts
@ -5,15 +5,12 @@

 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { RegistryItemsRepository } from '@/models/_.js';
-import { DI } from '@/di-symbols.js';
+import { RegistryApiService } from '@/core/RegistryApiService.js';
 import { ApiError } from '../../../error.js';

 export const meta = {
 	requireCredential: true,

-	secure: true,
-
 	errors: {
 		noSuchKey: {
 			message: 'No such key.',
@ -30,24 +27,18 @@ export const paramDef = {
 		scope: { type: 'array', default: [], items: {
 			type: 'string', pattern: /^[a-zA-Z0-9_]+$/.toString().slice(1, -1),
 		} },
+		domain: { type: 'string', nullable: true },
 	},
-	required: ['key'],
+	required: ['key', 'scope'],
 } as const;

@Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
-		@Inject(DI.registryItemsRepository)
-		private registryItemsRepository: RegistryItemsRepository,
+		private registryApiService: RegistryApiService,
 	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.registryItemsRepository.createQueryBuilder('item')
-				.where('item.domain IS NULL')
-				.andWhere('item.userId = :userId', { userId: me.id })
-				.andWhere('item.key = :key', { key: ps.key })
-				.andWhere('item.scope = :scope', { scope: ps.scope });
-
-			const item = await query.getOne();
+		super(meta, paramDef, async (ps, me, accessToken) => {
+			const item = await this.registryApiService.getItem(me.id, accessToken != null ? accessToken.id : (ps.domain ?? null), ps.scope, ps.key);

 			if (item == null) {
 				throw new ApiError(meta.errors.noSuchKey);
--- a/packages/backend/src/server/api/endpoints/i/registry/get.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/get.ts
@ -5,15 +5,12 @@

 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { RegistryItemsRepository } from '@/models/_.js';
-import { DI } from '@/di-symbols.js';
+import { RegistryApiService } from '@/core/RegistryApiService.js';
 import { ApiError } from '../../../error.js';

 export const meta = {
 	requireCredential: true,

-	secure: true,
-
 	errors: {
 		noSuchKey: {
 			message: 'No such key.',
@ -30,24 +27,18 @@ export const paramDef = {
 		scope: { type: 'array', default: [], items: {
 			type: 'string', pattern: /^[a-zA-Z0-9_]+$/.toString().slice(1, -1),
 		} },
+		domain: { type: 'string', nullable: true },
 	},
-	required: ['key'],
+	required: ['key', 'scope'],
 } as const;

@Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
-		@Inject(DI.registryItemsRepository)
-		private registryItemsRepository: RegistryItemsRepository,
+		private registryApiService: RegistryApiService,
 	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.registryItemsRepository.createQueryBuilder('item')
-				.where('item.domain IS NULL')
-				.andWhere('item.userId = :userId', { userId: me.id })
-				.andWhere('item.key = :key', { key: ps.key })
-				.andWhere('item.scope = :scope', { scope: ps.scope });
-
-			const item = await query.getOne();
+		super(meta, paramDef, async (ps, me, accessToken) => {
+			const item = await this.registryApiService.getItem(me.id, accessToken != null ? accessToken.id : (ps.domain ?? null), ps.scope, ps.key);

 			if (item == null) {
 				throw new ApiError(meta.errors.noSuchKey);
--- a/packages/backend/src/server/api/endpoints/i/registry/keys-with-type.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/keys-with-type.ts
@ -5,13 +5,10 @@

 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { RegistryItemsRepository } from '@/models/_.js';
-import { DI } from '@/di-symbols.js';
+import { RegistryApiService } from '@/core/RegistryApiService.js';

 export const meta = {
 	requireCredential: true,
-
-	secure: true,
 } as const;

 export const paramDef = {
@ -20,36 +17,31 @@ export const paramDef = {
 		scope: { type: 'array', default: [], items: {
 			type: 'string', pattern: /^[a-zA-Z0-9_]+$/.toString().slice(1, -1),
 		} },
+		domain: { type: 'string', nullable: true },
 	},
-	required: [],
+	required: ['scope'],
 } as const;

@Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
-		@Inject(DI.registryItemsRepository)
-		private registryItemsRepository: RegistryItemsRepository,
+		private registryApiService: RegistryApiService,
 	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.registryItemsRepository.createQueryBuilder('item')
-				.where('item.domain IS NULL')
-				.andWhere('item.userId = :userId', { userId: me.id })
-				.andWhere('item.scope = :scope', { scope: ps.scope });
-
-			const items = await query.getMany();
+		super(meta, paramDef, async (ps, me, accessToken) => {
+			const items = await this.registryApiService.getAllItemsOfScope(me.id, accessToken != null ? accessToken.id : (ps.domain ?? null), ps.scope);

 			const res = {} as Record<string, string>;

 			for (const item of items) {
 				const type = typeof item.value;
 				res[item.key] =
-			item.value === null ? 'null' :
-			Array.isArray(item.value) ? 'array' :
-			type === 'number' ? 'number' :
-			type === 'string' ? 'string' :
-			type === 'boolean' ? 'boolean' :
-			type === 'object' ? 'object' :
-			null as never;
+					item.value === null ? 'null' :
+					Array.isArray(item.value) ? 'array' :
+					type === 'number' ? 'number' :
+					type === 'string' ? 'string' :
+					type === 'boolean' ? 'boolean' :
+					type === 'object' ? 'object' :
+					null as never;
 			}

 			return res;
--- a/packages/backend/src/server/api/endpoints/i/registry/keys.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/keys.ts
@ -5,13 +5,10 @@

 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { RegistryItemsRepository } from '@/models/_.js';
-import { DI } from '@/di-symbols.js';
+import { RegistryApiService } from '@/core/RegistryApiService.js';

 export const meta = {
 	requireCredential: true,
-
-	secure: true,
 } as const;

 export const paramDef = {
@ -20,26 +17,18 @@ export const paramDef = {
 		scope: { type: 'array', default: [], items: {
 			type: 'string', pattern: /^[a-zA-Z0-9_]+$/.toString().slice(1, -1),
 		} },
+		domain: { type: 'string', nullable: true },
 	},
-	required: [],
+	required: ['scope'],
 } as const;

@Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
-		@Inject(DI.registryItemsRepository)
-		private registryItemsRepository: RegistryItemsRepository,
+		private registryApiService: RegistryApiService,
 	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.registryItemsRepository.createQueryBuilder('item')
-				.select('item.key')
-				.where('item.domain IS NULL')
-				.andWhere('item.userId = :userId', { userId: me.id })
-				.andWhere('item.scope = :scope', { scope: ps.scope });
-
-			const items = await query.getMany();
-
-			return items.map(x => x.key);
+		super(meta, paramDef, async (ps, me, accessToken) => {
+			return await this.registryApiService.getAllKeysOfScope(me.id, accessToken != null ? accessToken.id : (ps.domain ?? null), ps.scope);
 		});
 	}
 }
--- a/packages/backend/src/server/api/endpoints/i/registry/remove.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/remove.ts
@ -7,13 +7,12 @@ import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import type { RegistryItemsRepository } from '@/models/_.js';
 import { DI } from '@/di-symbols.js';
+import { RegistryApiService } from '@/core/RegistryApiService.js';
 import { ApiError } from '../../../error.js';

 export const meta = {
 	requireCredential: true,

-	secure: true,
-
 	errors: {
 		noSuchKey: {
 			message: 'No such key.',
@ -30,30 +29,18 @@ export const paramDef = {
 		scope: { type: 'array', default: [], items: {
 			type: 'string', pattern: /^[a-zA-Z0-9_]+$/.toString().slice(1, -1),
 		} },
+		domain: { type: 'string', nullable: true },
 	},
-	required: ['key'],
+	required: ['key', 'scope'],
 } as const;

@Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
-		@Inject(DI.registryItemsRepository)
-		private registryItemsRepository: RegistryItemsRepository,
+		private registryApiService: RegistryApiService,
 	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.registryItemsRepository.createQueryBuilder('item')
-				.where('item.domain IS NULL')
-				.andWhere('item.userId = :userId', { userId: me.id })
-				.andWhere('item.key = :key', { key: ps.key })
-				.andWhere('item.scope = :scope', { scope: ps.scope });
-
-			const item = await query.getOne();
-
-			if (item == null) {
-				throw new ApiError(meta.errors.noSuchKey);
-			}
-
-			await this.registryItemsRepository.remove(item);
+		super(meta, paramDef, async (ps, me, accessToken) => {
+			await this.registryApiService.remove(me.id, accessToken != null ? accessToken.id : (ps.domain ?? null), ps.scope, ps.key);
 		});
 	}
 }
--- a/packages/backend/src/server/api/endpoints/i/registry/scopes-with-domain.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/scopes-with-domain.ts
@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { RegistryApiService } from '@/core/RegistryApiService.js';
+
+export const meta = {
+	requireCredential: true,
+	secure: true,
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {},
+	required: [],
+} as const;
+
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
+	constructor(
+		private registryApiService: RegistryApiService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.registryApiService.getAllScopeAndDomains(me.id);
+		});
+	}
+}
--- a/packages/backend/src/server/api/endpoints/i/registry/scopes.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/scopes.ts
@ -1,47 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import { Inject, Injectable } from '@nestjs/common';
-import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { RegistryItemsRepository } from '@/models/_.js';
-import { DI } from '@/di-symbols.js';
-
-export const meta = {
-	requireCredential: true,
-
-	secure: true,
-} as const;
-
-export const paramDef = {
-	type: 'object',
-	properties: {},
-	required: [],
-} as const;
-
-@Injectable()
-export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
-	constructor(
-		@Inject(DI.registryItemsRepository)
-		private registryItemsRepository: RegistryItemsRepository,
-	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.registryItemsRepository.createQueryBuilder('item')
-				.select('item.scope')
-				.where('item.domain IS NULL')
-				.andWhere('item.userId = :userId', { userId: me.id });
-
-			const items = await query.getMany();
-
-			const res = [] as string[][];
-
-			for (const item of items) {
-				if (res.some(scope => scope.join('.') === item.scope.join('.'))) continue;
-				res.push(item.scope);
-			}
-
-			return res;
-		});
-	}
-}
--- a/packages/backend/src/server/api/endpoints/i/registry/set.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/set.ts
@ -5,15 +5,10 @@

 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { RegistryItemsRepository } from '@/models/_.js';
-import { IdService } from '@/core/IdService.js';
-import { GlobalEventService } from '@/core/GlobalEventService.js';
-import { DI } from '@/di-symbols.js';
+import { RegistryApiService } from '@/core/RegistryApiService.js';

 export const meta = {
 	requireCredential: true,
-
-	secure: true,
 } as const;

 export const paramDef = {
@ -24,51 +19,18 @@ export const paramDef = {
 		scope: { type: 'array', default: [], items: {
 			type: 'string', pattern: /^[a-zA-Z0-9_]+$/.toString().slice(1, -1),
 		} },
+		domain: { type: 'string', nullable: true },
 	},
-	required: ['key', 'value'],
+	required: ['key', 'value', 'scope'],
 } as const;

@Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
-		@Inject(DI.registryItemsRepository)
-		private registryItemsRepository: RegistryItemsRepository,
-
-		private idService: IdService,
-		private globalEventService: GlobalEventService,
+		private registryApiService: RegistryApiService,
 	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.registryItemsRepository.createQueryBuilder('item')
-				.where('item.domain IS NULL')
-				.andWhere('item.userId = :userId', { userId: me.id })
-				.andWhere('item.key = :key', { key: ps.key })
-				.andWhere('item.scope = :scope', { scope: ps.scope });
-
-			const existingItem = await query.getOne();
-
-			if (existingItem) {
-				await this.registryItemsRepository.update(existingItem.id, {
-					updatedAt: new Date(),
-					value: ps.value,
-				});
-			} else {
-				await this.registryItemsRepository.insert({
-					id: this.idService.gen(),
-					updatedAt: new Date(),
-					userId: me.id,
-					domain: null,
-					scope: ps.scope,
-					key: ps.key,
-					value: ps.value,
-				});
-			}
-
-			// TODO: サードパーティアプリが傍受出来てしまうのでどうにかする
-			this.globalEventService.publishMainStream(me.id, 'registryUpdated', {
-				scope: ps.scope,
-				key: ps.key,
-				value: ps.value,
-			});
+		super(meta, paramDef, async (ps, me, accessToken) => {
+			await this.registryApiService.set(me.id, accessToken ? accessToken.id : (ps.domain ?? null), ps.scope, ps.key, ps.value);
 		});
 	}
 }
--- a/packages/backend/src/server/api/endpoints/notes/create.test.ts
+++ b/packages/backend/src/server/api/endpoints/notes/create.test.ts
@ -64,7 +64,7 @@ describe('api:notes/create', () => {

 			test('0 characters cw', () => {
 				expect(v({ text: 'Body', cw: '' }))
-					.toBe(VALID);
+					.toBe(INVALID);
 			});

 			test('reject only cw', () => {
--- a/packages/backend/src/server/api/endpoints/notes/create.ts
+++ b/packages/backend/src/server/api/endpoints/notes/create.ts
@ -16,8 +16,8 @@ import { Endpoint } from '@/server/api/endpoint-base.js';
 import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
 import { NoteCreateService } from '@/core/NoteCreateService.js';
 import { DI } from '@/di-symbols.js';
-import { ApiError } from '../../error.js';
 import { isPureRenote } from '@/misc/is-pure-renote.js';
+import { ApiError } from '../../error.js';

 export const meta = {
 	tags: ['notes'],
@ -109,7 +109,7 @@ export const paramDef = {
 		visibleUserIds: { type: 'array', uniqueItems: true, items: {
 			type: 'string', format: 'misskey:id',
 		} },
-		cw: { type: 'string', nullable: true, maxLength: 100 },
+		cw: { type: 'string', nullable: true, minLength: 1, maxLength: 100 },
 		localOnly: { type: 'boolean', default: false },
 		reactionAcceptance: { type: 'string', nullable: true, enum: [null, 'likeOnly', 'likeOnlyForRemote', 'nonSensitiveOnly', 'nonSensitiveOnlyForLocalLikeOnlyForRemote'], default: null },
 		disableRightClick: { type: 'boolean', default: false },
--- a/packages/backend/src/server/web/ClientServerService.ts
+++ b/packages/backend/src/server/web/ClientServerService.ts
@ -254,8 +254,9 @@ export class ClientServerService {
 				decorateReply: false,
 			});
 		} else {
+			const port = (process.env.VITE_PORT ?? '5173');
 			fastify.register(fastifyProxy, {
-				upstream: 'http://localhost:5173', // TODO: port configuration
+				upstream: 'http://localhost:' + port,
 				prefix: '/vite',
 				rewritePrefix: '/vite',
 			});
--- a/packages/cherrypick-js/CONTRIBUTING.md
+++ b/packages/cherrypick-js/CONTRIBUTING.md
@ -15,7 +15,7 @@ Issueを作成する前に、以下をご確認ください:
 - 重複を防ぐため、既に同様の内容のIssueが作成されていないか検索してから新しいIssueを作ってください。
 - Issueを質問に使わないでください。
 	- Issueは、要望、提案、問題の報告にのみ使用してください。
-	- 質問は、[Misskey Forum](https://forum.misskey.io/)や[Discord](https://discord.gg/Wp8gVStHW3)でお願いします。
+	- 質問は、[GitHub Discussions](https://github.com/kokonect-link/cherrypick/discussions)や[Discord](https://discord.gg/V8qghB28Aj)でお願いします。

 ## PRの作成
 PRを作成する前に、以下をご確認ください:
@ -23,7 +23,7 @@ PRを作成する前に、以下をご確認ください:
  - fix / refactor / feat / enhance / perf / chore 等
  - また、PRの粒度が適切であることを確認してください。ひとつのPRに複数の種類の変更や関心を含めることは避けてください。
 - このPRによって解決されるIssueがある場合は、そのIssueへの参照を本文内に含めてください。
- [`CHANGELOG.md`](/CHANGELOG.md)に変更点を追記してください。リファクタリングなど、利用者に影響を与えない変更についてはこの限りではありません。
+- [`CHANGELOG_CHERRYPICK.md`](/CHANGELOG_CHERRYPICK.md)に変更点を追記してください。リファクタリングなど、利用者に影響を与えない変更についてはこの限りではありません。
 - この変更により新たに作成、もしくは更新すべきドキュメントがないか確認してください。
 - 機能追加やバグ修正をした場合は、可能であればテストケースを追加してください。
 - テスト、Lintが通っていることを予め確認してください。
--- a/packages/cherrypick-js/docs/CONTRIBUTING.en.md
+++ b/packages/cherrypick-js/docs/CONTRIBUTING.en.md
@ -11,7 +11,7 @@ Before creating an issue, please check the following:
 - To avoid duplication, please search for similar issues before creating a new issue.
 - Do not use Issues as a question.
 	- Issues should only be used to feature requests, suggestions, and report problems.
-	- Please ask questions in the [Misskey Forum](https://forum.misskey.io/) or [Discord](https://discord.gg/Wp8gVStHW3).
+	- Please ask questions in [GitHub Discussions](https://github.com/kokonect-link/cherrypick/discussions) or [Discord](https://discord.gg/V8qghB28Aj).

 ## Creating a PR
 Thank you for your PR! Before creating a PR, please check the following:
@ -19,7 +19,7 @@ Thank you for your PR! Before creating a PR, please check the following:
  - fix / refactor / feat / enhance / perf / chore etc.
  - Also, make sure that the granularity of this PR is appropriate. Please do not include more than one type of change or interest in a single PR.
 - If there is an Issue which will be resolved by this PR, please include a reference to the Issue in the text.
- Please add the summary of the changes to [`CHANGELOG.md`](/CHANGELOG.md). However, this is not necessary for changes that do not affect the users, such as refactoring.
+- Please add the summary of the changes to [`CHANGELOG_CHERRYPICK.md`](/CHANGELOG_CHERRYPICK.md). However, this is not necessary for changes that do not affect the users, such as refactoring.
 - 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.
--- a/packages/cherrypick-js/etc/cherrypick-js.api.md
+++ b/packages/cherrypick-js/etc/cherrypick-js.api.md
@ -1510,10 +1510,6 @@ export type Endpoints = {
        };
        res: null;
    };
-    'i/registry/scopes': {
-        req: NoParams;
-        res: string[][];
-    };
    'i/registry/set': {
        req: {
            key: string;
--- a/packages/cherrypick-js/package.json
+++ b/packages/cherrypick-js/package.json
@ -20,7 +20,7 @@
 		"url": "git+https://github.com/misskey-dev/misskey.js.git"
 	},
 	"devDependencies": {
-		"@microsoft/api-extractor": "7.38.1",
+		"@microsoft/api-extractor": "7.38.2",
 		"@swc/jest": "0.2.29",
 		"@types/jest": "29.5.7",
 		"@types/node": "20.8.10",
--- a/packages/cherrypick-js/src/api.types.ts
+++ b/packages/cherrypick-js/src/api.types.ts
@ -406,7 +406,6 @@ export type Endpoints = {
 	'i/registry/keys-with-type': { req: { scope?: string[]; }; res: Record<string, 'null' | 'array' | 'number' | 'string' | 'boolean' | 'object'>; };
 	'i/registry/keys': { req: { scope?: string[]; }; res: string[]; };
 	'i/registry/remove': { req: { key: string; scope?: string[]; }; res: null; };
-	'i/registry/scopes': { req: NoParams; res: string[][]; };
 	'i/registry/set': { req: { key: string; value: any; scope?: string[]; }; res: null; };
 	'i/revoke-token': { req: TODO; res: TODO; };
 	'i/signin-history': { req: { limit?: number; sinceId?: Signin['id']; untilId?: Signin['id']; }; res: Signin[]; };
--- a/packages/frontend/assets/tutorial/ai.webp
+++ b/packages/frontend/assets/tutorial/ai.webp
--- a/packages/frontend/assets/tutorial/natto_failed.webp
+++ b/packages/frontend/assets/tutorial/natto_failed.webp
--- a/packages/frontend/assets/tutorial/timeline_tab.png
+++ b/packages/frontend/assets/tutorial/timeline_tab.png
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@ -76,7 +76,7 @@
 		"twemoji-parser": "14.0.0",
 		"typescript": "5.2.2",
 		"uuid": "9.0.1",
-		"v-code-diff": "1.7.1",
+		"v-code-diff": "1.7.2",
 		"vanilla-tilt": "1.8.1",
 		"vite": "4.5.0",
 		"vue": "3.3.7",
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@ -47,6 +47,7 @@ import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
 import { useRouter } from '@/router.js';
 import { getDriveFileMenu } from '@/scripts/get-drive-file-menu.js';
+import { deviceKind } from '@/scripts/device-kind.js';

 const router = useRouter();

@ -74,7 +75,11 @@ function onClick(ev: MouseEvent) {
 	if (props.selectMode) {
 		emit('chosen', props.file);
 	} else {
-		router.push(`/my/drive/file/${props.file.id}`);
+		if (deviceKind === 'desktop') {
+			router.push(`/my/drive/file/${props.file.id}`);
+		} else {
+			os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+		}
 	}
 }

--- a/packages/frontend/src/components/MkInfo.vue
+++ b/packages/frontend/src/components/MkInfo.vue
@ -4,47 +4,42 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<div v-if="visible" :class="[$style.root, { [$style.warn]: warn }]">
+<div :class="[$style.root, { [$style.warn]: warn }]">
 	<i v-if="warn" class="ti ti-alert-triangle" :class="$style.i"></i>
 	<i v-else class="ti ti-info-circle" :class="$style.i"></i>
-	<slot></slot>
-	<button v-if="closeable" v-tooltip="i18n.ts.close" :class="$style.close" class="_button" :aria-label="i18n.t('close')" @click.stop="close">
-		<i class="ti ti-x"></i>
-	</button>
+	<div><slot></slot></div>
+	<button v-if="closable" :class="$style.button" class="_button" @click="close()"><i class="ti ti-x"></i></button>
 </div>
 </template>

 <script lang="ts" setup>
-import { ref } from 'vue';
-import { i18n } from '@/i18n.js';
-
-const visible = ref(true);
+import { } from 'vue';

 const props = defineProps<{
 	warn?: boolean;
-  closeable?: boolean;
+	closable?: boolean;
 }>();

 const emit = defineEmits<{
-  (ev: 'closed'): void;
+	(ev: 'close'): void;
 }>();

 function close() {
-	visible.value = false;
-	emit('closed');
+	// こいつの中では非表示動作は行わない
+	emit('close');
 }
 </script>

 <style lang="scss" module>
 .root {
+	display: flex;
+  align-items: center;
 	padding: 12px 14px;
 	font-size: 90%;
 	background: var(--infoBg);
 	color: var(--infoFg);
 	border-radius: var(--radius);
 	white-space: pre-wrap;
-  display: flex;
-  align-items: center;

 	&.warn {
 		background: var(--infoWarnBg);
@ -53,11 +48,11 @@ function close() {
 }

 .i {
-	margin-right: 8px;
+	margin-right: 4px;
 }

-.close {
-  margin-left: auto;
-  float: right;
+.button {
+	margin-left: auto;
+	padding: 4px;
 }
 </style>
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
 		<div style="display: flex; padding-bottom: 10px;">
 			<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
-			<MkAvatar v-if="!defaultStore.state.hideAvatarsInNote" :class="[$style.avatar, { [$style.avatarReplyTo]: appearNote.reply, [$style.showEl]: !appearNote.reply && (showEl && ['hideHeaderOnly', 'hideHeaderFloatBtn', 'hide'].includes(<string>defaultStore.state.displayHeaderNavBarWhenScroll)) && mainRouter.currentRoute.value.name === 'index', [$style.showElTab]: !appearNote.reply && (showEl && ['hideHeaderOnly', 'hideHeaderFloatBtn', 'hide'].includes(<string>defaultStore.state.displayHeaderNavBarWhenScroll)) && mainRouter.currentRoute.value.name !== 'index' }]" :user="appearNote.user" link preview/>
+			<MkAvatar v-if="!defaultStore.state.hideAvatarsInNote" :class="[$style.avatar, { [$style.avatarReplyTo]: appearNote.reply, [$style.showEl]: !appearNote.reply && (showEl && ['hideHeaderOnly', 'hideHeaderFloatBtn', 'hide'].includes(<string>defaultStore.state.displayHeaderNavBarWhenScroll)) && mainRouter.currentRoute.value.name === 'index', [$style.showElTab]: !appearNote.reply && (showEl && ['hideHeaderOnly', 'hideHeaderFloatBtn', 'hide'].includes(<string>defaultStore.state.displayHeaderNavBarWhenScroll)) && mainRouter.currentRoute.value.name !== 'index' }]" :user="appearNote.user" :link="!mock" :preview="!mock"/>
 			<div :class="$style.main">
 				<MkNoteHeader :note="appearNote" :mini="true"/>
 			</div>
@ -113,7 +113,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
 		<div>
-			<MkReactionsViewer v-show="appearNote.cw == null || showContent" :note="appearNote" :maxNumber="16">
+			<MkReactionsViewer v-show="appearNote.cw == null || showContent" :note="appearNote" :maxNumber="16" @mockUpdateMyReaction="emitUpdReaction">
 				<template #more>
 					<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div>
 				</template>
@ -176,7 +176,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { computed, inject, onMounted, ref, shallowRef, Ref, defineAsyncComponent } from 'vue';
+import { computed, inject, onMounted, ref, shallowRef, Ref, defineAsyncComponent, watch, provide } from 'vue';
 import * as mfm from 'cherrypick-mfm-js';
 import * as Misskey from 'cherrypick-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
@ -221,11 +221,20 @@ let showEl = $ref(false);
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
 	pinned?: boolean;
+  mock?: boolean;
  notification?: boolean;
 }>(), {
+  mock: false,
 	notification: false,
 });

+provide('mock', props.mock);
+
+const emit = defineEmits<{
+  (ev: 'reaction', emoji: string): void;
+  (ev: 'removeReaction', emoji: string): void;
+}>();
+
 const inChannel = inject('inChannel', null);
 const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null);

@ -296,30 +305,38 @@ onMounted(() => {
 	});
 });

-useNoteCapture({
-	rootEl: el,
-	note: $$(appearNote),
-	pureNote: $$(note),
-	isDeletedRef: isDeleted,
-});
+if (props.mock) {
+  watch(() => props.note, (to) => {
+    note = deepClone(to);
+  }, { deep: true });
+} else {
+  useNoteCapture({
+    rootEl: el,
+    note: $$(appearNote),
+    pureNote: $$(note),
+    isDeletedRef: isDeleted,
+  });
+}

-useTooltip(renoteButton, async (showing) => {
-	const renotes = await os.api('notes/renotes', {
-		noteId: appearNote.id,
-		limit: 11,
+if (!props.mock) {
+	useTooltip(renoteButton, async (showing) => {
+		const renotes = await os.api('notes/renotes', {
+			noteId: appearNote.id,
+			limit: 11,
+		});
+
+		const users = renotes.map(x => x.user);
+
+		if (users.length < 1) return;
+
+		os.popup(MkUsersTooltip, {
+			showing,
+			users,
+			count: appearNote.renoteCount,
+			targetElement: renoteButton.value,
+		}, {}, 'closed');
 	});
-
-	const users = renotes.map(x => x.user);
-
-	if (users.length < 1) return;
-
-	os.popup(MkUsersTooltip, {
-		showing,
-		users,
-		count: appearNote.renoteCount,
-		targetElement: renoteButton.value,
-	}, {}, 'closed');
-});
+}

 type Visibility = 'public' | 'home' | 'followers' | 'specified';

@ -351,23 +368,27 @@ function renote(viaKeyboard = false) {
 					os.popup(MkRippleEffect, { x, y }, {}, 'end');
 				}

-				os.api('notes/create', {
-					renoteId: appearNote.id,
-					channelId: appearNote.channelId,
-				}).then(() => {
-					os.noteToast(i18n.ts.renoted, 'renote');
-				});
+				if (!props.mock) {
+					os.api('notes/create', {
+						renoteId: appearNote.id,
+						channelId: appearNote.channelId,
+					}).then(() => {
+            os.noteToast(i18n.ts.renoted, 'renote');
+					});
+				}
 			},
 		}, {
 			text: i18n.ts.inChannelQuote,
 			icon: 'ti ti-quote',
 			action: () => {
-				os.post({
-					renote: appearNote,
-					channel: appearNote.channel,
-				}, () => {
-					focus();
-				});
+				if (!props.mock) {
+					os.post({
+						renote: appearNote,
+						channel: appearNote.channel,
+					}, () => {
+            focus();
+          });
+				}
 			},
 		}, null]);
 	}
@ -393,15 +414,17 @@ function renote(viaKeyboard = false) {
 				visibility = smallerVisibility(visibility, 'home');
 			}

-			os.api('notes/create', {
-				localOnly,
-				visibility,
-				renoteId: appearNote.id,
-			}).then(() => {
-				os.noteToast(i18n.ts.renoted, 'renote');
-			});
+			if (!props.mock) {
+				os.api('notes/create', {
+					localOnly,
+					visibility,
+					renoteId: appearNote.id,
+				}).then(() => {
+          os.noteToast(i18n.ts.renoted, 'renote');
+				});
+			}
 		},
-	}, {
+	}, (props.mock) ? undefined : {
 		text: i18n.ts.quote,
 		icon: 'ti ti-quote',
 		action: () => {
@ -432,21 +455,23 @@ async function renoteOnly() {
 	}

 	if (appearNote.channel) {
-		const el = renoteButton.value 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(MkRippleEffect, { x, y }, {}, 'end');
-		}
+    const el = renoteButton.value 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(MkRippleEffect, {x, y}, {}, 'end');
+    }

-		os.api('notes/create', {
-			renoteId: appearNote.id,
-			channelId: appearNote.channelId,
-		}).then(() => {
-			os.noteToast(i18n.ts.renoted, 'renote');
-		});
-	}
+    if (!props.mock) {
+      os.api('notes/create', {
+        renoteId: appearNote.id,
+        channelId: appearNote.channelId,
+      }).then(() => {
+        os.noteToast(i18n.ts.renoted, 'renote');
+      });
+    }
+  }

 	const el = renoteButton.value as HTMLElement | null | undefined;
 	if (el) {
@ -465,17 +490,22 @@ async function renoteOnly() {
 		visibility = smallerVisibility(visibility, 'home');
 	}

-	os.api('notes/create', {
-		localOnly,
-		visibility,
-		renoteId: appearNote.id,
-	}).then(() => {
-		os.noteToast(i18n.ts.renoted, 'renote');
-	});
+  if (!props.mock) {
+    os.api('notes/create', {
+      localOnly,
+      visibility,
+      renoteId: appearNote.id,
+    }).then(() => {
+      os.noteToast(i18n.ts.renoted, 'renote');
+    });
+  }
 }

 function quote(viaKeyboard = false): void {
 	pleaseLogin();
+  if (props.mock) {
+    return;
+  }
 	if (appearNote.channel) {
 		os.post({
 			renote: appearNote,
@ -494,6 +524,9 @@ function quote(viaKeyboard = false): void {

 function reply(viaKeyboard = false): void {
 	pleaseLogin();
+	if (props.mock) {
+		return;
+	}
 	os.post({
 		reply: appearNote,
 		channel: appearNote.channel,
@ -507,6 +540,9 @@ function react(viaKeyboard = false): void {
 	pleaseLogin();
 	showMovedDialog();
 	if (appearNote.reactionAcceptance === 'likeOnly') {
+		if (props.mock) {
+			return;
+		}
 		os.api('notes/reactions/create', {
 			noteId: appearNote.id,
 			reaction: '❤️',
@ -521,6 +557,10 @@ function react(viaKeyboard = false): void {
 	} else {
 		blur();
 		reactionPicker.show(reactButton.value, reaction => {
+      if (props.mock) {
+        emit('reaction', reaction);
+        return;
+      }
 			toggleReaction(reaction);
 		}, () => {
 			focus();
@ -561,6 +601,11 @@ async function toggleReaction(reaction) {
 function heartReact(): void {
 	pleaseLogin();
 	showMovedDialog();
+
+  if (props.mock) {
+    return;
+  }
+
 	os.api('notes/reactions/create', {
 		noteId: appearNote.id,
 		reaction: '❤️',
@ -580,12 +625,22 @@ function heartReact(): void {
 function undoReact(note): void {
 	const oldReaction = note.myReaction;
 	if (!oldReaction) return;
+
+	if (props.mock) {
+		emit('removeReaction', oldReaction);
+		return;
+	}
+
 	os.api('notes/reactions/delete', {
 		noteId: note.id,
 	});
 }

 function onContextmenu(ev: MouseEvent): void {
+	if (props.mock) {
+		return;
+	}
+
 	const isLink = (el: HTMLElement) => {
 		if (el.tagName === 'A') return true;
 		// 再生速度の選択などのために、Audio要素のコンテキストメニューはブラウザデフォルトとする。
@ -607,6 +662,10 @@ function onContextmenu(ev: MouseEvent): void {
 }

 function menu(viaKeyboard = false): void {
+	if (props.mock) {
+		return;
+	}
+
 	const { menu, cleanup } = getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClip: currentClip?.value });
 	os.popupMenu(menu, menuButton.value, {
 		viaKeyboard,
@ -614,12 +673,21 @@ function menu(viaKeyboard = false): void {
 }

 async function clip() {
+	if (props.mock) {
+		return;
+	}
+
 	os.popupMenu(await getNoteClipMenu({ note: note, isDeleted, currentClip: currentClip?.value }), clipButton.value).then(focus);
 }

 async function translate(): Promise<void> {
 	if (translation.value != null) return;
 	translating.value = true;
+
+  if (props.mock) {
+    return;
+  }
+
 	const res = await os.api('notes/translate', {
 		noteId: appearNote.id,
 		targetLang: miLocalStorage.getItem('lang') ?? navigator.language,
@ -629,6 +697,10 @@ async function translate(): Promise<void> {
 }

 function showRenoteMenu(viaKeyboard = false): void {
+	if (props.mock) {
+		return;
+	}
+
 	function getUnrenote(): MenuItem {
 		return {
 			text: i18n.ts.unrenote,
@ -686,6 +758,14 @@ function readPromo() {
 	});
 	isDeleted.value = true;
 }
+
+function emitUpdReaction(emoji: string, delta: number) {
+	if (delta < 0) {
+		emit('removeReaction', emoji);
+	} else if (delta > 0) {
+		emit('reaction', emoji);
+	}
+}
 </script>

 <style lang="scss" module>
--- a/packages/frontend/src/components/MkNoteHeader.vue
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@ -7,7 +7,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <header :class="$style.root">
 	<div :class="$style.section">
 		<div style="display: flex;">
-			<MkA v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
+      <div v-if="mock" :class="$style.name">
+        <MkUserName :user="note.user"/>
+      </div>
+			<MkA v-else v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
 				<MkUserName :user="note.user"/>
 			</MkA>
 			<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
@ -33,7 +36,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</span>
 			<span v-if="note.localOnly" style="margin-right: 0.5em;"><i v-tooltip="i18n.ts._visibility['disableFederation']" class="ti ti-rocket-off"></i></span>
 			<span v-if="note.channel" style="margin-right: 0.5em;"><i v-tooltip="note.channel.name" class="ti ti-device-tv"></i></span>
-			<MkA :class="$style.time" :to="notePage(note)">
+      <div v-if="mock">
+        <MkTime :time="note.createdAt" colored/>
+      </div>
+			<MkA v-else :class="$style.time" :to="notePage(note)">
 				<MkTime v-if="defaultStore.state.enableAbsoluteTime" :time="note.createdAt" mode="absolute" colored/>
 				<MkTime v-else-if="!defaultStore.state.enableAbsoluteTime" :time="note.createdAt" mode="relative" colored/>
 			</MkA>
@ -44,7 +50,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { } from 'vue';
+import { inject } from 'vue';
 import * as Misskey from 'cherrypick-js';
 import { i18n } from '@/i18n.js';
 import { notePage } from '@/filters/note.js';
@ -57,8 +63,9 @@ const props = defineProps<{
 	note: Misskey.entities.Note;
 }>();

-let note = $ref(deepClone(props.note));
+const mock = inject<boolean>('mock', false);

+let note = $ref(deepClone(props.note));
 const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && note.user.instance);
 </script>

--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<div ref="elRef" :class="$style.root">
+<div :class="$style.root">
 	<div :class="$style.head">
 		<MkAvatar v-if="notification.type === 'pollEnded'" :class="$style.icon" :user="notification.note.user" link preview/>
 		<MkAvatar v-else-if="notification.type === 'note'" :class="$style.icon" :user="notification.note.user" link preview/>
@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
 			<MkReactionIcon
 				v-else-if="notification.type === 'reaction'"
-				ref="reactionRef"
+				:withTooltip="true"
 				:reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
 				:noStyle="true"
 				style="width: 100%; height: 100%;"
@ -121,6 +121,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkAvatar :class="$style.reactionsItemAvatar" :user="reaction.user" link preview/>
 					<div :class="$style.reactionsItemReaction">
 						<MkReactionIcon
+							:withTooltip="true"
 							:reaction="reaction.reaction ? reaction.reaction.replace(/^:(\w+):$/, ':$1@.:') : reaction.reaction"
 							:noStyle="true"
 							style="width: 100%; height: 100%;"
@ -143,14 +144,12 @@ import { ref, shallowRef } from 'vue';
 import * as Misskey from 'cherrypick-js';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
-import XReactionTooltip from '@/components/MkReactionTooltip.vue';
 import MkButton from '@/components/MkButton.vue';
 import { getNoteSummary } from '@/scripts/get-note-summary.js';
 import { notePage } from '@/filters/note.js';
 import { userPage } from '@/filters/user.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
-import { useTooltip } from '@/scripts/use-tooltip.js';
 import { $i } from '@/account.js';
 import { infoImageUrl } from '@/instance.js';
 import { defaultStore } from '@/store.js';
@ -164,9 +163,6 @@ const props = withDefaults(defineProps<{
 	full: false,
 });

-const elRef = shallowRef<HTMLElement>(null);
-const reactionRef = ref(null);
-
 const followRequestDone = ref(false);
 const groupInviteDone = ref(false);

@ -189,15 +185,6 @@ const rejectGroupInvitation = () => {
 	groupInviteDone.value = true;
 	os.apiWithDialog('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
 };
-
-useTooltip(reactionRef, (showing) => {
-	os.popup(XReactionTooltip, {
-		showing,
-		reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction,
-		emojis: props.notification.note.emojis,
-		targetElement: reactionRef.value.$el,
-	}, {}, 'closed');
-});
 </script>

 <style lang="scss" module>
--- a/packages/frontend/src/components/MkNotifications.vue
+++ b/packages/frontend/src/components/MkNotifications.vue
@ -4,25 +4,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<MkPagination ref="pagingComponent" :pagination="pagination">
-	<template #empty>
-		<div class="_fullinfo">
-			<img :src="infoImageUrl" class="_ghost"/>
-			<div>{{ i18n.ts.noNotifications }}</div>
-		</div>
-	</template>
+<MkPullToRefresh :refresher="() => reload()">
+	<MkPagination ref="pagingComponent" :pagination="pagination">
+		<template #empty>
+			<div class="_fullinfo">
+				<img :src="infoImageUrl" class="_ghost"/>
+				<div>{{ i18n.ts.noNotifications }}</div>
+			</div>
+		</template>

-	<template #default="{ items: notifications }">
-		<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline || mainRouter.currentRoute.value.name !== 'my-notifications'">
-			<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" :notification="true"/>
-			<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel"/>
-		</MkDateSeparatedList>
-	</template>
-</MkPagination>
+		<template #default="{ items: notifications }">
+			<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline || mainRouter.currentRoute.value.name !== 'my-notifications'">
+				<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" :notification="true"/>
+				<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel"/>
+			</MkDateSeparatedList>
+		</template>
+	</MkPagination>
+</MkPullToRefresh>
 </template>

 <script lang="ts" setup>
-import { onUnmounted, onDeactivated, onMounted, computed, shallowRef } from 'vue';
+import { onUnmounted, onDeactivated, onMounted, computed, shallowRef, onActivated } from 'vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import XNotification from '@/components/MkNotification.vue';
 import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
@ -34,6 +36,7 @@ import { notificationTypes } from '@/const.js';
 import { infoImageUrl } from '@/instance.js';
 import { defaultStore } from '@/store.js';
 import { mainRouter } from '@/router.js';
+import MkPullToRefresh from '@/components/MkPullToRefresh.vue';

 const props = defineProps<{
 	excludeTypes?: typeof notificationTypes[number][];
@ -55,7 +58,7 @@ const pagination: Paging = defaultStore.state.useGroupedNotifications ? {
 	})),
 };

-const onNotification = (notification) => {
+function onNotification(notification) {
 	const isMuted = props.excludeTypes ? props.excludeTypes.includes(notification.type) : false;
 	if (isMuted || document.visibilityState === 'visible') {
 		useStream().send('readNotification');
@ -64,7 +67,15 @@ const onNotification = (notification) => {
 	if (!isMuted) {
 		pagingComponent.value.prepend(notification);
 	}
-};
+}
+
+function reload() {
+	return new Promise<void>((res) => {
+		pagingComponent.value?.reload().then(() => {
+			res();
+		});
+	});
+}

 let connection;

@ -73,6 +84,12 @@ onMounted(() => {
 	connection.on('notification', onNotification);
 });

+onActivated(() => {
+	pagingComponent.value?.reload();
+	connection = useStream().useChannel('main');
+	connection.on('notification', onNotification);
+});
+
 onUnmounted(() => {
 	if (connection) connection.dispose();
 });
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@ -102,7 +102,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { inject, watch, nextTick, onMounted, defineAsyncComponent } from 'vue';
+import { inject, watch, nextTick, onMounted, defineAsyncComponent, provide } from 'vue';
 import * as mfm from 'cherrypick-mfm-js';
 import * as Misskey from 'cherrypick-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
@ -150,16 +150,23 @@ const props = withDefaults(defineProps<{
 	fixed?: boolean;
 	autofocus?: boolean;
 	freezeAfterPosted?: boolean;
+	mock?: boolean;
 	updateMode?: boolean;
 }>(), {
 	initialVisibleUsers: () => [],
 	autofocus: true,
+	mock: false,
 });

+provide('mock', props.mock);
+
 const emit = defineEmits<{
 	(ev: 'posted'): void;
 	(ev: 'cancel'): void;
 	(ev: 'esc'): void;
+
+	// Mock用
+	(ev: 'fileChangeSensitive', fileId: string, to: boolean): void;
 }>();

 const textareaEl = $shallowRef<HTMLTextAreaElement | null>(null);
@ -263,7 +270,7 @@ const maxTextLength = $computed((): number => {
 });

 const canPost = $computed((): boolean => {
-	return !posting && !posted &&
+	return !props.mock && !posting && !posted &&
 		(1 <= textLength || 1 <= files.length || !!poll || !!props.renote || !!event) &&
 		(textLength <= maxTextLength) &&
 		(!poll || poll.choices.length >= 2);
@ -435,6 +442,8 @@ function focus() {
 }

 function chooseFileFrom(ev) {
+	if (props.mock) return;
+
 	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(files_ => {
 		for (const file of files_) {
 			files.push(file);
@ -447,6 +456,9 @@ function detachFile(id) {
 }

 function updateFileSensitive(file, sensitive) {
+	if (props.mock) {
+		emit('fileChangeSensitive', file.id, sensitive);
+	}
 	files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
 }

@ -459,6 +471,8 @@ function replaceFile(file: Misskey.entities.DriveFile, newFile: Misskey.entities
 }

 function upload(file: File, name?: string): void {
+	if (props.mock) return;
+
 	uploadFile(file, defaultStore.state.uploadFolder, name).then(res => {
 		files.push(res);
 	});
@ -598,6 +612,8 @@ function onCompositionEnd(ev: CompositionEvent) {
 }

 async function onPaste(ev: ClipboardEvent) {
+	if (props.mock) return;
+
 	for (const { item, i } of Array.from(ev.clipboardData.items, (item, i) => ({ item, i }))) {
 		if (item.kind === 'file') {
 			const file = item.getAsFile();
@ -682,7 +698,7 @@ function onDrop(ev): void {
 }

 function saveDraft() {
-	if (props.instant) return;
+	if (props.instant || props.mock) return;

 	const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}');

@ -713,6 +729,14 @@ function deleteDraft() {
 }

 async function post(ev?: MouseEvent) {
+	if (useCw && (cw == null || cw.trim() === '')) {
+		os.alert({
+			type: 'error',
+			text: i18n.ts.cwNotationRequired,
+		});
+		return;
+	}
+
 	if (ev) {
 		const el = ev.currentTarget ?? ev.target;
 		const rect = el.getBoundingClientRect();
@ -721,6 +745,8 @@ async function post(ev?: MouseEvent) {
 		os.popup(MkRippleEffect, { x, y }, {}, 'end');
 	}

+	if (props.mock) return;
+
 	const annoying =
 		text.includes('$[x2') ||
 		text.includes('$[x3') ||
@ -901,6 +927,8 @@ async function openMfmCheatSheet() {
 let postAccount = $ref<Misskey.entities.UserDetailed | null>(null);

 function openAccountMenu(ev: MouseEvent) {
+	if (props.mock) return;
+
 	openAccountMenu_({
 		withExtraOperation: false,
 		includeCurrentAccount: true,
@ -945,7 +973,7 @@ onMounted(() => {

 	nextTick(() => {
 		// 書きかけの投稿を復元
-		if (!props.instant && !props.mention && !props.specified) {
+		if (!props.instant && !props.mention && !props.specified && !props.mock) {
 			const draft = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}')[draftKey];
 			if (draft) {
 				text = draft.data.text;
--- a/packages/frontend/src/components/MkPostFormAttaches.vue
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, inject } from 'vue';
 import * as Misskey from 'cherrypick-js';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os.js';
@ -33,6 +33,8 @@ const props = defineProps<{
 	detachMediaFn?: (id: string) => void;
 }>();

+const mock = inject<boolean>('mock', false);
+
 const emit = defineEmits<{
 	(ev: 'update:modelValue', value: any[]): void;
 	(ev: 'detach', id: string): void;
@ -44,6 +46,8 @@ const emit = defineEmits<{
 let menuShowing = false;

 function detachMedia(id: string) {
+	if (mock) return;
+
 	if (props.detachMediaFn) {
 		props.detachMediaFn(id);
 	} else {
@ -52,6 +56,11 @@ function detachMedia(id: string) {
 }

 function toggleSensitive(file) {
+	if (mock) {
+		emit('changeSensitive', file, !file.isSensitive);
+		return;
+	}
+
 	os.api('drive/files/update', {
 		fileId: file.id,
 		isSensitive: !file.isSensitive,
@ -61,6 +70,8 @@ function toggleSensitive(file) {
 }

 async function rename(file) {
+	if (mock) return;
+
 	const { canceled, result } = await os.inputText({
 		title: i18n.ts.enterFileName,
 		default: file.name,
@ -77,6 +88,8 @@ async function rename(file) {
 }

 async function describe(file) {
+	if (mock) return;
+
 	os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
 		default: file.comment !== null ? file.comment : '',
 		file: file,
@ -94,6 +107,8 @@ async function describe(file) {
 }

 async function crop(file: Misskey.entities.DriveFile): Promise<void> {
+	if (mock) return;
+
 	const newFile = await os.cropImage(file, { aspectRatio: NaN });
 	emit('replaceFile', file, newFile);
 }
--- a/packages/frontend/src/components/MkPostFormSimple.vue
+++ b/packages/frontend/src/components/MkPostFormSimple.vue
@ -122,7 +122,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { inject, watch, nextTick, onMounted, defineAsyncComponent } from 'vue';
+import { inject, watch, nextTick, onMounted, defineAsyncComponent, provide } from 'vue';
 import * as mfm from 'cherrypick-mfm-js';
 import * as Misskey from 'cherrypick-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
@ -171,16 +171,23 @@ const props = withDefaults(defineProps<{
 	fixed?: boolean;
 	autofocus?: boolean;
 	freezeAfterPosted?: boolean;
+  mock?: boolean;
  updateMode?: boolean;
 }>(), {
 	initialVisibleUsers: () => [],
 	autofocus: false,
+  mock: false,
 });

+provide('mock', props.mock);
+
 const emit = defineEmits<{
 	(ev: 'posted'): void;
 	(ev: 'cancel'): void;
 	(ev: 'esc'): void;
+
+  // Mock用
+  (ev: 'fileChangeSensitive', fileId: string, to: boolean): void;
 }>();

 const textareaEl = $shallowRef<HTMLTextAreaElement | null>(null);
@ -290,7 +297,7 @@ const maxTextLength = $computed((): number => {
 });

 const canPost = $computed((): boolean => {
-	return !posting && !posted &&
+	return !props.mock && !posting && !posted &&
 		(1 <= textLength || 1 <= files.length || !!poll || !!props.renote || !!event) &&
 		(textLength <= maxTextLength) &&
 		(!poll || poll.choices.length >= 2);
@ -456,6 +463,8 @@ function focus() {
 }

 function chooseFileFrom(ev) {
+  if (props.mock) return;
+
 	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(files_ => {
 		for (const file of files_) {
 			files.push(file);
@ -468,6 +477,9 @@ function detachFile(id) {
 }

 function updateFileSensitive(file, sensitive) {
+  if (props.mock) {
+    emit('fileChangeSensitive', file.id, sensitive);
+  }
 	files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
 }

@ -480,6 +492,8 @@ function replaceFile(file: Misskey.entities.DriveFile, newFile: Misskey.entities
 }

 function upload(file: File, name?: string): void {
+  if (props.mock) return;
+
 	uploadFile(file, defaultStore.state.uploadFolder, name).then(res => {
 		files.push(res);
 	});
@ -619,6 +633,8 @@ function onCompositionEnd(ev: CompositionEvent) {
 }

 async function onPaste(ev: ClipboardEvent) {
+  if (props.mock) return;
+
 	for (const { item, i } of Array.from(ev.clipboardData.items, (item, i) => ({ item, i }))) {
 		if (item.kind === 'file') {
 			const file = item.getAsFile();
@ -703,7 +719,7 @@ function onDrop(ev): void {
 }

 function saveDraft() {
-	if (props.instant) return;
+	if (props.instant || props.mock) return;

 	const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}');

@ -734,6 +750,14 @@ function deleteDraft() {
 }

 async function post(ev?: MouseEvent) {
+  if (useCw && (cw == null || cw.trim() === '')) {
+    os.alert({
+      type: 'error',
+      text: i18n.ts.cwNotationRequired,
+    });
+    return;
+  }
+
 	if (ev) {
 		const el = ev.currentTarget ?? ev.target;
 		const rect = el.getBoundingClientRect();
@ -742,6 +766,8 @@ async function post(ev?: MouseEvent) {
 		os.popup(MkRippleEffect, { x, y }, {}, 'end');
 	}

+  if (props.mock) return;
+
 	const annoying =
 		text.includes('$[x2') ||
 		text.includes('$[x3') ||
@ -999,7 +1025,7 @@ onMounted(() => {

 	nextTick(() => {
 		// 書きかけの投稿を復元
-		if (!props.instant && !props.mention && !props.specified) {
+		if (!props.instant && !props.mention && !props.specified && !props.mock) {
 			const draft = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}')[draftKey];
 			if (draft) {
 				text = draft.data.text;
--- a/packages/frontend/src/components/MkPullToRefresh.vue
+++ b/packages/frontend/src/components/MkPullToRefresh.vue
@ -51,7 +51,13 @@ let disabled = false;

 let isVibrate = false;

-const emits = defineEmits<{
+const props = withDefaults(defineProps<{
+	refresher: () => Promise<void>;
+}>(), {
+	refresher: () => Promise.resolve(),
+});
+
+const emit = defineEmits<{
 	(ev: 'refresh'): void;
 }>();

@ -124,7 +130,12 @@ function moveEnd() {
 		if (isPullEnd) {
 			isPullEnd = false;
 			isRefreshing = true;
-			fixOverContent().then(() => emits('refresh'));
+			fixOverContent().then(() => {
+				emit('refresh');
+				props.refresher().then(() => {
+					refreshFinished();
+				});
+			});
 		} else {
 			closeContent().then(() => isPullStart = false);
 		}
@ -198,7 +209,6 @@ onUnmounted(() => {
 });

 defineExpose({
-	refreshFinished,
 	setDisabled,
 });
 </script>
--- a/packages/frontend/src/components/MkReactionIcon.vue
+++ b/packages/frontend/src/components/MkReactionIcon.vue
@ -4,16 +4,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<MkCustomEmoji v-if="reaction[0] === ':'" :name="reaction" :normal="true" :noStyle="noStyle" :url="emojiUrl"/>
-<MkEmoji v-else :emoji="reaction" :normal="true" :noStyle="noStyle"/>
+<MkCustomEmoji v-if="reaction[0] === ':'" ref="elRef" :name="reaction" :normal="true" :noStyle="noStyle" :url="emojiUrl"/>
+<MkEmoji v-else ref="elRef" :emoji="reaction" :normal="true" :noStyle="noStyle"/>
 </template>

 <script lang="ts" setup>
-import { } from 'vue';
+import { defineAsyncComponent, shallowRef } from 'vue';
+import { useTooltip } from '@/scripts/use-tooltip.js';
+import * as os from '@/os.js';

 const props = defineProps<{
 	reaction: string;
 	noStyle?: boolean;
 	emojiUrl?: string;
+	withTooltip?: boolean;
 }>();
+
+const elRef = shallowRef();
+
+if (props.withTooltip) {
+	useTooltip(elRef, (showing) => {
+		os.popup(defineAsyncComponent(() => import('@/components/MkReactionTooltip.vue')), {
+			showing,
+			reaction: props.reaction.replace(/^:(\w+):$/, ':$1@.:'),
+			targetElement: elRef.value.$el,
+		}, {}, 'closed');
+	});
+}
 </script>
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { computed, ComputedRef, onMounted, shallowRef, watch } from 'vue';
+import { computed, ComputedRef, inject, onMounted, shallowRef, watch } from 'vue';
 import * as Misskey from 'cherrypick-js';
 import XDetails from '@/components/MkReactionsViewer.details.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
@ -38,6 +38,12 @@ const props = defineProps<{
 	note: Misskey.entities.Note;
 }>();

+const mock = inject<boolean>('mock', false);
+
+const emit = defineEmits<{
+	(ev: 'reactionToggled', emoji: string, newCount: number): void;
+}>();
+
 const buttonEl = shallowRef<HTMLElement>();

 const reactionName = computed(() => {
@ -65,6 +71,11 @@ async function toggleReaction(ev) {
 		});
 		if (confirm.canceled) return;

+		if (mock) {
+			emit('reactionToggled', props.reaction, (props.count - 1));
+			return;
+		}
+
 		os.api('notes/reactions/delete', {
 			noteId: props.note.id,
 		}).then(() => {
@ -76,6 +87,11 @@ async function toggleReaction(ev) {
 			}
 		});
 	} else {
+		if (mock) {
+			emit('reactionToggled', props.reaction, (props.count + 1));
+			return;
+		}
+
 		os.api('notes/reactions/create', {
 			noteId: props.note.id,
 			reaction: props.reaction,
@ -114,24 +130,26 @@ onMounted(() => {
 	if (!props.isInitial) anime();
 });

-useTooltip(buttonEl, async (showing) => {
-	const reactions = await os.apiGet('notes/reactions', {
-		noteId: props.note.id,
-		type: props.reaction,
-		limit: 11,
-		_cacheKey_: props.count,
-	});
+if (!mock) {
+	useTooltip(buttonEl, async (showing) => {
+		const reactions = await os.apiGet('notes/reactions', {
+			noteId: props.note.id,
+			type: props.reaction,
+			limit: 11,
+			_cacheKey_: props.count,
+		});

-	const users = reactions.map(x => x.user);
+		const users = reactions.map(x => x.user);

-	os.popup(XDetails, {
-		showing,
-		reaction: props.reaction,
-		users,
-		count: props.count,
-		targetElement: buttonEl.value,
-	}, {}, 'closed');
-}, 100);
+		os.popup(XDetails, {
+			showing,
+			reaction: props.reaction,
+			users,
+			count: props.count,
+			targetElement: buttonEl.value,
+		}, {}, 'closed');
+	}, 100);
+}
 </script>

 <style lang="scss" module>
--- a/packages/frontend/src/components/MkReactionsViewer.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.vue
@ -12,14 +12,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:moveClass="defaultStore.state.animation ? $style.transition_x_move : ''"
 	tag="div" :class="$style.root"
 >
-	<XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note"/>
+	<XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note" @reactionToggled="onMockToggleReaction"/>
 	<slot v-if="hasMoreReactions" name="more"/>
 </TransitionGroup>
 </template>

 <script lang="ts" setup>
 import * as Misskey from 'cherrypick-js';
-import { watch } from 'vue';
+import { inject, watch } from 'vue';
 import XReaction from '@/components/MkReactionsViewer.reaction.vue';
 import { defaultStore } from '@/store.js';

@ -30,6 +30,12 @@ const props = withDefaults(defineProps<{
 	maxNumber: Infinity,
 });

+const mock = inject<boolean>('mock', false);
+
+const emit = defineEmits<{
+	(ev: 'mockUpdateMyReaction', emoji: string, delta: number): void;
+}>();
+
 const initialReactions = new Set(Object.keys(props.note.reactions));

 let reactions = $ref<[string, number][]>([]);
@ -39,6 +45,15 @@ if (props.note.myReaction && !Object.keys(reactions).includes(props.note.myReact
 	reactions[props.note.myReaction] = props.note.reactions[props.note.myReaction];
 }

+function onMockToggleReaction(emoji: string, count: number) {
+	if (!mock) return;
+
+	const i = reactions.findIndex((item) => item[0] === emoji);
+	if (i < 0) return;
+
+	emit('mockUpdateMyReaction', emoji, (count - reactions[i][1]));
+}
+
 watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumber]) => {
 	let newReactions: [string, number][] = [];
 	hasMoreReactions = Object.keys(newSource).length > maxNumber;
--- a/packages/frontend/src/components/MkTimeline.vue
+++ b/packages/frontend/src/components/MkTimeline.vue
@ -4,10 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<MkInfo v-if="$i && tlHint && !tlHintClosed" :closeable="true" style="margin-bottom: 16px;" @closed="closeHint">
-	<I18n :src="tlHint"><template #icon><i :class="tlIcon"></i></template></I18n>
-</MkInfo>
-<MkPullToRefresh ref="prComponent" @refresh="() => reloadTimeline(true)">
+<MkPullToRefresh ref="prComponent" :refresher="() => reloadTimeline()">
 	<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)" @status="prComponent.setDisabled($event)"/>
 </MkPullToRefresh>
 </template>
@ -15,7 +12,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, provide, onUnmounted } from 'vue';
 import MkNotes from '@/components/MkNotes.vue';
-import MkInfo from '@/components/MkInfo.vue';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 import { useStream, reloadStream } from '@/stream.js';
 import * as sound from '@/scripts/sound.js';
@ -90,10 +86,6 @@ let query;
 let connection;
 let connection2;

-let tlIcon;
-let tlHint;
-let tlHintClosed;
-
 const stream = useStream();
 const connectChannel = () => {
 	if (props.src === 'antenna') {
@ -107,9 +99,6 @@ const connectChannel = () => {
 			withCats: props.onlyCats,
 		});
 		connection2 = stream.useChannel('main');
-		tlIcon = 'ti ti-home';
-		tlHint = i18n.ts._tlTutorial.step1_1;
-		tlHintClosed = defaultStore.state.tlHomeHintClosed;
 	} else if (props.src === 'local') {
 		connection = stream.useChannel('localTimeline', {
 			withRenotes: props.withRenotes,
@ -117,9 +106,6 @@ const connectChannel = () => {
 			withFiles: props.onlyFiles ? true : undefined,
 			withCats: props.onlyCats,
 		});
-		tlIcon = 'ti ti-planet';
-		tlHint = i18n.ts._tlTutorial.step1_2;
-		tlHintClosed = defaultStore.state.tlLocalHintClosed;
 	} else if (props.src === 'social') {
 		connection = stream.useChannel('hybridTimeline', {
 			withRenotes: props.withRenotes,
@ -127,18 +113,12 @@ const connectChannel = () => {
 			withFiles: props.onlyFiles ? true : undefined,
 			withCats: props.onlyCats,
 		});
-		tlIcon = 'ti ti-universe';
-		tlHint = i18n.ts._tlTutorial.step1_3;
-		tlHintClosed = defaultStore.state.tlSocialHintClosed;
 	} else if (props.src === 'global') {
 		connection = stream.useChannel('globalTimeline', {
 			withRenotes: props.withRenotes,
 			withFiles: props.onlyFiles ? true : undefined,
 			withCats: props.onlyCats,
 		});
-		tlIcon = 'ti ti-world';
-		tlHint = i18n.ts._tlTutorial.step1_4;
-		tlHintClosed = defaultStore.state.tlGlobalHintClosed;
 	} else if (props.src === 'mentions') {
 		connection = stream.useChannel('main');
 		connection.on('mention', prepend);
@ -180,9 +160,6 @@ if (props.src === 'antenna') {
 		withFiles: props.onlyFiles ? true : undefined,
 		withCats: props.onlyCats,
 	};
-	tlIcon = 'ti ti-home';
-	tlHint = i18n.ts._tlTutorial.step1_1;
-	tlHintClosed = defaultStore.state.tlHomeHintClosed;
 } else if (props.src === 'local') {
 	endpoint = 'notes/local-timeline';
 	query = {
@ -191,9 +168,6 @@ if (props.src === 'antenna') {
 		withFiles: props.onlyFiles ? true : undefined,
 		withCats: props.onlyCats,
 	};
-	tlIcon = 'ti ti-planet';
-	tlHint = i18n.ts._tlTutorial.step1_2;
-	tlHintClosed = defaultStore.state.tlLocalHintClosed;
 } else if (props.src === 'social') {
 	endpoint = 'notes/hybrid-timeline';
 	query = {
@ -202,9 +176,6 @@ if (props.src === 'antenna') {
 		withFiles: props.onlyFiles ? true : undefined,
 		withCats: props.onlyCats,
 	};
-	tlIcon = 'ti ti-universe';
-	tlHint = i18n.ts._tlTutorial.step1_3;
-	tlHintClosed = defaultStore.state.tlSocialHintClosed;
 } else if (props.src === 'global') {
 	endpoint = 'notes/global-timeline';
 	query = {
@ -212,9 +183,6 @@ if (props.src === 'antenna') {
 		withFiles: props.onlyFiles ? true : undefined,
 		withCats: props.onlyCats,
 	};
-	tlIcon = 'ti ti-world';
-	tlHint = i18n.ts._tlTutorial.step1_4;
-	tlHintClosed = defaultStore.state.tlGlobalHintClosed;
 } else if (props.src === 'mentions') {
 	endpoint = 'notes/mentions';
 } else if (props.src === 'directs') {
@ -250,48 +218,24 @@ if (!defaultStore.state.disableStreamingTimeline) {
 	});
 }

-function closeHint() {
-	switch (props.src) {
-		case 'home':
-			defaultStore.set('tlHomeHintClosed', true);
-			break;
-		case 'local':
-			defaultStore.set('tlLocalHintClosed', true);
-			break;
-		case 'social':
-			defaultStore.set('tlSocialHintClosed', true);
-			break;
-		case 'global':
-			defaultStore.set('tlGlobalHintClosed', true);
-			break;
-	}
-}
-
 const pagination = {
 	endpoint: endpoint,
 	limit: 10,
 	params: query,
 };

-const reloadTimeline = (fromPR = false) => {
-	tlNotesCount = 0;
+function reloadTimeline() {
+	return new Promise<void>((res) => {
+		tlNotesCount = 0;

-	tlComponent.pagingComponent?.reload().then(() => {
-		reloadStream();
-		if (fromPR) prComponent.refreshFinished();
+		tlComponent.pagingComponent?.reload().then(() => {
+			reloadStream();
+			res();
+		});
 	});
-};
-
-//const pullRefresh = () => reloadTimeline(true);
+}

 defineExpose({
 	reloadTimeline,
 });
-
-/* TODO
-const timetravel = (date?: Date) => {
-	this.date = date;
-	this.$refs.tl.reload();
-};
-*/
 </script>
--- a/packages/frontend/src/components/MkTutorialDialog.Note.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.Note.vue
@ -0,0 +1,119 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div v-if="phase === 'aboutNote'" class="_gaps">
+	<div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._note.description }}</div>
+	<MkNote :class="$style.exampleNoteRoot" style="pointer-events: none;" :note="exampleNote" :mock="true"/>
+	<div class="_gaps_s">
+		<div><i class="ti ti-arrow-back-up"></i> <b>{{ i18n.ts.reply }}</b> … {{ i18n.ts._initialTutorial._note.reply }}</div>
+		<div><i class="ti ti-repeat"></i> <b>{{ i18n.ts.renote }}</b> … {{ i18n.ts._initialTutorial._note.renote }}</div>
+    <div><i class="ti ti-heart"></i> <b>{{ i18n.ts.like }}</b> … {{ i18n.ts._initialTutorial._note.like }}</div>
+		<div><i class="ti ti-mood-plus"></i> <b>{{ i18n.ts.reaction }}</b> … {{ i18n.ts._initialTutorial._note.reaction }}</div>
+    <div><i class="ti ti-quote"></i> <b>{{ i18n.ts.quote }}</b> … {{ i18n.ts._initialTutorial._note.quote }}</div>
+		<div><i class="ti ti-dots"></i> <b>{{ i18n.ts.menu }}</b> … {{ i18n.ts._initialTutorial._note.menu }}</div>
+	</div>
+</div>
+<div v-else-if="phase === 'howToReact'" class="_gaps">
+	<div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._reaction.description }}</div>
+	<div>{{ i18n.ts._initialTutorial._reaction.letsTryReacting }}</div>
+	<MkNote :class="$style.exampleNoteRoot" :note="exampleNote" :mock="true" @reaction="addReaction" @removeReaction="removeReaction" @updateReaction="updateReaction"/>
+	<div v-if="onceReacted"><b style="color: var(--accent);"><i class="ti ti-check"></i> {{ i18n.ts._initialTutorial.wellDone }}</b> {{ i18n.ts._initialTutorial._reaction.reactNotification }}<br>{{ i18n.ts._initialTutorial._reaction.reactDone }}</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import * as Misskey from 'cherrypick-js';
+import { ref, reactive } from 'vue';
+import { i18n } from '@/i18n.js';
+import { globalEvents } from '@/events.js';
+import { $i } from '@/account.js';
+import MkNote from '@/components/MkNote.vue';
+
+const props = defineProps<{
+	phase: 'aboutNote' | 'howToReact';
+}>();
+
+const emit = defineEmits<{
+	(ev: 'reacted'): void;
+}>();
+
+const exampleNote = reactive<Misskey.entities.Note>({
+	id: '0000000000',
+	createdAt: '2019-04-14T17:30:49.181Z',
+	userId: '0000000001',
+	user: {
+		id: '0000000001',
+		name: '藍',
+		username: 'ai',
+		host: null,
+		avatarDecorations: [],
+		avatarUrl: '/client-assets/tutorial/ai.webp',
+		avatarBlurhash: 'eiKmhHIByXxZ~qWXs:-pR*NbR*s:xuRjoL-oR*WCt6WWf6WVf6oeWB',
+		isBot: false,
+		isCat: true,
+		emojis: {},
+		onlineStatus: null,
+		badgeRoles: [],
+	},
+	text: 'just setting up my crpk',
+	cw: null,
+	visibility: 'public',
+	localOnly: false,
+	reactionAcceptance: null,
+	renoteCount: 0,
+	repliesCount: 1,
+	reactions: {},
+	reactionEmojis: {},
+	fileIds: [],
+	files: [],
+	replyId: null,
+	renoteId: null,
+});
+const onceReacted = ref<boolean>(false);
+
+function addReaction(emoji) {
+	onceReacted.value = true;
+	emit('reacted');
+	exampleNote.reactions[emoji] = 1;
+	exampleNote.myReaction = emoji;
+	doNotification(emoji);
+}
+
+function doNotification(emoji: string): void {
+	if (!$i || !emoji) return;
+
+	const notification: Misskey.entities.Notification = {
+		id: Math.random().toString(),
+		createdAt: new Date().toUTCString(),
+		isRead: false,
+		type: 'reaction',
+		reaction: emoji,
+		user: $i,
+		userId: $i.id,
+		note: exampleNote,
+	};
+
+	globalEvents.emit('clientNotification', notification);
+}
+
+function removeReaction(emoji) {
+	delete exampleNote.reactions[emoji];
+	exampleNote.myReaction = undefined;
+}
+</script>
+
+<style lang="scss" module>
+.exampleNoteRoot {
+	border-radius: var(--radius);
+	border: var(--panelBorder);
+	background: var(--panel);
+}
+
+.divider {
+	height: 1px;
+	background: var(--divider);
+}
+</style>
--- a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue
@ -0,0 +1,135 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps">
+	<div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._postNote.description1 }}</div>
+	<MkPostForm :class="$style.exampleRoot" :mock="true"/>
+	<MkFormSection>
+		<template #label>{{ i18n.ts.visibility }}</template>
+		<div class="_gaps">
+			<div>{{ i18n.ts._initialTutorial._postNote._visibility.description }}</div>
+			<div><i class="ti ti-world"></i> <b>{{ i18n.ts._visibility.public }}</b> … {{ i18n.ts._initialTutorial._postNote._visibility.public }}</div>
+			<div><i class="ti ti-home"></i> <b>{{ i18n.ts._visibility.home }}</b> … {{ i18n.ts._initialTutorial._postNote._visibility.home }}</div>
+			<div><i class="ti ti-lock"></i> <b>{{ i18n.ts._visibility.followers }}</b> … {{ i18n.ts._initialTutorial._postNote._visibility.followers }}</div>
+			<div class="_gaps_s">
+				<div><i class="ti ti-mail"></i> <b>{{ i18n.ts._visibility.specified }}</b> … {{ i18n.ts._initialTutorial._postNote._visibility.direct }}</div>
+				<MkInfo :warn="true">
+					<b>{{ i18n.ts._initialTutorial._postNote._visibility.doNotSendConfidencialOnDirect1 }}</b> {{ i18n.ts._initialTutorial._postNote._visibility.doNotSendConfidencialOnDirect2 }}
+				</MkInfo>
+			</div>
+			<div><i class="ti ti-rocket-off"></i> <b>{{ i18n.ts._visibility.disableFederation }}</b> … {{ i18n.ts._initialTutorial._postNote._visibility.localOnly }}</div>
+		</div>
+	</MkFormSection>
+	<MkFormSection>
+		<template #label>{{ i18n.ts._initialTutorial._postNote._cw.title }}</template>
+		<div class="_gaps">
+			<div>{{ i18n.ts._initialTutorial._postNote._cw.description }}</div>
+			<MkNote :class="$style.exampleRoot" :note="exampleCWNote" :mock="true"/>
+			<div>{{ i18n.ts._initialTutorial._postNote._cw.useCases }}</div>
+		</div>
+	</MkFormSection>
+</div>
+</template>
+
+<script setup lang="ts">
+import * as Misskey from 'cherrypick-js';
+import { reactive } from 'vue';
+import { i18n } from '@/i18n.js';
+import MkNote from '@/components/MkNote.vue';
+import MkPostForm from '@/components/MkPostForm.vue';
+import MkFormSection from '@/components/form/section.vue';
+import MkInfo from '@/components/MkInfo.vue';
+
+const exampleCWNote = reactive<Misskey.entities.Note>({
+	id: '0000000000',
+	createdAt: '2019-04-14T17:30:49.181Z',
+	userId: '0000000001',
+	user: {
+		id: '0000000001',
+		name: '藍',
+		username: 'ai',
+		host: null,
+		avatarDecorations: [],
+		avatarUrl: '/client-assets/tutorial/ai.webp',
+		avatarBlurhash: 'eiKmhHIByXxZ~qWXs:-pR*NbR*s:xuRjoL-oR*WCt6WWf6WVf6oeWB',
+		isBot: false,
+		isCat: true,
+		emojis: {},
+		onlineStatus: null,
+		badgeRoles: [],
+	},
+	text: i18n.ts._initialTutorial._postNote._cw._exampleNote.note,
+	cw: i18n.ts._initialTutorial._postNote._cw._exampleNote.cw,
+	visibility: 'public',
+	localOnly: false,
+	reactionAcceptance: null,
+	renoteCount: 0,
+	repliesCount: 1,
+	reactions: {},
+	reactionEmojis: {},
+	fileIds: [],
+	files: [],
+	replyId: null,
+	renoteId: null,
+});
+</script>
+
+<style lang="scss" module>
+.exampleRoot {
+	max-width: none!important;
+	border-radius: var(--radius);
+	border: var(--panelBorder);
+	background: var(--panel);
+}
+
+.divider {
+	height: 1px;
+	background: var(--divider);
+}
+
+.image {
+	max-width: 300px;
+	margin: 0 auto;
+}
+
+.post {
+	position: relative;
+	display: block;
+	width: 100%;
+	height: 40px;
+	color: var(--fgOnAccent);
+	font-weight: bold;
+	text-align: left;
+
+	&:before {
+		content: "";
+		display: block;
+		width: calc(100% - 38px);
+		height: 100%;
+		margin: auto;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		border-radius: 999px;
+		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	}
+
+}
+
+.postIcon {
+	position: relative;
+	margin-left: 30px;
+	margin-right: 8px;
+	width: 32px;
+}
+
+.postText {
+	position: relative;
+	line-height: 40px;
+}
+</style>
--- a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue
@ -0,0 +1,144 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps">
+	<div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.description }}</div>
+	<div>{{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.tryThisFile }}</div>
+	<MkInfo>{{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.method }}</MkInfo>
+	<MkPostForm
+		:class="$style.exampleRoot"
+		:mock="true"
+		:initialNote="exampleNote"
+		@fileChangeSensitive="doSucceeded"
+	></MkPostForm>
+	<div v-if="onceSucceeded"><b style="color: var(--accent);"><i class="ti ti-check"></i> {{ i18n.ts._initialTutorial.wellDone }}</b> {{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.sensitiveSucceeded }}</div>
+	<MkFolder>
+		<template #label>{{ i18n.ts.previewNoteText }}</template>
+		<MkNote :mock="true" :note="exampleNote" :class="$style.exampleRoot"></MkNote>
+	</MkFolder>
+</div>
+</template>
+
+<script setup lang="ts">
+import * as Misskey from 'cherrypick-js';
+import { ref, reactive } from 'vue';
+import { i18n } from '@/i18n.js';
+import MkPostForm from '@/components/MkPostForm.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import MkNote from '@/components/MkNote.vue';
+import { $i } from '@/account.js';
+
+const emit = defineEmits<{
+	(ev: 'succeeded'): void;
+}>();
+
+const onceSucceeded = ref<boolean>(false);
+
+function doSucceeded(fileId: string, to: boolean) {
+	if (fileId === exampleNote.fileIds[0] && to) {
+		onceSucceeded.value = true;
+		emit('succeeded');
+	}
+}
+
+const exampleNote = reactive<Misskey.entities.Note>({
+	id: '0000000000',
+	createdAt: '2019-04-14T17:30:49.181Z',
+	userId: '0000000001',
+	user: $i!,
+	text: i18n.ts._initialTutorial._howToMakeAttachmentsSensitive._exampleNote.note,
+	cw: null,
+	visibility: 'public',
+	localOnly: false,
+	reactionAcceptance: null,
+	renoteCount: 0,
+	repliesCount: 1,
+	reactions: {},
+	reactionEmojis: {},
+	fileIds: ['0000000002'],
+	files: [{
+		id: '0000000002',
+		createdAt: '2019-04-14T17:30:49.181Z',
+		name: 'natto_failed.webp',
+		type: 'image/webp',
+		md5: 'c44286cf152d0740be0ce5ad45ea85c3',
+		size: 827532,
+		isSensitive: false,
+		blurhash: 'LXNA3TD*XAIA%1%M%gt7.TofRioz',
+		properties: {
+			width: 256,
+			height: 256,
+		},
+		url: '/client-assets/tutorial/natto_failed.webp',
+		thumbnailUrl: '/client-assets/tutorial/natto_failed.webp',
+		comment: null,
+		folderId: null,
+		folder: null,
+		userId: null,
+		user: null,
+	}],
+	replyId: null,
+	renoteId: null,
+});
+
+</script>
+
+<style lang="scss" module>
+.exampleRoot {
+	border-radius: var(--radius);
+	border: var(--panelBorder);
+	background: var(--panel);
+}
+
+.divider {
+	height: 1px;
+	background: var(--divider);
+}
+
+.image {
+	max-width: 300px;
+	margin: 0 auto;
+}
+
+.post {
+	position: relative;
+	display: block;
+	width: 100%;
+	height: 40px;
+	color: var(--fgOnAccent);
+	font-weight: bold;
+	text-align: left;
+
+	&:before {
+		content: "";
+		display: block;
+		width: calc(100% - 38px);
+		height: 100%;
+		margin: auto;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		border-radius: 999px;
+		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	}
+
+}
+
+.postIcon {
+	position: relative;
+	margin-left: 30px;
+	margin-right: 8px;
+	width: 32px;
+}
+
+.postText {
+	position: relative;
+	line-height: 40px;
+}
+</style>
--- a/packages/frontend/src/components/MkTutorialDialog.Timeline.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.Timeline.vue
@ -0,0 +1,87 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps">
+	<div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._timeline.description1 }}</div>
+	<div class="_gaps_s">
+		<div><i class="ti ti-home"></i> <b>{{ i18n.ts._timelines.home }}</b> … {{ i18n.ts._initialTutorial._timeline.home }}</div>
+		<div><i class="ti ti-planet"></i> <b>{{ i18n.ts._timelines.local }}</b> … {{ i18n.ts._initialTutorial._timeline.local }}</div>
+		<div><i class="ti ti-universe"></i> <b>{{ i18n.ts._timelines.social }}</b> … {{ i18n.ts._initialTutorial._timeline.social }}</div>
+		<div><i class="ti ti-world"></i> <b>{{ i18n.ts._timelines.global }}</b> … {{ i18n.ts._initialTutorial._timeline.global }}</div>
+	</div>
+	<div class="_gaps_s">
+		<div>{{ i18n.ts._initialTutorial._timeline.description2 }}</div>
+		<img :class="$style.image" src="/client-assets/tutorial/timeline_tab.png"/>
+	</div>
+	<div :class="$style.divider"></div>
+	<I18n :src="i18n.ts._initialTutorial._timeline.description3" tag="div" style="padding: 0 16px;">
+		<template #link>
+			<a href="https://misskey-hub.net/docs/features/timeline.html" target="_blank" class="_link">{{ i18n.ts.help }}</a>
+		</template>
+	</I18n>
+
+</div>
+</template>
+
+<script setup lang="ts">
+import { i18n } from '@/i18n.js';
+</script>
+
+<style lang="scss" module>
+.exampleNoteRoot {
+	border-radius: var(--radius);
+	border: var(--panelBorder);
+	background: var(--panel);
+}
+
+.divider {
+	height: 1px;
+	background: var(--divider);
+}
+
+.image {
+	max-width: 300px;
+	margin: 0 auto;
+}
+
+.post {
+	position: relative;
+	display: block;
+	width: 100%;
+	height: 40px;
+	color: var(--fgOnAccent);
+	font-weight: bold;
+	text-align: left;
+
+	&:before {
+		content: "";
+		display: block;
+		width: calc(100% - 38px);
+		height: 100%;
+		margin: auto;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		border-radius: 999px;
+		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	}
+
+}
+
+.postIcon {
+	position: relative;
+	margin-left: 30px;
+	margin-right: 8px;
+	width: 32px;
+}
+
+.postText {
+	position: relative;
+	line-height: 40px;
+}
+</style>
--- a/packages/frontend/src/components/MkTutorialDialog.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.vue
@ -0,0 +1,260 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModalWindow
+	ref="dialog"
+	:width="600"
+	:height="650"
+	@close="close(true)"
+	@closed="emit('closed')"
+>
+	<template v-if="page === 1" #header><i class="ti ti-pencil"></i> {{ i18n.ts._initialTutorial._note.title }}</template>
+	<template v-else-if="page === 2" #header><i class="ti ti-mood-smile"></i> {{ i18n.ts._initialTutorial._reaction.title }}</template>
+	<template v-else-if="page === 3" #header><i class="ti ti-home"></i> {{ i18n.ts._initialTutorial._timeline.title }}</template>
+	<template v-else-if="page === 4" #header><i class="ti ti-pencil-plus"></i> {{ i18n.ts._initialTutorial._postNote.title }}</template>
+	<template v-else-if="page === 5" #header><i class="ti ti-eye-exclamation"></i> {{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.title }}</template>
+	<template v-else #header>{{ i18n.ts._initialTutorial.title }}</template>
+
+	<div style="overflow-x: clip;">
+		<Transition
+			mode="out-in"
+			:enterActiveClass="$style.transition_x_enterActive"
+			:leaveActiveClass="$style.transition_x_leaveActive"
+			:enterFromClass="$style.transition_x_enterFrom"
+			:leaveToClass="$style.transition_x_leaveTo"
+		>
+			<template v-if="page === 0">
+				<div :class="$style.centerPage">
+					<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
+					<MkSpacer :marginMin="20" :marginMax="28">
+						<div class="_gaps" style="text-align: center;">
+							<i class="ti ti-confetti" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
+							<div style="font-size: 120%;">{{ i18n.ts._initialTutorial._landing.title }}</div>
+							<div>{{ i18n.ts._initialTutorial._landing.description }}</div>
+							<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" @click="page++">{{ i18n.ts._initialTutorial.launchTutorial }} <i class="ti ti-arrow-right"></i></MkButton>
+							<MkButton style="margin: 0 auto;" transparent rounded @click="close(true)">{{ i18n.ts.close }}</MkButton>
+						</div>
+					</MkSpacer>
+				</div>
+			</template>
+			<template v-else-if="page === 1">
+				<div style="height: 100cqh; overflow: auto;">
+					<div :class="$style.pageRoot">
+						<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
+							<XNote phase="aboutNote"/>
+						</MkSpacer>
+						<div :class="$style.pageFooter">
+							<div class="_buttonsCenter">
+								<MkButton v-if="initialPage !== 1" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+							</div>
+						</div>
+					</div>
+				</div>
+			</template>
+			<template v-else-if="page === 2">
+				<div style="height: 100cqh; overflow: auto;">
+					<div :class="$style.pageRoot">
+						<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
+							<div class="_gaps">
+								<XNote phase="howToReact" @reacted="isReactionTutorialPushed = true"/>
+								<div v-if="!isReactionTutorialPushed">{{ i18n.ts._initialTutorial._reaction.reactToContinue }}</div>
+							</div>
+						</MkSpacer>
+						<div :class="$style.pageFooter">
+							<div class="_buttonsCenter">
+								<MkButton v-if="initialPage !== 2" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate :disabled="!isReactionTutorialPushed" @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+							</div>
+						</div>
+					</div>
+				</div>
+			</template>
+			<template v-else-if="page === 3">
+				<div style="height: 100cqh; overflow: auto;">
+					<div :class="$style.pageRoot">
+						<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
+							<XTimeline/>
+						</MkSpacer>
+						<div :class="$style.pageFooter">
+							<div class="_buttonsCenter">
+								<MkButton v-if="initialPage !== 3" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+							</div>
+						</div>
+					</div>
+				</div>
+			</template>
+			<template v-else-if="page === 4">
+				<div style="height: 100cqh; overflow: auto;">
+					<div :class="$style.pageRoot">
+						<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
+							<XPostNote/>
+						</MkSpacer>
+						<div :class="$style.pageFooter">
+							<div class="_buttonsCenter">
+								<MkButton v-if="initialPage !== 3" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+							</div>
+						</div>
+					</div>
+				</div>
+			</template>
+			<template v-else-if="page === 5">
+				<div style="height: 100cqh; overflow: auto;">
+					<div :class="$style.pageRoot">
+						<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
+							<div class="_gaps">
+								<XSensitive @succeeded="isSensitiveTutorialSucceeded = true"/>
+								<div v-if="!isSensitiveTutorialSucceeded">{{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.doItToContinue }}</div>
+							</div>
+						</MkSpacer>
+						<div :class="$style.pageFooter">
+							<div class="_buttonsCenter">
+								<MkButton v-if="initialPage !== 2" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate :disabled="!isSensitiveTutorialSucceeded" @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+							</div>
+						</div>
+					</div>
+				</div>
+			</template>
+			<template v-else-if="page === 6">
+				<div :class="$style.centerPage">
+					<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
+					<MkSpacer :marginMin="20" :marginMax="28">
+						<div class="_gaps" style="text-align: center;">
+							<i class="ti ti-check" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
+							<div style="font-size: 120%;">{{ i18n.ts._initialTutorial._done.title }}</div>
+							<I18n :src="i18n.ts._initialTutorial._done.description" tag="div" style="padding: 0 16px;">
+								<template #link>
+									<a href="https://misskey-hub.net/help.html" target="_blank" class="_link">{{ i18n.ts.help }}</a>
+								</template>
+							</I18n>
+							<div>{{ i18n.t('_initialAccountSetting.haveFun', { name: instance.name ?? host }) }}</div>
+							<div class="_buttonsCenter" style="margin-top: 16px;">
+								<MkButton v-if="initialPage !== 4" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton rounded primary gradate @click="close(false)">{{ i18n.ts.close }}</MkButton>
+							</div>
+						</div>
+					</MkSpacer>
+				</div>
+			</template>
+		</Transition>
+	</div>
+</MkModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { ref, shallowRef, watch } from 'vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import MkButton from '@/components/MkButton.vue';
+import XNote from '@/components/MkTutorialDialog.Note.vue';
+import XTimeline from '@/components/MkTutorialDialog.Timeline.vue';
+import XPostNote from '@/components/MkTutorialDialog.PostNote.vue';
+import XSensitive from '@/components/MkTutorialDialog.Sensitive.vue';
+import MkAnimBg from '@/components/MkAnimBg.vue';
+import { i18n } from '@/i18n.js';
+import { instance } from '@/instance.js';
+import { host } from '@/config.js';
+import { claimAchievement } from '@/scripts/achievements.js';
+import * as os from '@/os.js';
+
+const props = defineProps<{
+	initialPage?: number;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
+
+// eslint-disable-next-line vue/no-setup-props-destructure
+const page = ref(props.initialPage ?? 0);
+
+watch(page, (to) => {
+	// チュートリアルの枚数を増やしたら必ず変更すること！！
+	if (to === 6) {
+		claimAchievement('tutorialCompleted');
+	}
+});
+
+const isReactionTutorialPushed = ref<boolean>(false);
+const isSensitiveTutorialSucceeded = ref<boolean>(false);
+
+async function close(skip: boolean) {
+	if (skip) {
+		const { canceled } = await os.confirm({
+			type: 'warning',
+			text: i18n.ts._initialTutorial.skipAreYouSure,
+		});
+		if (canceled) return;
+	}
+
+	dialog.value?.close();
+}
+</script>
+
+<style lang="scss" module>
+.transition_x_enterActive,
+.transition_x_leaveActive {
+	transition: opacity 0.3s cubic-bezier(0,0,.35,1), transform 0.3s cubic-bezier(0,0,.35,1);
+}
+.transition_x_enterFrom {
+	opacity: 0;
+	transform: translateX(50px);
+}
+.transition_x_leaveTo {
+	opacity: 0;
+	transform: translateX(-50px);
+}
+
+.progressBar {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 10;
+	width: 100%;
+	height: 4px;
+}
+
+.progressBarValue {
+	height: 100%;
+	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	transition: all 0.5s cubic-bezier(0,.5,.5,1);
+}
+
+.centerPage {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100cqh;
+	padding-bottom: 30px;
+	box-sizing: border-box;
+}
+
+.pageRoot {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+}
+
+.pageMain {
+	flex-grow: 1;
+	line-height: 1.5;
+}
+
+.pageFooter {
+	position: sticky;
+	bottom: 0;
+	left: 0;
+	flex-shrink: 0;
+	padding: 12px;
+	border-top: solid 0.5px var(--divider);
+	-webkit-backdrop-filter: blur(15px);
+	backdrop-filter: blur(15px);
+}
+</style>
--- a/packages/frontend/src/components/MkUserSetupDialog.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.vue
@ -49,24 +49,32 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</template>
 			<template v-else-if="page === 1">
 				<div style="height: 100cqh; overflow: auto;">
-					<MkSpacer :marginMin="20" :marginMax="28">
-						<XProfile/>
-						<div class="_buttonsCenter" style="margin-top: 16px;">
-							<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
-							<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+					<div :class="$style.pageRoot">
+						<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
+							<XProfile/>
+						</MkSpacer>
+						<div :class="$style.pageFooter">
+							<div class="_buttonsCenter">
+								<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+							</div>
 						</div>
-					</MkSpacer>
+					</div>
 				</div>
 			</template>
 			<template v-else-if="page === 2">
 				<div style="height: 100cqh; overflow: auto;">
-					<MkSpacer :marginMin="20" :marginMax="28">
-						<XPrivacy/>
-						<div class="_buttonsCenter" style="margin-top: 16px;">
-							<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
-							<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+					<div :class="$style.pageRoot">
+						<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
+							<XPrivacy/>
+						</MkSpacer>
+						<div :class="$style.pageFooter">
+							<div class="_buttonsCenter">
+								<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+							</div>
 						</div>
-					</MkSpacer>
+					</div>
 				</div>
 			</template>
 			<template v-else-if="page === 3">
@ -138,16 +146,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div class="_gaps" style="text-align: center;">
 							<i class="ti ti-check" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
 							<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.initialAccountSettingCompleted }}</div>
-							<I18n :src="i18n.ts._initialAccountSetting.ifYouNeedLearnMore" tag="div" style="padding: 0 16px;">
-								<template #name>{{ instance.name ?? host }}</template>
-								<template #link>
-									<a href="https://misskey-hub.net/help.html" target="_blank" class="_link">{{ i18n.ts.help }}</a>
-								</template>
-							</I18n>
-							<div>{{ i18n.t('_initialAccountSetting.haveFun', { name: instance.name ?? host }) }}</div>
+							<div>{{ i18n.t('_initialAccountSetting.youCanContinueTutorial', { name: instance.name ?? host }) }}</div>
 							<div class="_buttonsCenter" style="margin-top: 16px;">
+								<MkButton rounded primary gradate data-cy-user-setup-continue @click="launchTutorial()">{{ i18n.ts._initialAccountSetting.startTutorial }} <i class="ti ti-arrow-right"></i></MkButton>
+							</div>
+							<div class="_buttonsCenter">
 								<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
-								<MkButton primary rounded gradate data-cy-user-setup-continue @click="close(false)">{{ i18n.ts.close }}</MkButton>
+								<MkButton rounded primary data-cy-user-setup-continue @click="setupComplete()">{{ i18n.ts.close }}</MkButton>
 							</div>
 						</div>
 					</MkSpacer>
@ -159,7 +164,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { ref, shallowRef, watch } from 'vue';
+import { ref, shallowRef, watch, nextTick, defineAsyncComponent } from 'vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkButton from '@/components/MkButton.vue';
 import XProfile from '@/components/MkUserSetupDialog.Profile.vue';
@ -183,6 +188,7 @@ const emit = defineEmits<{

 const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();

+// eslint-disable-next-line vue/no-setup-props-destructure
 const page = ref(defaultStore.state.accountSetupWizard);

 watch(page, () => {
@ -199,11 +205,25 @@ async function close(skip: boolean) {
 		if (canceled) return;
 	}

-	dialog.value.close();
+	dialog.value?.close();
 	defaultStore.set('accountSetupWizard', -1);
 	unisonReload();
 }

+function setupComplete() {
+	defaultStore.set('accountSetupWizard', -1);
+	dialog.value?.close();
+}
+
+function launchTutorial() {
+	setupComplete();
+	nextTick(() => {
+		os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {
+			initialPage: 1,
+		}, {}, 'closed');
+	});
+}
+
 async function later(later: boolean) {
 	if (later) {
 		const { canceled } = await os.confirm({
@ -213,7 +233,7 @@ async function later(later: boolean) {
 		if (canceled) return;
 	}

-	dialog.value.close();
+	dialog.value?.close();
 	defaultStore.set('accountSetupWizard', 0);
 }
 </script>
@ -256,10 +276,21 @@ async function later(later: boolean) {
 	box-sizing: border-box;
 }

+.pageRoot {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+}
+
+.pageMain {
+	flex-grow: 1;
+}
+
 .pageFooter {
 	position: sticky;
 	bottom: 0;
 	left: 0;
+	flex-shrink: 0;
 	padding: 12px;
 	border-top: solid 0.5px var(--divider);
 	-webkit-backdrop-filter: blur(15px);
--- a/packages/frontend/src/components/global/MkAcct.vue
+++ b/packages/frontend/src/components/global/MkAcct.vue
@ -17,7 +17,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import * as Misskey from 'cherrypick-js';
 import { toUnicode } from 'punycode/';
-import MkCondensedLine from './MkCondensedLine.vue';
 import { host as hostRaw } from '@/config.js';
 import { defaultStore } from '@/store.js';

--- a/packages/frontend/src/emojilist.json
+++ b/packages/frontend/src/emojilist.json
@ -1045,7 +1045,7 @@
 	["⌛", "hourglass", 6],
 	["📡", "satellite", 6],
 	["🔋", "battery", 6],
-	["🪫", "battery", 6],
+	["🪫", "low_battery", 6],
 	["🔌", "electric_plug", 6],
 	["💡", "bulb", 6],
 	["🔦", "flashlight", 6],
--- a/packages/frontend/src/navbar.ts
+++ b/packages/frontend/src/navbar.ts
@ -180,26 +180,6 @@ export const navbarItemDef = reactive({
 				text: i18n.ts._mfm.cheatSheet,
 				icon: 'ti ti-help-circle',
 				to: '/mfm-cheat-sheet',
-			}, null, {
-				type: 'button',
-				text: i18n.ts.replayUserSetupDialog,
-				icon: 'ti ti-list-numbers',
-				action: () => {
-					defaultStore.set('accountSetupWizard', 0);
-					os.popup(defineAsyncComponent(() => import('@/components/MkUserSetupDialog.vue')), {}, {}, 'closed');
-				},
-			}, {
-				type: 'button',
-				text: i18n.ts.replayTutorial,
-				icon: 'ti ti-checkup-list',
-				action: () => {
-					defaultStore.set('timelineTutorial', 0);
-					defaultStore.set('tlHomeHintClosed', false);
-					defaultStore.set('tlLocalHintClosed', false);
-					defaultStore.set('tlSocialHintClosed', false);
-					defaultStore.set('tlGlobalHintClosed', false);
-					setTimeout(unisonReload, 100);
-				},
 			}], ev.currentTarget ?? ev.target);
 		},
 	},
--- a/packages/frontend/src/pages/about-misskey.vue
+++ b/packages/frontend/src/pages/about-misskey.vue
@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 				<FormSection v-if="isKokonect">
 					<template #label>_KOKONECT_</template>
-					<div class="_formLinks">
+					<div class="_gaps_s">
 						<FormLink to="https://status.kokonect.link" external>
 							<template #icon><i class="ti ti-activity"></i></template>
 							{{ i18n.ts._aboutMisskey._kokonect.serverStatus }}
@ -40,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</FormSection>
 				<FormSection>
 					<template #label>CherryPick</template>
-					<div class="_formLinks">
+					<div class="_gaps_s">
 						<FormLink to="https://github.com/kokonect-link/cherrypick" external>
 							<template #icon><i class="ti ti-code"></i></template>
 							{{ i18n.ts._aboutMisskey.source }}
@ -69,7 +69,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</FormSection>
 				<FormSection>
 					<template #label>Misskey</template>
-					<div class="_formLinks">
+					<div class="_gaps_s">
 						<FormLink to="https://github.com/misskey-dev/misskey" external>
 							<template #icon><i class="ti ti-code"></i></template>
 							{{ i18n.ts._aboutMisskey.source }}
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</MkKeyValue>
 					</FormSplit>
 					<FormLink v-if="instance.impressumUrl" :to="instance.impressumUrl" external>{{ i18n.ts.impressum }}</FormLink>
-					<div class="_formLinks">
+					<div class="_gaps_s">
 						<MkFolder v-if="instance.serverRules.length > 0">
 							<template #label>{{ i18n.ts.serverRules }}</template>

@ -79,7 +79,7 @@ SPDX-License-Identifier: AGPL-3.0-only

 			<FormSection>
 				<template #label>Well-known resources</template>
-				<div class="_formLinks">
+				<div class="_gaps_s">
 					<FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink>
 					<FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink>
 					<FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink>
--- a/packages/frontend/src/pages/drive.file.info.vue
+++ b/packages/frontend/src/pages/drive.file.info.vue
@ -56,6 +56,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #key>{{ i18n.ts._fileViewer.size }}</template>
 				<template #value>{{ bytes(file.size) }}</template>
 			</MkKeyValue>
+			<MkKeyValue :class="$style.fileMetaDataChildren" :copy="file.url">
+				<template #key>URL</template>
+				<template #value>{{ file.url }}</template>
+			</MkKeyValue>
 		</div>
 	</div>
 	<div v-else class="_fullinfo">
--- a/packages/frontend/src/pages/registry.keys.vue
+++ b/packages/frontend/src/pages/registry.keys.vue
@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<FormSplit>
 				<MkKeyValue>
 					<template #key>{{ i18n.ts._registry.domain }}</template>
-					<template #value>{{ i18n.ts.system }}</template>
+					<template #value>{{ props.domain === '@' ? i18n.ts.system : props.domain.toUpperCase() }}</template>
 				</MkKeyValue>
 				<MkKeyValue>
 					<template #key>{{ i18n.ts._registry.scope }}</template>
@ -23,8 +23,8 @@ SPDX-License-Identifier: AGPL-3.0-only

 			<FormSection v-if="keys">
 				<template #label>{{ i18n.ts.keys }}</template>
-				<div class="_formLinks">
-					<FormLink v-for="key in keys" :to="`/registry/value/system/${scope.join('/')}/${key[0]}`" class="_monospace">{{ key[0] }}<template #suffix>{{ key[1].toUpperCase() }}</template></FormLink>
+				<div class="_gaps_s">
+					<FormLink v-for="key in keys" :to="`/registry/value/${props.domain}/${scope.join('/')}/${key[0]}`" class="_monospace">{{ key[0] }}<template #suffix>{{ key[1].toUpperCase() }}</template></FormLink>
 				</div>
 			</FormSection>
 		</div>
@ -46,15 +46,17 @@ import FormSplit from '@/components/form/split.vue';

 const props = defineProps<{
 	path: string;
+	domain: string;
 }>();

-const scope = $computed(() => props.path.split('/'));
+const scope = $computed(() => props.path ? props.path.split('/') : []);

 let keys = $ref(null);

 function fetchKeys() {
 	os.api('i/registry/keys-with-type', {
 		scope: scope,
+		domain: props.domain === '@' ? null : props.domain,
 	}).then(res => {
 		keys = Object.entries(res).sort((a, b) => a[0].localeCompare(b[0]));
 	});
--- a/packages/frontend/src/pages/registry.value.vue
+++ b/packages/frontend/src/pages/registry.value.vue
@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<FormSplit>
 					<MkKeyValue>
 						<template #key>{{ i18n.ts._registry.domain }}</template>
-						<template #value>{{ i18n.ts.system }}</template>
+						<template #value>{{ props.domain === '@' ? i18n.ts.system : props.domain.toUpperCase() }}</template>
 					</MkKeyValue>
 					<MkKeyValue>
 						<template #key>{{ i18n.ts._registry.scope }}</template>
@ -58,6 +58,7 @@ import FormInfo from '@/components/MkInfo.vue';

 const props = defineProps<{
 	path: string;
+	domain: string;
 }>();

 const scope = $computed(() => props.path.split('/').slice(0, -1));
@ -70,6 +71,7 @@ function fetchValue() {
 	os.api('i/registry/get-detail', {
 		scope,
 		key,
+		domain: props.domain === '@' ? null : props.domain,
 	}).then(res => {
 		value = res;
 		valueForEditor = JSON5.stringify(res.value, null, '\t');
@ -95,6 +97,7 @@ async function save() {
 			scope,
 			key,
 			value: JSON5.parse(valueForEditor),
+			domain: props.domain === '@' ? null : props.domain,
 		});
 	});
 }
@ -108,6 +111,7 @@ function del() {
 		os.apiWithDialog('i/registry/remove', {
 			scope,
 			key,
+			domain: props.domain === '@' ? null : props.domain,
 		});
 	});
 }
--- a/packages/frontend/src/pages/registry.vue
+++ b/packages/frontend/src/pages/registry.vue
@ -9,12 +9,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkSpacer :contentMax="600" :marginMin="16">
 		<MkButton primary @click="createKey">{{ i18n.ts._registry.createKey }}</MkButton>

-		<FormSection v-if="scopes">
-			<template #label>{{ i18n.ts.system }}</template>
-			<div class="_formLinks">
-				<FormLink v-for="scope in scopes" :to="`/registry/keys/system/${scope.join('/')}`" class="_monospace">{{ scope.join('/') }}</FormLink>
-			</div>
-		</FormSection>
+		<div v-if="scopesWithDomain" class="_gaps_m">
+			<FormSection v-for="domain in scopesWithDomain" :key="domain.domain">
+				<template #label>{{ domain.domain ? domain.domain.toUpperCase() : i18n.ts.system }}</template>
+				<div class="_gaps_s">
+					<FormLink v-for="scope in domain.scopes" :to="`/registry/keys/${domain.domain ?? '@'}/${scope.join('/')}`" class="_monospace">{{ scope.length === 0 ? '(root)' : scope.join('/') }}</FormLink>
+				</div>
+			</FormSection>
+		</div>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@ -28,11 +30,11 @@ import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import MkButton from '@/components/MkButton.vue';

-let scopes = $ref(null);
+let scopesWithDomain = $ref(null);

 function fetchScopes() {
-	os.api('i/registry/scopes').then(res => {
-		scopes = res.slice().sort((a, b) => a.join('/').localeCompare(b.join('/')));
+	os.api('i/registry/scopes-with-domain').then(res => {
+		scopesWithDomain = res;
 	});
 }

--- a/packages/frontend/src/pages/signup-complete.vue
+++ b/packages/frontend/src/pages/signup-complete.vue
@ -51,7 +51,8 @@ function submit() {

 		os.alert({
 			type: 'error',
-			text: i18n.ts.somethingHappened,
+			title: i18n.ts.somethingHappened,
+			text: i18n.ts.signupPendingError,
 		});
 	});
 }
--- a/packages/frontend/src/pages/timeline.tutorial.vue
+++ b/packages/frontend/src/pages/timeline.tutorial.vue
@ -1,123 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and other misskey, cherrypick contributors
-SPDX-License-Identifier: AGPL-3.0-only
-->
-
-<template>
-<div :class="$style.container">
-	<div :class="$style.title">
-		<div :class="$style.titleText"><i class="ti ti-info-circle"></i> {{ i18n.ts._timelineTutorial.title }}</div>
-		<div :class="$style.step">
-			<button class="_button" :class="$style.stepArrow" :disabled="tutorial === 0" @click="tutorial--">
-				<i class="ti ti-chevron-left"></i>
-			</button>
-			<span :class="$style.stepNumber">{{ tutorial + 1 }} / {{ tutorialsNumber }}</span>
-			<button class="_button" :class="$style.stepArrow" :disabled="tutorial === tutorialsNumber - 1" @click="tutorial++">
-				<i class="ti ti-chevron-right"></i>
-			</button>
-		</div>
-	</div>
-
-	<div v-if="tutorial === 0" :class="$style.body">
-		<div>{{ i18n.t('_timelineTutorial.step1_1', { name: instance.name ?? host }) }}</div>
-		<div>{{ i18n.t('_timelineTutorial.step1_2', { name: instance.name ?? host }) }}</div>
-	</div>
-	<div v-else-if="tutorial === 1" :class="$style.body">
-		<div>{{ i18n.ts._timelineTutorial.step2_1 }}</div>
-		<div>{{ i18n.t('_timelineTutorial.step2_2', { name: instance.name ?? host }) }}</div>
-	</div>
-	<div v-else-if="tutorial === 2" :class="$style.body">
-		<div>{{ i18n.ts._timelineTutorial.step3_1 }}</div>
-		<div>{{ i18n.ts._timelineTutorial.step3_2 }}</div>
-	</div>
-	<div v-else-if="tutorial === 3" :class="$style.body">
-		<div>{{ i18n.ts._timelineTutorial.step4_1 }}</div>
-		<div>{{ i18n.ts._timelineTutorial.step4_2 }}</div>
-	</div>
-
-	<div :class="$style.footer">
-		<template v-if="tutorial === tutorialsNumber - 1">
-			<MkButton :class="$style.footerItem" primary rounded gradate @click="tutorial = -1">{{ i18n.ts.done }} <i class="ti ti-check"></i></MkButton>
-		</template>
-		<template v-else>
-			<MkButton :class="$style.footerItem" primary rounded gradate @click="tutorial++">{{ i18n.ts.next }} <i class="ti ti-arrow-right"></i></MkButton>
-		</template>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import { defaultStore } from '@/store.js';
-import { i18n } from '@/i18n.js';
-import { instance } from '@/instance.js';
-import { host } from '@/config.js';
-
-const tutorialsNumber = 4;
-
-const tutorial = computed({
-	get() { return defaultStore.reactiveState.timelineTutorial.value || 0; },
-	set(value) { defaultStore.set('timelineTutorial', value); },
-});
-</script>
-
-<style lang="scss" module>
-.small {
-	opacity: 0.7;
-}
-
-.container {
-	border: solid 2px var(--accent);
-}
-
-.title {
-	display: flex;
-	flex-wrap: wrap;
-	padding: 22px 32px;
-	font-weight: bold;
-
-	&Text {
-		margin: 4px 0;
-		padding-right: 4px;
-	}
-}
-
-.step {
-	margin-left: auto;
-
-	&Arrow {
-		padding: 4px;
-		&:disabled {
-			opacity: 0.5;
-		}
-		&:first-child {
-			padding-right: 8px;
-		}
-		&:last-child {
-			padding-left: 8px;
-		}
-	}
-
-	&Number {
-		font-weight: normal;
-		margin: 4px;
-	}
-}
-
-.body {
-	padding: 0 32px;
-}
-
-.footer {
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: row;
-	justify-content: right;
-	padding: 22px 32px;
-
-	&Item {
-		margin: 4px;
-	}
-}
-</style>
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@ -11,7 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</template>
 	<MkSpacer :contentMax="800">
 		<div ref="rootEl" v-hotkey.global="keymap">
-			<XTutorial v-if="$i && defaultStore.reactiveState.timelineTutorial.value != -1" class="_panel" style="margin-bottom: var(--margin);"/>
+			<MkInfo v-if="['home', 'local', 'social', 'global'].includes(src) && !defaultStore.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--margin);" closable @close="closeTutorial()">
+				{{ i18n.ts._timelineDescription[src] }}
+			</MkInfo>
 			<MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);" :autofocus="false"/>

 			<transition
@ -68,9 +70,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { defineAsyncComponent, computed, watch, ref, provide, onMounted } from 'vue';
+import { computed, watch, ref, provide, onMounted } from 'vue';
 import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
 import MkTimeline from '@/components/MkTimeline.vue';
+import MkInfo from '@/components/MkInfo.vue';
 import MkPostForm from '@/components/MkPostForm.vue';
 import { scroll } from '@/scripts/scroll.js';
 import * as os from '@/os.js';
@ -97,8 +100,6 @@ window.addEventListener('resize', () => {

 if (!isFriendly.value) provide('shouldOmitHeaderTitle', true);

-const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
-
 const isLocalTimelineAvailable = ($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable);
 const isGlobalTimelineAvailable = ($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable);
 const keymap = {
@ -212,6 +213,13 @@ function focus(): void {
 	tlComponent.focus();
 }

+function closeTutorial(): void {
+	if (!['home', 'local', 'social', 'global'].includes(src)) return;
+	const before = defaultStore.state.timelineTutorials;
+	before[src] = true;
+	defaultStore.set('timelineTutorials', before);
+}
+
 async function reloadAsk() {
 	if (defaultStore.state.requireRefreshBehavior === 'dialog') {
 		const { canceled } = await os.confirm({
--- a/packages/frontend/src/router.ts
+++ b/packages/frontend/src/router.ts
@ -4,7 +4,7 @@
 */

 import { AsyncComponentLoader, defineAsyncComponent, inject } from 'vue';
-import { Router } from '@/nirax';
+import { Router } from '@/nirax.js';
 import { $i, iAmModerator } from '@/account.js';
 import MkLoading from '@/pages/_loading_.vue';
 import MkError from '@/pages/_error_.vue';
@ -330,10 +330,10 @@ export const routes = [{
 	name: 'avatarDecorations',
 	component: page(() => import('./pages/avatar-decorations.vue')),
 }, {
-	path: '/registry/keys/system/:path(*)?',
+	path: '/registry/keys/:domain/:path(*)?',
 	component: page(() => import('./pages/registry.keys.vue')),
 }, {
-	path: '/registry/value/system/:path(*)?',
+	path: '/registry/value/:domain/:path(*)?',
 	component: page(() => import('./pages/registry.value.vue')),
 }, {
 	path: '/registry',
--- a/packages/frontend/src/scripts/achievements.ts
+++ b/packages/frontend/src/scripts/achievements.ts
@ -82,6 +82,7 @@ export const ACHIEVEMENT_TYPES = [
 	'cookieClicked',
 	'brainDiver',
 	'smashTestNotificationButton',
+	'tutorialCompleted',
 ] as const;

 export const ACHIEVEMENT_BADGES = {
@ -460,6 +461,11 @@ export const ACHIEVEMENT_BADGES = {
 		bg: 'linear-gradient(0deg, rgb(187 183 59), rgb(255 143 77))',
 		frame: 'bronze',
 	},
+	'tutorialCompleted': {
+		img: '/fluent-emoji/1f393.png',
+		bg: 'linear-gradient(0deg, rgb(220 223 225), rgb(172 192 207))',
+		frame: 'bronze',
+	},
 /* @see <https://github.com/misskey-dev/misskey/pull/10365#discussion_r1155511107>
 } as const satisfies Record<typeof ACHIEVEMENT_TYPES[number], {
 	img: string;
--- a/packages/frontend/src/scripts/get-drive-file-menu.ts
+++ b/packages/frontend/src/scripts/get-drive-file-menu.ts
@ -78,6 +78,11 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
 	const isImage = file.type.startsWith('image/');
 	let menu;
 	menu = [{
+		type: 'link',
+		to: `/my/drive/file/${file.id}`,
+		text: i18n.ts._fileViewer.title,
+		icon: 'ti ti-info-circle',
+	}, null, {
 		text: i18n.ts.rename,
 		icon: 'ti ti-forms',
 		action: () => rename(file),
@ -113,11 +118,6 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
 		text: i18n.ts.download,
 		icon: 'ti ti-download',
 		download: file.name,
-	}, null, {
-		type: 'link',
-		to: `/my/drive/file/${file.id}`,
-		text: i18n.ts._fileViewer.title,
-		icon: 'ti ti-file',
 	}, null, {
 		text: i18n.ts.delete,
 		icon: 'ti ti-trash',
--- a/packages/frontend/src/scripts/use-tooltip.ts
+++ b/packages/frontend/src/scripts/use-tooltip.ts
@ -37,7 +37,7 @@ export function useTooltip(
 		};

 		autoHidingTimer = window.setInterval(() => {
-			if (!document.body.contains(elRef.value)) {
+			if (elRef.value == null || !document.body.contains(elRef.value instanceof Element ? elRef.value : elRef.value.$el)) {
 				if (!isHovering) return;
 				isHovering = false;
 				window.clearTimeout(timeoutId);
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@ -49,25 +49,14 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'account',
 		default: 0,
 	},
-	timelineTutorial: {
+	timelineTutorials: {
 		where: 'account',
-		default: 0,
-	},
-	tlHomeHintClosed: {
-		where: 'device',
-		default: false,
-	},
-	tlLocalHintClosed: {
-		where: 'device',
-		default: false,
-	},
-	tlSocialHintClosed: {
-		where: 'device',
-		default: false,
-	},
-	tlGlobalHintClosed: {
-		where: 'device',
-		default: false,
+		default: {
+			home: false,
+			local: false,
+			social: false,
+			global: false,
+		},
 	},
 	keepCw: {
 		where: 'account',
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@ -454,12 +454,6 @@ hr {
 	grid-gap: 12px;
 }

-._formLinks {
-	> *:not(:last-child) {
-		margin-bottom: 8px;
-	}
-}
-
 ._beta {
 	margin-left: 0.7em;
 	font-size: 65%;
--- a/packages/frontend/src/ui/_common_/common.ts
+++ b/packages/frontend/src/ui/_common_/common.ts
@ -114,28 +114,22 @@ export function openInstanceMenu(ev: MouseEvent) {
 			text: i18n.ts._mfm.cheatSheet,
 			icon: 'ti ti-help-circle',
 			to: '/mfm-cheat-sheet',
-		}, null, {
-			type: 'button',
-			text: i18n.ts.replayUserSetupDialog,
-			icon: 'ti ti-list-numbers',
-			action: () => {
-				defaultStore.set('accountSetupWizard', 0);
-				os.popup(defineAsyncComponent(() => import('@/components/MkUserSetupDialog.vue')), {}, {}, 'closed');
-			},
-		}, {
-			type: 'button',
-			text: i18n.ts.replayTutorial,
-			icon: 'ti ti-checkup-list',
-			action: () => {
-				defaultStore.set('timelineTutorial', 0);
-				defaultStore.set('tlHomeHintClosed', false);
-				defaultStore.set('tlLocalHintClosed', false);
-				defaultStore.set('tlSocialHintClosed', false);
-				defaultStore.set('tlGlobalHintClosed', false);
-				setTimeout(unisonReload, 100);
-			},
 		}],
-	}, {
+	}, ($i) ? {
+		type: 'button',
+		text: i18n.ts.replayUserSetupDialog,
+		icon: 'ti ti-list-numbers',
+		action: () => {
+			defaultStore.set('accountSetupWizard', 0);
+			os.popup(defineAsyncComponent(() => import('@/components/MkUserSetupDialog.vue')), {}, {}, 'closed');
+		},
+	} : undefined, ($i) ? {
+		text: i18n.ts._initialTutorial.launchTutorial,
+		icon: 'ti ti-presentation',
+		action: () => {
+			os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {}, {}, 'closed');
+		},
+	} : undefined, {
 		type: 'link',
 		text: i18n.ts.aboutMisskey,
 		to: '/about-misskey',
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -105,14 +105,14 @@ importers:
        specifier: ^7.2.1
        version: 7.2.1
      '@nestjs/common':
-        specifier: 10.2.7
-        version: 10.2.7(reflect-metadata@0.1.13)(rxjs@7.8.1)
+        specifier: 10.2.8
+        version: 10.2.8(reflect-metadata@0.1.13)(rxjs@7.8.1)
      '@nestjs/core':
-        specifier: 10.2.7
-        version: 10.2.7(@nestjs/common@10.2.7)(reflect-metadata@0.1.13)(rxjs@7.8.1)
+        specifier: 10.2.8
+        version: 10.2.8(@nestjs/common@10.2.8)(reflect-metadata@0.1.13)(rxjs@7.8.1)
      '@nestjs/testing':
-        specifier: 10.2.7
-        version: 10.2.7(@nestjs/common@10.2.7)(@nestjs/core@10.2.7)
+        specifier: 10.2.8
+        version: 10.2.8(@nestjs/common@10.2.8)(@nestjs/core@10.2.8)
      '@peertube/http-signature':
        specifier: 1.7.0
        version: 1.7.0
@ -156,8 +156,8 @@ importers:
        specifier: 1.20.2
        version: 1.20.2
      bullmq:
-        specifier: 4.12.7
-        version: 4.12.7
+        specifier: 4.12.8
+        version: 4.12.8
      cacheable-lookup:
        specifier: 7.0.0
        version: 7.0.0
@ -201,8 +201,8 @@ importers:
        specifier: 4.2.2
        version: 4.2.2
      file-type:
-        specifier: 18.5.0
-        version: 18.5.0
+        specifier: 18.6.0
+        version: 18.6.0
      fluent-ffmpeg:
        specifier: 2.1.2
        version: 2.1.2
@ -666,8 +666,8 @@ importers:
        version: 4.4.0
    devDependencies:
      '@microsoft/api-extractor':
-        specifier: 7.38.1
-        version: 7.38.1(@types/node@20.8.10)
+        specifier: 7.38.2
+        version: 7.38.2(@types/node@20.8.10)
      '@swc/jest':
        specifier: 0.2.29
        version: 0.2.29(@swc/core@1.3.95)
@ -888,8 +888,8 @@ importers:
        specifier: 9.0.1
        version: 9.0.1
      v-code-diff:
-        specifier: 1.7.1
-        version: 1.7.1(vue@3.3.7)
+        specifier: 1.7.2
+        version: 1.7.2(vue@3.3.7)
      vanilla-tilt:
        specifier: 1.8.1
        version: 1.8.1
@ -1073,7 +1073,7 @@ importers:
        version: 7.5.2
      storybook-addon-misskey-theme:
        specifier: github:misskey-dev/storybook-addon-misskey-theme
-        version: github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.5.2)(@storybook/components@7.5.1)(@storybook/core-events@7.5.2)(@storybook/manager-api@7.5.2)(@storybook/preview-api@7.5.2)(@storybook/theming@7.5.2)(@storybook/types@7.5.2)(react-dom@18.2.0)(react@18.2.0)
+        version: github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.5.2)(@storybook/components@7.5.2)(@storybook/core-events@7.5.2)(@storybook/manager-api@7.5.2)(@storybook/preview-api@7.5.2)(@storybook/theming@7.5.2)(@storybook/types@7.5.2)(react-dom@18.2.0)(react@18.2.0)
      summaly:
        specifier: github:misskey-dev/summaly
        version: github.com/misskey-dev/summaly/d2d8db49943ccb201c1b1b283e9d0a630519fac7
@ -4475,8 +4475,8 @@ packages:
      - '@types/node'
    dev: true

-  /@microsoft/api-extractor@7.38.1(@types/node@20.8.10):
-    resolution: {integrity: sha512-Hxu/RrVpItQ4dzeMyfwlk4lGQFsXMoMS7bYU9YUrpW16hH04PXLRiTXJz77WhBiSGNtTuufz2xh6hWyXhC9JuQ==}
+  /@microsoft/api-extractor@7.38.2(@types/node@20.8.10):
+    resolution: {integrity: sha512-JOARuhTwOcOMIU0O2czscoJy3ddVzIRhSA9/7T1ALuZSNphgWsPk+Bv4E7AnBDmTV4pP4lBNLtCxEHjjpWaytQ==}
    hasBin: true
    dependencies:
      '@microsoft/api-extractor-model': 7.28.2(@types/node@20.8.10)
@ -4484,7 +4484,7 @@ packages:
      '@microsoft/tsdoc-config': 0.16.2
      '@rushstack/node-core-library': 3.61.0(@types/node@20.8.10)
      '@rushstack/rig-package': 0.5.1
-      '@rushstack/ts-command-line': 4.17.0
+      '@rushstack/ts-command-line': 4.17.1
      colors: 1.2.5
      lodash: 4.17.21
      resolve: 1.22.8
@ -4602,8 +4602,8 @@ packages:
      tar-fs: 2.1.1
    dev: true

-  /@nestjs/common@10.2.7(reflect-metadata@0.1.13)(rxjs@7.8.1):
-    resolution: {integrity: sha512-cUtCRXiUstDmh4bSBhVbq4cI439Gngp4LgLGLBmd5dqFQodfXKnSD441ldYfFiLz4rbUsnoMJz/8ZjuIEI+B7A==}
+  /@nestjs/common@10.2.8(reflect-metadata@0.1.13)(rxjs@7.8.1):
+    resolution: {integrity: sha512-rmpwcdvq2IWMmsUVP8rsdKub6uDWk7dwCYo0aif50JTwcvcxzaP3iKVFKoSgvp0RKYu8h15+/AEOfaInmPpl0Q==}
    peerDependencies:
      class-transformer: '*'
      class-validator: '*'
@ -4622,8 +4622,8 @@ packages:
      uid: 2.0.2
    dev: false

-  /@nestjs/core@10.2.7(@nestjs/common@10.2.7)(reflect-metadata@0.1.13)(rxjs@7.8.1):
-    resolution: {integrity: sha512-5GSu53QUUcwX17sNmlJPa1I0wIeAZOKbedyVuQx0ZAwWVa9g0wJBbsNP+R4EJ+j5Dkdzt/8xkiZvnKt8RFRR8g==}
+  /@nestjs/core@10.2.8(@nestjs/common@10.2.8)(reflect-metadata@0.1.13)(rxjs@7.8.1):
+    resolution: {integrity: sha512-9+MZ2s8ixfY9Bl/M9ofChiyYymcwdK9ZWNH4GDMF7Am7XRAQ1oqde6MYGG05rhQwiVXuTwaYLlXciJKfsrg5qg==}
    requiresBuild: true
    peerDependencies:
      '@nestjs/common': ^10.0.0
@ -4640,7 +4640,7 @@ packages:
      '@nestjs/websockets':
        optional: true
    dependencies:
-      '@nestjs/common': 10.2.7(reflect-metadata@0.1.13)(rxjs@7.8.1)
+      '@nestjs/common': 10.2.8(reflect-metadata@0.1.13)(rxjs@7.8.1)
      '@nuxtjs/opencollective': 0.3.2
      fast-safe-stringify: 2.1.1
      iterare: 1.2.1
@ -4653,8 +4653,8 @@ packages:
      - encoding
    dev: false

-  /@nestjs/testing@10.2.7(@nestjs/common@10.2.7)(@nestjs/core@10.2.7):
-    resolution: {integrity: sha512-d2SIqiJIf/7NSILeNNWSdRvTTpHSouGgisGHwf5PVDC7z4/yXZw/wPO9eJhegnxFlqk6n2LW4QBTmMzbqjAfHA==}
+  /@nestjs/testing@10.2.8(@nestjs/common@10.2.8)(@nestjs/core@10.2.8):
+    resolution: {integrity: sha512-9Kj5IQhM67/nj/MT6Wi2OmWr5YQnCMptwKVFrX1TDaikpY12196v7frk0jVjdT7wms7rV07GZle9I2z0aSjqtQ==}
    peerDependencies:
      '@nestjs/common': ^10.0.0
      '@nestjs/core': ^10.0.0
@ -4666,8 +4666,8 @@ packages:
      '@nestjs/platform-express':
        optional: true
    dependencies:
-      '@nestjs/common': 10.2.7(reflect-metadata@0.1.13)(rxjs@7.8.1)
-      '@nestjs/core': 10.2.7(@nestjs/common@10.2.7)(reflect-metadata@0.1.13)(rxjs@7.8.1)
+      '@nestjs/common': 10.2.8(reflect-metadata@0.1.13)(rxjs@7.8.1)
+      '@nestjs/core': 10.2.8(@nestjs/common@10.2.8)(reflect-metadata@0.1.13)(rxjs@7.8.1)
      tslib: 2.6.2
    dev: false

@ -5518,8 +5518,8 @@ packages:
      strip-json-comments: 3.1.1
    dev: true

-  /@rushstack/ts-command-line@4.17.0:
-    resolution: {integrity: sha512-1S0sXuEpZlzKTfvUqNs7Rg4leVkeLJc4Dn9cm+pSIn35a0Ztp5GxPN2gabD2G4RrQoQcJLLyVu+twzrJl1C0eA==}
+  /@rushstack/ts-command-line@4.17.1:
+    resolution: {integrity: sha512-2jweO1O57BYP5qdBGl6apJLB+aRIn5ccIRTPDyULh0KMwVzFqWtw6IZWt1qtUoZD/pD2RNkIOosH6Cq45rIYeg==}
    dependencies:
      '@types/argparse': 1.0.38
      argparse: 1.0.10
@ -6599,17 +6599,6 @@ packages:
      - supports-color
    dev: true

-  /@storybook/channels@7.5.1:
-    resolution: {integrity: sha512-7hTGHqvtdFTqRx8LuCznOpqPBYfUeMUt/0IIp7SFuZT585yMPxrYoaK//QmLEWnPb80B8HVTSQi7caUkJb32LA==}
-    dependencies:
-      '@storybook/client-logger': 7.5.1
-      '@storybook/core-events': 7.5.1
-      '@storybook/global': 5.0.0
-      qs: 6.11.1
-      telejson: 7.2.0
-      tiny-invariant: 1.3.1
-    dev: true
-
  /@storybook/channels@7.5.2:
    resolution: {integrity: sha512-3SgqWq9NS0XX1QxK3riuaOLrReHWwVhI63u6q1ryDD3SttpmAezZETibOAtzDuk2FKgsyHTmAlmcGQf4ZxhOJA==}
    dependencies:
@ -6673,12 +6662,6 @@ packages:
      - utf-8-validate
    dev: true

-  /@storybook/client-logger@7.5.1:
-    resolution: {integrity: sha512-XxbLvg0aQRoBrzxYLcVYCbjDkGbkU8Rfb74XbV2CLiO2bIbFPmA1l1Nwbp+wkCGA+O6Z1zwzSl6wcKKqZ6XZCg==}
-    dependencies:
-      '@storybook/global': 5.0.0
-    dev: true
-
  /@storybook/client-logger@7.5.2:
    resolution: {integrity: sha512-7YgLItlmiYDzWYexTaRNuHhtFarh9krsI+8l7Yjn9ryoHSTJUcTWx+yPJm1II+PQR8v/x5UgsxzultjgEurfRQ==}
    dependencies:
@ -6706,29 +6689,6 @@ packages:
      - supports-color
    dev: true

-  /@storybook/components@7.5.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-fdzzxGBV/Fj9pYwfYL3RZsVUHeBqlfLMBP/L6mPmjaZSwHFqkaRZZUajZc57lCtI+TOy2gY6WH3cPavEtqtgLw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@radix-ui/react-select': 1.2.2(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-toolbar': 1.0.4(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/client-logger': 7.5.1
-      '@storybook/csf': 0.1.0
-      '@storybook/global': 5.0.0
-      '@storybook/theming': 7.5.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.5.1
-      memoizerific: 1.11.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      use-resize-observer: 9.1.0(react-dom@18.2.0)(react@18.2.0)
-      util-deprecate: 1.0.2
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-    dev: true
-
  /@storybook/components@7.5.2(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-OP+o6AoxoQDbqjk/jdQ1arlc1T8601eCL+rS1dJY9EtAFq7Z0LEFtafhEW/Lx8FotfVGjfCNptH9ODhHU6e5Jw==}
    peerDependencies:
@ -6790,12 +6750,6 @@ packages:
      - supports-color
    dev: true

-  /@storybook/core-events@7.5.1:
-    resolution: {integrity: sha512-2eyaUhTfmEEqOEZVoCXVITCBn6N7QuZCG2UNxv0l//ED+7MuMiFhVw7kS7H3WOVk65R7gb8qbKFTNX8HFTgBHg==}
-    dependencies:
-      ts-dedent: 2.2.0
-    dev: true
-
  /@storybook/core-events@7.5.2:
    resolution: {integrity: sha512-DV8bFEFVKDEvaH87KYPXDE0YEV+Y9yjFv2xxmC9pF8l+MWCtVW72RBLhB+gU5NM1bkHrRDNb0lOJfVGKlhxOog==}
    dependencies:
@ -7134,20 +7088,6 @@ packages:
      ts-dedent: 2.2.0
    dev: true

-  /@storybook/theming@7.5.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-ETLAOn10hI4Mkmjsr0HGcM6HbzaURrrPBYmfXOrdbrzEVN+AHW4FlvP9d8fYyP1gdjPE1F39XvF0jYgt1zXiHQ==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.0(react@18.2.0)
-      '@storybook/client-logger': 7.5.1
-      '@storybook/global': 5.0.0
-      memoizerific: 1.11.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
  /@storybook/theming@7.5.2(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-DZBTcYErSYvmTYsGz7lKtiIcBe8flBw5Ojp52r3O4GcRYG4AbuUwwVvehz+O1cWaS+UW3HavrcgapERH7ZHd1A==}
    peerDependencies:
@ -7162,15 +7102,6 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: true

-  /@storybook/types@7.5.1:
-    resolution: {integrity: sha512-ZcMSaqFNx1E+G00nRDUi8kKL7gxJVlnCvbKLNj3V85guy4DkIYAZr31yDqze07gDWbjvKoHIp3tKpgE+2i8upQ==}
-    dependencies:
-      '@storybook/channels': 7.5.1
-      '@types/babel__core': 7.20.0
-      '@types/express': 4.17.17
-      file-system-cache: 2.3.0
-    dev: true
-
  /@storybook/types@7.5.2:
    resolution: {integrity: sha512-RDKHo6WUES+4nt7uZMfankjxdpYX2EI2GpJ2n2RPcnhzmb/ub1huNTjbzDEYMqY24SppljZeIN57m3Ar6L6f9A==}
    dependencies:
@ -9829,8 +9760,8 @@ packages:
    dependencies:
      node-gyp-build: 4.6.0

-  /bullmq@4.12.7:
-    resolution: {integrity: sha512-wigDuI8dyzY1jaUZLrwMp0L7t2glp0eErnRCYlVwi56DUWYSrzrOB3Vz8SaAmpc3Ro5dS4mBwt7RDJG3jiuJKA==}
+  /bullmq@4.12.8:
+    resolution: {integrity: sha512-aG9o2/y6P+SvsIlIfjTP4Cn2wOsD6r7IplWBovi1wCmTMDBhtKsPVCC2ZKezaagtTCGtV6IN5Bx5g6WrtMUz0Q==}
    dependencies:
      cron-parser: 4.8.1
      glob: 8.1.0
@ -12221,8 +12152,8 @@ packages:
      token-types: 5.0.1
    dev: false

-  /file-type@18.5.0:
-    resolution: {integrity: sha512-yvpl5U868+V6PqXHMmsESpg6unQ5GfnPssl4dxdJudBrr9qy7Fddt7EVX1VLlddFfe8Gj9N7goCZH22FXuSQXQ==}
+  /file-type@18.6.0:
+    resolution: {integrity: sha512-uLqXnIAIyy8K9rnvdU9IYi3WIL+6qVBWn24kThYOPlnyU+6yrr2oarn+j7seMLh1wOEG4hEjRP6a30IiKR9OaA==}
    engines: {node: '>=14.16'}
    dependencies:
      readable-web-to-node-stream: 3.0.2
@ -19940,8 +19871,8 @@ packages:
    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
    hasBin: true

-  /v-code-diff@1.7.1(vue@3.3.7):
-    resolution: {integrity: sha512-2O34z6DcVw3LygR9Xl07A28115nsps56dCH6zxFMLoW1jyEnWFPN7Kwh0GAYAeWzDiltbqsMWgvfqJYjBEZPgw==}
+  /v-code-diff@1.7.2(vue@3.3.7):
+    resolution: {integrity: sha512-y+q8ZHf8GfphYLhcZbjAKcId/h6vZujS71Ryq5u+dI6Jg4ZLTdLrBNVSzYpHywHSSFFfBMdilm6XvVryEaH4+A==}
    requiresBuild: true
    peerDependencies:
      '@vue/composition-api': ^1.4.9
@ -20738,7 +20669,7 @@ packages:
      sharp: 0.31.3
    dev: false

-  github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.5.2)(@storybook/components@7.5.1)(@storybook/core-events@7.5.2)(@storybook/manager-api@7.5.2)(@storybook/preview-api@7.5.2)(@storybook/theming@7.5.2)(@storybook/types@7.5.2)(react-dom@18.2.0)(react@18.2.0):
+  github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.5.2)(@storybook/components@7.5.2)(@storybook/core-events@7.5.2)(@storybook/manager-api@7.5.2)(@storybook/preview-api@7.5.2)(@storybook/theming@7.5.2)(@storybook/types@7.5.2)(react-dom@18.2.0)(react@18.2.0):
    resolution: {tarball: https://codeload.github.com/misskey-dev/storybook-addon-misskey-theme/tar.gz/cf583db098365b2ccc81a82f63ca9c93bc32b640}
    id: github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640
    name: storybook-addon-misskey-theme
@ -20760,7 +20691,7 @@ packages:
        optional: true
    dependencies:
      '@storybook/blocks': 7.5.2(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/components': 7.5.1(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.5.2(react-dom@18.2.0)(react@18.2.0)
      '@storybook/core-events': 7.5.2
      '@storybook/manager-api': 7.5.2(react-dom@18.2.0)(react@18.2.0)
      '@storybook/preview-api': 7.5.2
--- a/scripts/dev.mjs
+++ b/scripts/dev.mjs
@ -11,6 +11,8 @@ import { execa } from 'execa';
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = dirname(_filename);

+const vitePort = process.env.VITE_PORT ? ["--strictPort", "--port", process.env.VITE_PORT] : ["--strictPort"];
+
 await execa('pnpm', ['clean'], {
 	cwd: _dirname + '/../',
 	stdout: process.stdout,
@ -41,7 +43,7 @@ execa('pnpm', ['--filter', 'backend', 'watch'], {
 	stderr: process.stderr,
 });

-execa('pnpm', ['--filter', 'frontend', 'watch'], {
+execa('pnpm', ['--filter', 'frontend', 'watch', ...vitePort], {
 	cwd: _dirname + '/../',
 	stdout: process.stdout,
 	stderr: process.stderr,