13.0.0-rc.7

Fix #9570

CHANGELOG.md

@@ -125,6 +125,7 @@ You should also include the user name that made the change.
 - Client: clicker game @syuilo
 
 ### Bugfixes
+- Server: Fix @tensorflow/tfjs-core's MODULE_NOT_FOUND error @ikuradon
 - Server: 引用内の文章がnyaizeされてしまう問題を修正 @kabo2468
 - Server: Bug fix for Pinned Users lookup on instance @squidicuzz
 - Server: Fix peers API returning suspended instances @ineffyble

cypress/e2e/widgets.cy.js

@@ -37,7 +37,7 @@ describe('After user signed in', () => {
 		it(`${widgetName} widget should get added`, () => {
 			cy.get('.mk-widget-edit').click();
 			cy.get('.mk-widget-select select').select(widgetName, { force: true });
-			cy.get('.bg._modalBg.transparent').click({ multiple: true, force: true });
+			cy.get('.data-cy-bg._modalBg.data-cy-transparent').click({ multiple: true, force: true });
 			cy.get('.mk-widget-add').click({ force: true });
 			cy.get(`.mkw-${widgetName}`).should('exist');
 		});

docker-compose.yml

@@ -8,6 +8,11 @@ services:
       - db
       - redis
 #      - es
+    depends_on:
+      db:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
     ports:
       - "3000:3000"
     networks:
@@ -24,6 +29,10 @@ services:
       - internal_network
     volumes:
       - ./redis:/data
+    healthcheck:
+      test: "redis-cli ping"
+      interval: 5s
+      retries: 20
 
   db:
     restart: always
@@ -34,6 +43,10 @@ services:
       - .config/docker.env
     volumes:
       - ./db:/var/lib/postgresql/data
+    healthcheck:
+      test: "pg_isready"
+      interval: 5s
+      retries: 20
 
 #  es:
 #    restart: always

locales/ko-KR.yml

@@ -907,7 +907,7 @@ subscribePushNotification: "푸시 알림 켜기"
 unsubscribePushNotification: "푸시 알림 끄기"
 pushNotificationAlreadySubscribed: "푸시 알림이 이미 켜져 있습니다"
 pushNotificationNotSupported: "브라우저나 인스턴스에서 푸시 알림이 지원되지 않습니다"
-sendPushNotificationReadMessage: "푸시 알림이니 메시지를 읽으면 푸시 알림을 삭제합니다"
+sendPushNotificationReadMessage: "푸시 알림이나 메시지를 읽은 뒤 푸시 알림을 삭제"
 sendPushNotificationReadMessageCaption: "「{emptyPushNotificationMessage}」이라는 알림이 잠깐 표시됩니다. 기기의 전력 소비량이 증가할 수 있습니다."
 windowMaximize: "최대화"
 windowRestore: "복구"
@@ -926,15 +926,26 @@ didYouLikeMisskey: "Misskey가 마음에 드시나요?"
 pleaseDonate: "{host}은(는) 무료 소프트웨어 Misskey를 사용합니다. 후원을 통해 저희의 개발이 이어질 수 있게 도와주세요!"
 roles: "역할"
 role: "역할"
+normalUser: "일반 사용자"
 undefined: "정의되지 않음"
 assign: "할당"
 unassign: "할당 취소"
 color: "색"
+manageCustomEmojis: "커스텀 이모지 관리"
+youCannotCreateAnymore: "더 이상 생성할 수 없습니다."
 _role:
   new: "새 역할 생성"
   edit: "역할 수정"
   name: "역할 이름"
   description: "역할 설명"
+  permission: "역할의 권한"
+  descriptionOfPermission: "<b>모더레이터</b>는 기본적인 중재와 관련된 작업을 수행할 수 있습니다.\n<b>관리자</b>는 인스턴스의 모든 설정을 변경할 수 있습니다."
+  assignTarget: "할당 대상"
+  descriptionOfAssignTarget: "<b>수동</b>을 선택하면 누가 이 역할에 포함되는지를 수동으로 관리할 수 있습니다.\n<b>조건부</b>를 선택하면 조건을 설정해 일치하는 사용자를 자동으로 포함되게 할 수 있습니다."
+  manual: "수동"
+  conditional: "조건부"
+  condition: "조건"
+  isConditionalRole: "조건부 역할입니다."
   isPublic: "공개 역할"
   descriptionOfIsPublic: "역할에 할당된 사용자를 누구나 볼 수 있습니다. 또한 사용자 프로필에 이 역할이 표시됩니다."
   options: "옵션"
@@ -947,8 +958,29 @@ _role:
     gtlAvailable: "글로벌 타임라인 보이기"
     ltlAvailable: "로컬 타임라인 보이기"
     canPublicNote: "공개 노트 허용"
+    canInvite: "인스턴스 초대 코드 발행"
+    canManageCustomEmojis: "커스텀 이모지 관리"
     driveCapacity: "드라이브 용량"
+    pinMax: "고정할 수 있는 노트 수"
     antennaMax: "최대 안테나 생성 허용 수"
+    wordMuteMax: "뮤트할 수 있는 단어의 수"
+    webhookMax: "생성할 수 있는 WebHook의 수"
+    clipMax: "생성할 수 있는 클립 수"
+    noteEachClipsMax: "각 클립에 추가할 수 있는 노트 수"
+    userListMax: "생성할 수 있는 리스트 수"
+    userEachUserListsMax: "리스트당 최대 사용자 수"
+  _condition:
+    isLocal: "로컬 사용자"
+    isRemote: "리모트 사용자"
+    createdLessThan: "다음 일수 이내에 가입한 유저"
+    createdMoreThan: "다음 일수 이상 활동한 유저"
+    followersLessThanOrEq: "팔로워 수가 다음 이하인 유저"
+    followersMoreThanOrEq: "팔로워 수가 다음 이상인 유저"
+    followingLessThanOrEq: "팔로잉 수가 다음 이하인 유저"
+    followingMoreThanOrEq: "팔로잉 수가 다음 이상인 유저"
+    and: "다음을 모두 만족"
+    or: "다음을 하나라도 만족"
+    not: "다음을 만족하지 않음"
 _sensitiveMediaDetection:
   description: "기계학습을 통해 자동으로 민감한 미디어를 탐지하여, 모더레이션에 참고할 수 있도록 합니다. 서버의 부하를 약간 증가시킵니다."
   sensitivity: "탐지 민감도"
@@ -1352,7 +1384,7 @@ _widgets:
   aiscript: "AiScript 콘솔"
   aiscriptApp: "AiScript 앱"
   aichan: "아이"
-  userList: "사용자 목록"
+  userList: "유저 리스트"
   _userList:
     chooseList: "리스트 선택"
   clicker: "클리커"

locales/zh-TW.yml

@@ -960,6 +960,7 @@ _role:
     canInvite: "發行實例邀請碼"
     canManageCustomEmojis: "管理自訂表情符號"
     driveCapacity: "雲端硬碟容量"
+    pinMax: "置頂貼文的最大數量"
     antennaMax: "可建立的天線數量"
     webhookMax: "可建立的Webhook數量"
     clipMax: "可建立的摘錄數量"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "13.0.0-rc.5",
+	"version": "13.0.0-rc.7",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",
@@ -53,12 +53,15 @@
 	"devDependencies": {
 		"@types/gulp": "4.0.10",
 		"@types/gulp-rename": "2.0.1",
-		"@typescript-eslint/eslint-plugin": "5.48.0",
+		"@typescript-eslint/eslint-plugin": "5.48.1",
-		"@typescript-eslint/parser": "5.48.0",
+		"@typescript-eslint/parser": "5.48.1",
 		"cross-env": "7.0.3",
 		"cypress": "12.3.0",
 		"eslint": "^8.31.0",
 		"start-server-and-test": "1.15.2",
 		"typescript": "4.9.4"
+	},
+	"optionalDependencies": {
+		"@tensorflow/tfjs-core": "^4.2.0"
 	}
 }

packages/backend/package.json

@@ -21,17 +21,17 @@
 		"@tensorflow/tfjs-node": "4.1.0"
 	},
 	"dependencies": {
-		"@bull-board/api": "^4.10.1",
+		"@bull-board/api": "^4.10.2",
-		"@bull-board/fastify": "^4.10.1",
+		"@bull-board/fastify": "^4.10.2",
-		"@bull-board/ui": "^4.10.1",
+		"@bull-board/ui": "^4.10.2",
 		"@discordapp/twemoji": "14.0.2",
 		"@fastify/accepts": "4.1.0",
 		"@fastify/cookie": "^8.3.0",
 		"@fastify/cors": "8.2.0",
 		"@fastify/http-proxy": "^8.4.0",
-		"@fastify/multipart": "7.3.0",
+		"@fastify/multipart": "7.4.0",
-		"@fastify/static": "6.6.0",
+		"@fastify/static": "6.6.1",
-		"@fastify/view": "7.3.0",
+		"@fastify/view": "7.4.0",
 		"@nestjs/common": "9.2.1",
 		"@nestjs/core": "9.2.1",
 		"@nestjs/testing": "9.2.1",
@@ -41,7 +41,7 @@
 		"ajv": "8.12.0",
 		"archiver": "5.3.1",
 		"autwh": "0.1.0",
-		"aws-sdk": "2.1289.0",
+		"aws-sdk": "2.1295.0",
 		"bcryptjs": "2.4.3",
 		"blurhash": "2.0.4",
 		"bull": "4.10.2",
@@ -58,7 +58,7 @@
 		"escape-regexp": "0.0.1",
 		"fastify": "4.11.0",
 		"feed": "4.2.2",
-		"file-type": "18.0.0",
+		"file-type": "18.1.0",
 		"fluent-ffmpeg": "2.1.2",
 		"form-data": "^4.0.0",
 		"got": "12.5.3",
@@ -67,7 +67,7 @@
 		"ip-cidr": "3.0.11",
 		"is-svg": "4.3.2",
 		"js-yaml": "4.1.0",
-		"jsdom": "20.0.3",
+		"jsdom": "21.0.0",
 		"json5": "2.2.3",
 		"json5-loader": "4.0.1",
 		"jsonld": "8.1.0",
@@ -77,7 +77,7 @@
 		"misskey-js": "0.0.14",
 		"ms": "3.0.0-canary.1",
 		"nested-property": "4.0.0",
-		"nodemailer": "6.8.0",
+		"nodemailer": "6.9.0",
 		"nsfwjs": "2.4.2",
 		"oauth": "^0.10.0",
 		"os-utils": "0.0.14",
@@ -87,7 +87,7 @@
 		"probe-image-size": "7.2.3",
 		"promise-limit": "2.7.0",
 		"pug": "3.0.2",
-		"punycode": "2.1.1",
+		"punycode": "2.2.0",
 		"pureimage": "0.3.15",
 		"qrcode": "1.5.1",
 		"random-seed": "0.3.0",
@@ -109,7 +109,7 @@
 		"stringz": "2.1.0",
 		"summaly": "2.7.0",
 		"syslog-pro": "git+https://github.com/misskey-dev/SyslogPro#0.2.9-misskey.2",
-		"systeminformation": "5.17.1",
+		"systeminformation": "5.17.3",
 		"tinycolor2": "1.5.2",
 		"tmp": "0.2.1",
 		"tsc-alias": "1.8.2",
@@ -117,18 +117,18 @@
 		"twemoji-parser": "14.0.0",
 		"typeorm": "0.3.11",
 		"ulid": "2.3.0",
-		"undici": "^5.14.0",
+		"undici": "^5.15.0",
 		"unzipper": "0.10.11",
 		"uuid": "9.0.0",
 		"vary": "1.1.2",
 		"web-push": "3.5.0",
 		"websocket": "1.0.34",
-		"ws": "8.11.0",
+		"ws": "8.12.0",
 		"xev": "3.0.2"
 	},
 	"devDependencies": {
-		"@redocly/openapi-core": "1.0.0-beta.117",
+		"@redocly/openapi-core": "1.0.0-beta.120",
-		"@swc/core": "1.3.25",
+		"@swc/core": "1.3.26",
 		"@swc/jest": "0.2.24",
 		"@types/accepts": "1.3.5",
 		"@types/archiver": "5.3.1",
@@ -172,11 +172,11 @@
 		"@types/web-push": "3.3.2",
 		"@types/websocket": "1.0.5",
 		"@types/ws": "8.5.4",
-		"@typescript-eslint/eslint-plugin": "5.48.0",
+		"@typescript-eslint/eslint-plugin": "5.48.1",
-		"@typescript-eslint/parser": "5.48.0",
+		"@typescript-eslint/parser": "5.48.1",
 		"cross-env": "7.0.3",
 		"eslint": "8.31.0",
-		"eslint-plugin-import": "2.26.0",
+		"eslint-plugin-import": "2.27.4",
 		"execa": "6.1.0",
 		"jest": "29.3.1",
 		"jest-mock": "^29.3.1",

packages/backend/src/core/RoleService.ts

@@ -8,7 +8,7 @@ import { DI } from '@/di-symbols.js';
 import { bindThis } from '@/decorators.js';
 import { MetaService } from '@/core/MetaService.js';
 import { UserCacheService } from '@/core/UserCacheService.js';
-import { RoleCondFormulaValue } from '@/models/entities/Role.js';
+import type { RoleCondFormulaValue } from '@/models/entities/Role.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { StreamMessages } from '@/server/api/stream/types.js';
 import type { OnApplicationShutdown } from '@nestjs/common';

packages/frontend/package.json

@@ -18,7 +18,7 @@
 		"autobind-decorator": "2.4.0",
 		"autosize": "5.0.2",
 		"blurhash": "2.0.4",
-		"broadcast-channel": "4.19.1",
+		"broadcast-channel": "4.20.1",
 		"browser-image-resizer": "git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey.3",
 		"canvas-confetti": "^1.6.0",
 		"chart.js": "4.1.2",
@@ -41,10 +41,10 @@
 		"misskey-js": "0.0.14",
 		"photoswipe": "5.3.4",
 		"prismjs": "1.29.0",
-		"punycode": "2.1.1",
+		"punycode": "2.2.0",
 		"querystring": "0.2.1",
 		"rndstr": "1.0.0",
-		"rollup": "3.9.1",
+		"rollup": "3.10.0",
 		"s-age": "1.1.2",
 		"sanitize-html": "^2.8.1",
 		"sass": "1.57.1",
@@ -81,16 +81,16 @@
 		"@types/uuid": "9.0.0",
 		"@types/websocket": "1.0.5",
 		"@types/ws": "8.5.4",
-		"@typescript-eslint/eslint-plugin": "5.48.0",
+		"@typescript-eslint/eslint-plugin": "5.48.1",
-		"@typescript-eslint/parser": "5.48.0",
+		"@typescript-eslint/parser": "5.48.1",
 		"@vue/runtime-core": "3.2.45",
 		"cross-env": "7.0.3",
 		"cypress": "12.3.0",
 		"eslint": "8.31.0",
-		"eslint-plugin-import": "2.26.0",
+		"eslint-plugin-import": "2.27.4",
-		"eslint-plugin-vue": "9.8.0",
+		"eslint-plugin-vue": "9.9.0",
 		"start-server-and-test": "1.15.2",
 		"vue-eslint-parser": "^9.1.0",
-		"vue-tsc": "^1.0.22"
+		"vue-tsc": "^1.0.24"
 	}
 }

packages/frontend/src/components/MkAutocomplete.vue

@@ -17,9 +17,7 @@
 	</ol>
 	<ol v-else-if="emojis.length > 0" ref="suggests" :class="$style.list">
 		<li v-for="emoji in emojis" :key="emoji.emoji" :class="$style.item" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
-			<div :class="$style.emoji">
+			<MkEmoji :emoji="emoji.emoji" :class="$style.emoji"/>
-				<MkEmoji :emoji="emoji.emoji"/>
-			</div>
 			<!-- eslint-disable-next-line vue/no-v-html -->
 			<span v-if="q" :class="$style.emojiName" v-html="sanitizeHtml(emoji.name.replace(q, `<b>${q}</b>`))"></span>
 			<span v-else v-text="emoji.name"></span>
@@ -439,14 +437,15 @@ onBeforeUnmount(() => {
 }
 
 .emoji {
-	flex-shrink: 0;
+	flex-shrink: 0 !important;
-	display: flex;
+	display: flex !important;
-	margin: 0 4px 0 0;
+	margin: 0 4px 0 0 !important;
-	height: 24px;
+	height: 24px !important;
-	width: 24px;
+	width: 24px !important;
-	justify-content: center;
+	justify-content: center !important;
-	align-items: center;
+	align-items: center !important;
-	font-size: 20px;
+	font-size: 20px !important;
+	pointer-events: none !important;
 }
 
 .emojiImg {

packages/frontend/src/components/MkButton.vue

@@ -1,32 +1,34 @@
 <template>
 <button
 	v-if="!link"
-	ref="el" class="bghgjjyj _button"
+	ref="el" class="_button"
-	:class="{ inline, primary, gradate, danger, rounded, full, small, large, asLike }"
+	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.asLike]: asLike }]"
 	:type="type"
 	@click="emit('click', $event)"
 	@mousedown="onMousedown"
 >
-	<div ref="ripples" class="ripples"></div>
+	<div ref="ripples" :class="$style.ripples"></div>
-	<div class="content">
+	<div :class="$style.content">
 		<slot></slot>
 	</div>
 </button>
 <MkA
-	v-else class="bghgjjyj _button"
+	v-else class="_button"
-	:class="{ inline, primary, gradate, danger, rounded, full, small }"
+	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.asLike]: asLike }]"
 	:to="to"
 	@mousedown="onMousedown"
 >
-	<div ref="ripples" class="ripples"></div>
+	<div ref="ripples" :class="$style.ripples"></div>
-	<div class="content">
+	<div :class="$style.content">
 		<slot></slot>
 	</div>
 </MkA>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
+import { nextTick, onMounted, useCssModule } from 'vue';
+
+const $style = useCssModule();
 
 const props = defineProps<{
 	type?: 'button' | 'submit' | 'reset';
@@ -78,6 +80,7 @@ function onMousedown(evt: MouseEvent): void {
 	const rect = target.getBoundingClientRect();
 
 	const ripple = document.createElement('div');
+	ripple.classList.add($style.ripple);
 	ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
 	ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
 
@@ -101,8 +104,8 @@ function onMousedown(evt: MouseEvent): void {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.bghgjjyj {
+.root {
 	position: relative;
 	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
 	display: block;
@@ -173,7 +176,7 @@ function onMousedown(evt: MouseEvent): void {
 		}
 
 		> .ripples {
-			::v-deep(div) {
+			> .ripple {
 				background: rgba(255, 60, 106, 0.15);
 			}
 		}
@@ -237,35 +240,37 @@ function onMousedown(evt: MouseEvent): void {
 		min-width: 100px;
 	}
 
-	> .ripples {
+	&.primary > .ripples > .ripple {
-		position: absolute;
-		z-index: 0;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		border-radius: 6px;
-		overflow: clip;
-
-		::v-deep(div) {
-			position: absolute;
-			width: 2px;
-			height: 2px;
-			border-radius: 100%;
-			background: rgba(0, 0, 0, 0.1);
-			opacity: 1;
-			transform: scale(1);
-			transition: all 0.5s cubic-bezier(0,.5,0,1);
-		}
-	}
-
-	&.primary > .ripples ::v-deep(div) {
 		background: rgba(0, 0, 0, 0.15);
 	}
+}
 
-	> .content {
+.ripples {
-		position: relative;
+	position: absolute;
-		z-index: 1;
+	z-index: 0;
-	}
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	border-radius: 6px;
+	overflow: clip;
+	pointer-events: none;
+}
+
+.ripple {
+	position: absolute;
+	width: 2px;
+	height: 2px;
+	border-radius: 100%;
+	background: rgba(0, 0, 0, 0.1);
+	opacity: 1;
+	transform: scale(1);
+	transition: all 0.5s cubic-bezier(0,.5,0,1);
+}
+
+.content {
+	position: relative;
+	z-index: 1;
+	pointer-events: none;
 }
 </style>

packages/frontend/src/components/MkChartTooltip.vue

@@ -1,10 +1,10 @@
 <template>
 <MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :max-width="340" :direction="'top'" :inner-margin="16" @closed="emit('closed')">
-	<div v-if="title || series" class="qpcyisrl">
+	<div v-if="title || series">
-		<div v-if="title" class="title">{{ title }}</div>
+		<div v-if="title" :class="$style.title">{{ title }}</div>
 		<template v-if="series">
-			<div v-for="x in series" class="series">
+			<div v-for="x in series">
-				<span class="color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
+				<span :class="$style.color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
 				<span>{{ x.text }}</span>
 			</div>
 		</template>
@@ -33,21 +33,17 @@ const emit = defineEmits<{
 }>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.qpcyisrl {
+.title {
-	> .title {
+	margin-bottom: 4px;
-		margin-bottom: 4px;
+}
-	}
 
-	> .series {
+.color {
-		> .color {
+	display: inline-block;
-			display: inline-block;
+	width: 8px;
-			width: 8px;
+	height: 8px;
-			height: 8px;
+	border-width: 1px;
-			border-width: 1px;
+	border-style: solid;
-			border-style: solid;
+	margin-right: 8px;
-			margin-right: 8px;
-		}
-	}
 }
 </style>

packages/frontend/src/components/MkContainer.vue

@@ -1,26 +1,32 @@
 <template>
-<div class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !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">
+	<header v-if="showHeader" ref="header" :class="$style.header">
-		<div class="title"><slot name="header"></slot></div>
+		<div :class="$style.title">
-		<div class="sub">
+			<span :class="$style.titleIcon"><slot name="icon"></slot></span>
-			<slot name="func"></slot>
+			<slot name="header"></slot>
-			<button v-if="foldable" class="_button" @click="() => showBody = !showBody">
+		</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; }">
+			<button v-if="omitted" :class="$style.fade" class="_button" @click="() => { ignoreOmit = true; omitted = false; }">
-				<span>{{ $ts.showMore }}</span>
+				<span :class="$style.fadeLabel">{{ $ts.showMore }}</span>
 			</button>
 		</div>
 	</Transition>
@@ -129,19 +135,18 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.container-toggle-enter-active, .container-toggle-leave-active {
+.transition_toggle_enterActive,
+.transition_toggle_leaveActive {
 	overflow-y: clip;
 	transition: opacity 0.5s, height 0.5s !important;
 }
-.container-toggle-enter-from {
+.transition_toggle_enterFrom,
-	opacity: 0;
+.transition_toggle_leaveTo {
-}
-.container-toggle-leave-to {
 	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 {
+	.title {
-		> header {
+		padding: 8px 10px;
-			> .title {
+		font-size: 0.9em;
-				padding: 8px 10px;
-				font-size: 0.9em;
-			}
-		}
-	}
-}
-
-._forceContainerFull_ .ukygtjoj {
-	> header {
-		> .title {
-			padding: 12px 16px !important;
-		}
-	}
-}
-
-._forceContainerFull_.ukygtjoj {
-	> header {
-		> .title {
-			padding: 12px 16px !important;
-		}
 	}
 }
 </style>

packages/frontend/src/components/MkContextMenu.vue

@@ -1,6 +1,12 @@
 <template>
-<Transition :name="$store.state.animation ? 'fade' : ''" appear>
+<Transition
-	<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
+	appear
+	:enter-active-class="$store.state.animation ? $style.transition_fade_enterActive : ''"
+	:leave-active-class="$store.state.animation ? $style.transition_fade_leaveActive : ''"
+	:enter-from-class="$store.state.animation ? $style.transition_fade_enterFrom : ''"
+	:leave-to-class="$store.state.animation ? $style.transition_fade_leaveTo : ''"
+>
+	<div ref="rootEl" :class="$style.root" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
 		<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
 	</div>
 </Transition>
@@ -68,18 +74,19 @@ function onMousedown(evt: Event) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.nvlagfpb {
+.transition_fade_enterActive,
-	position: absolute;
+.transition_fade_leaveActive {
-}
-
-.fade-enter-active, .fade-leave-active {
 	transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 	transform-origin: left top;
 }
-
+.transition_fade_enterFrom,
-.fade-enter-from, .fade-leave-to {
+.transition_fade_leaveTo {
 	opacity: 0;
 	transform: scale(0.9);
 }
+
+.root {
+	position: absolute;
+}
 </style>

packages/frontend/src/components/MkEmojiPicker.section.vue

@@ -31,6 +31,3 @@ const emit = defineEmits<{
 
 const shown = ref(!!props.initialShown);
 </script>
-
-<style lang="scss" scoped>
-</style>

packages/frontend/src/components/MkFeaturedPhotos.vue

@@ -1,5 +1,5 @@
 <template>
-<div v-if="meta" class="xfbouadm" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
+<div v-if="meta" :class="$style.root" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
 </template>
 
 <script lang="ts" setup>
@@ -14,8 +14,8 @@ os.api('meta', { detail: true }).then(gotMeta => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.xfbouadm {
+.root {
 	background-position: center;
 	background-size: cover;
 }

packages/frontend/src/components/MkInfo.vue

@@ -1,7 +1,7 @@
 <template>
-<div class="fpezltsf" :class="{ warn }">
+<div :class="[$style.root, { [$style.warn]: warn }]">
-	<i v-if="warn" class="ti ti-alert-triangle"></i>
+	<i v-if="warn" class="ti ti-alert-triangle" :class="$style.i"></i>
-	<i v-else class="ti ti-info-circle"></i>
+	<i v-else class="ti ti-info-circle" :class="$style.i"></i>
 	<slot></slot>
 </div>
 </template>
@@ -14,8 +14,8 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.fpezltsf {
+.root {
 	padding: 12px 14px;
 	font-size: 90%;
 	background: var(--infoBg);
@@ -26,9 +26,9 @@ const props = defineProps<{
 		background: var(--infoWarnBg);
 		color: var(--infoWarnFg);
 	}
+}
 
-	> i {
+.i {
-		margin-right: 4px;
+	margin-right: 4px;
-	}
 }
 </style>

packages/frontend/src/components/MkModal.vue

@@ -8,7 +8,7 @@
 	:duration="transitionDuration" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened"
 >
 	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
-		<div class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: transparentBg && (type === 'popup') }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
+		<div class="_modalBg data-cy-bg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent, 'data-cy-transparent': isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
 		<div ref="content" :class="[$style.content, { [$style.fixed]: fixed }]" :style="{ zIndex }" @click.self="onBgClick">
 			<slot :max-height="maxHeight" :type="type"></slot>
 		</div>
@@ -82,6 +82,7 @@ const type = $computed<ModalTypes>(() => {
 		return props.preferType!;
 	}
 });
+const isEnableBgTransparent = $computed(() => props.transparentBg && (type === 'popup'));
 let transitionName = $computed((() =>
 	defaultStore.state.animation
 		? useSendAnime
@@ -271,7 +272,7 @@ onMounted(() => {
 		fixed = (type === 'drawer') || (getFixedContainer(props.src) != null);
 
 		await nextTick();
-		
+
 		align();
 	}, { immediate: true });
 

packages/frontend/src/components/MkNote.vue

@@ -493,7 +493,7 @@ function readPromo() {
 	bottom: 1em;
 }
 
-.howLessLabel {
+.showLessLabel {
 	display: inline-block;
 	background: var(--popup);
 	padding: 6px 10px;

packages/frontend/src/components/form/split.vue

@@ -1,27 +1,27 @@
 <template>
-<div class="terlnhxf">
+<div :class="$style.root">
 	<slot></slot>
 </div>
 </template>
 
 <script lang="ts" setup>
+import { provide } from 'vue';
+
 const props = withDefaults(defineProps<{
 	minWidth?: number;
 }>(), {
 	minWidth: 210,
 });
 
+provide('splited', true);
+
 const minWidth = props.minWidth + 'px';
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.terlnhxf {
+.root {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(v-bind('minWidth'), 1fr));
 	grid-gap: 12px;
-
-	> ::v-deep(*) {
-		margin: 0 !important;
-	}
 }
 </style>

packages/frontend/src/components/mfm.ts

@@ -299,7 +299,8 @@ export default defineComponent({
 						key: Math.random(),
 						emoji: `:${token.props.name}:`,
 						normal: this.plain,
-						host: this.author.host,
+						// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+						host: this.author?.host,
 					})];
 				}
 

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"/>

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>

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 #icon><i class="ti ti-chart-line"></i></template>
-	<template #func>
+	<template #header>{{ $ts.activity }}</template>
-		<button class="_button" @click="showMenu">
+	<template #func="{ buttonStyleClass }">
+		<button class="_button" :class="buttonStyleClass" @click="showMenu">
 			<i class="ti ti-dots"></i>
 		</button>
 	</template>

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>
+	<template #icon><i class="ti ti-photo"></i></template>
-	<div class="ujigsodd">
+	<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>
+<style lang="scss" module>
-.ujigsodd {
+.root {
 	padding: 8px;
+}
 
-	> .stream {
+.stream {
-		display: grid;
+	display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-		grid-gap: 6px;
+	grid-gap: 6px;
+}
 
-		> .img {
+.img {
-			height: 128px;
+	height: 128px;
-			border-radius: 6px;
+	border-radius: 6px;
-			overflow: clip;
+	overflow: clip;
-		}
+}
-	}
 
-	> .empty {
+.empty {
-		margin: 0;
+	margin: 0;
-		padding: 16px;
+	padding: 16px;
-		text-align: center;
+	text-align: center;
-
-		> i {
-			margin-right: 4px;
-		}
-	}
 }
 </style>

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 #icon><i class="ti ti-chart-line"></i></template>
-	<template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></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"/>

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>

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>

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"/>

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>

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 #icon><i class="ti ti-bell"></i></template>
-	<template #func><button class="_button" @click="configureNotification()"><i class="ti ti-settings"></i></button></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"/>

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"/>

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 #icon><i class="ti ti-rss"></i></template>
-	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></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(res => res.json())
-	.then(feed => {
+		.then(feed => {
-		rawItems.value = feed.items ?? [];
+			rawItems.value = feed.items ?? [];
-		fetching.value = false;
+			fetching.value = false;
-	});
+		});
 };
 
 watch(() => fetchEndpoint, tick);

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 #icon><i class="ti ti-rss"></i></template>
-	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></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(res => res.json())
-	.then(feed => {
+		.then(feed => {
-		rawItems.value = feed.items ?? [];
+			rawItems.value = feed.items ?? [];
-		fetching.value = false;
+			fetching.value = false;
-		key++;
+			key++;
-	});
+		});
 };
 
 watch(() => fetchEndpoint, tick);

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>
+			<span>{{ widgetProps.src === 'list' ? widgetProps.list.name : widgetProps.src === 'antenna' ? widgetProps.antenna.name : $t('_timelines.' + widgetProps.src) }}</span>
-			<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>
 			<i :class="menuOpened ? 'ti ti-chevron-up' : 'ti ti-chevron-down'" style="margin-left: 8px;"></i>
 		</button>
 	</template>

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"/>

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 #icon><i class="ti ti-users"></i></template>
-	<template #func><button class="_button" @click="configure()"><i class="ti ti-settings"></i></button></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">

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 #icon><i class="ti ti-server"></i></template>
-	<template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></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"/>