From d23aa94b4150f980b43bbf26776ff45dc366ecdc Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 15 Jan 2023 08:30:29 +0900
Subject: [PATCH] refactor(client): use css modules

---
 .../frontend/src/components/MkContainer.vue   | 212 ++++++++----------
 packages/frontend/src/pages/gallery/post.vue  |   3 +-
 packages/frontend/src/pages/page.vue          |   3 +-
 .../src/pages/user/index.activity.vue         |   7 +-
 .../frontend/src/pages/user/index.photos.vue  |  49 ++--
 .../frontend/src/widgets/WidgetActivity.vue   |   5 +-
 .../frontend/src/widgets/WidgetAiscript.vue   |   3 +-
 .../frontend/src/widgets/WidgetClicker.vue    |   3 +-
 .../frontend/src/widgets/WidgetFederation.vue |   3 +-
 packages/frontend/src/widgets/WidgetMemo.vue  |   3 +-
 .../src/widgets/WidgetNotifications.vue       |   5 +-
 .../frontend/src/widgets/WidgetPhotos.vue     |   3 +-
 packages/frontend/src/widgets/WidgetRss.vue   |  19 +-
 .../frontend/src/widgets/WidgetRssTicker.vue  |  21 +-
 .../frontend/src/widgets/WidgetTimeline.vue   |  16 +-
 .../frontend/src/widgets/WidgetTrends.vue     |   3 +-
 .../frontend/src/widgets/WidgetUserList.vue   |   5 +-
 .../src/widgets/server-metric/index.vue       |   5 +-
 18 files changed, 182 insertions(+), 186 deletions(-)

diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index 962bcaf7e..0f450e0ab 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -1,26 +1,32 @@
 <template>
-<div class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
-	<header v-if="showHeader" ref="header">
-		<div class="title"><slot name="header"></slot></div>
-		<div class="sub">
-			<slot name="func"></slot>
-			<button v-if="foldable" class="_button" @click="() => showBody = !showBody">
+<div class="_panel" :class="[$style.root, { [$style.naked]: naked, [$style.thin]: thin, [$style.hideHeader]: !showHeader, [$style.scrollable]: scrollable, [$style.closed]: !showBody }]">
+	<header v-if="showHeader" ref="header" :class="$style.header">
+		<div :class="$style.title">
+			<span :class="$style.titleIcon"><slot name="icon"></slot></span>
+			<slot name="header"></slot>
+		</div>
+		<div :class="$style.headerSub">
+			<slot name="func" :button-style-class="$style.headerButton"></slot>
+			<button v-if="foldable" :class="$style.headerButton" class="_button" @click="() => showBody = !showBody">
 				<template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
 				<template v-else><i class="ti ti-chevron-down"></i></template>
 			</button>
 		</div>
 	</header>
 	<Transition
-		:name="$store.state.animation ? 'container-toggle' : ''"
+		: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"
 	>
-		<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
+		<div v-show="showBody" ref="content" :class="[$style.content, { omitted }]">
 			<slot></slot>
-			<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
-				<span>{{ $ts.showMore }}</span>
+			<button v-if="omitted" :class="$style.fade" class="_button" @click="() => { ignoreOmit = true; omitted = false; }">
+				<span :class="$style.fadeLabel">{{ $ts.showMore }}</span>
 			</button>
 		</div>
 	</Transition>
@@ -129,19 +135,18 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.container-toggle-enter-active, .container-toggle-leave-active {
+<style lang="scss" module>
+.transition_toggle_enterActive,
+.transition_toggle_leaveActive {
 	overflow-y: clip;
 	transition: opacity 0.5s, height 0.5s !important;
 }
-.container-toggle-enter-from {
-	opacity: 0;
-}
-.container-toggle-leave-to {
+.transition_toggle_enterFrom,
+.transition_toggle_leaveTo {
 	opacity: 0;
 }
 
-.ukygtjoj {
+.root {
 	position: relative;
 	overflow: clip;
 	contain: content;
@@ -160,116 +165,93 @@ export default defineComponent({
 		}
 	}
 
-	> header {
-		position: sticky;
-		top: var(--stickyTop, 0px);
-		left: 0;
-		color: var(--panelHeaderFg);
-		background: var(--panelHeaderBg);
-		border-bottom: solid 0.5px var(--panelHeaderDivider);
-		z-index: 2;
-		line-height: 1.4em;
-
-		> .title {
-			margin: 0;
-			padding: 12px 16px;
-
-			> ::v-deep(i) {
-				margin-right: 6px;
-			}
-
-			&:empty {
-				display: none;
-			}
-		}
-
-		> .sub {
-			position: absolute;
-			z-index: 2;
-			top: 0;
-			right: 0;
-			height: 100%;
-
-			> ::v-deep(button) {
-				width: 42px;
-				height: 100%;
-			}
-		}
-	}
-
-	> .content {
-		--stickyTop: 0px;
-
-		&.omitted {
-			position: relative;
-			max-height: var(--maxHeight);
-			overflow: hidden;
-
-			> .fade {
-				display: block;
-				position: absolute;
-				z-index: 10;
-				bottom: 0;
-				left: 0;
-				width: 100%;
-				height: 64px;
-				background: linear-gradient(0deg, var(--panel), var(--X15));
-
-				> span {
-					display: inline-block;
-					background: var(--panel);
-					padding: 6px 10px;
-					font-size: 0.8em;
-					border-radius: 999px;
-					box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-				}
-
-				&:hover {
-					> span {
-						background: var(--panelHighlight);
-					}
-				}
-			}
-		}
-	}
-
 	&.thin {
-		> header {
+		> .header {
 			> .title {
 				padding: 8px 10px;
 				font-size: 0.9em;
 			}
 		}
+	}
+}
 
-		> .content {
+.header {
+	position: sticky;
+	top: var(--stickyTop, 0px);
+	left: 0;
+	color: var(--panelHeaderFg);
+	background: var(--panelHeaderBg);
+	border-bottom: solid 0.5px var(--panelHeaderDivider);
+	z-index: 2;
+	line-height: 1.4em;
+}
+
+.title {
+	margin: 0;
+	padding: 12px 16px;
+
+	&:empty {
+		display: none;
+	}
+}
+
+.titleIcon {
+	margin-right: 6px;
+}
+
+.headerSub {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	right: 0;
+	height: 100%;
+}
+
+.headerButton {
+	width: 42px;
+	height: 100%;
+}
+
+.content {
+	--stickyTop: 0px;
+
+	&.omitted {
+		position: relative;
+		max-height: var(--maxHeight);
+		overflow: hidden;
+
+		> .fade {
+			display: block;
+			position: absolute;
+			z-index: 10;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 64px;
+			background: linear-gradient(0deg, var(--panel), var(--X15));
+
+			> .fadeLabel {
+				display: inline-block;
+				background: var(--panel);
+				padding: 6px 10px;
+				font-size: 0.8em;
+				border-radius: 999px;
+				box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+			}
+
+			&:hover {
+				> .fadeLabel {
+					background: var(--panelHighlight);
+				}
+			}
 		}
 	}
 }
 
 @container (max-width: 380px) {
-	.ukygtjoj {
-		> header {
-			> .title {
-				padding: 8px 10px;
-				font-size: 0.9em;
-			}
-		}
-	}
-}
-
-._forceContainerFull_ .ukygtjoj {
-	> header {
-		> .title {
-			padding: 12px 16px !important;
-		}
-	}
-}
-
-._forceContainerFull_.ukygtjoj {
-	> header {
-		> .title {
-			padding: 12px 16px !important;
-		}
+	.title {
+		padding: 8px 10px;
+		font-size: 0.9em;
 	}
 }
 </style>
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
index 30f63cf3a..1ea9a7258 100644
--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -38,7 +38,8 @@
 					</div>
 					<MkAd :prefer="['horizontal', 'horizontal-big']"/>
 					<MkContainer :max-height="300" :foldable="true" class="other">
-						<template #header><i class="ti ti-clock"></i> {{ i18n.ts.recentPosts }}</template>
+						<template #icon><i class="ti ti-clock"></i></template>
+						<template #header>{{ i18n.ts.recentPosts }}</template>
 						<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
 							<div class="sdrarzaf">
 								<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index 7f0871a5f..ffb198ea1 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -49,7 +49,8 @@
 				</div>
 				<MkAd :prefer="['horizontal', 'horizontal-big']"/>
 				<MkContainer :max-height="300" :foldable="true" class="other">
-					<template #header><i class="ti ti-clock"></i> {{ i18n.ts.recentPosts }}</template>
+					<template #icon><i class="ti ti-clock"></i></template>
+					<template #header>{{ i18n.ts.recentPosts }}</template>
 					<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
 						<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_margin"/>
 					</MkPagination>
diff --git a/packages/frontend/src/pages/user/index.activity.vue b/packages/frontend/src/pages/user/index.activity.vue
index 0cc152466..8ff337444 100644
--- a/packages/frontend/src/pages/user/index.activity.vue
+++ b/packages/frontend/src/pages/user/index.activity.vue
@@ -1,8 +1,9 @@
 <template>
 <MkContainer>
-	<template #header><i class="ti ti-chart-line" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
-	<template #func>
-		<button class="_button" @click="showMenu">
+	<template #icon><i class="ti ti-chart-line"></i></template>
+	<template #header>{{ $ts.activity }}</template>
+	<template #func="{ buttonStyleClass }">
+		<button class="_button" :class="buttonStyleClass" @click="showMenu">
 			<i class="ti ti-dots"></i>
 		</button>
 	</template>
diff --git a/packages/frontend/src/pages/user/index.photos.vue b/packages/frontend/src/pages/user/index.photos.vue
index fd975b52b..607082c1e 100644
--- a/packages/frontend/src/pages/user/index.photos.vue
+++ b/packages/frontend/src/pages/user/index.photos.vue
@@ -1,19 +1,20 @@
 <template>
 <MkContainer :max-height="300" :foldable="true">
-	<template #header><i class="ti ti-photo" style="margin-right: 0.5em;"></i>{{ $ts.images }}</template>
-	<div class="ujigsodd">
+	<template #icon><i class="ti ti-photo"></i></template>
+	<template #header>{{ $ts.images }}</template>
+	<div :class="$style.root">
 		<MkLoading v-if="fetching"/>
-		<div v-if="!fetching && images.length > 0" class="stream">
+		<div v-if="!fetching && images.length > 0" :class="$style.stream">
 			<MkA
 				v-for="image in images"
 				:key="image.note.id + image.file.id"
-				class="img"
+				:class="$style.img"
 				:to="notePage(image.note)"
 			>
 				<ImgWithBlurhash :hash="image.file.blurhash" :src="thumbnail(image.file)" :title="image.file.name"/>
 			</MkA>
 		</div>
-		<p v-if="!fetching && images.length == 0" class="empty">{{ $ts.nothing }}</p>
+		<p v-if="!fetching && images.length == 0" :class="$style.empty">{{ $ts.nothing }}</p>
 	</div>
 </MkContainer>
 </template>
@@ -73,30 +74,26 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.ujigsodd {
+<style lang="scss" module>
+.root {
 	padding: 8px;
+}
 
-	> .stream {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-		grid-gap: 6px;
+.stream {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+	grid-gap: 6px;
+}
 
-		> .img {
-			height: 128px;
-			border-radius: 6px;
-			overflow: clip;
-		}
-	}
+.img {
+	height: 128px;
+	border-radius: 6px;
+	overflow: clip;
+}
 
-	> .empty {
-		margin: 0;
-		padding: 16px;
-		text-align: center;
-
-		> i {
-			margin-right: 4px;
-		}
-	}
+.empty {
+	margin: 0;
+	padding: 16px;
+	text-align: center;
 }
 </style>
diff --git a/packages/frontend/src/widgets/WidgetActivity.vue b/packages/frontend/src/widgets/WidgetActivity.vue
index 116da15b4..183403678 100644
--- a/packages/frontend/src/widgets/WidgetActivity.vue
+++ b/packages/frontend/src/widgets/WidgetActivity.vue
@@ -1,7 +1,8 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" class="mkw-activity">
-	<template #header><i class="ti ti-chart-line"></i>{{ i18n.ts._widgets.activity }}</template>
-	<template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
+	<template #icon><i class="ti ti-chart-line"></i></template>
+	<template #header>{{ i18n.ts._widgets.activity }}</template>
+	<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
 
 	<div>
 		<MkLoading v-if="fetching"/>
diff --git a/packages/frontend/src/widgets/WidgetAiscript.vue b/packages/frontend/src/widgets/WidgetAiscript.vue
index dcc73db20..2e49a354e 100644
--- a/packages/frontend/src/widgets/WidgetAiscript.vue
+++ b/packages/frontend/src/widgets/WidgetAiscript.vue
@@ -1,6 +1,7 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript">
-	<template #header><i class="ti ti-terminal-2"></i>{{ i18n.ts._widgets.aiscript }}</template>
+	<template #icon><i class="ti ti-terminal-2"></i></template>
+	<template #header>{{ i18n.ts._widgets.aiscript }}</template>
 
 	<div class="uylguesu _monospace">
 		<textarea v-model="widgetProps.script" placeholder="(1 + 1)"></textarea>
diff --git a/packages/frontend/src/widgets/WidgetClicker.vue b/packages/frontend/src/widgets/WidgetClicker.vue
index 168f05bcc..66c3fbd9d 100644
--- a/packages/frontend/src/widgets/WidgetClicker.vue
+++ b/packages/frontend/src/widgets/WidgetClicker.vue
@@ -1,6 +1,7 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-clicker">
-	<template #header><i class="ti ti-cookie"></i>Clicker</template>
+	<template #icon><i class="ti ti-cookie"></i></template>
+	<template #header>Clicker</template>
 	<MkClickerGame/>
 </MkContainer>
 </template>
diff --git a/packages/frontend/src/widgets/WidgetFederation.vue b/packages/frontend/src/widgets/WidgetFederation.vue
index 23f7cd441..ea82b0c12 100644
--- a/packages/frontend/src/widgets/WidgetFederation.vue
+++ b/packages/frontend/src/widgets/WidgetFederation.vue
@@ -1,6 +1,7 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" :foldable="foldable" :scrollable="scrollable" class="mkw-federation">
-	<template #header><i class="ti ti-whirl"></i>{{ i18n.ts._widgets.federation }}</template>
+	<template #icon><i class="ti ti-whirl"></i></template>
+	<template #header>{{ i18n.ts._widgets.federation }}</template>
 
 	<div class="wbrkwalb">
 		<MkLoading v-if="fetching"/>
diff --git a/packages/frontend/src/widgets/WidgetMemo.vue b/packages/frontend/src/widgets/WidgetMemo.vue
index 1cc0e10bb..d5d96165c 100644
--- a/packages/frontend/src/widgets/WidgetMemo.vue
+++ b/packages/frontend/src/widgets/WidgetMemo.vue
@@ -1,6 +1,7 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-memo">
-	<template #header><i class="ti ti-note"></i>{{ i18n.ts._widgets.memo }}</template>
+	<template #icon><i class="ti ti-note"></i></template>
+	<template #header>{{ i18n.ts._widgets.memo }}</template>
 
 	<div class="otgbylcu">
 		<textarea v-model="text" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea>
diff --git a/packages/frontend/src/widgets/WidgetNotifications.vue b/packages/frontend/src/widgets/WidgetNotifications.vue
index e69720944..89f3114b8 100644
--- a/packages/frontend/src/widgets/WidgetNotifications.vue
+++ b/packages/frontend/src/widgets/WidgetNotifications.vue
@@ -1,7 +1,8 @@
 <template>
 <MkContainer :style="`height: ${widgetProps.height}px;`" :show-header="widgetProps.showHeader" :scrollable="true" class="mkw-notifications">
-	<template #header><i class="ti ti-bell"></i>{{ i18n.ts.notifications }}</template>
-	<template #func><button class="_button" @click="configureNotification()"><i class="ti ti-settings"></i></button></template>
+	<template #icon><i class="ti ti-bell"></i></template>
+	<template #header>{{ i18n.ts.notifications }}</template>
+	<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configureNotification()"><i class="ti ti-settings"></i></button></template>
 
 	<div>
 		<XNotifications :include-types="widgetProps.includingTypes"/>
diff --git a/packages/frontend/src/widgets/WidgetPhotos.vue b/packages/frontend/src/widgets/WidgetPhotos.vue
index 65d1de138..4e55bb992 100644
--- a/packages/frontend/src/widgets/WidgetPhotos.vue
+++ b/packages/frontend/src/widgets/WidgetPhotos.vue
@@ -1,6 +1,7 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" :class="$style.root" :data-transparent="widgetProps.transparent ? true : null" class="mkw-photos">
-	<template #header><i class="ti ti-camera"></i>{{ i18n.ts._widgets.photos }}</template>
+	<template #icon><i class="ti ti-camera"></i></template>
+	<template #header>{{ i18n.ts._widgets.photos }}</template>
 
 	<div class="">
 		<MkLoading v-if="fetching"/>
diff --git a/packages/frontend/src/widgets/WidgetRss.vue b/packages/frontend/src/widgets/WidgetRss.vue
index 554413cd1..a25bd67aa 100644
--- a/packages/frontend/src/widgets/WidgetRss.vue
+++ b/packages/frontend/src/widgets/WidgetRss.vue
@@ -1,16 +1,17 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-rss">
-	<template #header><i class="ti ti-rss"></i>RSS</template>
-	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
+	<template #icon><i class="ti ti-rss"></i></template>
+	<template #header>RSS</template>
+	<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure"><i class="ti ti-settings"></i></button></template>
 
 	<div class="ekmkgxbj">
 		<MkLoading v-if="fetching"/>
-		<div class="_fullinfo" v-else-if="(!items || items.length === 0) && widgetProps.showHeader">
+		<div v-else-if="(!items || items.length === 0) && widgetProps.showHeader" class="_fullinfo">
 			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
 			<div>{{ i18n.ts.nothing }}</div>
 		</div>
 		<div v-else :class="$style.feed">
-			<a v-for="item in items" :class="$style.item" :href="item.link" :key="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a>
+			<a v-for="item in items" :key="item.link" :class="$style.item" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a>
 		</div>
 	</div>
 </MkContainer>
@@ -74,11 +75,11 @@ const tick = () => {
 	if (document.visibilityState === 'hidden' && rawItems.value.length !== 0) return;
 
 	window.fetch(fetchEndpoint.value, {})
-	.then(res => res.json())
-	.then(feed => {
-		rawItems.value = feed.items ?? [];
-		fetching.value = false;
-	});
+		.then(res => res.json())
+		.then(feed => {
+			rawItems.value = feed.items ?? [];
+			fetching.value = false;
+		});
 };
 
 watch(() => fetchEndpoint, tick);
diff --git a/packages/frontend/src/widgets/WidgetRssTicker.vue b/packages/frontend/src/widgets/WidgetRssTicker.vue
index 2620ff4eb..a7488f4ca 100644
--- a/packages/frontend/src/widgets/WidgetRssTicker.vue
+++ b/packages/frontend/src/widgets/WidgetRssTicker.vue
@@ -1,7 +1,8 @@
 <template>
 <MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-rss-ticker">
-	<template #header><i class="ti ti-rss"></i>RSS</template>
-	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
+	<template #icon><i class="ti ti-rss"></i></template>
+	<template #header>RSS</template>
+	<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure"><i class="ti ti-settings"></i></button></template>
 
 	<div :class="$style.feed">
 		<div v-if="fetching" :class="$style.loading">
@@ -10,7 +11,7 @@
 		<div v-else>
 			<Transition :name="$style.change" mode="default" appear>
 				<MarqueeText :key="key" :duration="widgetProps.duration" :reverse="widgetProps.reverse">
-					<span v-for="item in items" :class="$style.item" :key="item.link">
+					<span v-for="item in items" :key="item.link" :class="$style.item">
 						<a :class="$style.link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span :class="$style.divider"></span>
 					</span>
 				</MarqueeText>
@@ -86,7 +87,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 
 const rawItems = ref([]);
 const items = computed(() => {
-	const newItems = rawItems.value.slice(0, widgetProps.maxEntries)
+	const newItems = rawItems.value.slice(0, widgetProps.maxEntries);
 	if (widgetProps.shuffle) {
 		shuffle(newItems);
 	}
@@ -106,12 +107,12 @@ const tick = () => {
 	if (document.visibilityState === 'hidden' && rawItems.value.length !== 0) return;
 
 	window.fetch(fetchEndpoint.value, {})
-	.then(res => res.json())
-	.then(feed => {
-		rawItems.value = feed.items ?? [];
-		fetching.value = false;
-		key++;
-	});
+		.then(res => res.json())
+		.then(feed => {
+			rawItems.value = feed.items ?? [];
+			fetching.value = false;
+			key++;
+		});
 };
 
 watch(() => fetchEndpoint, tick);
diff --git a/packages/frontend/src/widgets/WidgetTimeline.vue b/packages/frontend/src/widgets/WidgetTimeline.vue
index 5bd626cd0..8618dbc2e 100644
--- a/packages/frontend/src/widgets/WidgetTimeline.vue
+++ b/packages/frontend/src/widgets/WidgetTimeline.vue
@@ -1,14 +1,16 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" :style="`height: ${widgetProps.height}px;`" :scrollable="true" class="mkw-timeline">
+	<template #icon>
+		<i v-if="widgetProps.src === 'home'" class="ti ti-home"></i>
+		<i v-else-if="widgetProps.src === 'local'" class="ti ti-planet"></i>
+		<i v-else-if="widgetProps.src === 'social'" class="ti ti-rocket"></i>
+		<i v-else-if="widgetProps.src === 'global'" class="ti ti-whirl"></i>
+		<i v-else-if="widgetProps.src === 'list'" class="ti ti-list"></i>
+		<i v-else-if="widgetProps.src === 'antenna'" class="ti ti-antenna"></i>
+	</template>
 	<template #header>
 		<button class="_button" @click="choose">
-			<i v-if="widgetProps.src === 'home'" class="ti ti-home"></i>
-			<i v-else-if="widgetProps.src === 'local'" class="ti ti-planet"></i>
-			<i v-else-if="widgetProps.src === 'social'" class="ti ti-rocket"></i>
-			<i v-else-if="widgetProps.src === 'global'" class="ti ti-whirl"></i>
-			<i v-else-if="widgetProps.src === 'list'" class="ti ti-list"></i>
-			<i v-else-if="widgetProps.src === 'antenna'" class="ti ti-antenna"></i>
-			<span style="margin-left: 8px;">{{ widgetProps.src === 'list' ? widgetProps.list.name : widgetProps.src === 'antenna' ? widgetProps.antenna.name : $t('_timelines.' + widgetProps.src) }}</span>
+			<span>{{ widgetProps.src === 'list' ? widgetProps.list.name : widgetProps.src === 'antenna' ? widgetProps.antenna.name : $t('_timelines.' + widgetProps.src) }}</span>
 			<i :class="menuOpened ? 'ti ti-chevron-up' : 'ti ti-chevron-down'" style="margin-left: 8px;"></i>
 		</button>
 	</template>
diff --git a/packages/frontend/src/widgets/WidgetTrends.vue b/packages/frontend/src/widgets/WidgetTrends.vue
index e50044816..94849fdba 100644
--- a/packages/frontend/src/widgets/WidgetTrends.vue
+++ b/packages/frontend/src/widgets/WidgetTrends.vue
@@ -1,6 +1,7 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
-	<template #header><i class="ti ti-hash"></i>{{ i18n.ts._widgets.trends }}</template>
+	<template #icon><i class="ti ti-hash"></i></template>
+	<template #header>{{ i18n.ts._widgets.trends }}</template>
 
 	<div class="wbrkwala">
 		<MkLoading v-if="fetching"/>
diff --git a/packages/frontend/src/widgets/WidgetUserList.vue b/packages/frontend/src/widgets/WidgetUserList.vue
index 9ffbf0d8e..1d9f8751f 100644
--- a/packages/frontend/src/widgets/WidgetUserList.vue
+++ b/packages/frontend/src/widgets/WidgetUserList.vue
@@ -1,7 +1,8 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-userList">
-	<template #header><i class="ti ti-users"></i>{{ list ? list.name : i18n.ts._widgets.userList }}</template>
-	<template #func><button class="_button" @click="configure()"><i class="ti ti-settings"></i></button></template>
+	<template #icon><i class="ti ti-users"></i></template>
+	<template #header>{{ list ? list.name : i18n.ts._widgets.userList }}</template>
+	<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure()"><i class="ti ti-settings"></i></button></template>
 
 	<div :class="$style.root">
 		<div v-if="widgetProps.listId == null" class="init">
diff --git a/packages/frontend/src/widgets/server-metric/index.vue b/packages/frontend/src/widgets/server-metric/index.vue
index bc3fca6fc..b7537e195 100644
--- a/packages/frontend/src/widgets/server-metric/index.vue
+++ b/packages/frontend/src/widgets/server-metric/index.vue
@@ -1,7 +1,8 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent">
-	<template #header><i class="ti ti-server"></i>{{ i18n.ts._widgets.serverMetric }}</template>
-	<template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
+	<template #icon><i class="ti ti-server"></i></template>
+	<template #header>{{ i18n.ts._widgets.serverMetric }}</template>
+	<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
 
 	<div v-if="meta" class="mkw-serverMetric">
 		<XCpuMemory v-if="widgetProps.view === 0" :connection="connection" :meta="meta"/>