From 3e2caca2b528e19f5a7a8e5ad605ebf0a6ec249a Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 7 Mar 2024 01:11:16 +0100
Subject: [PATCH] Added sidebar separations

---
 src/frontend/src/constants/constants.ts       |   1 +
 .../extraSidebarComponent/index.tsx           | 128 ++++++++++--------
 2 files changed, 74 insertions(+), 55 deletions(-)

diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index 9e40d56ca..fc89b9890 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -739,3 +739,4 @@ export const PRIORITY_SIDEBAR_ORDER = [
   "helpers",
   "experimental",
 ];
+
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 565192709..796ce297b 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -5,6 +5,7 @@ import IconComponent from "../../../../components/genericIconComponent";
 import { Input } from "../../../../components/ui/input";
 import { Separator } from "../../../../components/ui/separator";
 import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
+import { PRIORITY_SIDEBAR_ORDER } from "../../../../constants/constants";
 import ApiModal from "../../../../modals/ApiModal";
 import ExportModal from "../../../../modals/exportModal";
 import ShareModal from "../../../../modals/shareModal";
@@ -264,64 +265,81 @@ export default function ExtraSidebar(): JSX.Element {
           .sort(sortKeys)
           .map((SBSectionName: keyof APIObjectType, index) =>
             Object.keys(dataFilter[SBSectionName]).length > 0 ? (
-              <DisclosureComponent
-                openDisc={
-                  getFilterEdge.length !== 0 || search.length !== 0
-                    ? true
-                    : false
-                }
-                key={index + search + JSON.stringify(getFilterEdge)}
-                button={{
-                  title: nodeNames[SBSectionName] ?? nodeNames.unknown,
-                  Icon:
-                    nodeIconsLucide[SBSectionName] ?? nodeIconsLucide.unknown,
-                }}
-              >
-                <div className="side-bar-components-gap">
-                  {Object.keys(dataFilter[SBSectionName])
-                    .sort((a, b) =>
-                      sensitiveSort(
-                        dataFilter[SBSectionName][a].display_name,
-                        dataFilter[SBSectionName][b].display_name
+              <>
+                {index === 0 && (
+                  <div className="pt-0.5">
+                    <Separator />
+                    <div className="p-2 px-4 font-semibold" key={index}>
+                      Native
+                    </div>
+                  </div>
+                )}
+                {index === PRIORITY_SIDEBAR_ORDER.length - 1 && (
+                  <div className="p-2 px-4 font-semibold" key={index}>
+                    Legacy
+                  </div>
+                )}
+                <DisclosureComponent
+                  openDisc={
+                    getFilterEdge.length !== 0 || search.length !== 0
+                      ? true
+                      : false
+                  }
+                  key={index + search + JSON.stringify(getFilterEdge)}
+                  button={{
+                    title: nodeNames[SBSectionName] ?? nodeNames.unknown,
+                    Icon:
+                      nodeIconsLucide[SBSectionName] ?? nodeIconsLucide.unknown,
+                  }}
+                >
+                  <div className="side-bar-components-gap">
+                    {Object.keys(dataFilter[SBSectionName])
+                      .sort((a, b) =>
+                        sensitiveSort(
+                          dataFilter[SBSectionName][a].display_name,
+                          dataFilter[SBSectionName][b].display_name
+                        )
                       )
-                    )
-                    .map((SBItemName: string, index) => (
-                      <ShadTooltip
-                        content={
-                          dataFilter[SBSectionName][SBItemName].display_name
-                        }
-                        side="right"
-                        key={index}
-                      >
-                        <SidebarDraggableComponent
-                          sectionName={SBSectionName as string}
-                          apiClass={dataFilter[SBSectionName][SBItemName]}
-                          key={index}
-                          onDragStart={(event) =>
-                            onDragStart(event, {
-                              //split type to remove type in nodes saved with same name removing it's
-                              type: removeCountFromString(SBItemName),
-                              node: dataFilter[SBSectionName][SBItemName],
-                            })
-                          }
-                          color={nodeColors[SBSectionName]}
-                          itemName={SBItemName}
-                          //convert error to boolean
-                          error={!!dataFilter[SBSectionName][SBItemName].error}
-                          display_name={
+                      .map((SBItemName: string, index) => (
+                        <ShadTooltip
+                          content={
                             dataFilter[SBSectionName][SBItemName].display_name
                           }
-                          official={
-                            dataFilter[SBSectionName][SBItemName].official ===
-                            false
-                              ? false
-                              : true
-                          }
-                        />
-                      </ShadTooltip>
-                    ))}
-                </div>
-              </DisclosureComponent>
+                          side="right"
+                          key={index}
+                        >
+                          <SidebarDraggableComponent
+                            sectionName={SBSectionName as string}
+                            apiClass={dataFilter[SBSectionName][SBItemName]}
+                            key={index}
+                            onDragStart={(event) =>
+                              onDragStart(event, {
+                                //split type to remove type in nodes saved with same name removing it's
+                                type: removeCountFromString(SBItemName),
+                                node: dataFilter[SBSectionName][SBItemName],
+                              })
+                            }
+                            color={nodeColors[SBSectionName]}
+                            itemName={SBItemName}
+                            //convert error to boolean
+                            error={
+                              !!dataFilter[SBSectionName][SBItemName].error
+                            }
+                            display_name={
+                              dataFilter[SBSectionName][SBItemName].display_name
+                            }
+                            official={
+                              dataFilter[SBSectionName][SBItemName].official ===
+                              false
+                                ? false
+                                : true
+                            }
+                          />
+                        </ShadTooltip>
+                      ))}
+                  </div>
+                </DisclosureComponent>
+              </>
             ) : (
               <div key={index}></div>
             )