Feature/add emoji (#103)

web/app/(commonLayout)/apps/AppCard.tsx

@@ -47,7 +47,7 @@ const AppCard = ({
     <>
       <Link href={`/app/${app.id}/overview`} className={style.listItem}>
         <div className={style.listItemTitle}>
-          <AppIcon size='small' />
+          <AppIcon size='small' icon={app.icon} background={app.icon_background}/>
           <div className={style.listItemHeading}>
             <div className={style.listItemHeadingContent}>{app.name}</div>
           </div>

web/app/(commonLayout)/apps/Apps.tsx

@@ -17,6 +17,7 @@ const Apps = () => {
       {apps.map(app => (<AppCard key={app.id} app={app} />))}
       <NewAppCard />
     </nav>
+
   )
 }
 

web/app/(commonLayout)/apps/NewAppCard.tsx

@@ -9,7 +9,6 @@ import NewAppDialog from './NewAppDialog'
 const CreateAppCard = () => {
   const { t } = useTranslation()
   const [showNewAppDialog, setShowNewAppDialog] = useState(false)
-
   return (
     <a className={classNames(style.listItem, style.newItemCard)} onClick={() => setShowNewAppDialog(true)}>
       <div className={style.listItemTitle}>

web/app/(commonLayout)/apps/NewAppDialog.tsx

@@ -17,6 +17,8 @@ import { createApp, fetchAppTemplates } from '@/service/apps'
 import AppIcon from '@/app/components/base/app-icon'
 import AppsContext from '@/context/app-context'
 
+import EmojiPicker from '@/app/components/base/emoji-picker'
+
 type NewAppDialogProps = {
   show: boolean
   onClose?: () => void
@@ -31,6 +33,11 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => {
   const [newAppMode, setNewAppMode] = useState<AppMode>()
   const [isWithTemplate, setIsWithTemplate] = useState(false)
   const [selectedTemplateIndex, setSelectedTemplateIndex] = useState<number>(-1)
+
+  // Emoji Picker
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false)
+  const [emoji, setEmoji] = useState({ icon: '🍌', icon_background: '#FFEAD5' })
+
   const mutateApps = useContextSelector(AppsContext, state => state.mutateApps)
 
   const { data: templates, mutate } = useSWR({ url: '/app-templates' }, fetchAppTemplates)
@@ -67,6 +74,8 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => {
     try {
       const app = await createApp({
         name,
+        icon: emoji.icon,
+        icon_background: emoji.icon_background,
         mode: isWithTemplate ? templates.data[selectedTemplateIndex].mode : newAppMode!,
         config: isWithTemplate ? templates.data[selectedTemplateIndex].model_config : undefined,
       })
@@ -80,9 +89,20 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => {
       notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
     }
     isCreatingRef.current = false
-  }, [isWithTemplate, newAppMode, notify, router, templates, selectedTemplateIndex])
+  }, [isWithTemplate, newAppMode, notify, router, templates, selectedTemplateIndex, emoji])
 
-  return (
+  return <>
+    {showEmojiPicker && <EmojiPicker
+      onSelect={(icon, icon_background) => {
+        console.log(icon, icon_background)
+        setEmoji({ icon, icon_background })
+        setShowEmojiPicker(false)
+      }}
+      onClose={() => {
+        setEmoji({ icon: '🍌', icon_background: '#FFEAD5' })
+        setShowEmojiPicker(false)
+      }}
+    />}
     <Dialog
       show={show}
       title={t('app.newApp.startToCreate')}
@@ -96,7 +116,7 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => {
       <h3 className={style.newItemCaption}>{t('app.newApp.captionName')}</h3>
 
       <div className='flex items-center justify-between gap-3 mb-8'>
-        <AppIcon size='large' />
+        <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
         <input ref={nameInputRef} className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' />
       </div>
 
@@ -187,7 +207,7 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => {
           )}
       </div>
     </Dialog>
-  )
+  </>
 }
 
 export default NewAppDialog