fix: add pinned icon for left sidebar items (#5180)

frontend/src/Editor/LeftSidebar/SidebarDebugger.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Popover from '@/_ui/Popover';
 import { Button, HeaderSection } from '@/_ui/LeftSidebar';
 import { LeftSidebarItem } from './SidebarItem';
@@ -16,6 +16,7 @@ export const LeftSidebarDebugger = ({
   currentPageId,
 }) => {
   const { t } = useTranslation();
+  const [pinned, setPinned] = useState(false);
   const [errorLogs, setErrorLogs] = React.useState([]);
   const [errorHistory, setErrorHistory] = React.useState({ appLevel: [], pageLevel: [] });
   const [unReadErrorCount, setUnReadErrorCount] = React.useState({ read: 0, unread: 0 });
@@ -92,6 +93,18 @@ export const LeftSidebarDebugger = ({
             <Button onClick={clearErrorLogs} darkMode={darkMode} size="sm" styles={{ width: '76px' }}>
               <Button.Content title={'Clear'} iconSrc={'assets/images/icons/clear.svg'} direction="left" />
             </Button>
+            <Button
+              title={`${pinned ? 'Unpin' : 'Pin'}`}
+              onClick={() => setPinned(!pinned)}
+              darkMode={darkMode}
+              size="sm"
+              styles={{ width: '28px', padding: 0 }}
+            >
+              <Button.Content
+                iconSrc={`assets/images/icons/editor/left-sidebar/pinned${pinned ? 'off' : ''}.svg`}
+                direction="left"
+              />
+            </Button>
           </div>
         </HeaderSection.PanelHeader>
       </HeaderSection>
@@ -115,6 +128,7 @@ export const LeftSidebarDebugger = ({
       handleToggle={(open) => {
         if (!open) setSelectedSidebarItem('');
       }}
+      {...(pinned && { open: true })}
       popoverContentClassName="p-0 sidebar-h-100-popover"
       side="right"
       popoverContent={popoverContent}

frontend/src/Editor/LeftSidebar/SidebarInspector.jsx

@@ -1,6 +1,6 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { LeftSidebarItem } from './SidebarItem';
-import { HeaderSection } from '@/_ui/LeftSidebar';
+import { Button, HeaderSection } from '@/_ui/LeftSidebar';
 import JSONTreeViewer from '@/_ui/JSONTreeViewer';
 import _ from 'lodash';
 import RunjsIcon from '../Icons/runjs.svg';
@@ -21,6 +21,7 @@ export const LeftSidebarInspector = ({
   runQuery,
   dataSources,
 }) => {
+  const [pinned, setPinned] = useState(false);
   const componentDefinitions = JSON.parse(JSON.stringify(appDefinition))['components'];
   const queryDefinitions = appDefinition['queries'];
   const selectedComponent = React.useMemo(() => {
@@ -159,7 +160,22 @@ export const LeftSidebarInspector = ({
   const popoverContent = (
     <div className={`left-sidebar-inspector`} style={{ resize: 'horizontal', minWidth: 288 }}>
       <HeaderSection darkMode={darkMode}>
-        <HeaderSection.PanelHeader title="Inspector" />
+        <HeaderSection.PanelHeader title="Inspector">
+          <div className="d-flex justify-content-end">
+            <Button
+              title={`${pinned ? 'Unpin' : 'Pin'}`}
+              onClick={() => setPinned(!pinned)}
+              darkMode={darkMode}
+              size="sm"
+              styles={{ width: '28px', padding: 0 }}
+            >
+              <Button.Content
+                iconSrc={`assets/images/icons/editor/left-sidebar/pinned${pinned ? 'off' : ''}.svg`}
+                direction="left"
+              />
+            </Button>
+          </div>
+        </HeaderSection.PanelHeader>
       </HeaderSection>
       <div className="card-body p-1 pb-5 mb-5">
         <JSONTreeViewer
@@ -185,6 +201,7 @@ export const LeftSidebarInspector = ({
       handleToggle={(open) => {
         if (!open) setSelectedSidebarItem('');
       }}
+      {...(pinned && { open: true })}
       side="right"
       popoverContentClassName="p-0 sidebar-h-100-popover sidebar-h-100-popover-inspector"
       popoverContent={popoverContent}

frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx

@@ -34,6 +34,7 @@ const LeftSidebarPageSelector = ({
   dataQueries,
 }) => {
   const [allpages, setPages] = useState(pages);
+  const [pinned, setPinned] = useState(false);
 
   const [newPageBeingCreated, setNewPageBeingCreated] = useState(false);
   const [showSearch, setShowSearch] = useState(false);
@@ -91,6 +92,18 @@ const LeftSidebarPageSelector = ({
               >
                 <Button.Content iconSrc={'assets/images/icons/search.svg'} direction="left" />
               </Button>
+              <Button
+                title={`${pinned ? 'Unpin' : 'Pin'}`}
+                onClick={() => setPinned(!pinned)}
+                darkMode={darkMode}
+                size="sm"
+                styles={{ width: '28px', padding: 0 }}
+              >
+                <Button.Content
+                  iconSrc={`assets/images/icons/editor/left-sidebar/pinned${pinned ? 'off' : ''}.svg`}
+                  direction="left"
+                />
+              </Button>
             </div>
           </HeaderSection.PanelHeader>
           {showSearch && (
@@ -160,6 +173,7 @@ const LeftSidebarPageSelector = ({
       handleToggle={(open) => {
         if (!open) setSelectedSidebarItem('');
       }}
+      {...(pinned && { open: true })}
       popoverContentClassName="p-0 sidebar-h-100-popover"
       side="right"
       popoverContent={popoverContent}

frontend/src/HomePage/Folders.jsx

@@ -130,7 +130,7 @@ export const Folders = function Folders({
   }
 
   return (
-    <div className="w-100 px-4 py-3 folder-list">
+    <div className="w-100 p-3 folder-list">
       <ConfirmDialog
         show={showDeleteConfirmation}
         message={t(

frontend/src/_ui/Popover/index.jsx

@@ -6,6 +6,7 @@ import * as Popover from '@radix-ui/react-popover';
 
 const PopoverComponent = ({
   children,
+  open,
   fullWidth = true,
   popoverContentClassName = '',
   popoverContent,
@@ -17,7 +18,7 @@ const PopoverComponent = ({
   const darkMode = localStorage.getItem('darkMode') === 'true';
 
   return (
-    <Popover.Root onOpenChange={handleToggle && handleToggle}>
+    <Popover.Root {...(open && { open })} onOpenChange={handleToggle && handleToggle}>
       <Popover.Trigger asChild>
         <a className={cx({ 'w-100': fullWidth })}>{children}</a>
       </Popover.Trigger>