feat: tabs

web/app/components/workflow/skill/editor-area.tsx

@@ -6,7 +6,7 @@ type EditorAreaProps = PropsWithChildren
 const EditorArea: FC<EditorAreaProps> = ({ children }) => {
   return (
     <section
-      className="flex flex-1 flex-col gap-3 rounded-lg bg-white p-3"
+      className="flex flex-1 flex-col rounded-lg"
       data-component="editor-area"
     >
       {children}

web/app/components/workflow/skill/editor-body.tsx

@@ -6,7 +6,7 @@ type EditorBodyProps = PropsWithChildren
 const EditorBody: FC<EditorBodyProps> = ({ children }) => {
   return (
     <div
-      className="flex flex-1 rounded-md bg-gray-50 p-3"
+      className="flex flex-1"
       data-component="editor-body"
     >
       {children}

web/app/components/workflow/skill/editor-tab-item.tsx

@@ -1,12 +1,65 @@
 import type { FC } from 'react'
+import type { FileAppearanceType } from '../../base/file-uploader/types'
+import type { SkillTabItem } from './mock-data'
+import { RiCloseLine, RiHome9Line } from '@remixicon/react'
 import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
+import { cn } from '@/utils/classnames'
+import { getFileIconType } from './utils'
+
+type EditorTabItemProps = {
+  item: SkillTabItem
+}
+
+const EditorTabItem: FC<EditorTabItemProps> = ({ item }) => {
+  const { t } = useTranslation()
+  const isStart = item.type === 'start'
+  const isActive = Boolean(item.active)
+  const label = isStart ? item.name.toUpperCase() : item.name
+  const iconType = isStart ? null : getFileIconType(item.name)
 
-const EditorTabItem: FC = () => {
   return (
     <div
-      className="h-7 w-24 rounded bg-gray-100"
+      className={cn(
+        'group flex shrink-0 items-center gap-1.5 border-r border-components-panel-border-subtle px-2.5 pb-2 pt-2.5',
+        isActive ? 'bg-components-panel-bg' : 'bg-transparent',
+      )}
       data-component="editor-tab-item"
-    />
+    >
+      <div className="flex items-center gap-1">
+        <div className={cn('flex size-5 items-center justify-center', !isActive && 'opacity-70')}>
+          {isStart
+            ? (
+                <RiHome9Line className="size-4 text-text-tertiary" />
+              )
+            : (
+                <FileTypeIcon type={iconType as FileAppearanceType} size="sm" />
+              )}
+        </div>
+        <span
+          className={cn(
+            'max-w-40 truncate text-[13px] leading-4',
+            isStart ? 'uppercase text-text-tertiary' : 'text-text-tertiary',
+            isActive && 'font-medium text-text-primary',
+          )}
+        >
+          {label}
+        </span>
+      </div>
+      {!isStart && (
+        <button
+          type="button"
+          className={cn(
+            'ml-0.5 flex size-4 items-center justify-center rounded-[6px] text-text-tertiary',
+            isActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
+          )}
+          aria-label={t('operation.close', { ns: 'common' })}
+        >
+          <RiCloseLine className="size-4" />
+        </button>
+      )}
+    </div>
   )
 }
 

web/app/components/workflow/skill/editor-tabs.tsx

@@ -1,15 +1,24 @@
-import type { FC, PropsWithChildren } from 'react'
+import type { FC } from 'react'
+import type { SkillTabItem } from './mock-data'
 import * as React from 'react'
+import { cn } from '@/utils/classnames'
+import EditorTabItem from './editor-tab-item'
 
-type EditorTabsProps = PropsWithChildren
+type EditorTabsProps = {
+  items: SkillTabItem[]
+}
 
-const EditorTabs: FC<EditorTabsProps> = ({ children }) => {
+const EditorTabs: FC<EditorTabsProps> = ({ items }) => {
   return (
     <div
-      className="flex items-center gap-2"
+      className={cn(
+        'flex items-center overflow-hidden rounded-t-lg border-b border-components-panel-border-subtle bg-components-panel-bg-alt',
+      )}
       data-component="editor-tabs"
     >
-      {children}
+      {items.map(item => (
+        <EditorTabItem key={item.id} item={item} />
+      ))}
     </div>
   )
 }

web/app/components/workflow/skill/main.tsx

@@ -3,10 +3,9 @@ import type { FC } from 'react'
 import * as React from 'react'
 import EditorArea from './editor-area'
 import EditorBody from './editor-body'
-import EditorTabItem from './editor-tab-item'
 import EditorTabs from './editor-tabs'
 import Files from './files'
-import { mockSkillItems } from './mock-data'
+import { mockSkillItems, mockSkillTabs } from './mock-data'
 import Sidebar from './sidebar'
 import SidebarSearchAdd from './sidebar-search-add'
 import SkillDocEditor from './skill-doc-editor'
@@ -23,10 +22,7 @@ const SkillMain: FC = () => {
           <Files items={mockSkillItems} activeItemId={activeItemId} />
         </Sidebar>
         <EditorArea>
-          <EditorTabs>
-            <EditorTabItem />
-            <EditorTabItem />
-          </EditorTabs>
+          <EditorTabs items={mockSkillTabs} />
           <EditorBody>
             <SkillDocEditor />
           </EditorBody>

web/app/components/workflow/skill/mock-data.ts

@@ -119,3 +119,35 @@ export const mockSkillItems: ResourceItem[] = [
     kind: ResourceKind.folder,
   },
 ]
+
+export type SkillTabType = 'start' | 'file'
+export type SkillTabItem = {
+  id: string
+  type: SkillTabType
+  name: string
+  active?: boolean
+}
+
+export const mockSkillTabs: SkillTabItem[] = [
+  {
+    id: 'tab-start',
+    type: 'start',
+    name: 'Start',
+  },
+  {
+    id: 'tab-skill',
+    type: 'file',
+    name: 'SKILL.md',
+    active: true,
+  },
+  {
+    id: 'tab-output',
+    type: 'file',
+    name: 'output.schema.json',
+  },
+  {
+    id: 'tab-prompt',
+    type: 'file',
+    name: 'prompt.md',
+  },
+]

web/app/components/workflow/skill/skill-doc-editor.tsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 const SkillDocEditor: FC = () => {
   return (
     <div
-      className="h-full w-full rounded-md bg-white"
+      className="h-full w-full overflow-y-auto bg-components-panel-bg"
       data-component="skill-doc-editor"
     />
   )