From f90ed6d3ba785212c0c6518fc8617571da44b118 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 2 Nov 2024 20:39:51 +0900
Subject: [PATCH 1/3] =?UTF-8?q?enh(frontend):=20=E6=96=9C=E7=B7=9A?=
 =?UTF-8?q?=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E3=81=AE=E8=AA=BF=E6=95=B4?=
 =?UTF-8?q?,=20Mk.*CardMini=E3=81=AE=E6=94=B9=E4=BF=AE=20(taiyme#289)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkInstanceCardMini.vue     | 194 +++++++++++-------
 .../src/components/MkNoteDetailed.vue         |   4 +-
 .../src/components/MkUserCardMini.vue         |  67 +++++-
 .../src/components/global/MkFooterSpacer.vue  |  24 ++-
 .../src/components/global/MkPageHeader.vue    |  21 +-
 packages/frontend/src/pages/admin-file.vue    |   2 +-
 .../src/pages/admin/overview.users.vue        |   4 +-
 .../frontend/src/pages/admin/roles.role.vue   |   3 +-
 packages/frontend/src/pages/admin/users.vue   |   2 +-
 packages/frontend/src/pages/instance-info.vue |   2 +-
 packages/frontend/src/pages/list.vue          |   2 +-
 packages/frontend/src/pages/my-lists/list.vue |   2 +-
 packages/frontend/src/pages/search.note.vue   |   2 +-
 .../frontend/src/pages/settings/accounts.vue  |   2 +-
 14 files changed, 205 insertions(+), 126 deletions(-)

diff --git a/packages/frontend/src/components/MkInstanceCardMini.vue b/packages/frontend/src/components/MkInstanceCardMini.vue
index b0601cf7f9..7a11dc4666 100644
--- a/packages/frontend/src/components/MkInstanceCardMini.vue
+++ b/packages/frontend/src/components/MkInstanceCardMini.vue
@@ -4,114 +4,158 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="[$style.root, { yellow: instance.isNotResponding, red: instance.isBlocked, gray: instance.isSuspended, blue: instance.isSilenced }]">
-	<img class="icon" :src="getInstanceIcon(instance)" alt="" loading="lazy"/>
-	<div class="body">
-		<span class="host">{{ instance.name ?? instance.host }}</span>
-		<span class="sub _monospace"><b>{{ instance.host }}</b> / {{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</span>
+<div
+	:class="[$style.root, {
+		[$style.isNotResponding]: instance.isNotResponding,
+		[$style.isSilenced]: instance.isSilenced,
+		[$style.isSuspended]: instance.isSuspended,
+		[$style.isBlocked]: instance.isBlocked,
+	}]"
+>
+	<img :class="$style.icon" :src="getInstanceIcon(instance)" alt="" loading="lazy"/>
+	<div :class="$style.body">
+		<span :class="$style.host">{{ instance.name || instance.host }}</span>
+		<span :class="$style.sub">
+			<span class="_monospace">
+				<span style="font-weight: 700;">{{ instance.host }}</span> / {{ instance.softwareName || '?' }} {{ instance.softwareVersion }}
+			</span>
+		</span>
 	</div>
-	<MkMiniChart v-if="chartValues" class="chart" :src="chartValues"/>
+	<MkMiniChart v-if="chartValues" :class="$style.chart" :src="chartValues"/>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { shallowRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import MkMiniChart from '@/components/MkMiniChart.vue';
 import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
+import MkMiniChart from '@/components/MkMiniChart.vue';
 
 const props = defineProps<{
 	instance: Misskey.entities.FederationInstance;
 }>();
 
-const chartValues = ref<number[] | null>(null);
+const chartValues = shallowRef<number[] | null>(null);
 
-misskeyApiGet('charts/instance', { host: props.instance.host, limit: 16 + 1, span: 'day' }).then(res => {
-	// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
-	res.requests.received.splice(0, 1);
-	chartValues.value = res.requests.received;
+watch(() => props.instance.host, (host) => {
+	misskeyApiGet('charts/instance', {
+		host,
+		limit: 16 + 1,
+		span: 'day',
+	}).then(res => {
+		// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
+		res.requests.received.shift();
+		chartValues.value = res.requests.received;
+	}).catch(() => {
+		chartValues.value = null;
+	});
+}, {
+	immediate: true,
 });
 
-function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
-}
+const getInstanceIcon = (instance: Misskey.entities.FederationInstance) => (
+	getProxiedImageUrlNullable(instance.iconUrl, 'preview')
+		?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview')
+		?? '/client-assets/dummy.png'
+);
 </script>
 
 <style lang="scss" module>
-.root {
-	$bodyTitleHieght: 18px;
-	$bodyInfoHieght: 16px;
+$bodyTitleHieght: 18px;
+$bodyInfoHieght: 16px;
 
+.root {
 	display: flex;
 	align-items: center;
 	padding: 16px;
-	background: var(--MI_THEME-panel);
 	border-radius: 8px;
+	background-color: var(--MI_THEME-panel);
+	background-image: repeating-linear-gradient(
+		135deg,
+		transparent,
+		transparent 10px,
+		var(--c) 6px,
+		var(--c) 16px
+	);
+	--c: transparent;
 
-	> :global(.icon) {
-		display: block;
-		width: ($bodyTitleHieght + $bodyInfoHieght);
-		height: ($bodyTitleHieght + $bodyInfoHieght);
-		object-fit: cover;
-		border-radius: 4px;
-		margin-right: 10px;
-	}
-
-	> :global(.body) {
-		flex: 1;
-		overflow: hidden;
-		font-size: 0.9em;
-		color: var(--MI_THEME-fg);
-		padding-right: 8px;
-
-		> :global(.host) {
-			display: block;
-			width: 100%;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			line-height: $bodyTitleHieght;
+	&,
+	html[data-color-scheme=light] & {
+		&.isNotResponding {
+			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), orange 50%) srgb r g b / 0.25);
 		}
 
-		> :global(.sub) {
-			display: block;
-			width: 100%;
-			font-size: 80%;
-			opacity: 0.7;
-			line-height: $bodyInfoHieght;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
+		&.isSilenced {
+			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), blue 50%) srgb r g b / 0.25);
+		}
+
+		&.isSuspended {
+			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), black 15%) srgb r g b / 0.25);
+		}
+
+		&.isBlocked {
+			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), red 50%) srgb r g b / 0.25);
 		}
 	}
 
-	> :global(.chart) {
-		height: 30px;
-	}
+	html[data-color-scheme=dark] & {
+		&.isNotResponding {
+			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), orange 50%) srgb r g b / 0.5);
+		}
 
-  &:global(.blue) {
-    --c: rgba(0, 42, 255, 0.15);
-    background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
-    background-size: 16px 16px;
-  }
+		&.isSilenced {
+			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), blue 50%) srgb r g b / 0.5);
+		}
 
-	&:global(.yellow) {
-		--c: rgb(255 196 0 / 15%);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
-		background-size: 16px 16px;
-	}
+		&.isSuspended {
+			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), white 15%) srgb r g b / 0.5);
+		}
 
-	&:global(.red) {
-		--c: rgb(255 0 0 / 15%);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
-		background-size: 16px 16px;
-	}
-
-	&:global(.gray) {
-		--c: var(--MI_THEME-bg);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
-		background-size: 16px 16px;
+		&.isBlocked {
+			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), red 50%) srgb r g b / 0.5);
+		}
 	}
 }
+
+.icon {
+	display: block;
+	width: ($bodyTitleHieght + $bodyInfoHieght);
+	height: ($bodyTitleHieght + $bodyInfoHieght);
+	object-fit: cover;
+	border-radius: 4px;
+	margin-right: 12px;
+}
+
+.body {
+	flex: 1;
+	overflow: hidden;
+	font-size: 0.9em;
+	color: var(--fg);
+	padding-right: 8px;
+}
+
+.host {
+	display: block;
+	width: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	line-height: $bodyTitleHieght;
+}
+
+.sub {
+	display: block;
+	width: 100%;
+	font-size: 80%;
+	opacity: 0.7;
+	line-height: $bodyInfoHieght;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.chart {
+	height: 30px;
+}
 </style>
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index e0473dce5e..8366dc8a9e 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -166,7 +166,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #default="{ items }">
 					<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-gap: 12px;">
 						<MkA v-for="item in items" :key="item.id" :to="userPage(item.user)">
-							<MkUserCardMini :user="item.user" :withChart="false"/>
+							<MkUserCardMini :user="item.user"/>
 						</MkA>
 					</div>
 				</template>
@@ -183,7 +183,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #default="{ items }">
 					<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-gap: 12px;">
 						<MkA v-for="item in items" :key="item.id" :to="userPage(item.user)">
-							<MkUserCardMini :user="item.user" :withChart="false"/>
+							<MkUserCardMini :user="item.user"/>
 						</MkA>
 					</div>
 				</template>
diff --git a/packages/frontend/src/components/MkUserCardMini.vue b/packages/frontend/src/components/MkUserCardMini.vue
index 7a2e878931..0489729875 100644
--- a/packages/frontend/src/components/MkUserCardMini.vue
+++ b/packages/frontend/src/components/MkUserCardMini.vue
@@ -4,7 +4,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-adaptive-bg :class="[$style.root]">
+<div
+	:class="[$style.root, {
+		[$style.isSilenced]: 'isSilenced' in user && user.isSilenced,
+		[$style.isSuspended]: 'isSuspended' in user && user.isSuspended,
+	}]"
+>
 	<MkAvatar :class="$style.avatar" :user="user" indicator/>
 	<div :class="$style.body">
 		<span :class="$style.name"><MkUserName :user="user"/></span>
@@ -15,29 +20,42 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
+import { shallowRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import { onMounted, ref } from 'vue';
-import MkMiniChart from '@/components/MkMiniChart.vue';
 import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import { acct } from '@/filters/user.js';
+import MkMiniChart from '@/components/MkMiniChart.vue';
 
 const props = withDefaults(defineProps<{
 	user: Misskey.entities.User;
 	withChart?: boolean;
 }>(), {
-	withChart: true,
+	withChart: false,
 });
 
-const chartValues = ref<number[] | null>(null);
+const chartValues = shallowRef<number[] | null>(null);
 
-onMounted(() => {
-	if (props.withChart) {
-		misskeyApiGet('charts/user/notes', { userId: props.user.id, limit: 16 + 1, span: 'day' }).then(res => {
+watch([
+	() => props.user.id,
+	() => props.withChart,
+], ([userId, withChart]) => {
+	if (withChart) {
+		misskeyApiGet('charts/user/notes', {
+			userId,
+			limit: 16 + 1,
+			span: 'day',
+		}).then(res => {
 			// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
-			res.inc.splice(0, 1);
+			res.inc.shift();
 			chartValues.value = res.inc;
+		}).catch(() => {
+			chartValues.value = null;
 		});
+	} else {
+		chartValues.value = null;
 	}
+}, {
+	immediate: true,
 });
 </script>
 
@@ -49,8 +67,37 @@ $bodyInfoHieght: 16px;
 	display: flex;
 	align-items: center;
 	padding: 16px;
-	background: var(--MI_THEME-panel);
 	border-radius: 8px;
+	background-color: var(--MI-THEME-panel);
+	background-image: repeating-linear-gradient(
+		135deg,
+		transparent,
+		transparent 10px,
+		var(--c) 6px,
+		var(--c) 16px
+	);
+	--c: transparent;
+
+	&,
+	html[data-color-scheme=light] & {
+		&.isSilenced {
+			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), blue 50%) srgb r g b / 0.25);
+		}
+
+		&.isSuspended {
+			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), black 15%) srgb r g b / 0.25);
+		}
+	}
+
+	html[data-color-scheme=dark] & {
+		&.isSilenced {
+			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), blue 50%) srgb r g b / 0.5);
+		}
+
+		&.isSuspended {
+			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), white 15%) srgb r g b / 0.5);
+		}
+	}
 }
 
 .avatar {
diff --git a/packages/frontend/src/components/global/MkFooterSpacer.vue b/packages/frontend/src/components/global/MkFooterSpacer.vue
index 1a75855fa1..cbb35b978f 100644
--- a/packages/frontend/src/components/global/MkFooterSpacer.vue
+++ b/packages/frontend/src/components/global/MkFooterSpacer.vue
@@ -4,13 +4,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="[$style.spacer, defaultStore.reactiveState.darkMode.value ? $style.dark : $style.light]"></div>
+<div :class="$style.spacer"></div>
 </template>
 
-<script lang="ts" setup>
-import { defaultStore } from '@/store.js';
-</script>
-
 <style lang="scss" module>
 .spacer {
 	box-sizing: border-box;
@@ -18,15 +14,21 @@ import { defaultStore } from '@/store.js';
 	margin: 0 auto;
 	height: 300px;
 	background-clip: content-box;
-	background-size: auto auto;
-	background-color: rgba(255, 255, 255, 0);
+	background-image: repeating-linear-gradient(
+		135deg,
+		transparent,
+		transparent 10px,
+		var(--c) 6px,
+		var(--c) 16px
+	);
 
-	&.light {
-		background-image: repeating-linear-gradient(135deg, transparent, transparent 16px, #00000010 16px, #00000010 20px );
+	&,
+	html[data-color-scheme=light] & {
+		--c: rgb(0 0 0 / 0.02);
 	}
 
-	&.dark {
-		background-image: repeating-linear-gradient(135deg, transparent, transparent 16px, #FFFFFF16 16px, #FFFFFF16 20px );
+	html[data-color-scheme=dark] & {
+		--c: rgb(255 255 255 / 0.02);
 	}
 }
 </style>
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index aa4be69b2c..4e2ae9d41e 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-if="show" ref="el" :class="[$style.root]" :style="{ background: bg }">
+<div v-if="show" ref="el" :class="[$style.root]">
 	<div :class="[$style.upper, { [$style.slim]: narrow, [$style.thin]: thin_ }]">
 		<div v-if="!thin_ && narrow && props.displayMyAvatar && $i" class="_button" :class="$style.buttonsLeft" @click="openAccountMenu">
 			<MkAvatar :class="$style.avatar" :user="$i"/>
@@ -42,13 +42,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, inject, shallowRef, computed } from 'vue';
-import tinycolor from 'tinycolor2';
-import XTabs, { Tab } from './MkPageHeader.tabs.vue';
 import { scrollToTop } from '@@/js/scroll.js';
-import { globalEvents } from '@/events.js';
+import XTabs, { Tab } from './MkPageHeader.tabs.vue';
+import type { PageHeaderItem } from '@/types/page-header.js';
 import { injectReactiveMetadata } from '@/scripts/page-metadata.js';
 import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
-import { PageHeaderItem } from '@/types/page-header.js';
 
 const props = withDefaults(defineProps<{
 	tabs?: Tab[];
@@ -70,7 +68,6 @@ const hideTitle = inject('shouldOmitHeaderTitle', false);
 const thin_ = props.thin || inject('shouldHeaderThin', false);
 
 const el = shallowRef<HTMLElement | undefined>(undefined);
-const bg = ref<string | undefined>(undefined);
 const narrow = ref(false);
 const hasTabs = computed(() => props.tabs.length > 0);
 const hasActions = computed(() => props.actions && props.actions.length > 0);
@@ -98,19 +95,9 @@ function onTabClick(): void {
 	top();
 }
 
-const calcBg = () => {
-	const rawBg = 'var(--MI_THEME-bg)';
-	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
-	tinyBg.setAlpha(0.85);
-	bg.value = tinyBg.toRgbString();
-};
-
 let ro: ResizeObserver | null;
 
 onMounted(() => {
-	calcBg();
-	globalEvents.on('themeChanged', calcBg);
-
 	if (el.value && el.value.parentElement) {
 		narrow.value = el.value.parentElement.offsetWidth < 500;
 		ro = new ResizeObserver((entries, observer) => {
@@ -123,7 +110,6 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-	globalEvents.off('themeChanged', calcBg);
 	if (ro) ro.disconnect();
 });
 </script>
@@ -134,6 +120,7 @@ onUnmounted(() => {
 	backdrop-filter: var(--MI-blur, blur(15px));
 	border-bottom: solid 0.5px var(--MI_THEME-divider);
 	width: 100%;
+	background: color(from var(--MI_THEME-bg) srgb r g b / 0.85);
 }
 
 .upper,
diff --git a/packages/frontend/src/pages/admin-file.vue b/packages/frontend/src/pages/admin-file.vue
index 60f6be51d4..a261591502 100644
--- a/packages/frontend/src/pages/admin-file.vue
+++ b/packages/frontend/src/pages/admin-file.vue
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkKeyValue>
 			</div>
 			<MkA v-if="file.user" class="user" :to="`/admin/user/${file.user.id}`">
-				<MkUserCardMini :user="file.user"/>
+				<MkUserCardMini :user="file.user" withChart/>
 			</MkA>
 			<div>
 				<MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">{{ i18n.ts.sensitive }}</MkSwitch>
diff --git a/packages/frontend/src/pages/admin/overview.users.vue b/packages/frontend/src/pages/admin/overview.users.vue
index 8c9d7a8197..2912182eb9 100644
--- a/packages/frontend/src/pages/admin/overview.users.vue
+++ b/packages/frontend/src/pages/admin/overview.users.vue
@@ -8,8 +8,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" mode="out-in">
 		<MkLoading v-if="fetching"/>
 		<div v-else class="users">
-			<MkA v-for="(user, i) in newUsers" :key="user.id" :to="`/admin/user/${user.id}`" class="user">
-				<MkUserCardMini :user="user"/>
+			<MkA v-for="user in newUsers" :key="user.id" :to="`/admin/user/${user.id}`" class="user">
+				<MkUserCardMini :user="user" withChart/>
 			</MkA>
 		</div>
 	</Transition>
diff --git a/packages/frontend/src/pages/admin/roles.role.vue b/packages/frontend/src/pages/admin/roles.role.vue
index 1c237a69b4..aa2f6f8126 100644
--- a/packages/frontend/src/pages/admin/roles.role.vue
+++ b/packages/frontend/src/pages/admin/roles.role.vue
@@ -38,7 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 									<div v-for="item in items" :key="item.user.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedItems.includes(item.id) }]">
 										<div :class="$style.userItemMain">
 											<MkA :class="$style.userItemMainBody" :to="`/admin/user/${item.user.id}`">
-												<MkUserCardMini :user="item.user"/>
+												<MkUserCardMini :user="item.user" withChart/>
 											</MkA>
 											<button class="_button" :class="$style.userToggle" @click="toggleItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
 											<button class="_button" :class="$style.unassign" @click="unassign(item.user, $event)"><i class="ti ti-x"></i></button>
@@ -49,7 +49,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 											<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
 										</div>
 									</div>
-								</div>
 							</template>
 						</MkPagination>
 					</div>
diff --git a/packages/frontend/src/pages/admin/users.vue b/packages/frontend/src/pages/admin/users.vue
index 870c3ce88b..e83a0eb927 100644
--- a/packages/frontend/src/pages/admin/users.vue
+++ b/packages/frontend/src/pages/admin/users.vue
@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination">
 					<div :class="$style.users">
 						<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" :class="$style.user" :to="`/admin/user/${user.id}`">
-							<MkUserCardMini :user="user"/>
+							<MkUserCardMini :user="user" withChart/>
 						</MkA>
 					</div>
 				</MkPagination>
diff --git a/packages/frontend/src/pages/instance-info.vue b/packages/frontend/src/pages/instance-info.vue
index 6cec3f9d45..b242665e49 100644
--- a/packages/frontend/src/pages/instance-info.vue
+++ b/packages/frontend/src/pages/instance-info.vue
@@ -119,7 +119,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-else-if="tab === 'users'" key="users" class="_gaps_m">
 				<MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;">
 					<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" class="user" :to="`/admin/user/${user.id}`">
-						<MkUserCardMini :user="user"/>
+						<MkUserCardMini :user="user" withChart/>
 					</MkA>
 				</MkPagination>
 			</div>
diff --git a/packages/frontend/src/pages/list.vue b/packages/frontend/src/pages/list.vue
index 0ff1854154..07d2fefe96 100644
--- a/packages/frontend/src/pages/list.vue
+++ b/packages/frontend/src/pages/list.vue
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div class="_gaps_s">
 				<div v-for="user in users" :key="user.id" :class="$style.userItem">
 					<MkA :class="$style.userItemBody" :to="`${userPage(user)}`">
-						<MkUserCardMini :user="user"/>
+						<MkUserCardMini :user="user" withChart/>
 					</MkA>
 				</div>
 			</div>
diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue
index 69e404bd85..edcf154ee2 100644
--- a/packages/frontend/src/pages/my-lists/list.vue
+++ b/packages/frontend/src/pages/my-lists/list.vue
@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<div v-for="item in items" :key="item.id">
 									<div :class="$style.userItem">
 										<MkA :class="$style.userItemBody" :to="`${userPage(item.user)}`">
-											<MkUserCardMini :user="item.user"/>
+											<MkUserCardMini :user="item.user" withChart/>
 										</MkA>
 										<button class="_button" :class="$style.menu" @click="showMembershipMenu(item, $event)"><i class="ti ti-dots"></i></button>
 										<button class="_button" :class="$style.remove" @click="removeUser(item, $event)"><i class="ti ti-x"></i></button>
diff --git a/packages/frontend/src/pages/search.note.vue b/packages/frontend/src/pages/search.note.vue
index 105c947d25..38dca224c3 100644
--- a/packages/frontend/src/pages/search.note.vue
+++ b/packages/frontend/src/pages/search.note.vue
@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 					<div class="_gaps">
 						<div :class="$style.userItem">
-							<MkUserCardMini v-if="user" :class="$style.userCard" :user="user" :withChart="false"/>
+							<MkUserCardMini v-if="user" :class="$style.userCard" :user="user"/>
 							<MkButton v-if="user == null && $i != null" transparent :class="$style.addMeButton" @click="selectSelf"><div :class="$style.addUserButtonInner"><span><i class="ti ti-plus"></i><i class="ti ti-user"></i></span><span>{{ i18n.ts.selectSelf }}</span></div></MkButton>
 							<MkButton v-if="user == null" transparent :class="$style.addUserButton" @click="selectUser"><div :class="$style.addUserButtonInner"><i class="ti ti-plus"></i><span>{{ i18n.ts.selectUser }}</span></div></MkButton>
 							<button class="_button" :class="$style.remove" :disabled="user == null" @click="removeUser"><i class="ti ti-x"></i></button>
diff --git a/packages/frontend/src/pages/settings/accounts.vue b/packages/frontend/src/pages/settings/accounts.vue
index 97e960675f..65f06937d5 100644
--- a/packages/frontend/src/pages/settings/accounts.vue
+++ b/packages/frontend/src/pages/settings/accounts.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkButton @click="init"><i class="ti ti-refresh"></i> {{ i18n.ts.reloadAccountsList }}</MkButton>
 			</div>
 
-			<MkUserCardMini v-for="user in accounts" :key="user.id" :user="user" :class="$style.user" @click.prevent="menu(user, $event)"/>
+			<MkUserCardMini v-for="user in accounts" :key="user.id" :user="user" withChart :class="$style.user" @click.prevent="menu(user, $event)"/>
 		</div>
 	</FormSuspense>
 </div>

From f68f05eb81297b703279393b5987befaa11a6487 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 2 Nov 2024 20:46:51 +0900
Subject: [PATCH 2/3] =?UTF-8?q?enh(frontend):=20=E6=96=9C=E7=B7=9A?=
 =?UTF-8?q?=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E3=81=AE=E8=AA=BF=E6=95=B4?=
 =?UTF-8?q?,=20Mk.*CardMini=E3=81=AE=E6=94=B9=E4=BF=AE=20(taiyme#289)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 idea/MkDisableSection.vue                     | 11 +++++---
 .../MkCustomEmojiDetailedDialog.vue           | 27 ++++++++++++++-----
 .../src/components/MkEmbedCodeGenDialog.vue   | 11 +++++---
 .../src/components/MkFlashPreview.vue         | 10 ++++---
 packages/frontend/src/components/MkFolder.vue |  9 +++++--
 .../frontend/src/components/MkPostForm.vue    | 21 ++++++++++-----
 packages/frontend/src/style.scss              | 17 +++++++-----
 7 files changed, 75 insertions(+), 31 deletions(-)

diff --git a/idea/MkDisableSection.vue b/idea/MkDisableSection.vue
index 360705071b..b9e964c400 100644
--- a/idea/MkDisableSection.vue
+++ b/idea/MkDisableSection.vue
@@ -34,8 +34,13 @@ defineProps<{
 	width: 100%;
 	height: 100%;
 	cursor: not-allowed;
-	--color: color(from var(--MI_THEME-error) srgb r g b / 0.25);
-	background-size: auto auto;
-	background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, var(--color) 4px, var(--color) 14px);
+	background-image: repeating-linear-gradient(
+		135deg,
+		transparent,
+		transparent 10px,
+		var(--c) 6px,
+		var(--c) 16px
+	);
+	--c: color(from var(--MI_THEME-error) srgb r g b / 0.25);
 }
 </style>
diff --git a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
index ecbee864dc..57dd5257df 100644
--- a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
+++ b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
@@ -83,12 +83,27 @@ function cancel() {
 
 <style lang="scss" module>
 .emojiImgWrapper {
-  max-width: 100%;
-  height: 40cqh;
-  background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--MI_THEME-X5) 8px, var(--MI_THEME-X5) 14px);
-  border-radius: var(--MI-radius);
-  margin: auto;
-  overflow-y: hidden;
+	max-width: 100%;
+	height: 40cqh;
+	border-radius: var(--MI-radius);
+	margin: auto;
+	overflow-y: hidden;
+	background-image: repeating-linear-gradient(
+		135deg,
+		transparent,
+		transparent 10px,
+		var(--c) 6px,
+		var(--c) 16px
+	);
+
+	&,
+	html[data-color-scheme=light] & {
+		--c: rgb(0 0 0 / 0.02);
+	}
+
+	html[data-color-scheme=dark] & {
+		--c: rgb(255 255 255 / 0.02);
+	}
 }
 
 .aliases {
diff --git a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
index 6e9eb75920..a0d669edbc 100644
--- a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
+++ b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
@@ -306,9 +306,14 @@ onUnmounted(() => {
 
 .embedCodeGenPreviewRoot {
 	position: relative;
-	background-color: var(--MI_THEME-bg);
-	background-size: auto auto;
-	background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--MI_THEME-panel) 6px, var(--MI_THEME-panel) 12px);
+	background-color: var(--bg);
+	background-image: repeating-linear-gradient(
+		135deg,
+		transparent,
+		transparent 10px,
+		var(--panel) 6px,
+		var(--panel) 16px
+	);
 	cursor: not-allowed;
 }
 
diff --git a/packages/frontend/src/components/MkFlashPreview.vue b/packages/frontend/src/components/MkFlashPreview.vue
index b7278ac742..b5e02192c2 100644
--- a/packages/frontend/src/components/MkFlashPreview.vue
+++ b/packages/frontend/src/components/MkFlashPreview.vue
@@ -91,9 +91,13 @@ const props = defineProps<{
 	}
 
 	&:global(.gray) {
-		--c: var(--MI_THEME-bg);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
-		background-size: 16px 16px;
+		background-image: repeating-linear-gradient(
+			135deg,
+			transparent,
+			transparent 10px,
+			var(--MI_THEME-bg) 6px,
+			var(--MI_THEME-bg) 16px
+		);
 	}
 
 	@media (max-width: 700px) {
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index 7bdc06a8b4..9e26f84a48 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -238,8 +238,13 @@ onMounted(() => {
 	background: var(--MI_THEME-acrylicBg);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
-	background-size: auto auto;
-	background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--MI_THEME-panel) 5px, var(--MI_THEME-panel) 10px);
+	background-image: repeating-linear-gradient(
+		135deg,
+		transparent,
+		transparent 10px,
+		var(--MI_THEME-panel) 6px,
+		var(--MI_THEME-panel) 16px
+	);
 	border-radius: 0 0 6px 6px;
 }
 </style>
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index f2fe048449..947848b7f4 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -1197,15 +1197,22 @@ defineExpose({
 	min-height: 75px;
 	max-height: 150px;
 	overflow: auto;
-	background-size: auto auto;
-}
+	background-image: repeating-linear-gradient(
+		135deg,
+		transparent,
+		transparent 10px,
+		var(--c) 6px,
+		var(--c) 16px
+	);
 
-html[data-color-scheme=dark] .preview {
-	background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, #0004 5px, #0004 10px);
-}
+	&,
+	html[data-color-scheme=light] & {
+		--c: rgb(0 0 0 / 0.02);
+	}
 
-html[data-color-scheme=light] .preview {
-	background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, #00000005 5px, #00000005 10px);
+	html[data-color-scheme=dark] & {
+		--c: rgb(255 255 255 / 0.02);
+	}
 }
 
 .targetNote {
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 4204c5af59..77ff0741b2 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -444,14 +444,17 @@ rt {
 	box-shadow: 0 6px 16px #0007, 0 0 1px 1px #693410, inset 0 0 2px 1px #ce8a5c;
 	border-radius: 10px;
 
-	--MI_THEME-bg: #F1E8DC;
-	--MI_THEME-fg: #693410;
-}
+	&,
+	html[data-color-scheme=light] & {
+		--bg: #F1E8DC;
+		--fg: #693410;
+	}
 
-html[data-color-scheme=dark] ._woodenFrame {
-	--MI_THEME-bg: #1d0c02;
-	--MI_THEME-fg: #F1E8DC;
-	--MI_THEME-panel: #192320;
+	html[data-color-scheme=dark] & {
+		--bg: #1d0c02;
+		--fg: #F1E8DC;
+		--panel: #192320;
+	}
 }
 
 ._woodenFrameH {

From f6f96f24d1c4b0ae798ff6c4918bd95cd633ac87 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 2 Nov 2024 20:50:26 +0900
Subject: [PATCH 3/3] =?UTF-8?q?=E3=83=9E=E3=83=BC=E3=82=B8=E3=83=9F?=
 =?UTF-8?q?=E3=82=B9=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/admin/roles.role.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/frontend/src/pages/admin/roles.role.vue b/packages/frontend/src/pages/admin/roles.role.vue
index aa2f6f8126..bdff1345ed 100644
--- a/packages/frontend/src/pages/admin/roles.role.vue
+++ b/packages/frontend/src/pages/admin/roles.role.vue
@@ -49,6 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 											<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
 										</div>
 									</div>
+								</div>
 							</template>
 						</MkPagination>
 					</div>