frontend: ensure the website title is correctly set

Author: ffreddow

frontend/src/index.tsx

@@ -77,6 +77,12 @@ const Frame = lazy(() => import('./pages/Frame.js').then(m => m.Frame));
 export function App() {
     const {t} = useTranslation("", {useSuspense: false});
 
+    useEffect(() => {
+        if (!connected.value) {
+            document.title = t("app_name");
+        }
+    }, [connected.value, t]);
+
     useEffect(() => {
         refresh_access_token();
     })
@@ -144,6 +150,8 @@ export function App() {
                         <LocationProvider>
                             <Router onRouteChange={() => {
                                 connected.value = false;
+                                // Ensure title is reset to translated app name when navigating away from a device connection
+                                document.title = t("app_name");
                             }}>
                                 <Route path="/tokens" component={Tokens} />
                                 <Route path="/user" component={User} />

frontend/src/pages/Frame.tsx

@@ -273,6 +273,8 @@ export class Frame extends Component<{}, FrameState> {
         if (this.interface && this.interface.cancel) {
             this.interface.cancel();
         }
+        document.title = i18n.t("app_name");
+        connected.value = false;
     }
 
     render() {