Hide navbar onboarding (#1152)

gui/public/i18n/en/translation.ftl

@@ -433,6 +433,9 @@ settings-general-interface-dev_mode = Developer Mode
 settings-general-interface-dev_mode-description = This mode can be useful if you need in-depth data or to interact with connected trackers on a more advanced level.
 settings-general-interface-dev_mode-label = Developer Mode
 settings-general-interface-theme = Color theme
+settings-general-interface-show-navbar-onboarding = Show "{ navbar-onboarding }" on navigation bar
+settings-general-interface-show-navbar-onboarding-description = This changes if the "{ navbar-onboarding }" button shows on the navigation bar.
+settings-general-interface-show-navbar-onboarding-label = Show "{ navbar-onboarding }"
 settings-general-interface-lang = Select language
 settings-general-interface-lang-description = Change the default language you want to use.
 settings-general-interface-lang-placeholder = Select the language to use

gui/src/components/Navbar.tsx

@@ -9,6 +9,7 @@ import { RulerIcon } from './commons/icon/RulerIcon';
 import { SparkleIcon } from './commons/icon/SparkleIcon';
 import { WrenchIcon } from './commons/icon/WrenchIcons';
 import { useBreakpoint } from '@/hooks/breakpoint';
+import { useConfig } from '@/hooks/config';
 
 export function NavButton({
   to,
@@ -64,6 +65,7 @@ export function NavButton({
 }
 
 export function MainLinks() {
+  const { config } = useConfig();
   const { l10n } = useLocalization();
 
   return (
@@ -94,9 +96,11 @@ export function MainLinks() {
       >
         {l10n.getString('navbar-body_proportions')}
       </NavButton>
-      <NavButton to="/onboarding/home" icon={<SparkleIcon></SparkleIcon>}>
-        {l10n.getString('navbar-onboarding')}
-      </NavButton>
+      {config?.showNavbarOnboarding && (
+        <NavButton to="/onboarding/home" icon={<SparkleIcon></SparkleIcon>}>
+          {l10n.getString('navbar-onboarding')}
+        </NavButton>
+      )}
     </>
   );
 }

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

@@ -21,6 +21,7 @@ interface InterfaceSettingsForm {
   appearance: {
     devmode: boolean;
     theme: string;
+    showNavbarOnboarding: boolean;
     textSize: number;
     fonts: string;
   };
@@ -43,6 +44,8 @@ export function InterfaceSettings() {
       appearance: {
         devmode: config?.debug ?? defaultConfig.debug,
         theme: config?.theme ?? defaultConfig.theme,
+        showNavbarOnboarding:
+          config?.showNavbarOnboarding ?? defaultConfig.showNavbarOnboarding,
         textSize: config?.textSize ?? defaultConfig.textSize,
         fonts: config?.fonts.join(',') ?? defaultConfig.fonts.join(','),
       },
@@ -69,6 +72,7 @@ export function InterfaceSettings() {
       feedbackSound: values.notifications.feedbackSound,
       feedbackSoundVolume: values.notifications.feedbackSoundVolume,
       theme: values.appearance.theme,
+      showNavbarOnboarding: values.appearance.showNavbarOnboarding,
       fonts: values.appearance.fonts.split(','),
       textSize: values.appearance.textSize,
       connectedTrackersWarning: values.notifications.connectedTrackersWarning,
@@ -320,6 +324,30 @@ export function InterfaceSettings() {
               </div>
             </div>
 
+            <Typography bold>
+              {l10n.getString(
+                'settings-general-interface-show-navbar-onboarding'
+              )}
+            </Typography>
+            <div className="flex flex-col pt-1 pb-2">
+              <Typography color="secondary">
+                {l10n.getString(
+                  'settings-general-interface-show-navbar-onboarding-description'
+                )}
+              </Typography>
+            </div>
+            <div className="grid sm:grid-cols-2 pb-4">
+              <CheckBox
+                variant="toggle"
+                control={control}
+                outlined
+                name="appearance.showNavbarOnboarding"
+                label={l10n.getString(
+                  'settings-general-interface-show-navbar-onboarding-label'
+                )}
+              />
+            </div>
+
             <Typography bold>
               {l10n.getString('settings-interface-appearance-font')}
             </Typography>

gui/src/hooks/config.ts

@@ -37,6 +37,7 @@ export interface Config {
   mirrorView: boolean;
   assignMode: AssignMode;
   discordPresence: boolean;
+  showNavbarOnboarding: boolean;
 }
 
 export interface ConfigContext {
@@ -62,6 +63,7 @@ export const defaultConfig: Omit<Config, 'devSettings'> = {
   mirrorView: true,
   assignMode: AssignMode.Core,
   discordPresence: false,
+  showNavbarOnboarding: true,
 };
 
 interface CrossStorage {