chore: app icon

web/app/components/explore/app-card/index.tsx

@@ -34,7 +34,7 @@ const AppCard = ({
     <div className={s.wrap}>
       <div className='col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'>
         <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
-          <AppIcon size='small' />
+          <AppIcon size='small' icon={app.app.icon} background={app.app.icon_background} />
           <div className='relative h-8 text-sm font-medium leading-8 grow'>
             <div className='absolute top-0 left-0 w-full h-full overflow-hidden text-ellipsis whitespace-nowrap'>{appBasicInfo.name}</div>
           </div>

web/app/components/explore/sidebar/app-nav-item/index.tsx

@@ -2,12 +2,15 @@
 import cn from 'classnames'
 import { useRouter } from 'next/navigation'
 import ItemOperation from '@/app/components/explore/item-operation'
+import AppIcon from '@/app/components/base/app-icon'
 
 import s from './style.module.css'
 
 export interface IAppNavItemProps {
   name: string
   id: string
+  icon: string
+  icon_background: string
   isSelected: boolean
   isPinned: boolean
   togglePin: () => void
@@ -18,11 +21,13 @@ export interface IAppNavItemProps {
 export default function AppNavItem({
   name,
   id,
+  icon,
+  icon_background,
   isSelected,
   isPinned,
   togglePin,
   uninstallable,
-  onDelete
+  onDelete,
 }: IAppNavItemProps) {
   const router = useRouter()
   const url = `/explore/installed/${id}`
@@ -39,15 +44,16 @@ export default function AppNavItem({
         router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation().
       }}
     >
-      <div className='flex items-center'>
-        <div
+      <div className='flex items-center space-x-2'>
+        {/* <div
           className={cn(
             'shrink-0 mr-2 h-6 w-6 rounded-md border bg-[#D5F5F6]',
           )}
           style={{
             borderColor: '0.5px solid rgba(0, 0, 0, 0.05)'
           }}
-        />
+        /> */}
+        <AppIcon size='tiny'  icon={icon} background={icon_background} />
         <div className='max-w-[110px] overflow-hidden text-ellipsis whitespace-nowrap'>{name}</div>
       </div>
       {

web/app/components/explore/sidebar/index.tsx

@@ -84,11 +84,13 @@ const SideBar: FC<{
               maxHeight: 'calc(100vh - 250px)'
             }}
           >
-            {installedApps.map(({id, is_pinned, uninstallable, app : { name }}) => {
+            {installedApps.map(({id, is_pinned, uninstallable, app : { name, icon, icon_background }}) => {
               return (
                 <Item 
                   key={id}
                   name={name}
+                  icon={icon}
+                  icon_background={icon_background}
                   id={id}
                   isSelected={lastSegment?.toLowerCase() === id}
                   isPinned={is_pinned}

web/models/explore.ts

@@ -4,8 +4,8 @@ export type AppBasicInfo = {
   id: string;
   name: string;
   mode: AppMode;
-  icon: null;
-  icon_background: null;
+  icon: string;
+  icon_background: string;
 }
 
 export type App = {