Add drift compensation warning (#1160)

gui/public/i18n/en/translation.ftl

@@ -321,7 +321,16 @@ settings-general-tracker_mechanics-drift_compensation = Drift compensation
 settings-general-tracker_mechanics-drift_compensation-description =
     Compensates IMU yaw drift by applying an inverse rotation.
     Change amount of compensation and up to how many resets are taken into account.
+    This should only be used if you need to reset very often!
 settings-general-tracker_mechanics-drift_compensation-enabled-label = Drift compensation
+settings-general-tracker_mechanics-drift_compensation_warning =
+    <b>Warning:</b> Only use drift compensation if you need to reset
+    very often (every ~5-10 minutes).
+
+    Some IMUs prone to frequent resets include:
+    Joy-Cons, owoTrack, and MPUs (without recent firmware).
+settings-general-tracker_mechanics-drift_compensation_warning-cancel = Cancel
+settings-general-tracker_mechanics-drift_compensation_warning-done = I understand
 settings-general-tracker_mechanics-drift_compensation-amount-label = Compensation amount
 settings-general-tracker_mechanics-drift_compensation-max_resets-label = Use up to x last resets
 settings-general-tracker_mechanics-save_mounting_reset = Save automatic mounting reset calibration

gui/src/components/settings/DriftCompensationModal.tsx

@@ -0,0 +1,72 @@
+import { Button } from '@/components/commons/Button';
+import { WarningBox } from '@/components/commons/TipBox';
+import { Localized, useLocalization } from '@fluent/react';
+import { BaseModal } from '@/components/commons/BaseModal';
+import ReactModal from 'react-modal';
+
+export function DriftCompensationModal({
+  isOpen = true,
+  onClose,
+  accept,
+  ...props
+}: {
+  /**
+   * Is the parent/sibling component opened?
+   */
+  isOpen: boolean;
+  /**
+   * Function to trigger when the warning hasn't been accepted
+   */
+  onClose: () => void;
+  /**
+   * Function when you press `I understand`
+   */
+  accept: () => void;
+} & ReactModal.Props) {
+  const { l10n } = useLocalization();
+
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      shouldCloseOnOverlayClick
+      onRequestClose={onClose}
+      className={props.className}
+      overlayClassName={props.overlayClassName}
+    >
+      <div className="flex w-full h-full flex-col ">
+        <div className="flex flex-col flex-grow items-center gap-3">
+          <Localized
+            id="settings-general-tracker_mechanics-drift_compensation_warning"
+            elems={{ b: <b></b> }}
+          >
+            <WarningBox>
+              <b>Warning:</b> Drift compensation should only be used if you find
+              you need to reset very often (~5-10 minutes).
+              <br />
+              Some IMUs prone to frequent resets include: Joy-Cons, owoTrack,
+              and MPUs (without recent firmware).
+            </WarningBox>
+          </Localized>
+
+          <div className="flex flex-row gap-3 pt-5 place-content-center">
+            <Button variant="primary" onClick={onClose}>
+              {l10n.getString(
+                'settings-general-tracker_mechanics-drift_compensation_warning-cancel'
+              )}
+            </Button>
+            <Button
+              variant="tertiary"
+              onClick={() => {
+                accept();
+              }}
+            >
+              {l10n.getString(
+                'settings-general-tracker_mechanics-drift_compensation_warning-done'
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </BaseModal>
+  );
+}

gui/src/components/settings/pages/GeneralSettings.tsx

@@ -31,6 +31,7 @@ import {
   SettingsPagePaneLayout,
 } from '@/components/settings/SettingsPageLayout';
 import { HandsWarningModal } from '@/components/settings/HandsWarningModal';
+import { DriftCompensationModal } from '@/components/settings/DriftCompensationModal';
 
 interface SettingsForm {
   trackers: {
@@ -435,6 +436,8 @@ export function GeneralSettings() {
   //   }
   // }, [state]);
 
+  const [showDriftCompWarning, setShowDriftCompWarning] = useState(false);
+
   return (
     <SettingsPageLayout>
       <HandsWarningModal
@@ -697,7 +700,24 @@ export function GeneralSettings() {
               label={l10n.getString(
                 'settings-general-tracker_mechanics-drift_compensation-enabled-label'
               )}
+              onClick={() => {
+                if (getValues('driftCompensation.enabled')) {
+                  return;
+                }
+
+                setShowDriftCompWarning(true);
+              }}
             />
+            <DriftCompensationModal
+              accept={() => {
+                setShowDriftCompWarning(false);
+              }}
+              onClose={() => {
+                setShowDriftCompWarning(false);
+                setValue('driftCompensation.enabled', false);
+              }}
+              isOpen={showDriftCompWarning}
+            ></DriftCompensationModal>
             <div className="flex gap-5 pt-5 md:flex-row flex-col">
               <NumberSelector
                 control={control}