merge && backwards functionality working (kind of) WIP

ui/component/buttonNavigation/index.js

@@ -0,0 +1,3 @@
+import ButtonNavigation from './view';
+
+export default ButtonNavigation;

ui/component/buttonNavigation/view.jsx

@@ -0,0 +1,67 @@
+// @flow
+import React, { useState, useCallback } from 'react';
+import * as ICONS from 'constants/icons';
+import Button from 'component/button';
+
+type Props = {
+  isBackward: boolean,
+  history: {
+    entries: { key: string, title: string }[],
+    go: number => void,
+    goBack: () => void,
+    goForward: () => void,
+    index: number,
+    length: number,
+    location: { pathname: string },
+    push: string => void,
+  },
+};
+
+const ButtonNavigation = (props: Props) => {
+  const { isBackward, history } = props;
+  const [showHistory, setShowHistory] = useState(false);
+
+  const makeItem = useCallback(
+    (entry, index) => {
+      const goArg = index - history.index;
+      console.log(`index: ${index}, currentIndex: ${history.index}, goArg: ${goArg}, title: ${entry.title}`);
+      return (
+        <li
+          key={entry.key}
+          onClick={() => {
+            setShowHistory(!showHistory);
+            history.go(goArg);
+          }}
+        >
+          {entry.title}
+        </li>
+      );
+    },
+    [history, showHistory]
+  );
+
+  return (
+    <div>
+      <Button
+        className="header__navigation-item header__navigation-item--back"
+        description={__('Navigate back')}
+        onClick={() => history.goBack()}
+        onContextMenu={e => {
+          setShowHistory(!showHistory);
+          // the following three lines prevent the regular context menu (right click menu) from appearing
+          e.preventDefault();
+          e.stopPropagation();
+          return false; // returning false disables the regular context menu
+        }}
+        icon={isBackward ? ICONS.ARROW_LEFT : ICONS.ARROW_RIGHT}
+        iconSize={18}
+      />
+      {showHistory && (
+        <ul className={'header__navigaiton-dropdown'} style={{ position: 'absolute' }}>
+          {history.entries.slice(1, history.length).map(makeItem)}
+        </ul>
+      )}
+    </div>
+  );
+};
+export default ButtonNavigation;

ui/component/header/view.jsx

@@ -11,6 +11,7 @@ import WunderBar from 'component/wunderbar';
 import Icon from 'component/common/icon';
 import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import Tooltip from 'component/common/tooltip';
+import ButtonNavigation from 'component/buttonNavigation';
 // @if TARGET='app'
 import { IS_MAC } from 'component/app/view';
 // @endif
@@ -18,7 +19,15 @@ import { IS_MAC } from 'component/app/view';
 type Props = {
   balance: string,
   roundedBalance: number,
-  history: { push: string => void, goBack: () => void, goForward: () => void, location: { pathname: string } },
+  history: {
+    entities: {}[],
+    goBack: () => void,
+    goForward: () => void,
+    index: number,
+    length: number,
+    location: { pathname: string },
+    push: string => void,
+  },
   currentTheme: string,
   automaticDarkModeEnabled: boolean,
   setClientSetting: (string, boolean | string) => void,
@@ -105,13 +114,7 @@ const Header = (props: Props) => {
           {/* @if TARGET='app' */}
           {!authHeader && (
             <div className="header__navigation-arrows">
-              <Button
+              <ButtonNavigation isBackward history={history} />
-                className="header__navigation-item header__navigation-item--back"
-                description={__('Navigate back')}
-                onClick={() => history.goBack()}
-                icon={ICONS.ARROW_LEFT}
-                iconSize={18}
-              />
 
               <Button
                 className="header__navigation-item header__navigation-item--forward"

ui/scss/component/_header.scss

@@ -147,3 +147,17 @@
 .header__navigation-item--balance {
   margin: 0 var(--spacing-medium);
 }
+
+.header__navigaiton-dropdown {
+  list-style-type: none;
+  background-color: var(--color-header-background);
+
+  li {
+    padding: 2px 5px;
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--color-menu-background--active);
+    }
+  }
+}

ui/store.js

@@ -7,7 +7,7 @@ import { createFilter, createBlacklistFilter } from 'redux-persist-transform-fil
 import localForage from 'localforage';
 import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
-import { createHashHistory, createBrowserHistory } from 'history';
+import { createMemoryHistory, createBrowserHistory } from 'history';
 import { routerMiddleware } from 'connected-react-router';
 import createRootReducer from './reducers';
 import { buildSharedStateMiddleware, ACTIONS as LBRY_REDUX_ACTIONS } from 'lbry-redux';
@@ -96,12 +96,19 @@ const persistOptions = {
 
 let history;
 // @if TARGET='app'
-history = createHashHistory();
+history = createMemoryHistory();
 // @endif
 // @if TARGET='web'
 history = createBrowserHistory();
 // @endif
 
+history.listen((l, a) => {
+  console.log('document.title: ', document.title);
+  console.log('history: ', history);
+  document.oncontextmenu = () => false;
+  l.title = document.title;
+});
+
 const triggerSharedStateActions = [
   ACTIONS.CHANNEL_SUBSCRIBE,
   ACTIONS.CHANNEL_UNSUBSCRIBE,