feat: implement space and workspace icons (#1558)

* feat: implement space and workspace icons
- Create reusable AvatarUploader component supporting avatars, space icons, and workspace icons
- Add Sharp package for server-side image resizing and optimization
- Create reusable AvatarUploader component supporting avatars, space icons, and workspace icons
- Support removing icons

* add workspace logo support
- add upload loader
- add white background to transparent image
- other fixes and enhancements

* dark mode

* fixes

* cleanup

apps/client/src/features/user/components/account-avatar.tsx

@@ -1,55 +1,58 @@
-import { focusAtom } from "jotai-optics";
-import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
+import {
+  currentUserAtom,
+  userAtom,
+} from "@/features/user/atoms/current-user-atom.ts";
 import { useState } from "react";
 import { useAtom } from "jotai";
-import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
-import { FileButton, Tooltip } from "@mantine/core";
-import { uploadAvatar } from "@/features/user/services/user-service.ts";
-import { useTranslation } from "react-i18next";
-
-const userAtom = focusAtom(currentUserAtom, (optic) => optic.prop("user"));
+import AvatarUploader from "@/components/common/avatar-uploader.tsx";
+import {
+  uploadUserAvatar,
+  removeAvatar,
+} from "@/features/attachments/services/attachment-service.ts";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
 
 export default function AccountAvatar() {
-  const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState(false);
   const [currentUser] = useAtom(currentUserAtom);
   const [, setUser] = useAtom(userAtom);
-  const [file, setFile] = useState<File | null>(null);
 
-  const handleFileChange = async (selectedFile: File) => {
-    if (!selectedFile) {
-      return;
-    }
-
-    setFile(selectedFile);
+  const handleUpload = async (selectedFile: File) => {
+    setIsLoading(true);
     try {
-      setIsLoading(true);
-      const avatar = await uploadAvatar(selectedFile);
-
-      setUser((prev) => ({ ...prev, avatarUrl: avatar.fileName }));
+      const avatar = await uploadUserAvatar(selectedFile);
+      if (currentUser?.user) {
+        setUser({ ...currentUser.user, avatarUrl: avatar.fileName });
+      }
     } catch (err) {
-      console.log(err);
+      // skip
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleRemove = async () => {
+    setIsLoading(true);
+    try {
+      await removeAvatar();
+      if (currentUser?.user) {
+        setUser({ ...currentUser.user, avatarUrl: null });
+      }
+    } catch (err) {
+      // skip
     } finally {
       setIsLoading(false);
     }
   };
 
   return (
-    <>
-      <FileButton onChange={handleFileChange} accept="image/png,image/jpeg">
-        {(props) => (
-          <Tooltip label={t("Change photo")} position="bottom">
-            <CustomAvatar
-              {...props}
-              component="button"
-              size="60px"
-              avatarUrl={currentUser?.user.avatarUrl}
-              name={currentUser?.user.name}
-              style={{ cursor: "pointer" }}
-            />
-          </Tooltip>
-        )}
-      </FileButton>
-    </>
+    <AvatarUploader
+      currentImageUrl={currentUser?.user.avatarUrl}
+      fallbackName={currentUser?.user.name}
+      size="60px"
+      type={AvatarIconType.AVATAR}
+      onUpload={handleUpload}
+      onRemove={handleRemove}
+      isLoading={isLoading}
+    />
   );
 }

apps/client/src/features/user/services/user-service.ts

@@ -10,16 +10,3 @@ export async function updateUser(data: Partial<IUser>): Promise<IUser> {
   const req = await api.post<IUser>("/users/update", data);
   return req.data as IUser;
 }
-
-export async function uploadAvatar(file: File): Promise<any> {
-  const formData = new FormData();
-  formData.append("type", "avatar");
-  formData.append("image", file);
-
-  const req = await api.post("/attachments/upload-image", formData, {
-    headers: {
-      "Content-Type": "multipart/form-data",
-    },
-  });
-  return req;
-}