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
2025-11-14 01:01:12 +10:00 · 2025-09-15 21:11:37 +01:00
parent 61d1cf88a7
commit 1280f96f37
41 changed files with 1043 additions and 213 deletions
--- a/apps/client/public/locales/en-US/translation.json
+++ b/apps/client/public/locales/en-US/translation.json
@ -527,5 +527,11 @@
  "Delete SSO provider": "Delete SSO provider",
  "Are you sure you want to delete this SSO provider?": "Are you sure you want to delete this SSO provider?",
  "Action": "Action",
-  "{{ssoProviderType}} configuration": "{{ssoProviderType}} configuration"
+  "{{ssoProviderType}} configuration": "{{ssoProviderType}} configuration",
+  "Icon": "Icon",
+  "Upload image": "Upload image",
+  "Remove image": "Remove image",
+  "Failed to remove image": "Failed to remove image",
+  "Image exceeds 10MB limit.": "Image exceeds 10MB limit.",
+  "Image removed successfully": "Image removed successfully"
 }
--- a/apps/client/src/components/common/avatar-uploader.tsx
+++ b/apps/client/src/components/common/avatar-uploader.tsx
@ -0,0 +1,165 @@
+import React, { useRef } from "react";
+import { Menu, Box, Loader } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { IconTrash, IconUpload } from "@tabler/icons-react";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
+import { notifications } from "@mantine/notifications";
+
+interface AvatarUploaderProps {
+  currentImageUrl?: string | null;
+  fallbackName?: string;
+  radius?: string | number;
+  size?: string | number;
+  variant?: string;
+  type: AvatarIconType;
+  onUpload: (file: File) => Promise<void>;
+  onRemove: () => Promise<void>;
+  isLoading?: boolean;
+  disabled?: boolean;
+}
+
+export default function AvatarUploader({
+  currentImageUrl,
+  fallbackName,
+  radius,
+  variant,
+  size,
+  type,
+  onUpload,
+  onRemove,
+  isLoading = false,
+  disabled = false,
+}: AvatarUploaderProps) {
+  const { t } = useTranslation();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileInputChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    if (!file || disabled) {
+      return;
+    }
+
+    // Validate file size (max 10MB)
+    const maxSizeInBytes = 10 * 1024 * 1024;
+    if (file.size > maxSizeInBytes) {
+      notifications.show({
+        message: t("Image exceeds 10MB limit."),
+        color: "red",
+      });
+      // Reset the input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+      return;
+    }
+
+    try {
+      await onUpload(file);
+    } catch (error) {
+      console.error(error);
+      notifications.show({
+        message: t("Failed to upload image"),
+        color: "red",
+      });
+    }
+
+    // Reset the input so the same file can be selected again
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleUploadClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    } else {
+      console.error("File input ref is null!");
+    }
+  };
+
+  const handleRemove = async () => {
+    if (disabled) return;
+
+    try {
+      await onRemove();
+      notifications.show({
+        message: t("Image removed successfully"),
+      });
+    } catch (error) {
+      console.error(error);
+      notifications.show({
+        message: t("Failed to remove image"),
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <Box>
+      <input
+        type="file"
+        ref={fileInputRef}
+        onChange={handleFileInputChange}
+        accept="image/png,image/jpeg,image/jpg"
+        style={{ display: "none" }}
+      />
+
+      <Menu shadow="md" width={200} withArrow disabled={disabled || isLoading}>
+        <Menu.Target>
+          <Box style={{ position: "relative", display: "inline-block" }}>
+            <CustomAvatar
+              component="button"
+              size={size}
+              avatarUrl={currentImageUrl}
+              name={fallbackName}
+              style={{
+                cursor: disabled || isLoading ? "default" : "pointer",
+                opacity: isLoading ? 0.6 : 1,
+              }}
+              radius={radius}
+              variant={variant}
+              type={type}
+            />
+            {isLoading && (
+              <Box
+                style={{
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  zIndex: 1000,
+                }}
+              >
+                <Loader size="sm" />
+              </Box>
+            )}
+          </Box>
+        </Menu.Target>
+
+        <Menu.Dropdown>
+          <Menu.Item
+            leftSection={<IconUpload size={16} />}
+            disabled={isLoading || disabled}
+            onClick={handleUploadClick}
+          >
+            {t("Upload image")}
+          </Menu.Item>
+
+          {currentImageUrl && (
+            <Menu.Item
+              leftSection={<IconTrash size={16} />}
+              color="red"
+              onClick={handleRemove}
+              disabled={isLoading || disabled}
+            >
+              {t("Remove image")}
+            </Menu.Item>
+          )}
+        </Menu.Dropdown>
+      </Menu>
+    </Box>
+  );
+}
--- a/apps/client/src/components/layouts/global/top-menu.tsx
+++ b/apps/client/src/components/layouts/global/top-menu.tsx
@ -1,8 +1,8 @@
 import {
  Group,
  Menu,
-  UnstyledButton,
  Text,
+  UnstyledButton,
  useMantineColorScheme,
 } from "@mantine/core";
 import {
@ -10,7 +10,6 @@ import {
  IconBrush,
  IconCheck,
  IconChevronDown,
-  IconChevronRight,
  IconDeviceDesktop,
  IconLogout,
  IconMoon,
@ -26,6 +25,7 @@ import APP_ROUTE from "@/lib/app-route.ts";
 import useAuth from "@/features/auth/hooks/use-auth.ts";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { useTranslation } from "react-i18next";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";

 export default function TopMenu() {
  const { t } = useTranslation();
@ -50,6 +50,7 @@ export default function TopMenu() {
              name={workspace?.name}
              variant="filled"
              size="sm"
+              type={AvatarIconType.WORKSPACE_ICON}
            />
            <Text fw={500} size="sm" lh={1} mr={3} lineClamp={1}>
              {workspace?.name}
--- a/apps/client/src/components/ui/custom-avatar.tsx
+++ b/apps/client/src/components/ui/custom-avatar.tsx
@ -1,6 +1,7 @@
 import React from "react";
 import { Avatar } from "@mantine/core";
 import { getAvatarUrl } from "@/lib/config.ts";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";

 interface CustomAvatarProps {
  avatarUrl: string;
@ -11,13 +12,15 @@ interface CustomAvatarProps {
  variant?: string;
  style?: any;
  component?: any;
+  type?: AvatarIconType;
+  mt?: string | number;
 }

 export const CustomAvatar = React.forwardRef<
  HTMLInputElement,
  CustomAvatarProps
->(({ avatarUrl, name, ...props }: CustomAvatarProps, ref) => {
-  const avatarLink = getAvatarUrl(avatarUrl);
+>(({ avatarUrl, name, type, ...props }: CustomAvatarProps, ref) => {
+  const avatarLink = getAvatarUrl(avatarUrl, type);

  return (
    <Avatar
--- a/apps/client/src/features/attachments/services/attachment-service.ts
+++ b/apps/client/src/features/attachments/services/attachment-service.ts
@ -0,0 +1,64 @@
+import api from "@/lib/api-client";
+import {
+  AvatarIconType,
+  IAttachment,
+} from "@/features/attachments/types/attachment.types.ts";
+
+export async function uploadIcon(
+  file: File,
+  type: AvatarIconType,
+  spaceId?: string,
+): Promise<IAttachment> {
+  const formData = new FormData();
+  formData.append("type", type);
+  if (spaceId) {
+    formData.append("spaceId", spaceId);
+  }
+  formData.append("image", file);
+
+  return await api.post("/attachments/upload-image", formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+}
+
+export async function uploadUserAvatar(file: File): Promise<IAttachment> {
+  return uploadIcon(file, AvatarIconType.AVATAR);
+}
+
+export async function uploadSpaceIcon(
+  file: File,
+  spaceId: string,
+): Promise<IAttachment> {
+  return uploadIcon(file, AvatarIconType.SPACE_ICON, spaceId);
+}
+
+export async function uploadWorkspaceIcon(file: File): Promise<IAttachment> {
+  return uploadIcon(file, AvatarIconType.WORKSPACE_ICON);
+}
+
+async function removeIcon(
+  type: AvatarIconType,
+  spaceId?: string,
+): Promise<void> {
+  const payload: { spaceId?: string; type: string } = { type };
+
+  if (spaceId) {
+    payload.spaceId = spaceId;
+  }
+
+  await api.post("/attachments/remove-icon", payload);
+}
+
+export async function removeAvatar(): Promise<void> {
+  await removeIcon(AvatarIconType.AVATAR);
+}
+
+export async function removeSpaceIcon(spaceId: string): Promise<void> {
+  await removeIcon(AvatarIconType.SPACE_ICON, spaceId);
+}
+
+export async function removeWorkspaceIcon(): Promise<void> {
+  await removeIcon(AvatarIconType.WORKSPACE_ICON);
+}
--- a/apps/client/src/features/attachments/services/index.ts
+++ b/apps/client/src/features/attachments/services/index.ts
@ -0,0 +1,9 @@
+export {
+  uploadIcon,
+  uploadUserAvatar,
+  uploadSpaceIcon,
+  uploadWorkspaceIcon,
+  removeAvatar,
+  removeSpaceIcon,
+  removeWorkspaceIcon,
+} from "./attachment-service.ts";
--- a/apps/client/src/features/attachments/types/attachment.types.ts
+++ b/apps/client/src/features/attachments/types/attachment.types.ts
@ -0,0 +1,29 @@
+export interface IAttachment {
+  id: string;
+  fileName: string;
+  filePath: string;
+  fileSize: number;
+  fileExt: string;
+  mimeType: string;
+  type: string;
+  creatorId: string;
+  pageId: string | null;
+  spaceId: string | null;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+}
+
+export enum AvatarIconType {
+  AVATAR = "avatar",
+  SPACE_ICON = "space-icon",
+  WORKSPACE_ICON = "workspace-icon",
+}
+
+export enum AttachmentType {
+  AVATAR = "avatar",
+  WORKSPACE_ICON = "workspace-icon",
+  SPACE_ICON = "space-icon",
+  FILE = "file",
+}
--- a/apps/client/src/features/editor/components/drawio/drawio-view.tsx
+++ b/apps/client/src/features/editor/components/drawio/drawio-view.tsx
@ -17,7 +17,7 @@ import {
  EventExit,
  EventSave,
 } from "react-drawio";
-import { IAttachment } from "@/lib/types";
+import { IAttachment } from "@/features/attachments/types/attachment.types";
 import { decodeBase64ToSvgString, svgStringToFile } from "@/lib/utils";
 import clsx from "clsx";
 import { IconEdit } from "@tabler/icons-react";
--- a/apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx
+++ b/apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx
@ -15,7 +15,7 @@ import { useDisclosure } from "@mantine/hooks";
 import { getFileUrl } from "@/lib/config.ts";
 import "@excalidraw/excalidraw/index.css";
 import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
-import { IAttachment } from "@/lib/types";
+import { IAttachment } from "@/features/attachments/types/attachment.types";
 import ReactClearModal from "react-clear-modal";
 import clsx from "clsx";
 import { IconEdit } from "@tabler/icons-react";
--- a/apps/client/src/features/editor/styles/core.css
+++ b/apps/client/src/features/editor/styles/core.css
@ -94,7 +94,12 @@

  hr {
    border: none;
-    border-top: 1px solid #ced4da;
+    @mixin light {
+      border-top: 1px solid var(--mantine-color-gray-4);
+    }
+    @mixin dark {
+      border-top: 1px solid var(--mantine-color-dark-4);
+    }

    &:hover {
      cursor: pointer;
--- a/apps/client/src/features/page/services/page-service.ts
+++ b/apps/client/src/features/page/services/page-service.ts
@ -9,10 +9,11 @@ import {
  SidebarPagesParams,
 } from '@/features/page/types/page.types';
 import { QueryParams } from "@/lib/types";
-import { IAttachment, IPagination } from "@/lib/types.ts";
+import { IPagination } from "@/lib/types.ts";
 import { saveAs } from "file-saver";
 import { InfiniteData } from "@tanstack/react-query";
 import { IFileTask } from '@/features/file-task/types/file-task.types.ts';
+import { IAttachment } from '@/features/attachments/types/attachment.types.ts';

 export async function createPage(data: Partial<IPage>): Promise<IPage> {
  const req = await api.post<IPage>("/pages/create", data);
--- a/apps/client/src/features/space/components/settings-modal.tsx
+++ b/apps/client/src/features/space/components/settings-modal.tsx
@ -1,10 +1,10 @@
-import {Modal, Tabs, rem, Group, ScrollArea, Text} from "@mantine/core";
+import { Modal, Tabs, rem, Group, ScrollArea, Text } from "@mantine/core";
 import SpaceMembersList from "@/features/space/components/space-members.tsx";
 import AddSpaceMembersModal from "@/features/space/components/add-space-members-modal.tsx";
-import React, {useMemo} from "react";
+import React from "react";
 import SpaceDetails from "@/features/space/components/space-details.tsx";
-import {useSpaceQuery} from "@/features/space/queries/space-query.ts";
-import {useSpaceAbility} from "@/features/space/permissions/use-space-ability.ts";
+import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
+import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
 import {
  SpaceCaslAction,
  SpaceCaslSubject,
@ -39,16 +39,18 @@ export default function SpaceSettingsModal({
        xOffset={0}
        mah={400}
      >
-        <Modal.Overlay/>
-        <Modal.Content style={{overflow: "hidden"}}>
+        <Modal.Overlay />
+        <Modal.Content style={{ overflow: "hidden" }}>
          <Modal.Header py={0}>
            <Modal.Title>
-              <Text fw={500} lineClamp={1}>{space?.name}</Text>
+              <Text fw={500} lineClamp={1}>
+                {space?.name}
+              </Text>
            </Modal.Title>
-            <Modal.CloseButton/>
+            <Modal.CloseButton />
          </Modal.Header>
          <Modal.Body>
-            <div style={{height: rem(600)}}>
+            <div style={{ height: rem(600) }}>
              <Tabs defaultValue="members">
                <Tabs.List>
                  <Tabs.Tab fw={500} value="general">
@ -60,13 +62,15 @@ export default function SpaceSettingsModal({
                </Tabs.List>

                <Tabs.Panel value="general">
-                  <SpaceDetails
-                    spaceId={space?.id}
-                    readOnly={spaceAbility.cannot(
-                      SpaceCaslAction.Manage,
-                      SpaceCaslSubject.Settings,
-                    )}
-                  />
+                  <ScrollArea h={550} scrollbarSize={4} pr={8}>
+                    <SpaceDetails
+                      spaceId={space?.id}
+                      readOnly={spaceAbility.cannot(
+                        SpaceCaslAction.Manage,
+                        SpaceCaslSubject.Settings,
+                      )}
+                    />
+                  </ScrollArea>
                </Tabs.Panel>

                <Tabs.Panel value="members">
@ -74,7 +78,7 @@ export default function SpaceSettingsModal({
                    {spaceAbility.can(
                      SpaceCaslAction.Manage,
                      SpaceCaslSubject.Member,
-                    ) && <AddSpaceMembersModal spaceId={space?.id}/>}
+                    ) && <AddSpaceMembersModal spaceId={space?.id} />}
                  </Group>

                  <SpaceMembersList
--- a/apps/client/src/features/space/components/sidebar/space-select.tsx
+++ b/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}
--- a/apps/client/src/features/space/components/sidebar/space-sidebar.tsx
+++ b/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}>
--- a/apps/client/src/features/space/components/sidebar/switch-space.tsx
+++ b/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}
        />
--- a/apps/client/src/features/space/components/space-details.tsx
+++ b/apps/client/src/features/space/components/space-details.tsx
@ -1,11 +1,23 @@
-import React from 'react';
-import { useSpaceQuery } from '@/features/space/queries/space-query.ts';
-import { EditSpaceForm } from '@/features/space/components/edit-space-form.tsx';
-import { Button, Divider, Group, Text } from '@mantine/core';
-import DeleteSpaceModal from './delete-space-modal';
+import React, { useState } from "react";
+import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
+import { EditSpaceForm } from "@/features/space/components/edit-space-form.tsx";
+import { Button, Divider, Text } from "@mantine/core";
+import DeleteSpaceModal from "./delete-space-modal";
 import { useDisclosure } from "@mantine/hooks";
 import ExportModal from "@/components/common/export-modal.tsx";
+import AvatarUploader from "@/components/common/avatar-uploader.tsx";
+import {
+  uploadSpaceIcon,
+  removeSpaceIcon,
+} from "@/features/attachments/services/attachment-service.ts";
 import { useTranslation } from "react-i18next";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
+import { queryClient } from "@/main.tsx";
+import {
+  ResponsiveSettingsContent,
+  ResponsiveSettingsControl,
+  ResponsiveSettingsRow,
+} from "@/components/ui/responsive-settings-row.tsx";

 interface SpaceDetailsProps {
  spaceId: string;
@ -13,9 +25,40 @@ interface SpaceDetailsProps {
 }
 export default function SpaceDetails({ spaceId, readOnly }: SpaceDetailsProps) {
  const { t } = useTranslation();
-  const { data: space, isLoading } = useSpaceQuery(spaceId);
+  const { data: space, isLoading, refetch } = useSpaceQuery(spaceId);
  const [exportOpened, { open: openExportModal, close: closeExportModal }] =
    useDisclosure(false);
+  const [isIconUploading, setIsIconUploading] = useState(false);
+
+  const handleIconUpload = async (file: File) => {
+    setIsIconUploading(true);
+    try {
+      await uploadSpaceIcon(file, spaceId);
+      await refetch();
+      await queryClient.invalidateQueries({
+        predicate: (item) => ["spaces"].includes(item.queryKey[0] as string),
+      });
+    } catch (err) {
+      // skip
+    } finally {
+      setIsIconUploading(false);
+    }
+  };
+
+  const handleIconRemove = async () => {
+    setIsIconUploading(true);
+    try {
+      await removeSpaceIcon(spaceId);
+      await refetch();
+      await queryClient.invalidateQueries({
+        predicate: (item) => ["spaces"].includes(item.queryKey[0] as string),
+      });
+    } catch (err) {
+      // skip
+    } finally {
+      setIsIconUploading(false);
+    }
+  };

  return (
    <>
@ -24,38 +67,56 @@ export default function SpaceDetails({ spaceId, readOnly }: SpaceDetailsProps) {
          <Text my="md" fw={600}>
            {t("Details")}
          </Text>
+
+          <div style={{ marginBottom: "20px" }}>
+            <Text size="sm" fw={500} mb="xs">
+              {t("Icon")}
+            </Text>
+            <AvatarUploader
+              currentImageUrl={space.logo}
+              fallbackName={space.name}
+              size={"60px"}
+              variant="filled"
+
+              type={AvatarIconType.SPACE_ICON}
+              onUpload={handleIconUpload}
+              onRemove={handleIconRemove}
+              isLoading={isIconUploading}
+              disabled={readOnly}
+            />
+          </div>
+
          <EditSpaceForm space={space} readOnly={readOnly} />

          {!readOnly && (
            <>
-
              <Divider my="lg" />

-              <Group justify="space-between" wrap="nowrap" gap="xl">
-                <div>
+              <ResponsiveSettingsRow>
+                <ResponsiveSettingsContent>
                  <Text size="md">{t("Export space")}</Text>
                  <Text size="sm" c="dimmed">
                    {t("Export all pages and attachments in this space.")}
                  </Text>
-                </div>
-
-                <Button onClick={openExportModal}>
-                  {t("Export")}
-                </Button>
-              </Group>
+                </ResponsiveSettingsContent>
+                <ResponsiveSettingsControl>
+                  <Button onClick={openExportModal}>{t("Export")}</Button>
+                </ResponsiveSettingsControl>
+              </ResponsiveSettingsRow>

              <Divider my="lg" />

-              <Group justify="space-between" wrap="nowrap" gap="xl">
-                <div>
+              <ResponsiveSettingsRow>
+                <ResponsiveSettingsContent>
                  <Text size="md">{t("Delete space")}</Text>
                  <Text size="sm" c="dimmed">
                    {t("Delete this space with all its pages and data.")}
                  </Text>
-                </div>
-
-                <DeleteSpaceModal space={space} />
-              </Group>
+                </ResponsiveSettingsContent>
+                <ResponsiveSettingsControl>
+                  <DeleteSpaceModal space={space} />
+                </ResponsiveSettingsControl>
+              </ResponsiveSettingsRow>

              <ExportModal
                type="space"
--- a/apps/client/src/features/space/components/space-grid.module.css
+++ b/apps/client/src/features/space/components/space-grid.module.css
@ -7,7 +7,7 @@
 }

 .cardSection {
-    background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-7));
+    background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
 }

 .title {
--- a/apps/client/src/features/space/components/space-grid.tsx
+++ b/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
--- a/apps/client/src/features/space/components/space-list.tsx
+++ b/apps/client/src/features/space/components/space-list.tsx
@ -1,4 +1,4 @@
-import { Table, Group, Text, Avatar } from "@mantine/core";
+import { Group, Table, Text } from "@mantine/core";
 import React, { useState } from "react";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query.ts";
 import SpaceSettingsModal from "@/features/space/components/settings-modal.tsx";
@ -6,6 +6,8 @@ import { useDisclosure } from "@mantine/hooks";
 import { formatMemberCount } from "@/lib";
 import { useTranslation } from "react-i18next";
 import Paginate from "@/components/common/paginate.tsx";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";

 export default function SpaceList() {
  const { t } = useTranslation();
@ -39,8 +41,10 @@ export default function SpaceList() {
              >
                <Table.Td>
                  <Group gap="sm" wrap="nowrap">
-                    <Avatar
+                    <CustomAvatar
                      color="initials"
+                      avatarUrl={space.logo}
+                      type={AvatarIconType.SPACE_ICON}
                      variant="filled"
                      name={space.name}
                    />
--- a/apps/client/src/features/space/components/spaces-page/all-spaces-list.tsx
+++ b/apps/client/src/features/space/components/spaces-page/all-spaces-list.tsx
@ -6,13 +6,12 @@ import {
  Box,
  Space,
  Menu,
-  Avatar,
  Anchor,
 } from "@mantine/core";
 import { IconDots, IconSettings } from "@tabler/icons-react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { useState } from "react";
+import React, { useState } from "react";
 import { useDisclosure } from "@mantine/hooks";
 import { formatMemberCount } from "@/lib";
 import { getSpaceUrl } from "@/lib/config";
@ -22,6 +21,8 @@ import Paginate from "@/components/common/paginate";
 import NoTableResults from "@/components/common/no-table-results";
 import SpaceSettingsModal from "@/features/space/components/settings-modal";
 import classes from "./all-spaces-list.module.css";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";

 interface AllSpacesListProps {
  spaces: any[];
@ -87,11 +88,13 @@ export default function AllSpacesList({
                        className={classes.spaceLink}
                        onMouseEnter={() => prefetchSpace(space.slug, space.id)}
                      >
-                        <Avatar
+                        <CustomAvatar
+                          name={space.name}
+                          avatarUrl={space.logo}
+                          type={AvatarIconType.SPACE_ICON}
                          color="initials"
                          variant="filled"
-                          name={space.name}
-                          size={40}
+                          size="md"
                        />
                        <div>
                          <Text fz="sm" fw={500} lineClamp={1}>
--- a/apps/client/src/features/space/services/space-service.ts
+++ b/apps/client/src/features/space/services/space-service.ts
@ -8,7 +8,6 @@ import {
  ISpaceMember,
 } from "@/features/space/types/space.types";
 import { IPagination, QueryParams } from "@/lib/types.ts";
-import { IUser } from "@/features/user/types/user.types.ts";
 import { saveAs } from "file-saver";

 export async function getSpaces(
--- a/apps/client/src/features/space/types/space.types.ts
+++ b/apps/client/src/features/space/types/space.types.ts
@ -9,7 +9,7 @@ export interface ISpace {
  id: string;
  name: string;
  description: string;
-  icon: string;
+  logo?: string;
  slug: string;
  hostname: string;
  creatorId: string;
@ -74,4 +74,4 @@ export interface IExportSpaceParams {
  spaceId: string;
  format: ExportFormat;
  includeAttachments?: boolean;
-}
+}
--- a/apps/client/src/features/user/components/account-avatar.tsx
+++ b/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}
+    />
  );
 }
--- a/apps/client/src/features/user/services/user-service.ts
+++ b/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;
-}
--- a/apps/client/src/features/workspace/components/settings/components/workspace-icon.tsx
+++ b/apps/client/src/features/workspace/components/settings/components/workspace-icon.tsx
@ -0,0 +1,67 @@
+import { useState } from "react";
+import { useAtom } from "jotai";
+import { Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import AvatarUploader from "@/components/common/avatar-uploader.tsx";
+import {
+  uploadWorkspaceIcon,
+  removeWorkspaceIcon,
+} from "@/features/attachments/services/attachment-service.ts";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import useUserRole from "@/hooks/use-user-role.tsx";
+
+export default function WorkspaceIcon() {
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
+  const [workspace, setWorkspace] = useAtom(workspaceAtom);
+  const { isAdmin } = useUserRole();
+
+  const handleIconUpload = async (file: File) => {
+    setIsLoading(true);
+    try {
+      const result = await uploadWorkspaceIcon(file);
+      if (workspace) {
+        setWorkspace({ ...workspace, logo: result.fileName });
+      }
+    } catch (error) {
+      //
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleIconRemove = async () => {
+    setIsLoading(true);
+    try {
+      await removeWorkspaceIcon();
+      if (workspace) {
+        setWorkspace({ ...workspace, logo: null });
+      }
+    } catch (error) {
+      //
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ marginBottom: "24px" }}>
+      <Text size="sm" fw={500} mb="xs">
+        {t("Icon")}
+      </Text>
+      <AvatarUploader
+        currentImageUrl={workspace?.logo}
+        fallbackName={workspace?.name}
+        type={AvatarIconType.WORKSPACE_ICON}
+        size="60px"
+        radius="sm"
+        variant="filled"
+        onUpload={handleIconUpload}
+        onRemove={handleIconRemove}
+        isLoading={isLoading}
+        disabled={!isAdmin}
+      />
+    </div>
+  );
+}
--- a/apps/client/src/features/workspace/services/workspace-service.ts
+++ b/apps/client/src/features/workspace/services/workspace-service.ts
@ -109,15 +109,3 @@ export async function getAppVersion(): Promise<IVersion> {
  return req.data;
 }

-export async function uploadLogo(file: File) {
-  const formData = new FormData();
-  formData.append("type", "workspace-logo");
-  formData.append("image", file);
-
-  const req = await api.post("/attachments/upload-image", formData, {
-    headers: {
-      "Content-Type": "multipart/form-data",
-    },
-  });
-  return req.data;
-}
--- a/apps/client/src/lib/config.ts
+++ b/apps/client/src/lib/config.ts
@ -1,5 +1,6 @@
 import bytes from "bytes";
 import { castToBoolean } from "@/lib/utils.tsx";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";

 declare global {
  interface Window {
@ -41,11 +42,14 @@ export function isCloud(): boolean {
  return castToBoolean(getConfigValue("CLOUD"));
 }

-export function getAvatarUrl(avatarUrl: string) {
+export function getAvatarUrl(
+  avatarUrl: string,
+  type: AvatarIconType = AvatarIconType.AVATAR,
+) {
  if (!avatarUrl) return null;
  if (avatarUrl?.startsWith("http")) return avatarUrl;

-  return getBackendUrl() + "/attachments/img/avatar/" + avatarUrl;
+  return getBackendUrl() + `/attachments/img/${type}/` + encodeURI(avatarUrl);
 }

 export function getSpaceUrl(spaceSlug: string) {
--- a/apps/client/src/lib/types.ts
+++ b/apps/client/src/lib/types.ts
@ -36,20 +36,3 @@ export type IPagination<T> = {
  items: T[];
  meta: IPaginationMeta;
 };
-
-export interface IAttachment {
-  id: string;
-  fileName: string;
-  filePath: string;
-  fileSize: number;
-  fileExt: string;
-  mimeType: string;
-  type: string;
-  creatorId: string;
-  pageId: string | null;
-  spaceId: string | null;
-  workspaceId: string;
-  createdAt: string;
-  updatedAt: string;
-  deletedAt: string | null;
-}
--- a/apps/client/src/pages/settings/workspace/workspace-settings.tsx
+++ b/apps/client/src/pages/settings/workspace/workspace-settings.tsx
@ -1,5 +1,6 @@
 import SettingsTitle from "@/components/settings/settings-title.tsx";
 import WorkspaceNameForm from "@/features/workspace/components/settings/components/workspace-name-form";
+import WorkspaceIcon from "@/features/workspace/components/settings/components/workspace-icon.tsx";
 import { useTranslation } from "react-i18next";
 import { getAppName, isCloud } from "@/lib/config.ts";
 import { Helmet } from "react-helmet-async";
@ -14,6 +15,7 @@ export default function WorkspaceSettings() {
        <title>Workspace Settings - {getAppName()}</title>
      </Helmet>
      <SettingsTitle title={t("General")} />
+      <WorkspaceIcon />
      <WorkspaceNameForm />

      {isCloud() && (