refined colors, added multiple color themes, and added window control titlebar

src/App.vue

@@ -1,16 +1,35 @@
 <template>
-    <div id="page">
-        <main id="content">
-            <router-view />
-        </main>
-
-        <VersionWarningModal v-if="showVersionWarningModal" :appVersion="appVersion" :backendVersion="backendVersion"
-            :expectedBackendVersion="expectedBackendVersion" @close="showVersionWarningModal = false" />
-
-        <footer v-if="!$route.meta.hideNavbar">
-            <Navbar />
-        </footer>
+  <div id="page">
+    <div v-if="currentPlatform != 'android' && currentPlatform != 'ios'" data-tauri-drag-region class="titlebar">
+      <div class="titlebar-button" @click="minimize">
+        <svg width="12" height="12" viewBox="0 0 12 12">
+          <rect fill="currentColor" width="10" height="1" x="1" y="6" />
+        </svg>
+      </div>
+      <div class="titlebar-button" @click="toggleMaximize">
+        <svg width="12" height="12" viewBox="0 0 12 12">
+          <rect fill="none" stroke="currentColor" stroke-width="1" width="9" height="9" x="1.5" y="1.5" />
+        </svg>
+      </div>
+      <div class="titlebar-button" id="close-btn" @click="close">
+        <svg width="12" height="12" viewBox="0 0 12 12">
+          <path fill="currentColor"
+            d="M11 1.57L10.43 1 6 5.43 1.57 1 1 1.57 5.43 6 1 10.43 1.57 11 6 6.57 10.43 11 11 10.43 6.57 6z" />
+        </svg>
+      </div>
     </div>
+
+    <main id="content">
+      <router-view />
+    </main>
+
+    <VersionWarningModal v-if="showVersionWarningModal" :appVersion="appVersion" :backendVersion="backendVersion"
+      :expectedBackendVersion="expectedBackendVersion" @close="showVersionWarningModal = false" />
+
+    <footer v-if="!$route.meta.hideNavbar">
+      <Navbar />
+    </footer>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -19,6 +38,12 @@ import Navbar from './components/Navbar.vue'
 import VersionWarningModal from './components/VersionWarningModal.vue'
 import { apiFetch } from './api/client'
 import { VersionResponse } from './types'
+import { getCurrentWindow } from '@tauri-apps/api/window'
+import { platform } from '@tauri-apps/plugin-os';
+
+const currentPlatform = ref('')
+
+const appWindow = getCurrentWindow()
 
 const showVersionWarningModal = ref(false)
 const backendVersion = ref('')
@@ -26,52 +51,97 @@ const backendVersion = ref('')
 const appVersion = __APP_VERSION__
 const expectedBackendVersion = __BACKEND_VERSION__
 
+const isFullScreen = ref(false)
+
 onMounted(async () => {
-    backendVersion.value = (await getBackendVersion()).version
-    if (backendVersion.value !== expectedBackendVersion) {
-        showVersionWarningModal.value = true
-    }
+  backendVersion.value = (await getBackendVersion()).version
+  if (backendVersion.value !== expectedBackendVersion) {
+    showVersionWarningModal.value = true
+  }
+
+  currentPlatform.value = platform()
 })
 
+const minimize = () => appWindow.minimize()
+const toggleMaximize = () => {
+  appWindow.setFullscreen(!isFullScreen.value)
+  isFullScreen.value = !isFullScreen.value
+}
+const close = () => appWindow.close()
+
 async function getBackendVersion() {
-    return await apiFetch<VersionResponse>('/version')
+  return await apiFetch<VersionResponse>('/version')
 }
 </script>
 
 <style scoped>
 #page {
-    background: var(--bg);
-    height: 100dvh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  background: var(--bg);
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 #content {
-    width: 100%;
-    max-width: 1100px;
-    padding: 2rem;
+  width: 100%;
+  max-width: 1100px;
+  /* padding: 2rem; */
+  padding: calc(20px + 2rem) 2rem 2rem 2rem;
 
-    flex: 1;
-    overflow-y: auto;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.titlebar {
+  height: 30px;
+  background: var(--panel);
+  user-select: none;
+  display: flex;
+  justify-content: flex-end;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+}
+
+.titlebar-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 45px;
+  height: 30px;
+  transition: background-color 0.2s;
+  color: var(--text-color);
+  cursor: pointer;
+}
+
+.titlebar-button:hover {
+  background: var(--panel-accent)
+}
+
+#close-btn:hover {
+  background: #e81123;
+  color: white;
 }
 
 footer {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    padding-bottom: 24px;
-    background: var(--bg);
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding-bottom: 24px;
+  background: var(--bg);
 }
 
 @media (max-width: 720px) {
-    #content {
-        padding: 12px;
-        padding-top: 30px;
-    }
+  #content {
+    padding: 12px;
+    padding-top: 30px;
+  }
 
-    footer {
-        padding-bottom: 56px;
-    }
+  footer {
+    padding-bottom: 56px;
+  }
 }
 </style>