diff --git a/package.json b/package.json index 348069c..8f681e1 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@tauri-apps/api": "^2", "@tauri-apps/plugin-dialog": "~2", "@tauri-apps/plugin-opener": "^2", + "@tauri-apps/plugin-os": "~2", "redux": "^5.0.1", "rxjs": "~7.8.0", "tslib": "^2.3.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bd0dc4c..8fcc20f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -50,6 +50,9 @@ importers: '@tauri-apps/plugin-opener': specifier: ^2 version: 2.2.1 + '@tauri-apps/plugin-os': + specifier: ~2 + version: 2.2.0 redux: specifier: ^5.0.1 version: 5.0.1 @@ -1221,6 +1224,9 @@ packages: '@tauri-apps/plugin-opener@2.2.1': resolution: {integrity: sha512-zloo4xzBqeh363xNA+xYt+7+/cu/lPYuG5PRtxjWAaSyfMqFo6IINdizkDBYylUewLiplXb5+S65GLVkeXTHPg==} + '@tauri-apps/plugin-os@2.2.0': + resolution: {integrity: sha512-HszbCdbisMlu5QhCNAN8YIWyz2v33abAWha6+uvV2CKX8P5VSct/y+kEe22JeyqrxCnWlQ3DRx7s49Byg7/0EA==} + '@tufjs/canonical-json@2.0.0': resolution: {integrity: sha512-yVtV8zsdo8qFHe+/3kw81dSLyF7D576A5cCFCi4X7B39tWT7SekaEFUnvnWJHz+9qO7qJTah1JbrDjWKqFtdWA==} engines: {node: ^16.14.0 || >=18.0.0} @@ -3328,6 +3334,10 @@ snapshots: dependencies: '@tauri-apps/api': 2.1.1 + '@tauri-apps/plugin-os@2.2.0': + dependencies: + '@tauri-apps/api': 2.1.1 + '@tufjs/canonical-json@2.0.0': {} '@tufjs/models@3.0.1': diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock index cdf3fce..9316c2f 100644 --- a/src-tauri/Cargo.lock +++ b/src-tauri/Cargo.lock @@ -1531,6 +1531,16 @@ dependencies = [ "version_check", ] +[[package]] +name = "gethostname" +version = "0.5.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "dc3655aa6818d65bc620d6911f05aa7b6aeb596291e1e9f79e52df85583d1e30" +dependencies = [ + "rustix", + "windows-targets 0.52.6", +] + [[package]] name = "getrandom" version = "0.1.16" @@ -2467,6 +2477,7 @@ dependencies = [ "tauri-plugin-decorum", "tauri-plugin-dialog", "tauri-plugin-opener", + "tauri-plugin-os", "tauri-plugin-window-state", "window-vibrancy", ] @@ -2950,6 +2961,17 @@ dependencies = [ "pin-project-lite", ] +[[package]] +name = "os_info" +version = "3.9.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "e5ca711d8b83edbb00b44d504503cd247c9c0bd8b0fa2694f2a1a3d8165379ce" +dependencies = [ + "log", + "serde", + "windows-sys 0.52.0", +] + [[package]] name = "pango" version = "0.18.3" @@ -4210,6 +4232,15 @@ dependencies = [ "syn 2.0.90", ] +[[package]] +name = "sys-locale" +version = "0.3.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "8eab9a99a024a169fe8a903cf9d4a3b3601109bcc13bd9e3c6fff259138626c4" +dependencies = [ + "libc", +] + [[package]] name = "system-deps" version = "6.2.2" @@ -4489,6 +4520,24 @@ dependencies = [ "zbus 4.0.1", ] +[[package]] +name = "tauri-plugin-os" +version = "2.2.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "dda2d571a9baf0664c1f2088db227e3072f9028602fafa885deade7547c3b738" +dependencies = [ + "gethostname", + "log", + "os_info", + "serde", + "serde_json", + "serialize-to-javascript", + "sys-locale", + "tauri", + "tauri-plugin", + "thiserror 2.0.6", +] + [[package]] name = "tauri-plugin-window-state" version = "2.2.0" diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 09d1905..29e3943 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -28,6 +28,7 @@ rodio = {version = "0.20.1", features = ["symphonia-all"] } window-vibrancy = "0.5.2" tauri-plugin-window-state = "2.2.0" tauri-plugin-decorum = "1.1.1" +tauri-plugin-os = "2" [target."cfg(target_os = \"macos\")".dependencies] cocoa = "0.26" diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json index b6c26a3..6aed767 100644 --- a/src-tauri/capabilities/default.json +++ b/src-tauri/capabilities/default.json @@ -18,6 +18,7 @@ "core:window:allow-is-maximized", "core:window:allow-start-dragging", "core:window:allow-toggle-maximize", - "decorum:allow-show-snap-overlay" + "decorum:allow-show-snap-overlay", + "os:default" ] } \ No newline at end of file diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs index b82f187..7ccda1e 100644 --- a/src-tauri/src/lib.rs +++ b/src-tauri/src/lib.rs @@ -158,6 +158,7 @@ fn get_position() -> std::time::Duration { #[cfg_attr(mobile, tauri::mobile_entry_point)] pub fn run() { tauri::Builder::default() + .plugin(tauri_plugin_os::init()) .plugin(tauri_plugin_dialog::init()) .plugin(tauri_plugin_opener::init()) .plugin(tauri_plugin_window_state::Builder::default().build()) @@ -165,13 +166,9 @@ pub fn run() { .setup(|app| { app.manage(Mutex::new(AppData::default())); - // Create a custom titlebar for main window - // On Windows this hides decoration and creates custom window controls - // On macOS it needs hiddenTitle: true and titleBarStyle: overlay let main_window = app.get_webview_window("main").unwrap(); main_window.create_overlay_titlebar().unwrap(); if cfg!(target_os = "macos") { - main_window.set_traffic_lights_inset(12.0, 16.0).unwrap(); main_window.make_transparent().unwrap(); #[cfg(target_os = "macos")] @@ -179,7 +176,8 @@ pub fn run() { .expect("Unsupported platform! 'apply_vibrancy' is only supported on macOS"); } else if cfg!(target_os = "windows") { #[cfg(target_os = "windows")] - apply_blur(&main_window, Some((18, 18, 18, 125))).expect("Unsupported platform! 'apply_blur' is only supported on Windows"); + apply_blur(&main_window, Some((18, 18, 18, 125))) + .expect("Unsupported platform! 'apply_blur' is only supported on Windows"); } Ok(()) diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 274a314..dd92620 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -37,4 +37,4 @@ "icons/icon.ico" ] } -} +} \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 28e4859..75be5a5 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -5,11 +5,13 @@ import { injectDispatch, injectSelector } from "@reduxjs/angular-redux"; import { listen } from '@tauri-apps/api/event'; import { getPosition, musicSync } from './store/tauri'; import { AppDispatch, RootState } from './store'; +import { UnderTitlebar } from './components/under-titlebar.component'; @Component({ selector: 'app-root', - imports: [CommonModule, RouterOutlet], + imports: [CommonModule, RouterOutlet, UnderTitlebar], template: ` + `, }) diff --git a/src/app/components/under-titlebar.component.ts b/src/app/components/under-titlebar.component.ts new file mode 100644 index 0000000..cf0a790 --- /dev/null +++ b/src/app/components/under-titlebar.component.ts @@ -0,0 +1,47 @@ +import { Component, input } from "@angular/core"; +import { platform } from '@tauri-apps/plugin-os'; +import { getCurrentWindow } from '@tauri-apps/api/window'; +import { injectQuery } from "@tanstack/angular-query-experimental"; + +@Component({ + selector: "app-under-titlebar-macos", + template: ` +
+ +
+ `, + styles: [` + .under-titlebar-macos { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + + .logo { + opacity: 0.5; + mix-blend-mode: plus-lighter; + } + `] +}) +export class UnderTitlebarMacos { + theme = input<'light' | 'dark'>(); +} + +@Component({ + selector: "app-under-titlebar", + imports: [UnderTitlebarMacos], + template: ` + @if (currentPlatform === 'macos') { + + } @else { +
+ } + ` +}) +export class UnderTitlebar { + currentPlatform = platform(); + theme = injectQuery(() => ({ + queryKey: ['theme'], + queryFn: async () => await getCurrentWindow().theme() ?? "dark" + })) +} \ No newline at end of file diff --git a/src/assets/header-logo-black.svg b/src/assets/header-logo-black.svg new file mode 100644 index 0000000..d465d8a --- /dev/null +++ b/src/assets/header-logo-black.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/header-logo-white.svg b/src/assets/header-logo-white.svg new file mode 100644 index 0000000..6963b51 --- /dev/null +++ b/src/assets/header-logo-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/index.html b/src/index.html index 8a5c482..f66cc07 100644 --- a/src/index.html +++ b/src/index.html @@ -10,7 +10,6 @@ html, body { background: transparent; - margin-top: 1rem; }