Merge pull request #27 from n1lsqn/2023.12.2.papi.3_icondecoFE

2023.12.2.papi.3 icondeco fe

CHANGELOG.md

@@ -17,6 +17,7 @@
 - Feat: KaTeXの実装
 - Feat: ロールにチャンネルが使えるかどうかの権限を追加
 - Feat: CWに何も書かなくても投稿できるようにする
+- Feat: アイコンデコレーションを輸入する
 
 ## 2023.12.2
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "2023.12.2.papi.2",
+	"version": "2023.12.2.papi.3",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",

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

@@ -31,6 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkFolder>
 			</div>
 		</MkFolder>
+		<br>
 		<MkFolder>
 			<template #label>リモート</template>
 			<div class="_gaps">

packages/frontend/src/pages/settings/avatar-decoration.vue

@@ -12,7 +12,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<div v-if="$i.avatarDecorations.length > 0" v-panel :class="$style.current" class="_gaps_s">
 			<div>{{ i18n.ts.inUse }}</div>
-
 			<div :class="$style.decorations">
 				<XDecoration
 					v-for="(avatarDecoration, i) in $i.avatarDecorations"
@@ -29,14 +28,28 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkButton danger @click="detachAllDecorations">{{ i18n.ts.detachAll }}</MkButton>
 		</div>
 
-		<div :class="$style.decorations">
-			<XDecoration
-				v-for="avatarDecoration in avatarDecorations"
-				:key="avatarDecoration.id"
-				:decoration="avatarDecoration"
-				@click="openDecoration(avatarDecoration)"
-			/>
-		</div>
+		<MkFolder>
+			<template #label>ローカル</template>
+			<div :class="$style.decorations">
+				<XDecoration
+					v-for="localAvatarDecoration in localAvatarDecorations"
+					:key="localAvatarDecoration.id"
+					:decoration="localAvatarDecoration"
+					@click="openLocalDecoration(localAvatarDecoration)"
+				/>
+			</div>
+		</MkFolder>
+		<MkFolder>
+			<template #label>リモート</template>
+			<div :class="$style.decorations">
+				<XDecoration
+					v-for="remoteAvatarDecoration in remoteAvatarDecorations"
+					:key="remoteAvatarDecoration.id"
+					:decoration="remoteAvatarDecoration"
+					@click="openRemoteDecoration(remoteAvatarDecoration)"
+				/>
+			</div>
+		</MkFolder>
 	</div>
 	<div v-else>
 		<MkLoading/>
@@ -54,15 +67,115 @@ import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
 import MkInfo from '@/components/MkInfo.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
+import MkFolder from '@/components/MkFolder.vue';
 
 const loading = ref(true);
 const avatarDecorations = ref<Misskey.entities.GetAvatarDecorationsResponse>([]);
+const localAvatarDecorations = ref<Misskey.entities.GetAvatarDecorationsResponse>([]);
+const remoteAvatarDecorations = ref<Misskey.entities.GetAvatarDecorationsResponse>([]);
 
 os.api('get-avatar-decorations').then(_avatarDecorations => {
 	avatarDecorations.value = _avatarDecorations;
+	_avatarDecorations.forEach(item => {
+		if (item.name.includes('import_')) {
+			remoteAvatarDecorations.value.push(item);
+		} else {
+			localAvatarDecorations.value.push(item);
+		}
+	});
 	loading.value = false;
 });
 
+function openLocalDecoration(avatarDecoration, index?: number) {
+	os.popup(defineAsyncComponent(() => import('./avatar-decoration.dialog.vue')), {
+		decoration: avatarDecoration,
+		usingIndex: index,
+	}, {
+		'attach': async (payload) => {
+			const decoration = {
+				id: avatarDecoration.id,
+				angle: payload.angle,
+				flipH: payload.flipH,
+				offsetX: payload.offsetX,
+				offsetY: payload.offsetY,
+			};
+			const update = [...$i.avatarDecorations, decoration];
+			await os.apiWithDialog('i/update', {
+				avatarDecorations: update,
+			});
+			$i.avatarDecorations = update;
+		},
+		'update': async (payload) => {
+			const decoration = {
+				id: avatarDecoration.id,
+				angle: payload.angle,
+				flipH: payload.flipH,
+				offsetX: payload.offsetX,
+				offsetY: payload.offsetY,
+			};
+			const update = [...$i.avatarDecorations];
+			update[index] = decoration;
+			await os.apiWithDialog('i/update', {
+				avatarDecorations: update,
+			});
+			$i.avatarDecorations = update;
+		},
+		'detach': async () => {
+			const update = [...$i.avatarDecorations];
+			update.splice(index, 1);
+			await os.apiWithDialog('i/update', {
+				avatarDecorations: update,
+			});
+			$i.avatarDecorations = update;
+		},
+	}, 'closed');
+}
+
+function openRemoteDecoration(avatarDecoration, index?: number) {
+	os.popup(defineAsyncComponent(() => import('./avatar-decoration.dialog.vue')), {
+		decoration: avatarDecoration,
+		usingIndex: index,
+	}, {
+		'attach': async (payload) => {
+			const decoration = {
+				id: avatarDecoration.id,
+				angle: payload.angle,
+				flipH: payload.flipH,
+				offsetX: payload.offsetX,
+				offsetY: payload.offsetY,
+			};
+			const update = [...$i.avatarDecorations, decoration];
+			await os.apiWithDialog('i/update', {
+				avatarDecorations: update,
+			});
+			$i.avatarDecorations = update;
+		},
+		'update': async (payload) => {
+			const decoration = {
+				id: avatarDecoration.id,
+				angle: payload.angle,
+				flipH: payload.flipH,
+				offsetX: payload.offsetX,
+				offsetY: payload.offsetY,
+			};
+			const update = [...$i.avatarDecorations];
+			update[index] = decoration;
+			await os.apiWithDialog('i/update', {
+				avatarDecorations: update,
+			});
+			$i.avatarDecorations = update;
+		},
+		'detach': async () => {
+			const update = [...$i.avatarDecorations];
+			update.splice(index, 1);
+			await os.apiWithDialog('i/update', {
+				avatarDecorations: update,
+			});
+			$i.avatarDecorations = update;
+		},
+	}, 'closed');
+}
+
 function openDecoration(avatarDecoration, index?: number) {
 	os.popup(defineAsyncComponent(() => import('./avatar-decoration.dialog.vue')), {
 		decoration: avatarDecoration,
@@ -108,6 +221,7 @@ function openDecoration(avatarDecoration, index?: number) {
 	}, 'closed');
 }
 
+
 function detachAllDecorations() {
 	os.confirm({
 		type: 'warning',