Feat: Allow users to delete their profile pictures #3221 (#9826)

### What problem does this PR solve?

Feat: Allow users to delete their profile pictures  #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/avatar-upload.tsx

@@ -1,5 +1,5 @@
 import { transformFile2Base64 } from '@/utils/file-util';
-import { Pencil, Upload } from 'lucide-react';
+import { Pencil, Upload, XIcon } from 'lucide-react';
 import {
   ChangeEventHandler,
   forwardRef,
@@ -9,6 +9,7 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
+import { Button } from './ui/button';
 import { Input } from './ui/input';
 
 type AvatarUploadProps = { value?: string; onChange?: (value: string) => void };
@@ -31,6 +32,11 @@ export const AvatarUpload = forwardRef<HTMLInputElement, AvatarUploadProps>(
       [onChange],
     );
 
+    const handleRemove = useCallback(() => {
+      setAvatarBase64Str('');
+      onChange?.('');
+    }, [onChange]);
+
     useEffect(() => {
       if (value) {
         setAvatarBase64Str(value);
@@ -59,6 +65,15 @@ export const AvatarUpload = forwardRef<HTMLInputElement, AvatarUploadProps>(
                   className="absolute right-2 bottom-0 opacity-50 hidden group-hover:block"
                 />
               </div>
+              <Button
+                onClick={handleRemove}
+                size="icon"
+                className="border-background focus-visible:border-background absolute -top-2 -right-2 size-6 rounded-full border-2 shadow-none z-10"
+                aria-label="Remove image"
+                type="button"
+              >
+                <XIcon className="size-3.5" />
+              </Button>
             </div>
           )}
           <Input