Merge tag '2023.11.0' into merge-upstream

2023-11-06 06:42:28 +09:00
parent 9fb3966b53 0c2dd33593
commit 2bc887a6c5
301 changed files with 9351 additions and 3283 deletions
--- a/packages/frontend/src/pages/about-misskey.vue
+++ b/packages/frontend/src/pages/about-misskey.vue
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkButton primary rounded inline @click="iLoveMisskey">I <Mfm text="$[jelly ❤]"/> #Misskey</MkButton>
 				</div>
 				<FormSection>
-					<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 }}
@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</FormSection>
 				<FormSection>
-					<template #label>{{ i18n.ts._aboutMisskey.contributors }}</template>
+					<template #label>{{ i18n.ts._aboutMisskey.projectMembers }}</template>
 					<div :class="$style.contributors">
 						<a href="https://github.com/syuilo" target="_blank" :class="$style.contributor">
 							<img src="https://avatars.githubusercontent.com/u/4439005?v=4" :class="$style.contributorAvatar">
@@ -61,20 +61,47 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<img src="https://avatars.githubusercontent.com/u/20679825?v=4" :class="$style.contributorAvatar">
 							<span :class="$style.contributorUsername">@acid-chicken</span>
 						</a>
-						<a href="https://github.com/rinsuki" target="_blank" :class="$style.contributor">
-							<img src="https://avatars.githubusercontent.com/u/6533808?v=4" :class="$style.contributorAvatar">
-							<span :class="$style.contributorUsername">@rinsuki</span>
+						<a href="https://github.com/kakkokari-gtyih" target="_blank" :class="$style.contributor">
+							<img src="https://avatars.githubusercontent.com/u/67428053?v=4" :class="$style.contributorAvatar">
+							<span :class="$style.contributorUsername">@kakkokari-gtyih</span>
 						</a>
+						<a href="https://github.com/taichanNE30" target="_blank" :class="$style.contributor">
+							<img src="https://avatars.githubusercontent.com/u/40626578?v=4" :class="$style.contributorAvatar">
+							<span :class="$style.contributorUsername">@taichanNE30</span>
+						</a>
+					</div>
+				</FormSection>
+				<FormSection>
+					<template #label>{{ i18n.ts._aboutMisskey.contributors }}</template>
+					<div :class="$style.contributors" style="margin-bottom: 8px;">
 						<a href="https://github.com/mei23" target="_blank" :class="$style.contributor">
 							<img src="https://avatars.githubusercontent.com/u/30769358?v=4" :class="$style.contributorAvatar">
 							<span :class="$style.contributorUsername">@mei23</span>
 						</a>
+						<a href="https://github.com/rinsuki" target="_blank" :class="$style.contributor">
+							<img src="https://avatars.githubusercontent.com/u/6533808?v=4" :class="$style.contributorAvatar">
+							<span :class="$style.contributorUsername">@rinsuki</span>
+						</a>
 						<a href="https://github.com/robflop" target="_blank" :class="$style.contributor">
 							<img src="https://avatars.githubusercontent.com/u/8159402?v=4" :class="$style.contributorAvatar">
 							<span :class="$style.contributorUsername">@robflop</span>
 						</a>
 					</div>
-					<template #caption><MkLink url="https://github.com/misskey-dev/misskey/graphs/contributors">{{ i18n.ts._aboutMisskey.allContributors }}</MkLink></template>
+					<MkLink url="https://github.com/misskey-dev/misskey/graphs/contributors">{{ i18n.ts._aboutMisskey.allContributors }}</MkLink>
+				</FormSection>
+				<FormSection>
+					<template #label>Special thanks</template>
+					<div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));grid-gap:24px;align-items:center;">
+						<div>
+							<a style="display: inline-block;" class="masknetwork" title="Mask Network" href="https://mask.io/" target="_blank"><img style="width: 100%;" src="https://misskey-hub.net/sponsors/masknetwork.png" alt="Mask Network"></a>
+						</div>
+						<div>
+							<a style="display: inline-block;" class="xserver" title="XServer" href="https://www.xserver.ne.jp/" target="_blank"><img style="width: 100%;" src="https://misskey-hub.net/sponsors/xserver.png" alt="XServer"></a>
+						</div>
+						<div>
+							<a style="display: inline-block;" class="skeb" title="Skeb" href="https://skeb.jp/" target="_blank"><img style="width: 100%;" src="https://misskey-hub.net/sponsors/skeb.svg" alt="Skeb"></a>
+						</div>
+					</div>
 				</FormSection>
 				<FormSection>
 					<template #label><Mfm text="$[jelly ❤]"/> {{ i18n.ts._aboutMisskey.patrons }}</template>
@@ -89,20 +116,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 					<p>{{ i18n.ts._aboutMisskey.morePatrons }}</p>
 				</FormSection>
-				<FormSection>
-					<template #label>Special thanks</template>
-					<div class="_gaps" style="text-align: center;">
-						<div>
-							<a style="display: inline-block;" class="masknetwork" title="Mask Network" href="https://mask.io/" target="_blank"><img width="180" src="https://misskey-hub.net/sponsors/masknetwork.png" alt="Mask Network"></a>
-						</div>
-						<div>
-							<a style="display: inline-block;" class="skeb" title="Skeb" href="https://skeb.jp/" target="_blank"><img width="180" src="https://misskey-hub.net/sponsors/skeb.svg" alt="Skeb"></a>
-						</div>
-						<div>
-							<a style="display: inline-block;" class="dcadvirth" title="DC Advirth" href="https://www.dotchain.ltd/advirth" target="_blank"><img width="100" src="https://misskey-hub.net/sponsors/dcadvirth.png" alt="DC Advirth"></a>
-						</div>
-					</div>
-				</FormSection>
 			</div>
 		</MkSpacer>
 	</div>
@@ -294,6 +307,7 @@ const patrons = [
 	'美少女JKぐーちゃん',
 	'てば',
 	'たっくん',
+	'SHO SEKIGUCHI',
 ];

 let thereIsTreasure = $ref($i && !claimedAchievements.includes('foundTreasure'));
--- a/packages/frontend/src/pages/about.emojis.vue
+++ b/packages/frontend/src/pages/about.emojis.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkButton v-if="$i && ($i.isModerator || $i.policies.canManageCustomEmojis)" primary link to="/custom-emojis-manager">{{ i18n.ts.manageCustomEmojis }}</MkButton>

 	<div class="query">
-		<MkInput v-model="q" class="" :placeholder="i18n.ts.search">
+		<MkInput v-model="q" class="" :placeholder="i18n.ts.search" autocapitalize="off">
 			<template #prefix><i class="ti ti-search"></i></template>
 		</MkInput>

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

 <template>
-<div>
+<div class="_gaps">
 	<div>
 		<MkInput v-model="host" :debounce="true" class="">
 			<template #prefix><i class="ti ti-search"></i></template>
--- 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/admin/ads.vue
+++ b/packages/frontend/src/pages/admin/ads.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkStickyContainer>
 	<template #header>
-		<XHeader :actions="headerActions" :tabs="headerTabs" />
+		<XHeader :actions="headerActions" :tabs="headerTabs"/>
 	</template>
 	<MkSpacer :contentMax="900">
 		<MkSwitch :modelValue="publishing" @update:modelValue="onChangePublishing">
@@ -14,11 +14,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkSwitch>
 		<div>
 			<div v-for="ad in ads" class="_panel _gaps_m" :class="$style.ad">
-				<MkAd v-if="ad.url" :specify="ad" />
+				<MkAd v-if="ad.url" :specify="ad"/>
 				<MkInput v-model="ad.url" type="url">
 					<template #label>URL</template>
 				</MkInput>
-				<MkInput v-model="ad.imageUrl">
+				<MkInput v-model="ad.imageUrl" type="url">
 					<template #label>{{ i18n.ts.imageUrl }}</template>
 				</MkInput>
 				<MkRadios v-model="ad.place">
@@ -51,8 +51,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<span>
 						{{ i18n.ts._ad.timezoneinfo }}
 						<div v-for="(day, index) in daysOfWeek" :key="index">
-							<input :id="`ad${ad.id}-${index}`" type="checkbox" :checked="(ad.dayOfWeek & (1 << index)) !== 0"
-								@change="toggleDayOfWeek(ad, index)">
+							<input
+								:id="`ad${ad.id}-${index}`" type="checkbox" :checked="(ad.dayOfWeek & (1 << index)) !== 0"
+								@change="toggleDayOfWeek(ad, index)"
+							>
 							<label :for="`ad${ad.id}-${index}`">{{ day }}</label>
 						</div>
 					</span>
@@ -61,9 +63,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #label>{{ i18n.ts.memo }}</template>
 				</MkTextarea>
 				<div class="buttons">
-					<MkButton class="button" inline primary style="margin-right: 12px;" @click="save(ad)"><i
-							class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-					<MkButton class="button" inline danger @click="remove(ad)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}
+					<MkButton class="button" inline primary style="margin-right: 12px;" @click="save(ad)">
+						<i
+							class="ti ti-device-floppy"
+						></i> {{ i18n.ts.save }}
+					</MkButton>
+					<MkButton class="button" inline danger @click="remove(ad)">
+						<i class="ti ti-trash"></i> {{ i18n.ts.remove }}
 					</MkButton>
 				</div>
 			</div>
@@ -115,6 +121,7 @@ const onChangePublishing = (v) => {
 	publishing = v;
 	refresh();
 };
+
 // 選択された曜日(index)のビットフラグを操作する
 function toggleDayOfWeek(ad, index) {
 	ad.dayOfWeek ^= 1 << index;
@@ -187,6 +194,7 @@ function save(ad) {
 		});
 	}
 }
+
 function more() {
 	os.api('admin/ad/list', { untilId: ads.reduce((acc, ad) => ad.id != null ? ad : acc).id, publishing: publishing }).then(adsResponse => {
 		ads = ads.concat(adsResponse.map(r => {
--- a/packages/frontend/src/pages/admin/announcements.vue
+++ b/packages/frontend/src/pages/admin/announcements.vue
@@ -43,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkTextarea v-model="announcement.text">
 						<template #label>{{ i18n.ts.text }}</template>
 					</MkTextarea>
-					<MkInput v-model="announcement.imageUrl">
+					<MkInput v-model="announcement.imageUrl" type="url">
 						<template #label>{{ i18n.ts.imageUrl }}</template>
 					</MkInput>
 					<MkRadios v-model="announcement.icon">
@@ -59,9 +59,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<option value="banner">{{ i18n.ts.banner }}</option>
 						<option value="dialog">{{ i18n.ts.dialog }}</option>
 					</MkRadios>
+					<MkInfo v-if="announcement.display === 'dialog'" warn>{{ i18n.ts._announcement.dialogAnnouncementUxWarn }}</MkInfo>
 					<MkSwitch v-model="announcement.forExistingUsers" :helpText="i18n.ts._announcement.forExistingUsersDescription">
 						{{ i18n.ts._announcement.forExistingUsers }}
 					</MkSwitch>
+					<MkSwitch v-model="announcement.silence" :helpText="i18n.ts._announcement.silenceDescription">
+						{{ i18n.ts._announcement.silence }}
+					</MkSwitch>
 					<MkSwitch v-model="announcement.needConfirmationToRead" :helpText="i18n.ts._announcement.needConfirmationToReadDescription">
 						{{ i18n.ts._announcement.needConfirmationToRead }}
 					</MkSwitch>
@@ -140,6 +144,7 @@ function add() {
 		icon: 'info',
 		display: 'normal',
 		forExistingUsers: false,
+		silence: false,
 		needConfirmationToRead: false,
 		closeDuration: 0,
 		displayOrder: 0,
--- a/packages/frontend/src/pages/admin/branding.vue
+++ b/packages/frontend/src/pages/admin/branding.vue
@@ -10,12 +10,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
 			<FormSuspense :p="init">
 				<div class="_gaps_m">
-					<MkInput v-model="iconUrl">
+					<MkInput v-model="iconUrl" type="url">
 						<template #prefix><i class="ti ti-link"></i></template>
 						<template #label>{{ i18n.ts._serverSettings.iconUrl }}</template>
 					</MkInput>

-					<MkInput v-model="app192IconUrl">
+					<MkInput v-model="app192IconUrl" type="url">
 						<template #prefix><i class="ti ti-link"></i></template>
 						<template #label>{{ i18n.ts._serverSettings.iconUrl }} (App/192px)</template>
 						<template #caption>
@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</template>
 					</MkInput>

-					<MkInput v-model="app512IconUrl">
+					<MkInput v-model="app512IconUrl" type="url">
 						<template #prefix><i class="ti ti-link"></i></template>
 						<template #label>{{ i18n.ts._serverSettings.iconUrl }} (App/512px)</template>
 						<template #caption>
@@ -37,27 +37,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</template>
 					</MkInput>

-					<MkInput v-model="bannerUrl">
+					<MkInput v-model="bannerUrl" type="url">
 						<template #prefix><i class="ti ti-link"></i></template>
 						<template #label>{{ i18n.ts.bannerUrl }}</template>
 					</MkInput>

-					<MkInput v-model="backgroundImageUrl">
+					<MkInput v-model="backgroundImageUrl" type="url">
 						<template #prefix><i class="ti ti-link"></i></template>
 						<template #label>{{ i18n.ts.backgroundImageUrl }}</template>
 					</MkInput>

-					<MkInput v-model="notFoundImageUrl">
+					<MkInput v-model="notFoundImageUrl" type="url">
 						<template #prefix><i class="ti ti-link"></i></template>
 						<template #label>{{ i18n.ts.notFoundDescription }}</template>
 					</MkInput>

-					<MkInput v-model="infoImageUrl">
+					<MkInput v-model="infoImageUrl" type="url">
 						<template #prefix><i class="ti ti-link"></i></template>
 						<template #label>{{ i18n.ts.nothing }}</template>
 					</MkInput>

-					<MkInput v-model="serverErrorImageUrl">
+					<MkInput v-model="serverErrorImageUrl" type="url">
 						<template #prefix><i class="ti ti-link"></i></template>
 						<template #label>{{ i18n.ts.somethingHappened }}</template>
 					</MkInput>
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -115,6 +115,11 @@ const menuDef = $computed(() => [{
 		text: i18n.ts.customEmojis,
 		to: '/admin/emojis',
 		active: currentPage?.route.name === 'emojis',
+	}, {
+		icon: 'ti ti-sparkles',
+		text: i18n.ts.avatarDecorations,
+		to: '/admin/avatar-decorations',
+		active: currentPage?.route.name === 'avatarDecorations',
 	}, {
 		icon: 'ti ti-whirl',
 		text: i18n.ts.federation,
--- a/packages/frontend/src/pages/admin/moderation.vue
+++ b/packages/frontend/src/pages/admin/moderation.vue
@@ -20,12 +20,12 @@ SPDX-License-Identifier: AGPL-3.0-only

 					<FormLink to="/admin/server-rules">{{ i18n.ts.serverRules }}</FormLink>

-					<MkInput v-model="tosUrl">
+					<MkInput v-model="tosUrl" type="url">
 						<template #prefix><i class="ti ti-link"></i></template>
 						<template #label>{{ i18n.ts.tosUrl }}</template>
 					</MkInput>

-					<MkInput v-model="privacyPolicyUrl">
+					<MkInput v-model="privacyPolicyUrl" type="url">
 						<template #prefix><i class="ti ti-link"></i></template>
 						<template #label>{{ i18n.ts.privacyPolicyUrl }}</template>
 					</MkInput>
--- a/packages/frontend/src/pages/admin/modlog.ModLog.vue
+++ b/packages/frontend/src/pages/admin/modlog.ModLog.vue
@@ -8,9 +8,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #label>
 		<b
 			:class="{
-				[$style.logGreen]: ['createRole', 'addCustomEmoji', 'createGlobalAnnouncement', 'createUserAnnouncement', 'createAd', 'createInvitation'].includes(log.type),
+				[$style.logGreen]: ['createRole', 'addCustomEmoji', 'createGlobalAnnouncement', 'createUserAnnouncement', 'createAd', 'createInvitation', 'createAvatarDecoration'].includes(log.type),
 				[$style.logYellow]: ['markSensitiveDriveFile', 'resetPassword'].includes(log.type),
-				[$style.logRed]: ['suspend', 'deleteRole', 'suspendRemoteInstance', 'deleteGlobalAnnouncement', 'deleteUserAnnouncement', 'deleteCustomEmoji', 'deleteNote', 'deleteDriveFile', 'deleteAd'].includes(log.type)
+				[$style.logRed]: ['suspend', 'deleteRole', 'suspendRemoteInstance', 'deleteGlobalAnnouncement', 'deleteUserAnnouncement', 'deleteCustomEmoji', 'deleteNote', 'deleteDriveFile', 'deleteAd', 'deleteAvatarDecoration'].includes(log.type)
 			}"
 		>{{ i18n.ts._moderationLogTypes[log.type] }}</b>
 		<span v-if="log.type === 'updateUserNote'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span>
@@ -37,6 +37,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<span v-else-if="log.type === 'deleteUserAnnouncement'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span>
 		<span v-else-if="log.type === 'deleteNote'">: @{{ log.info.noteUserUsername }}{{ log.info.noteUserHost ? '@' + log.info.noteUserHost : '' }}</span>
 		<span v-else-if="log.type === 'deleteDriveFile'">: @{{ log.info.fileUserUsername }}{{ log.info.fileUserHost ? '@' + log.info.fileUserHost : '' }}</span>
+		<span v-else-if="log.type === 'createAvatarDecoration'">: {{ log.info.avatarDecoration.name }}</span>
+		<span v-else-if="log.type === 'updateAvatarDecoration'">: {{ log.info.before.name }}</span>
+		<span v-else-if="log.type === 'deleteAvatarDecoration'">: {{ log.info.avatarDecoration.name }}</span>
 	</template>
 	<template #icon>
 		<MkAvatar :user="log.user" :class="$style.avatar"/>
@@ -102,6 +105,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<CodeDiff :context="5" :hideHeader="true" :oldString="JSON5.stringify(log.info.before, null, '\t')" :newString="JSON5.stringify(log.info.after, null, '\t')" language="javascript" maxHeight="300px"/>
 			</div>
 		</template>
+		<template v-else-if="log.type === 'updateAvatarDecoration'">
+			<div :class="$style.diff">
+				<CodeDiff :context="5" :hideHeader="true" :oldString="JSON5.stringify(log.info.before, null, '\t')" :newString="JSON5.stringify(log.info.after, null, '\t')" language="javascript" maxHeight="300px"/>
+			</div>
+		</template>

 		<details>
 			<summary>raw</summary>
--- a/packages/frontend/src/pages/admin/object-storage.vue
+++ b/packages/frontend/src/pages/admin/object-storage.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="useObjectStorage">{{ i18n.ts.useObjectStorage }}</MkSwitch>

 				<template v-if="useObjectStorage">
-					<MkInput v-model="objectStorageBaseUrl" :placeholder="'https://example.com'">
+					<MkInput v-model="objectStorageBaseUrl" :placeholder="'https://example.com'" type="url">
 						<template #label>{{ i18n.ts.objectStorageBaseUrl }}</template>
 						<template #caption>{{ i18n.ts.objectStorageBaseUrlDesc }}</template>
 					</MkInput>
--- a/packages/frontend/src/pages/admin/roles.editor.vue
+++ b/packages/frontend/src/pages/admin/roles.editor.vue
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<template #label>{{ i18n.ts.color }}</template>
 	</MkColorInput>

-	<MkInput v-model="role.iconUrl">
+	<MkInput v-model="role.iconUrl" type="url">
 		<template #label>{{ i18n.ts._role.iconUrl }}</template>
 	</MkInput>

@@ -319,6 +319,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</MkFolder>

+			<MkFolder v-if="matchQuery([i18n.ts._role._options.canManageAvatarDecorations, 'canManageAvatarDecorations'])">
+				<template #label>{{ i18n.ts._role._options.canManageAvatarDecorations }}</template>
+				<template #suffix>
+					<span v-if="role.policies.canManageAvatarDecorations.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
+					<span v-else>{{ role.policies.canManageAvatarDecorations.value ? i18n.ts.yes : i18n.ts.no }}</span>
+					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canManageAvatarDecorations)"></i></span>
+				</template>
+				<div class="_gaps">
+					<MkSwitch v-model="role.policies.canManageAvatarDecorations.useDefault" :readonly="readonly">
+						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
+					</MkSwitch>
+					<MkSwitch v-model="role.policies.canManageAvatarDecorations.value" :disabled="role.policies.canManageAvatarDecorations.useDefault" :readonly="readonly">
+						<template #label>{{ i18n.ts.enable }}</template>
+					</MkSwitch>
+					<MkRange v-model="role.policies.canManageAvatarDecorations.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
+				</div>
+			</MkFolder>
+			
 			<MkFolder v-if="matchQuery([i18n.ts._role._options.canSearchNotes, 'canSearchNotes'])">
 				<template #label>{{ i18n.ts._role._options.canSearchNotes }}</template>
 				<template #suffix>
--- a/packages/frontend/src/pages/admin/roles.vue
+++ b/packages/frontend/src/pages/admin/roles.vue
@@ -103,6 +103,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</MkInput>
 						</MkFolder>

+						<MkFolder v-if="matchQuery([i18n.ts._role._options.canManageAvatarDecorations, 'canManageAvatarDecorations'])">
+							<template #label>{{ i18n.ts._role._options.canManageAvatarDecorations }}</template>
+							<template #suffix>{{ policies.canManageAvatarDecorations ? i18n.ts.yes : i18n.ts.no }}</template>
+							<MkSwitch v-model="policies.canManageAvatarDecorations">
+								<template #label>{{ i18n.ts.enable }}</template>
+							</MkSwitch>
+						</MkFolder>
+
 						<MkFolder v-if="matchQuery([i18n.ts._role._options.canManageCustomEmojis, 'canManageCustomEmojis'])">
 							<template #label>{{ i18n.ts._role._options.canManageCustomEmojis }}</template>
 							<template #suffix>{{ policies.canManageCustomEmojis ? i18n.ts.yes : i18n.ts.no }}</template>
--- a/packages/frontend/src/pages/admin/settings.vue
+++ b/packages/frontend/src/pages/admin/settings.vue
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</MkInput>
 					</FormSplit>

-					<MkInput v-model="impressumUrl">
+					<MkInput v-model="impressumUrl" type="url">
 						<template #label>{{ i18n.ts.impressumUrl }}</template>
 						<template #prefix><i class="ti ti-link"></i></template>
 						<template #caption>{{ i18n.ts.impressumDescription }}</template>
@@ -87,9 +87,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</FormSection>

 					<FormSection>
-						<template #label>Timeline caching</template>
+						<template #label>Misskey® Fan-out Timeline Technology™ (FTT)</template>

 						<div class="_gaps_m">
+							<MkSwitch v-model="enableFanoutTimeline">
+								<template #label>{{ i18n.ts.enable }}</template>
+								<template #caption>{{ i18n.ts._serverSettings.fanoutTimelineDescription }}</template>
+							</MkSwitch>
+
 							<MkInput v-model="perLocalUserUserTimelineCacheMax" type="number">
 								<template #label>perLocalUserUserTimelineCacheMax</template>
 							</MkInput>
@@ -165,6 +170,7 @@ let cacheRemoteSensitiveFiles: boolean = $ref(false);
 let enableServiceWorker: boolean = $ref(false);
 let swPublicKey: any = $ref(null);
 let swPrivateKey: any = $ref(null);
+let enableFanoutTimeline: boolean = $ref(false);
 let perLocalUserUserTimelineCacheMax: number = $ref(0);
 let perRemoteUserUserTimelineCacheMax: number = $ref(0);
 let perUserHomeTimelineCacheMax: number = $ref(0);
@@ -185,6 +191,7 @@ async function init(): Promise<void> {
 	enableServiceWorker = meta.enableServiceWorker;
 	swPublicKey = meta.swPublickey;
 	swPrivateKey = meta.swPrivateKey;
+	enableFanoutTimeline = meta.enableFanoutTimeline;
 	perLocalUserUserTimelineCacheMax = meta.perLocalUserUserTimelineCacheMax;
 	perRemoteUserUserTimelineCacheMax = meta.perRemoteUserUserTimelineCacheMax;
 	perUserHomeTimelineCacheMax = meta.perUserHomeTimelineCacheMax;
@@ -206,6 +213,7 @@ async function save(): void {
 		enableServiceWorker,
 		swPublicKey,
 		swPrivateKey,
+		enableFanoutTimeline,
 		perLocalUserUserTimelineCacheMax,
 		perRemoteUserUserTimelineCacheMax,
 		perUserHomeTimelineCacheMax,
--- a/packages/frontend/src/pages/announcements.vue
+++ b/packages/frontend/src/pages/announcements.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<section v-for="announcement in items" :key="announcement.id" class="_panel" :class="$style.announcement">
 					<div v-if="announcement.forYou" :class="$style.forYou"><i class="ti ti-pin"></i> {{ i18n.ts.forYou }}</div>
 					<div :class="$style.header">
-						<span v-if="$i && !announcement.isRead" style="margin-right: 0.5em;">🆕</span>
+						<span v-if="$i && !announcement.silence && !announcement.isRead" style="margin-right: 0.5em;">🆕</span>
 						<span style="margin-right: 0.5em;">
 							<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
 							<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<MkTime :time="announcement.updatedAt ?? announcement.createdAt" mode="detail"/>
 						</div>
 					</div>
-					<div v-if="tab !== 'past' && $i && !announcement.isRead" :class="$style.footer">
+					<div v-if="tab !== 'past' && $i && !announcement.silence && !announcement.isRead" :class="$style.footer">
 						<MkButton primary @click="read(announcement)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
 					</div>
 				</section>
--- a/packages/frontend/src/pages/avatar-decorations.vue
+++ b/packages/frontend/src/pages/avatar-decorations.vue
@@ -0,0 +1,102 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :contentMax="900">
+		<div class="_gaps">
+			<MkFolder v-for="avatarDecoration in avatarDecorations" :key="avatarDecoration.id ?? avatarDecoration._id" :defaultOpen="avatarDecoration.id == null">
+				<template #label>{{ avatarDecoration.name }}</template>
+				<template #caption>{{ avatarDecoration.description }}</template>
+
+				<div class="_gaps_m">
+					<MkInput v-model="avatarDecoration.name">
+						<template #label>{{ i18n.ts.name }}</template>
+					</MkInput>
+					<MkTextarea v-model="avatarDecoration.description">
+						<template #label>{{ i18n.ts.description }}</template>
+					</MkTextarea>
+					<MkInput v-model="avatarDecoration.url">
+						<template #label>{{ i18n.ts.imageUrl }}</template>
+					</MkInput>
+					<div class="buttons _buttons">
+						<MkButton class="button" inline primary @click="save(avatarDecoration)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+						<MkButton v-if="avatarDecoration.id != null" class="button" inline danger @click="del(avatarDecoration)"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
+					</div>
+				</div>
+			</MkFolder>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/MkInput.vue';
+import MkTextarea from '@/components/MkTextarea.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkRadios from '@/components/MkRadios.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import * as os from '@/os.js';
+import { i18n } from '@/i18n.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+import MkFolder from '@/components/MkFolder.vue';
+
+let avatarDecorations: any[] = $ref([]);
+
+function add() {
+	avatarDecorations.unshift({
+		_id: Math.random().toString(36),
+		id: null,
+		name: '',
+		description: '',
+		url: '',
+	});
+}
+
+function del(avatarDecoration) {
+	os.confirm({
+		type: 'warning',
+		text: i18n.t('deleteAreYouSure', { x: avatarDecoration.name }),
+	}).then(({ canceled }) => {
+		if (canceled) return;
+		avatarDecorations = avatarDecorations.filter(x => x !== avatarDecoration);
+		os.api('admin/avatar-decorations/delete', avatarDecoration);
+	});
+}
+
+async function save(avatarDecoration) {
+	if (avatarDecoration.id == null) {
+		await os.apiWithDialog('admin/avatar-decorations/create', avatarDecoration);
+		load();
+	} else {
+		os.apiWithDialog('admin/avatar-decorations/update', avatarDecoration);
+	}
+}
+
+function load() {
+	os.api('admin/avatar-decorations/list').then(_avatarDecorations => {
+		avatarDecorations = _avatarDecorations;
+	});
+}
+
+load();
+
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'ti ti-plus',
+	text: i18n.ts.add,
+	handler: add,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.avatarDecorations,
+	icon: 'ti ti-sparkles',
+});
+</script>
--- a/packages/frontend/src/pages/channel-editor.vue
+++ b/packages/frontend/src/pages/channel-editor.vue
@@ -24,6 +24,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #label>{{ i18n.ts.sensitive }}</template>
 			</MkSwitch>

+			<MkSwitch v-model="allowRenoteToExternal">
+				<template #label>{{ i18n.ts._channel.allowRenoteToExternal }}</template>
+			</MkSwitch>
+
 			<div>
 				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="ti ti-plus"></i> {{ i18n.ts._channel.setBanner }}</MkButton>
 				<div v-else-if="bannerUrl">
@@ -76,7 +80,7 @@ import { useRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import MkFolder from '@/components/MkFolder.vue';
-import MkSwitch from "@/components/MkSwitch.vue";
+import MkSwitch from '@/components/MkSwitch.vue';

 const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));

@@ -93,6 +97,7 @@ let bannerUrl = $ref<string | null>(null);
 let bannerId = $ref<string | null>(null);
 let color = $ref('#000');
 let isSensitive = $ref(false);
+let allowRenoteToExternal = $ref(true);
 const pinnedNotes = ref([]);

 watch(() => bannerId, async () => {
@@ -121,6 +126,7 @@ async function fetchChannel() {
 		id,
 	}));
 	color = channel.color;
+	allowRenoteToExternal = channel.allowRenoteToExternal;
 }

 fetchChannel();
@@ -150,16 +156,14 @@ function save() {
 		pinnedNoteIds: pinnedNotes.value.map(x => x.id),
 		color: color,
 		isSensitive: isSensitive,
+		allowRenoteToExternal: allowRenoteToExternal,
 	};

 	if (props.channelId) {
 		params.channelId = props.channelId;
-		os.api('channels/update', params).then(() => {
-			os.success();
-		});
+		os.apiWithDialog('channels/update', params);
 	} else {
-		os.api('channels/create', params).then(created => {
-			os.success();
+		os.apiWithDialog('channels/create', params).then(created => {
 			router.push(`/channels/${created.id}`);
 		});
 	}
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div :class="$style.bannerFade"></div>
 				</div>
 				<div v-if="channel.description" :class="$style.description">
-					<Mfm :text="channel.description" :isNote="false" :i="$i"/>
+					<Mfm :text="channel.description" :isNote="false"/>
 				</div>
 			</div>

--- a/packages/frontend/src/pages/clip.vue
+++ b/packages/frontend/src/pages/clip.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-if="clip" class="_gaps">
 			<div class="_panel">
 				<div v-if="clip.description" :class="$style.description">
-					<Mfm :text="clip.description" :isNote="false" :i="$i"/>
+					<Mfm :text="clip.description" :isNote="false"/>
 				</div>
 				<MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" asLike rounded primary @click="unfavorite()"><i class="ti ti-heart"></i><span v-if="clip.favoritedCount > 0" style="margin-left: 6px;">{{ clip.favoritedCount }}</span></MkButton>
 				<MkButton v-else v-tooltip="i18n.ts.favorite" asLike rounded @click="favorite()"><i class="ti ti-heart"></i><span v-if="clip.favoritedCount > 0" style="margin-left: 6px;">{{ clip.favoritedCount }}</span></MkButton>
--- a/packages/frontend/src/pages/custom-emojis-manager.vue
+++ b/packages/frontend/src/pages/custom-emojis-manager.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSpacer :contentMax="900">
 			<div class="ogwlenmc">
 				<div v-if="tab === 'local'" class="local">
-					<MkInput v-model="query" :debounce="true" type="search">
+					<MkInput v-model="query" :debounce="true" type="search" autocapitalize="off">
 						<template #prefix><i class="ti ti-search"></i></template>
 						<template #label>{{ i18n.ts.search }}</template>
 					</MkInput>
@@ -44,7 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only

 				<div v-else-if="tab === 'remote'" class="remote">
 					<FormSplit>
-						<MkInput v-model="queryRemote" :debounce="true" type="search">
+						<MkInput v-model="queryRemote" :debounce="true" type="search" autocapitalize="off">
 							<template #prefix><i class="ti ti-search"></i></template>
 							<template #label>{{ i18n.ts.search }}</template>
 						</MkInput>
--- 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/emoji-edit-dialog.vue
+++ b/packages/frontend/src/pages/emoji-edit-dialog.vue
@@ -31,13 +31,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</div>
 				<MkButton rounded style="margin: 0 auto;" @click="changeImage">{{ i18n.ts.selectFile }}</MkButton>
-				<MkInput v-model="name" pattern="[a-z0-9_]">
+				<MkInput v-model="name" pattern="[a-z0-9_]" autocapitalize="off">
 					<template #label>{{ i18n.ts.name }}</template>
 				</MkInput>
 				<MkInput v-model="category" :datalist="customEmojiCategories">
 					<template #label>{{ i18n.ts.category }}</template>
 				</MkInput>
-				<MkInput v-model="aliases">
+				<MkInput v-model="aliases" autocapitalize="off">
 					<template #label>{{ i18n.ts.tags }}</template>
 					<template #caption>{{ i18n.ts.setMultipleBySeparatingWithSpace }}</template>
 				</MkInput>
--- a/packages/frontend/src/pages/flash/flash.vue
+++ b/packages/frontend/src/pages/flash/flash.vue
@@ -36,7 +36,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" :inline="false" class="_monospace"/>
+					<MkCode :code="flash.script" lang="is" :inline="false" class="_monospace"/>
 				</MkFolder>
 				<div :class="$style.footer">
 					<Mfm :text="`By @${flash.user.username}`"/>
--- a/packages/frontend/src/pages/install-extentions.vue
+++ b/packages/frontend/src/pages/install-extentions.vue
@@ -0,0 +1,360 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :contentMax="500">
+		<MkLoading v-if="uiPhase === 'fetching'"/>
+		<div v-else-if="uiPhase === 'confirm' && data" class="_gaps_m" :class="$style.extInstallerRoot">
+			<div :class="$style.extInstallerIconWrapper">
+				<i v-if="data.type === 'plugin'" class="ti ti-plug"></i>
+				<i v-else-if="data.type === 'theme'" class="ti ti-palette"></i>
+				<i v-else class="ti ti-download"></i>
+			</div>
+			<h2 :class="$style.extInstallerTitle">{{ i18n.ts._externalResourceInstaller[`_${data.type}`].title }}</h2>
+			<div :class="$style.extInstallerNormDesc">{{ i18n.ts._externalResourceInstaller.checkVendorBeforeInstall }}</div>
+			<MkInfo v-if="data.type === 'plugin'" :warn="true">{{ i18n.ts._plugin.installWarn }}</MkInfo>
+			<FormSection>
+				<template #label>{{ i18n.ts._externalResourceInstaller[`_${data.type}`].metaTitle }}</template>
+				<div class="_gaps_s">
+					<FormSplit>
+						<MkKeyValue>
+							<template #key>{{ i18n.ts.name }}</template>
+							<template #value>{{ data.meta?.name }}</template>
+						</MkKeyValue>
+						<MkKeyValue>
+							<template #key>{{ i18n.ts.author }}</template>
+							<template #value>{{ data.meta?.author }}</template>
+						</MkKeyValue>
+					</FormSplit>
+					<MkKeyValue v-if="data.type === 'plugin'">
+						<template #key>{{ i18n.ts.description }}</template>
+						<template #value>{{ data.meta?.description }}</template>
+					</MkKeyValue>
+					<MkKeyValue v-if="data.type === 'plugin'">
+						<template #key>{{ i18n.ts.version }}</template>
+						<template #value>{{ data.meta?.version }}</template>
+					</MkKeyValue>
+					<MkKeyValue v-if="data.type === 'plugin'">
+						<template #key>{{ i18n.ts.permission }}</template>
+						<template #value>
+							<ul :class="$style.extInstallerKVList">
+								<li v-for="permission in data.meta?.permissions" :key="permission">{{ i18n.ts._permissions[permission] }}</li>
+							</ul>
+						</template>
+					</MkKeyValue>
+					<MkKeyValue v-if="data.type === 'theme' && data.meta?.base">
+						<template #key>{{ i18n.ts._externalResourceInstaller._meta.base }}</template>
+						<template #value>{{ i18n.ts[data.meta.base] }}</template>
+					</MkKeyValue>
+					<MkFolder>
+						<template #icon><i class="ti ti-code"></i></template>
+						<template #label>{{ i18n.ts._plugin.viewSource }}</template>
+
+						<MkCode :code="data.raw ?? ''"/>
+					</MkFolder>
+				</div>
+			</FormSection>
+			<FormSection>
+				<template #label>{{ i18n.ts._externalResourceInstaller._vendorInfo.title }}</template>
+				<div class="_gaps_s">
+					<MkKeyValue>
+						<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.endpoint }}</template>
+						<template #value><MkUrl :url="url ?? ''" :showUrlPreview="false"></MkUrl></template>
+					</MkKeyValue>
+					<MkKeyValue>
+						<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template>
+						<template #value>
+							<!--この画面が出ている時点でハッシュの検証には成功している-->
+							<i class="ti ti-check" style="color: var(--accent)"></i>
+						</template>
+					</MkKeyValue>
+				</div>
+			</FormSection>
+			<div class="_buttonsCenter">
+				<MkButton primary @click="install()"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
+			</div>
+		</div>
+		<div v-else-if="uiPhase === 'error'" class="_gaps_m" :class="[$style.extInstallerRoot, $style.error]">
+			<div :class="$style.extInstallerIconWrapper">
+				<i class="ti ti-circle-x"></i>
+			</div>
+			<h2 :class="$style.extInstallerTitle">{{ errorKV?.title }}</h2>
+			<div :class="$style.extInstallerNormDesc">{{ errorKV?.description }}</div>
+			<div class="_buttonsCenter">
+				<MkButton @click="goBack()">{{ i18n.ts.goBack }}</MkButton>
+				<MkButton @click="goToMisskey()">{{ i18n.ts.goToMisskey }}</MkButton>
+			</div>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onActivated, onDeactivated, nextTick } from 'vue';
+import MkLoading from '@/components/global/MkLoading.vue';
+import MkButton from '@/components/MkButton.vue';
+import FormSection from '@/components/form/section.vue';
+import FormSplit from '@/components/form/split.vue';
+import MkCode from '@/components/MkCode.vue';
+import MkUrl from '@/components/global/MkUrl.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import * as os from '@/os.js';
+import { AiScriptPluginMeta, parsePluginMeta, installPlugin } from '@/scripts/install-plugin.js';
+import { parseThemeCode, installTheme } from '@/scripts/install-theme.js';
+import { unisonReload } from '@/scripts/unison-reload.js';
+import { i18n } from '@/i18n.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+
+const uiPhase = ref<'fetching' | 'confirm' | 'error'>('fetching');
+const errorKV = ref<{
+	title?: string;
+	description?: string;
+}>({
+	title: '',
+	description: '',
+});
+
+const url = ref<string | null>(null);
+const hash = ref<string | null>(null);
+
+const data = ref<{
+	type: 'plugin' | 'theme';
+	raw: string;
+	meta?: {
+		// Plugin & Theme Common
+		name: string;
+		author: string;
+
+		// Plugin
+		description?: string;
+		version?: string;
+		permissions?: string[];
+		config?: Record<string, any>;
+
+		// Theme
+		base?: 'light' | 'dark';
+	};
+} | null>(null);
+
+function goBack(): void {
+	history.back();
+}
+
+function goToMisskey(): void {
+	location.href = '/';
+}
+
+async function fetch() {
+	if (!url.value || !hash.value) {
+		errorKV.value = {
+			title: i18n.ts._externalResourceInstaller._errors._invalidParams.title,
+			description: i18n.ts._externalResourceInstaller._errors._invalidParams.description,
+		};
+		uiPhase.value = 'error';
+		return;
+	}
+	const res = await os.api('fetch-external-resources', {
+		url: url.value,
+		hash: hash.value,
+	}).catch((err) => {
+		switch (err.id) {
+			case 'bb774091-7a15-4a70-9dc5-6ac8cf125856':
+				errorKV.value = {
+					title: i18n.ts._externalResourceInstaller._errors._failedToFetch.title,
+					description: i18n.ts._externalResourceInstaller._errors._failedToFetch.parseErrorDescription,
+				};
+				uiPhase.value = 'error';
+				break;
+			case '693ba8ba-b486-40df-a174-72f8279b56a4':
+				errorKV.value = {
+					title: i18n.ts._externalResourceInstaller._errors._hashUnmatched.title,
+					description: i18n.ts._externalResourceInstaller._errors._hashUnmatched.description,
+				};
+				uiPhase.value = 'error';
+				break;
+			default:
+				errorKV.value = {
+					title: i18n.ts._externalResourceInstaller._errors._failedToFetch.title,
+					description: i18n.ts._externalResourceInstaller._errors._failedToFetch.fetchErrorDescription,
+				};
+				uiPhase.value = 'error';
+				break;
+		}
+		throw new Error(err.code);
+	});
+
+	if (!res) {
+		errorKV.value = {
+			title: i18n.ts._externalResourceInstaller._errors._failedToFetch.title,
+			description: i18n.ts._externalResourceInstaller._errors._failedToFetch.fetchErrorDescription,
+		};
+		uiPhase.value = 'error';
+		return;
+	}
+
+	switch (res.type) {
+		case 'plugin':
+			try {
+				const meta = await parsePluginMeta(res.data);
+				data.value = {
+					type: 'plugin',
+					meta,
+					raw: res.data,
+				};
+			} catch (err) {
+				errorKV.value = {
+					title: i18n.ts._externalResourceInstaller._errors._pluginParseFailed.title,
+					description: i18n.ts._externalResourceInstaller._errors._pluginParseFailed.description,
+				};
+				console.error(err);
+				uiPhase.value = 'error';
+				return;
+			}
+			break;
+
+		case 'theme':
+			try {
+				const metaRaw = parseThemeCode(res.data);
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
+				const { id, props, desc: description, ...meta } = metaRaw;
+				data.value = {
+					type: 'theme',
+					meta: {
+						description,
+						...meta,
+					},
+					raw: res.data,
+				};
+			} catch (err) {
+				switch (err.message.toLowerCase()) {
+					case 'this theme is already installed':
+						errorKV.value = {
+							title: i18n.ts._externalResourceInstaller._errors._themeParseFailed.title,
+							description: i18n.ts._theme.alreadyInstalled,
+						};
+						break;
+
+					default:
+						errorKV.value = {
+							title: i18n.ts._externalResourceInstaller._errors._themeParseFailed.title,
+							description: i18n.ts._externalResourceInstaller._errors._themeParseFailed.description,
+						};
+						break;
+				}
+				console.error(err);
+				uiPhase.value = 'error';
+				return;
+			}
+			break;
+
+		default:
+			errorKV.value = {
+				title: i18n.ts._externalResourceInstaller._errors._resourceTypeNotSupported.title,
+				description: i18n.ts._externalResourceInstaller._errors._resourceTypeNotSupported.description,
+			};
+			uiPhase.value = 'error';
+			return;
+	}
+
+	uiPhase.value = 'confirm';
+}
+
+async function install() {
+	if (!data.value) return;
+
+	switch (data.value.type) {
+		case 'plugin':
+			if (!data.value.meta) return;
+			try {
+				await installPlugin(data.value.raw, data.value.meta as AiScriptPluginMeta);
+				os.success();
+				nextTick(() => {
+					unisonReload('/');
+				});
+			} catch (err) {
+				errorKV.value = {
+					title: i18n.ts._externalResourceInstaller._errors._pluginInstallFailed.title,
+					description: i18n.ts._externalResourceInstaller._errors._pluginInstallFailed.description,
+				};
+				console.error(err);
+				uiPhase.value = 'error';
+			}
+			break;
+		case 'theme':
+			if (!data.value.meta) return;
+			await installTheme(data.value.raw);
+			os.success();
+			nextTick(() => {
+				location.href = '/settings/theme';
+			});
+	}
+}
+
+onActivated(() => {
+	const urlParams = new URLSearchParams(window.location.search);
+	url.value = urlParams.get('url');
+	hash.value = urlParams.get('hash');
+	fetch();
+});
+
+onDeactivated(() => {
+	uiPhase.value = 'fetching';
+});
+
+const headerActions = computed(() => []);
+
+const headerTabs = computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts._externalResourceInstaller.title,
+	icon: 'ti ti-download',
+});
+</script>
+
+<style lang="scss" module>
+.extInstallerRoot {
+	border-radius: var(--radius);
+	background: var(--panel);
+	padding: 1.5rem;
+}
+
+.extInstallerIconWrapper {
+	width: 48px;
+	height: 48px;
+	font-size: 24px;
+	line-height: 48px;
+	text-align: center;
+	border-radius: 50%;
+	margin-left: auto;
+	margin-right: auto;
+
+	background-color: var(--accentedBg);
+	color: var(--accent);
+}
+
+.error .extInstallerIconWrapper {
+	background-color: rgba(255, 42, 42, .15);
+	color: #ff2a2a;
+}
+
+.extInstallerTitle {
+	font-size: 1.2rem;
+	text-align: center;
+	margin: 0;
+}
+
+.extInstallerNormDesc {
+	text-align: center;
+}
+
+.extInstallerKVList {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+</style>
--- a/packages/frontend/src/pages/instance-info.vue
+++ b/packages/frontend/src/pages/instance-info.vue
@@ -36,8 +36,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div class="_gaps_s">
 					<MkSwitch v-model="suspended" :disabled="!instance" @update:modelValue="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</MkSwitch>
 					<MkSwitch v-model="isBlocked" :disabled="!meta || !instance" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</MkSwitch>
-                    <MkSwitch v-model="isSilenced" :disabled="!meta || !instance" @update:modelValue="toggleSilenced">{{ i18n.ts.silenceThisInstance }}</MkSwitch>
-                    <MkButton @click="refreshMetadata"><i class="ti ti-refresh"></i> Refresh metadata</MkButton>
+					<MkSwitch v-model="isSilenced" :disabled="!meta || !instance" @update:modelValue="toggleSilenced">{{ i18n.ts.silenceThisInstance }}</MkSwitch>
+					<MkButton @click="refreshMetadata"><i class="ti ti-refresh"></i> Refresh metadata</MkButton>
 				</div>
 			</FormSection>

@@ -171,8 +171,8 @@ async function fetch(): Promise<void> {
 	});
 	suspended = instance.isSuspended;
 	isBlocked = instance.isBlocked;
-    isSilenced = instance.isSilenced;
-    faviconUrl = getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.iconUrl, 'preview');
+	isSilenced = instance.isSilenced;
+	faviconUrl = getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.iconUrl, 'preview');
 }

 async function toggleBlock(): Promise<void> {
@@ -183,14 +183,16 @@ async function toggleBlock(): Promise<void> {
 		blockedHosts: isBlocked ? meta.blockedHosts.concat([host]) : meta.blockedHosts.filter(x => x !== host),
 	});
 }
+
 async function toggleSilenced(): Promise<void> {
-    if (!meta) throw new Error('No meta?');
-    if (!instance) throw new Error('No instance?');
-    const { host } = instance;
-    await os.api('admin/update-meta', {
-        silencedHosts: isSilenced ? meta.silencedHosts.concat([host]) : meta.silencedHosts.filter(x => x !== host),
-    });
+	if (!meta) throw new Error('No meta?');
+	if (!instance) throw new Error('No instance?');
+	const { host } = instance;
+	await os.api('admin/update-meta', {
+		silencedHosts: isSilenced ? meta.silencedHosts.concat([host]) : meta.silencedHosts.filter(x => x !== host),
+	});
 }
+
 async function toggleSuspend(): Promise<void> {
 	if (!instance) throw new Error('No instance?');
 	await os.api('admin/federation/update-instance', {
--- 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/scratchpad.vue
+++ b/packages/frontend/src/pages/scratchpad.vue
@@ -4,46 +4,46 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<MkSpacer :contentMax="800">
-	<div :class="$style.root">
-		<div :class="$style.editor" class="_panel">
-			<PrismEditor v-model="code" class="_monospace" :class="$style.code" :highlight="highlighter" :lineNumbers="false"/>
-			<MkButton style="position: absolute; top: 8px; right: 8px;" primary @click="run()"><i class="ti ti-player-play"></i></MkButton>
-		</div>
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>

-		<MkContainer v-if="root && components.length > 1" :key="uiKey" :foldable="true">
-			<template #header>UI</template>
-			<div :class="$style.ui">
-				<MkAsUi :component="root" :components="components" size="small"/>
+	<MkSpacer :contentMax="800">
+		<div :class="$style.root">
+			<div class="_gaps_s">
+				<div :class="$style.editor" class="_panel">
+					<MkCodeEditor v-model="code" lang="aiscript"/>
+				</div>
+				<MkButton primary @click="run()"><i class="ti ti-player-play"></i></MkButton>
 			</div>
-		</MkContainer>

-		<MkContainer :foldable="true" class="">
-			<template #header>{{ i18n.ts.output }}</template>
-			<div :class="$style.logs">
-				<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
+			<MkContainer v-if="root && components.length > 1" :key="uiKey" :foldable="true">
+				<template #header>UI</template>
+				<div :class="$style.ui">
+					<MkAsUi :component="root" :components="components" size="small"/>
+				</div>
+			</MkContainer>
+
+			<MkContainer :foldable="true" class="">
+				<template #header>{{ i18n.ts.output }}</template>
+				<div :class="$style.logs">
+					<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
+				</div>
+			</MkContainer>
+
+			<div class="">
+				{{ i18n.ts.scratchpadDescription }}
 			</div>
-		</MkContainer>
-
-		<div class="">
-			{{ i18n.ts.scratchpadDescription }}
 		</div>
-	</div>
-</MkSpacer>
+	</MkSpacer>
+</MkStickyContainer>
 </template>

 <script lang="ts" setup>
 import { onDeactivated, onUnmounted, Ref, ref, watch } from 'vue';
-import 'prismjs';
-import { highlight, languages } from 'prismjs/components/prism-core';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/themes/prism-okaidia.css';
-import { PrismEditor } from 'vue-prism-editor';
-import 'vue-prism-editor/dist/prismeditor.min.css';
 import { Interpreter, Parser, utils } from '@syuilo/aiscript';
 import MkContainer from '@/components/MkContainer.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkCodeEditor from '@/components/MkCodeEditor.vue';
 import { createAiScriptEnv } from '@/scripts/aiscript/api.js';
 import * as os from '@/os.js';
 import { $i } from '@/account.js';
@@ -152,10 +152,6 @@ async function run() {
 	}
 }

-function highlighter(code) {
-	return highlight(code, languages.js, 'javascript');
-}
-
 onDeactivated(() => {
 	if (aiscript) aiscript.abort();
 });
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -29,7 +29,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div class="_gaps_s">
 			<MkSwitch v-model="showFixedPostForm">{{ i18n.ts.showFixedPostForm }}</MkSwitch>
 			<MkSwitch v-model="showFixedPostFormInChannel">{{ i18n.ts.showFixedPostFormInChannel }}</MkSwitch>
-			<MkSwitch v-model="defaultWithReplies">{{ i18n.ts.withRepliesByDefaultForNewlyFollowed }}</MkSwitch>
 			<MkFolder>
 				<template #label>{{ i18n.ts.pinnedList }}</template>
 				<!-- 複数ピン止め管理できるようにしたいけどめんどいので一旦ひとつのみ -->
@@ -51,7 +50,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch>
 				<MkSwitch v-model="showGapBetweenNotesInTimeline">{{ i18n.ts.showGapBetweenNotesInTimeline }}</MkSwitch>
 				<MkSwitch v-model="loadRawImages">{{ i18n.ts.loadRawImages }}</MkSwitch>
-				<MkSwitch v-model="useReactionPickerForContextMenu">{{ i18n.ts.useReactionPickerForContextMenu }}</MkSwitch>
 				<MkRadios v-model="reactionsDisplaySize">
 					<template #label>{{ i18n.ts.reactionsDisplaySize }}</template>
 					<option value="small">{{ i18n.ts.small }}</option>
@@ -88,6 +86,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<template #label>{{ i18n.ts.notificationDisplay }}</template>

 		<div class="_gaps_m">
+			<MkSwitch v-model="useGroupedNotifications">{{ i18n.ts.useGroupedNotifications }}</MkSwitch>
+
 			<MkRadios v-model="notificationPosition">
 				<template #label>{{ i18n.ts.position }}</template>
 				<option value="leftTop"><i class="ti ti-align-box-left-top"></i> {{ i18n.ts.leftTop }}</option>
@@ -117,6 +117,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="disableShowingAnimatedImages">{{ i18n.ts.disableShowingAnimatedImages }}</MkSwitch>
 				<MkSwitch v-model="highlightSensitiveMedia">{{ i18n.ts.highlightSensitiveMedia }}</MkSwitch>
 				<MkSwitch v-model="squareAvatars">{{ i18n.ts.squareAvatars }}</MkSwitch>
+				<MkSwitch v-model="showAvatarDecorations">{{ i18n.ts.showAvatarDecorations }}</MkSwitch>
 				<MkSwitch v-model="useSystemFont">{{ i18n.ts.useSystemFont }}</MkSwitch>
 				<MkSwitch v-model="disableDrawer">{{ i18n.ts.disableDrawer }}</MkSwitch>
 				<MkSwitch v-model="forceShowAds">{{ i18n.ts.forceShowAds }}</MkSwitch>
@@ -148,8 +149,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div class="_gaps_m">
 			<div class="_gaps_s">
 				<MkSwitch v-model="imageNewTab">{{ i18n.ts.openImageInNewTab }}</MkSwitch>
+				<MkSwitch v-model="useReactionPickerForContextMenu">{{ i18n.ts.useReactionPickerForContextMenu }}</MkSwitch>
 				<MkSwitch v-model="enableInfiniteScroll">{{ i18n.ts.enableInfiniteScroll }}</MkSwitch>
 				<MkSwitch v-model="keepScreenOn">{{ i18n.ts.keepScreenOn }}</MkSwitch>
+				<MkSwitch v-model="disableStreamingTimeline">{{ i18n.ts.disableStreamingTimeline }}</MkSwitch>
 			</div>
 			<MkSelect v-model="serverDisconnectedBehavior">
 				<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
@@ -201,7 +204,7 @@ import { unisonReload } from '@/scripts/unison-reload.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { miLocalStorage } from '@/local-storage.js';
-import { globalEvents } from '@/events';
+import { globalEvents } from '@/events.js';
 import { claimAchievement } from '@/scripts/achievements.js';

 const lang = ref(miLocalStorage.getItem('lang'));
@@ -246,11 +249,13 @@ const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'))
 const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll'));
 const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
 const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
+const showAvatarDecorations = computed(defaultStore.makeGetterSetter('showAvatarDecorations'));
 const mediaListWithOneImageAppearance = computed(defaultStore.makeGetterSetter('mediaListWithOneImageAppearance'));
 const notificationPosition = computed(defaultStore.makeGetterSetter('notificationPosition'));
 const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis'));
 const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
-const defaultWithReplies = computed(defaultStore.makeGetterSetter('defaultWithReplies'));
+const disableStreamingTimeline = computed(defaultStore.makeGetterSetter('disableStreamingTimeline'));
+const useGroupedNotifications = computed(defaultStore.makeGetterSetter('useGroupedNotifications'));

 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);
@@ -287,6 +292,7 @@ watch([
 	reactionsDisplaySize,
 	highlightSensitiveMedia,
 	keepScreenOn,
+	disableStreamingTimeline,
 ], async () => {
 	await reloadAsk();
 });
@@ -296,12 +302,14 @@ const emojiIndexLangs = ['en-US'];
 function downloadEmojiIndex(lang: string) {
 	async function main() {
 		const currentIndexes = defaultStore.state.additionalUnicodeEmojiIndexes;
+
 		function download() {
 			switch (lang) {
 				case 'en-US': return import('../../unicode-emoji-indexes/en-US.json').then(x => x.default);
 				default: throw new Error('unrecognized lang: ' + lang);
 			}
 		}
+
 		currentIndexes[lang] = await download();
 		await defaultStore.set('additionalUnicodeEmojiIndexes', currentIndexes);
 	}
@@ -338,6 +346,7 @@ function removePinnedList() {

 let smashCount = 0;
 let smashTimer: number | null = null;
+
 function testNotification(): void {
 	const notification: Misskey.entities.Notification = {
 		id: Math.random().toString(),
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 	</MkSpacer>
+	<MkFooterSpacer/>
 </mkstickycontainer>
 </template>

--- a/packages/frontend/src/pages/settings/notifications.vue
+++ b/packages/frontend/src/pages/settings/notifications.vue
@@ -74,11 +74,11 @@ let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage
 const userLists = await os.api('users/lists/list');

 async function readAllUnreadNotes() {
-	await os.api('i/read-all-unread-notes');
+	await os.apiWithDialog('i/read-all-unread-notes');
 }

 async function readAllNotifications() {
-	await os.api('notifications/mark-all-as-read');
+	await os.apiWithDialog('notifications/mark-all-as-read');
 }

 async function updateReceiveConfig(type, value) {
--- a/packages/frontend/src/pages/settings/other.vue
+++ b/packages/frontend/src/pages/settings/other.vue
@@ -73,6 +73,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<FormSection>
 		<FormLink to="/registry"><template #icon><i class="ti ti-adjustments"></i></template>{{ i18n.ts.registry }}</FormLink>
 	</FormSection>
+
+	<FormSection>
+		<div class="_gaps_s">
+			<MkSwitch v-model="defaultWithReplies">{{ i18n.ts.withRepliesByDefaultForNewlyFollowed }}</MkSwitch>
+			<MkButton danger @click="updateRepliesAll(true)"><i class="ti ti-messages"></i> {{ i18n.ts.showRepliesToOthersInTimelineAll }}</MkButton>
+			<MkButton danger @click="updateRepliesAll(false)"><i class="ti ti-messages-off"></i> {{ i18n.ts.hideRepliesToOthersInTimelineAll }}</MkButton>
+		</div>
+	</FormSection>
 </div>
 </template>

@@ -95,6 +103,7 @@ import FormSection from '@/components/form/section.vue';
 const reportError = computed(defaultStore.makeGetterSetter('reportError'));
 const enableCondensedLineForAcct = computed(defaultStore.makeGetterSetter('enableCondensedLineForAcct'));
 const devMode = computed(defaultStore.makeGetterSetter('devMode'));
+const defaultWithReplies = computed(defaultStore.makeGetterSetter('defaultWithReplies'));

 function onChangeInjectFeaturedNote(v) {
 	os.api('i/update', {
@@ -138,6 +147,15 @@ async function reloadAsk() {
 	unisonReload();
 }

+async function updateRepliesAll(withReplies: boolean) {
+	const { canceled } = os.confirm({
+		type: 'warning',
+		text: withReplies ? i18n.ts.confirmShowRepliesAll : i18n.ts.confirmHideRepliesAll,
+	});
+	if (canceled) return;
+	await os.api('following/update-all', { withReplies });
+}
+
 watch([
 	enableCondensedLineForAcct,
 ], async () => {
--- a/packages/frontend/src/pages/settings/plugin.install.vue
+++ b/packages/frontend/src/pages/settings/plugin.install.vue
@@ -18,130 +18,35 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { defineAsyncComponent, nextTick, ref } from 'vue';
-import { compareVersions } from 'compare-versions';
-import { Interpreter, Parser, utils } from '@syuilo/aiscript';
-import { v4 as uuid } from 'uuid';
+import { nextTick, ref } from 'vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkButton from '@/components/MkButton.vue';
 import FormInfo from '@/components/MkInfo.vue';
 import * as os from '@/os.js';
-import { ColdDeviceStorage } from '@/store.js';
+import { installPlugin } from '@/scripts/install-plugin.js';
 import { unisonReload } from '@/scripts/unison-reload.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';

-const parser = new Parser();
-const code = ref(null);
-
-function installPlugin({ id, meta, src, token }) {
-	ColdDeviceStorage.set('plugins', ColdDeviceStorage.get('plugins').concat({
-		...meta,
-		id,
-		active: true,
-		configData: {},
-		token: token,
-		src: src,
-	}));
-}
-
-function isSupportedAiScriptVersion(version: string): boolean {
-	try {
-		return (compareVersions(version, '0.12.0') >= 0);
-	} catch (err) {
-		return false;
-	}
-}
+const code = ref<string | null>(null);

 async function install() {
-	if (code.value == null) return;
+	if (!code.value) return;

-	const lv = utils.getLangVersion(code.value);
-	if (lv == null) {
-		os.alert({
-			type: 'error',
-			text: 'No language version annotation found :(',
-		});
-		return;
-	} else if (!isSupportedAiScriptVersion(lv)) {
-		os.alert({
-			type: 'error',
-			text: `aiscript version '${lv}' is not supported :(`,
-		});
-		return;
-	}
-
-	let ast;
 	try {
-		ast = parser.parse(code.value);
+		await installPlugin(code.value);
+		os.success();
+
+		nextTick(() => {
+			unisonReload();
+		});
 	} catch (err) {
 		os.alert({
 			type: 'error',
-			text: 'Syntax error :(',
+			title: 'Install failed',
+			text: err.toString() ?? null,
 		});
-		return;
 	}
-
-	const meta = Interpreter.collectMetadata(ast);
-	if (meta == null) {
-		os.alert({
-			type: 'error',
-			text: 'No metadata found :(',
-		});
-		return;
-	}
-
-	const metadata = meta.get(null);
-	if (metadata == null) {
-		os.alert({
-			type: 'error',
-			text: 'No metadata found :(',
-		});
-		return;
-	}
-
-	const { name, version, author, description, permissions, config } = metadata;
-	if (name == null || version == null || author == null) {
-		os.alert({
-			type: 'error',
-			text: 'Required property not found :(',
-		});
-		return;
-	}
-
-	const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => {
-		os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {
-			title: i18n.ts.tokenRequested,
-			information: i18n.ts.pluginTokenRequestedDescription,
-			initialName: name,
-			initialPermissions: permissions,
-		}, {
-			done: async result => {
-				const { name, permissions } = result;
-				const { token } = await os.api('miauth/gen-token', {
-					session: null,
-					name: name,
-					permission: permissions,
-				});
-				res(token);
-			},
-		}, 'closed');
-	});
-
-	installPlugin({
-		id: uuid(),
-		meta: {
-			name, version, author, description, permissions, config,
-		},
-		token,
-		src: code.value,
-	});
-
-	os.success();
-
-	nextTick(() => {
-		unisonReload();
-	});
 }

 const headerActions = $computed(() => []);
--- a/packages/frontend/src/pages/settings/plugin.vue
+++ b/packages/frontend/src/pages/settings/plugin.vue
@@ -50,7 +50,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<MkButton inline @click="copy(plugin)"><i class="ti ti-copy"></i> {{ i18n.ts.copy }}</MkButton>
 						</div>

-						<MkCode :code="plugin.src ?? ''"/>
+						<MkCode :code="plugin.src ?? ''" lang="is"/>
 					</div>
 				</MkFolder>
 			</div>
@@ -77,9 +77,11 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';

 const plugins = ref(ColdDeviceStorage.get('plugins'));

-function uninstall(plugin) {
+async function uninstall(plugin) {
 	ColdDeviceStorage.set('plugins', plugins.value.filter(x => x.id !== plugin.id));
-	os.success();
+	await os.apiWithDialog('i/revoke-token', {
+		token: plugin.token,
+	});
 	nextTick(() => {
 		unisonReload();
 	});
--- a/packages/frontend/src/pages/settings/profile.avatar-decoration-dialog.vue
+++ b/packages/frontend/src/pages/settings/profile.avatar-decoration-dialog.vue
@@ -0,0 +1,114 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModalWindow
+	ref="dialog"
+	:width="400"
+	:height="450"
+	@close="cancel"
+	@closed="emit('closed')"
+>
+	<template #header>{{ i18n.ts.avatarDecorations }}</template>
+
+	<div>
+		<MkSpacer :marginMin="20" :marginMax="28">
+			<div style="text-align: center;">
+				<div :class="$style.name">{{ decoration.name }}</div>
+				<MkAvatar style="width: 64px; height: 64px; margin-bottom: 20px;" :user="$i" :decoration="{ url: decoration.url, angle, flipH }" forceShowDecoration/>
+			</div>
+			<div class="_gaps_s">
+				<MkRange v-model="angle" continuousUpdate :min="-0.5" :max="0.5" :step="0.025" :textConverter="(v) => `${Math.floor(v * 360)}°`">
+					<template #label>{{ i18n.ts.angle }}</template>
+				</MkRange>
+				<MkSwitch v-model="flipH">
+					<template #label>{{ i18n.ts.flip }}</template>
+				</MkSwitch>
+			</div>
+		</MkSpacer>
+
+		<div :class="$style.footer" class="_buttonsCenter">
+			<MkButton v-if="using" primary rounded @click="attach"><i class="ti ti-check"></i> {{ i18n.ts.update }}</MkButton>
+			<MkButton v-if="using" rounded @click="detach"><i class="ti ti-x"></i> {{ i18n.ts.detach }}</MkButton>
+			<MkButton v-else primary rounded @click="attach"><i class="ti ti-check"></i> {{ i18n.ts.attach }}</MkButton>
+		</div>
+	</div>
+</MkModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, ref, computed } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+import MkFolder from '@/components/MkFolder.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import MkRange from '@/components/MkRange.vue';
+import { $i } from '@/account.js';
+
+const props = defineProps<{
+	decoration: {
+		id: string;
+		url: string;
+	}
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
+const using = computed(() => $i.avatarDecorations.some(x => x.id === props.decoration.id));
+const angle = ref(using.value ? $i.avatarDecorations.find(x => x.id === props.decoration.id).angle ?? 0 : 0);
+const flipH = ref(using.value ? $i.avatarDecorations.find(x => x.id === props.decoration.id).flipH ?? false : false);
+
+function cancel() {
+	dialog.value.close();
+}
+
+async function attach() {
+	const decoration = {
+		id: props.decoration.id,
+		angle: angle.value,
+		flipH: flipH.value,
+	};
+	await os.apiWithDialog('i/update', {
+		avatarDecorations: [decoration],
+	});
+	$i.avatarDecorations = [decoration];
+
+	dialog.value.close();
+}
+
+async function detach() {
+	await os.apiWithDialog('i/update', {
+		avatarDecorations: [],
+	});
+	$i.avatarDecorations = [];
+
+	dialog.value.close();
+}
+</script>
+
+<style lang="scss" module>
+.name {
+	position: relative;
+	z-index: 10;
+	font-weight: bold;
+	margin-bottom: 28px;
+}
+
+.footer {
+	position: sticky;
+	bottom: 0;
+	left: 0;
+	padding: 12px;
+	border-top: solid 0.5px var(--divider);
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+}
+</style>
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div class="_gaps_m">
 	<div :class="$style.avatarAndBanner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
 		<div :class="$style.avatarContainer">
-			<MkAvatar :class="$style.avatar" :user="$i" @click="changeAvatar"/>
+			<MkAvatar :class="$style.avatar" :user="$i" forceShowDecoration @click="changeAvatar"/>
 			<MkButton primary rounded @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
 		</div>
 		<MkButton primary rounded :class="$style.bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
@@ -83,6 +83,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<template #caption>{{ i18n.ts._profile.metadataDescription }}</template>
 	</FormSlot>

+	<MkFolder>
+		<template #icon><i class="ti ti-sparkles"></i></template>
+		<template #label>{{ i18n.ts.avatarDecorations }}</template>
+
+		<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-gap: 12px;">
+			<div
+				v-for="avatarDecoration in avatarDecorations"
+				:key="avatarDecoration.id"
+				:class="[$style.avatarDecoration, { [$style.avatarDecorationActive]: $i.avatarDecorations.some(x => x.id === avatarDecoration.id) }]"
+				@click="openDecoration(avatarDecoration)"
+			>
+				<div :class="$style.avatarDecorationName"><MkCondensedLine :minScale="0.5">{{ avatarDecoration.name }}</MkCondensedLine></div>
+				<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decoration="{ url: avatarDecoration.url }" forceShowDecoration/>
+				<i v-if="avatarDecoration.roleIdsThatCanBeUsedThisDecoration.length > 0 && !$i.roles.some(r => avatarDecoration.roleIdsThatCanBeUsedThisDecoration.includes(r.id))" :class="$style.avatarDecorationLock" class="ti ti-lock"></i>
+			</div>
+		</div>
+	</MkFolder>
+
 	<MkFolder>
 		<template #label>{{ i18n.ts.advancedSettings }}</template>

@@ -126,6 +144,7 @@ import MkInfo from '@/components/MkInfo.vue';
 const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));

 const reactionAcceptance = computed(defaultStore.makeGetterSetter('reactionAcceptance'));
+let avatarDecorations: any[] = $ref([]);

 const profile = reactive({
 	name: $i.name,
@@ -146,6 +165,10 @@ watch(() => profile, () => {
 const fields = ref($i?.fields.map(field => ({ id: Math.random().toString(), name: field.name, value: field.value })) ?? []);
 const fieldEditMode = ref(false);

+os.api('get-avatar-decorations').then(_avatarDecorations => {
+	avatarDecorations = _avatarDecorations;
+});
+
 function addField() {
 	fields.value.push({
 		id: Math.random().toString(),
@@ -244,6 +267,12 @@ function changeBanner(ev) {
 	});
 }

+function openDecoration(avatarDecoration) {
+	os.popup(defineAsyncComponent(() => import('./profile.avatar-decoration-dialog.vue')), {
+		decoration: avatarDecoration,
+	}, {}, 'closed');
+}
+
 const headerActions = $computed(() => []);

 const headerTabs = $computed(() => []);
@@ -338,4 +367,33 @@ definePageMetadata({
 .dragItemForm {
 	flex-grow: 1;
 }
+
+.avatarDecoration {
+	cursor: pointer;
+	padding: 16px 16px 28px 16px;
+	border: solid 2px var(--divider);
+	border-radius: 8px;
+	text-align: center;
+	font-size: 90%;
+	overflow: clip;
+	contain: content;
+}
+
+.avatarDecorationActive {
+	background-color: var(--accentedBg);
+	border-color: var(--accent);
+}
+
+.avatarDecorationName {
+	position: relative;
+	z-index: 10;
+	font-weight: bold;
+	margin-bottom: 20px;
+}
+
+.avatarDecorationLock {
+	position: absolute;
+	bottom: 12px;
+	right: 12px;
+}
 </style>
--- a/packages/frontend/src/pages/settings/sounds.vue
+++ b/packages/frontend/src/pages/settings/sounds.vue
@@ -32,20 +32,20 @@ import MkRange from '@/components/MkRange.vue';
 import MkButton from '@/components/MkButton.vue';
 import FormSection from '@/components/form/section.vue';
 import MkFolder from '@/components/MkFolder.vue';
-import { soundConfigStore } from '@/scripts/sound.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { defaultStore } from '@/store.js';

-const masterVolume = computed(soundConfigStore.makeGetterSetter('sound_masterVolume'));
+const masterVolume = computed(defaultStore.makeGetterSetter('sound_masterVolume'));

 const soundsKeys = ['note', 'noteMy', 'notification', 'antenna', 'channel'] as const;

 const sounds = ref<Record<typeof soundsKeys[number], Ref<any>>>({
-	note: soundConfigStore.reactiveState.sound_note,
-	noteMy: soundConfigStore.reactiveState.sound_noteMy,
-	notification: soundConfigStore.reactiveState.sound_notification,
-	antenna: soundConfigStore.reactiveState.sound_antenna,
-	channel: soundConfigStore.reactiveState.sound_channel,
+	note: defaultStore.reactiveState.sound_note,
+	noteMy: defaultStore.reactiveState.sound_noteMy,
+	notification: defaultStore.reactiveState.sound_notification,
+	antenna: defaultStore.reactiveState.sound_antenna,
+	channel: defaultStore.reactiveState.sound_channel,
 });

 async function updated(type: keyof typeof sounds.value, sound) {
@@ -54,14 +54,14 @@ async function updated(type: keyof typeof sounds.value, sound) {
 		volume: sound.volume,
 	};

-	soundConfigStore.set(`sound_${type}`, v);
+	defaultStore.set(`sound_${type}`, v);
 	sounds.value[type] = v;
 }

 function reset() {
 	for (const sound of Object.keys(sounds.value) as Array<keyof typeof sounds.value>) {
-		const v = soundConfigStore.def[`sound_${sound}`].default;
-		soundConfigStore.set(`sound_${sound}`, v);
+		const v = defaultStore.def[`sound_${sound}`].default;
+		defaultStore.set(`sound_${sound}`, v);
 		sounds.value[sound] = v;
 	}
 }
--- a/packages/frontend/src/pages/settings/theme.install.vue
+++ b/packages/frontend/src/pages/settings/theme.install.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</MkTextarea>

 	<div class="_buttons">
-		<MkButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
+		<MkButton :disabled="installThemeCode == null" inline @click="() => previewTheme(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
 		<MkButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
 	</div>
 </div>
@@ -18,60 +18,41 @@ SPDX-License-Identifier: AGPL-3.0-only

 <script lang="ts" setup>
 import { } from 'vue';
-import JSON5 from 'json5';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkButton from '@/components/MkButton.vue';
-import { applyTheme, validateTheme } from '@/scripts/theme.js';
+import { parseThemeCode, previewTheme, installTheme } from '@/scripts/install-theme.js';
 import * as os from '@/os.js';
-import { addTheme, getThemes } from '@/theme-store';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';

 let installThemeCode = $ref(null);

-function parseThemeCode(code: string) {
-	let theme;
-
-	try {
-		theme = JSON5.parse(code);
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			text: i18n.ts._theme.invalid,
-		});
-		return false;
-	}
-	if (!validateTheme(theme)) {
-		os.alert({
-			type: 'error',
-			text: i18n.ts._theme.invalid,
-		});
-		return false;
-	}
-	if (getThemes().some(t => t.id === theme.id)) {
-		os.alert({
-			type: 'info',
-			text: i18n.ts._theme.alreadyInstalled,
-		});
-		return false;
-	}
-
-	return theme;
-}
-
-function preview(code: string): void {
-	const theme = parseThemeCode(code);
-	if (theme) applyTheme(theme, false);
-}
-
 async function install(code: string): Promise<void> {
-	const theme = parseThemeCode(code);
-	if (!theme) return;
-	await addTheme(theme);
-	os.alert({
-		type: 'success',
-		text: i18n.t('_theme.installed', { name: theme.name }),
-	});
+	try {
+		const theme = parseThemeCode(code);
+		await installTheme(code);
+		os.alert({
+			type: 'success',
+			text: i18n.t('_theme.installed', { name: theme.name }),
+		});
+	} catch (err) {
+		switch (err.message.toLowerCase()) {
+			case 'this theme is already installed':
+				os.alert({
+					type: 'info',
+					text: i18n.ts._theme.alreadyInstalled,
+				});
+				break;
+
+			default:
+				os.alert({
+					type: 'error',
+					text: i18n.ts._theme.invalid,
+				});
+				break;
+		}
+		console.error(err);
+	}
 }

 const headerActions = $computed(() => []);
--- a/packages/frontend/src/pages/settings/webhook.edit.vue
+++ b/packages/frontend/src/pages/settings/webhook.edit.vue
@@ -108,6 +108,7 @@ async function del(): Promise<void> {

 	router.push('/settings/webhook');
 }
+
 const headerActions = $computed(() => []);

 const headerTabs = $computed(() => []);
--- 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 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
@@ -8,7 +8,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<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">
-			<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);"/>

 			<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
@@ -31,9 +33,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { defineAsyncComponent, computed, watch, provide } from 'vue';
+import { computed, watch, provide } 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';
@@ -44,11 +47,10 @@ import { $i } from '@/account.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { antennasCache, userListsCache } from '@/cache.js';
+import { deviceKind } from '@/scripts/device-kind.js';

 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 = {
@@ -139,27 +141,49 @@ function focus(): void {
 	tlComponent.focus();
 }

-const headerActions = $computed(() => [{
-	icon: 'ti ti-dots',
-	text: i18n.ts.options,
-	handler: (ev) => {
-		os.popupMenu([{
-			type: 'switch',
-			text: i18n.ts.showRenotes,
-			icon: 'ti ti-repeat',
-			ref: $$(withRenotes),
-		}, src === 'local' || src === 'social' ? {
-			type: 'switch',
-			text: i18n.ts.showRepliesToOthersInTimeline,
-			ref: $$(withReplies),
-		} : undefined, {
-			type: 'switch',
-			text: i18n.ts.fileAttachedOnly,
-			icon: 'ti ti-photo',
-			ref: $$(onlyFiles),
-		}], ev.currentTarget ?? ev.target);
-	},
-}]);
+function closeTutorial(): void {
+	if (!['home', 'local', 'social', 'global'].includes(src)) return;
+	const before = defaultStore.state.timelineTutorials;
+	before[src] = true;
+	defaultStore.set('timelineTutorials', before);
+}
+
+const headerActions = $computed(() => {
+	const tmp = [
+		{
+			icon: 'ti ti-dots',
+			text: i18n.ts.options,
+			handler: (ev) => {
+				os.popupMenu([{
+					type: 'switch',
+					text: i18n.ts.showRenotes,
+					icon: 'ti ti-repeat',
+					ref: $$(withRenotes),
+				}, src === 'local' || src === 'social' ? {
+					type: 'switch',
+					text: i18n.ts.showRepliesToOthersInTimeline,
+					ref: $$(withReplies),
+				} : undefined, {
+					type: 'switch',
+					text: i18n.ts.fileAttachedOnly,
+					icon: 'ti ti-photo',
+					ref: $$(onlyFiles),
+				}], ev.currentTarget ?? ev.target);
+			},
+		},
+	];
+	if (deviceKind === 'desktop') {
+		tmp.unshift({
+			icon: 'ti ti-refresh',
+			text: i18n.ts.reload,
+			handler: (ev: Event) => {
+				console.log('called');
+				tlComponent.reloadTimeline();
+			},
+		});
+	}
+	return tmp;
+});

 const headerTabs = $computed(() => [...(defaultStore.reactiveState.pinnedUserLists.value.map(l => ({
 	key: 'list:' + l.id,
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -76,7 +76,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 					<div class="description">
 						<MkOmit>
-							<Mfm v-if="user.description" :text="user.description" :isNote="false" :author="user" :i="$i"/>
+							<Mfm v-if="user.description" :text="user.description" :isNote="false" :author="user"/>
 							<p v-else class="empty">{{ i18n.ts.noAccountDescription }}</p>
 						</MkOmit>
 					</div>
@@ -100,7 +100,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<Mfm :text="field.name" :plain="true" :colored="false"/>
 							</dt>
 							<dd class="value">
-								<Mfm :text="field.value" :author="user" :i="$i" :colored="false"/>
+								<Mfm :text="field.value" :author="user" :colored="false"/>
 								<i v-if="user.verifiedLinks.includes(field.value)" v-tooltip:dialog="i18n.ts.verifiedLink" class="ti ti-circle-check" :class="$style.verifiedLink"></i>
 							</dd>
 						</dl>
--- a/packages/frontend/src/pages/user/index.timeline.vue
+++ b/packages/frontend/src/pages/user/index.timeline.vue
@@ -37,7 +37,7 @@ const pagination = {
 	params: computed(() => ({
 		userId: props.user.id,
 		withRenotes: include.value === 'all',
-		withReplies: include.value === 'all' || include.value === 'files',
+		withReplies: include.value === 'all',
 		withChannelNotes: include.value === 'all',
 		withFiles: include.value === 'files',
 	})),
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MarqueeText :duration="40">
 			<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
 				<!--<MkInstanceCardMini :instance="instance"/>-->
-				<img v-if="instance.iconUrl" class="icon" :src="instance.iconUrl" alt=""/>
+				<img v-if="instance.iconUrl" class="icon" :src="getInstanceIcon(instance)" alt=""/>
 				<span class="name _monospace">{{ instance.host }}</span>
 			</MkA>
 		</MarqueeText>
@@ -46,10 +46,15 @@ import { instance } from '@/instance.js';
 import number from '@/filters/number.js';
 import MkNumber from '@/components/MkNumber.vue';
 import MkVisitorDashboard from '@/components/MkVisitorDashboard.vue';
+import { getProxiedImageUrl } from '@/scripts/media-proxy.js';

 let meta = $ref<Misskey.entities.Instance>();
 let instances = $ref<any[]>();

+function getInstanceIcon(instance): string {
+  return getProxiedImageUrl(instance.iconUrl, 'preview');
+}
+
 os.api('meta', { detail: true }).then(_meta => {
 	meta = _meta;
 });
--- a/packages/frontend/src/pages/welcome.timeline.vue
+++ b/packages/frontend/src/pages/welcome.timeline.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div class="_panel" :class="$style.content">
 				<div>
 					<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-					<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i"/>
+					<Mfm v-if="note.text" :text="note.text" :author="note.user"/>
 					<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 				</div>
 				<div v-if="note.files.length > 0" :class="$style.richcontent">