right header

web/app/components/workflow/variable-inspect/panel.tsx

@@ -5,6 +5,7 @@ import {
 } from '@remixicon/react'
 import { useStore } from '../store'
 import Empty from './empty'
+import Right from './right'
 import ActionButton from '@/app/components/base/action-button'
 import cn from '@/utils/classnames'
 
@@ -33,13 +34,13 @@ const Panel: FC = () => {
   return (
     <div className={cn('relative flex h-full')}>
       {/* left */}
-      {showLeftPanel && <div className='absolute left-0 top-0 h-full w-full' onClick={() => setShowLeftPanel(false)}></div>}
+      {bottomPanelWidth < 488 && showLeftPanel && <div className='absolute left-0 top-0 h-full w-full' onClick={() => setShowLeftPanel(false)}></div>}
       <div
         className={cn(
           'w-60 shrink-0 border-r border-divider-burn',
           bottomPanelWidth < 488
             ? showLeftPanel
-              ? 'absolute left-0 top-0 h-full w-[217px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-sm'
+              ? 'absolute left-0 top-0 z-10 h-full w-[217px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-sm'
               : 'hidden'
             : 'block',
         )}
@@ -47,8 +48,8 @@ const Panel: FC = () => {
         left
       </div>
       {/* right */}
-      <div className='grow'>
-        right
+      <div className='w-0 grow'>
+        <Right handleOpenMenu={() => setShowLeftPanel(true)} />
       </div>
     </div>
   )

web/app/components/workflow/variable-inspect/right.tsx

@@ -0,0 +1,69 @@
+// import { useState } from 'react'
+import {
+  RiArrowGoBackLine,
+  RiCloseLine,
+  RiMenuLine,
+} from '@remixicon/react'
+import { useStore } from '../store'
+import { BlockEnum } from '../types'
+import Empty from './empty'
+import ActionButton from '@/app/components/base/action-button'
+import Badge from '@/app/components/base/badge'
+import CopyFeedback from '@/app/components/base/copy-feedback'
+import Tooltip from '@/app/components/base/tooltip'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import cn from '@/utils/classnames'
+
+type Props = {
+  handleOpenMenu: () => void
+}
+
+const Right = ({ handleOpenMenu }: Props) => {
+  const bottomPanelWidth = useStore(s => s.bottomPanelWidth)
+  const setShowVariableInspectPanel = useStore(s => s.setShowVariableInspectPanel)
+
+  return (
+    <div className={cn('flex h-full flex-col')}>
+      {/* header */}
+      <div className='flex shrink-0 items-center justify-between gap-1 px-2 pt-2'>
+        {bottomPanelWidth < 488 && (
+          <ActionButton className='shrink-0' onClick={handleOpenMenu}>
+            <RiMenuLine className='h-4 w-4' />
+          </ActionButton>
+        )}
+        <div className='flex w-0 grow items-center gap-1'>
+          <BlockIcon
+            className='shrink-0'
+            type={BlockEnum.LLM}
+            size='xs'
+          />
+          <div className='system-sm-regular shrink-0 text-text-secondary'>LLM</div>
+          <div className='system-sm-regular shrink-0 text-text-quaternary'>/</div>
+          <div title='out_put' className='system-sm-semibold truncate text-text-secondary'>out_put</div>
+          <div className='system-xs-medium ml-1 shrink-0 text-text-tertiary'>String</div>
+        </div>
+        <div className='flex shrink-0 items-center gap-1'>
+          <Badge>
+            <span className='ml-[2.5px] mr-[4.5px] h-[3px] w-[3px] rounded bg-text-accent-secondary'></span>
+            <span className='system-2xs-semibold-uupercase'>Edited</span>
+          </Badge>
+          <Tooltip popupContent={'Reset to last run value'}>
+            <ActionButton onClick={() => setShowVariableInspectPanel(false)}>
+              <RiArrowGoBackLine className='h-4 w-4' />
+            </ActionButton>
+          </Tooltip>
+          <CopyFeedback content='' />
+          <ActionButton onClick={() => setShowVariableInspectPanel(false)}>
+            <RiCloseLine className='h-4 w-4' />
+          </ActionButton>
+        </div>
+      </div>
+      {/* content */}
+      <div className='grow p-2'>
+        <Empty />
+      </div>
+    </div>
+  )
+}
+
+export default Right