From 962b3d935c0ff025124a1079e5a1b1b8631624c4 Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Sun, 15 Mar 2026 21:56:11 +0100
Subject: [PATCH] feat(avatar) : add AvatarCropper modal with
 vue-advanced-cropper

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/components/user/AvatarCropper.vue | 88 ++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 frontend/components/user/AvatarCropper.vue

diff --git a/frontend/components/user/AvatarCropper.vue b/frontend/components/user/AvatarCropper.vue
new file mode 100644
index 0000000..a658d54
--- /dev/null
+++ b/frontend/components/user/AvatarCropper.vue
@@ -0,0 +1,88 @@
+<template>
+    <Teleport to="body">
+        <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+            <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-2xl">
+                <h3 class="mb-4 text-lg font-bold text-neutral-900">
+                    {{ $t('profile.cropAvatar') }}
+                </h3>
+
+                <div class="mx-auto mb-4 h-72 w-72">
+                    <Cropper
+                        ref="cropperRef"
+                        :src="imageSrc"
+                        :stencil-component="CircleStencil"
+                        :stencil-props="{ aspectRatio: 1 }"
+                        :canvas="{ width: 256, height: 256 }"
+                        class="h-full w-full"
+                    />
+                </div>
+
+                <div class="flex justify-end gap-3">
+                    <button
+                        type="button"
+                        class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50"
+                        @click="emit('cancel')"
+                    >
+                        {{ $t('common.cancel') }}
+                    </button>
+                    <button
+                        type="button"
+                        class="rounded-lg bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                        :disabled="cropping"
+                        @click="onConfirm"
+                    >
+                        {{ $t('common.confirm') }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import { Cropper, CircleStencil } from 'vue-advanced-cropper'
+import 'vue-advanced-cropper/dist/style.css'
+
+const props = defineProps<{
+    imageFile: File
+}>()
+
+const emit = defineEmits<{
+    (e: 'crop', blob: Blob): void
+    (e: 'cancel'): void
+}>()
+
+const cropperRef = ref()
+const cropping = ref(false)
+const imageSrc = ref('')
+
+onMounted(() => {
+    imageSrc.value = URL.createObjectURL(props.imageFile)
+})
+
+onUnmounted(() => {
+    if (imageSrc.value) {
+        URL.revokeObjectURL(imageSrc.value)
+    }
+})
+
+async function onConfirm() {
+    cropping.value = true
+
+    try {
+        const { canvas } = cropperRef.value.getResult()
+
+        if (!canvas) return
+
+        const blob = await new Promise<Blob | null>((resolve) => {
+            canvas.toBlob(resolve, 'image/png')
+        })
+
+        if (blob) {
+            emit('crop', blob)
+        }
+    } finally {
+        cropping.value = false
+    }
+}
+</script>