refactor(skill): extract hooks from skill-doc-editor for better separation

Extract business logic into dedicated hooks to reduce component complexity:
- useFileTypeInfo: file type detection (markdown, code, image, video, etc.)
- useSkillFileData: data fetching with conditional API calls
- useSkillFileSave: save logic with Ctrl+S keyboard shortcut

Also fix Vercel best practice: use ternary instead of && for conditional rendering.

web/app/components/workflow/skill/hooks/use-file-type-info.ts

@@ -0,0 +1,44 @@
+import type { AppAssetTreeView } from '@/types/app-asset'
+import { useMemo } from 'react'
+import {
+  getFileExtension,
+  isCodeOrTextFile,
+  isImageFile,
+  isMarkdownFile,
+  isOfficeFile,
+  isVideoFile,
+} from '../utils/file-utils'
+
+export type FileTypeInfo = {
+  isMarkdown: boolean
+  isCodeOrText: boolean
+  isImage: boolean
+  isVideo: boolean
+  isOffice: boolean
+  isEditable: boolean
+  isMediaFile: boolean
+}
+
+/**
+ * Hook to determine file type information based on file node.
+ * Returns flags for markdown, code/text, image, video, office files.
+ */
+export function useFileTypeInfo(fileNode: AppAssetTreeView | undefined): FileTypeInfo {
+  return useMemo(() => {
+    const ext = getFileExtension(fileNode?.name, fileNode?.extension)
+    const markdown = isMarkdownFile(ext)
+    const codeOrText = isCodeOrTextFile(ext)
+    const image = isImageFile(ext)
+    const video = isVideoFile(ext)
+
+    return {
+      isMarkdown: markdown,
+      isCodeOrText: codeOrText,
+      isImage: image,
+      isVideo: video,
+      isOffice: isOfficeFile(ext),
+      isEditable: markdown || codeOrText,
+      isMediaFile: image || video,
+    }
+  }, [fileNode?.name, fileNode?.extension])
+}

web/app/components/workflow/skill/hooks/use-skill-file-data.ts

@@ -0,0 +1,44 @@
+import { useGetAppAssetFileContent, useGetAppAssetFileDownloadUrl } from '@/service/use-app-asset'
+
+export type SkillFileDataResult = {
+  fileContent: ReturnType<typeof useGetAppAssetFileContent>['data']
+  downloadUrlData: ReturnType<typeof useGetAppAssetFileDownloadUrl>['data']
+  isLoading: boolean
+  error: Error | null
+}
+
+/**
+ * Hook to fetch file data for skill documents.
+ * Fetches content for editable files and download URL for media files.
+ */
+export function useSkillFileData(
+  appId: string,
+  nodeId: string | null | undefined,
+  isMediaFile: boolean,
+): SkillFileDataResult {
+  const {
+    data: fileContent,
+    isLoading: isContentLoading,
+    error: contentError,
+  } = useGetAppAssetFileContent(appId, nodeId || '', {
+    enabled: !isMediaFile,
+  })
+
+  const {
+    data: downloadUrlData,
+    isLoading: isDownloadUrlLoading,
+    error: downloadUrlError,
+  } = useGetAppAssetFileDownloadUrl(appId, nodeId || '', {
+    enabled: isMediaFile && !!nodeId,
+  })
+
+  const isLoading = isMediaFile ? isDownloadUrlLoading : isContentLoading
+  const error = isMediaFile ? downloadUrlError : contentError
+
+  return {
+    fileContent,
+    downloadUrlData,
+    isLoading,
+    error,
+  }
+}

web/app/components/workflow/skill/hooks/use-skill-file-save.ts

@@ -0,0 +1,83 @@
+import type { TFunction } from 'i18next'
+import type { StoreApi } from 'zustand'
+import type { Shape } from '@/app/components/workflow/store'
+import { useCallback, useEffect } from 'react'
+import Toast from '@/app/components/base/toast'
+import { useUpdateAppAssetFileContent } from '@/service/use-app-asset'
+
+type UseSkillFileSaveParams = {
+  appId: string
+  activeTabId: string | null
+  isEditable: boolean
+  dirtyContents: Map<string, string>
+  dirtyMetadataIds: Set<string>
+  originalContent: string
+  currentMetadata: Record<string, unknown> | undefined
+  storeApi: StoreApi<Shape>
+  t: TFunction<'workflow'>
+}
+
+/**
+ * Hook to handle file save logic and Ctrl+S keyboard shortcut.
+ * Returns the save handler function.
+ */
+export function useSkillFileSave({
+  appId,
+  activeTabId,
+  isEditable,
+  dirtyContents,
+  dirtyMetadataIds,
+  originalContent,
+  currentMetadata,
+  storeApi,
+  t,
+}: UseSkillFileSaveParams): () => Promise<void> {
+  const updateContent = useUpdateAppAssetFileContent()
+
+  const handleSave = useCallback(async () => {
+    if (!activeTabId || !appId || !isEditable)
+      return
+
+    const content = dirtyContents.get(activeTabId)
+    const hasDirtyMetadata = dirtyMetadataIds.has(activeTabId)
+    if (content === undefined && !hasDirtyMetadata)
+      return
+
+    try {
+      await updateContent.mutateAsync({
+        appId,
+        nodeId: activeTabId,
+        payload: {
+          content: content ?? originalContent,
+          ...(currentMetadata ? { metadata: currentMetadata } : {}),
+        },
+      })
+      storeApi.getState().clearDraftContent(activeTabId)
+      storeApi.getState().clearDraftMetadata(activeTabId)
+      Toast.notify({
+        type: 'success',
+        message: t('api.saved', { ns: 'common' }),
+      })
+    }
+    catch (error) {
+      Toast.notify({
+        type: 'error',
+        message: String(error),
+      })
+    }
+  }, [activeTabId, appId, currentMetadata, dirtyContents, dirtyMetadataIds, isEditable, originalContent, storeApi, t, updateContent])
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent): void {
+      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault()
+        handleSave()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [handleSave])
+
+  return handleSave
+}