chore: split icon to new file and enchance data struct

web/app/components/explore/continue-work/data.ts

@@ -1,3 +1,4 @@
+import type { AppIconType } from '@/types/app'
 import { AppModeEnum } from '@/types/app'
 
 export type ContinueWorkItem = {
@@ -5,8 +6,10 @@ export type ContinueWorkItem = {
   title: string
   author: string
   updatedAt: number
-  emoji: string
-  avatarClassName: string
+  icon_type: AppIconType | null
+  icon: string
+  icon_background: string | null
+  icon_url: string | null
   mode: AppModeEnum
 }
 
@@ -18,8 +21,10 @@ export const continueWorkItems: ContinueWorkItem[] = [
     title: 'Automated Email Reply',
     author: 'Evan',
     updatedAt: currentTime - 30 * 1000,
-    emoji: '🕹️',
-    avatarClassName: 'bg-components-icon-bg-pink-soft',
+    icon_type: 'emoji',
+    icon: '🕹️',
+    icon_background: '#FDF2FA',
+    icon_url: null,
     mode: AppModeEnum.CHAT,
   },
   {
@@ -27,8 +32,10 @@ export const continueWorkItems: ContinueWorkItem[] = [
     title: 'Dify Feature Request Copilot',
     author: 'Evan',
     updatedAt: currentTime - 3 * 60 * 1000,
-    emoji: '🪼',
-    avatarClassName: 'bg-components-icon-bg-blue-soft',
+    icon_type: 'emoji',
+    icon: '🪼',
+    icon_background: '#EFF4FF',
+    icon_url: null,
     mode: AppModeEnum.CHAT,
   },
   {
@@ -36,8 +43,10 @@ export const continueWorkItems: ContinueWorkItem[] = [
     title: 'Book Translation',
     author: 'Evan',
     updatedAt: currentTime - 2 * 60 * 60 * 1000,
-    emoji: '📙',
-    avatarClassName: 'bg-components-icon-bg-orange-dark-soft',
+    icon_type: 'emoji',
+    icon: '📙',
+    icon_background: '#FFF4ED',
+    icon_url: null,
     mode: AppModeEnum.WORKFLOW,
   },
   {
@@ -45,8 +54,10 @@ export const continueWorkItems: ContinueWorkItem[] = [
     title: 'SVG Logo Design',
     author: 'Evan',
     updatedAt: currentTime - 24 * 60 * 60 * 1000,
-    emoji: '🖌️',
-    avatarClassName: 'bg-components-icon-bg-indigo-soft',
+    icon_type: 'emoji',
+    icon: '🖌️',
+    icon_background: '#EEF4FF',
+    icon_url: null,
     mode: AppModeEnum.AGENT_CHAT,
   },
   {
@@ -54,8 +65,10 @@ export const continueWorkItems: ContinueWorkItem[] = [
     title: 'Customer Feedback Summary',
     author: 'Evan',
     updatedAt: currentTime - 5 * 24 * 60 * 60 * 1000,
-    emoji: '📊',
-    avatarClassName: 'bg-components-icon-bg-teal-soft',
+    icon_type: 'emoji',
+    icon: '📊',
+    icon_background: '#F0FDF9',
+    icon_url: null,
     mode: AppModeEnum.COMPLETION,
   },
 ]

web/app/components/explore/continue-work/index.tsx

@@ -3,10 +3,9 @@
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { AppTypeIcon } from '@/app/components/app/type-selector'
-import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 import Link from '@/next/link'
 import { continueWorkItems } from './data'
+import ContinueWorkItem from './item'
 
 type ContinueWorkProps = {
   className?: string
@@ -16,7 +15,6 @@ const ContinueWork = ({
   className,
 }: ContinueWorkProps) => {
   const { t } = useTranslation()
-  const { formatTimeFromNow } = useFormatTimeFromNow()
 
   return (
     <section className={cn('px-12', className)} aria-labelledby="continue-work-title">
@@ -33,35 +31,7 @@ const ContinueWork = ({
       </div>
       <div className="grid grid-cols-1 gap-3 pt-2 sm:grid-cols-2 xl:grid-cols-4">
         {continueWorkItems.map(item => (
-          <article
-            key={item.id}
-            className="flex min-w-0 items-center gap-3 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-4 pt-4 pb-3 shadow-md"
-          >
-            <div className="relative shrink-0">
-              <div className={cn(
-                'flex size-10 items-center justify-center rounded-lg border-[0.5px] border-divider-regular text-2xl leading-none',
-                item.avatarClassName,
-              )}
-              >
-                <span aria-hidden>{item.emoji}</span>
-              </div>
-              <AppTypeIcon
-                type={item.mode}
-                wrapperClassName="absolute -right-0.5 -bottom-0.5 size-4 rounded-xs border-components-panel-on-panel-item-bg shadow-sm"
-                className="size-3"
-              />
-            </div>
-            <div className="min-w-0 py-px">
-              <h3 className="truncate system-md-semibold text-text-secondary" title={item.title}>
-                {item.title}
-              </h3>
-              <div className="flex min-w-0 items-center gap-1 system-xs-regular text-text-tertiary">
-                <span className="shrink-0">{item.author}</span>
-                <span className="shrink-0">·</span>
-                <span className="min-w-0 truncate">{t('continueWork.editedAt', { ns: 'explore', time: formatTimeFromNow(item.updatedAt) })}</span>
-              </div>
-            </div>
-          </article>
+          <ContinueWorkItem key={item.id} item={item} />
         ))}
       </div>
     </section>

web/app/components/explore/continue-work/item.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import type { ContinueWorkItem as ContinueWorkItemData } from './data'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { AppTypeIcon } from '@/app/components/app/type-selector'
+import AppIcon from '@/app/components/base/app-icon'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+
+type ContinueWorkItemProps = {
+  item: ContinueWorkItemData
+}
+
+const ContinueWorkItem = ({
+  item,
+}: ContinueWorkItemProps) => {
+  const { t } = useTranslation()
+  const { formatTimeFromNow } = useFormatTimeFromNow()
+
+  return (
+    <article className="flex min-w-0 items-center gap-3 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-4 pt-4 pb-3 shadow-md">
+      <div className="relative shrink-0">
+        <AppIcon
+          size="large"
+          iconType={item.icon_type}
+          icon={item.icon}
+          background={item.icon_background}
+          imageUrl={item.icon_url}
+        />
+        <AppTypeIcon
+          type={item.mode}
+          wrapperClassName="absolute -right-0.5 -bottom-0.5 size-4 rounded-xs border-components-panel-on-panel-item-bg shadow-sm"
+          className="size-3"
+        />
+      </div>
+      <div className="min-w-0 py-px">
+        <h3 className="truncate system-md-semibold text-text-secondary" title={item.title}>
+          {item.title}
+        </h3>
+        <div className="flex min-w-0 items-center gap-1 system-xs-regular text-text-tertiary">
+          <span className="shrink-0">{item.author}</span>
+          <span className="shrink-0">·</span>
+          <span className="min-w-0 truncate">{t('continueWork.editedAt', { ns: 'explore', time: formatTimeFromNow(item.updatedAt) })}</span>
+        </div>
+      </div>
+    </article>
+  )
+}
+
+export default React.memo(ContinueWorkItem)