From 1dfc9c266c315d008fa19ee1b2e789d16c5209ab Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 3 Jul 2025 20:29:15 +0200
Subject: [PATCH 01/10] feat: dynamically load pfp when uploading a new one

---
 components/Settings/UserSettings/Profile.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index ed7da0a..0e648c6 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -31,6 +31,7 @@ import type { UserResponse } from '~/types/interfaces';
 
 const { fetchUser } = useAuth();
 
+
 const user: UserResponse | undefined = await fetchUser()
 if (!user) {
   alert("could not fetch user info, aborting :(")
@@ -90,7 +91,7 @@ async function changeAvatar() {
       newPfpFile = file
       
       const reader = new FileReader();
-      reader.addEventListener("onload", () => {
+      reader.addEventListener("load", () => {
         if (reader.result && typeof reader.result === 'string') {
           user.avatar = reader.result;
         }
-- 
2.47.2


From 3c5525d294461fe04ef64685f9c5bada10ebcee2 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 3 Jul 2025 20:33:33 +0200
Subject: [PATCH 02/10] feat: display proper error messages when the client
 fails to update profile info

---
 components/Settings/UserSettings/Profile.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index 0e648c6..13a717a 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -65,7 +65,7 @@ async function saveChanges() {
     alert('success!!')
   } catch (error: any) {
     if (error?.response?.status !== 200) {
-      alert(`error ${error?.response?.status} met whilst trying to update profile info`)
+      alert(`error ${error?.response?.status} met whilst trying to update profile info\n"${error?.response._data?.message}"`)
     }
   }
 };
-- 
2.47.2


From 873f1c81a91d2aeaa176b286c8f67fd94ab66f6d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 06:34:15 +0200
Subject: [PATCH 03/10] fix: remove weird spacing due to weird profile popup
 inheritance

---
 components/MemberEntry.vue                   | 7 +------
 components/Settings/UserSettings/Account.vue | 4 ----
 components/Settings/UserSettings/Profile.vue | 4 ++--
 3 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/components/MemberEntry.vue b/components/MemberEntry.vue
index 3eed3c5..c77c429 100644
--- a/components/MemberEntry.vue
+++ b/components/MemberEntry.vue
@@ -3,7 +3,7 @@
         <img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
         <Icon v-else class="member-avatar" name="lucide:user" />
         <span class="member-display-name">{{ props.member.user.display_name ?? props.member.user.username }}</span>
-        <UserPopup v-if="isPopupVisible" :user="props.member.user" class="profile-popup" />
+        <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
     </div>
 </template>
 
@@ -32,9 +32,4 @@ const hidePopup = () => {
 .member-item {
     position: relative; /* Set the position to relative for absolute positioning of the popup */
 }
-
-.profile-popup {
-    position: absolute; /* Use absolute positioning */
-    left: -100px; /* Adjust this value to position the popup to the left */
-}
 </style>
diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index 85589e7..ffbb9d7 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -93,8 +93,4 @@ async function deleteAccount() {
   color: var(--text-color);
   background-color: var(--accent-color);
 }
-
-.profile-popup {
-  margin-left: 2dvw;
-}
 </style>
\ No newline at end of file
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index 13a717a..f1a550b 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -20,7 +20,7 @@
         <Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
       </div>
 
-      <UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
+      <UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
     </div>
   </div>
 </template>
@@ -133,7 +133,7 @@ async function changeAvatar() {
   background-color: var(--accent-color);
 }
 
-.profile-popup {
+#profile-popup {
   margin-left: 2dvw;
 }
 </style>
\ No newline at end of file
-- 
2.47.2


From 3c4965c06f96ee215834dc2ea1fb14f0037d600d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 08:04:50 +0200
Subject: [PATCH 04/10] feat: start implementing image cropping when uploading
 pfp

still need to fix the selection to within the canvas boundries, and fix theming
---
 components/CropPopup.vue                     |  61 ++++++++++
 components/Settings/UserSettings/Profile.vue |  37 ++++++-
 package.json                                 |   1 +
 pnpm-lock.yaml                               | 110 +++++++++++++++++++
 4 files changed, 208 insertions(+), 1 deletion(-)
 create mode 100644 components/CropPopup.vue

diff --git a/components/CropPopup.vue b/components/CropPopup.vue
new file mode 100644
index 0000000..2e1a6b1
--- /dev/null
+++ b/components/CropPopup.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="crop-popup">
+    <div class="crop-container">
+      <img ref="image" :src="imageSrc" alt="Picture">
+    </div>
+    <div class="image-preview"></div>
+    <Button text="Crop" :callback="cropImage"></Button>
+    <Button text="Cancel" :callback="closePopup"></Button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import Cropper from 'cropperjs';
+
+const props = defineProps({
+  imageSrc: String,
+  onCrop: Function,
+  onClose: Function,
+});
+
+const image = ref<HTMLImageElement | null>(null);
+const cropper = ref<Cropper | null>(null);
+
+watch(image, (newValue) => {
+  if (newValue) {
+    cropper.value = new Cropper(newValue)
+    const selection = cropper.value.getCropperSelection()
+    if (selection) {
+      selection.precise = true
+      selection.aspectRatio = 1
+      selection.initialCoverage = 1
+    }
+  }
+});
+
+async function cropImage() {
+  if (cropper) {
+    cropper.value?.element
+    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);
+        }
+      });
+    }
+  }
+}
+
+function closePopup() {
+  if (props.onClose) {
+    props.onClose();
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index f1a550b..1df8c44 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -21,12 +21,23 @@
       </div>
 
       <UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
+
+      <CropPopup 
+        v-if="isCropPopupVisible" 
+        :imageSrc="cropImageSrc" 
+        :onCrop="handleCrop" 
+        :onClose="closeCropPopup" 
+      />
     </div>
   </div>
+
+  <div id="crop-container">
+  </div>
 </template>
 
 <script lang="ts" setup>
 import Button from '~/components/Button.vue';
+import CropPopup from '~/components/CropPopup.vue';
 import type { UserResponse } from '~/types/interfaces';
 
 const { fetchUser } = useAuth();
@@ -38,6 +49,8 @@ if (!user) {
 }
 
 let newPfpFile: File;
+const isCropPopupVisible = ref(false); // State to manage the visibility of the CropPopup
+const cropImageSrc = ref(''); // State to hold the image source for cropping
 
 async function saveChanges() {
   if (!user) return;
@@ -93,7 +106,8 @@ async function changeAvatar() {
       const reader = new FileReader();
       reader.addEventListener("load", () => {
         if (reader.result && typeof reader.result === 'string') {
-          user.avatar = reader.result;
+          cropImageSrc.value = reader.result;
+          isCropPopupVisible.value = true;
         }
       });
       reader.readAsDataURL(file);
@@ -102,6 +116,27 @@ async function changeAvatar() {
 
   input.click()
 }
+
+
+function handleCrop(blob: Blob) {
+  if (!user) return;
+
+  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()
+}
+
+function closeCropPopup() {
+  isCropPopupVisible.value = false
+}
 </script>
 
 <style scoped>
diff --git a/package.json b/package.json
index b67a598..5d7d19e 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@nuxt/icon": "1.13.0",
     "@nuxt/image": "1.10.0",
     "@pinia/nuxt": "0.11.0",
+    "cropperjs": "^2.0.0",
     "dompurify": "^3.2.6",
     "marked": "^15.0.12",
     "nuxt": "^3.17.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 07816d4..6a8cf2c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       '@pinia/nuxt':
         specifier: 0.11.0
         version: 0.11.0(magicast@0.3.5)(pinia@3.0.2(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)))
+      cropperjs:
+        specifier: ^2.0.0
+        version: 2.0.0
       dompurify:
         specifier: ^3.2.6
         version: 3.2.6
@@ -205,6 +208,39 @@ packages:
     resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
     engines: {node: '>=0.1.90'}
 
+  '@cropper/element-canvas@2.0.0':
+    resolution: {integrity: sha512-GPtGJgSm92crJhhhwUsaMw3rz2KfJWWSz7kRAlufFEV/EHTP5+6r6/Z1BCGRna830i+Avqbm435XLOtA7PVJwA==}
+
+  '@cropper/element-crosshair@2.0.0':
+    resolution: {integrity: sha512-KfPfyrdeFvUC31Ws7ATtcalWWSaMtrC6bMoCipZhqbUOE7wZoL4ecDSL6BUOZxPa74awZUqfzirCDjHvheBfyw==}
+
+  '@cropper/element-grid@2.0.0':
+    resolution: {integrity: sha512-i78SQ0IJTLFveKX6P7svkfMYVdgHrQ8ZmmEw8keFy9n1ZVbK+SK0UHK5FNMRNI/gtVhKJOGEnK/zeyjUdj4Iyw==}
+
+  '@cropper/element-handle@2.0.0':
+    resolution: {integrity: sha512-ZJvW+0MkK9E8xYymGdoruaQn2kwjSHFpNSWinjyq6csuVQiCPxlX5ovAEDldmZ9MWePPtWEi3vLKQOo2Yb0T8g==}
+
+  '@cropper/element-image@2.0.0':
+    resolution: {integrity: sha512-9BxiTS/aHRmrjopaFQb9mQQXmx4ruhYHGkDZMVz24AXpMFjUY6OpqrWse/WjzD9tfhMFvEdu17b3VAekcAgpeg==}
+
+  '@cropper/element-selection@2.0.0':
+    resolution: {integrity: sha512-ensNnbIfJsJ8bhbJTH/RXtk2URFvTOO4TvfRk461n2FPEC588D7rwBmUJxQg74IiTi4y1JbCI+6j+4LyzYBLCQ==}
+
+  '@cropper/element-shade@2.0.0':
+    resolution: {integrity: sha512-jv/2bbNZnhU4W+T4G0c8ADocLIZvQFTXgCf2RFDNhI5UVxurzWBnDdb8Mx8LnVplnkTqO+xUmHZYve0CwgWo+Q==}
+
+  '@cropper/element-viewer@2.0.0':
+    resolution: {integrity: sha512-zY+3VRN5TvpM8twlphYtXw0tzJL2VgzeK7ufhL1BixVqOdRxwP13TprYIhqwGt9EW/SyJZUiaIu396T89kRX8A==}
+
+  '@cropper/element@2.0.0':
+    resolution: {integrity: sha512-lsthn0nQq73GExUE7Mg/ss6Q3RXADGDv055hxoLFwvl/wGHgy6ZkYlfLZ/VmgBHC6jDK5IgPBFnqrPqlXWSGBA==}
+
+  '@cropper/elements@2.0.0':
+    resolution: {integrity: sha512-PQkPo1nUjxLFUQuHYu+6atfHxpX9B41Xribao6wpvmvmNIFML6LQdNqqWYb6LyM7ujsu71CZdBiMT5oetjJVoQ==}
+
+  '@cropper/utils@2.0.0':
+    resolution: {integrity: sha512-cprLYr+7kK3faGgoOsTW9gIn5sefDr2KwOmgyjzIXk+8PLpW8FgFKEg5FoWfRD5zMAmkCBuX6rGKDK3VdUEGrg==}
+
   '@dabh/diagnostics@2.0.3':
     resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
 
@@ -1900,6 +1936,9 @@ packages:
     resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
     engines: {node: '>=18.0'}
 
+  cropperjs@2.0.0:
+    resolution: {integrity: sha512-TO2j0Qre01kPHbow4FuTrbdEB4jTmGRySxW49jyEIqlJZuEBfrvCTT0vC3eRB2WBXudDfKi1Onako6DKWKxeAQ==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -4965,6 +5004,72 @@ snapshots:
 
   '@colors/colors@1.6.0': {}
 
+  '@cropper/element-canvas@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-crosshair@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-grid@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-handle@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-image@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/element-canvas': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-selection@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/element-canvas': 2.0.0
+      '@cropper/element-image': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-shade@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/element-canvas': 2.0.0
+      '@cropper/element-selection': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-viewer@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/element-canvas': 2.0.0
+      '@cropper/element-image': 2.0.0
+      '@cropper/element-selection': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element@2.0.0':
+    dependencies:
+      '@cropper/utils': 2.0.0
+
+  '@cropper/elements@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/element-canvas': 2.0.0
+      '@cropper/element-crosshair': 2.0.0
+      '@cropper/element-grid': 2.0.0
+      '@cropper/element-handle': 2.0.0
+      '@cropper/element-image': 2.0.0
+      '@cropper/element-selection': 2.0.0
+      '@cropper/element-shade': 2.0.0
+      '@cropper/element-viewer': 2.0.0
+
+  '@cropper/utils@2.0.0': {}
+
   '@dabh/diagnostics@2.0.3':
     dependencies:
       colorspace: 1.1.4
@@ -6895,6 +7000,11 @@ snapshots:
 
   croner@9.0.0: {}
 
+  cropperjs@2.0.0:
+    dependencies:
+      '@cropper/elements': 2.0.0
+      '@cropper/utils': 2.0.0
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
-- 
2.47.2


From 168f0f7b128f595fd83bb0ab39ea45b432bee978 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 09:24:28 +0200
Subject: [PATCH 05/10] feat: make pfp cropper into a popup

not sure why i can't resize it though, will probably just "click" later
---
 components/CropPopup.vue                     | 30 +++++++++++------
 components/Settings/UserSettings/Profile.vue | 34 ++++++++++++++------
 2 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/components/CropPopup.vue b/components/CropPopup.vue
index 2e1a6b1..7671e4d 100644
--- a/components/CropPopup.vue
+++ b/components/CropPopup.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="crop-popup">
-    <div class="crop-container">
-      <img ref="image" :src="imageSrc" alt="Picture">
-    </div>
-    <div class="image-preview"></div>
+    <img ref="image" :src="imageSrc" style="min-height: 500px;">
     <Button text="Crop" :callback="cropImage"></Button>
     <Button text="Cancel" :callback="closePopup"></Button>
   </div>
@@ -25,18 +22,23 @@ const cropper = ref<Cropper | null>(null);
 watch(image, (newValue) => {
   if (newValue) {
     cropper.value = new Cropper(newValue)
-    const selection = cropper.value.getCropperSelection()
-    if (selection) {
-      selection.precise = true
-      selection.aspectRatio = 1
-      selection.initialCoverage = 1
+    const cropperCanvas = cropper.value.getCropperCanvas()
+    const cropperSelection = cropper.value.getCropperSelection()
+    
+    if (cropperCanvas) {
+      cropperCanvas.background = false
+    }
+
+    if (cropperSelection) {
+      cropperSelection.precise = true
+      cropperSelection.aspectRatio = 1
+      cropperSelection.initialCoverage = 1
     }
   }
 });
 
 async function cropImage() {
   if (cropper) {
-    cropper.value?.element
     const selection = cropper.value?.getCropperSelection();
     if (selection) {
       const canvas = await selection.$toCanvas({width: 256, height: 256})
@@ -58,4 +60,12 @@ function closePopup() {
 </script>
 
 <style scoped>
+.crop-popup, #image-preview{
+  min-width: 20dvw;
+  min-height: 20dvh;
+}
+
+cropper-canvas {
+  min-height: 500px;
+}
 </style>
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index 1df8c44..e9542c9 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -22,16 +22,15 @@
 
       <UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
 
-      <CropPopup 
-        v-if="isCropPopupVisible" 
-        :imageSrc="cropImageSrc" 
-        :onCrop="handleCrop" 
-        :onClose="closeCropPopup" 
-      />
     </div>
   </div>
-
-  <div id="crop-container">
+  <div v-if="isCropPopupVisible" id="crop-popup-container">
+    <CropPopup
+      :imageSrc="cropImageSrc"
+      :onCrop="handleCrop"
+      :onClose="closeCropPopup"
+      id="crop-popup-preview"
+    />
   </div>
 </template>
 
@@ -101,8 +100,6 @@ async function changeAvatar() {
       const file = input.files[0];
       if (!file) return;
 
-      newPfpFile = file
-      
       const reader = new FileReader();
       reader.addEventListener("load", () => {
         if (reader.result && typeof reader.result === 'string') {
@@ -171,4 +168,21 @@ function closeCropPopup() {
 #profile-popup {
   margin-left: 2dvw;
 }
+
+#crop-popup-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background: rgba(0,0,0,0.5);
+}
+
+#crop-popup-preview {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 </style>
\ No newline at end of file
-- 
2.47.2


From 181fcd04dbdc1a3bb66557a88c071a908582404b Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 09:27:51 +0200
Subject: [PATCH 06/10] feat: ensure there's a background colour for the user
 popup's avatar

---
 components/UserPopup.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/UserPopup.vue b/components/UserPopup.vue
index 3a65cf0..a3a15cb 100644
--- a/components/UserPopup.vue
+++ b/components/UserPopup.vue
@@ -59,12 +59,14 @@ const props = defineProps<{
   width: 96px;
   height: 96px;
   border: 5px solid #4b3018;
+  background-color: var(--secondary-color);
   border-radius: 100%;
   position: absolute;
   left: 16px;
   top: 16px;
 }
 
+
 #display-name {
   margin-top: 60px;
   margin-bottom: 0;
-- 
2.47.2


From d9c6faa6ab4a2aad29189a03e855e0461c9eb969 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 09:43:05 +0200
Subject: [PATCH 07/10] refactor: move stuff from profile to within the crop
 popup itself

---
 components/CropPopup.vue                     | 32 ++++++++++++++------
 components/Settings/UserSettings/Profile.vue | 31 ++++---------------
 2 files changed, 29 insertions(+), 34 deletions(-)

diff --git a/components/CropPopup.vue b/components/CropPopup.vue
index 7671e4d..8321cb1 100644
--- a/components/CropPopup.vue
+++ b/components/CropPopup.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="crop-popup">
-    <img ref="image" :src="imageSrc" style="min-height: 500px;">
-    <Button text="Crop" :callback="cropImage"></Button>
-    <Button text="Cancel" :callback="closePopup"></Button>
+  <div id="fullscreen-container">
+    <div id="crop-preview">
+      <img ref="image" :src="imageSrc" style="min-height: 500px;">
+      <Button class="button" text="Crop" :callback="cropImage"></Button>
+      <Button class="button" text="Cancel" :callback="closePopup"></Button>
+    </div>
   </div>
 </template>
 
@@ -60,12 +62,24 @@ function closePopup() {
 </script>
 
 <style scoped>
-.crop-popup, #image-preview{
-  min-width: 20dvw;
-  min-height: 20dvh;
+.button {
+  margin: 0.2em
 }
 
-cropper-canvas {
-  min-height: 500px;
+#fullscreen-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background: rgba(0,0,0,0.5);
+}
+
+#crop-preview {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 </style>
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index e9542c9..302c4c0 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -24,14 +24,12 @@
 
     </div>
   </div>
-  <div v-if="isCropPopupVisible" id="crop-popup-container">
-    <CropPopup
-      :imageSrc="cropImageSrc"
-      :onCrop="handleCrop"
-      :onClose="closeCropPopup"
-      id="crop-popup-preview"
-    />
-  </div>
+  <CropPopup
+    v-if="isCropPopupVisible"
+    :imageSrc="cropImageSrc"
+    :onCrop="handleCrop"
+    :onClose="closeCropPopup"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -168,21 +166,4 @@ function closeCropPopup() {
 #profile-popup {
   margin-left: 2dvw;
 }
-
-#crop-popup-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  background: rgba(0,0,0,0.5);
-}
-
-#crop-popup-preview {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
 </style>
\ No newline at end of file
-- 
2.47.2


From 33dbcb58617a3424cecd285db5c6fe31f94ecd5e Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 10:00:38 +0200
Subject: [PATCH 08/10] refactor: move yet more stuff into the popup component

---
 components/CropPopup.vue                     | 13 +++++++++++--
 components/Settings/UserSettings/Profile.vue | 12 ++----------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/components/CropPopup.vue b/components/CropPopup.vue
index 8321cb1..69d49ea 100644
--- a/components/CropPopup.vue
+++ b/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)
         }
       });
     }
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index 302c4c0..cbc6376 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/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()
 }
 
-- 
2.47.2


From e9717b137eb92a504da05f70e942f2c9c44aa72e Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 10:17:12 +0200
Subject: [PATCH 09/10] fix: minor polish

---
 components/CropPopup.vue                     | 2 +-
 components/Settings/UserSettings/Profile.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/CropPopup.vue b/components/CropPopup.vue
index 69d49ea..744b963 100644
--- a/components/CropPopup.vue
+++ b/components/CropPopup.vue
@@ -55,7 +55,7 @@ async function cropImage() {
               }
             }
           });
-          const file = new File([blob], 'image.png', { type: 'image/png' })
+          const file = new File([blob], 'preview.png', { type: 'image/png' })
           reader.readAsDataURL(file)
         }
       });
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index cbc6376..b3d9f20 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -46,8 +46,8 @@ if (!user) {
 }
 
 let newPfpFile: File;
-const isCropPopupVisible = ref(false); // State to manage the visibility of the CropPopup
-const cropImageSrc = ref(''); // State to hold the image source for cropping
+const isCropPopupVisible = ref(false);
+const cropImageSrc = ref('');
 
 async function saveChanges() {
   if (!user) return;
-- 
2.47.2


From 825cf2ba52dbe8c30d5337bf95314e5838497fed Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 19:32:14 +0200
Subject: [PATCH 10/10] fix: minor changes to fix review

---
 components/CropPopup.vue                     |  9 ++++-----
 components/Settings/UserSettings/Profile.vue | 11 ++++-------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/components/CropPopup.vue b/components/CropPopup.vue
index 744b963..12c3a0b 100644
--- a/components/CropPopup.vue
+++ b/components/CropPopup.vue
@@ -1,15 +1,14 @@
 <template>
   <div id="fullscreen-container">
     <div id="crop-preview">
-      <img ref="image" :src="imageSrc" style="min-height: 500px;">
-      <Button class="button" text="Crop" :callback="cropImage"></Button>
-      <Button class="button" text="Cancel" :callback="closePopup"></Button>
+      <img ref="image" :src="imageSrc" style="min-height: 35dvh;">
+      <Button text="Crop" :callback="cropImage"></Button>
+      <Button text="Cancel" :callback="closePopup"></Button>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
 import Cropper from 'cropperjs';
 
 const props = defineProps({
@@ -82,7 +81,7 @@ function closePopup() {
   width: 100%;
   height: 100%;
   z-index: 10;
-  background: rgba(0,0,0,0.5);
+  background: rgba(0, 0, 0, 0.5);
 }
 
 #crop-preview {
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index b3d9f20..8d79a9a 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -33,22 +33,19 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '~/components/Button.vue';
-import CropPopup from '~/components/CropPopup.vue';
 import type { UserResponse } from '~/types/interfaces';
 
+let newPfpFile: File;
+const isCropPopupVisible = ref(false);
+const cropImageSrc = ref("")
+;
 const { fetchUser } = useAuth();
 
-
 const user: UserResponse | undefined = await fetchUser()
 if (!user) {
   alert("could not fetch user info, aborting :(")
 }
 
-let newPfpFile: File;
-const isCropPopupVisible = ref(false);
-const cropImageSrc = ref('');
-
 async function saveChanges() {
   if (!user) return;
   
-- 
2.47.2