native decorations toggle (#541)

* add native decorations toggle

* osname mac -> MacOS

* remove newlines

theseus/src/state/settings.rs

@@ -35,6 +35,8 @@ pub struct Settings {
     #[serde(default)]
     pub hide_on_process: bool,
     #[serde(default)]
+    pub native_decorations: bool,
+    #[serde(default)]
     pub default_page: DefaultPage,
     #[serde(default)]
     pub developer_mode: bool,
@@ -99,6 +101,7 @@ impl Settings {
                 collapsed_navigation: false,
                 disable_discord_rpc: false,
                 hide_on_process: false,
+                native_decorations: false,
                 default_page: DefaultPage::Home,
                 developer_mode: false,
                 opt_out_analytics: false,

theseus_gui/src/App.vue

@@ -51,6 +51,7 @@ const isLoading = ref(true)
 const videoPlaying = ref(false)
 const offline = ref(false)
 const showOnboarding = ref(false)
+const nativeDecorations = ref(false)
 
 const onboardingVideo = ref()
 
@@ -60,7 +61,7 @@ const os = ref('')
 defineExpose({
   initialize: async () => {
     isLoading.value = false
-    const { theme, opt_out_analytics, collapsed_navigation, advanced_rendering, fully_onboarded } =
+    const { native_decorations, theme, opt_out_analytics, collapsed_navigation, advanced_rendering, fully_onboarded } =
       await get()
     // video should play if the user is not on linux, and has not onboarded
     os.value = await getOS()
@@ -69,6 +70,9 @@ defineExpose({
     const version = await getVersion()
     showOnboarding.value = !fully_onboarded
 
+    nativeDecorations.value = native_decorations
+    if (os !== "MacOS") appWindow.setDecorations(native_decorations)
+
     themeStore.setThemeState(theme)
     themeStore.collapsedNavigation = collapsed_navigation
     themeStore.advancedRendering = advanced_rendering
@@ -341,7 +345,7 @@ command_listener(async (e) => {
             </Suspense>
           </section>
         </div>
-        <section class="window-controls">
+        <section v-if="!nativeDecorations" class="window-controls">
           <Button class="titlebar-button" icon-only @click="() => appWindow.minimize()">
             <MinimizeIcon />
           </Button>

theseus_gui/src/pages/Settings.vue

@@ -21,6 +21,7 @@ import JavaSelector from '@/components/ui/JavaSelector.vue'
 import ModrinthLoginScreen from '@/components/ui/tutorial/ModrinthLoginScreen.vue'
 import { mixpanel_opt_out_tracking, mixpanel_opt_in_tracking } from '@/helpers/mixpanel'
 import { open } from '@tauri-apps/api/dialog'
+import { getOS } from '@/helpers/utils.js'
 
 const pageOptions = ['Home', 'Library']
 
@@ -242,6 +243,24 @@ async function refreshDir() {
           "
         />
       </div>
+      <div v-if="getOS() != 'MacOS'" class="adjacent-input">
+        <label for="native-decorations">
+          <span class="label__title">Native decorations</span>
+          <span class="label__description"
+            >Use system window frame (app restart required).</span
+          >
+        </label>
+        <Toggle
+          id="native-decorations"
+          :model-value="settings.native_decorations"
+          :checked="settings.native_decorations"
+          @update:model-value="
+            (e) => {
+              settings.native_decorations = e
+            }
+          "
+        />
+      </div>
       <div class="adjacent-input">
         <label for="opening-page">
           <span class="label__title">Default landing page</span>