Merge branch 'frontend-cleanup-sidebar'

Author: thisconnect

frontends/web/src/components/layout/header.tsx

@@ -35,7 +35,7 @@ export const Header = ({
 }: Props) => {
   const { t } = useTranslation();
 
-  const { guideShown, guideExists, toggleGuide, toggleSidebar, sidebarStatus } = useContext(AppContext);
+  const { guideShown, guideExists, toggleGuide, toggleSidebar } = useContext(AppContext);
 
   const toggle = (e: React.SyntheticEvent) => {
     e.preventDefault();
@@ -45,9 +45,8 @@ export const Header = ({
     return false;
   };
 
-
   return (
-    <div className={[style.container, sidebarStatus ? style[sidebarStatus] : ''].join(' ')}>
+    <div className={style.container}>
       <div className={style.header}>
         <div className={`hide-on-small ${style.sidebarToggler} ${hideSidebarToggler ? style.hideSidebarToggler : ''}`} onClick={toggleSidebar}>
           <MenuDark className="show-in-lightmode" />

frontends/web/src/components/sidebar/sidebar.module.css

@@ -198,7 +198,7 @@ a.sidebarActive .single img,
 }
 
 @media (min-width: 1200px) {
-    .sidebarContainer:not(.forceHide) .sidebar {
+    .sidebar {
         position: relative;
         margin-left: 0;
         width: var(--sidebar-width-large);

frontends/web/src/components/sidebar/sidebar.tsx

@@ -81,7 +81,7 @@ const Sidebar = ({
   const { t } = useTranslation();
   const { pathname } = useLocation();
   const [ canUpgrade, setCanUpgrade ] = useState(false);
-  const { activeSidebar, sidebarStatus, toggleSidebar } = useContext(AppContext);
+  const { activeSidebar, toggleSidebar } = useContext(AppContext);
 
   const deviceIDs: string[] = Object.keys(devices);
 
@@ -118,30 +118,27 @@ const Sidebar = ({
 
     const handleTouchMove = (event: TouchEvent) => {
       if (
-        sidebarStatus !== 'forceHidden'
-        && event.changedTouches
+        event.changedTouches
         && event.changedTouches.length
       ) {
         swipe.active = true;
       }
     };
 
     const handleTouchEnd = (event: TouchEvent) => {
-      if (sidebarStatus !== 'forceHidden') {
-        const touch = event.changedTouches[0];
-        const travelX = Math.abs(touch.clientX - swipe.x);
-        const travelY = Math.abs(touch.clientY - swipe.y);
-        const validSwipe = window.innerWidth <= 901 && swipe.active && travelY < 100 && travelX > 70;
-        if (
-          (!activeSidebar && validSwipe && swipe.x < 60)
-          || (activeSidebar && validSwipe && swipe.x > 230)
-        ) {
-          toggleSidebar();
-        }
-        swipe.x = 0;
-        swipe.y = 0;
-        swipe.active = false;
+      const touch = event.changedTouches[0];
+      const travelX = Math.abs(touch.clientX - swipe.x);
+      const travelY = Math.abs(touch.clientY - swipe.y);
+      const validSwipe = window.innerWidth <= 901 && swipe.active && travelY < 100 && travelX > 70;
+      if (
+        (!activeSidebar && validSwipe && swipe.x < 60)
+        || (activeSidebar && validSwipe && swipe.x > 230)
+      ) {
+        toggleSidebar();
       }
+      swipe.x = 0;
+      swipe.y = 0;
+      swipe.active = false;
     };
 
     document.addEventListener('touchstart', handleTouchStart);
@@ -152,7 +149,7 @@ const Sidebar = ({
       document.removeEventListener('touchmove', handleTouchMove);
       document.removeEventListener('touchend', handleTouchEnd);
     };
-  }, [activeSidebar, sidebarStatus, toggleSidebar]);
+  }, [activeSidebar, toggleSidebar]);
 
   const keystores = useKeystores();
 
@@ -163,12 +160,11 @@ const Sidebar = ({
     }
   };
 
-  const hidden = sidebarStatus === 'forceHidden';
   const accountsByKeystore = getAccountsByKeystore(accounts);
   const userInSpecificAccountExchangePage = (pathname.startsWith('/exchange'));
 
   return (
-    <div className={[style.sidebarContainer, hidden ? style.forceHide : ''].join(' ')}>
+    <div className={style.sidebarContainer}>
       <div key="overlay" className={[style.sidebarOverlay, activeSidebar ? style.active : ''].join(' ')} onClick={toggleSidebar}></div>
       <nav className={[style.sidebar, activeSidebar ? style.forceShow : ''].join(' ')}>
         <div key="app-logo" className={style.sidebarLogoContainer}>

frontends/web/src/contexts/AppContext.tsx

@@ -16,7 +16,6 @@
 
 import { Dispatch, SetStateAction, createContext } from 'react';
 
-export type TSidebarStatus = '' | 'forceHidden'
 export type TChartDisplay = 'week' | 'month' | 'year' | 'all';
 
 type AppContextProps = {
@@ -27,12 +26,10 @@ type AppContextProps = {
     isTesting: boolean;
     isDevServers: boolean;
     nativeLocale: string;
-    sidebarStatus: TSidebarStatus;
     firmwareUpdateDialogOpen: boolean;
     chartDisplay: TChartDisplay;
     setActiveSidebar: Dispatch<SetStateAction<boolean>>;
     setGuideExists: Dispatch<SetStateAction<boolean>>;
-    setSidebarStatus: Dispatch<SetStateAction<TSidebarStatus>>;
     setHideAmounts: Dispatch<SetStateAction<boolean>>;
     setChartDisplay: Dispatch<SetStateAction<TChartDisplay>>;
     setFirmwareUpdateDialogOpen: Dispatch<SetStateAction<boolean>>;

frontends/web/src/contexts/AppProvider.tsx

@@ -22,7 +22,7 @@ import { useDefault } from '@/hooks/default';
 import { getNativeLocale } from '@/api/nativelocale';
 import { getDevServers, getTesting } from '@/api/backend';
 import { i18nextFormat } from '@/i18n/utils';
-import type { TChartDisplay, TSidebarStatus } from './AppContext';
+import type { TChartDisplay } from './AppContext';
 
 type TProps = {
     children: ReactNode;
@@ -36,7 +36,6 @@ export const AppProvider = ({ children }: TProps) => {
   const [guideExists, setGuideExists] = useState(false);
   const [hideAmounts, setHideAmounts] = useState(false);
   const [activeSidebar, setActiveSidebar] = useState(false);
-  const [sidebarStatus, setSidebarStatus] = useState<TSidebarStatus>('');
   const [chartDisplay, setChartDisplay] = useState<TChartDisplay>('all');
   const [firmwareUpdateDialogOpen, setFirmwareUpdateDialogOpen] = useState(false);
 
@@ -80,11 +79,9 @@ export const AppProvider = ({ children }: TProps) => {
         isTesting,
         isDevServers,
         nativeLocale,
-        sidebarStatus,
         chartDisplay,
         setActiveSidebar,
         setGuideExists,
-        setSidebarStatus,
         setHideAmounts,
         setChartDisplay,
         toggleHideAmounts,

frontends/web/src/routes/device/bitbox01/bitbox01.jsx

@@ -73,11 +73,6 @@ class Device extends Component {
 
   onDeviceStatusChanged = () => {
     apiGet('devices/' + this.props.deviceID + '/status').then(deviceStatus => {
-      if (['seeded', 'initialized'].includes(deviceStatus)) {
-        this.context.setSidebarStatus('');
-      } else {
-        this.context.setSidebarStatus('forceHidden');
-      }
       this.setState({ deviceStatus });
     });
   };