fix&style: adjust update modal style and some value

frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx

@@ -316,6 +316,7 @@ const Version = () => {
       {!!onOpenSelectApp && (
         <AppSelectModal
           apps={apps}
+          devboxName={devbox.name}
           deployData={deployData}
           onSuccess={() => setOnOpenSelectApp(false)}
           onClose={() => setOnOpenSelectApp(false)}

frontend/providers/devbox/components/Icon/index.tsx

@@ -63,7 +63,8 @@ const map = {
   check: require('./icons/check.svg').default,
   empty: require('./icons/empty.svg').default,
   shutdown: require('./icons/shutdown.svg').default,
-  windsurf: require('./icons/windsurf.svg').default
+  windsurf: require('./icons/windsurf.svg').default,
+  rocket: require('./icons/rocket.svg').default
 }
 
 const MyIcon = ({

frontend/providers/devbox/components/modals/AppSelectModal.tsx

@@ -7,7 +7,8 @@ import {
   ModalOverlay,
   Button,
   ModalHeader,
-  Text
+  Text,
+  Divider
 } from '@chakra-ui/react'
 import { useTranslations } from 'next-intl'
 import { useCallback } from 'react'
@@ -18,6 +19,7 @@ import { AppListItemType } from '@/types/app'
 
 import MyIcon from '../Icon'
 import MyTable from '../MyTable'
+import { useEnvStore } from '@/stores/env'
 
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 6)
 
@@ -44,15 +46,18 @@ interface DeployData {
 const AppSelectModal = ({
   apps,
   deployData,
+  devboxName,
   onSuccess,
   onClose
 }: {
   apps: AppListItemType[]
+  devboxName: string
   deployData: DeployData
   onSuccess: () => void
   onClose: () => void
 }) => {
   const t = useTranslations()
+  const { env } = useEnvStore()
 
   const handleCreate = useCallback(() => {
     const tempFormData = { ...deployData, appName: `${deployData.appName}-${nanoid()}` }
@@ -90,12 +95,34 @@ const AppSelectModal = ({
     title: string
     dataIndex?: keyof AppListItemType
     key: string
+    width?: string
     render?: (item: AppListItemType) => JSX.Element
   }[] = [
     {
       title: t('app_name'),
       dataIndex: 'name',
-      key: 'name'
+      key: 'name',
+      render: (item: AppListItemType) => {
+        return (
+          <Text ml={4} color={'grayModern.600'}>
+            {item.name}
+          </Text>
+        )
+      }
+    },
+    {
+      title: t('current_image_name'),
+      dataIndex: 'imageName',
+      key: 'imageName',
+      render: (item: AppListItemType) => {
+        // note: no same devbox matched image will be dealt.
+        const dealImageName = item.imageName.startsWith(
+          `${env.registryAddr}/${env.namespace}/${devboxName}`
+        )
+          ? item.imageName.replace(`${env.registryAddr}/${env.namespace}/`, '')
+          : '-'
+        return <Text color={'grayModern.600'}>{dealImageName}</Text>
+      }
     },
     {
       title: t('create_time'),
@@ -133,35 +160,34 @@ const AppSelectModal = ({
     <Box>
       <Modal isOpen onClose={onClose} lockFocusAcrossFrames={false}>
         <ModalOverlay />
-        <ModalContent top={'30%'} maxWidth={'800px'} w={'600px'}>
+        <ModalContent top={'30%'} maxWidth={'800px'} w={'700px'}>
           <ModalHeader pl={10}>{t('deploy')}</ModalHeader>
           <ModalBody pb={4}>
             <Flex
               alignItems={'center'}
-              mb={6}
-              borderRadius={'4px'}
-              justifyContent={'space-between'}>
-              <Text>{t('create_directly')}</Text>
+              direction={'column'}
+              mb={2}
+              justifyContent={'space-between'}
+              p={4}>
+              <Text fontSize={'lg'} fontWeight={'medium'}>
+                {t('create_directly')}
+              </Text>
               <Button
                 onClick={handleCreate}
-                height={'27px'}
-                size={'sm'}
-                p={4}
-                borderWidth={1}
+                height={'36px'}
+                mt={4}
+                size={'md'}
+                px={8}
                 fontSize={'base'}
-                bg={'grayModern.150'}
-                color={'grayModern.900'}
-                _hover={{
-                  color: 'brightBlue.600'
-                }}>
-                {t('deploy_a_new_app')}
+                leftIcon={<MyIcon name="rocket" w={'15px'} h={'15px'} color={'white'} />}>
+                {t('deploy')}
               </Button>
             </Flex>
-            <Box>
-              <Flex alignItems={'center'} mb={4}>
-                <MyIcon name="list" w={'15px'} h={'15px'} mr={'5px'} color={'grayModern.600'} />
-                <Text fontSize="base" fontWeight={'bold'} color={'grayModern.600'}>
-                  {t('matched_apps')}
+            <Divider />
+            <Box mt={4}>
+              <Flex alignItems={'center'} mb={4} justifyContent={'center'}>
+                <Text fontSize={'lg'} fontWeight={'medium'}>
+                  {t('update_matched_apps_notes')}
                 </Text>
               </Flex>
               <MyTable columns={columns} data={apps} />

frontend/providers/devbox/message/en.json

@@ -43,6 +43,7 @@
   "create_failed": "Creation failed",
   "create_success": "Creation succeeded",
   "create_time": "Created At",
+  "current_image_name": "Current Image",
   "cursor": "Cursor",
   "daily": "/day",
   "delete": "Delete",
@@ -151,6 +152,7 @@
   "update_app": "update/create",
   "update_devbox": "Update devbox",
   "update_failed": "Update failed",
+  "update_matched_apps_notes": "Or you can update application: ",
   "update_success": "Update succeeded",
   "used": "Used",
   "version": "Release",

frontend/providers/devbox/message/zh.json

@@ -44,6 +44,7 @@
   "create_success": "创建成功",
   "create_time": "创建时间",
   "creation_time": "创建时间",
+  "current_image_name": "当前镜像",
   "cursor": "Cursor",
   "daily": "/天",
   "delete": "删除",
@@ -153,6 +154,7 @@
   "update_app": "更新应用镜像/上线新应用",
   "update_devbox": "变更项目",
   "update_failed": "变更失败",
+  "update_matched_apps_notes": "或者你可以更新已有应用：",
   "update_success": "变更成功",
   "used": "已用",
   "version": "版本",

frontend/providers/devbox/types/app.d.ts

@@ -2,4 +2,5 @@ export interface AppListItemType {
   id: string
   name: string
   createTime: string
+  imageName: string
 }

frontend/providers/devbox/utils/adapt.ts

@@ -201,6 +201,10 @@ export const adaptAppListItem = (app: V1Deployment & V1StatefulSet): AppListItem
   return {
     id: app.metadata?.uid || ``,
     name: app.metadata?.name || 'app name',
-    createTime: dayjs(app.metadata?.creationTimestamp).format('YYYY/MM/DD HH:mm')
+    createTime: dayjs(app.metadata?.creationTimestamp).format('YYYY/MM/DD HH:mm'),
+    imageName:
+      app?.metadata?.annotations?.originImageName ||
+      app.spec?.template?.spec?.containers?.[0]?.image ||
+      ''
   }
 }