chore: explore card ui and permission

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

@@ -6,6 +6,9 @@ import cn from '@/utils/classnames'
 import type { App } from '@/models/explore'
 import AppIcon from '@/app/components/base/app-icon'
 import { AppTypeIcon } from '../../app/type-selector'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { RiArrowRightUpLine } from '@remixicon/react'
+import Link from 'next/link'
 export type AppCardProps = {
   app: App
   canCreate: boolean
@@ -21,8 +24,11 @@ const AppCard = ({
 }: AppCardProps) => {
   const { t } = useTranslation()
   const { app: appBasicInfo } = app
+  const { systemFeatures } = useGlobalPublicStore()
+  const isTrialApp = app.can_trial && systemFeatures.enable_trial_app
+
   return (
-    <div className={cn('group relative col-span-1 flex cursor-pointer flex-col overflow-hidden rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-2 shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg')}>
+    <div className={cn('group relative col-span-1 flex cursor-pointer flex-col overflow-hidden rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-2 shadow-sm transition-all duration-200 ease-in-out hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-lg')}>
       <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
         <div className='relative shrink-0'>
           <AppIcon
@@ -53,14 +59,25 @@ const AppCard = ({
           {app.description}
         </div>
       </div>
-      {isExplore && canCreate && (
+      {isExplore && (canCreate || isTrialApp) && (
-        <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-gradient-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
+        <div className={cn(
-          <div className={cn('flex h-8 w-full items-center space-x-2')}>
+          'absolute bottom-0 left-0 right-0 hidden  bg-gradient-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8',
-            <Button variant='primary' className='h-7 grow' onClick={() => onCreate()}>
+          (canCreate && isTrialApp) && 'grid-cols-2 gap-2 group-hover:grid ',
+        )}>
+          {canCreate && (
+            <Button variant='primary' className='h-7' onClick={() => onCreate()}>
               <PlusIcon className='mr-1 h-4 w-4' />
               <span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
             </Button>
-          </div>
+          )}
+          {isTrialApp && (
+            <Link href={`/try/app/${app.app_id}`} target='_blank' rel='noreferrer'>
+              <Button className='w-full'>
+                <span>{t('explore.appCard.try')}</span>
+                <RiArrowRightUpLine className='size-4' />
+              </Button>
+            </Link>
+          )}
         </div>
       )}
     </div>

web/i18n/de-DE/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: 'Zum Arbeitsbereich hinzufügen',
     customize: 'Anpassen',
   },
   appCustomize: {

web/i18n/en-US/explore.ts

@@ -22,8 +22,8 @@ const translation = {
     resetFilter: 'Clear filter',
   },
   appCard: {
-    addToWorkspace: 'Add to Workspace',
+    addToWorkspace: 'Use template',
-    customize: 'Customize',
+    try: 'Details',
   },
   appCustomize: {
     title: 'Create app from {{name}}',

web/i18n/es-ES/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: 'Agregar al espacio de trabajo',
     customize: 'Personalizar',
   },
   appCustomize: {

web/i18n/fa-IR/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: 'افزودن به فضای کاری',
     customize: 'سفارشی کردن',
   },
   appCustomize: {

web/i18n/fr-FR/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: 'Ajouter à l\'espace de travail',
     customize: 'Personnaliser',
   },
   appCustomize: {

web/i18n/hi-IN/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: 'कार्यक्षेत्र में जोड़ें',
     customize: 'अनुकूलित करें',
   },
   appCustomize: {

web/i18n/id-ID/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   },
   appCard: {
     customize: 'Menyesuaikan',
-    addToWorkspace: 'Tambahkan ke Ruang Kerja',
   },
   appCustomize: {
     subTitle: 'Ikon & nama aplikasi',

web/i18n/it-IT/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: 'Aggiungi a Workspace',
     customize: 'Personalizza',
   },
   appCustomize: {

web/i18n/ja-JP/explore.ts

@@ -22,7 +22,8 @@ const translation = {
     resetFilter: 'クリア',
   },
   appCard: {
-    addToWorkspace: 'ワークスペースに追加',
+    addToWorkspace: 'テンプレートを使用',
+    try: '詳細',
     customize: 'カスタマイズ',
   },
   appCustomize: {

web/i18n/ko-KR/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: '작업 공간에 추가',
     customize: '사용자 정의',
   },
   appCustomize: {

web/i18n/pl-PL/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: 'Dodaj do przestrzeni roboczej',
     customize: 'Dostosuj',
   },
   appCustomize: {

web/i18n/pt-BR/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: 'Adicionar ao Espaço de Trabalho',
     customize: 'Personalizar',
   },
   appCustomize: {

web/i18n/ro-RO/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: 'Adăugați la spațiul de lucru',
     customize: 'Personalizați',
   },
   appCustomize: {

web/i18n/ru-RU/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: 'Добавить в рабочее пространство',
     customize: 'Настроить',
   },
   appCustomize: {

web/i18n/sl-SI/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: 'Dodaj v delovni prostor',
     customize: 'Prilagodi',
   },
   appCustomize: {

web/i18n/th-TH/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: 'เพิ่มไปยังพื้นที่ทํางาน',
     customize: 'ปรับแต่ง',
   },
   appCustomize: {

web/i18n/tr-TR/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: 'Çalışma Alanına Ekle',
     customize: 'Özelleştir',
   },
   appCustomize: {

web/i18n/uk-UA/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: 'Додати до робочого простору',
     customize: 'Налаштувати',
   },
   appCustomize: {

web/i18n/vi-VN/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: 'Thêm vào không gian làm việc',
     customize: 'Tùy chỉnh',
   },
   appCustomize: {

web/i18n/zh-Hans/explore.ts

@@ -22,7 +22,8 @@ const translation = {
     resetFilter: '清除筛选',
   },
   appCard: {
-    addToWorkspace: '添加到工作区',
+    addToWorkspace: '使用模板',
+    try: '详情',
     customize: '自定义',
   },
   appCustomize: {

web/i18n/zh-Hant/explore.ts

@@ -18,7 +18,6 @@ const translation = {
   apps: {
   },
   appCard: {
-    addToWorkspace: '新增到工作區',
     customize: '自定義',
   },
   appCustomize: {

web/models/explore.ts

@@ -27,6 +27,7 @@ export type App = {
   installed: boolean
   editable: boolean
   is_agent: boolean
+  can_trial: boolean
 }
 
 export type InstalledApp = {