refactor: move yet more stuff into the popup component

components/CropPopup.vue

@@ -44,10 +44,19 @@ async function cropImage() {
     const selection = cropper.value?.getCropperSelection();
     if (selection) {
       const canvas = await selection.$toCanvas({width: 256, height: 256})
-      console.log(canvas)
+
       canvas.toBlob((blob) => {
         if (blob && props.onCrop) {
-          props.onCrop(blob);
+          const reader = new FileReader();
+          reader.addEventListener("load", () => {
+            if (reader.result && typeof reader.result === 'string') {
+              if (props.onCrop) {
+                props.onCrop(blob, reader.result)
+              }
+            }
+          });
+          const file = new File([blob], 'image.png', { type: 'image/png' })
+          reader.readAsDataURL(file)
         }
       });
     }

components/Settings/UserSettings/Profile.vue

@@ -113,19 +113,11 @@ async function changeAvatar() {
 }
 
 
-function handleCrop(blob: Blob) {
+function handleCrop(blob: Blob, url: string) {
   if (!user) return;
 
+  user.avatar = url;
   newPfpFile = new File([blob], 'avatar.png', { type: 'image/png' })
-
-  const reader = new FileReader();
-  reader.addEventListener("load", () => {
-    if (reader.result && typeof reader.result === 'string') {
-      user.avatar = reader.result;
-    }
-  });
-  reader.readAsDataURL(newPfpFile)
-
   closeCropPopup()
 }