refactor(sidebar): Restructure app operations with toggle functionality (#24625)

2025-08-27 16:20:17 +08:00 · 2025-08-27 16:20:17 +08:00 · 3dae108f84
parent 5bbf685035
commit 3dae108f84
2 changed files with 111 additions and 128 deletions
--- a/web/app/components/app-sidebar/app-info.tsx
+++ b/web/app/components/app-sidebar/app-info.tsx
@ -26,7 +26,6 @@ import { fetchWorkflowDraft } from '@/service/workflow'
 import ContentDialog from '@/app/components/base/content-dialog'
 import Button from '@/app/components/base/button'
 import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view'
-import Divider from '../base/divider'
 import type { Operation } from './app-operations'
 import AppOperations from './app-operations'
 import dynamic from 'next/dynamic'
@ -197,7 +196,7 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
  if (!appDetail)
    return null

-  const operations = [
+  const primaryOperations = [
    {
      id: 'edit',
      title: t('app.editApp'),
@ -224,7 +223,11 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
      icon: <RiFileDownloadLine />,
      onClick: exportCheck,
    },
-    (appDetail.mode !== 'agent-chat' && (appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow')) ? {
+  ]
+
+  const secondaryOperations: Operation[] = [
+    // Import DSL (conditional)
+    ...(appDetail.mode !== 'agent-chat' && (appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow')) ? [{
      id: 'import',
      title: t('workflow.common.importDSL'),
      icon: <RiFileUploadLine />,
@ -233,18 +236,39 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
        onDetailExpand?.(false)
        setShowImportDSLModal(true)
      },
-    } : undefined,
-    (appDetail.mode !== 'agent-chat' && (appDetail.mode === 'completion' || appDetail.mode === 'chat')) ? {
-      id: 'switch',
-      title: t('app.switch'),
-      icon: <RiExchange2Line />,
+    }] : [],
+    // Divider
+    {
+      id: 'divider-1',
+      title: '',
+      icon: <></>,
+      onClick: () => { /* divider has no action */ },
+      type: 'divider' as const,
+    },
+    // Delete operation
+    {
+      id: 'delete',
+      title: t('common.operation.delete'),
+      icon: <RiDeleteBinLine />,
      onClick: () => {
        setOpen(false)
        onDetailExpand?.(false)
-        setShowSwitchModal(true)
+        setShowConfirmDelete(true)
      },
-    } : undefined,
-  ].filter((op): op is Operation => Boolean(op))
+    },
+  ]
+
+  // Keep the switch operation separate as it's not part of the main operations
+  const switchOperation = (appDetail.mode !== 'agent-chat' && (appDetail.mode === 'completion' || appDetail.mode === 'chat')) ? {
+    id: 'switch',
+    title: t('app.switch'),
+    icon: <RiExchange2Line />,
+    onClick: () => {
+      setOpen(false)
+      onDetailExpand?.(false)
+      setShowSwitchModal(true)
+    },
+  } : null

  return (
    <div>
@ -322,7 +346,8 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
          {/* operations */}
          <AppOperations
            gap={4}
-            operations={operations}
+            primaryOperations={primaryOperations}
+            secondaryOperations={secondaryOperations}
          />
        </div>
        <CardView
@ -330,22 +355,20 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
          isInPanel={true}
          className='flex flex-1 flex-col gap-2 overflow-auto px-2 py-1'
        />
-        <Divider />
-        <div className='flex min-h-fit shrink-0 flex-col items-start justify-center gap-3 self-stretch pb-2'>
-          <Button
-            size={'medium'}
-            variant={'ghost'}
-            className='gap-0.5'
-            onClick={() => {
-              setOpen(false)
-              onDetailExpand?.(false)
-              setShowConfirmDelete(true)
-            }}
-          >
-            <RiDeleteBinLine className='h-4 w-4 text-text-tertiary' />
-            <span className='system-sm-medium text-text-tertiary'>{t('common.operation.deleteApp')}</span>
-          </Button>
-        </div>
+        {/* Switch operation (if available) */}
+        {switchOperation && (
+          <div className='flex min-h-fit shrink-0 flex-col items-start justify-center gap-3 self-stretch pb-2'>
+            <Button
+              size={'medium'}
+              variant={'ghost'}
+              className='gap-0.5'
+              onClick={switchOperation.onClick}
+            >
+              {switchOperation.icon}
+              <span className='system-sm-medium text-text-tertiary'>{switchOperation.title}</span>
+            </Button>
+          </div>
+        )}
      </ContentDialog>
      {showSwitchModal && (
        <SwitchAppModal
--- a/web/app/components/app-sidebar/app-operations.tsx
+++ b/web/app/components/app-sidebar/app-operations.tsx
@ -1,144 +1,104 @@
 import type { JSX } from 'react'
 import { cloneElement, useCallback } from 'react'
-import { useEffect, useRef, useState } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../base/portal-to-follow-elem'
-import { RiMoreLine } from '@remixicon/react'
+import Divider from '@/app/components/base/divider'
+import { RiMoreFill } from '@remixicon/react'
+import cn from '@/utils/classnames'

 export type Operation = {
-  id: string; title: string; icon: JSX.Element; onClick: () => void
+  id: string
+  title: string
+  icon: JSX.Element
+  onClick: () => void
+  type?: 'action' | 'divider'
+  className?: string
 }

-const AppOperations = ({ operations, gap }: {
-  operations: Operation[]
+const AppOperations = ({ primaryOperations, secondaryOperations, gap }: {
+  primaryOperations: Operation[]
+  secondaryOperations: Operation[]
  gap: number
 }) => {
  const { t } = useTranslation()
-  const [visibleOpreations, setVisibleOperations] = useState<Operation[]>([])
-  const [moreOperations, setMoreOperations] = useState<Operation[]>([])
  const [showMore, setShowMore] = useState(false)
-  const navRef = useRef<HTMLDivElement>(null)
  const handleTriggerMore = useCallback(() => {
-    setShowMore(true)
-  }, [setShowMore])
+    setShowMore(prev => !prev)
+  }, [])

-  useEffect(() => {
-    const moreElement = document.getElementById('more')
-    const navElement = document.getElementById('nav')
-    let width = 0
-    const containerWidth = navElement?.clientWidth ?? 0
-    const moreWidth = moreElement?.clientWidth ?? 0
-
-    if (containerWidth === 0 || moreWidth === 0) return
-
-    const updatedEntries: Record<string, boolean> = operations.reduce((pre, cur) => {
-      pre[cur.id] = false
-      return pre
-    }, {} as Record<string, boolean>)
-    const childrens = Array.from(navRef.current!.children).slice(0, -1)
-    for (let i = 0; i < childrens.length; i++) {
-      const child: any = childrens[i]
-      const id = child.dataset.targetid
-      if (!id) break
-      const childWidth = child.clientWidth
-
-      if (width + gap + childWidth + moreWidth <= containerWidth) {
-        updatedEntries[id] = true
-        width += gap + childWidth
-      }
-      else {
-        if (i === childrens.length - 1 && width + childWidth <= containerWidth)
-          updatedEntries[id] = true
-        else
-          updatedEntries[id] = false
-        break
-      }
+  const renderSecondaryOperation = (operation: Operation, index: number) => {
+    if (operation.type === 'divider') {
+      return (
+        <Divider key={operation.id || `divider-${index}`} className='my-1' />
+      )
    }
-    setVisibleOperations(operations.filter(item => updatedEntries[item.id]))
-    setMoreOperations(operations.filter(item => !updatedEntries[item.id]))
-  }, [operations, gap])
+
+    return (
+      <div
+        key={operation.id}
+        className={cn(
+          'flex h-8 cursor-pointer items-center gap-x-1 rounded-lg p-1.5 hover:bg-state-base-hover',
+          operation.className,
+        )}
+        onClick={operation.onClick}
+      >
+        {cloneElement(operation.icon, {
+          className: 'h-4 w-4 text-text-tertiary',
+        })}
+        <span className='system-md-regular text-text-secondary'>
+          {operation.title}
+        </span>
+      </div>
+    )
+  }

  return (
-    <>
-      {!visibleOpreations.length && <div
-        id="nav"
-        ref={navRef}
-        className="flex h-0 items-center self-stretch overflow-hidden"
-        style={{ gap }}
-      >
-        {operations.map((operation, index) =>
-          <Button
-            key={index}
-            data-targetid={operation.id}
-            size={'small'}
-            variant={'secondary'}
-            className="gap-[1px]">
-            {cloneElement(operation.icon, { className: 'h-3.5 w-3.5 text-components-button-secondary-text' })}
-            <span className="system-xs-medium text-components-button-secondary-text">
-              {operation.title}
-            </span>
-          </Button>,
-        )}
+    <div className="flex items-center self-stretch overflow-hidden" style={{ gap }}>
+      {/* Fixed primary operations */}
+      {primaryOperations.map(operation =>
        <Button
-          id="more"
+          key={operation.id}
          size={'small'}
          variant={'secondary'}
          className="gap-[1px]"
-        >
-          <RiMoreLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
+          onClick={operation.onClick}>
+          {cloneElement(operation.icon, { className: 'h-3.5 w-3.5 text-components-button-secondary-text' })}
          <span className="system-xs-medium text-components-button-secondary-text">
-            {t('common.operation.more')}
+            {operation.title}
          </span>
-        </Button>
-      </div>}
-      <div className="flex items-center self-stretch overflow-hidden" style={{ gap }}>
-        {visibleOpreations.map(operation =>
-          <Button
-            key={operation.id}
-            data-targetid={operation.id}
-            size={'small'}
-            variant={'secondary'}
-            className="gap-[1px]"
-            onClick={operation.onClick}>
-            {cloneElement(operation.icon, { className: 'h-3.5 w-3.5 text-components-button-secondary-text' })}
-            <span className="system-xs-medium text-components-button-secondary-text">
-              {operation.title}
-            </span>
-          </Button>,
-        )}
-        {visibleOpreations.length < operations.length && <PortalToFollowElem
+        </Button>,
+      )}
+
+      {/* More button - always show if there are secondary operations */}
+      {secondaryOperations.length > 0 && (
+        <PortalToFollowElem
          open={showMore}
          onOpenChange={setShowMore}
          placement='bottom-end'
          offset={{
            mainAxis: 4,
+            crossAxis: 55,
          }}>
          <PortalToFollowElemTrigger onClick={handleTriggerMore}>
            <Button
              size={'small'}
              variant={'secondary'}
-              className='gap-[1px]'
+              className='gap-1'
            >
-              <RiMoreLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
+              <RiMoreFill className='h-3.5 w-3.5 text-components-button-secondary-text' />
              <span className='system-xs-medium text-components-button-secondary-text'>{t('common.operation.more')}</span>
            </Button>
          </PortalToFollowElemTrigger>
          <PortalToFollowElemContent className='z-[21]'>
-            <div className='flex min-w-[264px] flex-col rounded-[12px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]'>
-              {moreOperations.map(item => <div
-                key={item.id}
-                className='flex h-8 cursor-pointer items-center gap-x-1 rounded-lg p-1.5 hover:bg-state-base-hover'
-                onClick={item.onClick}
-              >
-                {cloneElement(item.icon, { className: 'h-4 w-4 text-text-tertiary' })}
-                <span className='system-md-regular text-text-secondary'>{item.title}</span>
-              </div>)}
+            <div className='flex min-w-[264px] flex-col rounded-[12px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[10px]'>
+              {secondaryOperations.map((operation, index) => renderSecondaryOperation(operation, index))}
            </div>
          </PortalToFollowElemContent>
-        </PortalToFollowElem>}
-      </div>
-    </>
+        </PortalToFollowElem>
+      )}
+    </div>
  )
 }