Merge pull request #1311 from saiTharunDusa/master

Fixed the issue #1206

desktop-app/package.json

@@ -101,6 +101,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.7",
+    "react-masonry-component": "^6.3.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.3.0",
     "react-tabs": "^6.0.2",

desktop-app/release/app/yarn.lock

@@ -470,6 +470,11 @@ [email protected]:
     jsonfile "^3.0.0"
     universalify "^0.1.0"
 
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"

desktop-app/src/common/constants.ts

@@ -10,6 +10,7 @@ export const PREVIEW_LAYOUTS = {
   COLUMN: 'COLUMN',
   FLEX: 'FLEX',
   INDIVIDUAL: 'INDIVIDUAL',
+  MASONRY: 'MASONRY',
 } as const;
 
 export type PreviewLayout =

desktop-app/src/renderer/components/Masonry/MasonryLayout.tsx

@@ -0,0 +1,44 @@
+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;