fix: mini timer renders via window label instead of hash routing

The mini timer window was blank because hash-based routing
(createWebHashHistory) doesn't work with Tauri's WebviewUrl path.
Now App.vue detects the mini timer by checking getCurrentWindow().label
=== 'mini-timer' and renders the MiniTimer component directly,
bypassing the router entirely.
This commit is contained in:
Your Name
2026-02-18 15:26:44 +02:00
parent 4462d832d2
commit b8239c6e1b
2 changed files with 28 additions and 19 deletions

View File

@@ -1132,9 +1132,9 @@ pub fn open_mini_timer(app: tauri::AppHandle) -> Result<(), String> {
return Ok(());
}
// Load root URL — the app uses hash-based routing (createWebHashHistory),
// so we set the hash fragment via eval after the window is created.
let win = tauri::WebviewWindowBuilder::new(&app, "mini-timer", WebviewUrl::App(Default::default()))
// Load root URL — App.vue detects the "mini-timer" window label
// and renders MiniTimer directly, bypassing the router.
tauri::WebviewWindowBuilder::new(&app, "mini-timer", WebviewUrl::App(Default::default()))
.title("Timer")
.inner_size(300.0, 64.0)
.always_on_top(true)
@@ -1144,9 +1144,6 @@ pub fn open_mini_timer(app: tauri::AppHandle) -> Result<(), String> {
.build()
.map_err(|e| e.to_string())?;
// Navigate Vue Router to the mini-timer route via hash
win.eval("window.location.hash = '/mini-timer'").ok();
Ok(())
}

View File

@@ -1,12 +1,16 @@
<script setup lang="ts">
import { onMounted, watch } from 'vue'
import { getCurrentWindow } from '@tauri-apps/api/window'
import TitleBar from './components/TitleBar.vue'
import NavRail from './components/NavRail.vue'
import MiniTimer from './views/MiniTimer.vue'
import ToastNotification from './components/ToastNotification.vue'
import { useSettingsStore } from './stores/settings'
import { useTimerStore } from './stores/timer'
const settingsStore = useSettingsStore()
// Detect mini timer by Tauri window label — no routing needed
const isMiniTimer = getCurrentWindow().label === 'mini-timer'
async function registerShortcuts() {
try {
@@ -74,13 +78,20 @@ watch(() => [settingsStore.settings.shortcut_toggle_timer, settingsStore.setting
</script>
<template>
<!-- Mini timer: detected by window label, rendered directly (no routing) -->
<div v-if="isMiniTimer" class="h-full w-full bg-bg-base">
<MiniTimer />
</div>
<!-- Normal app shell -->
<template v-else>
<div class="h-full w-full flex flex-col bg-bg-base">
<TitleBar />
<div class="flex-1 flex overflow-hidden">
<NavRail />
<main class="flex-1 overflow-auto">
<router-view v-slot="{ Component }">
<Transition name="page" mode="out-in">
<Transition name="page" mode="out-in" :duration="{ enter: 250, leave: 150 }">
<component :is="Component" :key="$route.path" />
</Transition>
</router-view>
@@ -88,4 +99,5 @@ watch(() => [settingsStore.settings.shortcut_toggle_timer, settingsStore.setting
</div>
</div>
<ToastNotification />
</template>
</template>