feat: custom app icon (#7196)

Co-authored-by: crazywoola <427733928@qq.com>

web/app/components/base/app-icon/index.tsx

@@ -1,17 +1,21 @@
-import type { FC } from 'react'
+'use client'
 
-import data from '@emoji-mart/data'
+import type { FC } from 'react'
 import { init } from 'emoji-mart'
+import data from '@emoji-mart/data'
 import style from './style.module.css'
 import classNames from '@/utils/classnames'
+import type { AppIconType } from '@/types/app'
 
 init({ data })
 
 export type AppIconProps = {
   size?: 'xs' | 'tiny' | 'small' | 'medium' | 'large'
   rounded?: boolean
+  iconType?: AppIconType | null
   icon?: string
-  background?: string
+  background?: string | null
+  imageUrl?: string | null
   className?: string
   innerIcon?: React.ReactNode
   onClick?: () => void
@@ -20,28 +24,34 @@ export type AppIconProps = {
 const AppIcon: FC<AppIconProps> = ({
   size = 'medium',
   rounded = false,
+  iconType,
   icon,
   background,
+  imageUrl,
   className,
   innerIcon,
   onClick,
 }) => {
-  return (
-    <span
-      className={classNames(
-        style.appIcon,
-        size !== 'medium' && style[size],
-        rounded && style.rounded,
-        className ?? '',
-      )}
-      style={{
-        background,
-      }}
-      onClick={onClick}
-    >
-      {innerIcon || ((icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />)}
-    </span>
+  const wrapperClassName = classNames(
+    style.appIcon,
+    size !== 'medium' && style[size],
+    rounded && style.rounded,
+    className ?? '',
+    'overflow-hidden',
   )
+
+  const isValidImageIcon = iconType === 'image' && imageUrl
+
+  return <span
+    className={wrapperClassName}
+    style={{ background: isValidImageIcon ? undefined : (background || '#FFEAD5') }}
+    onClick={onClick}
+  >
+    {isValidImageIcon
+      ? <img src={imageUrl} className="w-full h-full" alt="app icon" />
+      : (innerIcon || ((icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />))
+    }
+  </span>
 }
 
 export default AppIcon

web/app/components/base/app-icon/style.module.css

@@ -1,5 +1,5 @@
 .appIcon {
-  @apply flex items-center justify-center relative w-9 h-9 text-lg bg-teal-100 rounded-lg grow-0 shrink-0;
+  @apply flex items-center justify-center relative w-9 h-9 text-lg rounded-lg grow-0 shrink-0;
 }
 
 .appIcon.large {