refactor(frontend): refactor uploader image editing features and menu

Replaces separate 'effect' and 'crop' features with a unified 'imageEditing' feature in the uploader. Groups crop and effect actions under a new parent 'editImage' menu item, adds localization for 'editImage', and updates supported types accordingly.

locales/index.d.ts

@@ -11991,6 +11991,10 @@ export interface Locale extends ILocale {
         };
     };
     "_uploader": {
+        /**
+         * 画像の編集
+         */
+        "editImage": string;
         /**
          * {x}に圧縮
          */

locales/ja-JP.yml

@@ -3208,6 +3208,7 @@ _serverSetupWizard:
     text3: "支援者向け特典もあります！"
 
 _uploader:
+  editImage: "画像の編集"
   compressedToX: "{x}に圧縮"
   savedXPercent: "{x}%節約"
   abortConfirm: "アップロードされていないファイルがありますが、中止しますか？"

packages/frontend/src/composables/use-uploader.ts

@@ -19,9 +19,8 @@ import { ensureSignin } from '@/i.js';
 import { WatermarkRenderer } from '@/utility/watermark.js';
 
 export type UploaderFeatures = {
-	effect?: boolean;
+	imageEditing?: boolean;
 	watermark?: boolean;
-	crop?: boolean;
 };
 
 const THUMBNAIL_SUPPORTED_TYPES = [
@@ -38,12 +37,6 @@ const IMAGE_COMPRESSION_SUPPORTED_TYPES = [
 	'image/svg+xml',
 ];
 
-const CROPPING_SUPPORTED_TYPES = [
-	'image/jpeg',
-	'image/png',
-	'image/webp',
-];
-
 const IMAGE_EDITING_SUPPORTED_TYPES = [
 	'image/jpeg',
 	'image/png',
@@ -55,7 +48,6 @@ const WATERMARK_SUPPORTED_TYPES = IMAGE_EDITING_SUPPORTED_TYPES;
 const IMAGE_PREPROCESS_NEEDED_TYPES = [
 	...WATERMARK_SUPPORTED_TYPES,
 	...IMAGE_COMPRESSION_SUPPORTED_TYPES,
-	...CROPPING_SUPPORTED_TYPES,
 	...IMAGE_EDITING_SUPPORTED_TYPES,
 ];
 
@@ -112,17 +104,14 @@ export function useUploader(options: {
 	multiple?: boolean;
 	features?: UploaderFeatures;
 } = {}) {
-	const $i = ensureSignin();
-
 	const events = new EventEmitter<{
 		'itemUploaded': (ctx: { item: UploaderItem; }) => void;
 	}>();
 
 	const uploaderFeatures = computed<Required<UploaderFeatures>>(() => {
 		return {
-			effect: options.features?.effect ?? true,
+			imageEditing: options.features?.imageEditing ?? true,
 			watermark: options.features?.watermark ?? true,
-			crop: options.features?.crop ?? true,
 		};
 	});
 
@@ -215,13 +204,17 @@ export function useUploader(options: {
 		}
 
 		if (
-			uploaderFeatures.value.crop &&
+			uploaderFeatures.value.imageEditing &&
-			CROPPING_SUPPORTED_TYPES.includes(item.file.type) &&
+			IMAGE_EDITING_SUPPORTED_TYPES.includes(item.file.type) &&
 			!item.preprocessing &&
 			!item.uploading &&
 			!item.uploaded
 		) {
 			menu.push({
+				type: 'parent',
+				icon: 'ti ti-photo-edit',
+				text: i18n.ts._uploader.editImage,
+				children: [{
 					icon: 'ti ti-crop',
 					text: i18n.ts.cropImage,
 					action: async () => {
@@ -237,17 +230,13 @@ export function useUploader(options: {
 							triggerRef(items);
 						});
 					},
-			});
+				}, /*{
-		}
+					icon: 'ti ti-resize',
-
+					text: i18n.ts.resize,
-		if (
+					action: async () => {
-			uploaderFeatures.value.effect &&
+						// TODO
-			IMAGE_EDITING_SUPPORTED_TYPES.includes(item.file.type) &&
+					},
-			!item.preprocessing &&
+				},*/ {
-			!item.uploading &&
-			!item.uploaded
-		) {
-			menu.push({
 					icon: 'ti ti-sparkles',
 					text: i18n.ts._imageEffector.title + ' (BETA)',
 					action: async () => {
@@ -269,6 +258,7 @@ export function useUploader(options: {
 							closed: () => dispose(),
 						});
 					},
+				}],
 			});
 		}