Merge branch 'misskey-dev:develop' into develop

.github/workflows/lint.yml

@@ -40,15 +40,16 @@ jobs:
     needs: [pnpm_install]
     runs-on: ubuntu-latest
     continue-on-error: true
-    env:
-      eslint-cache-version: v1
     strategy:
       matrix:
         workspace:
         - backend
         - frontend
         - sw
         - misskey-js
+    env:
+      eslint-cache-version: v1
+      eslint-cache-path: ${{ github.workspace }}/node_modules/.cache/eslint-${{ matrix.workspace }}
     steps:
     - uses: actions/[email protected]
       with:
@@ -64,11 +65,10 @@ jobs:
     - name: Restore eslint cache
       uses: actions/[email protected]
       with:
-        path: node_modules/.cache/eslint
-        key: eslint-${{ env.eslint-cache-version }}-${{ hashFiles('/pnpm-lock.yaml') }}-${{ github.ref_name }}-${{ github.sha }}
-        restore-keys: |
-          eslint-${{ env.eslint-cache-version }}-${{ hashFiles('/pnpm-lock.yaml') }}-
-    - run: pnpm --filter ${{ matrix.workspace }} run eslint --cache --cache-location node_modules/.cache/eslint --cache-strategy content
+        path: ${{ env.eslint-cache-path }}
+        key: eslint-${{ env.eslint-cache-version }}-${{ matrix.workspace }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ github.ref_name }}-${{ github.sha }}
+        restore-keys: eslint-${{ env.eslint-cache-version }}-${{ matrix.workspace }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
+    - run: pnpm --filter ${{ matrix.workspace }} run eslint --cache --cache-location ${{ env.eslint-cache-path }} --cache-strategy content
 
   typecheck:
     needs: [pnpm_install]

.gitignore

@@ -44,6 +44,7 @@ compose.yml
 /build
 built
 built-test
+js-built
 /data
 /.cache-loader
 /db

CHANGELOG.md

@@ -5,6 +5,7 @@
 
 ### Client
 - サイズ制限を超過するファイルをアップロードしようとした際にエラーを出すように
+- Enhance: アイコンデコレーション管理画面にプレビューを追加
 - Fix: サーバーメトリクスが2つ以上あるとリロード直後の表示がおかしくなる問題を修正
 
 ### Server

packages/frontend/src/components/MkChart.vue

@@ -13,29 +13,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 </div>
 </template>
 
-<script lang="ts" setup>
-/* eslint-disable id-denylist --
-  Chart.js has a `data` attribute in most chart definitions, which triggers the
-  id-denylist violation when setting it. This is causing about 60+ lint issues.
-  As this is part of Chart.js's API it makes sense to disable the check here.
-*/
-import { onMounted, ref, shallowRef, watch } from 'vue';
-import { Chart } from 'chart.js';
-import * as Misskey from 'misskey-js';
-import { misskeyApiGet } from '@/scripts/misskey-api.js';
-import { defaultStore } from '@/store.js';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
-import { chartVLine } from '@/scripts/chart-vline.js';
-import { alpha } from '@/scripts/color.js';
-import date from '@/filters/date.js';
-import bytes from '@/filters/bytes.js';
-import { initChart } from '@/scripts/init-chart.js';
-import { chartLegend } from '@/scripts/chart-legend.js';
-import MkChartLegend from '@/components/MkChartLegend.vue';
-
-initChart();
-
-type ChartSrc =
+<script lang="ts">
+export type ChartSrc =
 	| 'federation'
 	| 'ap-request'
 	| 'users'
@@ -62,7 +41,30 @@ type ChartSrc =
 	| 'per-user-pv'
 	| 'per-user-following'
 	| 'per-user-followers'
-	| 'per-user-drive'
+	| 'per-user-drive';
+</script>
+
+<script lang="ts" setup>
+/* eslint-disable id-denylist --
+  Chart.js has a `data` attribute in most chart definitions, which triggers the
+  id-denylist violation when setting it. This is causing about 60+ lint issues.
+  As this is part of Chart.js's API it makes sense to disable the check here.
+*/
+import { onMounted, ref, shallowRef, watch } from 'vue';
+import { Chart } from 'chart.js';
+import * as Misskey from 'misskey-js';
+import { misskeyApiGet } from '@/scripts/misskey-api.js';
+import { defaultStore } from '@/store.js';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
+import { chartVLine } from '@/scripts/chart-vline.js';
+import { alpha } from '@/scripts/color.js';
+import date from '@/filters/date.js';
+import bytes from '@/filters/bytes.js';
+import { initChart } from '@/scripts/init-chart.js';
+import { chartLegend } from '@/scripts/chart-legend.js';
+import MkChartLegend from '@/components/MkChartLegend.vue';
+
+initChart();
 
 const props = withDefaults(defineProps<{
 	src: ChartSrc;

packages/frontend/src/components/MkModalWindow.vue

@@ -94,12 +94,12 @@ defineExpose({
 
 	--root-margin: 24px;
 
+	--headerHeight: 46px;
+	--headerHeightNarrow: 42px;
+
 	@media (max-width: 500px) {
 		--root-margin: 16px;
 	}
-
-	--headerHeight: 46px;
-	--headerHeightNarrow: 42px;
 }
 
 .header {

packages/frontend/src/components/MkSuperMenu.vue

@@ -100,14 +100,14 @@ defineProps<{
 
 	&.grid {
 		> .group {
+			margin-left: 0;
+			margin-right: 0;
+
 			& + .group {
 				padding-top: 0;
 				border-top: none;
 			}
 
-			margin-left: 0;
-			margin-right: 0;
-
 			> .title {
 				font-size: 1em;
 				opacity: 0.7;

packages/frontend/src/components/MkWindow.vue

@@ -508,10 +508,6 @@ defineExpose({
 .header {
 	--height: 39px;
 
-	&.mini {
-		--height: 32px;
-	}
-
 	display: flex;
 	position: relative;
 	z-index: 1;
@@ -524,6 +520,10 @@ defineExpose({
 	//border-bottom: solid 1px var(--divider);
 	font-size: 90%;
 	font-weight: bold;
+
+	&.mini {
+		--height: 32px;
+	}
 }
 
 .headerButton {

packages/frontend/src/pages/admin/overview.users.vue

@@ -47,14 +47,14 @@ useInterval(fetch, 1000 * 60, {
 .root {
 	&:global {
 		> .users {
-			.chart-move {
-				transition: transform 1s ease;
-			}
-
 			display: grid;
 			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 			grid-gap: 12px;
 
+			.chart-move {
+				transition: transform 1s ease;
+			}
+
 			> .user:hover {
 				text-decoration: none;
 			}

packages/frontend/src/pages/avatar-decorations.vue

@@ -12,19 +12,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #label>{{ avatarDecoration.name }}</template>
 				<template #caption>{{ avatarDecoration.description }}</template>
 
-				<div class="_gaps_m">
-					<MkInput v-model="avatarDecoration.name">
-						<template #label>{{ i18n.ts.name }}</template>
-					</MkInput>
-					<MkTextarea v-model="avatarDecoration.description">
-						<template #label>{{ i18n.ts.description }}</template>
-					</MkTextarea>
-					<MkInput v-model="avatarDecoration.url">
-						<template #label>{{ i18n.ts.imageUrl }}</template>
-					</MkInput>
-					<div class="buttons _buttons">
-						<MkButton class="button" inline primary @click="save(avatarDecoration)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-						<MkButton v-if="avatarDecoration.id != null" class="button" inline danger @click="del(avatarDecoration)"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
+				<div :class="$style.editorRoot">
+					<div :class="$style.editorWrapper">
+						<div :class="$style.preview">
+							<div :class="[$style.previewItem, $style.light]">
+								<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decorations="[avatarDecoration]" forceShowDecoration/>
+							</div>
+							<div :class="[$style.previewItem, $style.dark]">
+								<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decorations="[avatarDecoration]" forceShowDecoration/>
+							</div>
+						</div>
+						<div class="_gaps_m">
+							<MkInput v-model="avatarDecoration.name">
+								<template #label>{{ i18n.ts.name }}</template>
+							</MkInput>
+							<MkTextarea v-model="avatarDecoration.description">
+								<template #label>{{ i18n.ts.description }}</template>
+							</MkTextarea>
+							<MkInput v-model="avatarDecoration.url">
+								<template #label>{{ i18n.ts.imageUrl }}</template>
+							</MkInput>
+							<div class="_buttons">
+								<MkButton inline primary @click="save(avatarDecoration)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+								<MkButton v-if="avatarDecoration.id != null" inline danger @click="del(avatarDecoration)"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
+							</div>
+						</div>
 					</div>
 				</div>
 			</MkFolder>
@@ -39,6 +51,7 @@ import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
+import { signinRequired } from '@/account.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
@@ -47,6 +60,8 @@ import MkFolder from '@/components/MkFolder.vue';
 
 const avatarDecorations = ref<Misskey.entities.AdminAvatarDecorationsListResponse>([]);
 
+const $i = signinRequired();
+
 function add() {
 	avatarDecorations.value.unshift({
 		_id: Math.random().toString(36),
@@ -99,3 +114,55 @@ definePageMetadata(() => ({
 	icon: 'ti ti-sparkles',
 }));
 </script>
+
+<style lang="scss" module>
+.editorRoot {
+	container: editor / inline-size;
+}
+
+.editorWrapper {
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: auto auto;
+	gap: var(--margin);
+}
+
+.preview {
+	display: grid;
+	place-items: center;
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: 1fr;
+	gap: var(--margin);
+}
+
+.previewItem {
+	width: 100%;
+	height: 100%;
+	min-height: 160px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--radius);
+
+	&.light {
+		background: #eee;
+	}
+
+	&.dark {
+		background: #222;
+	}
+}
+
+@container editor (min-width: 600px) {
+	.editorWrapper {
+		grid-template-columns: 200px 1fr;
+		grid-template-rows: 1fr;
+		gap: calc(var(--margin) * 2);
+	}
+
+	.preview {
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr 1fr;
+	}
+}
+</style>