enhance(client): tweak MkFolder component

1 files changed, 47 insertions, 43 deletions

diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index a54a1c2305..2748a9e491 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -1,41 +1,46 @@
 <template>
-<div ref="rootEl" :class="[$style.root, { [$style.opened]: opened }]">
-	<div :class="$style.header" class="_button" @click="toggle">
-		<div :class="$style.headerIcon"><slot name="icon"></slot></div>
-		<div :class="$style.headerText">
-			<div :class="$style.headerTextMain">
-				<slot name="label"></slot>
-			</div>
-			<div :class="$style.headerTextSub">
-				<slot name="caption"></slot>
+<div ref="rootEl" :class="$style.root">
+	<MkStickyContainer>
+		<template #header>
+			<div :class="[$style.header, { [$style.opened]: opened }]" class="_button" @click="toggle">
+				<div :class="$style.headerIcon"><slot name="icon"></slot></div>
+				<div :class="$style.headerText">
+					<div :class="$style.headerTextMain">
+						<slot name="label"></slot>
+					</div>
+					<div :class="$style.headerTextSub">
+						<slot name="caption"></slot>
+					</div>
+				</div>
+				<div :class="$style.headerRight">
+					<span :class="$style.headerRightText"><slot name="suffix"></slot></span>
+					<i v-if="opened" class="ti ti-chevron-up icon"></i>
+					<i v-else class="ti ti-chevron-down icon"></i>
+				</div>
 			</div>
+		</template>
+
+		<div v-if="openedAtLeastOnce" :class="[$style.body, { [$style.bgSame]: bgSame }]" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : null, overflow: maxHeight ? `auto` : null }">
+			<Transition
+				:enter-active-class="$store.state.animation ? $style.transition_toggle_enterActive : ''"
+				:leave-active-class="$store.state.animation ? $style.transition_toggle_leaveActive : ''"
+				:enter-from-class="$store.state.animation ? $style.transition_toggle_enterFrom : ''"
+				:leave-to-class="$store.state.animation ? $style.transition_toggle_leaveTo : ''"
+				@enter="enter"
+				@after-enter="afterEnter"
+				@leave="leave"
+				@after-leave="afterLeave"
+			>
+				<KeepAlive>
+					<div v-show="opened">
+						<MkSpacer :margin-min="14" :margin-max="22">
+							<slot></slot>
+						</MkSpacer>
+					</div>
+				</KeepAlive>
+			</Transition>
 		</div>
-		<div :class="$style.headerRight">
-			<span :class="$style.headerRightText"><slot name="suffix"></slot></span>
-			<i v-if="opened" class="ti ti-chevron-up icon"></i>
-			<i v-else class="ti ti-chevron-down icon"></i>
-		</div>
-	</div>
-	<div v-if="openedAtLeastOnce" :class="[$style.body, { [$style.bgSame]: bgSame }]" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : null }">
-		<Transition
-			:enter-active-class="$store.state.animation ? $style.transition_toggle_enterActive : ''"
-			:leave-active-class="$store.state.animation ? $style.transition_toggle_leaveActive : ''"
-			:enter-from-class="$store.state.animation ? $style.transition_toggle_enterFrom : ''"
-			:leave-to-class="$store.state.animation ? $style.transition_toggle_leaveTo : ''"
-			@enter="enter"
-			@after-enter="afterEnter"
-			@leave="leave"
-			@after-leave="afterLeave"
-		>
-			<KeepAlive>
-				<div v-show="opened">
-					<MkSpacer :margin-min="14" :margin-max="22">
-						<slot></slot>
-					</MkSpacer>
-				</div>
-			</KeepAlive>
-		</Transition>
-	</div>
+	</MkStickyContainer>
 </div>
 </template>
 
@@ -117,12 +122,6 @@ onMounted(() => {
 
 .root {
 	display: block;
-
-	&.opened {
-		> .header {
-			border-radius: 6px 6px 0 0;
-		}
-	}
 }
 
 .header {
@@ -132,6 +131,8 @@ onMounted(() => {
 	box-sizing: border-box;
 	padding: 9px 12px 9px 12px;
 	background: var(--buttonBg);
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
 	border-radius: 6px;
 	transition: border-radius 0.3s;
 
@@ -144,6 +145,10 @@ onMounted(() => {
 		color: var(--accent);
 		background: var(--buttonHoverBg);
 	}
+
+	&.opened {
+		border-radius: 6px 6px 0 0;
+	}
 }
 
 .headerUpper {
@@ -153,7 +158,7 @@ onMounted(() => {
 
 .headerLower {
 	color: var(--fgTransparentWeak);
-    font-size: .85em;
+	font-size: .85em;
 	padding-left: 4px;
 }
 
@@ -202,7 +207,6 @@ onMounted(() => {
 	background: var(--panel);
 	border-radius: 0 0 6px 6px;
 	container-type: inline-size;
-	overflow: auto;
 
 	&.bgSame {
 		background: var(--bg);