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/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);
+}

apps/client/src/features/attachments/services/index.ts

@@ -0,0 +1,9 @@
+export {
+  uploadIcon,
+  uploadUserAvatar,
+  uploadSpaceIcon,
+  uploadWorkspaceIcon,
+  removeAvatar,
+  removeSpaceIcon,
+  removeWorkspaceIcon,
+} from "./attachment-service.ts";

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",
+}