Add new tab dropdown

lib/components/header.tsx

@@ -81,9 +81,13 @@ export default class Header extends React.PureComponent<HeaderProps> {
     const props = getTabsProps(this.props, {
       tabs: this.props.tabs,
       borderColor: this.props.borderColor,
+      backgroundColor: this.props.backgroundColor,
       onClose: this.props.onCloseTab,
       onChange: this.onChangeIntent,
-      fullScreen: this.props.fullScreen
+      fullScreen: this.props.fullScreen,
+      defaultProfile: this.props.defaultProfile,
+      profiles: this.props.profiles.asMutable({deep: true}),
+      openNewTab: this.props.openNewTab
     });
     const {borderColor} = props;
     let title = 'Hyper';

lib/components/new-tab.tsx

@@ -0,0 +1,147 @@
+import React, {useRef, useState} from 'react';
+import {VscChevronDown} from '@react-icons/all-files/vsc/VscChevronDown';
+import type {configOptions} from '../config';
+import useClickAway from 'react-use/lib/useClickAway';
+
+interface Props {
+  defaultProfile: string;
+  profiles: configOptions['profiles'];
+  openNewTab: (name: string) => void;
+  backgroundColor: string;
+  borderColor: string;
+  tabsVisible: boolean;
+}
+const isMac = /Mac/.test(navigator.userAgent);
+
+const DropdownButton = ({defaultProfile, profiles, openNewTab, backgroundColor, borderColor, tabsVisible}: Props) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const ref = useRef(null);
+
+  const toggleDropdown = () => {
+    setDropdownOpen(!dropdownOpen);
+  };
+
+  useClickAway(ref, () => {
+    setDropdownOpen(false);
+  });
+
+  return (
+    <div
+      ref={ref}
+      title="New Tab"
+      className={`new_tab ${tabsVisible ? 'tabs_visible' : 'tabs_hidden'}`}
+      onClick={toggleDropdown}
+      onDoubleClick={(e) => e.stopPropagation()}
+      onBlur={() => setDropdownOpen(false)}
+    >
+      <VscChevronDown style={{verticalAlign: 'middle'}} />
+
+      {dropdownOpen && (
+        <ul
+          key="dropdown"
+          className="profile_dropdown"
+          style={{
+            borderColor,
+            backgroundColor
+          }}
+        >
+          {profiles.map((profile) => (
+            <li
+              key={profile.name}
+              onClick={() => {
+                openNewTab(profile.name);
+                setDropdownOpen(false);
+              }}
+              className={`profile_dropdown_item ${
+                profile.name === defaultProfile && profiles.length > 1 ? 'profile_dropdown_item_default' : ''
+              }`}
+            >
+              {profile.name}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <style jsx>{`
+        .profile_dropdown {
+          border-width: 1px;
+          border-style: solid;
+          border-bottom-width: 0px;
+          border-right-width: 0px;
+          position: absolute;
+          top: 33px;
+          right: 0px;
+          z-index: 1000;
+          padding: 0px;
+          margin: 0px;
+          list-style-type: none;
+          white-space: nowrap;
+          min-width: 120px;
+        }
+
+        .profile_dropdown_item {
+          padding: 0px 20px;
+          height: 34px;
+          line-height: 34px;
+          cursor: pointer;
+          font-size: 12px;
+          color: #fff;
+          background-color: transparent;
+          border-width: 0px;
+          border-style: solid;
+          border-color: transparent;
+          border-bottom-width: 1px;
+          border-bottom-style: solid;
+          border-bottom-color: ${borderColor};
+          text-align: start;
+          text-transform: capitalize;
+        }
+
+        .profile_dropdown_item:hover {
+          background-color: ${borderColor};
+        }
+
+        .profile_dropdown_item_default {
+          font-weight: bold;
+        }
+
+        .new_tab {
+          background: transparent;
+          color: #fff;
+          border-left: 1px;
+          border-bottom: 1px;
+          border-left-style: solid;
+          border-bottom-style: solid;
+          border-left-width: 1px;
+          border-bottom-width: 1px;
+          cursor: pointer;
+          font-size: 12px;
+          height: 34px;
+          line-height: 34px;
+          padding: 0 16px;
+          position: relative;
+          text-align: center;
+          -webkit-user-select: none;
+          -webkit-app-region: ${isMac ? 'drag' : ''};
+          top: ${isMac ? '0px' : '34px'};
+        }
+
+        .tabs_visible {
+          border-color: ${borderColor};
+        }
+
+        .tabs_hidden {
+          border-color: transparent;
+          position: absolute;
+          right: 0;
+        }
+
+        .tabs_hidden:hover {
+          border-color: ${borderColor};
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default DropdownButton;

lib/components/tabs.tsx

@@ -4,6 +4,7 @@ import {decorate, getTabProps} from '../utils/plugins';
 
 import Tab_ from './tab';
 import type {TabsProps} from '../hyper';
+import DropdownButton from './new-tab';
 
 const Tab = decorate(Tab_, 'Tab');
 const isMac = /Mac/.test(navigator.userAgent);
@@ -45,6 +46,7 @@ export default class Tabs extends React.PureComponent<TabsProps> {
               )
             ]
           : null}
+        <DropdownButton {...this.props} tabsVisible={tabs.length > 1} />
         {this.props.customChildren}
 
         <style jsx>{`
@@ -59,6 +61,8 @@ export default class Tabs extends React.PureComponent<TabsProps> {
             -webkit-user-select: none;
             -webkit-app-region: ${isMac ? 'drag' : ''};
             top: ${isMac ? '0px' : '34px'};
+            display: flex;
+            flex-flow: row;
           }
 
           .tabs_hiddenNav {
@@ -73,13 +77,15 @@ export default class Tabs extends React.PureComponent<TabsProps> {
             white-space: nowrap;
             padding-left: 76px;
             padding-right: 76px;
+            flex-grow: 1;
           }
 
           .tabs_list {
             max-height: 34px;
             display: flex;
             flex-flow: row;
             margin-left: ${isMac ? '76px' : '0'};
+            flex-grow: 1;
           }
 
           .tabs_fullScreen {

lib/containers/header.ts

@@ -5,6 +5,7 @@ import {closeTab, changeTab, maximize, openHamburgerMenu, unmaximize, minimize,
 import {connect} from '../utils/plugins';
 import {getRootGroups} from '../selectors';
 import type {HyperState, HyperDispatch, ITab} from '../hyper';
+import {requestTermGroup} from '../actions/term-groups';
 
 const isMac = /Mac/.test(navigator.userAgent);
 
@@ -38,7 +39,9 @@ const mapStateToProps = (state: HyperState) => {
     maximized: state.ui.maximized,
     fullScreen: state.ui.fullScreen,
     showHamburgerMenu: state.ui.showHamburgerMenu,
-    showWindowControls: state.ui.showWindowControls
+    showWindowControls: state.ui.showWindowControls,
+    defaultProfile: state.ui.defaultProfile,
+    profiles: state.ui.profiles
   };
 };
 
@@ -70,6 +73,10 @@ const mapDispatchToProps = (dispatch: HyperDispatch) => {
 
     close: () => {
       dispatch(close());
+    },
+
+    openNewTab: (profile: string) => {
+      dispatch(requestTermGroup(undefined, profile));
     }
   };
 };

lib/hyper.d.ts

@@ -239,9 +239,13 @@ export type ITab = {
 export type TabsProps = {
   tabs: ITab[];
   borderColor: string;
+  backgroundColor: string;
   onChange: (uid: string) => void;
   onClose: (uid: string) => void;
   fullScreen: boolean;
+  defaultProfile: string;
+  profiles: configOptions['profiles'];
+  openNewTab: (profile: string) => void;
 } & extensionProps;
 
 export type NotificationProps = {

package.json

@@ -47,6 +47,7 @@
     "react-deep-force-update": "2.1.3",
     "react-dom": "17.0.2",
     "react-redux": "7.2.8",
+    "react-use": "^17.4.0",
     "redux": "4.2.1",
     "redux-thunk": "2.4.2",
     "registry-url": "^6.0.1",