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

web/src/components/ChatInfoPanel.tsx

@@ -21,6 +21,7 @@ import type { AuthUser, ChatAttachment, ChatDetail, ChatMember, Message, UserSea
 import { useAuthStore } from "../store/authStore";
 import { useChatStore } from "../store/chatStore";
 import { useUiStore } from "../store/uiStore";
+import { AvatarCropModal } from "./AvatarCropModal";
 import { MediaViewer } from "./MediaViewer";
 
 interface Props {
@@ -58,6 +59,7 @@ export function ChatInfoPanel({ chatId, open, onClose }: Props) {
   const [memberCtx, setMemberCtx] = useState<{ x: number; y: number; member: ChatMember } | null>(null);
   const [attachmentsTab, setAttachmentsTab] = useState<"all" | "photos" | "videos" | "audio" | "links" | "voice">("all");
   const [mediaViewer, setMediaViewer] = useState<{ items: Array<{ url: string; type: "image" | "video"; messageId: number }>; index: number } | null>(null);
+  const [avatarCropFile, setAvatarCropFile] = useState<File | null>(null);
 
   const myRole = useMemo(() => {
     if (chat?.my_role) {
@@ -314,7 +316,7 @@ export function ChatInfoPanel({ chatId, open, onClose }: Props) {
                           if (!file) {
                             return;
                           }
-                          void uploadChatAvatar(file);
+                          setAvatarCropFile(file);
                         }}
                         type="file"
                       />
@@ -821,6 +823,15 @@ export function ChatInfoPanel({ chatId, open, onClose }: Props) {
           open
         />
       ) : null}
+      <AvatarCropModal
+        file={avatarCropFile}
+        onApply={(processedFile) => {
+          setAvatarCropFile(null);
+          void uploadChatAvatar(processedFile);
+        }}
+        onCancel={() => setAvatarCropFile(null)}
+        open={Boolean(avatarCropFile)}
+      />
     </div>,
     document.body
   );