feat: add the function of left folding in the exploration column(lang…

…genius#10850)
XiaoBa-Yu · Jan 10, 2025 · 2aaf8f5 · 2aaf8f5
1 parent 8f3dc0d
commit 2aaf8f5
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 7 deletions.
diff --git a/web/app/components/explore/index.tsx b/web/app/components/explore/index.tsx
@@ -8,6 +8,8 @@ import Sidebar from '@/app/components/explore/sidebar'
 import { useAppContext } from '@/context/app-context'
 import { fetchMembers } from '@/service/common'
 import type { InstalledApp } from '@/models/explore'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { useStore } from '@/app/components/app/store'
 
 export type IExploreProps = {
   children: React.ReactNode
@@ -23,6 +25,10 @@ const Explore: FC<IExploreProps> = ({
   const [hasEditPermission, setHasEditPermission] = useState(false)
   const [installedApps, setInstalledApps] = useState<InstalledApp[]>([])
 
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+  const setAppSiderbarExpand = useStore(state => state.setAppSiderbarExpand)
+
   useEffect(() => {
     document.title = `${t('explore.title')} -  Dify`;
     (async () => {
@@ -39,6 +45,12 @@ const Explore: FC<IExploreProps> = ({
       return router.replace('/datasets')
   }, [isCurrentWorkspaceDatasetOperator])
 
+  useEffect(() => {
+    const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
+    const mode = isMobile ? 'collapse' : 'expand'
+    setAppSiderbarExpand(isMobile ? mode : localeMode)
+  }, [isMobile, setAppSiderbarExpand])
+
   return (
     <div className='flex h-full bg-gray-100 border-t border-gray-200 overflow-hidden'>
       <ExploreContext.Provider

diff --git a/web/app/components/explore/sidebar/app-nav-item/index.tsx b/web/app/components/explore/sidebar/app-nav-item/index.tsx
@@ -10,7 +10,7 @@ import AppIcon from '@/app/components/base/app-icon'
 import type { AppIconType } from '@/types/app'
 
 export type IAppNavItemProps = {
-  isMobile: boolean
+  expand: boolean
   name: string
   id: string
   icon_type: AppIconType | null
@@ -25,7 +25,7 @@ export type IAppNavItemProps = {
 }
 
 export default function AppNavItem({
-  isMobile,
+  expand,
   name,
   id,
   icon_type,
@@ -55,8 +55,8 @@ export default function AppNavItem({
         router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation().
       }}
     >
-      {isMobile && <AppIcon size='tiny' iconType={icon_type} icon={icon} background={icon_background} imageUrl={icon_url} />}
-      {!isMobile && (
+      {!expand && <AppIcon size='tiny' iconType={icon_type} icon={icon} background={icon_background} imageUrl={icon_url} />}
+      {expand && (
         <>
           <div className='flex items-center space-x-2 w-0 grow'>
             <AppIcon size='tiny' iconType={icon_type} icon={icon} background={icon_background} imageUrl={icon_url} />

diff --git a/web/app/components/explore/sidebar/index.tsx b/web/app/components/explore/sidebar/index.tsx
@@ -1,10 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
+import { useShallow } from 'zustand/react/shallow'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useSelectedLayoutSegments } from 'next/navigation'
 import Link from 'next/link'
+import { RiLayoutRight2Line } from '@remixicon/react'
+import { LayoutRight2LineMod } from '../../base/icons/src/public/knowledge'
 import Toast from '../../base/toast'
 import Item from './app-nav-item'
 import cn from '@/utils/classnames'
@@ -13,6 +16,7 @@ import ExploreContext from '@/context/explore-context'
 import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { useStore as useAppStore } from '@/app/components/app/store'
 
 const SelectedDiscoveryIcon = () => (
   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -52,6 +56,15 @@ const SideBar: FC<IExploreSideBarProps> = ({
   const isChatSelected = lastSegment === 'chat'
   const { installedApps, setInstalledApps } = useContext(ExploreContext)
 
+  const { appSidebarExpand, setAppSiderbarExpand } = useAppStore(useShallow(state => ({
+    appSidebarExpand: state.appSidebarExpand,
+    setAppSiderbarExpand: state.setAppSiderbarExpand,
+  })))
+  const expand = appSidebarExpand === 'expand'
+  const handleToggle = (state: string) => {
+    setAppSiderbarExpand(state === 'expand' ? 'collapse' : 'expand')
+  }
+
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
 
@@ -82,6 +95,13 @@ const SideBar: FC<IExploreSideBarProps> = ({
     fetchInstalledAppList()
   }
 
+  useEffect(() => {
+    if (appSidebarExpand) {
+      localStorage.setItem('app-detail-collapse-or-expand', appSidebarExpand)
+      setAppSiderbarExpand(appSidebarExpand)
+    }
+  }, [appSidebarExpand, setAppSiderbarExpand])
+
   useEffect(() => {
     fetchInstalledAppList()
   }, [])
@@ -92,15 +112,15 @@ const SideBar: FC<IExploreSideBarProps> = ({
 
   const pinnedAppsCount = installedApps.filter(({ is_pinned }) => is_pinned).length
   return (
-    <div className='w-fit sm:w-[216px] shrink-0 pt-6 px-4 border-gray-200 cursor-pointer'>
+    <div className={`w-fit shrink-0 pt-6 px-4 border-gray-200 cursor-pointer ${expand ? 'sm:w-[216px]' : ''}`}>
       <div>
         <Link
           href='/explore/apps'
           className={cn(isDiscoverySelected ? 'text-primary-600  bg-white font-semibold' : 'text-gray-700 font-medium hover:bg-gray-200', 'flex items-center pc:justify-start pc:w-full mobile:justify-center mobile:w-fit h-9 px-3 mobile:px-2 gap-2 rounded-lg')}
           style={isDiscoverySelected ? { boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)' } : {}}
         >
           {isDiscoverySelected ? <SelectedDiscoveryIcon /> : <DiscoveryIcon />}
-          {!isMobile && <div className='text-sm'>{t('explore.sidebar.discovery')}</div>}
+          {expand && <div className='text-sm'>{t('explore.sidebar.discovery')}</div>}
         </Link>
       </div>
       {installedApps.length > 0 && (
@@ -114,7 +134,7 @@ const SideBar: FC<IExploreSideBarProps> = ({
             {installedApps.map(({ id, is_pinned, uninstallable, app: { name, icon_type, icon, icon_url, icon_background } }, index) => (
               <React.Fragment key={id}>
                 <Item
-                  isMobile={isMobile}
+                  expand={expand}
                   name={name}
                   icon_type={icon_type}
                   icon={icon}
@@ -145,6 +165,22 @@ const SideBar: FC<IExploreSideBarProps> = ({
           onCancel={() => setShowConfirm(false)}
         />
       )}
+      {
+        !isMobile && (
+          <div>
+            <div
+              className='flex items-center justify-center w-6 h-6 text-gray-500 cursor-pointer'
+              onClick={() => handleToggle(appSidebarExpand)}
+            >
+              {
+                expand
+                  ? <RiLayoutRight2Line className='w-5 h-5 text-components-menu-item-text' />
+                  : <LayoutRight2LineMod className='w-5 h-5 text-components-menu-item-text' />
+              }
+            </div>
+          </div>
+        )
+      }
     </div>
   )
 }