Titlebar revised

src-tauri/src/main.rs

@@ -43,7 +43,6 @@ fn main() {
             game::add_game,
             game::list_games,
             window::open_file_dialog,
-            window::close_file_dialog
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src-tauri/src/window.rs

@@ -1,34 +1,18 @@
-use tauri::Manager;
 use window_shadows::set_shadow;
 
 use crate::{error::BackendError, Response};
 
 #[tauri::command]
 pub async fn open_file_dialog(handle: tauri::AppHandle) -> Result<Response, BackendError> {
-    let dialog = tauri::WindowBuilder::new(&handle, "file", tauri::WindowUrl::App("file.html".into()))
-        .decorations(false)
-        .build()?;
+    let dialog =
+        tauri::WindowBuilder::new(&handle, "file", tauri::WindowUrl::App("file.html".into()))
+            .decorations(false)
+            .build()?;
 
     set_shadow(dialog, true)?;
-
-    Ok(Response {
-        kind: "success".to_owned(),
-        message: "Window::OpenFileDialog successful".to_owned(),
-    })
-}
-
-#[tauri::command]
-pub async fn close_file_dialog(handle: tauri::AppHandle) -> Result<Response, BackendError> {
-    handle
-        .get_window("file")
-        .ok_or(BackendError {
-            kind: "tauri::Error".to_owned(),
-            message: "the window with the label `file` not found".to_owned(),
-        })?
-        .close()?;
 
     Ok(Response {
         kind: "success".to_owned(),
-        message: "Window::CloseFileDialog successful".to_owned(),
+        message: "Window::OpenFileDialog successful".to_owned(),
     })
 }

src/App.vue

@@ -1,17 +1,21 @@
 <template>
-  <main :data-theme="theme ? 'dark' : 'light'" class="w-screen h-screen">
-    <Titlebar :theme="theme" @set-theme="setTheme"></Titlebar>
-    <button class="btn btn-primary" @click="openDialog">Open Window</button>
-    <button class="btn btn-primary" @click="closeDialog">Close Window</button>
+  <main :data-theme="theme ? 'dark' : 'light'" class="w-screen h-screen" @mousemove="handleMouseMove">
+    <Titlebar :theme="theme" :is-hovering="isHovering" @set-theme="setTheme"></Titlebar>
+    <section class="w-full h-full p-4">
+      <button class="btn btn-primary" @click="openDialog">Open Window</button>
+    </section>
+    <span class="absolute bottom-4 right-4">{{ pos.x }}, {{ pos.y }}</span>
   </main>
 </template>
 
 <script setup lang="ts">
-import { invoke } from "@tauri-apps/api/tauri";
 import Titlebar from "./components/Titlebar.vue";
-import { onMounted, ref } from "vue";
+import { invoke } from "@tauri-apps/api/tauri";
+import { onMounted, reactive, ref } from "vue";
 
 const theme = ref(false);
+const isHovering = ref(false);
+const pos = reactive({ x: 0, y: 0 });
 
 function setTheme(value: boolean) {
   theme.value = value;
@@ -25,10 +29,10 @@ function openDialog() {
     .catch((err) => console.error(err));
 }
 
-function closeDialog() {
-  invoke("close_file_dialog")
-    .then((res) => console.log(res))
-    .catch((err) => console.error(err));
+function handleMouseMove(e: MouseEvent) {
+  pos.x = e.clientX;
+  pos.y = e.clientY;
+  isHovering.value = e.clientY <= 52;
 }
 
 onMounted(() => {

src/File.vue

@@ -1,14 +1,21 @@
 <template>
   <main :data-theme="theme ? 'dark' : 'light'" class="w-screen h-screen">
-    Hello world!
+    <Titlebar :theme="theme" @set-theme="setTheme"></Titlebar>
   </main>
 </template>
 
 <script setup lang="ts">
+import Titlebar from './components/Titlebar.vue';
 import { onMounted, ref } from 'vue';
 
 const theme = ref(false);
 
+function setTheme(value: boolean) {
+  theme.value = value;
+  if (theme.value) localStorage.setItem("theme", "dark");
+  else localStorage.setItem("theme", "light");
+}
+
 onMounted(() => {
   theme.value = localStorage.getItem("theme") === "dark";
 })

src/components/Filepicker.vue

@@ -0,0 +1,3 @@
+<template>
+
+</template>

src/components/Titlebar.vue

@@ -1,50 +1,53 @@
 <template>
   <Transition name="appear">
-    <div v-if="isHovering" id="titlebar" data-tauri-drag-region @mouseleave="isHovering = false">
+    <div
+      v-show="isHovering || !isMainWindow"
+      class="navbar min-h-12 bg-base-100 absolute shadow-lg shadow-base-300"
+      data-tauri-drag-region
+    >
       <div class="flex-1"></div>
-      <div class="flex-none gap-1 pr-2">
-        <button class="btn btn-sm btn-square btn-ghost" @click="changeTheme">
-          <span class="iconify w-6 h-6" :class="getThemeIcon"></span>
-        </button>
-        <button class="btn btn-sm btn-square btn-ghost" @click="minimize">
+      <div class="flex-none gap-1">
+        <label v-if="isMainWindow" class="swap swap-rotate btn btn-sm btn-square btn-ghost">
+          <input type="checkbox" class="theme-controller" :checked="props.theme" @click="changeTheme" />
+          <span class="swap-off iconify mingcute--sun-line w-6 h-6"></span>
+          <span class="swap-on iconify mingcute--moon-stars-line w-6 h-6"></span>
+        </label>
+        <button v-if="isMainWindow" class="btn btn-sm btn-square btn-ghost" @click="minimize">
           <span class="iconify fa6-regular--window-minimize w-4 h-4"></span>
         </button>
-        <button class="btn btn-sm btn-square btn-ghost" @click="maximize">
-          <span class="iconify w-4 h-4" :class="getMaximizeIcon"></span>
-        </button>
+        <label v-if="isMainWindow" class="swap btn btn-sm btn-square btn-ghost">
+          <input type="checkbox" :checked="isMaximized" @click="maximize" />
+          <span class="swap-off iconify fa6-regular--window-maximize w-4 h-4"></span>
+          <span class="swap-on iconify fa6-regular--window-restore w-4 h-4"></span>
+        </label>
         <button class="btn btn-sm btn-square btn-ghost" @click="close">
           <span class="iconify mingcute--close-line w-6 h-6"></span>
         </button>
       </div>
     </div>
   </Transition>
-  <div v-if="!isHovering" id="titlebar-hover" @mouseenter="isHovering = true"></div>
 </template>
 
 <script setup lang="ts">
 import { listen, UnlistenFn } from "@tauri-apps/api/event";
-import { appWindow } from "@tauri-apps/api/window";
+import { appWindow, WebviewWindow } from "@tauri-apps/api/window";
 import { computed, onMounted, onUnmounted, ref } from "vue";
 
 const props = defineProps({
   theme: Boolean,
+  isHovering: Boolean
 });
 
 const emits = defineEmits<{
   setTheme: [value: boolean];
 }>();
 
-let unlisten: UnlistenFn;
+let unlistenResize: UnlistenFn;
 const isMaximized = ref(false);
-const isHovering = ref(false);
 
 // Computed
 
-const getThemeIcon = computed(() => (props.theme ? "mingcute--moon-stars-line" : "mingcute--sun-line"));
-
-const getMaximizeIcon = computed(() =>
-  isMaximized.value ? "fa6-regular--window-restore" : "fa6-regular--window-maximize"
-);
+const isMainWindow = computed(() => appWindow.label === "main");
 
 // Methods
 
@@ -60,20 +63,22 @@ function maximize() {
   appWindow.toggleMaximize();
 }
 
-function close() {
+async function close() {
+  if (appWindow.label === "main") await WebviewWindow.getByLabel("file")?.close();
   appWindow.close();
 }
 
 // Events
 
 onMounted(async () => {
-  unlisten = await listen("tauri://resize", () => {
+  unlistenResize = await listen("tauri://resize", () => {
     appWindow.isMaximized().then((res) => (isMaximized.value = res));
   });
+  appWindow.isMaximized().then((res) => (isMaximized.value = res));
 });
 
 onUnmounted(() => {
-  unlisten();
+  unlistenResize();
 });
 </script>
 

src/style.css

@@ -1,13 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-/* Titlebar.vue */
-
-#titlebar {
-  @apply navbar bg-base-100 absolute shadow-lg shadow-base-300;
-}
-
-#titlebar-hover {
-  @apply absolute w-full h-8;
-}