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/sidebar/space-select.tsx

@@ -1,9 +1,11 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useDebouncedValue } from "@mantine/hooks";
-import { Avatar, Group, Select, SelectProps, Text } from "@mantine/core";
+import { Group, Select, SelectProps, Text } from "@mantine/core";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query.ts";
 import { ISpace } from "../../types/space.types";
 import { useTranslation } from "react-i18next";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
 
 interface SpaceSelectProps {
   onChange: (value: ISpace) => void;
@@ -16,7 +18,14 @@ interface SpaceSelectProps {
 
 const renderSelectOption: SelectProps["renderOption"] = ({ option }) => (
   <Group gap="sm" wrap="nowrap">
-    <Avatar color="initials" variant="filled" name={option.label} size={20} />
+    <CustomAvatar
+      name={option.label}
+      avatarUrl={option?.["icon"]}
+      type={AvatarIconType.SPACE_ICON}
+      color="initials"
+      variant="filled"
+      size={20}
+    />
     <div>
       <Text size="sm" lineClamp={1}>
         {option.label}
@@ -50,6 +59,7 @@ export function SpaceSelect({
           return {
             label: space.name,
             value: space.slug,
+            icon: space.logo,
           };
         });
 
@@ -76,7 +86,6 @@ export function SpaceSelect({
       onChange={(slug) =>
         onChange(spaces.items?.find((item) => item.slug === slug))
       }
-      // duct tape
       onClick={(e) => e.stopPropagation()}
       nothingFoundMessage={t("No space found")}
       limit={50}

apps/client/src/features/space/components/sidebar/space-sidebar.tsx

@@ -74,7 +74,11 @@ export function SpaceSidebar() {
             marginBottom: 3,
           }}
         >
-          <SwitchSpace spaceName={space?.name} spaceSlug={space?.slug} />
+          <SwitchSpace
+            spaceName={space?.name}
+            spaceSlug={space?.slug}
+            spaceIcon={space?.logo}
+          />
         </div>
 
         <div className={classes.section}>

apps/client/src/features/space/components/sidebar/switch-space.tsx

@@ -1,17 +1,25 @@
-import classes from './switch-space.module.css';
-import { useNavigate } from 'react-router-dom';
-import { SpaceSelect } from './space-select';
-import { getSpaceUrl } from '@/lib/config';
-import { Avatar, Button, Popover, Text } from '@mantine/core';
-import { IconChevronDown } from '@tabler/icons-react';
-import { useDisclosure } from '@mantine/hooks';
+import classes from "./switch-space.module.css";
+import { useNavigate } from "react-router-dom";
+import { SpaceSelect } from "./space-select";
+import { getSpaceUrl } from "@/lib/config";
+import { Button, Popover, Text } from "@mantine/core";
+import { IconChevronDown } from "@tabler/icons-react";
+import { useDisclosure } from "@mantine/hooks";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
+import React from "react";
 
 interface SwitchSpaceProps {
   spaceName: string;
   spaceSlug: string;
+  spaceIcon?: string;
 }
 
-export function SwitchSpace({ spaceName, spaceSlug }: SwitchSpaceProps) {
+export function SwitchSpace({
+  spaceName,
+  spaceSlug,
+  spaceIcon,
+}: SwitchSpaceProps) {
   const navigate = useNavigate();
   const [opened, { close, open, toggle }] = useDisclosure(false);
 
@@ -40,11 +48,13 @@ export function SwitchSpace({ spaceName, spaceSlug }: SwitchSpaceProps) {
           color="gray"
           onClick={open}
         >
-          <Avatar
-            size={20}
+          <CustomAvatar
+            name={spaceName}
+            avatarUrl={spaceIcon}
+            type={AvatarIconType.SPACE_ICON}
             color="initials"
             variant="filled"
-            name={spaceName}
+            size={20}
           />
           <Text className={classes.spaceName} size="md" fw={500} lineClamp={1}>
             {spaceName}
@@ -55,7 +65,7 @@ export function SwitchSpace({ spaceName, spaceSlug }: SwitchSpaceProps) {
         <SpaceSelect
           label={spaceName}
           value={spaceSlug}
-          onChange={space => handleSelect(space.slug)}
+          onChange={(space) => handleSelect(space.slug)}
           width={300}
           opened={true}
         />