Merge branch 'develop' into reversi

2024-01-19 11:11:57 +09:00 · 2024-01-19 11:11:57 +09:00 · 4c43ee4b53
parent 037a1daa79 43401210c3
commit 4c43ee4b53
32 changed files with 1112 additions and 604 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -24,6 +24,7 @@
 - Feat: 絵文字の詳細ダイアログを追加
 - Feat: 枠線をつけるMFM`$[border.width=1,style=solid,color=fff,radius=0 ...]`を追加
  - デフォルトで枠線からはみ出る部分が隠されるようにしました。初期と同じ挙動にするには`$[border.noclip`が必要です
+- Feat: スワイプでタブを切り替えられるように
 - Enhance: MFM等のコードブロックに全文コピー用のボタンを追加
 - Enhance: ハッシュタグ入力時に、本文の末尾の行に何も書かれていない場合は新たにスペースを追加しないように
 - Enhance: チャンネルノートのピン留めをノートのメニューからできるように
--- a/locales/generateDTS.js
+++ b/locales/generateDTS.js
@ -6,54 +6,171 @@ import ts from 'typescript';

 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
+const parameterRegExp = /\{(\w+)\}/g;
+
+function createMemberType(item) {
+	if (typeof item !== 'string') {
+		return ts.factory.createTypeLiteralNode(createMembers(item));
+	}
+	const parameters = Array.from(
+		item.matchAll(parameterRegExp),
+		([, parameter]) => parameter,
+	);
+	if (!parameters.length) {
+		return ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword);
+	}
+	return ts.factory.createTypeReferenceNode(
+		ts.factory.createIdentifier('ParameterizedString'),
+		[
+			ts.factory.createUnionTypeNode(
+				parameters.map((parameter) =>
+					ts.factory.createLiteralTypeNode(
+						ts.factory.createStringLiteral(parameter),
+					),
+				),
+			),
+		],
+	);
+}

 function createMembers(record) {
-	return Object.entries(record)
-		.map(([k, v]) => ts.factory.createPropertySignature(
+	return Object.entries(record).map(([k, v]) =>
+		ts.factory.createPropertySignature(
 			undefined,
 			ts.factory.createStringLiteral(k),
 			undefined,
-			typeof v === 'string'
-				? ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword)
-				: ts.factory.createTypeLiteralNode(createMembers(v)),
-		));
+			createMemberType(v),
+		),
+	);
 }

 export default function generateDTS() {
 	const locale = yaml.load(fs.readFileSync(`${__dirname}/ja-JP.yml`, 'utf-8'));
 	const members = createMembers(locale);
 	const elements = [
+		ts.factory.createVariableStatement(
+			[ts.factory.createToken(ts.SyntaxKind.DeclareKeyword)],
+			ts.factory.createVariableDeclarationList(
+				[
+					ts.factory.createVariableDeclaration(
+						ts.factory.createIdentifier('kParameters'),
+						undefined,
+						ts.factory.createTypeOperatorNode(
+							ts.SyntaxKind.UniqueKeyword,
+							ts.factory.createKeywordTypeNode(ts.SyntaxKind.SymbolKeyword),
+						),
+						undefined,
+					),
+				],
+				ts.NodeFlags.Const,
+			),
+		),
+		ts.factory.createInterfaceDeclaration(
+			[ts.factory.createToken(ts.SyntaxKind.ExportKeyword)],
+			ts.factory.createIdentifier('ParameterizedString'),
+			[
+				ts.factory.createTypeParameterDeclaration(
+					undefined,
+					ts.factory.createIdentifier('T'),
+					ts.factory.createTypeReferenceNode(
+						ts.factory.createIdentifier('string'),
+						undefined,
+					),
+				),
+			],
+			undefined,
+			[
+				ts.factory.createPropertySignature(
+					undefined,
+					ts.factory.createComputedPropertyName(
+						ts.factory.createIdentifier('kParameters'),
+					),
+					undefined,
+					ts.factory.createTypeReferenceNode(
+						ts.factory.createIdentifier('T'),
+						undefined,
+					),
+				),
+			],
+		),
+		ts.factory.createInterfaceDeclaration(
+			[ts.factory.createToken(ts.SyntaxKind.ExportKeyword)],
+			ts.factory.createIdentifier('ILocale'),
+			undefined,
+			undefined,
+			[
+				ts.factory.createIndexSignature(
+					undefined,
+					[
+						ts.factory.createParameterDeclaration(
+							undefined,
+							undefined,
+							ts.factory.createIdentifier('_'),
+							undefined,
+							ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword),
+							undefined,
+						),
+					],
+					ts.factory.createUnionTypeNode([
+						ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword),
+						ts.factory.createTypeReferenceNode(
+							ts.factory.createIdentifier('ParameterizedString'),
+							[ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword)],
+						),
+						ts.factory.createTypeReferenceNode(
+							ts.factory.createIdentifier('ILocale'),
+							undefined,
+						),
+					]),
+				),
+			],
+		),
 		ts.factory.createInterfaceDeclaration(
 			[ts.factory.createToken(ts.SyntaxKind.ExportKeyword)],
 			ts.factory.createIdentifier('Locale'),
 			undefined,
+			[
+				ts.factory.createHeritageClause(ts.SyntaxKind.ExtendsKeyword, [
+					ts.factory.createExpressionWithTypeArguments(
+						ts.factory.createIdentifier('ILocale'),
 						undefined,
+					),
+				]),
+			],
 			members,
 		),
 		ts.factory.createVariableStatement(
 			[ts.factory.createToken(ts.SyntaxKind.DeclareKeyword)],
 			ts.factory.createVariableDeclarationList(
-				[ts.factory.createVariableDeclaration(
+				[
+					ts.factory.createVariableDeclaration(
 						ts.factory.createIdentifier('locales'),
 						undefined,
-					ts.factory.createTypeLiteralNode([ts.factory.createIndexSignature(
+						ts.factory.createTypeLiteralNode([
+							ts.factory.createIndexSignature(
 								undefined,
-						[ts.factory.createParameterDeclaration(
+								[
+									ts.factory.createParameterDeclaration(
 										undefined,
 										undefined,
 										ts.factory.createIdentifier('lang'),
 										undefined,
-							ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword),
+										ts.factory.createKeywordTypeNode(
+											ts.SyntaxKind.StringKeyword,
+										),
 										undefined,
-						)],
+									),
+								],
 								ts.factory.createTypeReferenceNode(
 									ts.factory.createIdentifier('Locale'),
 									undefined,
 								),
-					)]),
+							),
+						]),
 						undefined,
-				)],
-				ts.NodeFlags.Const | ts.NodeFlags.Ambient | ts.NodeFlags.ContextFlags,
+					),
+				],
+				ts.NodeFlags.Const,
 			),
 		),
 		ts.factory.createFunctionDeclaration(
@ -70,16 +187,28 @@ export default function generateDTS() {
 		),
 		ts.factory.createExportDefault(ts.factory.createIdentifier('locales')),
 	];
-	const printed = ts.createPrinter({
+	const printed = ts
+		.createPrinter({
 			newLine: ts.NewLineKind.LineFeed,
-	}).printList(
+		})
+		.printList(
 			ts.ListFormat.MultiLine,
 			ts.factory.createNodeArray(elements),
-		ts.createSourceFile('index.d.ts', '', ts.ScriptTarget.ESNext, true, ts.ScriptKind.TS),
+			ts.createSourceFile(
+				'index.d.ts',
+				'',
+				ts.ScriptTarget.ESNext,
+				true,
+				ts.ScriptKind.TS,
+			),
 		);

-	fs.writeFileSync(`${__dirname}/index.d.ts`, `/* eslint-disable */
+	fs.writeFileSync(
+		`${__dirname}/index.d.ts`,
+		`/* eslint-disable */
 // This file is generated by locales/generateDTS.js
 // Do not edit this file directly.
-${printed}`, 'utf-8');
+${printed}`,
+		'utf-8',
+	);
 }
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@ -1,12 +1,19 @@
 /* eslint-disable */
 // This file is generated by locales/generateDTS.js
 // Do not edit this file directly.
-export interface Locale {
+declare const kParameters: unique symbol;
+export interface ParameterizedString<T extends string> {
+    [kParameters]: T;
+}
+export interface ILocale {
+    [_: string]: string | ParameterizedString<string> | ILocale;
+}
+export interface Locale extends ILocale {
    "_lang_": string;
    "headlineMisskey": string;
    "introMisskey": string;
-    "poweredByMisskeyDescription": string;
-    "monthAndDay": string;
+    "poweredByMisskeyDescription": ParameterizedString<"name">;
+    "monthAndDay": ParameterizedString<"month" | "day">;
    "search": string;
    "notifications": string;
    "username": string;
@ -18,7 +25,7 @@ export interface Locale {
    "cancel": string;
    "noThankYou": string;
    "enterUsername": string;
-    "renotedBy": string;
+    "renotedBy": ParameterizedString<"user">;
    "noNotes": string;
    "noNotifications": string;
    "instance": string;
@ -78,8 +85,8 @@ export interface Locale {
    "export": string;
    "files": string;
    "download": string;
-    "driveFileDeleteConfirm": string;
-    "unfollowConfirm": string;
+    "driveFileDeleteConfirm": ParameterizedString<"name">;
+    "unfollowConfirm": ParameterizedString<"name">;
    "exportRequested": string;
    "importRequested": string;
    "lists": string;
@ -183,9 +190,9 @@ export interface Locale {
    "wallpaper": string;
    "setWallpaper": string;
    "removeWallpaper": string;
-    "searchWith": string;
+    "searchWith": ParameterizedString<"q">;
    "youHaveNoLists": string;
-    "followConfirm": string;
+    "followConfirm": ParameterizedString<"name">;
    "proxyAccount": string;
    "proxyAccountDescription": string;
    "host": string;
@ -208,7 +215,7 @@ export interface Locale {
    "software": string;
    "version": string;
    "metadata": string;
-    "withNFiles": string;
+    "withNFiles": ParameterizedString<"n">;
    "monitor": string;
    "jobQueue": string;
    "cpuAndMemory": string;
@ -237,7 +244,7 @@ export interface Locale {
    "processing": string;
    "preview": string;
    "default": string;
-    "defaultValueIs": string;
+    "defaultValueIs": ParameterizedString<"value">;
    "noCustomEmojis": string;
    "noJobs": string;
    "federating": string;
@ -266,8 +273,8 @@ export interface Locale {
    "imageUrl": string;
    "remove": string;
    "removed": string;
-    "removeAreYouSure": string;
-    "deleteAreYouSure": string;
+    "removeAreYouSure": ParameterizedString<"x">;
+    "deleteAreYouSure": ParameterizedString<"x">;
    "resetAreYouSure": string;
    "areYouSure": string;
    "saved": string;
@ -285,8 +292,8 @@ export interface Locale {
    "messageRead": string;
    "noMoreHistory": string;
    "startMessaging": string;
-    "nUsersRead": string;
-    "agreeTo": string;
+    "nUsersRead": ParameterizedString<"n">;
+    "agreeTo": ParameterizedString<"0">;
    "agree": string;
    "agreeBelow": string;
    "basicNotesBeforeCreateAccount": string;
@ -298,7 +305,7 @@ export interface Locale {
    "images": string;
    "image": string;
    "birthday": string;
-    "yearsOld": string;
+    "yearsOld": ParameterizedString<"age">;
    "registeredDate": string;
    "location": string;
    "theme": string;
@ -353,9 +360,9 @@ export interface Locale {
    "thisYear": string;
    "thisMonth": string;
    "today": string;
-    "dayX": string;
-    "monthX": string;
-    "yearX": string;
+    "dayX": ParameterizedString<"day">;
+    "monthX": ParameterizedString<"month">;
+    "yearX": ParameterizedString<"year">;
    "pages": string;
    "integration": string;
    "connectService": string;
@ -420,7 +427,7 @@ export interface Locale {
    "recentlyUpdatedUsers": string;
    "recentlyRegisteredUsers": string;
    "recentlyDiscoveredUsers": string;
-    "exploreUsersCount": string;
+    "exploreUsersCount": ParameterizedString<"count">;
    "exploreFediverse": string;
    "popularTags": string;
    "userList": string;
@ -437,16 +444,16 @@ export interface Locale {
    "moderationNote": string;
    "addModerationNote": string;
    "moderationLogs": string;
-    "nUsersMentioned": string;
+    "nUsersMentioned": ParameterizedString<"n">;
    "securityKeyAndPasskey": string;
    "securityKey": string;
    "lastUsed": string;
-    "lastUsedAt": string;
+    "lastUsedAt": ParameterizedString<"t">;
    "unregister": string;
    "passwordLessLogin": string;
    "passwordLessLoginDescription": string;
    "resetPassword": string;
-    "newPasswordIs": string;
+    "newPasswordIs": ParameterizedString<"password">;
    "reduceUiAnimation": string;
    "share": string;
    "notFound": string;
@ -466,7 +473,7 @@ export interface Locale {
    "enable": string;
    "next": string;
    "retype": string;
-    "noteOf": string;
+    "noteOf": ParameterizedString<"user">;
    "quoteAttached": string;
    "quoteQuestion": string;
    "noMessagesYet": string;
@ -486,12 +493,12 @@ export interface Locale {
    "strongPassword": string;
    "passwordMatched": string;
    "passwordNotMatched": string;
-    "signinWith": string;
+    "signinWith": ParameterizedString<"x">;
    "signinFailed": string;
    "or": string;
    "language": string;
    "uiLanguage": string;
-    "aboutX": string;
+    "aboutX": ParameterizedString<"x">;
    "emojiStyle": string;
    "native": string;
    "disableDrawer": string;
@ -509,7 +516,7 @@ export interface Locale {
    "regenerate": string;
    "fontSize": string;
    "mediaListWithOneImageAppearance": string;
-    "limitTo": string;
+    "limitTo": ParameterizedString<"x">;
    "noFollowRequests": string;
    "openImageInNewTab": string;
    "dashboard": string;
@ -587,7 +594,7 @@ export interface Locale {
    "deleteAllFiles": string;
    "deleteAllFilesConfirm": string;
    "removeAllFollowing": string;
-    "removeAllFollowingDescription": string;
+    "removeAllFollowingDescription": ParameterizedString<"host">;
    "userSuspended": string;
    "userSilenced": string;
    "yourAccountSuspendedTitle": string;
@ -658,9 +665,9 @@ export interface Locale {
    "wordMute": string;
    "hardWordMute": string;
    "regexpError": string;
-    "regexpErrorDescription": string;
+    "regexpErrorDescription": ParameterizedString<"tab" | "line">;
    "instanceMute": string;
-    "userSaysSomething": string;
+    "userSaysSomething": ParameterizedString<"name">;
    "makeActive": string;
    "display": string;
    "copy": string;
@ -686,7 +693,7 @@ export interface Locale {
    "abuseReports": string;
    "reportAbuse": string;
    "reportAbuseRenote": string;
-    "reportAbuseOf": string;
+    "reportAbuseOf": ParameterizedString<"name">;
    "fillAbuseReportDescription": string;
    "abuseReported": string;
    "reporter": string;
@ -701,7 +708,7 @@ export interface Locale {
    "defaultNavigationBehaviour": string;
    "editTheseSettingsMayBreakAccount": string;
    "instanceTicker": string;
-    "waitingFor": string;
+    "waitingFor": ParameterizedString<"x">;
    "random": string;
    "system": string;
    "switchUi": string;
@ -711,10 +718,10 @@ export interface Locale {
    "optional": string;
    "createNewClip": string;
    "unclip": string;
-    "confirmToUnclipAlreadyClippedNote": string;
+    "confirmToUnclipAlreadyClippedNote": ParameterizedString<"name">;
    "public": string;
    "private": string;
-    "i18nInfo": string;
+    "i18nInfo": ParameterizedString<"link">;
    "manageAccessTokens": string;
    "accountInfo": string;
    "notesCount": string;
@ -764,9 +771,9 @@ export interface Locale {
    "needReloadToApply": string;
    "showTitlebar": string;
    "clearCache": string;
-    "onlineUsersCount": string;
-    "nUsers": string;
-    "nNotes": string;
+    "onlineUsersCount": ParameterizedString<"n">;
+    "nUsers": ParameterizedString<"n">;
+    "nNotes": ParameterizedString<"n">;
    "sendErrorReports": string;
    "sendErrorReportsDescription": string;
    "myTheme": string;
@ -798,7 +805,7 @@ export interface Locale {
    "publish": string;
    "inChannelSearch": string;
    "useReactionPickerForContextMenu": string;
-    "typingUsers": string;
+    "typingUsers": ParameterizedString<"users">;
    "jumpToSpecifiedDate": string;
    "showingPastTimeline": string;
    "clear": string;
@ -865,7 +872,7 @@ export interface Locale {
    "misskeyUpdated": string;
    "whatIsNew": string;
    "translate": string;
-    "translatedFrom": string;
+    "translatedFrom": ParameterizedString<"x">;
    "accountDeletionInProgress": string;
    "usernameInfo": string;
    "aiChanMode": string;
@ -896,11 +903,11 @@ export interface Locale {
    "continueThread": string;
    "deleteAccountConfirm": string;
    "incorrectPassword": string;
-    "voteConfirm": string;
+    "voteConfirm": ParameterizedString<"choice">;
    "hide": string;
    "useDrawerReactionPickerForMobile": string;
-    "welcomeBackWithName": string;
-    "clickToFinishEmailVerification": string;
+    "welcomeBackWithName": ParameterizedString<"name">;
+    "clickToFinishEmailVerification": ParameterizedString<"ok">;
    "overridedDeviceKind": string;
    "smartphone": string;
    "tablet": string;
@ -928,8 +935,8 @@ export interface Locale {
    "cropYes": string;
    "cropNo": string;
    "file": string;
-    "recentNHours": string;
-    "recentNDays": string;
+    "recentNHours": ParameterizedString<"n">;
+    "recentNDays": ParameterizedString<"n">;
    "noEmailServerWarning": string;
    "thereIsUnresolvedAbuseReportWarning": string;
    "recommended": string;
@ -938,7 +945,7 @@ export interface Locale {
    "driveCapOverrideCaption": string;
    "requireAdminForView": string;
    "isSystemAccount": string;
-    "typeToConfirm": string;
+    "typeToConfirm": ParameterizedString<"x">;
    "deleteAccount": string;
    "document": string;
    "numberOfPageCache": string;
@ -992,7 +999,7 @@ export interface Locale {
    "neverShow": string;
    "remindMeLater": string;
    "didYouLikeMisskey": string;
-    "pleaseDonate": string;
+    "pleaseDonate": ParameterizedString<"host">;
    "roles": string;
    "role": string;
    "noRole": string;
@ -1090,7 +1097,7 @@ export interface Locale {
    "preservedUsernamesDescription": string;
    "createNoteFromTheFile": string;
    "archive": string;
-    "channelArchiveConfirmTitle": string;
+    "channelArchiveConfirmTitle": ParameterizedString<"name">;
    "channelArchiveConfirmDescription": string;
    "thisChannelArchived": string;
    "displayOfNote": string;
@ -1120,8 +1127,8 @@ export interface Locale {
    "createCount": string;
    "inviteCodeCreated": string;
    "inviteLimitExceeded": string;
-    "createLimitRemaining": string;
-    "inviteLimitResetCycle": string;
+    "createLimitRemaining": ParameterizedString<"limit">;
+    "inviteLimitResetCycle": ParameterizedString<"time" | "limit">;
    "expirationDate": string;
    "noExpirationDate": string;
    "inviteCodeUsedAt": string;
@ -1134,7 +1141,7 @@ export interface Locale {
    "expired": string;
    "doYouAgree": string;
    "beSureToReadThisAsItIsImportant": string;
-    "iHaveReadXCarefullyAndAgree": string;
+    "iHaveReadXCarefullyAndAgree": ParameterizedString<"x">;
    "dialog": string;
    "icon": string;
    "forYou": string;
@ -1189,7 +1196,7 @@ export interface Locale {
    "doReaction": string;
    "code": string;
    "reloadRequiredToApplySettings": string;
-    "remainingN": string;
+    "remainingN": ParameterizedString<"n">;
    "overwriteContentConfirm": string;
    "seasonalScreenEffect": string;
    "decorate": string;
@ -1202,8 +1209,9 @@ export interface Locale {
    "replay": string;
    "replaying": string;
    "ranking": string;
-    "lastNDays": string;
+    "lastNDays": ParameterizedString<"n">;
    "backToTitle": string;
+    "enableHorizontalSwipe": string;
    "_bubbleGame": {
        "howToPlay": string;
        "_howToPlay": {
@ -1220,7 +1228,7 @@ export interface Locale {
        "end": string;
        "tooManyActiveAnnouncementDescription": string;
        "readConfirmTitle": string;
-        "readConfirmText": string;
+        "readConfirmText": ParameterizedString<"title">;
        "shouldNotBeUsedToPresentPermanentInfo": string;
        "dialogAnnouncementUxWarn": string;
        "silence": string;
@ -1235,10 +1243,10 @@ export interface Locale {
        "theseSettingsCanEditLater": string;
        "youCanEditMoreSettingsInSettingsPageLater": string;
        "followUsers": string;
-        "pushNotificationDescription": string;
+        "pushNotificationDescription": ParameterizedString<"name">;
        "initialAccountSettingCompleted": string;
-        "haveFun": string;
-        "youCanContinueTutorial": string;
+        "haveFun": ParameterizedString<"name">;
+        "youCanContinueTutorial": ParameterizedString<"name">;
        "startTutorial": string;
        "skipAreYouSure": string;
        "laterAreYouSure": string;
@ -1276,7 +1284,7 @@ export interface Locale {
            "social": string;
            "global": string;
            "description2": string;
-            "description3": string;
+            "description3": ParameterizedString<"link">;
        };
        "_postNote": {
            "title": string;
@ -1314,7 +1322,7 @@ export interface Locale {
        };
        "_done": {
            "title": string;
-            "description": string;
+            "description": ParameterizedString<"link">;
        };
    };
    "_timelineDescription": {
@ -1328,10 +1336,10 @@ export interface Locale {
    };
    "_serverSettings": {
        "iconUrl": string;
-        "appIconDescription": string;
+        "appIconDescription": ParameterizedString<"host">;
        "appIconUsageExample": string;
        "appIconStyleRecommendation": string;
-        "appIconResolutionMustBe": string;
+        "appIconResolutionMustBe": ParameterizedString<"resolution">;
        "manifestJsonOverride": string;
        "shortName": string;
        "shortNameDescription": string;
@ -1342,7 +1350,7 @@ export interface Locale {
    "_accountMigration": {
        "moveFrom": string;
        "moveFromSub": string;
-        "moveFromLabel": string;
+        "moveFromLabel": ParameterizedString<"n">;
        "moveFromDescription": string;
        "moveTo": string;
        "moveToLabel": string;
@ -1350,7 +1358,7 @@ export interface Locale {
        "moveAccountDescription": string;
        "moveAccountHowTo": string;
        "startMigration": string;
-        "migrationConfirm": string;
+        "migrationConfirm": ParameterizedString<"account">;
        "movedAndCannotBeUndone": string;
        "postMigrationNote": string;
        "movedTo": string;
@ -1792,7 +1800,7 @@ export interface Locale {
    "_signup": {
        "almostThere": string;
        "emailAddressInfo": string;
-        "emailSent": string;
+        "emailSent": ParameterizedString<"email">;
    };
    "_accountDelete": {
        "accountDelete": string;
@ -1845,14 +1853,14 @@ export interface Locale {
        "save": string;
        "inputName": string;
        "cannotSave": string;
-        "nameAlreadyExists": string;
-        "applyConfirm": string;
-        "saveConfirm": string;
-        "deleteConfirm": string;
-        "renameConfirm": string;
+        "nameAlreadyExists": ParameterizedString<"name">;
+        "applyConfirm": ParameterizedString<"name">;
+        "saveConfirm": ParameterizedString<"name">;
+        "deleteConfirm": ParameterizedString<"name">;
+        "renameConfirm": ParameterizedString<"old" | "new">;
        "noBackups": string;
-        "createdAt": string;
-        "updatedAt": string;
+        "createdAt": ParameterizedString<"date" | "time">;
+        "updatedAt": ParameterizedString<"date" | "time">;
        "cannotLoad": string;
        "invalidFile": string;
    };
@ -1897,8 +1905,8 @@ export interface Locale {
        "featured": string;
        "owned": string;
        "following": string;
-        "usersCount": string;
-        "notesCount": string;
+        "usersCount": ParameterizedString<"n">;
+        "notesCount": ParameterizedString<"n">;
        "nameAndDescription": string;
        "nameOnly": string;
        "allowRenoteToExternal": string;
@ -1926,7 +1934,7 @@ export interface Locale {
        "manage": string;
        "code": string;
        "description": string;
-        "installed": string;
+        "installed": ParameterizedString<"name">;
        "installedThemes": string;
        "builtinThemes": string;
        "alreadyInstalled": string;
@ -1949,7 +1957,7 @@ export interface Locale {
        "lighten": string;
        "inputConstantName": string;
        "importInfo": string;
-        "deleteConstantConfirm": string;
+        "deleteConstantConfirm": ParameterizedString<"const">;
        "keys": {
            "accent": string;
            "bg": string;
@ -2012,23 +2020,23 @@ export interface Locale {
    "_ago": {
        "future": string;
        "justNow": string;
-        "secondsAgo": string;
-        "minutesAgo": string;
-        "hoursAgo": string;
-        "daysAgo": string;
-        "weeksAgo": string;
-        "monthsAgo": string;
-        "yearsAgo": string;
+        "secondsAgo": ParameterizedString<"n">;
+        "minutesAgo": ParameterizedString<"n">;
+        "hoursAgo": ParameterizedString<"n">;
+        "daysAgo": ParameterizedString<"n">;
+        "weeksAgo": ParameterizedString<"n">;
+        "monthsAgo": ParameterizedString<"n">;
+        "yearsAgo": ParameterizedString<"n">;
        "invalid": string;
    };
    "_timeIn": {
-        "seconds": string;
-        "minutes": string;
-        "hours": string;
-        "days": string;
-        "weeks": string;
-        "months": string;
-        "years": string;
+        "seconds": ParameterizedString<"n">;
+        "minutes": ParameterizedString<"n">;
+        "hours": ParameterizedString<"n">;
+        "days": ParameterizedString<"n">;
+        "weeks": ParameterizedString<"n">;
+        "months": ParameterizedString<"n">;
+        "years": ParameterizedString<"n">;
    };
    "_time": {
        "second": string;
@ -2039,7 +2047,7 @@ export interface Locale {
    "_2fa": {
        "alreadyRegistered": string;
        "registerTOTP": string;
-        "step1": string;
+        "step1": ParameterizedString<"a" | "b">;
        "step2": string;
        "step2Click": string;
        "step2Uri": string;
@ -2054,7 +2062,7 @@ export interface Locale {
        "securityKeyName": string;
        "tapSecurityKey": string;
        "removeKey": string;
-        "removeKeyConfirm": string;
+        "removeKeyConfirm": ParameterizedString<"name">;
        "whyTOTPOnlyRenew": string;
        "renewTOTP": string;
        "renewTOTPConfirm": string;
@ -2155,9 +2163,9 @@ export interface Locale {
    };
    "_auth": {
        "shareAccessTitle": string;
-        "shareAccess": string;
+        "shareAccess": ParameterizedString<"name">;
        "shareAccessAsk": string;
-        "permission": string;
+        "permission": ParameterizedString<"name">;
        "permissionAsk": string;
        "pleaseGoBack": string;
        "callback": string;
@ -2216,12 +2224,12 @@ export interface Locale {
    "_cw": {
        "hide": string;
        "show": string;
-        "chars": string;
-        "files": string;
+        "chars": ParameterizedString<"count">;
+        "files": ParameterizedString<"count">;
    };
    "_poll": {
        "noOnlyOneChoice": string;
-        "choiceN": string;
+        "choiceN": ParameterizedString<"n">;
        "noMore": string;
        "canMultipleVote": string;
        "expiration": string;
@ -2231,16 +2239,16 @@ export interface Locale {
        "deadlineDate": string;
        "deadlineTime": string;
        "duration": string;
-        "votesCount": string;
-        "totalVotes": string;
+        "votesCount": ParameterizedString<"n">;
+        "totalVotes": ParameterizedString<"n">;
        "vote": string;
        "showResult": string;
        "voted": string;
        "closed": string;
-        "remainingDays": string;
-        "remainingHours": string;
-        "remainingMinutes": string;
-        "remainingSeconds": string;
+        "remainingDays": ParameterizedString<"d" | "h">;
+        "remainingHours": ParameterizedString<"h" | "m">;
+        "remainingMinutes": ParameterizedString<"m" | "s">;
+        "remainingSeconds": ParameterizedString<"s">;
    };
    "_visibility": {
        "public": string;
@ -2280,7 +2288,7 @@ export interface Locale {
        "changeAvatar": string;
        "changeBanner": string;
        "verifiedLinkDescription": string;
-        "avatarDecorationMax": string;
+        "avatarDecorationMax": ParameterizedString<"max">;
    };
    "_exportOrImport": {
        "allNotes": string;
@ -2403,16 +2411,16 @@ export interface Locale {
    };
    "_notification": {
        "fileUploaded": string;
-        "youGotMention": string;
-        "youGotReply": string;
-        "youGotQuote": string;
-        "youRenoted": string;
+        "youGotMention": ParameterizedString<"name">;
+        "youGotReply": ParameterizedString<"name">;
+        "youGotQuote": ParameterizedString<"name">;
+        "youRenoted": ParameterizedString<"name">;
        "youWereFollowed": string;
        "youReceivedFollowRequest": string;
        "yourFollowRequestAccepted": string;
        "pollEnded": string;
        "newNote": string;
-        "unreadAntennaNote": string;
+        "unreadAntennaNote": ParameterizedString<"name">;
        "roleAssigned": string;
        "emptyPushNotificationMessage": string;
        "achievementEarned": string;
@ -2420,9 +2428,9 @@ export interface Locale {
        "checkNotificationBehavior": string;
        "sendTestNotification": string;
        "notificationWillBeDisplayedLikeThis": string;
-        "reactedBySomeUsers": string;
-        "renotedBySomeUsers": string;
-        "followedBySomeUsers": string;
+        "reactedBySomeUsers": ParameterizedString<"n">;
+        "renotedBySomeUsers": ParameterizedString<"n">;
+        "followedBySomeUsers": ParameterizedString<"n">;
        "_types": {
            "all": string;
            "note": string;
@ -2479,8 +2487,8 @@ export interface Locale {
        };
    };
    "_dialog": {
-        "charactersExceeded": string;
-        "charactersBelow": string;
+        "charactersExceeded": ParameterizedString<"current" | "max">;
+        "charactersBelow": ParameterizedString<"current" | "min">;
    };
    "_disabledTimeline": {
        "title": string;
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -1201,6 +1201,7 @@ replaying: "リプレイ中"
 ranking: "ランキング"
 lastNDays: "直近{n}日"
 backToTitle: "タイトルへ"
+enableHorizontalSwipe: "スワイプしてタブを切り替える"

 _bubbleGame:
  howToPlay: "遊び方"
--- a/packages/frontend/src/components/MkCode.vue
+++ b/packages/frontend/src/components/MkCode.vue
@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<code v-if="inline" :class="$style.codeInlineRoot">{{ code }}</code>
-<div v-else :class="$style.codeBlockRoot">
+<div :class="$style.codeBlockRoot">
 	<button :class="$style.codeBlockCopyButton" class="_button" @click="copy">
 		<i class="ti ti-copy"></i>
 	</button>
@ -36,7 +35,6 @@ import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 const props = defineProps<{
 	code: string;
 	lang?: string;
-	inline?: boolean;
 }>();

 const show = ref(!defaultStore.state.dataSaver.code);
@ -66,16 +64,6 @@ function copy() {
 	}
 }

-.codeInlineRoot {
-	display: inline-block;
-	font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
-	overflow-wrap: anywhere;
-	color: #D4D4D4;
-	background: #1E1E1E;
-	padding: .1em;
-	border-radius: .3em;
-}
-
 .codeBlockFallbackRoot {
 	display: block;
 	overflow-wrap: anywhere;
--- a/packages/frontend/src/components/MkCodeInline.vue
+++ b/packages/frontend/src/components/MkCodeInline.vue
@ -0,0 +1,26 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<code :class="$style.root">{{ code }}</code>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+	code: string;
+}>();
+</script>
+
+<style module lang="scss">
+.root {
+	display: inline-block;
+	font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
+	overflow-wrap: anywhere;
+	color: #D4D4D4;
+	background: #1E1E1E;
+	padding: .1em;
+	border-radius: .3em;
+}
+</style>
--- a/packages/frontend/src/components/MkHorizontalSwipe.vue
+++ b/packages/frontend/src/components/MkHorizontalSwipe.vue
@ -0,0 +1,209 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div
+	ref="rootEl"
+	:class="[$style.transitionRoot, (defaultStore.state.animation && $style.enableAnimation)]"
+	@touchstart="touchStart"
+	@touchmove="touchMove"
+	@touchend="touchEnd"
+>
+	<Transition
+		:class="[$style.transitionChildren, { [$style.swiping]: isSwipingForClass }]"
+		:enterActiveClass="$style.swipeAnimation_enterActive"
+		:leaveActiveClass="$style.swipeAnimation_leaveActive"
+		:enterFromClass="transitionName === 'swipeAnimationLeft' ? $style.swipeAnimationLeft_enterFrom : $style.swipeAnimationRight_enterFrom"
+		:leaveToClass="transitionName === 'swipeAnimationLeft' ? $style.swipeAnimationLeft_leaveTo : $style.swipeAnimationRight_leaveTo"
+		:style="`--swipe: ${pullDistance}px;`"
+	>
+		<!-- 【注意】slot内の最上位要素に動的にkeyを設定すること -->
+		<!-- 各最上位要素にユニークなkeyの指定がないとTransitionがうまく動きません -->
+		<slot></slot>
+	</Transition>
+</div>
+</template>
+<script lang="ts" setup>
+import { ref, shallowRef, computed, nextTick, watch } from 'vue';
+import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
+import { defaultStore } from '@/store.js';
+
+const rootEl = shallowRef<HTMLDivElement>();
+
+// eslint-disable-next-line no-undef
+const tabModel = defineModel<string>('tab');
+
+const props = defineProps<{
+	tabs: Tab[];
+}>();
+
+const emit = defineEmits<{
+	(ev: 'swiped', newKey: string, direction: 'left' | 'right'): void;
+}>();
+
+// ▼ しきい値 ▼ //
+
+// スワイプと判定される最小の距離
+const MIN_SWIPE_DISTANCE = 50;
+
+// スワイプ時の動作を発火する最小の距離
+const SWIPE_DISTANCE_THRESHOLD = 125;
+
+// スワイプを中断するY方向の移動距離
+const SWIPE_ABORT_Y_THRESHOLD = 75;
+
+// スワイプできる最大の距離
+const MAX_SWIPE_DISTANCE = 150;
+
+// ▲ しきい値 ▲ //
+
+let startScreenX: number | null = null;
+let startScreenY: number | null = null;
+
+const currentTabIndex = computed(() => props.tabs.findIndex(tab => tab.key === tabModel.value));
+
+const pullDistance = ref(0);
+const isSwiping = ref(false);
+const isSwipingForClass = ref(false);
+let swipeAborted = false;
+
+function touchStart(event: TouchEvent) {
+	if (!defaultStore.reactiveState.enableHorizontalSwipe.value) return;
+
+	if (event.touches.length !== 1) return;
+
+	startScreenX = event.touches[0].screenX;
+	startScreenY = event.touches[0].screenY;
+}
+
+function touchMove(event: TouchEvent) {
+	if (!defaultStore.reactiveState.enableHorizontalSwipe.value) return;
+
+	if (event.touches.length !== 1) return;
+
+	if (startScreenX == null || startScreenY == null) return;
+
+	if (swipeAborted) return;
+
+	let distanceX = event.touches[0].screenX - startScreenX;
+	let distanceY = event.touches[0].screenY - startScreenY;
+
+	if (Math.abs(distanceY) > SWIPE_ABORT_Y_THRESHOLD) {
+		swipeAborted = true;
+
+		pullDistance.value = 0;
+		isSwiping.value = false;
+		setTimeout(() => {
+			isSwipingForClass.value = false;
+		}, 400);
+
+		return;
+	}
+
+	if (Math.abs(distanceX) < MIN_SWIPE_DISTANCE) return;
+	if (Math.abs(distanceX) > MAX_SWIPE_DISTANCE) return;
+
+	if (currentTabIndex.value === 0 || props.tabs[currentTabIndex.value - 1].onClick) {
+		distanceX = Math.min(distanceX, 0);
+	}
+	if (currentTabIndex.value === props.tabs.length - 1 || props.tabs[currentTabIndex.value + 1].onClick) {
+		distanceX = Math.max(distanceX, 0);
+	}
+	if (distanceX === 0) return;
+
+	isSwiping.value = true;
+	isSwipingForClass.value = true;
+	nextTick(() => {
+		// グリッチを控えるため、1.5px以上の差がないと更新しない
+		if (Math.abs(distanceX - pullDistance.value) < 1.5) return;
+		pullDistance.value = distanceX;
+	});
+}
+
+function touchEnd(event: TouchEvent) {
+	if (swipeAborted) {
+		swipeAborted = false;
+		return;
+	}
+
+	if (!defaultStore.reactiveState.enableHorizontalSwipe.value) return;
+
+	if (event.touches.length !== 0) return;
+
+	if (startScreenX == null) return;
+
+	if (!isSwiping.value) return;
+
+	const distance = event.changedTouches[0].screenX - startScreenX;
+
+	if (Math.abs(distance) > SWIPE_DISTANCE_THRESHOLD) {
+		if (distance > 0) {
+			if (props.tabs[currentTabIndex.value - 1] && !props.tabs[currentTabIndex.value - 1].onClick) {
+				tabModel.value = props.tabs[currentTabIndex.value - 1].key;
+				emit('swiped', props.tabs[currentTabIndex.value - 1].key, 'right');
+			}
+		} else {
+			if (props.tabs[currentTabIndex.value + 1] && !props.tabs[currentTabIndex.value + 1].onClick) {
+				tabModel.value = props.tabs[currentTabIndex.value + 1].key;
+				emit('swiped', props.tabs[currentTabIndex.value + 1].key, 'left');
+			}
+		}
+	}
+
+	pullDistance.value = 0;
+	isSwiping.value = false;
+	setTimeout(() => {
+		isSwipingForClass.value = false;
+	}, 400);
+}
+
+const transitionName = ref<'swipeAnimationLeft' | 'swipeAnimationRight' | undefined>(undefined);
+
+watch(tabModel, (newTab, oldTab) => {
+	const newIndex = props.tabs.findIndex(tab => tab.key === newTab);
+	const oldIndex = props.tabs.findIndex(tab => tab.key === oldTab);
+
+	if (oldIndex >= 0 && newIndex && oldIndex < newIndex) {
+		transitionName.value = 'swipeAnimationLeft';
+	} else {
+		transitionName.value = 'swipeAnimationRight';
+	}
+
+	window.setTimeout(() => {
+		transitionName.value = undefined;
+	}, 400);
+});
+</script>
+
+<style lang="scss" module>
+.transitionRoot.enableAnimation {
+	display: grid;
+	overflow: clip;
+
+	.transitionChildren {
+		grid-area: 1 / 1 / 2 / 2;
+		transform: translateX(var(--swipe));
+
+		&.swipeAnimation_enterActive,
+		&.swipeAnimation_leaveActive {
+			transition: transform .3s cubic-bezier(0.65, 0.05, 0.36, 1);
+		}
+
+		&.swipeAnimationRight_leaveTo,
+		&.swipeAnimationLeft_enterFrom {
+			transform: translateX(calc(100% + 24px));
+		}
+
+		&.swipeAnimationRight_enterFrom,
+		&.swipeAnimationLeft_leaveTo {
+			transform: translateX(calc(-100% - 24px));
+		}
+	}
+}
+
+.swiping {
+	transition: transform .2s ease-out;
+}
+</style>
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@ -138,7 +138,7 @@ const rangePercent = computed({
 		audioEl.value.currentTime = to * durationMs.value / 1000;
 	},
 });
-const volume = ref(.5);
+const volume = ref(.25);
 const bufferedEnd = ref(0);
 const bufferedDataRatio = computed(() => {
 	if (!audioEl.value) return 0;
@ -161,7 +161,7 @@ function togglePlayPause() {

 function toggleMute() {
 	if (volume.value === 0) {
-		volume.value = .5;
+		volume.value = .25;
 	} else {
 		volume.value = 0;
 	}
--- a/packages/frontend/src/components/MkMediaRange.vue
+++ b/packages/frontend/src/components/MkMediaRange.vue
@ -5,10 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only

 <!-- Media系専用のinput range -->
 <template>
-<div :class="$style.controlsSeekbar" :style="sliderBgWhite ? '--sliderBg: rgba(255,255,255,.25);' : '--sliderBg: var(--scrollbarHandle);'">
+<div :style="sliderBgWhite ? '--sliderBg: rgba(255,255,255,.25);' : '--sliderBg: var(--scrollbarHandle);'">
+	<div :class="$style.controlsSeekbar">
 		<progress v-if="buffer !== undefined" :class="$style.buffer" :value="isNaN(buffer) ? 0 : buffer" min="0" max="1">{{ Math.round(buffer * 100) }}% buffered</progress>
 		<input v-model="model" :class="$style.seek" :style="`--value: ${modelValue * 100}%;`" type="range" min="0" max="1" step="any" @change="emit('dragEnded', modelValue)"/>
 	</div>
+</div>
 </template>

 <script setup lang="ts">
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@ -176,7 +176,7 @@ const rangePercent = computed({
 		videoEl.value.currentTime = to * durationMs.value / 1000;
 	},
 });
-const volume = ref(.5);
+const volume = ref(.25);
 const bufferedEnd = ref(0);
 const bufferedDataRatio = computed(() => {
 	if (!videoEl.value) return 0;
@ -236,7 +236,7 @@ function toggleFullscreen() {

 function toggleMute() {
 	if (volume.value === 0) {
-		volume.value = .5;
+		volume.value = .25;
 	} else {
 		volume.value = 0;
 	}
@ -535,6 +535,9 @@ onDeactivated(() => {

 .seekbarRoot {
 	grid-area: seekbar;
+	/* ▼シークバー操作をやりやすくするためにクリックイベントが伝播されないエリアを拡張する */
+	margin: -10px;
+	padding: 10px;
 }

@container (min-width: 500px) {
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
@ -13,6 +13,7 @@ import MkMention from '@/components/MkMention.vue';
 import MkEmoji from '@/components/global/MkEmoji.vue';
 import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
 import MkCode from '@/components/MkCode.vue';
+import MkCodeInline from '@/components/MkCodeInline.vue';
 import MkGoogle from '@/components/MkGoogle.vue';
 import MkSparkle from '@/components/MkSparkle.vue';
 import MkA from '@/components/global/MkA.vue';
@ -373,10 +374,9 @@ export default function(props: MfmProps, context: SetupContext<MfmEvents>) {
 			}

 			case 'inlineCode': {
-				return [h(MkCode, {
+				return [h(MkCodeInline, {
 					key: Math.random(),
 					code: token.props.code,
-					inline: true,
 				})];
 			}

--- a/packages/frontend/src/filters/hms.ts
+++ b/packages/frontend/src/filters/hms.ts
@ -5,7 +5,7 @@

 import { i18n } from '@/i18n.js';

-export function hms(ms: number, options: {
+export function hms(ms: number, options?: {
 	textFormat?: 'colon' | 'locale';
 	enableSeconds?: boolean;
 	enableMs?: boolean;
--- a/packages/frontend/src/i18n.ts
+++ b/packages/frontend/src/i18n.ts
@ -10,6 +10,7 @@ import { I18n } from '@/scripts/i18n.js';

 export const i18n = markRaw(new I18n<Locale>(locale));

-export function updateI18n(newLocale) {
-	i18n.ts = newLocale;
+export function updateI18n(newLocale: Locale) {
+	// @ts-expect-error -- private field
+	i18n.locale = newLocale;
 }
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@ -6,6 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 		<MkSpacer v-if="tab === 'overview'" :contentMax="600" :marginMin="20">
 			<div class="_gaps_m">
 				<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
@ -98,6 +99,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSpacer v-else-if="tab === 'charts'" :contentMax="1000" :marginMin="20">
 			<MkInstanceStats/>
 		</MkSpacer>
+	</MkHorizontalSwipe>
 </MkStickyContainer>
 </template>

@ -114,6 +116,7 @@ import FormSplit from '@/components/form/split.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkInstanceStats from '@/components/MkInstanceStats.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import number from '@/filters/number.js';
 import { i18n } from '@/i18n.js';
--- a/packages/frontend/src/pages/announcements.vue
+++ b/packages/frontend/src/pages/announcements.vue
@ -7,7 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
-		<div class="_gaps">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+			<div :key="tab" class="_gaps">
 				<MkInfo v-if="$i && $i.hasUnreadAnnouncement && tab === 'current'" warn>{{ i18n.ts.youHaveUnreadAnnouncements }}</MkInfo>
 				<MkPagination ref="paginationEl" :key="tab" v-slot="{items}" :pagination="tab === 'current' ? paginationCurrent : paginationPast" class="_gaps">
 					<section v-for="announcement in items" :key="announcement.id" class="_panel" :class="$style.announcement">
@ -35,6 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</section>
 				</MkPagination>
 			</div>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@ -44,6 +46,7 @@ import { ref, computed } from 'vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInfo from '@/components/MkInfo.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@ -7,7 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700" :class="$style.main">
-		<div v-if="channel && tab === 'overview'" class="_gaps">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+			<div v-if="channel && tab === 'overview'" key="overview" class="_gaps">
 				<div class="_panel" :class="$style.bannerContainer">
 					<XChannelFollowButton :channel="channel" :full="true" :class="$style.subscribe"/>
 					<MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" asLike class="button" rounded primary :class="$style.favorite" @click="unfavorite()"><i class="ti ti-star"></i></MkButton>
@ -32,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</MkFoldableSection>
 			</div>
-		<div v-if="channel && tab === 'timeline'" class="_gaps">
+			<div v-if="channel && tab === 'timeline'" key="timeline" class="_gaps">
 				<MkInfo v-if="channel.isArchived" warn>{{ i18n.ts.thisChannelArchived }}</MkInfo>

 				<!-- スマホ・タブレットの場合、キーボードが表示されると投稿が見づらくなるので、デスクトップ場合のみ自動でフォーカスを当てる -->
@ -40,10 +41,10 @@ SPDX-License-Identifier: AGPL-3.0-only

 				<MkTimeline :key="channelId" src="channel" :channel="channelId" @before="before" @after="after" @note="miLocalStorage.setItemAsJson(`channelLastReadedAt:${channel.id}`, Date.now())"/>
 			</div>
-		<div v-else-if="tab === 'featured'">
+			<div v-else-if="tab === 'featured'" key="featured">
 				<MkNotes :pagination="featuredPagination"/>
 			</div>
-		<div v-else-if="tab === 'search'">
+			<div v-else-if="tab === 'search'" key="search">
 				<div class="_gaps">
 					<div>
 						<MkInput v-model="searchQuery" @enter="search()">
@ -54,6 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkNotes v-if="searchPagination" :key="searchKey" :pagination="searchPagination"/>
 				</div>
 			</div>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 	<template #footer>
 		<div :class="$style.footer">
@ -87,6 +89,7 @@ import { defaultStore } from '@/store.js';
 import MkNote from '@/components/MkNote.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { PageHeaderItem } from '@/types/page-header.js';
 import { isSupportShare } from '@/scripts/navigator.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
@ -100,6 +103,7 @@ const props = defineProps<{
 }>();

 const tab = ref('overview');
+
 const channel = ref<Misskey.entities.Channel | null>(null);
 const favorited = ref(false);
 const searchQuery = ref('');
--- a/packages/frontend/src/pages/channels.vue
+++ b/packages/frontend/src/pages/channels.vue
@ -7,7 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
-		<div v-if="tab === 'search'">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+			<div v-if="tab === 'search'" key="search">
 				<div class="_gaps">
 					<MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" @enter="search">
 						<template #prefix><i class="ti ti-search"></i></template>
@ -24,27 +25,28 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkChannelList :key="key" :pagination="channelPagination"/>
 				</MkFoldableSection>
 			</div>
-		<div v-if="tab === 'featured'">
+			<div v-if="tab === 'featured'" key="featured">
 				<MkPagination v-slot="{items}" :pagination="featuredPagination">
 					<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
 				</MkPagination>
 			</div>
-		<div v-else-if="tab === 'favorites'">
+			<div v-else-if="tab === 'favorites'" key="favorites">
 				<MkPagination v-slot="{items}" :pagination="favoritesPagination">
 					<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
 				</MkPagination>
 			</div>
-		<div v-else-if="tab === 'following'">
+			<div v-else-if="tab === 'following'" key="following">
 				<MkPagination v-slot="{items}" :pagination="followingPagination">
 					<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
 				</MkPagination>
 			</div>
-		<div v-else-if="tab === 'owned'">
+			<div v-else-if="tab === 'owned'" key="owned">
 				<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
 				<MkPagination v-slot="{items}" :pagination="ownedPagination">
 					<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
 				</MkPagination>
 			</div>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@ -58,6 +60,7 @@ import MkInput from '@/components/MkInput.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { useRouter } from '@/global/router/supplier.js';
--- a/packages/frontend/src/pages/drive.file.vue
+++ b/packages/frontend/src/pages/drive.file.vue
@ -9,13 +9,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/>
 	</template>

-	<MkSpacer v-if="tab === 'info'" :contentMax="800">
+	<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+		<MkSpacer v-if="tab === 'info'" key="info" :contentMax="800">
 			<XFileInfo :fileId="fileId"/>
 		</MkSpacer>

-	<MkSpacer v-else-if="tab === 'notes'" :contentMax="800">
+		<MkSpacer v-else-if="tab === 'notes'" key="notes" :contentMax="800">
 			<XNotes :fileId="fileId"/>
 		</MkSpacer>
+	</MkHorizontalSwipe>
 </MkStickyContainer>
 </template>

@ -23,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, ref, defineAsyncComponent } from 'vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';

 const props = defineProps<{
 	fileId: string;
--- a/packages/frontend/src/pages/explore.vue
+++ b/packages/frontend/src/pages/explore.vue
@ -6,17 +6,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<div>
-		<div v-if="tab === 'featured'">
+	<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+		<div v-if="tab === 'featured'" key="featured">
 			<XFeatured/>
 		</div>
-		<div v-else-if="tab === 'users'">
+		<div v-else-if="tab === 'users'" key="users">
 			<XUsers/>
 		</div>
-		<div v-else-if="tab === 'roles'">
+		<div v-else-if="tab === 'roles'" key="roles">
 			<XRoles/>
 		</div>
-	</div>
+	</MkHorizontalSwipe>
 </MkStickyContainer>
 </template>

@ -26,6 +26,7 @@ import XFeatured from './explore.featured.vue';
 import XUsers from './explore.users.vue';
 import XRoles from './explore.roles.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';

--- a/packages/frontend/src/pages/flash/flash-index.vue
+++ b/packages/frontend/src/pages/flash/flash-index.vue
@ -7,7 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
-		<div v-if="tab === 'featured'">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+			<div v-if="tab === 'featured'" key="featured">
 				<MkPagination v-slot="{items}" :pagination="featuredFlashsPagination">
 					<div class="_gaps_s">
 						<MkFlashPreview v-for="flash in items" :key="flash.id" :flash="flash"/>
@ -15,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkPagination>
 			</div>

-		<div v-else-if="tab === 'my'">
+			<div v-else-if="tab === 'my'" key="my">
 				<div class="_gaps">
 					<MkButton gradate rounded style="margin: 0 auto;" @click="create()"><i class="ti ti-plus"></i></MkButton>
 					<MkPagination v-slot="{items}" :pagination="myFlashsPagination">
@ -26,13 +27,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</div>

-		<div v-else-if="tab === 'liked'">
+			<div v-else-if="tab === 'liked'" key="liked">
 				<MkPagination v-slot="{items}" :pagination="likedFlashsPagination">
 					<div class="_gaps_s">
 						<MkFlashPreview v-for="like in items" :key="like.flash.id" :flash="like.flash"/>
 					</div>
 				</MkPagination>
 			</div>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@ -42,6 +44,7 @@ import { computed, ref } from 'vue';
 import MkFlashPreview from '@/components/MkFlashPreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { useRouter } from '@/global/router/supplier.js';
--- a/packages/frontend/src/pages/flash/flash.vue
+++ b/packages/frontend/src/pages/flash/flash.vue
@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #icon><i class="ti ti-code"></i></template>
 					<template #label>{{ i18n.ts._play.viewSource }}</template>

-					<MkCode :code="flash.script" lang="is" :inline="false" class="_monospace"/>
+					<MkCode :code="flash.script" lang="is" class="_monospace"/>
 				</MkFolder>
 				<div :class="$style.footer">
 					<Mfm :text="`By @${flash.user.username}`"/>
--- a/packages/frontend/src/pages/gallery/index.vue
+++ b/packages/frontend/src/pages/gallery/index.vue
@ -7,8 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="1400">
-		<div class="_root">
-			<div v-if="tab === 'explore'">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+			<div v-if="tab === 'explore'" key="explore">
 				<MkFoldableSection class="_margin">
 					<template #header><i class="ti ti-clock"></i>{{ i18n.ts.recentPosts }}</template>
 					<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disableAutoLoad="true">
@ -26,14 +26,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</MkPagination>
 				</MkFoldableSection>
 			</div>
-			<div v-else-if="tab === 'liked'">
+			<div v-else-if="tab === 'liked'" key="liked">
 				<MkPagination v-slot="{items}" :pagination="likedPostsPagination">
 					<div :class="$style.items">
 						<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
 					</div>
 				</MkPagination>
 			</div>
-			<div v-else-if="tab === 'my'">
+			<div v-else-if="tab === 'my'" key="my">
 				<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="ti ti-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
 				<MkPagination v-slot="{items}" :pagination="myPostsPagination">
 					<div :class="$style.items">
@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</MkPagination>
 			</div>
-		</div>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@ -51,6 +51,7 @@ import { watch, ref, computed } from 'vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { useRouter } from '@/global/router/supplier.js';
--- a/packages/frontend/src/pages/instance-info.vue
+++ b/packages/frontend/src/pages/instance-info.vue
@ -7,7 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer v-if="instance" :contentMax="600" :marginMin="16" :marginMax="32">
-		<div v-if="tab === 'overview'" class="_gaps_m">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+			<div v-if="tab === 'overview'" key="overview" class="_gaps_m">
 				<div class="fnfelxur">
 					<img :src="faviconUrl" alt="" class="icon"/>
 					<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
@ -76,7 +77,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink>
 				</FormSection>
 			</div>
-		<div v-else-if="tab === 'chart'" class="_gaps_m">
+			<div v-else-if="tab === 'chart'" key="chart" class="_gaps_m">
 				<div class="cmhjzshl">
 					<div class="selects">
 						<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
@ -101,17 +102,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</div>
 			</div>
-		<div v-else-if="tab === 'users'" class="_gaps_m">
+			<div v-else-if="tab === 'users'" key="users" class="_gaps_m">
 				<MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;">
 					<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" class="user" :to="`/admin/user/${user.id}`">
 						<MkUserCardMini :user="user"/>
 					</MkA>
 				</MkPagination>
 			</div>
-		<div v-else-if="tab === 'raw'" class="_gaps_m">
+			<div v-else-if="tab === 'raw'" key="raw" class="_gaps_m">
 				<MkObjectView tall :value="instance">
 				</MkObjectView>
 			</div>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@ -136,6 +138,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkPagination from '@/components/MkPagination.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
 import { dateString } from '@/filters/date.js';

@ -144,6 +147,7 @@ const props = defineProps<{
 }>();

 const tab = ref('overview');
+
 const chartSrc = ref('instance-requests');
 const meta = ref<Misskey.entities.AdminMetaResponse | null>(null);
 const instance = ref<Misskey.entities.FederationInstance | null>(null);
--- a/packages/frontend/src/pages/my-clips/index.vue
+++ b/packages/frontend/src/pages/my-clips/index.vue
@ -7,7 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
-		<div v-if="tab === 'my'" class="_gaps">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+			<div v-if="tab === 'my'" key="my" class="_gaps">
 				<MkButton primary rounded class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>

 				<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="_gaps">
@ -16,11 +17,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</MkA>
 				</MkPagination>
 			</div>
-		<div v-else-if="tab === 'favorites'" class="_gaps">
+			<div v-else-if="tab === 'favorites'" key="favorites" class="_gaps">
 				<MkA v-for="item in favorites" :key="item.id" :to="`/clips/${item.id}`">
 					<MkClipPreview :clip="item"/>
 				</MkA>
 			</div>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@ -36,6 +38,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { clipsCache } from '@/cache.js';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';

 const pagination = {
 	endpoint: 'clips/list' as const,
@ -44,6 +47,7 @@ const pagination = {
 };

 const tab = ref('my');
+
 const favorites = ref<Misskey.entities.Clip[] | null>(null);

 const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
--- a/packages/frontend/src/pages/notifications.vue
+++ b/packages/frontend/src/pages/notifications.vue
@ -7,15 +7,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
-		<div v-if="tab === 'all'">
-			<XNotifications class="notifications" :excludeTypes="excludeTypes"/>
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+			<div v-if="tab === 'all'" key="all">
+				<XNotifications :class="$style.notifications" :excludeTypes="excludeTypes"/>
 			</div>
-		<div v-else-if="tab === 'mentions'">
+			<div v-else-if="tab === 'mentions'" key="mention">
 				<MkNotes :pagination="mentionsPagination"/>
 			</div>
-		<div v-else-if="tab === 'directNotes'">
+			<div v-else-if="tab === 'directNotes'" key="directNotes">
 				<MkNotes :pagination="directNotesPagination"/>
 			</div>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@ -24,6 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, ref } from 'vue';
 import XNotifications from '@/components/MkNotifications.vue';
 import MkNotes from '@/components/MkNotes.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@ -96,3 +99,10 @@ definePageMetadata(computed(() => ({
 	icon: 'ti ti-bell',
 })));
 </script>
+
+<style module lang="scss">
+.notifications {
+	border-radius: var(--radius);
+	overflow: clip;
+}
+</style>
--- a/packages/frontend/src/pages/pages.vue
+++ b/packages/frontend/src/pages/pages.vue
@ -7,7 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
-		<div v-if="tab === 'featured'">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+			<div v-if="tab === 'featured'" key="featured">
 				<MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
 					<div class="_gaps">
 						<MkPagePreview v-for="page in items" :key="page.id" :page="page"/>
@ -15,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkPagination>
 			</div>

-		<div v-else-if="tab === 'my'" class="_gaps">
+			<div v-else-if="tab === 'my'" key="my" class="_gaps">
 				<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
 				<MkPagination v-slot="{items}" :pagination="myPagesPagination">
 					<div class="_gaps">
@ -24,13 +25,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkPagination>
 			</div>

-		<div v-else-if="tab === 'liked'">
+			<div v-else-if="tab === 'liked'" key="liked">
 				<MkPagination v-slot="{items}" :pagination="likedPagesPagination">
 					<div class="_gaps">
 						<MkPagePreview v-for="like in items" :key="like.page.id" :page="like.page"/>
 					</div>
 				</MkPagination>
 			</div>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@ -40,6 +42,7 @@ import { computed, ref } from 'vue';
 import MkPagePreview from '@/components/MkPagePreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { useRouter } from '@/global/router/supplier.js';
--- a/packages/frontend/src/pages/search.vue
+++ b/packages/frontend/src/pages/search.vue
@ -7,7 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>

-	<MkSpacer v-if="tab === 'note'" :contentMax="800">
+	<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+		<MkSpacer v-if="tab === 'note'" key="note" :contentMax="800">
 			<div v-if="notesSearchAvailable">
 				<XNote/>
 			</div>
@ -16,9 +17,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</MkSpacer>

-	<MkSpacer v-else-if="tab === 'user'" :contentMax="800">
+		<MkSpacer v-else-if="tab === 'user'" key="user" :contentMax="800">
 			<XUser/>
 		</MkSpacer>
+	</MkHorizontalSwipe>
 </MkStickyContainer>
 </template>

@ -29,6 +31,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { $i } from '@/account.js';
 import { instance } from '@/instance.js';
 import MkInfo from '@/components/MkInfo.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';

 const XNote = defineAsyncComponent(() => import('./search.note.vue'));
 const XUser = defineAsyncComponent(() => import('./search.user.vue'));
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@ -155,6 +155,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="enableInfiniteScroll">{{ i18n.ts.enableInfiniteScroll }}</MkSwitch>
 				<MkSwitch v-model="keepScreenOn">{{ i18n.ts.keepScreenOn }}</MkSwitch>
 				<MkSwitch v-model="disableStreamingTimeline">{{ i18n.ts.disableStreamingTimeline }}</MkSwitch>
+				<MkSwitch v-model="enableHorizontalSwipe">{{ i18n.ts.enableHorizontalSwipe }}</MkSwitch>
 			</div>
 			<MkSelect v-model="serverDisconnectedBehavior">
 				<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
@ -296,6 +297,7 @@ const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
 const disableStreamingTimeline = computed(defaultStore.makeGetterSetter('disableStreamingTimeline'));
 const useGroupedNotifications = computed(defaultStore.makeGetterSetter('useGroupedNotifications'));
 const enableSeasonalScreenEffect = computed(defaultStore.makeGetterSetter('enableSeasonalScreenEffect'));
+const enableHorizontalSwipe = computed(defaultStore.makeGetterSetter('enableHorizontalSwipe'));

 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@ -7,12 +7,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/></template>
 	<MkSpacer :contentMax="800">
-		<div ref="rootEl" v-hotkey.global="keymap">
+		<MkHorizontalSwipe v-model:tab="src" :tabs="$i ? headerTabs : headerTabsWhenNotLogin">
+			<div :key="src + withRenotes + withReplies + onlyFiles" ref="rootEl" v-hotkey.global="keymap">
 				<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);"/>
-
 				<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
 				<div :class="$style.tl">
 					<MkTimeline
@ -28,6 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					/>
 				</div>
 			</div>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@ -38,6 +39,7 @@ 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 MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { scroll } from '@/scripts/scroll.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
@ -69,7 +71,9 @@ const withRenotes = ref(true);
 const withReplies = ref($i ? defaultStore.state.tlWithReplies : false);
 const onlyFiles = ref(false);

-watch(src, () => queue.value = 0);
+watch(src, () => {
+	queue.value = 0;
+});

 watch(withReplies, (x) => {
 	if ($i) defaultStore.set('tlWithReplies', x);
--- a/packages/frontend/src/pages/user/index.vue
+++ b/packages/frontend/src/pages/user/index.vue
@ -8,19 +8,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<div>
 		<div v-if="user">
-			<XHome v-if="tab === 'home'" :user="user"/>
-			<MkSpacer v-else-if="tab === 'notes'" :contentMax="800" style="padding-top: 0">
+			<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+				<XHome v-if="tab === 'home'" key="home" :user="user"/>
+				<MkSpacer v-else-if="tab === 'notes'" key="notes" :contentMax="800" style="padding-top: 0">
 					<XTimeline :user="user"/>
 				</MkSpacer>
-			<XActivity v-else-if="tab === 'activity'" :user="user"/>
-			<XAchievements v-else-if="tab === 'achievements'" :user="user"/>
-			<XReactions v-else-if="tab === 'reactions'" :user="user"/>
-			<XClips v-else-if="tab === 'clips'" :user="user"/>
-			<XLists v-else-if="tab === 'lists'" :user="user"/>
-			<XPages v-else-if="tab === 'pages'" :user="user"/>
-			<XFlashs v-else-if="tab === 'flashs'" :user="user"/>
-			<XGallery v-else-if="tab === 'gallery'" :user="user"/>
-			<XRaw v-else-if="tab === 'raw'" :user="user"/>
+				<XActivity v-else-if="tab === 'activity'" key="activity" :user="user"/>
+				<XAchievements v-else-if="tab === 'achievements'" key="achievements" :user="user"/>
+				<XReactions v-else-if="tab === 'reactions'" key="reactions" :user="user"/>
+				<XClips v-else-if="tab === 'clips'" key="clips" :user="user"/>
+				<XLists v-else-if="tab === 'lists'" key="lists" :user="user"/>
+				<XPages v-else-if="tab === 'pages'" key="pages" :user="user"/>
+				<XFlashs v-else-if="tab === 'flashs'" key="flashs" :user="user"/>
+				<XGallery v-else-if="tab === 'gallery'" key="gallery" :user="user"/>
+				<XRaw v-else-if="tab === 'raw'" key="raw" :user="user"/>
+			</MkHorizontalSwipe>
 		</div>
 		<MkError v-else-if="error" @retry="fetchUser()"/>
 		<MkLoading v-else/>
@ -36,6 +38,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';

 const XHome = defineAsyncComponent(() => import('./home.vue'));
 const XTimeline = defineAsyncComponent(() => import('./index.timeline.vue'));
@ -57,6 +60,7 @@ const props = withDefaults(defineProps<{
 });

 const tab = ref(props.page);
+
 const user = ref<null | Misskey.entities.UserDetailed>(null);
 const error = ref<any>(null);

--- a/packages/frontend/src/scripts/i18n.ts
+++ b/packages/frontend/src/scripts/i18n.ts
@ -2,33 +2,114 @@
 * SPDX-FileCopyrightText: syuilo and other misskey contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 */
+import type { ILocale, ParameterizedString } from '../../../../locales/index.js';

-export class I18n<T extends Record<string, any>> {
-	public ts: T;
+type FlattenKeys<T extends ILocale, TPrediction> = keyof {
+	[K in keyof T as T[K] extends ILocale
+		? FlattenKeys<T[K], TPrediction> extends infer C extends string
+			? `${K & string}.${C}`
+			: never
+		: T[K] extends TPrediction
+			? K
+			: never]: T[K];
+};

-	constructor(locale: T) {
-		this.ts = locale;
+type ParametersOf<T extends ILocale, TKey extends FlattenKeys<T, ParameterizedString<string>>> = T extends ILocale
+	? TKey extends `${infer K}.${infer C}`
+		// @ts-expect-error -- C は明らかに FlattenKeys<T[K], ParameterizedString<string>> になるが、型システムはここでは TKey がドット区切りであることのコンテキストを持たないので、型システムに合法にて示すことはできない。
+		? ParametersOf<T[K], C>
+		: TKey extends keyof T
+			? T[TKey] extends ParameterizedString<infer P>
+				? P
+				: never
+			: never
+	: never;

+type Ts<T extends ILocale> = {
+	readonly [K in keyof T as T[K] extends ParameterizedString<string> ? never : K]: T[K] extends ILocale ? Ts<T[K]> : string;
+};
+
+export class I18n<T extends ILocale> {
+	constructor(private locale: T) {
 		//#region BIND
 		this.t = this.t.bind(this);
 		//#endregion
 	}

-	// string にしているのは、ドット区切りでのパス指定を許可するため
-	// なるべくこのメソッド使うよりもlocale直接参照の方がvueのキャッシュ効いてパフォーマンスが良いかも
-	public t(key: string, args?: Record<string, string | number>): string {
-		try {
-			let str = key.split('.').reduce((o, i) => o[i], this.ts) as unknown as string;
+	public get ts(): Ts<T> {
+		if (_DEV_) {
+			class Handler<TTarget extends object> implements ProxyHandler<TTarget> {
+				get(target: TTarget, p: string | symbol): unknown {
+					const value = target[p as keyof TTarget];

-			if (args) {
-				for (const [k, v] of Object.entries(args)) {
-					str = str.replace(`{${k}}`, v.toString());
+					if (typeof value === 'object') {
+						// eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- 実際には null がくることはないので。
+						return new Proxy(value!, new Handler<TTarget[keyof TTarget] & object>());
+					}
+
+					if (typeof value === 'string') {
+						const parameters = Array.from(value.matchAll(/\{(\w+)\}/g)).map(([, parameter]) => parameter);
+
+						if (parameters.length) {
+							console.error(`Missing locale parameters: ${parameters.join(', ')} at ${String(p)}`);
+						}
+
+						return value;
+					}
+
+					console.error(`Unexpected locale key: ${String(p)}`);
+
+					return p;
 				}
 			}
-			return str;
-		} catch (err) {
-			console.warn(`missing localization '${key}'`);
+
+			return new Proxy(this.locale, new Handler()) as Ts<T>;
+		}
+
+		return this.locale as Ts<T>;
+	}
+
+	/**
+	 * @deprecated なるべくこのメソッド使うよりも locale 直接参照の方が vue のキャッシュ効いてパフォーマンスが良いかも
+	 */
+	public t<TKey extends FlattenKeys<T, string>>(key: TKey): string;
+	public t<TKey extends FlattenKeys<T, ParameterizedString<string>>>(key: TKey, args: { readonly [_ in ParametersOf<T, TKey>]: string | number }): string;
+	public t(key: string, args?: { readonly [_: string]: string | number }) {
+		let str: string | ParameterizedString<string> | ILocale = this.locale;
+
+		for (const k of key.split('.')) {
+			str = str[k];
+
+			if (_DEV_) {
+				if (typeof str === 'undefined') {
+					console.error(`Unexpected locale key: ${key}`);
 					return key;
 				}
 			}
 		}
+
+		if (args) {
+			if (_DEV_) {
+				const missing = Array.from((str as string).matchAll(/\{(\w+)\}/g), ([, parameter]) => parameter).filter(parameter => !Object.hasOwn(args, parameter));
+
+				if (missing.length) {
+					console.error(`Missing locale parameters: ${missing.join(', ')} at ${key}`);
+				}
+			}
+
+			for (const [k, v] of Object.entries(args)) {
+				const search = `{${k}}`;
+
+				if (_DEV_) {
+					if (!(str as string).includes(search)) {
+						console.error(`Unexpected locale parameter: ${k} at ${key}`);
+					}
+				}
+
+				str = (str as string).replace(search, v.toString());
+			}
+		}
+
+		return str;
+	}
+}
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@ -427,6 +427,10 @@ export const defaultStore = markRaw(new Storage('base', {
 			sfxVolume: 1,
 		},
 	},
+	enableHorizontalSwipe: {
+		where: 'device',
+		default: true,
+	},

 	sound_masterVolume: {
 		where: 'device',