From 436283f2ae2b2626390e576c5fa2d7919924115c Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Wed, 29 Nov 2023 17:45:48 +0500
Subject: [PATCH 1/3] feat: foldable components sections

---
 .../src/pages/editor/right/uiCompPanel.tsx    | 64 +++++++++----------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
index 3451c679a..8ccffe41a 100644
--- a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
+++ b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
@@ -8,7 +8,6 @@ import { draggingUtils } from "layout";
 import { isEmpty } from "lodash";
 import { language } from "i18n";
 import {
-  ComListTitle,
   CompIconDiv,
   EmptyCompContent,
   RightPanelContentWrapper,
@@ -16,15 +15,13 @@ import {
 import { tableDragClassName } from "pages/tutorials/tutorialsConstant";
 import React, { useContext, useMemo } from "react";
 import styled from "styled-components";
-import { labelCss } from "lowcoder-design";
+import {
+  BaseSection,
+  labelCss,
+} from "lowcoder-design";
 import { TransparentImg } from "../../../util/commonUtils";
 import { RightContext } from "./rightContext";
 
-const GrayLabel = (props: { label: string }) => {
-  const { label } = props;
-  return <ComListTitle>{label}</ComListTitle>;
-};
-
 const CompDiv = styled.div`
   display: flex;
   flex-direction: column;
@@ -80,12 +77,10 @@ const InsertContain = styled.div`
   gap: 8px;
 `;
 
-const CategoryLabel = styled(GrayLabel)`
-  margin: 0;
-`;
-
 const SectionWrapper = styled.div`
-  margin-bottom: 16px;
+  .section-header {
+    margin-left: 0;
+  }
 `;
 
 export const UICompPanel = () => {
@@ -122,26 +117,31 @@ export const UICompPanel = () => {
 
           return (
             <SectionWrapper key={index}>
-              <CategoryLabel label={uiCompCategoryNames[key as UICompCategory]} />
-              <InsertContain>
-                {infos.map((info) => (
-                  <CompDiv key={info[0]} className={info[0] === "table" ? tableDragClassName : ""}>
-                    <HovDiv
-                      draggable
-                      onDragStart={(e) => {
-                        e.dataTransfer.setData("compType", info[0]);
-                        e.dataTransfer.setDragImage(TransparentImg, 0, 0);
-                        draggingUtils.setData("compType", info[0]);
-                        onDrag(info[0]);
-                      }}
-                    >
-                      <IconContain Icon={info[1].icon}></IconContain>
-                    </HovDiv>
-                    <CompNameLabel>{info[1].name}</CompNameLabel>
-                    {language !== "en" && <CompEnNameLabel>{info[1].enName}</CompEnNameLabel>}
-                  </CompDiv>
-                ))}
-              </InsertContain>
+              <BaseSection
+                noMargin
+                width={288}
+                name={uiCompCategoryNames[key as UICompCategory]}
+              >
+                <InsertContain>
+                  {infos.map((info) => (
+                    <CompDiv key={info[0]} className={info[0] === "table" ? tableDragClassName : ""}>
+                      <HovDiv
+                        draggable
+                        onDragStart={(e) => {
+                          e.dataTransfer.setData("compType", info[0]);
+                          e.dataTransfer.setDragImage(TransparentImg, 0, 0);
+                          draggingUtils.setData("compType", info[0]);
+                          onDrag(info[0]);
+                        }}
+                      >
+                        <IconContain Icon={info[1].icon}></IconContain>
+                      </HovDiv>
+                      <CompNameLabel>{info[1].name}</CompNameLabel>
+                      {language !== "en" && <CompEnNameLabel>{info[1].enName}</CompEnNameLabel>}
+                    </CompDiv>
+                  ))}
+                </InsertContain>
+              </BaseSection>
             </SectionWrapper>
           );
         })

From 6e080c6e4bde0ef6531ba8ce9d4b03a999d8102e Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Wed, 29 Nov 2023 19:22:05 +0500
Subject: [PATCH 2/3] fix: initially show only commonly used comps

---
 .../src/pages/editor/right/uiCompPanel.tsx    | 42 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
index 8ccffe41a..d5a8eda13 100644
--- a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
+++ b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
@@ -13,10 +13,13 @@ import {
   RightPanelContentWrapper,
 } from "pages/editor/right/styledComponent";
 import { tableDragClassName } from "pages/tutorials/tutorialsConstant";
-import React, { useContext, useMemo } from "react";
+import React, { useContext, useMemo, useState } from "react";
 import styled from "styled-components";
 import {
   BaseSection,
+  PropertySectionContext,
+  PropertySectionContextType,
+  PropertySectionState,
   labelCss,
 } from "lowcoder-design";
 import { TransparentImg } from "../../../util/commonUtils";
@@ -83,8 +86,16 @@ const SectionWrapper = styled.div`
   }
 `;
 
+const stateCompName = 'UICompSections';
+const initialState: PropertySectionState = { [stateCompName]: {}};
+Object.keys(uiCompCategoryNames).forEach((cat) => {
+  const key = uiCompCategoryNames[cat as UICompCategory];
+  initialState[stateCompName][key] = key === uiCompCategoryNames.common
+})
+
 export const UICompPanel = () => {
   const { onDrag, searchValue } = useContext(RightContext);
+  const [propertySectionState, setPropertySectionState] = useState<PropertySectionState>(initialState);
 
   const categories = useMemo(() => {
     const cats: Record<string, [string, UICompManifest][]> = Object.fromEntries(
@@ -98,6 +109,22 @@ export const UICompPanel = () => {
     return cats;
   }, []);
 
+  const propertySectionContextValue = useMemo<PropertySectionContextType>(() => {
+    return {
+      compName: stateCompName,
+      state: propertySectionState,
+      toggle: (compName: string, sectionName: string) => {
+        setPropertySectionState((oldState) => {
+          const nextSectionState: PropertySectionState = { ...oldState };
+          const compState = nextSectionState[compName] || {};
+          compState[sectionName] = compState[sectionName] === false;
+          nextSectionState[compName] = compState;
+          return nextSectionState;
+        });
+      },
+    };
+  }, [propertySectionState]);
+
   const compList = useMemo(
     () =>
       Object.entries(categories)
@@ -149,9 +176,20 @@ export const UICompPanel = () => {
     [categories, searchValue, onDrag]
   );
 
+  if(!compList.length) return (
+    <RightPanelContentWrapper>
+      <EmptyCompContent />
+    </RightPanelContentWrapper>
+  )
+
   return (
     <RightPanelContentWrapper>
-      {compList.length > 0 ? compList : <EmptyCompContent />}
+      {/* {compList.length > 0 ? compList : <EmptyCompContent />} */}
+      <PropertySectionContext.Provider
+        value={propertySectionContextValue}
+      >
+        {compList}
+      </PropertySectionContext.Provider>
     </RightPanelContentWrapper>
   );
 };

From ad2e97ead349e04c9a0a4fb5a20d0ea9b89c77d0 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Wed, 29 Nov 2023 19:28:57 +0500
Subject: [PATCH 3/3] fix: show border bottom for each section

---
 .../packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx   | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
index d5a8eda13..1b854f7cf 100644
--- a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
+++ b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
@@ -84,6 +84,9 @@ const SectionWrapper = styled.div`
   .section-header {
     margin-left: 0;
   }
+  &:not(:last-child){
+    border-bottom: 1px solid #e1e3eb;
+  }
 `;
 
 const stateCompName = 'UICompSections';