added feat: toolbar to toggle b/w multiple devices

desktop-app/src/renderer/components/Previewer/IndividualLayoutToolBar/index.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { Tab, Tabs, TabList } from 'react-tabs';
+import { Icon } from '@iconify/react';
+import cx from 'classnames';
+import { setLayout } from 'renderer/store/features/renderer';
+import { PREVIEW_LAYOUTS } from 'common/constants';
+import { Device as IDevice } from 'common/deviceList';
+import './styles.css';
+
+interface Props {
+  individualDevice: IDevice;
+  setIndividualDevice: (device: IDevice) => void;
+  devices: IDevice[];
+}
+
+const IndividualLayoutToolbar = ({
+  individualDevice,
+  setIndividualDevice,
+  devices,
+}: Props) => {
+  const dispatch = useDispatch();
+  const [activeTab, setActiveTab] = useState(0);
+
+  const onTabClick = (newTabIndex: number) => {
+    setActiveTab(newTabIndex);
+    setIndividualDevice(devices[newTabIndex]);
+  };
+
+  const isActive = (idx: number) => activeTab === idx;
+  const handleCloseBtn = () => dispatch(setLayout(PREVIEW_LAYOUTS.COLUMN));
+
+  useEffect(() => {
+    const activeTabIndex = devices.findIndex(
+      (device) => device.id === individualDevice.id
+    );
+    setActiveTab(activeTabIndex);
+  }, [individualDevice, devices]);
+
+  return (
+    <div className="my-4 ml-12 mr-4 flex justify-between">
+      <Tabs
+        onSelect={onTabClick}
+        selectedIndex={activeTab}
+        className={cx('react-tabs flex')}
+      >
+        <TabList
+          className={cx(
+            'custom-scrollbar flex gap-1  overflow-x-auto border-b border-slate-400/60 dark:border-white'
+          )}
+        >
+          {devices.map((device, idx) => (
+            <Tab
+              className={cx(
+                'border-1 bottom-auto flex flex-shrink-0 cursor-pointer items-center rounded-t-md border-gray-300 px-4',
+                {
+                  'bg-slate-400/60': isActive(idx),
+                  'dark:bg-slate-100/90': isActive(idx),
+                  'text-light-normal': isActive(idx),
+                }
+              )}
+              key={device.id}
+            >
+              {device.name}
+            </Tab>
+          ))}
+        </TabList>
+      </Tabs>
+      <div className="relative top-1 ml-6">
+        <Icon
+          icon="carbon:close-outline"
+          className="cursor-pointer"
+          height={20}
+          onClick={handleCloseBtn}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default IndividualLayoutToolbar;

desktop-app/src/renderer/components/Previewer/IndividualLayoutToolBar/styles.css

@@ -0,0 +1,26 @@
+.custom-scrollbar::-webkit-scrollbar,
+.custom-scrollbar::-webkit-scrollbar:hover,
+.dark .custom-scrollbar::-webkit-scrollbar,
+.dark .custom-scrollbar::-webkit-scrollbar:hover {
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb,
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(148, 163, 184, 0.7);
+}
+
+.dark .custom-scrollbar::-webkit-scrollbar {
+  background-color: rgba(148, 163, 184, 0.6);
+}
+
+.dark .custom-scrollbar::-webkit-scrollbar-thumb,
+.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(241, 245, 249, 0.8);
+}

desktop-app/src/renderer/components/Previewer/index.tsx

@@ -6,11 +6,12 @@ import {
   selectDockPosition,
   selectIsDevtoolsOpen,
 } from 'renderer/store/features/devtools';
-import { selectLayout } from 'renderer/store/features/renderer';
 import { getDevicesMap, Device as IDevice } from 'common/deviceList';
 import { useState } from 'react';
+import { selectLayout } from 'renderer/store/features/renderer';
 import Device from './Device';
 import DevtoolsResizer from './DevtoolsResizer';
+import IndividualLayoutToolbar from './IndividualLayoutToolBar';
 
 const Previewer = () => {
   const activeSuite = useSelector(selectActiveSuite);
@@ -24,22 +25,24 @@ const Previewer = () => {
 
   return (
     <div className="h-full">
+      {isIndividualLayout && (
+        <IndividualLayoutToolbar
+          individualDevice={individualDevice}
+          setIndividualDevice={setIndividualDevice}
+          devices={devices}
+        />
+      )}
       <div
-        className={cx(
-          'flex h-full',
-          {
-            'flex-col': dockPosition === DOCK_POSITION.BOTTOM,
-            'flex-row': dockPosition === DOCK_POSITION.RIGHT,
-          },
-          {
-            'justify-between': !isIndividualLayout,
-            'justify-center': isIndividualLayout,
-          }
-        )}
+        className={cx('flex h-full', {
+          'flex-col': dockPosition === DOCK_POSITION.BOTTOM,
+          'flex-row': dockPosition === DOCK_POSITION.RIGHT,
+          'justify-between': !isIndividualLayout,
+        })}
       >
         <div
           className={cx('flex h-full gap-4 overflow-auto p-4', {
             'flex-wrap': layout === PREVIEW_LAYOUTS.FLEX,
+            'justify-center': isIndividualLayout,
           })}
         >
           {isIndividualLayout ? (