Add OS decorations toggle

gui/package.json

@@ -33,7 +33,8 @@
     "solarxr-protocol": "file:../solarxr-protocol",
     "three": "^0.163.0",
     "ts-pattern": "^5.2.0",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "use-double-tap": "^1.3.6"
   },
   "scripts": {
     "start": "vite --force",

gui/public/i18n/en/translation.ftl

@@ -435,6 +435,9 @@ settings-interface-appearance-font-os_font = OS font
 settings-interface-appearance-font-slime_font = Default font
 settings-interface-appearance-font_size = Base font scaling
 settings-interface-appearance-font_size-description = This affects the font size of the whole interface except this settings panel.
+settings-interface-appearance-decorations = Use the system native decorations
+settings-interface-appearance-decorations-description = This will not render the top bar of the interface and will use the operating system's instead.
+settings-interface-appearance-decorations-label = Use native decorations
 
 ## Notification settings
 settings-interface-notifications = Notifications

gui/src-tauri/capabilities/migrated.json

@@ -24,6 +24,7 @@
     "window:allow-hide",
     "window:allow-show",
     "window:allow-set-focus",
+    "window:allow-set-decorations",
     "shell:allow-open",
     "store:allow-get",
     "store:allow-set",

gui/src-tauri/src/state.rs

@@ -15,6 +15,7 @@ pub struct WindowState {
 	height: f64,
 	x: i32,
 	y: i32,
+	decorated: bool,
 	#[serde(skip)]
 	old: bool,
 }
@@ -50,6 +51,8 @@ impl WindowState {
 		window: &Window,
 		ignore_maximized: bool,
 	) -> Result<()> {
+		self.decorated = window.is_decorated()?;
+
 		let maximized = window.is_maximized()?;
 		self.maximized = maximized || (self.maximized && ignore_maximized);
 		// We early return when it's maximized because we dont have to save the state
@@ -70,6 +73,8 @@ impl WindowState {
 	}
 
 	pub fn update_window(&self, window: &Window, ignore_maximized: bool) -> Result<()> {
+		window.set_decorations(self.decorated)?;
+
 		let maximized = !ignore_maximized && window.is_maximized()?;
 		if maximized && !self.maximized {
 			window.unmaximize()?;

gui/src/components/TopBar.tsx

@@ -27,6 +27,8 @@ import { TrackersStillOnModal } from './TrackersStillOnModal';
 import { useConfig } from '@/hooks/config';
 import { listen } from '@tauri-apps/api/event';
 import { TrayOrExitModal } from './TrayOrExitModal';
+import { error } from '@/utils/logging';
+import { useDoubleTap } from 'use-double-tap';
 
 export function VersionTag() {
   return (
@@ -62,6 +64,7 @@ export function TopBar({
   const [localIp, setLocalIp] = useState<string | null>(null);
   const [showConnectedTrackersWarning, setConnectedTrackerWarning] =
     useState(false);
+  const [showVersionMobile, setShowVersionMobile] = useState(false);
   const [showTrayOrExitModal, setShowTrayOrExitModal] = useState(false);
   const doesMatchSettings = useMatch({
     path: '/settings/*',
@@ -90,6 +93,8 @@ export function TopBar({
       await closeApp();
     }
   };
+  const showVersionBind = useDoubleTap(() => setShowVersionMobile(true));
+  const unshowVersionBind = useDoubleTap(() => setShowVersionMobile(false));
 
   useEffect(() => {
     const unlisten = listen('try-close', async () => {
@@ -104,6 +109,11 @@ export function TopBar({
     };
   }, [config?.useTray, config?.connectedTrackersWarning]);
 
+  useEffect(() => {
+    if (config === null || !isTauri) return;
+    getCurrent().setDecorations(config?.decorations).catch(error);
+  }, [config?.decorations]);
+
   useEffect(() => {
     sendRPCPacket(RpcMessage.ServerInfosRequest, new ServerInfosRequestT());
   }, []);
@@ -121,26 +131,28 @@ export function TopBar({
         <div className="h-[3px]"></div>
         <div data-tauri-drag-region className="flex gap-2 h-[38px] z-50">
           <div
-            className="flex px-2 pb-1 mt-3 justify-around z-50"
+            className="flex px-2 py-2 justify-around z-50"
             data-tauri-drag-region
           >
-            <div className="flex gap-2 mobile:w-5" data-tauri-drag-region>
-              <NavLink
-                to="/"
-                className="flex justify-around flex-col select-all"
-                data-tauri-drag-region
-              >
-                <SlimeVRIcon></SlimeVRIcon>
-              </NavLink>
-              {(isTauri || !isMobile) && (
+            <div className="flex gap-2" data-tauri-drag-region>
+              {!config?.decorations && (
+                <NavLink
+                  to="/"
+                  className="flex justify-around flex-col select-all"
+                  data-tauri-drag-region
+                >
+                  <SlimeVRIcon></SlimeVRIcon>
+                </NavLink>
+              )}
+              {(isTauri || !isMobile) && !config?.decorations && (
                 <div
                   className={classNames('flex justify-around flex-col')}
                   data-tauri-drag-region
                 >
                   <Typography>SlimeVR</Typography>
                 </div>
               )}
-              {!isMobile && (
+              {(!(isMobile && !config?.decorations) || showVersionMobile) && (
                 <>
                   <VersionTag></VersionTag>
                   {doesMatchSettings && (
@@ -149,6 +161,7 @@ export function TopBar({
                         'flex justify-around flex-col text-standard-bold text-status-special',
                         'bg-status-special bg-opacity-20 rounded-lg px-3 select-text'
                       )}
+                      {...unshowVersionBind}
                     >
                       {localIp || 'unknown local ip'}
                     </div>
@@ -192,8 +205,11 @@ export function TopBar({
               </>
             )}
 
-            {!isTauri && (
-              <div className="flex flex-row gap-2">
+            {!isTauri && !showVersionMobile && !config?.decorations && (
+              <div
+                className="flex flex-row gap-2"
+                {...(doesMatchSettings ? showVersionBind : {})}
+              >
                 <div
                   className="flex justify-around flex-col xs:hidden"
                   data-tauri-drag-region
@@ -230,7 +246,7 @@ export function TopBar({
               </div>
             )}
 
-            {isTauri && (
+            {isTauri && !config?.decorations && (
               <>
                 <div
                   className="flex items-center justify-center hover:bg-background-60 rounded-full w-7 h-7"

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

@@ -23,6 +23,7 @@ interface InterfaceSettingsForm {
     theme: string;
     textSize: number;
     fonts: string;
+    decorations: boolean;
   };
   notifications: {
     watchNewDevices: boolean;
@@ -45,6 +46,7 @@ export function InterfaceSettings() {
         theme: config?.theme ?? defaultConfig.theme,
         textSize: config?.textSize ?? defaultConfig.textSize,
         fonts: config?.fonts.join(',') ?? defaultConfig.fonts.join(','),
+        decorations: config?.decorations ?? defaultConfig.decorations,
       },
       notifications: {
         watchNewDevices:
@@ -74,6 +76,7 @@ export function InterfaceSettings() {
       connectedTrackersWarning: values.notifications.connectedTrackersWarning,
       useTray: values.notifications.useTray,
       discordPresence: values.notifications.discordPresence,
+      decorations: values.appearance.decorations,
     });
   };
 
@@ -264,6 +267,28 @@ export function InterfaceSettings() {
               />
             </div>
 
+            <Typography bold>
+              {l10n.getString('settings-interface-appearance-decorations')}
+            </Typography>
+            <div className="flex flex-col pt-1 pb-2">
+              <Typography color="secondary">
+                {l10n.getString(
+                  'settings-interface-appearance-decorations-description'
+                )}
+              </Typography>
+            </div>
+            <div className="grid sm:grid-cols-2 pb-4">
+              <CheckBox
+                variant="toggle"
+                control={control}
+                outlined
+                name="appearance.decorations"
+                label={l10n.getString(
+                  'settings-interface-appearance-decorations-label'
+                )}
+              />
+            </div>
+
             <div className="pb-4">
               <Typography bold>
                 {l10n.getString('settings-general-interface-theme')}

gui/src/hooks/config.ts

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