add manual mounting to stay alligned setup

gui/public/i18n/en/translation.ftl

@@ -1342,6 +1342,7 @@ onboarding-stay_aligned-previous_step = Previous
 onboarding-stay_aligned-next_step = Next
 onboarding-stay_aligned-restart = Restart
 onboarding-stay_aligned-done = Done
+onboarding-stay_aligned-manual_mounting-done = Done
 
 ## Home
 home-no_trackers = No trackers detected or assigned

gui/src/components/commons/TipBox.tsx

@@ -10,7 +10,7 @@ export function TipBox({
   whitespace = false,
   className,
 }: {
-  children: ReactNode;
+  children?: ReactNode;
   hideIcon?: boolean;
   whitespace?: boolean;
   className?: string;

gui/src/components/onboarding/pages/mounting/ManualMounting.tsx

@@ -12,7 +12,7 @@
 import { Typography } from '@/components/commons/Typography';
 import { BodyAssignment } from '@/components/onboarding/BodyAssignment';
 import { MountingSelectionMenu } from './MountingSelectionMenu';
-import { useLocalization } from '@fluent/react';
+import { Localized } from '@fluent/react';
 import { useBreakpoint } from '@/hooks/breakpoint';
 import { Quaternion } from 'three';
 import { AssignMode, defaultConfig, useConfig } from '@/hooks/config';
@@ -22,7 +22,6 @@
 
 export function ManualMountingPage() {
   const { isMobile } = useBreakpoint('mobile');
-  const { l10n } = useLocalization();
   const { applyProgress, state } = useOnboarding();
   const { sendRPCPacket } = useWebsocketAPI();
   const { config } = useConfig();
@@ -103,28 +102,26 @@
       <div className="flex flex-col gap-5 h-full items-center w-full xs:justify-center relative overflow-y-auto">
         <div className="flex xs:flex-row mobile:flex-col h-full px-8 xs:w-full xs:justify-center mobile:px-4 items-center">
           <div className="flex flex-col w-full xs:max-w-sm gap-3">
-            <Typography variant="main-title">
-              {l10n.getString('onboarding-manual_mounting')}
-            </Typography>
-            <Typography>
-              {l10n.getString('onboarding-manual_mounting-description')}
-            </Typography>
-            <TipBox>{l10n.getString('tips-find_tracker')}</TipBox>
+            <Typography variant="main-title" id="onboarding-manual_mounting" />
+            <Typography id="onboarding-manual_mounting-description" />
+            <Typography id="tips-find_tracker" />
+            <Localized id="tips-find_tracker">
+              <TipBox />
+            </Localized>
+
             <div className="flex flex-row gap-3 mt-auto">
               <Button
                 variant="secondary"
                 to="/onboarding/mounting/choose"
                 state={state}
-              >
-                {l10n.getString('onboarding-previous_step')}
-              </Button>
+                id="onboarding-previous_step"
+              />
               {!state.alonePage && (
                 <Button
                   variant="primary"
                   to="/onboarding/body-proportions/scaled"
-                >
-                  {l10n.getString('onboarding-manual_mounting-next')}
-                </Button>
+                  id="onboarding-manual_mounting-next"
+                />
               )}
             </div>
           </div>
@@ -142,3 +139,109 @@
     </>
   );
 }
+
+export function ManualMountingPageStayAlligned() {
+  const { isMobile } = useBreakpoint('mobile');
+  const { applyProgress, state } = useOnboarding();
+  const { sendRPCPacket } = useWebsocketAPI();
+  const { config } = useConfig();
+
+  const [selectedRole, setSelectRole] = useState<BodyPart>(BodyPart.NONE);
+
+  applyProgress(0.7);
+
+  const assignedTrackers = useAtomValue(assignedTrackersAtom);
+
+  const trackerPartGrouped = useMemo(
+    () =>
+      assignedTrackers.reduce<{ [key: number]: FlatDeviceTracker[] }>(
+        (curr, td) => {
+          const key = td.tracker.info?.bodyPart || BodyPart.NONE;
+          return {
+            ...curr,
+            [key]: [...(curr[key] || []), td],
+          };
+        },
+        {}
+      ),
+    [assignedTrackers]
+  );
+
+  const onDirectionSelected = (mountingOrientationDegrees: Quaternion) => {
+    (trackerPartGrouped[selectedRole] || []).forEach((td) => {
+      const assignreq = new AssignTrackerRequestT();
+
+      assignreq.bodyPosition = td.tracker.info?.bodyPart || BodyPart.NONE;
+      assignreq.mountingOrientation = MountingOrientationDegreesToQuatT(
+        mountingOrientationDegrees
+      );
+      assignreq.trackerId = td.tracker.trackerId;
+      assignreq.allowDriftCompensation = false;
+
+      sendRPCPacket(RpcMessage.AssignTrackerRequest, assignreq);
+      Sentry.metrics.count('manual_mounting_set', 1, {
+        attributes: {
+          part: BodyPart[assignreq.bodyPosition],
+          direction: assignreq.mountingOrientation,
+        },
+      });
+    });
+
+    setSelectRole(BodyPart.NONE);
+  };
+
+  const getCurrRotation = useCallback(
+    (role: BodyPart) => {
+      if (role === BodyPart.NONE) return undefined;
+
+      const trackers = trackerPartGrouped[role] || [];
+      const [mountingOrientation, ...orientation] = trackers
+        .map((td) => td.tracker.info?.mountingOrientation)
+        .filter((orientation) => !!orientation)
+        .map((orientation) => QuaternionFromQuatT(orientation));
+
+      const identicalOrientations =
+        mountingOrientation !== undefined &&
+        orientation.every((quat) =>
+          similarQuaternions(quat, mountingOrientation)
+        );
+      return identicalOrientations ? mountingOrientation : undefined;
+    },
+    [trackerPartGrouped]
+  );
+
+  return (
+    <>
+      <MountingSelectionMenu
+        bodyPart={selectedRole}
+        currRotation={getCurrRotation(selectedRole)}
+        isOpen={selectedRole !== BodyPart.NONE}
+        onClose={() => setSelectRole(BodyPart.NONE)}
+        onDirectionSelected={onDirectionSelected}
+      />
+      <div className="flex flex-col gap-5 h-full items-center w-full xs:justify-center relative overflow-y-auto">
+        <div className="flex xs:flex-row mobile:flex-col h-full px-8 xs:w-full xs:justify-center mobile:px-4 items-center">
+          <div className="flex flex-col w-full xs:max-w-sm gap-3">
+            <Typography variant="main-title" id="onboarding-manual_mounting" />
+            <Typography id="onboarding-manual_mounting-description" />
+            <Typography id="tips-find_tracker" />
+            <Localized id="tips-find_tracker">
+              <TipBox />
+            </Localized>
+          </div>
+          <div className="flex flex-row justify-center">
+            <BodyAssignment
+              width={isMobile ? 160 : undefined}
+              mirror={config?.mirrorView ?? defaultConfig.mirrorView}
+              onlyAssigned={true}
+              assignMode={AssignMode.All}
+              onRoleSelected={setSelectRole}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+//251

gui/src/components/onboarding/pages/stay-aligned/stay-aligned-steps/VerifyMounting.tsx

@@ -1,32 +1,37 @@
+import { useState } from 'react';
 import { Button } from '@/components/commons/Button';
 import { Typography } from '@/components/commons/Typography';
 import { ResetType } from 'solarxr-protocol';
 import { ResetButton } from '@/components/home/ResetButton';
-import { useLocalization } from '@fluent/react';
 import { useBreakpoint } from '@/hooks/breakpoint';
 import { VerticalStepComponentProps } from '@/components/commons/VerticalStepper';
-
+import { BaseModal } from '@/components/commons/BaseModal';
+import { ManualMountingPageStayAlligned } from '../../mounting/ManualMounting';
 export function VerifyMountingStep({
   nextStep,
   prevStep,
 }: VerticalStepComponentProps) {
   const { isMobile } = useBreakpoint('mobile');
-  const { l10n } = useLocalization();
+  const [isOpen, setOpen] = useState(false);
+  const [closeable, setCloseable] = useState(false);
+
+  function setOpenFunc() {
+    setCloseable(false);
+    setOpen(true);
+  }
+  function setCloseFunc() {
+    setCloseable(true);
+    setOpen(false);
+    nextStep();
+  }
+
   return (
     <div className="flex flex-col flex-grow justify-between py-2 gap-2">
       <div className="flex flex-col flex-grow">
         <div className="flex flex-grow flex-col gap-4 max-w-sm">
           <div className="flex flex-col gap-2">
-            <Typography>
-              {l10n.getString(
-                'onboarding-automatic_mounting-mounting_reset-step-0'
-              )}
-            </Typography>
-            <Typography>
-              {l10n.getString(
-                'onboarding-automatic_mounting-mounting_reset-step-1'
-              )}
-            </Typography>
+            <Typography id="onboarding-automatic_mounting-mounting_reset-step-0" />
+            <Typography id="onboarding-automatic_mounting-mounting_reset-step-1" />
           </div>
         </div>
 
@@ -50,13 +55,31 @@
           </div>
         )}
         <div className="flex gap-3 justify-between">
-          <Button variant={'secondary'} onClick={prevStep}>
-            {l10n.getString('onboarding-automatic_mounting-prev_step')}
-          </Button>
+          <Button
+            variant={'secondary'}
+            onClick={prevStep}
+            id="onboarding-automatic_mounting-prev_step"
+          />
+          <Button
+            variant={'secondary'}
+            className="self-start mt-auto"
+            onClick={setOpenFunc}
+            id="onboarding-automatic_mounting-manual_mounting"
+          />
+          <BaseModal isOpen={isOpen} closeable={closeable}>
+            <ManualMountingPageStayAlligned />
+
+            <Button
+              variant="primary"
+              className="-top-44 left-8"
+              onClick={setCloseFunc}
+              id="onboarding-stay_aligned-manual_mounting-done"
+            />
+          </BaseModal>
           <ResetButton
             type={ResetType.Mounting}
             group="default"
-            onReseted={nextStep}
+            onReseted={setCloseFunc}
           />
         </div>
       </div>