fix: avatar upload display and oversized crop on HiDPI screens (#442)

Two related avatar bugs:

1. getAvatarUrl() returned empty string for S3 keys, so uploaded
   avatars never displayed. Now constructs the full URL using
   NEXT_PUBLIC_STORAGE_URL and NEXT_PUBLIC_AVATAR_BUCKET_NAME,
   with support for both path-style (MinIO) and virtual-hosted
   (Tigris/AWS S3) URLs.

2. Avatar crop scaled canvas by devicePixelRatio (4x pixels on
   Retina), producing blobs that exceeded the 2MB upload limit
   even for small source images. Now caps output at 512x512 and
   uses quality=0.85 for toBlob().

Closes #440, closes #441

Co-authored-by: Claude <noreply@anthropic.com>

apps/web/src/utils/helpers.ts

@@ -1,3 +1,5 @@
+import { env } from "next-runtime-env";
+
 export const formatToArray = (
   value: string | string[] | undefined,
 ): string[] => {
@@ -50,5 +52,21 @@ export const getAvatarUrl = (imageOrKey: string | null) => {
     return imageOrKey;
   }
 
+  // Construct URL from S3 key
+  const useVirtualHosted = env("NEXT_PUBLIC_USE_VIRTUAL_HOSTED_URLS") === "true";
+  const storageDomain = env("NEXT_PUBLIC_STORAGE_DOMAIN");
+  const storageUrl = env("NEXT_PUBLIC_STORAGE_URL");
+  const bucket = env("NEXT_PUBLIC_AVATAR_BUCKET_NAME");
+
+  if (useVirtualHosted && storageDomain && bucket) {
+    // Virtual-hosted style: https://{bucket}.{domain}/{key}
+    return `https://${bucket}.${storageDomain}/${imageOrKey}`;
+  }
+
+  if (storageUrl && bucket) {
+    // Path-style: {storageUrl}/{bucket}/{key}
+    return `${storageUrl}/${bucket}/${imageOrKey}`;
+  }
+
   return "";
 };