feat(settings): hide desktop section on tauri mobile and web

.changeset/hide-desktop-settings-tauri-mobile.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Hide the desktop settings section on Tauri mobile and web.

src/app/features/settings/Settings.tsx

@@ -62,6 +62,7 @@ import { useSettingsFocus } from './useSettingsFocus';
 import { SettingsLinkProvider } from './SettingsLinkContext';
 import { useSettingsLinkBaseUrl } from './useSettingsLinkBaseUrl';
 import { Desktop } from './desktop';
+import { isDesktopTauri } from '$utils/platform';
 
 export enum SettingsPages {
   GeneralPage,
@@ -192,6 +193,7 @@ export function Settings({
     : undefined;
 
   const [showPersona] = useSetting(settingsAtom, 'showPersonaSetting');
+  const isDesktop = isDesktopTauri();
   const settingsLinkBaseUrl = useSettingsLinkBaseUrl();
   const screenSize = useScreenSizeContext();
   const isControlled = activeSection !== undefined;
@@ -200,6 +202,9 @@ export function Settings({
     if (initialPage === SettingsPages.PerMessageProfilesPage && !showPersona) {
       return SettingsPages.GeneralPage;
     }
+    if (initialPage === SettingsPages.DesktopPage && !isDesktop) {
+      return SettingsPages.GeneralPage;
+    }
     if (initialPage) return initialPage;
     return screenSize === ScreenSize.Mobile ? undefined : SettingsPages.GeneralPage;
   });
@@ -215,18 +220,24 @@ export function Settings({
     if (section === 'persona' && !showPersona) {
       return 'general';
     }
+    if (section === 'desktop' && !isDesktop) {
+      return 'general';
+    }
     return section;
-  }, [activeSection, isControlled, legacyActivePage, showPersona]);
+  }, [activeSection, isControlled, legacyActivePage, showPersona, isDesktop]);
 
   const menuItems = useMemo<SettingsMenuItem[]>(
     () =>
       settingsSections
-        .filter((section) => showPersona || section.id !== 'persona')
+        .filter(
+          (section) =>
+            (showPersona || section.id !== 'persona') && (isDesktop || section.id !== 'desktop')
+        )
         .map((section) => {
           const icon = settingsMenuIcons[section.id];
           return { id: section.id, name: section.label, ...icon };
         }),
-    [showPersona]
+    [showPersona, isDesktop]
   );
 
   const handleSelectSection = (section: SettingsSectionId) => {

src/app/features/settings/SettingsRoute.tsx

@@ -4,6 +4,7 @@ import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
 import { getSettingsPath } from '$pages/pathUtils';
 import { useSetting } from '$state/hooks/settings';
 import { settingsAtom } from '$state/settings';
+import { isDesktopTauri } from '$utils/platform';
 import { trimTrailingSlash } from '$utils/common';
 import { getSettingsCloseTarget, type SettingsRouteState } from './navigation';
 import { Settings } from './Settings';
@@ -12,7 +13,8 @@ import { isSettingsSectionId, type SettingsSectionId } from './routes';
 function resolveSettingsSection(
   section: string | undefined,
   screenSize: ScreenSize,
-  showPersona: boolean
+  showPersona: boolean,
+  showDesktop: boolean
 ): SettingsSectionId | null {
   if (section === undefined) {
     return screenSize === ScreenSize.Mobile ? null : 'general';
@@ -26,6 +28,10 @@ function resolveSettingsSection(
     return null;
   }
 
+  if (section === 'desktop' && !showDesktop) {
+    return null;
+  }
+
   return section;
 }
 
@@ -40,6 +46,7 @@ export function SettingsRoute({ routeSection }: SettingsRouteProps) {
   const location = useLocation();
   const screenSize = useScreenSizeContext();
   const [showPersona] = useSetting(settingsAtom, 'showPersonaSetting');
+  const showDesktop = isDesktopTauri();
   const routeState = location.state as SettingsRouteState | null;
   const shallowBackgroundState =
     screenSize !== ScreenSize.Mobile && Boolean(routeState?.backgroundLocation);
@@ -55,7 +62,7 @@ export function SettingsRoute({ routeSection }: SettingsRouteProps) {
     (typeof browserHistoryIndex === 'number' && browserHistoryIndex > 0) ||
     location.key !== 'default';
 
-  const activeSection = resolveSettingsSection(section, screenSize, showPersona);
+  const activeSection = resolveSettingsSection(section, screenSize, showPersona, showDesktop);
   const shouldRedirectToGeneral = section === undefined && screenSize !== ScreenSize.Mobile;
   const shouldRedirectToIndex = section !== undefined && activeSection === null;
 

src/app/pages/client/profile/Profile.tsx

@@ -34,6 +34,7 @@ import { useUserPresence } from '$hooks/useUserPresence';
 import { useUserProfile } from '$hooks/useUserProfile';
 import type { SettingsMenuItem } from '$features/settings';
 import { settingsMenuIcons, settingsSections, useOpenSettings } from '$features/settings';
+import { isDesktopTauri } from '$utils/platform';
 import { UserQuickTools } from '../sidebar/UserQuickTools';
 import {
   CaretDownIcon,
@@ -82,15 +83,19 @@ export function ProfileMobile() {
   const hideText = curWidth <= 80 && !isMobile;
 
   const [showPersona] = useSetting(settingsAtom, 'showPersonaSetting');
+  const isDesktop = isDesktopTauri();
   const menuItems = useMemo<SettingsMenuItem[]>(
     () =>
       settingsSections
-        .filter((section) => showPersona || section.id !== 'persona')
+        .filter(
+          (section) =>
+            (showPersona || section.id !== 'persona') && (isDesktop || section.id !== 'desktop')
+        )
         .map((section) => {
           const icon = settingsMenuIcons[section.id];
           return { id: section.id, name: section.label, ...icon };
         }),
-    [showPersona]
+    [showPersona, isDesktop]
   );
 
   return (

src/app/utils/platform.ts

@@ -1,10 +1,17 @@
 import { isTauri } from '@tauri-apps/api/core';
+import { type as osType } from '@tauri-apps/plugin-os';
 
 export function hasServiceWorker(): boolean {
   // Android WebViews (Tauri) do not support service workers.
   return 'serviceWorker' in navigator && !isTauri();
 }
 
+const DESKTOP_TAURI_OS = new Set(['linux', 'macos', 'windows']);
+
+export function isDesktopTauri(): boolean {
+  return isTauri() && DESKTOP_TAURI_OS.has(osType());
+}
+
 export function hasControllingServiceWorker(): boolean {
   return hasServiceWorker() && navigator.serviceWorker.controller !== null;
 }