From 47514fb780c260cd8dd960041eb8e9d49c45742c Mon Sep 17 00:00:00 2001
From: Pedro Carreno <34664891+Pkcarreno@users.noreply.github.com>
Date: Sat, 28 Dec 2024 21:54:32 -0400
Subject: [PATCH] feat(workflow): rework desktop footer and on panels collapse
 action buttons location

---
 .../editor/components/header/index.tsx        |  2 +
 .../header}/layout-direction-toggler.tsx      |  0
 .../base/components/footer/desktop-footer.tsx | 65 -------------------
 .../features/base/components/footer/index.tsx |  2 -
 src/features/editor/features/base/index.tsx   | 36 ++++++++++
 5 files changed, 38 insertions(+), 67 deletions(-)
 rename src/features/editor/{features/base/components/footer => components/header}/layout-direction-toggler.tsx (100%)
 delete mode 100644 src/features/editor/features/base/components/footer/desktop-footer.tsx

diff --git a/src/features/editor/components/header/index.tsx b/src/features/editor/components/header/index.tsx
index 8f4a6c0..ac5c82a 100644
--- a/src/features/editor/components/header/index.tsx
+++ b/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>
diff --git a/src/features/editor/features/base/components/footer/layout-direction-toggler.tsx b/src/features/editor/components/header/layout-direction-toggler.tsx
similarity index 100%
rename from src/features/editor/features/base/components/footer/layout-direction-toggler.tsx
rename to src/features/editor/components/header/layout-direction-toggler.tsx
diff --git a/src/features/editor/features/base/components/footer/desktop-footer.tsx b/src/features/editor/features/base/components/footer/desktop-footer.tsx
deleted file mode 100644
index 3e94ba6..0000000
--- a/src/features/editor/features/base/components/footer/desktop-footer.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { PinLeftIcon, PinRightIcon } from '@radix-ui/react-icons';
-import { Separator } from '@radix-ui/react-separator';
-import React from 'react';
-
-import { Button } from '@/components/ui/button';
-import { useHelp } from '@/features/editor/hooks/use-help';
-import { cn } from '@/lib/utils';
-
-import { LayoutDirectionToggler } from './layout-direction-toggler';
-import type { FooterProps } from './types';
-
-interface Props
-  extends FooterProps,
-    Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {}
-
-export const DesktopFooter: React.FC<Props> = ({
-  onLeftClick,
-  isLeftActive,
-  onRightClick,
-  isRightActive,
-  className,
-}) => {
-  const help = useHelp();
-
-  return (
-    <div className={cn('flex w-full flex-col', className)}>
-      <Separator className="bg-border h-px" />
-
-      <div className="flex justify-between gap-2 px-2 py-1">
-        <div className="flex flex-1 gap-2">
-          {!isLeftActive && (
-            <Button
-              className="mr-1"
-              variant="outline"
-              size="sm"
-              onClick={onLeftClick}
-            >
-              <PinLeftIcon />
-            </Button>
-          )}
-        </div>
-
-        <div className="flex flex-1 justify-center gap-2">
-          <Button
-            variant="link"
-            size="sm"
-            className="text-muted-foreground"
-            onClick={help.openHelpDialog}
-          >
-            Need help?
-          </Button>
-        </div>
-
-        <div className="flex flex-1 justify-end gap-2" onClick={onRightClick}>
-          <LayoutDirectionToggler />
-          {!isRightActive && (
-            <Button className="ml-1" variant="outline" size="sm">
-              <PinRightIcon />
-            </Button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/features/editor/features/base/components/footer/index.tsx b/src/features/editor/features/base/components/footer/index.tsx
index 74f3b39..bf61faa 100644
--- a/src/features/editor/features/base/components/footer/index.tsx
+++ b/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} />
     </>
   );
 };
diff --git a/src/features/editor/features/base/index.tsx b/src/features/editor/features/base/index.tsx
index ad57cb8..b19d486 100644
--- a/src/features/editor/features/base/index.tsx
+++ b/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