feat: ability to crop/resize picture before applying

src/locales/en/translation.json

@@ -677,6 +677,13 @@
     "upload_banner": "Upload banner",
     "uploading_banner": "Uploading banner…",
     "background_image_updated": "Background image updated",
+    "crop_profile_image": "Crop Profile Image",
+    "crop_background_image": "Crop Background Image",
+    "crop": "Crop",
+    "cropping": "Cropping…",
+    "zoom_in": "Zoom In",
+    "zoom_out": "Zoom Out",
+    "image_crop_failure": "Failed to crop image. Please try again.",
     "stats": "Stats",
     "achievements": "achievements",
     "games": "Games",

src/renderer/src/components/image-cropper/image-cropper.scss

@@ -0,0 +1,108 @@
+@use "../../scss/globals.scss";
+
+.image-cropper {
+  display: flex;
+  flex-direction: column;
+  gap: calc(globals.$spacing-unit * 2);
+  min-height: 500px;
+  max-height: 600px;
+
+  &__container {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    background-color: transparent;
+    border-radius: 4px;
+    position: relative;
+    min-height: 400px;
+  }
+
+  &__image-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  &__image {
+    display: block;
+    user-select: none;
+    pointer-events: none;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
+  &__crop-overlay {
+    position: absolute;
+    border: 2px solid globals.$brand-teal;
+    cursor: move;
+    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
+    background-color: transparent;
+
+    &--circular {
+      border-radius: 50%;
+    }
+  }
+
+  &__crop-handle {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background-color: globals.$brand-teal;
+    border: 2px solid globals.$background-color;
+    border-radius: 2px;
+    cursor: nwse-resize;
+
+    &--nw {
+      top: -6px;
+      left: -6px;
+      cursor: nwse-resize;
+    }
+
+    &--ne {
+      top: -6px;
+      right: -6px;
+      cursor: nesw-resize;
+    }
+
+    &--sw {
+      bottom: -6px;
+      left: -6px;
+      cursor: nesw-resize;
+    }
+
+    &--se {
+      bottom: -6px;
+      right: -6px;
+      cursor: nwse-resize;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2);
+  }
+
+  &__zoom-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(globals.$spacing-unit * 2);
+  }
+
+  &__zoom-value {
+    min-width: 60px;
+    text-align: center;
+    color: globals.$body-color;
+  }
+
+  &__actions {
+    display: flex;
+    gap: calc(globals.$spacing-unit * 2);
+    justify-content: flex-end;
+  }
+}
+

src/renderer/src/components/image-cropper/image-cropper.tsx

@@ -0,0 +1,645 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "../button/button";
+import { useTranslation } from "react-i18next";
+import { logger } from "@renderer/logger";
+import "./image-cropper.scss";
+
+export interface CropArea {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface ImageCropperProps {
+  imagePath: string;
+  onCrop: (cropArea: CropArea) => Promise<void>;
+  onCancel: () => void;
+  aspectRatio?: number;
+  circular?: boolean;
+  minCropSize?: number;
+}
+
+export function ImageCropper({
+  imagePath,
+  onCrop,
+  onCancel,
+  aspectRatio,
+  circular = false,
+  minCropSize = 50,
+}: Readonly<ImageCropperProps>) {
+  const { t } = useTranslation("user_profile");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
+  const zoom = 0.5;
+  const [cropArea, setCropArea] = useState<CropArea>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  });
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const [resizeHandle, setResizeHandle] = useState<string | null>(null);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const [cropStart, setCropStart] = useState<CropArea | null>(null);
+  const [isCropping, setIsCropping] = useState(false);
+
+  const getImageSrc = () => {
+    return imagePath.startsWith("local:") ? imagePath : `local:${imagePath}`;
+  };
+
+
+
+  const calculateInitialCropArea = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const containerRect = container.getBoundingClientRect();
+    if (containerRect.width === 0 || containerRect.height === 0) return;
+
+    const maxWidth = containerRect.width - 40;
+    const maxHeight = containerRect.height - 200;
+
+    if (maxWidth <= 0 || maxHeight <= 0) return;
+
+    const imageAspect = imageSize.width / imageSize.height;
+    let displayWidth = imageSize.width * zoom;
+    let displayHeight = imageSize.height * zoom;
+
+    if (displayWidth > maxWidth) {
+      displayWidth = maxWidth;
+      displayHeight = displayWidth / imageAspect;
+    }
+    if (displayHeight > maxHeight) {
+      displayHeight = maxHeight;
+      displayWidth = displayHeight * imageAspect;
+    }
+
+    const effectiveAspectRatio = circular ? 1 : aspectRatio;
+    let cropWidth: number;
+    let cropHeight: number;
+    
+    if (effectiveAspectRatio) {
+      const displayAspect = displayWidth / displayHeight;
+      if (displayAspect > effectiveAspectRatio) {
+        cropHeight = displayHeight * 0.8;
+        cropWidth = cropHeight * effectiveAspectRatio;
+      } else {
+        cropWidth = displayWidth * 0.8;
+        cropHeight = cropWidth / effectiveAspectRatio;
+      }
+    } else {
+      const cropSize = Math.min(displayWidth, displayHeight) * 0.8;
+      cropWidth = cropSize;
+      cropHeight = cropSize;
+    }
+
+    setCropArea({
+      x: (displayWidth - cropWidth) / 2,
+      y: (displayHeight - cropHeight) / 2,
+      width: cropWidth,
+      height: cropHeight,
+    });
+  }, [imageSize, aspectRatio, circular]);
+
+  useEffect(() => {
+    const img = new Image();
+    const handleImageLoad = () => {
+      setImageSize({ width: img.width, height: img.height });
+      setImageLoaded(true);
+    };
+    const handleImageError = (error: Event | string) => {
+      logger.error("Failed to load image:", { src: getImageSrc(), error });
+    };
+    img.onload = handleImageLoad;
+    img.onerror = handleImageError;
+    img.src = getImageSrc();
+  }, [imagePath]);
+
+  useEffect(() => {
+    if (!imageLoaded || imageSize.width === 0 || imageSize.height === 0) return;
+
+    const performDoubleAnimationFrame = () => {
+      calculateInitialCropArea();
+    };
+
+    const handleAnimationFrame = () => {
+      requestAnimationFrame(performDoubleAnimationFrame);
+    };
+
+    const calculateWithDelay = () => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      const containerRect = container.getBoundingClientRect();
+      if (containerRect.width === 0 || containerRect.height === 0) return;
+
+      requestAnimationFrame(handleAnimationFrame);
+    };
+
+    const handleResize = () => {
+      calculateWithDelay();
+    };
+
+    const timeoutId = setTimeout(calculateWithDelay, 200);
+
+    const resizeObserver = new ResizeObserver(handleResize);
+
+    const container = containerRef.current;
+    if (container) {
+      resizeObserver.observe(container);
+    }
+
+    return () => {
+      clearTimeout(timeoutId);
+      resizeObserver.disconnect();
+    };
+  }, [imageLoaded, imageSize, calculateInitialCropArea]);
+
+  const getDisplaySize = useCallback(() => {
+    if (!imageLoaded) return { width: 0, height: 0 };
+
+    const container = containerRef.current;
+    if (!container) {
+      return {
+        width: imageSize.width * zoom,
+        height: imageSize.height * zoom,
+      };
+    }
+
+    const containerRect = container.getBoundingClientRect();
+    const maxWidth = containerRect.width - 40;
+    const maxHeight = containerRect.height - 200;
+
+    const imageAspect = imageSize.width / imageSize.height;
+    let displayWidth = imageSize.width * zoom;
+    let displayHeight = imageSize.height * zoom;
+
+    if (displayWidth > maxWidth) {
+      displayWidth = maxWidth;
+      displayHeight = displayWidth / imageAspect;
+    }
+    if (displayHeight > maxHeight) {
+      displayHeight = maxHeight;
+      displayWidth = displayHeight * imageAspect;
+    }
+
+    return {
+      width: displayWidth,
+      height: displayHeight,
+    };
+  }, [imageLoaded, imageSize]);
+
+  const getRealCropArea = (): CropArea => {
+    if (!imageLoaded || imageSize.width === 0 || imageSize.height === 0) {
+      return cropArea;
+    }
+
+    const displaySize = getDisplaySize();
+    if (displaySize.width === 0 || displaySize.height === 0) {
+      return cropArea;
+    }
+
+    const scaleX = imageSize.width / displaySize.width;
+    const scaleY = imageSize.height / displaySize.height;
+
+    return {
+      x: cropArea.x * scaleX,
+      y: cropArea.y * scaleY,
+      width: cropArea.width * scaleX,
+      height: cropArea.height * scaleY,
+    };
+  };
+
+  const constrainCropArea = useCallback(
+    (area: CropArea): CropArea => {
+      const displaySize = getDisplaySize();
+      let { x, y, width, height } = area;
+
+      const effectiveAspectRatio = circular ? 1 : aspectRatio;
+
+      if (effectiveAspectRatio) {
+        const currentRatio = width / height;
+        if (currentRatio > effectiveAspectRatio) {
+          height = width / effectiveAspectRatio;
+        } else {
+          width = height * effectiveAspectRatio;
+        }
+      }
+
+      let minSize = minCropSize;
+      if (effectiveAspectRatio) {
+        if (effectiveAspectRatio > 1) {
+          minSize = minCropSize * effectiveAspectRatio;
+        } else {
+          minSize = minCropSize / effectiveAspectRatio;
+        }
+      }
+
+      width = Math.max(minSize, Math.min(width, displaySize.width));
+      height = Math.max(minSize, Math.min(height, displaySize.height));
+
+      if (effectiveAspectRatio) {
+        if (width / height > effectiveAspectRatio) {
+          width = height * effectiveAspectRatio;
+        } else {
+          height = width / effectiveAspectRatio;
+        }
+      }
+
+      x = Math.max(0, Math.min(x, displaySize.width - width));
+      y = Math.max(0, Math.min(y, displaySize.height - height));
+
+      return { x, y, width, height };
+    },
+    [getDisplaySize, circular, aspectRatio, minCropSize]
+  );
+
+  const getRelativeCoordinates = (
+    e: MouseEvent | React.MouseEvent
+  ): { x: number; y: number } | null => {
+    const imageWrapper = imageRef.current?.parentElement;
+    if (!imageWrapper) return null;
+
+    const rect = imageWrapper.getBoundingClientRect();
+    return {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    };
+  };
+
+  const handleDrag = useCallback(
+    (coords: { x: number; y: number }) => {
+      const newX = coords.x - dragStart.x;
+      const newY = coords.y - dragStart.y;
+      setCropArea((prev) =>
+        constrainCropArea({ ...prev, x: newX, y: newY })
+      );
+    },
+    [dragStart, constrainCropArea]
+  );
+
+  const calculateResizeDeltas = (
+    resizeHandle: string,
+    coords: { x: number; y: number },
+    cropStart: CropArea
+  ) => {
+    if (resizeHandle === "resize-se") {
+      return {
+        deltaX: coords.x - (cropStart.x + cropStart.width),
+        deltaY: coords.y - (cropStart.y + cropStart.height),
+        newX: cropStart.x,
+        newY: cropStart.y,
+      };
+    }
+    if (resizeHandle === "resize-sw") {
+      return {
+        deltaX: cropStart.x - coords.x,
+        deltaY: coords.y - (cropStart.y + cropStart.height),
+        newX: coords.x,
+        newY: cropStart.y,
+      };
+    }
+    if (resizeHandle === "resize-ne") {
+      return {
+        deltaX: coords.x - (cropStart.x + cropStart.width),
+        deltaY: cropStart.y - coords.y,
+        newX: cropStart.x,
+        newY: coords.y,
+      };
+    }
+    if (resizeHandle === "resize-nw") {
+      return {
+        deltaX: cropStart.x - coords.x,
+        deltaY: cropStart.y - coords.y,
+        newX: coords.x,
+        newY: coords.y,
+      };
+    }
+    return {
+      deltaX: 0,
+      deltaY: 0,
+      newX: cropStart.x,
+      newY: cropStart.y,
+    };
+  };
+
+  const applyCircularConstraint = (
+    newWidth: number,
+    newHeight: number,
+    cropStart: CropArea,
+    resizeHandle: string
+  ) => {
+    const size = Math.min(newWidth, newHeight);
+    const deltaSize = size - Math.min(cropStart.width, cropStart.height);
+    const adjustedWidth = cropStart.width + deltaSize;
+    const adjustedHeight = cropStart.height + deltaSize;
+    let adjustedX = cropStart.x;
+    let adjustedY = cropStart.y;
+
+    if (resizeHandle === "resize-nw" || resizeHandle === "resize-sw") {
+      adjustedX = cropStart.x + cropStart.width - adjustedWidth;
+    }
+    if (resizeHandle === "resize-nw" || resizeHandle === "resize-ne") {
+      adjustedY = cropStart.y + cropStart.height - adjustedHeight;
+    }
+
+    return {
+      width: adjustedWidth,
+      height: adjustedHeight,
+      x: adjustedX,
+      y: adjustedY,
+    };
+  };
+
+  const applyAspectRatioConstraint = (
+    newWidth: number,
+    newHeight: number,
+    cropStart: CropArea,
+    resizeHandle: string,
+    aspectRatio: number
+  ) => {
+    const currentRatio = newWidth / newHeight;
+    let adjustedWidth = newWidth;
+    let adjustedHeight = newHeight;
+
+    if (currentRatio > aspectRatio) {
+      adjustedHeight = newWidth / aspectRatio;
+    } else {
+      adjustedWidth = newHeight * aspectRatio;
+    }
+
+    let adjustedX = cropStart.x;
+    let adjustedY = cropStart.y;
+
+    if (resizeHandle === "resize-nw" || resizeHandle === "resize-sw") {
+      adjustedX = cropStart.x + cropStart.width - adjustedWidth;
+    }
+    if (resizeHandle === "resize-nw" || resizeHandle === "resize-ne") {
+      adjustedY = cropStart.y + cropStart.height - adjustedHeight;
+    }
+
+    return {
+      width: adjustedWidth,
+      height: adjustedHeight,
+      x: adjustedX,
+      y: adjustedY,
+    };
+  };
+
+  const handleResize = useCallback(
+    (coords: { x: number; y: number }) => {
+      if (!cropStart || !resizeHandle) return;
+
+      const { deltaX, deltaY, newX, newY } = calculateResizeDeltas(
+        resizeHandle,
+        coords,
+        cropStart
+      );
+
+      let adjustedWidth = cropStart.width + deltaX;
+      let adjustedHeight = cropStart.height + deltaY;
+      let adjustedX = newX;
+      let adjustedY = newY;
+
+      if (circular) {
+        const constrained = applyCircularConstraint(
+          adjustedWidth,
+          adjustedHeight,
+          cropStart,
+          resizeHandle
+        );
+        adjustedWidth = constrained.width;
+        adjustedHeight = constrained.height;
+        adjustedX = constrained.x;
+        adjustedY = constrained.y;
+      } else if (aspectRatio) {
+        const constrained = applyAspectRatioConstraint(
+          adjustedWidth,
+          adjustedHeight,
+          cropStart,
+          resizeHandle,
+          aspectRatio
+        );
+        adjustedWidth = constrained.width;
+        adjustedHeight = constrained.height;
+        adjustedX = constrained.x;
+        adjustedY = constrained.y;
+      }
+
+      const newCropArea = constrainCropArea({
+        x: adjustedX,
+        y: adjustedY,
+        width: adjustedWidth,
+        height: adjustedHeight,
+      });
+      setCropArea(newCropArea);
+    },
+    [cropStart, resizeHandle, circular, aspectRatio, constrainCropArea]
+  );
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (!imageLoaded) return;
+      e.preventDefault();
+      e.stopPropagation();
+
+      const coords = getRelativeCoordinates(e);
+      if (!coords) return;
+
+      const handle = (e.target as HTMLElement)?.dataset?.handle;
+      if (handle?.startsWith("resize-")) {
+        setIsResizing(true);
+        setResizeHandle(handle);
+        setCropStart(cropArea);
+      } else if (
+        coords.x >= cropArea.x &&
+        coords.x <= cropArea.x + cropArea.width &&
+        coords.y >= cropArea.y &&
+        coords.y <= cropArea.y + cropArea.height
+      ) {
+        setIsDragging(true);
+        setDragStart({ x: coords.x - cropArea.x, y: coords.y - cropArea.y });
+      }
+    },
+    [imageLoaded, cropArea]
+  );
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!imageLoaded) return;
+
+      const coords = getRelativeCoordinates(e);
+      if (!coords) return;
+
+      if (isDragging && cropStart === null) {
+        handleDrag(coords);
+      } else if (isResizing && cropStart && resizeHandle) {
+        handleResize(coords);
+      }
+    },
+    [imageLoaded, isDragging, isResizing, cropStart, resizeHandle, handleDrag, handleResize]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    setIsResizing(false);
+    setResizeHandle(null);
+    setCropStart(null);
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+      }
+    },
+    []
+  );
+
+  const handleOverlayKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const step = e.shiftKey ? 10 : 1;
+      let newX = cropArea.x;
+      let newY = cropArea.y;
+
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        newX = cropArea.x - step;
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        newX = cropArea.x + step;
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        newY = cropArea.y - step;
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        newY = cropArea.y + step;
+      } else {
+        return;
+      }
+
+      setCropArea((prev) => constrainCropArea({ ...prev, x: newX, y: newY }));
+    },
+    [cropArea, constrainCropArea]
+  );
+
+  useEffect(() => {
+    if (!isDragging && !isResizing) return;
+
+    const cleanup = () => {
+      globalThis.removeEventListener("mousemove", handleMouseMove);
+      globalThis.removeEventListener("mouseup", handleMouseUp);
+    };
+
+    globalThis.addEventListener("mousemove", handleMouseMove);
+    globalThis.addEventListener("mouseup", handleMouseUp);
+    return cleanup;
+  }, [isDragging, isResizing, handleMouseMove, handleMouseUp]);
+
+
+  const handleCrop = async () => {
+    setIsCropping(true);
+    try {
+      const realCropArea = getRealCropArea();
+      await onCrop(realCropArea);
+    } finally {
+      setIsCropping(false);
+    }
+  };
+
+  const displaySize = getDisplaySize();
+
+  return (
+    <div className="image-cropper">
+      <div
+        className="image-cropper__container"
+        ref={containerRef}
+      >
+        <div className="image-cropper__image-wrapper">
+          {imageLoaded && (
+            <img
+              ref={imageRef}
+              src={getImageSrc()}
+              alt="Crop"
+              className="image-cropper__image"
+              style={{
+                width: `${displaySize.width}px`,
+                height: `${displaySize.height}px`,
+                maxWidth: "100%",
+                maxHeight: "100%",
+              }}
+            />
+          )}
+          {imageLoaded && cropArea.width > 0 && cropArea.height > 0 && (
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+            <section
+              className={`image-cropper__crop-overlay ${circular ? "image-cropper__crop-overlay--circular" : ""}`}
+              style={{
+                left: `${cropArea.x}px`,
+                top: `${cropArea.y}px`,
+                width: `${cropArea.width}px`,
+                height: `${cropArea.height}px`,
+              }}
+              aria-label={t("crop_area")}
+              onMouseDown={handleMouseDown}
+              onKeyDown={handleOverlayKeyDown}
+            >
+              <button
+                type="button"
+                className="image-cropper__crop-handle image-cropper__crop-handle--nw"
+                data-handle="resize-nw"
+                aria-label={t("resize_handle_nw")}
+                onMouseDown={handleMouseDown}
+                onKeyDown={handleKeyDown}
+              />
+              <button
+                type="button"
+                className="image-cropper__crop-handle image-cropper__crop-handle--ne"
+                data-handle="resize-ne"
+                aria-label={t("resize_handle_ne")}
+                onMouseDown={handleMouseDown}
+                onKeyDown={handleKeyDown}
+              />
+              <button
+                type="button"
+                className="image-cropper__crop-handle image-cropper__crop-handle--sw"
+                data-handle="resize-sw"
+                aria-label={t("resize_handle_sw")}
+                onMouseDown={handleMouseDown}
+                onKeyDown={handleKeyDown}
+              />
+              <button
+                type="button"
+                className="image-cropper__crop-handle image-cropper__crop-handle--se"
+                data-handle="resize-se"
+                aria-label={t("resize_handle_se")}
+                onMouseDown={handleMouseDown}
+                onKeyDown={handleKeyDown}
+              />
+            </section>
+          )}
+        </div>
+      </div>
+
+      <div className="image-cropper__controls">
+        <div className="image-cropper__actions">
+          <Button theme="outline" onClick={onCancel} disabled={isCropping}>
+            {t("cancel")}
+          </Button>
+          <Button
+            theme="primary"
+            onClick={handleCrop}
+            disabled={isCropping || !imageLoaded}
+          >
+            {isCropping ? t("cropping") : t("crop")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+

src/renderer/src/components/index.ts

@@ -19,3 +19,4 @@ export * from "./context-menu/context-menu";
 export * from "./game-context-menu/game-context-menu";
 export * from "./game-context-menu/use-game-actions";
 export * from "./star-rating/star-rating";
+export * from "./image-cropper/image-cropper";

src/renderer/src/helpers/image-cropper.ts

@@ -0,0 +1,141 @@
+/**
+ * Crops an image using HTML5 Canvas API
+ * @param imagePath - Path to the image file
+ * @param cropArea - Crop area coordinates and dimensions
+ * @param outputFormat - Output image format (default: 'image/png')
+ * @returns Promise resolving to cropped image as Uint8Array
+ */
+export async function cropImage(
+  imagePath: string,
+  cropArea: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  },
+  outputFormat: string = "image/png"
+): Promise<Uint8Array> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+
+      if (!ctx) {
+        reject(new Error("Failed to get canvas context"));
+        return;
+      }
+
+      canvas.width = cropArea.width;
+      canvas.height = cropArea.height;
+
+      ctx.drawImage(
+        img,
+        cropArea.x,
+        cropArea.y,
+        cropArea.width,
+        cropArea.height,
+        0,
+        0,
+        cropArea.width,
+        cropArea.height
+      );
+
+      canvas.toBlob(
+        (blob) => {
+          if (!blob) {
+            reject(new Error("Failed to create blob from canvas"));
+            return;
+          }
+
+          blob.arrayBuffer().then((buffer) => {
+            resolve(new Uint8Array(buffer));
+          });
+        },
+        outputFormat,
+        0.95
+      );
+    };
+
+    img.onerror = () => {
+      reject(new Error("Failed to load image"));
+    };
+
+    img.src = imagePath.startsWith("local:") ? imagePath : `local:${imagePath}`;
+  });
+}
+
+/**
+ * Crops an image to a circular shape
+ * @param imagePath - Path to the image file
+ * @param cropArea - Crop area coordinates and dimensions (should be square for circle)
+ * @param outputFormat - Output image format (default: 'image/png')
+ * @returns Promise resolving to cropped circular image as Uint8Array
+ */
+export async function cropImageToCircle(
+  imagePath: string,
+  cropArea: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  },
+  outputFormat: string = "image/png"
+): Promise<Uint8Array> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+
+      if (!ctx) {
+        reject(new Error("Failed to get canvas context"));
+        return;
+      }
+
+      const size = Math.min(cropArea.width, cropArea.height);
+      canvas.width = size;
+      canvas.height = size;
+
+      ctx.beginPath();
+      ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
+      ctx.clip();
+
+      ctx.drawImage(
+        img,
+        cropArea.x,
+        cropArea.y,
+        size,
+        size,
+        0,
+        0,
+        size,
+        size
+      );
+
+      canvas.toBlob(
+        (blob) => {
+          if (!blob) {
+            reject(new Error("Failed to create blob from canvas"));
+            return;
+          }
+
+          blob.arrayBuffer().then((buffer) => {
+            resolve(new Uint8Array(buffer));
+          });
+        },
+        outputFormat,
+        0.95
+      );
+    };
+
+    img.onerror = () => {
+      reject(new Error("Failed to load image"));
+    };
+
+    img.src = imagePath.startsWith("local:") ? imagePath : `local:${imagePath}`;
+  });
+}
+

src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";
 
@@ -10,8 +10,11 @@ import {
   Modal,
   ModalProps,
   TextField,
+  ImageCropper,
+  CropArea,
 } from "@renderer/components";
 import { useToast, useUserDetails } from "@renderer/hooks";
+import { cropImage } from "@renderer/helpers/image-cropper";
 
 import { yupResolver } from "@hookform/resolvers/yup";
 
@@ -63,6 +66,62 @@ export function EditProfileModal(
 
   const { showSuccessToast, showErrorToast } = useToast();
 
+  const [showCropper, setShowCropper] = useState(false);
+  const [selectedImagePath, setSelectedImagePath] = useState<string | null>(
+    null
+  );
+  const [onImageChange, setOnImageChange] = useState<
+    ((value: string) => void) | null
+  >(null);
+
+  const handleCrop = async (cropArea: CropArea) => {
+    if (!selectedImagePath || !onImageChange) return;
+
+    try {
+      const imagePathForCrop = selectedImagePath.startsWith("local:")
+        ? selectedImagePath.slice(6)
+        : selectedImagePath;
+      const imageData = await cropImage(
+        imagePathForCrop,
+        cropArea,
+        "image/png"
+      );
+
+      const tempFileName = `cropped-profile-${Date.now()}.png`;
+      const croppedPath = await window.electron.saveTempFile(
+        tempFileName,
+        imageData
+      );
+
+      if (!hasActiveSubscription) {
+        const { imagePath } = await window.electron
+          .processProfileImage(croppedPath)
+          .catch(() => {
+            showErrorToast(t("image_process_failure"));
+            return { imagePath: null };
+          });
+
+        if (imagePath) {
+          onImageChange(imagePath);
+        }
+      } else {
+        onImageChange(croppedPath);
+      }
+
+      setShowCropper(false);
+      setSelectedImagePath(null);
+      setOnImageChange(null);
+    } catch (error) {
+      showErrorToast(t("image_crop_failure"));
+    }
+  };
+
+  const handleCancelCrop = () => {
+    setShowCropper(false);
+    setSelectedImagePath(null);
+    setOnImageChange(null);
+  };
+
   const onSubmit = async (values: FormValues) => {
     return patchUser(values)
       .then(async () => {
@@ -99,19 +158,9 @@ export function EditProfileModal(
 
                 if (filePaths && filePaths.length > 0) {
                   const path = filePaths[0];
-
-                  if (!hasActiveSubscription) {
-                    const { imagePath } = await window.electron
-                      .processProfileImage(path)
-                      .catch(() => {
-                        showErrorToast(t("image_process_failure"));
-                        return { imagePath: null };
-                      });
-
-                    onChange(imagePath);
-                  } else {
-                    onChange(path);
-                  }
+                  setSelectedImagePath(path);
+                  setOnImageChange(() => onChange);
+                  setShowCropper(true);
                 }
               };
 
@@ -155,6 +204,22 @@ export function EditProfileModal(
           />
         </div>
 
+        {showCropper && selectedImagePath && (
+          <Modal
+            visible={showCropper}
+            title={t("crop_profile_image")}
+            onClose={handleCancelCrop}
+            large
+          >
+            <ImageCropper
+              imagePath={selectedImagePath}
+              onCrop={handleCrop}
+              onCancel={handleCancelCrop}
+              aspectRatio={1}
+            />
+          </Modal>
+        )}
+
         <small className="edit-profile-modal__hint">
           <Trans i18nKey="privacy_hint" ns="user_profile">
             <Link to="/settings" />

src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.tsx

@@ -1,14 +1,19 @@
 import { UploadIcon } from "@primer/octicons-react";
-import { Button } from "@renderer/components";
+import { Button, Modal, ImageCropper, CropArea } from "@renderer/components";
 import { useContext, useState } from "react";
 import { userProfileContext } from "@renderer/context";
 import { useToast, useUserDetails } from "@renderer/hooks";
 import { useTranslation } from "react-i18next";
+import { cropImage } from "@renderer/helpers/image-cropper";
 import "./upload-background-image-button.scss";
 
 export function UploadBackgroundImageButton() {
   const [isUploadingBackgroundImage, setIsUploadingBackgorundImage] =
     useState(false);
+  const [showCropper, setShowCropper] = useState(false);
+  const [selectedImagePath, setSelectedImagePath] = useState<string | null>(
+    null
+  );
   const { hasActiveSubscription } = useUserDetails();
 
   const { t } = useTranslation("user_profile");
@@ -16,47 +21,98 @@ export function UploadBackgroundImageButton() {
   const { isMe, setSelectedBackgroundImage } = useContext(userProfileContext);
   const { patchUser, fetchUserDetails } = useUserDetails();
 
-  const { showSuccessToast } = useToast();
+  const { showSuccessToast, showErrorToast } = useToast();
 
   const handleChangeCoverClick = async () => {
+    const { filePaths } = await window.electron.showOpenDialog({
+      properties: ["openFile"],
+      filters: [
+        {
+          name: "Image",
+          extensions: ["jpg", "jpeg", "png", "gif", "webp"],
+        },
+      ],
+    });
+
+    if (filePaths && filePaths.length > 0) {
+      const path = filePaths[0];
+      setSelectedImagePath(path);
+      setShowCropper(true);
+    }
+  };
+
+  const handleCrop = async (cropArea: CropArea) => {
+    if (!selectedImagePath) return;
+
     try {
-      const { filePaths } = await window.electron.showOpenDialog({
-        properties: ["openFile"],
-        filters: [
-          {
-            name: "Image",
-            extensions: ["jpg", "jpeg", "png", "gif", "webp"],
-          },
-        ],
-      });
+      setIsUploadingBackgorundImage(true);
+      setShowCropper(false);
 
-      if (filePaths && filePaths.length > 0) {
-        const path = filePaths[0];
+      const imagePathForCrop = selectedImagePath.startsWith("local:")
+        ? selectedImagePath.slice(6)
+        : selectedImagePath;
+      const imageData = await cropImage(
+        imagePathForCrop,
+        cropArea,
+        "image/png"
+      );
 
-        setSelectedBackgroundImage(path);
-        setIsUploadingBackgorundImage(true);
+      const tempFileName = `cropped-background-${Date.now()}.png`;
+      const croppedPath = await window.electron.saveTempFile(
+        tempFileName,
+        imageData
+      );
 
-        await patchUser({ backgroundImageUrl: path });
+      setSelectedBackgroundImage(croppedPath);
+      await patchUser({ backgroundImageUrl: croppedPath });
 
-        showSuccessToast(t("background_image_updated"));
-        await fetchUserDetails();
-      }
+      showSuccessToast(t("background_image_updated"));
+      await fetchUserDetails();
+
+      setSelectedImagePath(null);
+    } catch (error) {
+      showErrorToast(t("image_crop_failure"));
     } finally {
       setIsUploadingBackgorundImage(false);
     }
   };
 
+  const handleCancelCrop = () => {
+    setShowCropper(false);
+    setSelectedImagePath(null);
+  };
+
   if (!isMe || !hasActiveSubscription) return null;
 
   return (
-    <Button
-      theme="outline"
-      className="upload-background-image-button"
-      onClick={handleChangeCoverClick}
-      disabled={isUploadingBackgroundImage}
-    >
-      <UploadIcon />
-      {isUploadingBackgroundImage ? t("uploading_banner") : t("upload_banner")}
-    </Button>
+    <>
+      <Button
+        theme="outline"
+        className="upload-background-image-button"
+        onClick={handleChangeCoverClick}
+        disabled={isUploadingBackgroundImage}
+      >
+        <UploadIcon />
+        {isUploadingBackgroundImage
+          ? t("uploading_banner")
+          : t("upload_banner")}
+      </Button>
+
+      {showCropper && selectedImagePath && (
+        <Modal
+          visible={showCropper}
+          title={t("crop_background_image")}
+          onClose={handleCancelCrop}
+          large
+        >
+          <ImageCropper
+            imagePath={selectedImagePath}
+            onCrop={handleCrop}
+            onCancel={handleCancelCrop}
+            aspectRatio={21 / 9}
+          />
+        </Modal>
+      )}
+    </>
   );
 }