refactor: move screens to layouts and use common for web and tauri

manager-ui/src/TauriApp.tsx

@@ -1,19 +1,18 @@
 import React, { useEffect } from 'react';
 import './App.css';
 import { useTauriManagerStore } from '@stores/tauri/useTauriManagerStore';
-import { BluetoothSearchScreen } from './screens/bluetoothSearch';
-import { useAsyncBridgeEvent, useAsyncBridgeRequest } from './hooks/useAsyncBridge';
+import { BluetoothSearchLayout } from './layouts/bluetoothSearch';
+import { useAsyncBridgeEvent, useAsyncBridgeRequest } from '@hooks/useAsyncBridge';
 import { useShallow } from 'zustand/react/shallow';
-import { DeviceStateScreen } from '@screens/deviceState';
+import { DeviceStateLayout } from './layouts/deviceState';
 
 export const TauriApp: React.FC = () => {
   const [isFirstRender, setFirstRender] = React.useState(true);
   const [handleAsyncBridgeEvent, connectedAddresses] = useTauriManagerStore(
     useShallow((state) => [state.handleAsyncBridgeEvent, state.connectedAddresses])
   );
 
-  const state = useTauriManagerStore((state) => state);
-  console.log('state', state);
+  const currentState = useTauriManagerStore((state) => state.currentViewedDeviceState());
 
   // Add the event listener to the bridge, which listener is
   // provided by the store.
@@ -31,7 +30,11 @@ export const TauriApp: React.FC = () => {
 
   return (
     <React.Fragment>
-      {connectedAddresses.size !== 0 ? <DeviceStateScreen /> : <BluetoothSearchScreen />}
+      {connectedAddresses.size !== 0 && currentState ? (
+        <DeviceStateLayout state={currentState} />
+      ) : (
+        <BluetoothSearchLayout />
+      )}
     </React.Fragment>
   );
 };

manager-ui/src/WebApp.tsx

@@ -3,7 +3,6 @@
 import React, { useState } from 'react';
 import { generate_soundcore_service_uuids, getSoundcoreMacPrefixes } from '@wasm/manager_wasm';
 import { useWebManagerStore } from '@stores/web/useWebManagerStore';
-import { DeviceStateCard } from '@components/DeviceStateCard/deviceStateCard';
 import { BLEDeviceFactory } from './ble/bleDevice';
 import {
   Button,
@@ -17,9 +16,9 @@ import {
   NavbarItem,
   Spinner
 } from '@nextui-org/react';
-import { EqualizerCard } from '@components/EqualizerCard/equalizerCard';
 import { BlurredOverlay } from '@components/atoms/blurredOverlay';
 import { ChevronDown, Unplug } from 'lucide-react';
+import { DeviceStateLayout } from './layouts/deviceState';
 
 enum ConnectionDialogStatus {
   DIALOG_OPEN,
@@ -98,8 +97,7 @@ export const WebApp: React.FC = () => {
       <div className={'min-h-fit flex flex-col items-center justify-start p-4'}>
         {state ? (
           <div className={'flex flex-col items-stretch w-2/3 2xl:w-1/2'}>
-            <DeviceStateCard state={state} />
-            <EqualizerCard state={state} />
+            <DeviceStateLayout state={state} />
           </div>
         ) : (
           <>

manager-ui/src/screens/bluetoothSearch.tsx → manager-ui/src/layouts/bluetoothSearch.tsx

@@ -6,7 +6,7 @@ import { Button, Listbox, ListboxItem, Progress, Spinner } from '@nextui-org/rea
 import { ArrowRight, RefreshCcw } from 'lucide-react';
 import { BlurredOverlay } from '@components/atoms/blurredOverlay';
 
-export const BluetoothSearchScreen: React.FC = () => {
+export const BluetoothSearchLayout: React.FC = () => {
   const {
     isLoading: isScanLoading,
     startScan,

manager-ui/src/layouts/deviceState.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DeviceStateCard } from '@components/DeviceStateCard/deviceStateCard';
+import { SoundcoreDeviceState } from '@generated-types/soundcore-lib';
+import { EqualizerCard } from '@components/EqualizerCard/equalizerCard';
+
+export const DeviceStateLayout: React.FC<{ state: SoundcoreDeviceState }> = ({ state }) => {
+  return (
+    <>
+      <DeviceStateCard state={state} />
+      <EqualizerCard state={state} />
+    </>
+  );
+};