fix: rightbar ui

Author: drl990114

apps/desktop/src/components/SideBar/RightBar.tsx

@@ -0,0 +1,61 @@
+import classNames from 'classnames'
+import { memo, useMemo, useState } from 'react'
+import { Container as SideBarContainer, SideBarHeader } from './styles'
+import { RIGHTBARITEMKEYS } from '@/constants'
+import { Tooltip } from 'zens'
+import { TableOfContent } from '@/extensions/table-of-content'
+
+function RightBar() {
+  const [activeRightBarItemKey, setActiveRightBarItemKey] = useState<RIGHTBARITEMKEYS>(
+    RIGHTBARITEMKEYS.TableOfContent,
+  )
+
+  const rightBarDataSource: RightBarItem[] = useMemo(() => {
+    return [
+      TableOfContent,
+    ]
+  }, [])
+
+  const activeRightBarItem = useMemo(() => {
+    const activeItem = rightBarDataSource.find((item) => item.key === activeRightBarItemKey)
+    return activeItem
+  }, [activeRightBarItemKey, rightBarDataSource])
+
+  const noActiveItem = !activeRightBarItemKey
+
+  return (
+    <SideBarContainer noActiveItem={noActiveItem}>
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', width: '100%' }}>
+        <SideBarHeader>
+          {rightBarDataSource.map((item) => {
+            const cls = classNames('icon', {
+              'app-sidebar-active': activeRightBarItemKey === item.key,
+            })
+
+            const handleRightBarItemClick = () => {
+              setActiveRightBarItemKey(item.key)
+            }
+
+            return (
+              <Tooltip key={item.key} title={item.title}>
+                <div className={cls} onClick={handleRightBarItemClick}>
+                  {item.icon}
+                </div>
+              </Tooltip>
+            )
+          })}
+        </SideBarHeader>
+        {activeRightBarItem?.components ?? null}
+      </div>
+    </SideBarContainer>
+  )
+}
+
+export interface RightBarItem {
+  title: RIGHTBARITEMKEYS
+  key: RIGHTBARITEMKEYS
+  icon: React.ReactNode
+  components: any
+}
+
+export default memo(RightBar)

apps/desktop/src/extensions/table-of-content/styles.ts

@@ -6,6 +6,7 @@ export const RightBarHeader = styled.div`
   align-items: center;
   flex-shrink: 0;
   height: 32px;
+  padding: 0 8px;
   background-color: ${(props) => props.theme.rightBarHeaderBgColor};
 `
 

apps/desktop/src/router/Root/index.tsx

@@ -11,9 +11,9 @@ import { appInfoStoreSetup } from '@/services/app-info'
 import StatusBar from '@/components/StatusBar'
 import { useTitleBarEffect } from '@/hooks/useTitleBarEffect'
 import { PanelGroup, Panel, PanelResizeHandle, ImperativePanelHandle } from 'react-resizable-panels'
-import { TableOfContent } from '@/extensions/table-of-content'
 import { useCommandStore } from '@/stores'
 import useLayoutStore from '@/stores/useLayoutStore'
+import RightBar from '@/components/SideBar/RightBar'
 
 export const RESIZE_PANEL_STORAGE_KEY = 'resize-panel'
 
@@ -105,7 +105,7 @@ function Root() {
           minSize={10}
           ref={rightPanelRef}
         >
-          {TableOfContent.components}
+          <RightBar />
         </Panel>
       </PanelGroup>
       <StatusBar />