feat: ✨ crop image option in post form

packages/client/src/components/MkPostForm.vue

@@ -155,6 +155,7 @@
 				@detach="detachFile"
 				@changeSensitive="updateFileSensitive"
 				@changeName="updateFileName"
+				@cropImage="useCroppedImage"
 			/>
 			<XPollEditor v-if="poll" v-model="poll" @destroyed="poll = null" />
 			<XNotePreview v-if="showPreview" class="preview" :text="text" />
@@ -652,6 +653,10 @@ function updateFileName(file, name) {
 	files.value[files.value.findIndex((x) => x.id === file.id)].name = name;
 }
 
+function useCroppedImage(file, cropped) {
+	files.value[files.value.findIndex((x) => x.id === file.id)] = cropped;
+}
+
 function upload(file: File, name?: string) {
 	uploadFile(file, defaultStore.state.uploadFolder, name).then((res) => {
 		files.value.push(res);

packages/client/src/components/MkPostFormAttaches.vue

@@ -52,6 +52,7 @@ const emits = defineEmits([
 	"detach",
 	"changeSensitive",
 	"changeName",
+	"cropImage",
 ]);
 
 const _files = computed({
@@ -76,6 +77,13 @@ function toggleSensitive(file) {
 	});
 }
 
+function cropImage(file) {
+	if (file.type !== "image") return;
+	os.cropImage(file).then((newFile) => {
+		emits("cropImage", newFile);
+	});
+}
+
 async function rename(file) {
 	const { canceled, result } = await os.inputText({
 		title: i18n.ts.enterFileName,
@@ -147,6 +155,13 @@ function showFileMenu(file, ev: MouseEvent) {
 					describe(file);
 				},
 			},
+			file.type === "image" ? {
+				text: i18n.ts.cropImage,
+				icon: "ph-crop ph-bold ph-lg",
+				action: () => {
+					cropImage(file);
+				},
+			} : null,
 			{
 				text: i18n.ts.attachCancel,
 				icon: "ph-x ph-bold ph-lg",

packages/client/src/os.ts

@@ -746,7 +746,7 @@ export async function pickEmoji(src: HTMLElement | null, opts) {
 
 export async function cropImage(
 	image: firefish.entities.DriveFile,
-	options: {
+	options?: {
 		aspectRatio?: Array<number>;
 	},
 ): Promise<firefish.entities.DriveFile> {
@@ -759,7 +759,7 @@ export async function cropImage(
 			}),
 			{
 				file: image,
-				aspectRatio: options.aspectRatio,
+				aspectRatio: options?.aspectRatio,
 			},
 			{
 				ok: (x) => {