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/space/components/space-grid.tsx

@@ -1,5 +1,5 @@
-import { Text, Avatar, SimpleGrid, Card, rem, Group, Button } from "@mantine/core";
-import React, { useEffect } from 'react';
+import { Text, SimpleGrid, Card, rem, Group, Button } from "@mantine/core";
+import React from "react";
 import {
   prefetchSpace,
   useGetSpacesQuery,
@@ -10,6 +10,8 @@ import classes from "./space-grid.module.css";
 import { formatMemberCount } from "@/lib";
 import { useTranslation } from "react-i18next";
 import { IconArrowRight } from "@tabler/icons-react";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
 
 export default function SpaceGrid() {
   const { t } = useTranslation();
@@ -27,8 +29,10 @@ export default function SpaceGrid() {
       withBorder
     >
       <Card.Section className={classes.cardSection} h={40}></Card.Section>
-      <Avatar
+      <CustomAvatar
         name={space.name}
+        avatarUrl={space.logo}
+        type={AvatarIconType.SPACE_ICON}
         color="initials"
         variant="filled"
         size="md"
@@ -54,7 +58,7 @@ export default function SpaceGrid() {
       </Group>
 
       <SimpleGrid cols={{ base: 1, xs: 2, sm: 3 }}>{cards}</SimpleGrid>
-      
+
       {data?.items && data.items.length > 9 && (
         <Group justify="flex-end" mt="lg">
           <Button