From 1c108927ea469179950b14885d06e61335213d14 Mon Sep 17 00:00:00 2001
From: mattyatea <mattyatea@pm.me>
Date: Wed, 3 Jan 2024 01:25:32 +0900
Subject: [PATCH] =?UTF-8?q?=E8=89=B2=E3=80=85=E3=83=AA=E3=83=95=E3=82=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/avatar-decorations/create.ts        |   2 +
 .../admin/avatar-decorations/list.ts          |   1 +
 .../src/components/MkEmojiPicker.section.vue  |   4 +-
 .../src/components/MkFoldableSection.vue      | 211 +++++++++++-------
 .../frontend/src/components/MkNoteSimple.vue  |   2 +-
 .../frontend/src/components/MkPollEditor.vue  |   6 +-
 .../frontend/src/components/MkPostForm.vue    |  10 +-
 .../src/pages/admin/instance-block.vue        |  10 +-
 .../frontend/src/pages/settings/general.vue   | 120 +++++-----
 packages/misskey-js/src/autogen/types.ts      |   2 +
 10 files changed, 208 insertions(+), 160 deletions(-)

diff --git a/packages/backend/src/server/api/endpoints/admin/avatar-decorations/create.ts b/packages/backend/src/server/api/endpoints/admin/avatar-decorations/create.ts
index 4ac74253cc..60afe88bbf 100644
--- a/packages/backend/src/server/api/endpoints/admin/avatar-decorations/create.ts
+++ b/packages/backend/src/server/api/endpoints/admin/avatar-decorations/create.ts
@@ -24,6 +24,7 @@ export const paramDef = {
 		roleIdsThatCanBeUsedThisDecoration: { type: 'array', items: {
 			type: 'string',
 		} },
+		category: { type: 'string', nullable: true },
 	},
 	required: ['name', 'description', 'url'],
 } as const;
@@ -39,6 +40,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				description: ps.description,
 				url: ps.url,
 				roleIdsThatCanBeUsedThisDecoration: ps.roleIdsThatCanBeUsedThisDecoration,
+				category: ps.category ?? '',
 			}, me);
 		});
 	}
diff --git a/packages/backend/src/server/api/endpoints/admin/avatar-decorations/list.ts b/packages/backend/src/server/api/endpoints/admin/avatar-decorations/list.ts
index 33122c3eef..39297de536 100644
--- a/packages/backend/src/server/api/endpoints/admin/avatar-decorations/list.ts
+++ b/packages/backend/src/server/api/endpoints/admin/avatar-decorations/list.ts
@@ -95,6 +95,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				name: avatarDecoration.name,
 				description: avatarDecoration.description,
 				url: avatarDecoration.url,
+				category: avatarDecoration.category,
 				roleIdsThatCanBeUsedThisDecoration: avatarDecoration.roleIdsThatCanBeUsedThisDecoration,
 			}));
 		});
diff --git a/packages/frontend/src/components/MkEmojiPicker.section.vue b/packages/frontend/src/components/MkEmojiPicker.section.vue
index 5875b678a1..9391c39066 100644
--- a/packages/frontend/src/components/MkEmojiPicker.section.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.section.vue
@@ -6,8 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
     <!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
     <!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） -->
-    <section v-if="!hasChildSection" style="border-radius: 6px; padding-top: 9px;">
-        <header class="_acrylic" @click="shown = !shown"  style="border-radius: 6px;">
+    <section v-if="!hasChildSection" style="border-radius: 6px;">
+        <header class="_acrylic" @click="shown = !shown" >
             <i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
         </header>
         <div v-if="shown" class="body">
diff --git a/packages/frontend/src/components/MkFoldableSection.vue b/packages/frontend/src/components/MkFoldableSection.vue
index 1ffc95d944..7f2b4e0858 100644
--- a/packages/frontend/src/components/MkFoldableSection.vue
+++ b/packages/frontend/src/components/MkFoldableSection.vue
@@ -4,141 +4,186 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div ref="el" :class="$style.root">
-	<header :class="$style.header" class="_button" :style="{ background: bg }" @click="showBody = !showBody">
+<div ref="rootEl" :class="$style.root" role="group" :aria-expanded="opened">
+	<header :class="[$style.header, { [$style.opened]: opened }]" class="_button" role="button" data-cy-folder-header @click="toggle">
 		<div :class="$style.title"><div><slot name="header"></slot></div></div>
 		<div :class="$style.divider"></div>
 		<button class="_button" :class="$style.button">
-			<template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
+			<template v-if="opened"><i class="ti ti-chevron-up"></i></template>
 			<template v-else><i class="ti ti-chevron-down"></i></template>
 		</button>
 	</header>
-	<Transition
-		:name="defaultStore.state.animation ? 'folder-toggle' : ''"
-		@enter="enter"
-		@afterEnter="afterEnter"
-		@leave="leave"
-		@afterLeave="afterLeave"
-	>
-		<div v-show="showBody">
-			<slot></slot>
-		</div>
-	</Transition>
+	<div v-if="openedAtLeastOnce" :class="[$style.body, { [$style.bgSame]: bgSame }]" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : null, overflow: maxHeight ? `auto` : null }" :aria-hidden="!opened">
+		<Transition
+			:enterActiveClass="defaultStore.state.animation ? $style.transition_toggle_enterActive : ''"
+			:leaveActiveClass="defaultStore.state.animation ? $style.transition_toggle_leaveActive : ''"
+			:enterFromClass="defaultStore.state.animation ? $style.transition_toggle_enterFrom : ''"
+			:leaveToClass="defaultStore.state.animation ? $style.transition_toggle_leaveTo : ''"
+			@enter="enter"
+			@afterEnter="afterEnter"
+			@leave="leave"
+			@afterLeave="afterLeave"
+		>
+			<div v-show="opened">
+				<slot></slot>
+			</div>
+		</Transition>
+	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, shallowRef, watch } from 'vue';
-import tinycolor from 'tinycolor2';
-import { miLocalStorage } from '@/local-storage.js';
+import { nextTick, onMounted, shallowRef, ref } from 'vue';
 import { defaultStore } from '@/store.js';
 
-const miLocalStoragePrefix = 'ui:folder:' as const;
-
 const props = withDefaults(defineProps<{
-	expanded?: boolean;
-	persistKey?: string;
+    defaultOpen?: boolean;
+    maxHeight?: number | null;
 }>(), {
-	expanded: true,
+	defaultOpen: true,
+	maxHeight: null,
 });
 
-const el = shallowRef<HTMLDivElement>();
-const bg = ref<string | null>(null);
-const showBody = ref((props.persistKey && miLocalStorage.getItem(`${miLocalStoragePrefix}${props.persistKey}`)) ? (miLocalStorage.getItem(`${miLocalStoragePrefix}${props.persistKey}`) === 't') : props.expanded);
-
-watch(showBody, () => {
-	if (props.persistKey) {
-		miLocalStorage.setItem(`${miLocalStoragePrefix}${props.persistKey}`, showBody.value ? 't' : 'f');
+const getBgColor = (el: HTMLElement) => {
+	const style = window.getComputedStyle(el);
+	if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
+		return style.backgroundColor;
+	} else {
+		return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
 	}
-});
+};
 
-function enter(el: Element) {
+const rootEl = shallowRef<HTMLElement>();
+const bgSame = ref(false);
+const opened = ref(props.defaultOpen);
+const openedAtLeastOnce = ref(props.defaultOpen);
+
+function enter(el) {
 	const elementHeight = el.getBoundingClientRect().height;
 	el.style.height = 0;
 	el.offsetHeight; // reflow
-	el.style.height = elementHeight + 'px';
+	el.style.height = Math.min(elementHeight, props.maxHeight ?? Infinity) + 'px';
 }
 
-function afterEnter(el: Element) {
+function afterEnter(el) {
 	el.style.height = null;
 }
 
-function leave(el: Element) {
+function leave(el) {
 	const elementHeight = el.getBoundingClientRect().height;
 	el.style.height = elementHeight + 'px';
 	el.offsetHeight; // reflow
 	el.style.height = 0;
 }
 
-function afterLeave(el: Element) {
+function afterLeave(el) {
 	el.style.height = null;
 }
 
+function toggle() {
+	if (!opened.value) {
+		openedAtLeastOnce.value = true;
+	}
+
+	nextTick(() => {
+		opened.value = !opened.value;
+	});
+}
+
 onMounted(() => {
-	function getParentBg(el: HTMLElement | null): string {
-		if (el == null || el.tagName === 'BODY') return 'var(--bg)';
-		const bg = el.style.background || el.style.backgroundColor;
-		if (bg) {
-			return bg;
-		} else {
-			return getParentBg(el.parentElement);
-		}
-	}
-
-	const rawBg = getParentBg(el.value);
-	const _bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
-	_bg.setAlpha(0.85);
-	bg.value = _bg.toRgbString();
+	const computedStyle = getComputedStyle(document.documentElement);
+	const parentBg = getBgColor(rootEl.value.parentElement);
+	const myBg = computedStyle.getPropertyValue('--panel');
+	bgSame.value = parentBg === myBg;
 });
 </script>
 
 <style lang="scss" module>
-.folder-toggle-enter-active, .folder-toggle-leave-active {
-	overflow-y: clip;
-	transition: opacity 0.5s, height 0.5s !important;
+.transition_toggle_enterActive,
+.transition_toggle_leaveActive {
+  overflow-y: clip;
+  transition: opacity 0.3s, height 0.3s, transform 0.3s !important;
 }
-.folder-toggle-enter-from {
-	opacity: 0;
-}
-.folder-toggle-leave-to {
-	opacity: 0;
+.transition_toggle_enterFrom,
+.transition_toggle_leaveTo {
+  opacity: 0;
 }
 
 .root {
-	position: relative;
+  display: block;
 }
 
 .header {
-	display: flex;
-	position: relative;
-	z-index: 10;
-	position: sticky;
-	top: var(--stickyTop, 0px);
-	-webkit-backdrop-filter: var(--blur, blur(8px));
-	backdrop-filter: var(--blur, blur(20px));
+  display: flex;
+  position: relative;
+  z-index: 10;
+  position: sticky;
+  top: var(--stickyTop, 0px);
+  -webkit-backdrop-filter: var(--blur, blur(8px));
+  backdrop-filter: var(--blur, blur(20px));
+
+  &.opened {
+    border-radius: 6px 6px 0 0;
+  }
 }
 
+.headerUpper {
+  display: flex;
+  align-items: center;
+}
+
+.headerLower {
+  color: var(--fgTransparentWeak);
+  font-size: .85em;
+  padding-left: 4px;
+}
+
+.headerIcon {
+  margin-right: 0.75em;
+  flex-shrink: 0;
+  text-align: center;
+  opacity: 0.8;
+
+  &:empty {
+    display: none;
+
+    & + .headerText {
+      padding-left: 4px;
+    }
+  }
+}
 .title {
-	display: grid;
-	place-content: center;
-	margin: 0;
-	padding: 12px 16px 12px 0;
+  display: grid;
+  place-content: center;
+  margin: 0;
+  padding: 12px 16px 12px 0;
+}
+.headerText {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding-right: 12px;
+}
+
+.headerTextSub {
+  color: var(--fgTransparentWeak);
+  font-size: .85em;
+}
+
+.headerRight {
+  margin-left: auto;
+  color: var(--fgTransparentWeak);
+  white-space: nowrap;
+}
+
+.headerRightText:not(:empty) {
+  margin-right: 0.75em;
 }
 
 .divider {
-	flex: 1;
-	margin: auto;
-	height: 1px;
-	background: var(--divider);
-}
-
-.button {
-	padding: 12px 0 12px 16px;
-}
-
-@container (max-width: 500px) {
-	.title {
-		padding: 8px 10px 8px 0;
-	}
+  flex: 1;
+  margin: auto;
+  height: 1px;
+  background: var(--divider);
 }
 </style>
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index c26fcea911..49c681b3ee 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -91,7 +91,7 @@ const showContent = ref(false);
 	margin: 0;
 	padding: 0;
 	font-size: 0.95em;
-  border-bottom: solid 0.5px var(--divider);
+
 }
 .button{
   margin-right: var(--margin);
diff --git a/packages/frontend/src/components/MkPollEditor.vue b/packages/frontend/src/components/MkPollEditor.vue
index 43e576d1ab..cb2b9c280d 100644
--- a/packages/frontend/src/components/MkPollEditor.vue
+++ b/packages/frontend/src/components/MkPollEditor.vue
@@ -149,8 +149,10 @@ watch([choices, multiple, expiration, atDate, atTime, after, unit], () => emit('
 
 <style lang="scss" scoped>
 .zmdxowus {
-	padding: 8px 16px;
-
+    margin: 4px 8px;
+    padding: 4px 8px;
+    border-radius: 8px;
+    border: solid 2px var(--divider);
 	> .caution {
 		margin: 0 0 8px 0;
 		font-size: 0.8em;
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 67de693b20..d46ea13b1c 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -1274,23 +1274,21 @@ defineExpose({
 .cw {
   z-index: 1;
   padding-bottom: 8px;
-  border-bottom: solid 0.5px var(--divider);
+  border-bottom: solid 1px var(--divider);
 }
 
 .postOptionsRoot {
 	>* {
-		border-bottom: solid 0.5px var(--divider);
-	}
-	>:last-child {
-		border-bottom: none;
+		border-bottom: solid 1px var(--divider);
 	}
+
 }
 
 .hashtags {
   z-index: 1;
   padding-top: 8px;
   padding-bottom: 8px;
-  border-top: solid 0.5px var(--divider);
+  border-top: solid 1px var(--divider);
 }
 
 .textOuter {
diff --git a/packages/frontend/src/pages/admin/instance-block.vue b/packages/frontend/src/pages/admin/instance-block.vue
index 9c504e46b2..7292fade8d 100644
--- a/packages/frontend/src/pages/admin/instance-block.vue
+++ b/packages/frontend/src/pages/admin/instance-block.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkStickyContainer>
 	<template #header>
-		<XHeader :actions="headerActions" :tabs="headerTabs"/>
+		<MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/>
 	</template>
 	<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
 		<FormSuspense :p="init">
@@ -34,8 +34,8 @@ import * as os from '@/os.js';
 import { fetchInstance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
-import MkSpacer from "@/components/global/MkSpacer.vue";
-import MkStickyContainer from "@/components/global/MkStickyContainer.vue";
+import MkSpacer from '@/components/global/MkSpacer.vue';
+import MkStickyContainer from '@/components/global/MkStickyContainer.vue';
 
 const blockedHosts = ref<string>('');
 const silencedHosts = ref<string>('');
@@ -43,8 +43,8 @@ const tab = ref('block');
 
 async function init() {
 	const meta = await os.api('admin/meta');
-	blockedHosts.value = meta.blockedHosts.join('\n');
-	silencedHosts.value = meta.silencedHosts.join('\n');
+	blockedHosts.value = meta.blockedHosts ? meta.blockedHosts.join('\n') : '';
+	silencedHosts.value = meta.silencedHosts ? meta.silencedHosts.join('\n') : '';
 }
 
 function save() {
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index a41ba9cc92..aa678c981f 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -35,32 +35,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkButton v-if="defaultStore.reactiveState.pinnedUserLists.value.length === 0" @click="setPinnedList()">{{ i18n.ts.add }}</MkButton>
 				<MkButton v-else danger @click="removePinnedList()"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
 			</MkFolder>
-        <MkSwitch v-model="showMediaTimeline">{{ i18n.ts.showMediaTimeline}}<template #caption>{{ i18n.ts.showMediaTimelineInfo }} </template></MkSwitch>
-        <MkSwitch v-model="showGlobalTimeline">{{ i18n.ts.showGlobalTimeline }}</MkSwitch>
+			<MkSwitch v-model="showMediaTimeline">{{ i18n.ts.showMediaTimeline }}<template #caption>{{ i18n.ts.showMediaTimelineInfo }} </template></MkSwitch>
+			<MkSwitch v-model="showGlobalTimeline">{{ i18n.ts.showGlobalTimeline }}</MkSwitch>
 		</div>
 	</FormSection>
-
-	<FormSection>
-		<template #label>{{ i18n.ts.displayOfNote }}</template>
+	<MkFoldableSection :defaultOpen="false" class="item">
+		<template #header>{{ i18n.ts.displayOfNote }}</template>
 
 		<div class="_gaps_m">
 			<div class="_gaps_s">
 				<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
 				<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
 				<MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch>
-				<MkSwitch v-model="showVisibilityColor">{{ i18n.ts.showVisibilityColor}}</MkSwitch>
-        <MkColorInput v-if="showVisibilityColor" v-model="homeColor">
-          <template #label>{{ i18n.ts._visibility.home }}</template>
-        </MkColorInput>
-        <MkColorInput v-if="showVisibilityColor" v-model="followerColor">
-          <template #label>{{ i18n.ts._visibility.followers }}</template>
-        </MkColorInput>
-        <MkColorInput v-if="showVisibilityColor" v-model="specifiedColor">
-          <template #label>{{ i18n.ts._visibility.specified }}</template>
-        </MkColorInput>
-        <MkColorInput v-if="showVisibilityColor" v-model="localOnlyColor">
-          <template #label>{{ i18n.ts.localOnly }}</template>
-        </MkColorInput>
+				<MkSwitch v-model="showVisibilityColor">{{ i18n.ts.showVisibilityColor }}</MkSwitch>
+				<MkColorInput v-if="showVisibilityColor" v-model="homeColor">
+					<template #label>{{ i18n.ts._visibility.home }}</template>
+				</MkColorInput>
+				<MkColorInput v-if="showVisibilityColor" v-model="followerColor">
+					<template #label>{{ i18n.ts._visibility.followers }}</template>
+				</MkColorInput>
+				<MkColorInput v-if="showVisibilityColor" v-model="specifiedColor">
+					<template #label>{{ i18n.ts._visibility.specified }}</template>
+				</MkColorInput>
+				<MkColorInput v-if="showVisibilityColor" v-model="localOnlyColor">
+					<template #label>{{ i18n.ts.localOnly }}</template>
+				</MkColorInput>
 				<MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
 				<MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch>
 				<MkSwitch v-if="advancedMfm" v-model="enableQuickAddMfmFunction">{{ i18n.ts.enableQuickAddMfmFunction }}</MkSwitch>
@@ -97,10 +96,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<option value="2_3">{{ i18n.t('limitTo', { x: '2:3' }) }}</option>
 			</MkRadios>
 		</div>
-	</FormSection>
-
-	<FormSection>
-		<template #label>{{ i18n.ts.notificationDisplay }}</template>
+	</MkFoldableSection>
+	<MkFoldableSection :defaultOpen="false" class="item">
+		<template #header>{{ i18n.ts.notificationDisplay }}</template>
 
 		<div class="_gaps_m">
 			<MkSwitch v-model="useGroupedNotifications">{{ i18n.ts.useGroupedNotifications }}</MkSwitch>
@@ -121,11 +119,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<MkButton @click="testNotification">{{ i18n.ts._notification.checkNotificationBehavior }}</MkButton>
 		</div>
-	</FormSection>
-
-	<FormSection>
-		<template #label>{{ i18n.ts.appearance }}</template>
-
+	</MkFoldableSection>
+	<MkFoldableSection :defaultOpen="false" class="item">
+		<template #header>{{ i18n.ts.appearance }}</template>
 		<div class="_gaps_m">
 			<div class="_gaps_s">
 				<MkSwitch v-model="reduceAnimation">{{ i18n.ts.reduceUiAnimation }}</MkSwitch>
@@ -139,8 +135,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="disableDrawer">{{ i18n.ts.disableDrawer }}</MkSwitch>
 				<MkSwitch v-model="forceShowAds">{{ i18n.ts.forceShowAds }}</MkSwitch>
 				<MkSwitch v-model="enableGamingMode">{{ i18n.ts.gamingMode }} <template #caption>{{ i18n.ts.gamingModeInfo }} </template></MkSwitch>
-                <MkSwitch v-model="enableonlyAndWithSave">{{ i18n.ts.onlyAndWithSave}}<template #caption>{{ i18n.ts.onlyAndWithSaveInfo }} </template></MkSwitch>
-                <MkSwitch v-model="enablehanntenn">{{ i18n.ts.hanntenn }}<template #caption>{{ i18n.ts.hanntennInfo }} </template></MkSwitch>
+				<MkSwitch v-model="enableonlyAndWithSave">{{ i18n.ts.onlyAndWithSave }}<template #caption>{{ i18n.ts.onlyAndWithSaveInfo }} </template></MkSwitch>
+				<MkSwitch v-model="enablehanntenn">{{ i18n.ts.hanntenn }}<template #caption>{{ i18n.ts.hanntennInfo }} </template></MkSwitch>
 				<MkSwitch v-model="enableSeasonalScreenEffect">{{ i18n.ts.seasonalScreenEffect }}</MkSwitch>
 			</div>
 			<div>
@@ -161,10 +157,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<option value="3"><span style="font-size: 17px;">Aa</span></option>
 			</MkRadios>
 		</div>
-	</FormSection>
-
-	<FormSection>
-		<template #label>{{ i18n.ts.behavior }}</template>
+	</MkFoldableSection>
+	<MkFoldableSection :defaultOpen="false" class="item">
+		<template #header>{{ i18n.ts.behavior }}</template>
 
 		<div class="_gaps_m">
 			<div class="_gaps_s">
@@ -184,10 +179,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #label>{{ i18n.ts.numberOfPageCache }}</template>
 				<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
 			</MkRange>
-            <MkRange v-model="numberOfGamingSpeed" :min="1" :max="60" :step="1" easing>
-                <template #label>{{ i18n.ts.GamingSpeedChange }}</template>
-                <template #caption>{{ i18n.ts.GamingSpeedChangeInfo }}</template>
-            </MkRange>
+			<MkRange v-model="numberOfGamingSpeed" :min="1" :max="60" :step="1" easing>
+				<template #label>{{ i18n.ts.GamingSpeedChange }}</template>
+				<template #caption>{{ i18n.ts.GamingSpeedChangeInfo }}</template>
+			</MkRange>
 			<MkFolder>
 				<template #label>{{ i18n.ts.dataSaver }}</template>
 
@@ -219,7 +214,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</MkFolder>
 		</div>
-	</FormSection>
+	</MkFoldableSection>
 
 	<FormSection>
 		<template #label>{{ i18n.ts.other }}</template>
@@ -261,7 +256,8 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { globalEvents } from '@/events.js';
 import { claimAchievement } from '@/scripts/achievements.js';
-import MkColorInput from "@/components/MkColorInput.vue";
+import MkColorInput from '@/components/MkColorInput.vue';
+import MkFoldableSection from '@/components/MkFoldableSection.vue';
 
 const lang = ref(miLocalStorage.getItem('lang'));
 const fontSize = ref(miLocalStorage.getItem('fontSize'));
@@ -323,7 +319,7 @@ const enableonlyAndWithSave = computed(defaultStore.makeGetterSetter('onlyAndWit
 const enablehanntenn = computed(defaultStore.makeGetterSetter('enablehanntenn'));
 const showMediaTimeline = computed(defaultStore.makeGetterSetter('showMediaTimeline'));
 const showGlobalTimeline = computed(defaultStore.makeGetterSetter('showGlobalTimeline'));
-const showVisibilityColor = computed(defaultStore.makeGetterSetter('showVisibilityColor'))
+const showVisibilityColor = computed(defaultStore.makeGetterSetter('showVisibilityColor'));
 const disableStreamingTimeline = computed(defaultStore.makeGetterSetter('disableStreamingTimeline'));
 const useGroupedNotifications = computed(defaultStore.makeGetterSetter('useGroupedNotifications'));
 const enableSeasonalScreenEffect = computed(defaultStore.makeGetterSetter('enableSeasonalScreenEffect'));
@@ -333,29 +329,31 @@ watch(lang, () => {
 	miLocalStorage.removeItem('localeVersion');
 });
 
-document.documentElement.style.setProperty('--gamingspeed', numberOfGamingSpeed.value+'s');
+document.documentElement.style.setProperty('--gamingspeed', numberOfGamingSpeed.value + 's');
+
 function hexToRgb(hex) {
-  // 16進数のカラーコードから "#" を除去
-  hex = hex.replace(/^#/, '');
+	// 16進数のカラーコードから "#" を除去
+	hex = hex.replace(/^#/, '');
 
-  // 16進数をRGBに変換
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
+	// 16進数をRGBに変換
+	const r = parseInt(hex.substring(0, 2), 16);
+	const g = parseInt(hex.substring(2, 4), 16);
+	const b = parseInt(hex.substring(4, 6), 16);
 
-  return `${r},${g},${b}`;
+	return `${r},${g},${b}`;
 }
+
 document.documentElement.style.setProperty('--homeColor', hexToRgb(homeColor.value));
-document.documentElement.style.setProperty("--followerColor",hexToRgb(followerColor.value));
-document.documentElement.style.setProperty("--specifiedColor",hexToRgb(specifiedColor.value))
-watch([homeColor,specifiedColor,followerColor], ()=>{
-  document.documentElement.style.setProperty('--homeColor', hexToRgb(homeColor.value));
-  document.documentElement.style.setProperty("--followerColor",hexToRgb(followerColor.value));
-  document.documentElement.style.setProperty("--specifiedColor",hexToRgb(specifiedColor.value))
-})
-watch(numberOfGamingSpeed, () =>{
-  document.documentElement.style.setProperty('--gamingspeed', numberOfGamingSpeed.value+'s');
-})
+document.documentElement.style.setProperty('--followerColor', hexToRgb(followerColor.value));
+document.documentElement.style.setProperty('--specifiedColor', hexToRgb(specifiedColor.value));
+watch([homeColor, specifiedColor, followerColor], () => {
+	document.documentElement.style.setProperty('--homeColor', hexToRgb(homeColor.value));
+	document.documentElement.style.setProperty('--followerColor', hexToRgb(followerColor.value));
+	document.documentElement.style.setProperty('--specifiedColor', hexToRgb(specifiedColor.value));
+});
+watch(numberOfGamingSpeed, () => {
+	document.documentElement.style.setProperty('--gamingspeed', numberOfGamingSpeed.value + 's');
+});
 watch(fontSize, () => {
 	if (fontSize.value == null) {
 		miLocalStorage.removeItem('fontSize');
@@ -388,9 +386,9 @@ watch([
 	highlightSensitiveMedia,
 	keepScreenOn,
 	showMediaTimeline,
-  showVisibilityColor,
-  enableonlyAndWithSave,
-  showGlobalTimeline,
+	showVisibilityColor,
+	enableonlyAndWithSave,
+	showGlobalTimeline,
 	disableStreamingTimeline,
 	enableSeasonalScreenEffect,
 ], async () => {
diff --git a/packages/misskey-js/src/autogen/types.ts b/packages/misskey-js/src/autogen/types.ts
index 94bb263980..978162cd6a 100644
--- a/packages/misskey-js/src/autogen/types.ts
+++ b/packages/misskey-js/src/autogen/types.ts
@@ -5431,6 +5431,7 @@ export type operations = {
               updatedAt: string | null;
               name: string;
               description: string;
+            category: string;
               url: string;
               roleIdsThatCanBeUsedThisDecoration: string[];
             })[];
@@ -14879,6 +14880,7 @@ export type operations = {
               name: string;
               description: string;
               url: string;
+              category: string;
               roleIdsThatCanBeUsedThisDecoration: string[];
             }[];
         };