QMAPS-2359: show disabled panel history, save switch setting in localStorage

src/adapters/search_history.js

@@ -6,6 +6,14 @@ import Intention from 'src/adapters/intention';
 const SEARCH_HISTORY_KEY = 'search_history_v1';
 const HISTORY_SIZE = 100;
 
+export function setHistoryEnabled(value) {
+  set(SEARCH_HISTORY_KEY + '_enabled', value);
+}
+
+export function getHistoryEnabled() {
+  return get(SEARCH_HISTORY_KEY + '_enabled');
+}
+
 export function saveQuery(item) {
   // Delete query if it's already in the list
   deleteQuery(item);

src/components/TopBar.jsx

@@ -8,7 +8,7 @@ import Menu from 'src/panel/Menu';
 import { useConfig, useDevice, useI18n } from 'src/hooks';
 import { handleFocus } from 'src/libs/input';
 import { selectItem, fetchSuggests } from 'src/libs/suggest';
-import { saveQuery } from 'src/adapters/search_history';
+import { getHistoryEnabled, saveQuery } from 'src/adapters/search_history';
 
 const MAPBOX_RESERVED_KEYS = ['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown', '-', '+', '='];
 
@@ -18,7 +18,7 @@ const TopBar = ({ value, setUserInputValue, inputRef, onSuggestToggle, backButto
   const [focused, setFocused] = useState(false);
   const { isMobile } = useDevice();
   const config = useConfig();
-  const searchHistoryConfig = config.searchHistory;
+  const searchHistoryEnabled = getHistoryEnabled();
   const { _ } = useI18n();
 
   // give keyboard focus to the field when typing anywhere
@@ -54,7 +54,7 @@ const TopBar = ({ value, setUserInputValue, inputRef, onSuggestToggle, backButto
 
   const onSelectSuggestion = (item, options) => {
     selectItem(item, options);
-    if (item && searchHistoryConfig?.enabled) {
+    if (item && searchHistoryEnabled) {
       saveQuery(item);
     }
     inputRef.current.blur();
@@ -121,7 +121,7 @@ const TopBar = ({ value, setUserInputValue, inputRef, onSuggestToggle, backButto
             onToggle={onSuggestToggle}
             onSelect={onSelectSuggestion}
             withFeedback
-            withHistory={searchHistoryConfig?.enabled}
+            withHistory={searchHistoryEnabled}
           >
             {({ onKeyDown, onFocus, onBlur, highlightedValue }) => (
               <input

src/libs/colors.js

@@ -17,3 +17,4 @@ export const GREEN_DARK = '#5d9836';
 export const ORANGE_BASE = '#ff851e';
 export const RED_BASE = '#ff1d3c';
 export const RED_DARKER = '#900014';
+export const PURPLE = '#a125be';

src/panel/PanelManager.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import FavoritesPanel from './favorites/FavoritesPanel';
+import HistoryPanel from './history/HistoryPanel';
 import PoiPanel from './poi/PoiPanel';
 import ServicePanel from './service/ServicePanel';
 import CategoryPanel from 'src/panel/category/CategoryPanel';
@@ -153,6 +154,14 @@ const PanelManager = ({ router }) => {
       });
     });
 
+    router.addRoute('History', '/history', () => {
+      setPanelOptions({
+        ActivePanel: HistoryPanel,
+        options: {},
+        panelSize: 'default',
+      });
+    });
+
     if (directionConf.enabled) {
       const isPublicTransportActive =
         (directionConf.publicTransport && directionConf.publicTransport.enabled) ||

src/panel/direction/DirectionInput.jsx

@@ -11,8 +11,8 @@ import Telemetry from 'src/libs/telemetry';
 import { handleFocus } from 'src/libs/input';
 import { IconArrowLeftLine, IconClose } from '@qwant/qwant-ponents';
 import classnames from 'classnames';
-import { useConfig, useDevice, useI18n } from 'src/hooks';
-import { saveQuery } from 'src/adapters/search_history';
+import { useDevice, useI18n } from 'src/hooks';
+import { getHistoryEnabled, saveQuery } from 'src/adapters/search_history';
 
 const DirectionInput = ({
   isLoading,
@@ -26,7 +26,7 @@ const DirectionInput = ({
 }) => {
   const [readOnly, setReadOnly] = useState(false);
   const { isMobile } = useDevice();
-  const searchHistoryConfig = useConfig('searchHistory');
+  const searchHistoryEnabled = getHistoryEnabled();
   const { _ } = useI18n();
 
   useEffect(() => {
@@ -73,7 +73,7 @@ const DirectionInput = ({
     } else {
       const name = selectedPoi.type === 'latlon' ? selectedPoi.address.street : selectedPoi.name;
       onChangePoint(name, selectedPoi);
-      if (searchHistoryConfig?.enabled) {
+      if (searchHistoryEnabled) {
         saveQuery(selectedPoi);
       }
     }
@@ -92,7 +92,7 @@ const DirectionInput = ({
           outputNode={document.querySelector('.direction-autocomplete_suggestions')}
           withGeoloc={withGeoloc}
           onSelect={selectItem}
-          withHistory={searchHistoryConfig?.enabled}
+          withHistory={searchHistoryEnabled}
           hide={otherPoint}
         >
           {({ onKeyDown, onFocus, onBlur, highlightedValue }) => (

src/panel/history/HistoryPanel.jsx

@@ -0,0 +1,50 @@
+/* globals _ */
+import React, { useState } from 'react';
+import Panel from 'src/components/ui/Panel';
+import { Flex, Switch, Text } from '@qwant/qwant-ponents';
+import { setHistoryEnabled, getHistoryEnabled } from 'src/adapters/search_history';
+
+const HistoryPanel = () => {
+  const [isChecked, setIsChecked] = useState(getHistoryEnabled());
+  const close = () => {
+    window.app.navigateTo('/');
+  };
+
+  const onChange = e => {
+    setIsChecked(e.target.checked);
+    setHistoryEnabled(e.target.checked);
+  };
+
+  return (
+    <Panel
+      resizable
+      renderHeader={
+        <div className="history-header u-text--smallTitle u-center">
+          {_('My history', 'history panel')}
+        </div>
+      }
+      minimizedTitle={_('Show history', 'history panel')}
+      onClose={close}
+      className="history_panel"
+    >
+      <Flex>
+        <Text typo="body-2" color="secondary" as="label">
+          {_(
+            'Your history is disabled. If you enable it, it will only be visible to you on this device',
+            'history panel'
+          )}
+          &nbsp;
+          <a href="#">{_('Learn more')}</a>
+        </Text>
+        <Switch
+          name="history_enabled"
+          id="history_enabled"
+          checked={isChecked}
+          onChange={onChange}
+        />
+      </Flex>
+    </Panel>
+  );
+};
+
+export default HistoryPanel;

src/panel/menu/AppMenu.jsx

@@ -3,14 +3,15 @@ import PropTypes from 'prop-types';
 import MenuItem from './MenuItem';
 import Telemetry from 'src/libs/telemetry';
 import { Divider } from 'src/components/ui';
-import { IconHeart, IconEdit, IconBug } from 'src/components/ui/icons';
+import { IconHeart, IconHistory, IconEdit, IconBug } from 'src/components/ui/icons';
 import { IconLight, IconApps } from '@qwant/qwant-ponents';
-import { PINK_DARK, ACTION_BLUE_BASE } from 'src/libs/colors';
+import { PINK_DARK, ACTION_BLUE_BASE, PURPLE } from 'src/libs/colors';
 import { useConfig, useI18n } from 'src/hooks';
 
 const AppMenu = ({ close, openProducts }) => {
   const { baseUrl } = useConfig('system');
   const { getLocalizedUrl, _ } = useI18n();
+  const searchHistoryConfig = useConfig('searchHistory');
 
   const navTo = (url, options) => {
     close();
@@ -30,6 +31,18 @@ const AppMenu = ({ close, openProducts }) => {
       >
         {_('My favorites', 'menu')}
       </MenuItem>
+      {searchHistoryConfig?.enabled && (
+        <MenuItem
+          href={baseUrl + 'history/'}
+          onClick={e => {
+            e.preventDefault();
+            navTo('/history/');
+          }}
+          icon={<IconHistory width={16} fill={PURPLE} />}
+        >
+          {_('My search history', 'menu')}
+        </MenuItem>
+      )}
       <MenuItem
         href={getLocalizedUrl('aboutMapsToS')}
         outsideLink

src/scss/app.scss

@@ -24,6 +24,7 @@ $font_system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetic
 @import "includes/panels/service_panel";
 @import "includes/panels/poi_panel";
 @import "includes/panels/favorite_panel";
+@import "includes/panels/history_panel";
 @import "includes/panels/categories";
 
 // modals

src/scss/includes/panels/favorite_panel.scss

@@ -1,4 +1,3 @@
-
 @media (min-width: 641px){
   .favorite-header {
     margin: 8px 0;
@@ -55,5 +54,4 @@
   white-space: nowrap;
   color: $primary_text;
   font-weight: bold;
-}
-
+}

src/scss/includes/panels/history_panel.scss

@@ -0,0 +1,14 @@
+@media (min-width: 641px){
+  .history_panel {
+    min-height: calc(100vh - (92px + 40px));
+  }
+  .history-header {
+    margin: 8px 0;
+  }
+}
+
+.history_panel {
+  .panel-content {
+    padding: 12px;
+  }
+}