fix(ui): truncate session tabs when over 10

frontend/app/components/Session/Player/LivePlayer/LivePlayerSubHeader.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { Icon, Tooltip } from 'UI';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
-import Tab from 'Components/Session/Player/SharedComponents/Tab';
+import SessionTabs from 'Components/Session/Player/SharedComponents/SessionTabs';
 
 function SubHeader() {
   const { store } = React.useContext(PlayerContext);
-  const { currentTab, tabs = new Set('back-compat'), location: currentLocation = 'loading...' } = store.get();
+  const { location: currentLocation = 'loading...' } = store.get();
 
   const location = currentLocation.length > 70
         ? `${currentLocation.slice(0, 70)}...`
@@ -15,11 +15,7 @@ function SubHeader() {
   return (
     <>
       <div className="w-full px-4 pt-2 flex items-center border-b min-h-3">
-        {Array.from(tabs).map((tab, i) => (
+        <SessionTabs />
-          <React.Fragment key={tab}>
-            <Tab i={i} tab={tab} currentTab={tabs.length === 1 ? tab : currentTab} />
-          </React.Fragment>
-        ))}
       </div>
       {location && (
         <div className={'w-full bg-white border-b border-gray-light'}>

frontend/app/components/Session/Player/SharedComponents/SessionTabs.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import cn from 'classnames';
+import Tab from './Tab';
+import { PlayerContext } from 'Components/Session/playerContext';
+import { useModal } from 'Components/Modal';
+
+interface Props {
+  tabs: { tab: string, idx: number}[];
+  currentTab: string;
+  changeTab: (tab: string) => void;
+  hideModal: () => void;
+}
+
+function Modal({ tabs, currentTab, changeTab, hideModal }: Props) {
+  return (
+    <div className={'h-screen overflow-y-scroll'}>
+      <div className={'text-2xl font-semibold p-4'}>{tabs.length} Tabs</div>
+      {tabs.map((tab, i) => (
+        <div
+          key={tab.idx}
+          onClick={() => {
+            changeTab(tab.tab);
+            hideModal();
+          }}
+          className={cn(
+            currentTab === tab.tab ? 'font-semibold ' : 'text-disabled-text',
+            'cursor-pointer border-b p-4 hover:bg-active-blue'
+          )}
+        >
+          Tab {i + 1}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function SessionTabs() {
+  const { showModal, hideModal } = useModal();
+  const { player, store } = React.useContext(PlayerContext);
+  const { tabs = new Set('back-compat'), currentTab } = store.get();
+  const tabsArr = Array.from(tabs).map((tab, idx) => ({ tab, idx }));
+  const shouldTruncate = tabsArr.length > 10;
+  const actualTabs = shouldTruncate ? tabsArr.slice(0, 10) : tabsArr;
+
+  const shownTabs = actualTabs.findIndex(el => el.tab === currentTab) !== -1
+    ? actualTabs
+    : actualTabs.concat({ tab: currentTab, idx: tabsArr.findIndex(tEl => tEl.tab === currentTab) });
+  const changeTab = (tab: string) => {
+    player.changeTab(tab);
+  };
+
+  const openModal = () => {
+    showModal(
+      <Modal hideModal={hideModal} currentTab={currentTab} changeTab={changeTab} tabs={tabsArr} />,
+      {
+        right: true,
+      }
+    );
+  };
+  return (
+    <>
+      {shownTabs.map((tab, i) => (
+        <React.Fragment key={tab.tab}>
+          <Tab
+            i={tab.idx}
+            tab={tab.tab}
+            currentTab={actualTabs.length === 1 ? tab.tab : currentTab}
+            changeTab={changeTab}
+          />
+        </React.Fragment>
+      ))}
+      {shouldTruncate ? (
+        <>
+          {tabsArr.length > 11 ? (
+            <div
+              onClick={openModal}
+              className={cn(
+                'self-end py-1 px-4 text-sm',
+                'cursor-pointer bg-active-blue text-blue',
+                '!border-t-transparent !border-l-transparent !border-r-transparent'
+              )}
+            >
+              +{tabsArr.length - 11} More
+            </div>
+          ) : null}
+        </>
+      ) : null}
+    </>
+  );
+}
+
+export default SessionTabs;

frontend/app/components/Session_/Subheader.js

@@ -12,7 +12,7 @@ import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import AutoplayToggle from 'Shared/AutoplayToggle';
 import { connect } from 'react-redux';
-import Tab from 'Components/Session/Player/SharedComponents/Tab';
+import SessionTabs from 'Components/Session/Player/SharedComponents/SessionTabs'
 
 const localhostWarn = (project) => project + '_localhost_warn';
 
@@ -21,7 +21,7 @@ function SubHeader(props) {
     const defaultLocalhostWarn = localStorage.getItem(localhostWarnKey) !== '1';
     const [showWarningModal, setWarning] = React.useState(defaultLocalhostWarn);
     const { player, store } = React.useContext(PlayerContext);
-    const { width, height, endTime, location: currentLocation = 'loading...', tabs = new Set('back-compat'), currentTab } = store.get();
+    const { width, height, endTime, location: currentLocation = 'loading...', } = store.get();
 
     const enabledIntegration = useMemo(() => {
         const { integrations } = props;
@@ -101,16 +101,7 @@ function SubHeader(props) {
                         </div>
                     </div>
                 ) : null}
-                {Array.from(tabs).map((tab, i) => (
+                <SessionTabs />
-                    <React.Fragment key={tab}>
-                        <Tab
-                            i={i}
-                            tab={tab}
-                            currentTab={tabs.length === 1 ? tab : currentTab}
-                            changeTab={(changeTo) => player.changeTab(changeTo)}
-                        />
-                    </React.Fragment>
-                ))}
                 <div
                     className="ml-auto text-sm flex items-center color-gray-medium gap-2"
                     style={{ width: 'max-content' }}