web: add 500x500 avatar cropper for profile and chat uploads

web/src/components/SettingsPanel.tsx

@@ -9,6 +9,7 @@ import type { AuthSession, AuthUser } from "../chat/types";
 import { useAuthStore } from "../store/authStore";
 import { useUiStore } from "../store/uiStore";
 import { AppPreferences, getAppPreferences, updateAppPreferences } from "../utils/preferences";
+import { AvatarCropModal } from "./AvatarCropModal";
 
 type SettingsPage = "main" | "general" | "notifications" | "privacy";
 
@@ -45,6 +46,7 @@ export function SettingsPanel({ open, onClose }: Props) {
     avatarUrl: "",
   });
   const [profileAvatarUploading, setProfileAvatarUploading] = useState(false);
+  const [avatarCropFile, setAvatarCropFile] = useState<File | null>(null);
 
   useEffect(() => {
     if (!me) {
@@ -244,7 +246,7 @@ export function SettingsPanel({ open, onClose }: Props) {
                             if (!file) {
                               return;
                             }
-                            void uploadAvatar(file);
+                            setAvatarCropFile(file);
                           }}
                           type="file"
                         />
@@ -605,6 +607,15 @@ export function SettingsPanel({ open, onClose }: Props) {
           ) : null}
         </div>
       </aside>
+      <AvatarCropModal
+        file={avatarCropFile}
+        onApply={(processedFile) => {
+          setAvatarCropFile(null);
+          void uploadAvatar(processedFile);
+        }}
+        onCancel={() => setAvatarCropFile(null)}
+        open={Boolean(avatarCropFile)}
+      />
     </div>,
     document.body
   );