feat(workflow): rework desktop footer and on panels collapse action b…

…uttons location

src/features/editor/components/header/index.tsx

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 import { ActionButtons } from './action-buttons';
 import { AutorunToggler } from './autorun-toggler';
 import { InfoEdit, InfoTitle } from './info';
+import { LayoutDirectionToggler } from './layout-direction-toggler';
 import { MainMenu } from './main-menu';
 import { OpenInSite } from './open-in-site';
 import { SharingMenu } from './sharing-menu';
@@ -27,6 +28,7 @@ export const Header = () => {
         <div className="flex flex-1 flex-wrap justify-end gap-3 sm:flex-none">
           {isIframe && <OpenInSite />}
           {!isIframe && <SharingMenu />}
+          <LayoutDirectionToggler />
           <AutorunToggler />
           <ActionButtons />
         </div>

src/features/editor/features/base/components/footer/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { DesktopFooter } from './desktop-footer';
 import { MobileFooter } from './mobile-footer';
 import type { FooterProps } from './types';
 
@@ -10,7 +9,6 @@ export const Footer: React.FC<Props> = ({ ...footerProps }) => {
   return (
     <>
       <MobileFooter className="flex md:hidden" {...footerProps} />
-      <DesktopFooter className="hidden md:flex" {...footerProps} />
     </>
   );
 };

src/features/editor/features/base/index.tsx

@@ -1,6 +1,13 @@
+import {
+  PinBottomIcon,
+  PinLeftIcon,
+  PinRightIcon,
+  PinTopIcon,
+} from '@radix-ui/react-icons';
 import { lazy, Suspense } from 'react';
 
 import { Loading } from '@/components/loading';
+import { Button } from '@/components/ui/button';
 import {
   ResizableHandle,
   ResizablePanel,
@@ -16,6 +23,7 @@ import { Footer } from './components/footer';
 const Output = lazy(() => import('../../components/output'));
 const CodemirrorEditor = lazy(() => import('../../components/editor'));
 
+// eslint-disable-next-line max-lines-per-function
 const BaseEditor = () => {
   const { layout_direction } = useSettingsStore();
   const {
@@ -38,6 +46,20 @@ const BaseEditor = () => {
             autoSaveId="persistence"
             direction={layout_direction}
           >
+            {!isVisiblePanelLeft && (
+              <Button
+                className="mx-2 hidden md:flex"
+                size="icon"
+                onClick={handleOpenLeft}
+                title="Open left panel"
+              >
+                {layout_direction === 'horizontal' ? (
+                  <PinRightIcon />
+                ) : (
+                  <PinBottomIcon />
+                )}
+              </Button>
+            )}
             <ResizablePanel
               ref={panelLeftRef}
               collapsible={true}
@@ -63,6 +85,20 @@ const BaseEditor = () => {
                 <Output />
               </Suspense>
             </ResizablePanel>
+            {!isVisiblePanelRight && (
+              <Button
+                className="mx-2 hidden md:flex"
+                size="icon"
+                onClick={handleOpenRight}
+                title="Open right panel"
+              >
+                {layout_direction === 'horizontal' ? (
+                  <PinLeftIcon />
+                ) : (
+                  <PinTopIcon />
+                )}
+              </Button>
+            )}
           </ResizablePanelGroup>
         </section>
         <Footer