From b252d74db905bad179eb1a351ab156b70f31d335 Mon Sep 17 00:00:00 2001
From: Manoj Vivek <p.manoj.vivek@gmail.com>
Date: Fri, 17 Jan 2025 19:35:16 +0530
Subject: [PATCH] Fresh LayoutSelector with a ButtonGroup

---
 .../renderer/components/ButtonGroup/index.tsx | 35 +++++++++++
 .../src/renderer/components/Divider/index.tsx |  2 +-
 .../components/Masonry/MasonryLayout.tsx      | 44 -------------
 .../Menu/Flyout/PreviewLayout/index.tsx       | 63 +++++++++++++------
 4 files changed, 79 insertions(+), 65 deletions(-)
 create mode 100644 desktop-app/src/renderer/components/ButtonGroup/index.tsx
 delete mode 100644 desktop-app/src/renderer/components/Masonry/MasonryLayout.tsx

diff --git a/desktop-app/src/renderer/components/ButtonGroup/index.tsx b/desktop-app/src/renderer/components/ButtonGroup/index.tsx
new file mode 100644
index 000000000..a99193525
--- /dev/null
+++ b/desktop-app/src/renderer/components/ButtonGroup/index.tsx
@@ -0,0 +1,35 @@
+import { ReactElement } from 'react';
+import cx from 'classnames';
+
+interface Props {
+  buttons: {
+    content: ReactElement;
+    srContent: string;
+    onClick: () => void;
+    isActive: boolean;
+  }[];
+}
+
+export const ButtonGroup = ({ buttons }: Props) => {
+  return (
+    <span className="isolate inline-flex rounded-md shadow-sm">
+      {buttons.map(({ content, srContent, onClick, isActive }, index) => (
+        <button
+          type="button"
+          className={cx(
+            'relative inline-flex items-center px-2 py-2 text-slate-500 ring-1 ring-inset ring-slate-300 hover:bg-slate-300 focus:z-10 dark:text-slate-200 hover:dark:bg-slate-600',
+            {
+              'rounded-l-md': index === 0,
+              'rounded-r-md': index === buttons.length - 1,
+              'bg-slate-200 dark:bg-slate-600': isActive,
+            }
+          )}
+          onClick={onClick}
+        >
+          <span className="sr-only">{srContent}</span>
+          {content}
+        </button>
+      ))}
+    </span>
+  );
+};
diff --git a/desktop-app/src/renderer/components/Divider/index.tsx b/desktop-app/src/renderer/components/Divider/index.tsx
index 4321ba10b..06ecd694a 100644
--- a/desktop-app/src/renderer/components/Divider/index.tsx
+++ b/desktop-app/src/renderer/components/Divider/index.tsx
@@ -1,3 +1,3 @@
 export const Divider = () => (
-  <div className="my-4 w-full border-t border-gray-200 opacity-20" />
+  <div className="my-1 w-full border-t border-gray-400 opacity-30" />
 );
diff --git a/desktop-app/src/renderer/components/Masonry/MasonryLayout.tsx b/desktop-app/src/renderer/components/Masonry/MasonryLayout.tsx
deleted file mode 100644
index 710c52202..000000000
--- a/desktop-app/src/renderer/components/Masonry/MasonryLayout.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { Icon } from '@iconify/react';
-import { PREVIEW_LAYOUTS } from 'common/constants';
-import { useDispatch, useSelector } from 'react-redux';
-import useKeyboardShortcut, {
-  SHORTCUT_CHANNEL,
-} from 'renderer/components/KeyboardShortcutsManager/useKeyboardShortcut';
-import Toggle from 'renderer/components/Toggle';
-import { selectLayout, setLayout } from 'renderer/store/features/renderer';
-
-const MasonryLayout = () => {
-  const layout = useSelector(selectLayout);
-  const dispatch = useDispatch();
-
-  const handleLayout = () => {
-    if (layout === PREVIEW_LAYOUTS.MASONRY)
-      dispatch(setLayout(PREVIEW_LAYOUTS.FLEX));
-    else dispatch(setLayout(PREVIEW_LAYOUTS.MASONRY));
-  };
-
-  useKeyboardShortcut(SHORTCUT_CHANNEL.PREVIEW_LAYOUT, handleLayout);
-
-  return (
-    <div className="flex flex-row items-center justify-start px-4">
-      <span className="w-1/2">Masonry Layout</span>
-      <div className="flex w-fit items-center gap-3 border-l px-5 dark:border-slate-400">
-        <Icon icon="mdi:view-grid-outline" />
-        <Toggle
-          isOn={layout === PREVIEW_LAYOUTS.MASONRY}
-          onChange={(e) => {
-            if (e.target.checked) {
-              dispatch(setLayout(PREVIEW_LAYOUTS.MASONRY));
-            } else {
-              dispatch(setLayout(PREVIEW_LAYOUTS.COLUMN));
-            }
-          }}
-        />
-        <Icon icon="mdi:view-masonry-outline" />
-      </div>
-    </div>
-  );
-};
-
-export default MasonryLayout;
diff --git a/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/PreviewLayout/index.tsx b/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/PreviewLayout/index.tsx
index 921acd542..945d67981 100644
--- a/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/PreviewLayout/index.tsx
+++ b/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/PreviewLayout/index.tsx
@@ -1,20 +1,18 @@
 import { Icon } from '@iconify/react';
-import { PREVIEW_LAYOUTS } from 'common/constants';
+import { PREVIEW_LAYOUTS, PreviewLayout } from 'common/constants';
 import { useDispatch, useSelector } from 'react-redux';
+import { ButtonGroup } from 'renderer/components/ButtonGroup';
 import useKeyboardShortcut, {
   SHORTCUT_CHANNEL,
 } from 'renderer/components/KeyboardShortcutsManager/useKeyboardShortcut';
-import Toggle from 'renderer/components/Toggle';
 import { selectLayout, setLayout } from 'renderer/store/features/renderer';
 
-const PreviewLayout = () => {
+const PreviewLayoutSelector = () => {
   const layout = useSelector(selectLayout);
   const dispatch = useDispatch();
 
-  const handleLayout = () => {
-    if (layout === PREVIEW_LAYOUTS.FLEX)
-      dispatch(setLayout(PREVIEW_LAYOUTS.COLUMN));
-    else dispatch(setLayout(PREVIEW_LAYOUTS.FLEX));
+  const handleLayout = (newLayout: PreviewLayout) => {
+    dispatch(setLayout(newLayout));
   };
 
   useKeyboardShortcut(SHORTCUT_CHANNEL.PREVIEW_LAYOUT, handleLayout);
@@ -22,22 +20,47 @@ const PreviewLayout = () => {
   return (
     <div className="flex flex-row items-center justify-start px-4">
       <span className="w-1/2">Preview Layout</span>
-      <div className="flex w-fit items-center gap-3 border-l px-5 dark:border-slate-400">
-        <Icon icon="radix-icons:layout" />
-        <Toggle
-          isOn={layout === PREVIEW_LAYOUTS.FLEX}
-          onChange={(e) => {
-            if (e.target.checked) {
-              dispatch(setLayout(PREVIEW_LAYOUTS.FLEX));
-            } else {
-              dispatch(setLayout(PREVIEW_LAYOUTS.COLUMN));
-            }
-          }}
+      <div className="flex w-fit items-center gap-3 px-5 ">
+        <ButtonGroup
+          buttons={[
+            {
+              content: (
+                <div className="flex flex-col items-center text-xs">
+                  {' '}
+                  <Icon icon="radix-icons:layout" /> Column
+                </div>
+              ),
+              srContent: 'Horizontal Layout',
+              onClick: () => handleLayout(PREVIEW_LAYOUTS.COLUMN),
+              isActive: layout === PREVIEW_LAYOUTS.COLUMN,
+            },
+            {
+              content: (
+                <div className="flex min-w-12 flex-col items-center text-xs">
+                  {' '}
+                  <Icon icon="lucide:layout-dashboard" /> Flex
+                </div>
+              ),
+              srContent: 'Flex Layout',
+              onClick: () => handleLayout(PREVIEW_LAYOUTS.FLEX),
+              isActive: layout === PREVIEW_LAYOUTS.FLEX,
+            },
+            {
+              content: (
+                <div className="flex flex-col items-center text-xs">
+                  {' '}
+                  <Icon icon="bx:bx-grid-alt" /> Masonry
+                </div>
+              ),
+              srContent: 'Masonry Layout',
+              onClick: () => handleLayout(PREVIEW_LAYOUTS.MASONRY),
+              isActive: layout === PREVIEW_LAYOUTS.MASONRY,
+            },
+          ]}
         />
-        <Icon icon="lucide:layout-dashboard" />
       </div>
     </div>
   );
 };
 
-export default PreviewLayout;
+export default PreviewLayoutSelector;