Merge branch 'frontend-always-show-device-settings'

frontends/web/src/app.tsx

@@ -68,6 +68,7 @@ export const App = () => {
     const currentURL = window.location.hash.replace(/^#/, '');
     const isIndex = currentURL === '' || currentURL === '/';
     const inAccounts = currentURL.startsWith('/account/');
+    const deviceIDs = Object.keys(devices);
 
     // QT and Android start their apps in '/index.html' and '/android_asset/web/index.html' respectively
     // This re-routes them to '/' so we have a simpler uri structure
@@ -86,7 +87,7 @@ export const App = () => {
     }
     // if no devices are registered on specified views route to /
     if (
-      Object.keys(devices).length === 0
+      deviceIDs.length === 0
       && (
         currentURL.startsWith('/settings/device-settings/')
         || currentURL.startsWith('/manage-backups/')
@@ -95,6 +96,14 @@ export const App = () => {
       navigate('/');
       return;
     }
+    // if device is connected route to device settings
+    if (
+      deviceIDs.length === 1
+      && currentURL === '/settings/no-device-connected'
+    ) {
+      navigate(`/settings/device-settings/${deviceIDs[0]}`);
+      return;
+    }
     // if on an account that isn't registered route to /
     if (inAccounts && !accounts.some(account => currentURL.startsWith('/account/' + account.code))) {
       navigate('/');
@@ -116,6 +125,11 @@ export const App = () => {
       navigate('/');
       return;
     }
+    // if in no-accounts settings and has account go to manage-accounts
+    if (accounts.length && currentURL === '/settings/no-accounts') {
+      navigate('/settings/manage-accounts');
+      return;
+    }
 
   }, [accounts, devices, navigate]);
 

frontends/web/src/locales/en/app.json

@@ -735,6 +735,7 @@
       "title": "Hardware"
     },
     "loading": "Retrieving device info…",
+    "noDevice": "No devices connected",
     "pairing": {
       "lock": {
         "false": "Disabled",

frontends/web/src/routes/device/no-device-connected.module.css

@@ -0,0 +1,5 @@
+@media (max-width: 768px) {
+  .noDevice {
+    text-align: center;
+  }
+}

frontends/web/src/routes/device/no-device-connected.tsx

@@ -0,0 +1,67 @@
+/**
+ * Copyright 2025 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useTranslation } from 'react-i18next';
+import type { TPagePropsWithSettingsTabs } from '../settings/types';
+import { GuideWrapper, GuidedContent, Header, Main } from '@/components/layout';
+import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
+import { ViewContent, View } from '@/components/view/view';
+import { GlobalBanners } from '@/components/banners';
+import { MobileHeader } from '@/routes/settings/components/mobile-header';
+import { WithSettingsTabs } from '@/routes/settings/components/tabs';
+import { ManageDeviceGuide } from './bitbox02/settings-guide';
+import styles from './no-device-connected.module.css';
+
+export const NoDeviceConnected = ({
+  devices,
+  hasAccounts,
+}: TPagePropsWithSettingsTabs) => {
+  const { t } = useTranslation();
+
+  return (
+    <Main>
+      <GuideWrapper>
+        <GuidedContent>
+          <ContentWrapper>
+            <GlobalBanners />
+          </ContentWrapper>
+          <Header
+            hideSidebarToggler
+            title={
+              <>
+                <h2 className="hide-on-small">{t('sidebar.settings')}</h2>
+                <MobileHeader withGuide title={t('sidebar.device')} />
+              </>
+            }/>
+          <View fullscreen={false}>
+            <ViewContent>
+              <WithSettingsTabs
+                devices={devices}
+                hideMobileMenu
+                hasAccounts={hasAccounts}
+              >
+                <div className={styles.noDevice}>
+                  {t('deviceSettings.noDevice')}
+                </div>
+              </WithSettingsTabs>
+            </ViewContent>
+          </View>
+        </GuidedContent>
+        <ManageDeviceGuide />
+      </GuideWrapper>
+    </Main>
+  );
+};

frontends/web/src/routes/router.tsx

@@ -30,6 +30,7 @@ import { Receive } from './account/receive';
 import { SendWrapper } from './account/send/send-wrapper';
 import { AccountsSummary } from './account/summary/accountssummary';
 import { DeviceSwitch } from './device/deviceswitch';
+import { NoDeviceConnected } from './device/no-device-connected';
 import { ManageBackups } from './device/manage-backups/manage-backups';
 import { ManageAccounts } from './settings/manage-accounts';
 import { ElectrumSettings } from './settings/electrum';
@@ -83,6 +84,16 @@ export const AppRouter = ({ devices, deviceIDs, devicesKey, accounts, activeAcco
     />
   </InjectParams>);
 
+  const NoDevice = (
+    <InjectParams>
+      <NoDeviceConnected
+        key="no-device-connected"
+        devices={devices}
+        hasAccounts={hasAccounts}
+      />
+    </InjectParams>
+  );
+
   const Acc = (<InjectParams>
     <Account
       code={'' /* dummy to satisfy TS */}
@@ -268,6 +279,8 @@ export const AppRouter = ({ devices, deviceIDs, devicesKey, accounts, activeAcco
           <Route path="general" element={GeneralEl} />
           <Route path="about" element={AboutEl} />
           <Route path="device-settings/:deviceID" element={Device} />
+          <Route path="no-device-connected" element={NoDevice} />
+          <Route path="no-accounts" element={NoDevice} />
           <Route path="device-settings/passphrase/:deviceID" element={PassphraseEl} />
           <Route path="device-settings/bip85/:deviceID" element={Bip85El} />
           <Route path="advanced-settings" element={AdvancedSettingsEl} />

frontends/web/src/routes/settings/components/tabs.tsx

@@ -117,6 +117,7 @@ const TabWithVersionCheck = ({ deviceID, device, ...props }: TTabWithVersionChec
 
 export const Tabs = ({ devices, hideMobileMenu, hasAccounts }: TTabs) => {
   const { t } = useTranslation();
+  const deviceIDs = Object.keys(devices);
   return (
     <div className={styles.container}>
       <Tab
@@ -132,8 +133,15 @@ export const Tabs = ({ devices, hideMobileMenu, hasAccounts }: TTabs) => {
           name={t('manageAccounts.title')}
           url="/settings/manage-accounts"
         />
-      ) : null}
-      {Object.keys(devices).map(id => (
+      ) : (
+        <Tab
+          key="no-accounts"
+          hideMobileMenu={hideMobileMenu}
+          name={t('manageAccounts.title')}
+          url="/settings/no-accounts"
+        />
+      )}
+      {deviceIDs.length ? deviceIDs.map(id => (
         <TabWithVersionCheck
           key={`device-${id}`}
           deviceID={id}
@@ -142,7 +150,14 @@ export const Tabs = ({ devices, hideMobileMenu, hasAccounts }: TTabs) => {
           name={t('sidebar.device')}
           url={`/settings/device-settings/${id}`}
         />
-      )) }
+      )) : (
+        <Tab
+          key="no-device"
+          hideMobileMenu={hideMobileMenu}
+          name={t('sidebar.device')}
+          url="/settings/no-device-connected"
+        />
+      )}
       <Tab
         key="advanced-settings"
         hideMobileMenu={hideMobileMenu}