feat: create from try app

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

@@ -32,7 +32,7 @@ const AppCard = ({
   const setShowTryAppPanel = useContextSelector(ExploreContext, ctx => ctx.setShowTryAppPanel)
   const showTryAPPPanel = useCallback((appId: string) => {
     return () => {
-      setShowTryAppPanel?.(true, { appId, category: app.category })
+      setShowTryAppPanel?.(true, { appId, app })
     }
   }, [setShowTryAppPanel, app.category])
 

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

@@ -149,6 +149,11 @@ const Apps = ({
     setShowTryAppPanel(false)
   }, [setShowTryAppPanel])
   const appParams = useContextSelector(ExploreContext, ctx => ctx.currentApp)
+  const handleShowFromTryApp = useCallback(() => {
+    setCurrApp(appParams?.app || null)
+    setIsShowCreateModal(true)
+  }, [appParams?.app])
+
   if (!categories || categories.length === 0) {
     return (
       <div className="flex h-full items-center">
@@ -246,8 +251,9 @@ const Apps = ({
 
       {isShowTryAppPanel && (
         <TryApp appId={appParams?.appId || ''}
-          category={appParams?.category}
+          category={appParams?.app?.category}
           onClose={hideTryAppPanel}
+          onCreate={handleShowFromTryApp}
         />
       )}
     </div>

web/app/components/explore/try-app/app-info/index.tsx

@@ -13,6 +13,7 @@ type Props = {
   appDetail: TryAppInfo
   category?: string
   className?: string
+  onCreate: () => void
 }
 
 const headerClassName = 'system-sm-semibold-uppercase text-text-secondary mb-3'
@@ -21,6 +22,7 @@ const AppInfo: FC<Props> = ({
   className,
   category,
   appDetail,
+  onCreate,
 }) => {
   const { t } = useTranslation()
   const mode = appDetail?.mode
@@ -55,7 +57,7 @@ const AppInfo: FC<Props> = ({
       {appDetail.description && (
         <div className='system-sm-regular mt-[14px] shrink-0 text-text-secondary'>{appDetail.description}</div>
       )}
-      <Button variant='primary' className='mt-3 flex w-full max-w-full'>
+      <Button variant='primary' className='mt-3 flex w-full max-w-full' onClick={onCreate}>
         <RiAddLine className='mr-1 size-4 shrink-0' />
         <span className='truncate'>Create from this sample app</span>
       </Button>

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

@@ -15,12 +15,14 @@ type Props = {
   appId: string
   category?: string
   onClose: () => void
+  onCreate: () => void
 }
 
 const TryApp: FC<Props> = ({
   appId,
   category,
   onClose,
+  onCreate,
 }) => {
   const [type, setType] = useState<TypeEnum>(TypeEnum.TRY)
   const { data: appDetail, isLoading } = useGetTryAppInfo(appId)
@@ -52,7 +54,7 @@ const TryApp: FC<Props> = ({
           {/* Main content */}
           <div className='mt-2 flex h-0 grow justify-between space-x-2'>
             {type === TypeEnum.TRY ? <App appId={appId} appDetail={appDetail!} /> : <Preview appId={appId} appDetail={appDetail!} />}
-            <AppInfo className='w-[360px] shrink-0' appDetail={appDetail!} category={category} />
+            <AppInfo className='w-[360px] shrink-0' appDetail={appDetail!} category={category} onCreate={onCreate} />
           </div>
         </div>
       )}

web/context/explore-context.ts

@@ -1,10 +1,10 @@
 import { createContext } from 'use-context-selector'
-import type { InstalledApp } from '@/models/explore'
+import type { App, InstalledApp } from '@/models/explore'
 import { noop } from 'lodash-es'
 
 export type CurrentTryAppParams = {
   appId: string
-  category?: string
+  app: App
 }
 
 type IExplore = {