diff --git a/public/layer.html b/public/layer.html new file mode 100644 index 0000000..a7d595c --- /dev/null +++ b/public/layer.html @@ -0,0 +1,101 @@ + + + + + + Lightning Timer Overlay + + + +
00:00
+ + + + diff --git a/public/layer_ctrl.html b/public/layer_ctrl.html new file mode 100644 index 0000000..67581fa --- /dev/null +++ b/public/layer_ctrl.html @@ -0,0 +1,67 @@ + + + + + + Layer Controls + + + +
+
+ ⋮⋮ +
+
+ + diff --git a/public/timeup.html b/public/timeup.html index 2314a02..2ad494d 100644 --- a/public/timeup.html +++ b/public/timeup.html @@ -80,8 +80,8 @@
Time Up!!
-
The time has come.
-
Click or press the Esc key to close
+
The time has come.
+
Click or press the Esc key to close
+ + diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 2de9500..49a83c6 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -19,7 +19,7 @@ path = "src/main.rs" [dependencies] serde_json = "1.0" serde = { version = "1.0", features = ["derive"] } -tauri = { version = "2.0", features = ["tray-icon", "devtools"] } +tauri = { version = "2.0", features = ["tray-icon", "devtools", "macos-private-api"] } tauri-plugin-store = "2.0" dirs = "5.0" diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json index de47952..0d509ac 100644 --- a/src-tauri/capabilities/default.json +++ b/src-tauri/capabilities/default.json @@ -19,6 +19,11 @@ "core:window:allow-set-position", "core:window:allow-current-monitor", "core:window:allow-outer-position", + "core:event:default", + "core:event:allow-emit", + "core:event:allow-emit-to", + "core:event:allow-listen", + "core:event:allow-unlisten", "store:default" ] } diff --git a/src-tauri/capabilities/layer-capability.json b/src-tauri/capabilities/layer-capability.json new file mode 100644 index 0000000..001c7f2 --- /dev/null +++ b/src-tauri/capabilities/layer-capability.json @@ -0,0 +1,19 @@ +{ + "identifier": "layer-capability", + "description": "Layer overlay window capabilities", + "windows": ["layer", "layer_ctrl"], + "permissions": [ + "core:default", + "core:window:allow-close", + "core:window:allow-hide", + "core:window:allow-show", + "core:window:allow-set-position", + "core:window:allow-outer-position", + "core:window:allow-start-dragging", + "core:event:default", + "core:event:allow-emit", + "core:event:allow-emit-to", + "core:event:allow-listen", + "core:event:allow-unlisten" + ] +} diff --git a/src-tauri/capabilities/settings-capability.json b/src-tauri/capabilities/settings-capability.json new file mode 100644 index 0000000..082e3eb --- /dev/null +++ b/src-tauri/capabilities/settings-capability.json @@ -0,0 +1,18 @@ +{ + "identifier": "settings-capability", + "description": "Settings window capabilities", + "windows": ["settings"], + "permissions": [ + "core:default", + "core:window:allow-close", + "core:window:allow-hide", + "core:window:allow-show", + "core:window:allow-set-focus", + "core:event:default", + "core:event:allow-emit", + "core:event:allow-emit-to", + "core:event:allow-listen", + "core:event:allow-unlisten", + "store:default" + ] +} diff --git a/src-tauri/gen/schemas/capabilities.json b/src-tauri/gen/schemas/capabilities.json index c4a05c4..6816599 100644 --- a/src-tauri/gen/schemas/capabilities.json +++ b/src-tauri/gen/schemas/capabilities.json @@ -1 +1 @@ -{"main-capability":{"identifier":"main-capability","description":"Main window capabilities","local":true,"windows":["main"],"permissions":["core:default","core:window:allow-set-always-on-top","core:window:allow-create","core:window:allow-close","core:window:allow-center","core:window:allow-set-size","core:window:allow-set-resizable","core:window:allow-set-decorations","core:window:allow-set-always-on-top","core:window:allow-set-fullscreen","core:window:allow-set-max-size","core:window:allow-set-min-size","core:window:allow-set-focus","core:window:allow-set-position","core:window:allow-current-monitor","core:window:allow-outer-position","store:default"]},"timeup-capability":{"identifier":"timeup-capability","description":"Time Up window capabilities","local":true,"windows":["timeup"],"permissions":["core:default","core:window:allow-close"]}} \ No newline at end of file +{"layer-capability":{"identifier":"layer-capability","description":"Layer overlay window capabilities","local":true,"windows":["layer","layer_ctrl"],"permissions":["core:default","core:window:allow-close","core:window:allow-hide","core:window:allow-show","core:window:allow-set-position","core:window:allow-outer-position","core:window:allow-start-dragging","core:event:default","core:event:allow-emit","core:event:allow-emit-to","core:event:allow-listen","core:event:allow-unlisten"]},"main-capability":{"identifier":"main-capability","description":"Main window capabilities","local":true,"windows":["main"],"permissions":["core:default","core:window:allow-set-always-on-top","core:window:allow-create","core:window:allow-close","core:window:allow-center","core:window:allow-set-size","core:window:allow-set-resizable","core:window:allow-set-decorations","core:window:allow-set-always-on-top","core:window:allow-set-fullscreen","core:window:allow-set-max-size","core:window:allow-set-min-size","core:window:allow-set-focus","core:window:allow-set-position","core:window:allow-current-monitor","core:window:allow-outer-position","core:event:default","core:event:allow-emit","core:event:allow-emit-to","core:event:allow-listen","core:event:allow-unlisten","store:default"]},"settings-capability":{"identifier":"settings-capability","description":"Settings window capabilities","local":true,"windows":["settings"],"permissions":["core:default","core:window:allow-close","core:window:allow-hide","core:window:allow-show","core:window:allow-set-focus","core:event:default","core:event:allow-emit","core:event:allow-emit-to","core:event:allow-listen","core:event:allow-unlisten","store:default"]},"timeup-capability":{"identifier":"timeup-capability","description":"Time Up window capabilities","local":true,"windows":["timeup"],"permissions":["core:default","core:window:allow-close"]}} \ No newline at end of file diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index c64ffab..b8635f3 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -5,7 +5,7 @@ use serde::{Deserialize, Serialize}; use std::fs; #[cfg(not(debug_assertions))] use std::net::{SocketAddr, TcpListener}; -use tauri::{AppHandle, Manager, WindowEvent}; +use tauri::{AppHandle, Emitter, Manager, WindowEvent}; use tauri_plugin_store::Builder as StoreBuilder; #[cfg(target_os = "macos")] @@ -356,6 +356,396 @@ async fn show_timeup_window(app: AppHandle) -> Result<(), String> { Ok(()) } +/// macOSで透過オーバーレイウィンドウを他アプリのフルスクリーン Space 上にも表示するように設定する。 +/// +/// - `panel_nonactivating = true` : NSPanel へクラススワップして nonactivating にする +/// (layer 本体。クリックスルーで入力不要なので副作用なし。フルスクリーンアプリ上に出る) +/// - `panel_nonactivating = false` : NSWindow のまま level と collectionBehavior のみ設定 +/// (layer_ctrl。NSPanel 化すると webview にクリックイベントが届かなくなるため。 +/// 他アプリのフルスクリーン Space には出ないが、クリック可能) +#[cfg(target_os = "macos")] +fn apply_macos_overlay_behavior(window: &tauri::WebviewWindow, panel_nonactivating: bool) { + use objc2::msg_send; + use objc2::runtime::AnyClass; + + let label = window.label().to_string(); + let _ = window.with_webview(move |webview| unsafe { + let ns_window_ptr = webview.ns_window() as *mut objc2::runtime::AnyObject; + if ns_window_ptr.is_null() { + println!("DEBUG[{}]: ns_window pointer is null", label); + return; + } + + if panel_nonactivating { + // NSWindow -> NSPanel へクラススワップ + if let Some(panel_class) = AnyClass::get(c"NSPanel") { + extern "C" { + fn object_setClass( + obj: *mut objc2::runtime::AnyObject, + cls: *const objc2::runtime::AnyClass, + ) -> *const objc2::runtime::AnyClass; + } + object_setClass(ns_window_ptr, panel_class); + println!("DEBUG[{}]: NSWindow -> NSPanel class swap done", label); + } + + // NonactivatingPanel スタイルマスク追加 + let current_mask: usize = msg_send![ns_window_ptr, styleMask]; + let new_mask = current_mask | (1usize << 7); + let _: () = msg_send![ns_window_ptr, setStyleMask: new_mask]; + + let _: () = msg_send![ns_window_ptr, setFloatingPanel: true]; + let _: () = msg_send![ns_window_ptr, setHidesOnDeactivate: false]; + } + + // CanJoinAllSpaces | Stationary | FullScreenAuxiliary + let behavior: usize = (1 << 0) | (1 << 4) | (1 << 8); + let _: () = msg_send![ns_window_ptr, setCollectionBehavior: behavior]; + + let level: isize = 1000; + let _: () = msg_send![ns_window_ptr, setLevel: level]; + + let applied_level: isize = msg_send![ns_window_ptr, level]; + let applied_mask: usize = msg_send![ns_window_ptr, styleMask]; + let applied_behavior: usize = msg_send![ns_window_ptr, collectionBehavior]; + println!( + "DEBUG[{}]: overlay applied (panel_nonactivating={}, level={}, styleMask=0x{:x}, collectionBehavior=0x{:x})", + label, panel_nonactivating, applied_level, applied_mask, applied_behavior + ); + }); +} + +/// レイヤーディスプレイウィンドウの既定位置とサイズ（論理ピクセル・グローバル座標）を計算する。 +/// 複数モニター環境では main ウィンドウが乗っているモニターを優先する +fn layer_default_geometry(app: &AppHandle) -> (f64, f64, f64, f64) { + let layer_width = 320.0; + let layer_height = 120.0; + if let Some(main) = app.get_webview_window("main") { + let monitor = main + .current_monitor() + .ok() + .flatten() + .or_else(|| main.primary_monitor().ok().flatten()); + if let Some(monitor) = monitor { + let pos = monitor.position(); + let size = monitor.size(); + let scale = monitor.scale_factor(); + let origin_x = pos.x as f64 / scale; + let origin_y = pos.y as f64 / scale; + let screen_w = size.width as f64 / scale; + let x = origin_x + screen_w - layer_width - 40.0; + let y = origin_y + 40.0; + return (x, y, layer_width, layer_height); + } + } + (1200.0, 40.0, layer_width, layer_height) +} + +/// 操作ハンドルの位置を元にディスプレイウィンドウの位置を同期する +fn sync_layer_to_ctrl(app: &AppHandle) { + let ctrl = match app.get_webview_window("layer_ctrl") { + Some(w) => w, + None => return, + }; + let layer = match app.get_webview_window("layer") { + Some(w) => w, + None => return, + }; + let ctrl_pos = match ctrl.outer_position() { + Ok(p) => p, + Err(_) => return, + }; + let ctrl_size = match ctrl.outer_size() { + Ok(s) => s, + Err(_) => return, + }; + let layer_size = match layer.outer_size() { + Ok(s) => s, + Err(_) => return, + }; + // 操作ハンドルの直上にディスプレイを中心合わせで配置 + let gap_physical: i32 = 8; + let new_x = ctrl_pos.x + (ctrl_size.width as i32) / 2 - (layer_size.width as i32) / 2; + let new_y = ctrl_pos.y - (layer_size.height as i32) - gap_physical; + let _ = layer.set_position(tauri::Position::Physical(tauri::PhysicalPosition { + x: new_x, + y: new_y, + })); +} + +#[tauri::command] +async fn show_layer_window(app: AppHandle) -> Result<(), String> { + println!("DEBUG: show_layer_window called"); + + let (default_x, default_y, layer_w, layer_h) = layer_default_geometry(&app); + let ctrl_w: f64 = 50.0; + let ctrl_h: f64 = 28.0; + let ctrl_gap: f64 = 8.0; + let ctrl_x = default_x + (layer_w - ctrl_w) / 2.0; + let ctrl_y = default_y + layer_h + ctrl_gap; + + // ディスプレイ用（透過・クリックスルー） + let layer_window = if let Some(w) = app.get_webview_window("layer") { + w.show() + .map_err(|e| format!("Failed to show layer: {}", e))?; + w + } else { + tauri::WebviewWindowBuilder::new(&app, "layer", tauri::WebviewUrl::App("layer.html".into())) + .title("Lightning Timer Overlay") + .inner_size(layer_w, layer_h) + .position(default_x, default_y) + .resizable(false) + .decorations(false) + .transparent(true) + .shadow(false) + .always_on_top(true) + .skip_taskbar(true) + .focused(false) + .visible(true) + .build() + .map_err(|e| format!("Failed to create layer window: {}", e))? + }; + + // クリックスルー有効化 + if let Err(e) = layer_window.set_ignore_cursor_events(true) { + println!("DEBUG: Failed to set ignore_cursor_events: {}", e); + } + + #[cfg(target_os = "macos")] + apply_macos_overlay_behavior(&layer_window, true); + + // 操作ハンドル（非クリックスルー・ドラッグ） + let _ctrl_window = if let Some(w) = app.get_webview_window("layer_ctrl") { + w.show() + .map_err(|e| format!("Failed to show layer_ctrl: {}", e))?; + w + } else { + tauri::WebviewWindowBuilder::new( + &app, + "layer_ctrl", + tauri::WebviewUrl::App("layer_ctrl.html".into()), + ) + .title("Lightning Timer Controls") + .inner_size(ctrl_w, ctrl_h) + .position(ctrl_x, ctrl_y) + .resizable(true) + .min_inner_size(ctrl_w, ctrl_h) + .max_inner_size(ctrl_w, ctrl_h) + .decorations(false) + .transparent(true) + .shadow(false) + .always_on_top(true) + .skip_taskbar(true) + .visible(true) + .build() + .map_err(|e| format!("Failed to create layer_ctrl window: {}", e))? + }; + + #[cfg(target_os = "macos")] + apply_macos_overlay_behavior(&_ctrl_window, false); + + // 初期位置同期 + sync_layer_to_ctrl(&app); + + Ok(()) +} + +/// 16進カラー文字列のサニタイズ。妥当でなければ既定値を返す +fn sanitize_hex_color(color: &str) -> String { + let trimmed = color.trim(); + if trimmed.starts_with('#') + && (trimmed.len() == 4 || trimmed.len() == 7 || trimmed.len() == 9) + && trimmed[1..].chars().all(|c| c.is_ascii_hexdigit()) + { + trimmed.to_string() + } else { + "#00ff66".to_string() + } +} + +#[tauri::command] +async fn update_layer_timer( + app: AppHandle, + minutes: u32, + seconds: u32, + show_time_up: bool, +) -> Result<(), String> { + if let Some(layer) = app.get_webview_window("layer") { + // min/max で値を妥当な範囲に丸める + let m = minutes.min(99); + let s = seconds.min(99); + let content = if show_time_up { + "TIME UP".to_string() + } else { + format!("{:02}:{:02}", m, s) + }; + let class_op = if show_time_up { "add" } else { "remove" }; + let script = format!( + "(function(){{var el=document.getElementById('time');if(!el)return;el.textContent='{}';el.classList.{}('timeup');}})();", + content, class_op + ); + if let Err(e) = layer.eval(&script) { + println!("DEBUG: Failed to eval layer timer: {}", e); + return Err(format!("Failed to update layer timer: {}", e)); + } + } + Ok(()) +} + +#[tauri::command] +async fn update_layer_style( + app: AppHandle, + color: String, + shadow: String, + font_size: f64, +) -> Result<(), String> { + let safe_color = sanitize_hex_color(&color); + let shadow_value = if shadow == "light" { + "0 0 8px rgba(255,255,255,0.95), 0 0 16px rgba(255,255,255,0.8), 0 2px 4px rgba(255,255,255,1)" + } else { + "0 0 8px rgba(0,0,0,0.9), 0 0 16px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,1)" + }; + let safe_font_size = font_size.clamp(1.0, 20.0); + + if let Some(layer) = app.get_webview_window("layer") { + let script = format!( + "(function(){{var r=document.documentElement;r.style.setProperty('--layer-color','{}');r.style.setProperty('--layer-shadow','{}');r.style.setProperty('--layer-font-size','{}rem');console.log('[layer] style set via eval',r.style.getPropertyValue('--layer-color'),r.style.getPropertyValue('--layer-font-size'));}})();", + safe_color, shadow_value, safe_font_size + ); + if let Err(e) = layer.eval(&script) { + println!("DEBUG: Failed to eval layer style: {}", e); + return Err(format!("Failed to update layer style: {}", e)); + } + println!( + "DEBUG: Layer style updated color={} shadow={} fontSize={}rem", + safe_color, shadow, safe_font_size + ); + } + Ok(()) +} + +#[tauri::command] +async fn hide_layer_window(app: AppHandle) -> Result<(), String> { + println!("DEBUG: hide_layer_window called"); + if let Some(w) = app.get_webview_window("layer") { + match w.hide() { + Ok(()) => println!("DEBUG: layer window hidden"), + Err(e) => println!("DEBUG: Failed to hide layer window: {}", e), + } + } else { + println!("DEBUG: layer window not found"); + } + if let Some(w) = app.get_webview_window("layer_ctrl") { + match w.hide() { + Ok(()) => println!("DEBUG: layer_ctrl window hidden"), + Err(e) => println!("DEBUG: Failed to hide layer_ctrl window: {}", e), + } + } else { + println!("DEBUG: layer_ctrl window not found"); + } + Ok(()) +} + +/// layer_ctrl の × ボタンから呼ばれる。 +/// 1 度の invoke で hide + main 通知までまとめて実行する。 +/// (JS 側で invoke → emitTo の 2 段にすると layer_ctrl 自体が消えてから emit するため +/// イベントが失われていた) +#[tauri::command] +async fn exit_layer_mode(app: AppHandle) -> Result<(), String> { + println!("DEBUG: exit_layer_mode called"); + // 先に main へ通知してから hide (順序が逆だと layer_ctrl のコンテキストが消える可能性がある) + if let Err(e) = app.emit_to( + tauri::EventTarget::webview_window("main"), + "layer-exit-requested", + (), + ) { + println!("DEBUG: Failed to emit layer-exit-requested: {}", e); + } + if let Some(w) = app.get_webview_window("layer") { + if let Err(e) = w.hide() { + println!("DEBUG: Failed to hide layer: {}", e); + } + } + if let Some(w) = app.get_webview_window("layer_ctrl") { + if let Err(e) = w.hide() { + println!("DEBUG: Failed to hide layer_ctrl: {}", e); + } + } + Ok(()) +} + +/// main ウィンドウが乗っているモニターの中心座標 (論理ピクセル) を計算する +fn center_on_main_monitor(app: &AppHandle, width: f64, height: f64) -> (f64, f64) { + if let Some(main) = app.get_webview_window("main") { + let monitor = main + .current_monitor() + .ok() + .flatten() + .or_else(|| main.primary_monitor().ok().flatten()); + if let Some(monitor) = monitor { + let pos = monitor.position(); + let size = monitor.size(); + let scale = monitor.scale_factor(); + let origin_x = pos.x as f64 / scale; + let origin_y = pos.y as f64 / scale; + let screen_w = size.width as f64 / scale; + let screen_h = size.height as f64 / scale; + let x = origin_x + (screen_w - width) / 2.0; + let y = origin_y + (screen_h - height) / 2.0; + return (x, y); + } + } + (200.0, 200.0) +} + +#[tauri::command] +async fn show_settings_window(app: AppHandle) -> Result<(), String> { + println!("DEBUG: show_settings_window called"); + let width = 540.0; + let height = 640.0; + + if let Some(w) = app.get_webview_window("settings") { + // 既存ウィンドウは現在のモニターに移動してから表示 + let (x, y) = center_on_main_monitor(&app, width, height); + let _ = w.set_position(tauri::Position::Logical(tauri::LogicalPosition { x, y })); + let _ = w.show(); + let _ = w.unminimize(); + let _ = w.set_focus(); + return Ok(()); + } + + let (x, y) = center_on_main_monitor(&app, width, height); + + let window = tauri::WebviewWindowBuilder::new( + &app, + "settings", + tauri::WebviewUrl::App("settings.html".into()), + ) + .title("Lightning Timer Settings") + .inner_size(width, height) + .min_inner_size(420.0, 480.0) + .position(x, y) + .resizable(true) + .decorations(true) + .always_on_top(false) + .skip_taskbar(false) + .visible(true) + .build() + .map_err(|e| format!("Failed to create settings window: {}", e))?; + + let _ = window.set_focus(); + Ok(()) +} + +#[tauri::command] +async fn hide_settings_window(app: AppHandle) -> Result<(), String> { + println!("DEBUG: hide_settings_window called"); + if let Some(w) = app.get_webview_window("settings") { + let _ = w.hide(); + } + Ok(()) +} + #[tauri::command] async fn hide_timeup_window(app: AppHandle) -> Result<(), String> { println!("DEBUG: hide_timeup_window command called"); @@ -391,22 +781,41 @@ fn main() { } Ok(()) }) - .invoke_handler(tauri::generate_handler![open_devtools, save_timer_state_on_exit, exit_app, start_drag, save_window_position, set_window_size, set_window_resizable, focus_window, get_available_port, show_timeup_window, hide_timeup_window]) + .invoke_handler(tauri::generate_handler![open_devtools, save_timer_state_on_exit, exit_app, start_drag, save_window_position, set_window_size, set_window_resizable, focus_window, get_available_port, show_timeup_window, hide_timeup_window, show_layer_window, hide_layer_window, update_layer_style, update_layer_timer, exit_layer_mode, show_settings_window, hide_settings_window]) .on_window_event(|window, event| { - if let WindowEvent::CloseRequested { .. } = event { - // タイマー状態保存を促す - if let Some(main_window) = window.app_handle().get_webview_window("main") { - let _ = main_window.eval("if (window.__TAURI__) { window.__TAURI__.core.invoke('save_timer_state_on_exit'); }"); - } + match event { + WindowEvent::CloseRequested { api, .. } => { + // settings ウィンドウは破棄せず非表示にして使い回す + if window.label() == "settings" { + api.prevent_close(); + let _ = window.hide(); + return; + } + // main ウィンドウが閉じられた場合のみアプリ全体を終了 + if window.label() != "main" { + return; + } + // タイマー状態保存を促す + if let Some(main_window) = window.app_handle().get_webview_window("main") { + let _ = main_window.eval("if (window.__TAURI__) { window.__TAURI__.core.invoke('save_timer_state_on_exit'); }"); + } - // ウィンドウが閉じられる前に状態を保存 - if let Some(main_window) = window.app_handle().get_webview_window("main") { - if let Err(e) = save_window_state(&main_window) { - println!("DEBUG: Failed to save window state: {}", e); + // ウィンドウが閉じられる前に状態を保存 + if let Some(main_window) = window.app_handle().get_webview_window("main") { + if let Err(e) = save_window_state(&main_window) { + println!("DEBUG: Failed to save window state: {}", e); + } + } + // メインウィンドウが閉じられた際にアプリケーション全体を終了 + std::process::exit(0); + } + WindowEvent::Moved(_) => { + // 操作ハンドルが動いたらディスプレイも追従させる + if window.label() == "layer_ctrl" { + sync_layer_to_ctrl(window.app_handle()); } } - // メインウィンドウが閉じられた際にアプリケーション全体を終了 - std::process::exit(0); + _ => {} } }) .run(tauri::generate_context!()) diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index b4cf5f9..7d4c914 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -9,6 +9,7 @@ "frontendDist": "../dist" }, "app": { + "macOSPrivateApi": true, "windows": [ { "label": "main", @@ -27,7 +28,7 @@ } ], "security": { - "capabilities": ["main-capability", "timeup-capability"] + "capabilities": ["main-capability", "timeup-capability", "layer-capability", "settings-capability"] } }, "bundle": { diff --git a/src/App.tsx b/src/App.tsx index 460d295..8850535 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,15 +1,20 @@ import React, { useState, useEffect, useCallback, useRef } from "react"; import { invoke, isTauri } from "@tauri-apps/api/core"; import { getCurrentWindow, currentMonitor, LogicalSize, PhysicalPosition } from "@tauri-apps/api/window"; +import { listen } from "@tauri-apps/api/event"; import { Store } from "@tauri-apps/plugin-store"; import TimerDisplay from "./components/TimerDisplay"; import TimerControls from "./components/TimerControls"; -import Settings from "./components/Settings"; import Help from "./components/Help"; import AboutInfo from "./components/AboutInfo"; import { TimerState, Settings as SettingsType } from "./types"; +import { useTranslation } from "./i18n/useTranslation"; +import { initLanguage } from "./i18n"; +import type { LanguageSetting } from "./i18n"; const App: React.FC = () => { + const { t, setLanguage: setI18nLanguage } = useTranslation(); + // Tauri APIの状態を確認 useEffect(() => { // Tauri APIの初期化確認 @@ -37,6 +42,10 @@ const App: React.FC = () => { alarmVolume: 0.8, displayMode: "normal", // 常に通常モードで起動 showTimeUpWindow: true, // デフォルトでTime Up画面を表示 + layerTextColor: "#00ff66", + layerShadowStyle: "dark", + layerFontSize: 6, + language: "auto", }); // TimeUP表示の状態管理 @@ -93,8 +102,16 @@ const App: React.FC = () => { darkMode: savedSettings.darkMode ?? false, alarmSound: savedSettings.alarmSound ?? "alarm.mp3", alarmVolume: savedSettings.alarmVolume ?? 0.8, - displayMode: savedSettings.displayMode ?? (savedSettings.compactMode ? "compact" : "normal"), + displayMode: (savedSettings.displayMode === "compact" || savedSettings.displayMode === "minimal" ? savedSettings.displayMode : (savedSettings.compactMode ? "compact" : "normal")), showTimeUpWindow: savedSettings.showTimeUpWindow ?? true, + layerTextColor: savedSettings.layerTextColor ?? "#00ff66", + layerShadowStyle: savedSettings.layerShadowStyle ?? "dark", + layerFontSize: typeof savedSettings.layerFontSize === "number" && savedSettings.layerFontSize > 0 + ? savedSettings.layerFontSize + : 6, + language: savedSettings.language === "en" || savedSettings.language === "ja" || savedSettings.language === "auto" + ? savedSettings.language + : "auto", }; setSettings(convertedSettings); } @@ -115,16 +132,23 @@ const App: React.FC = () => { } }, []); - const [showSettings, setShowSettings] = useState(false); const [showHelp, setShowHelp] = useState(false); const [showAboutInfo, setShowAboutInfo] = useState(false); + const openSettings = useCallback(async () => { + if (!isTauri()) return; + try { + await invoke("show_settings_window"); + } catch (err) { + console.error("Failed to open settings window:", err); + } + }, []); + // 最後に設定した時間を記憶する状態 const [lastSetTime, setLastSetTime] = useState<{ minutes: number; seconds: number; } | null>(null); - const [hasNumberBeenEdited, setHasNumberBeenEdited] = useState(false); const timeUpWindowShownRef = useRef(false); const loadTimerState = useCallback(async () => { @@ -275,9 +299,6 @@ const App: React.FC = () => { const totalSeconds = minutes * 60 + seconds; - // 数字が編集されたことを記録 - setHasNumberBeenEdited(true); - setTimerState((prev) => { const newState = { ...prev, @@ -314,23 +335,20 @@ const App: React.FC = () => { // アラーム音を停止 stopAlarm(); - // 数字が編集されていた場合のみ、現在の時間を記憶 - if (hasNumberBeenEdited) { + // 新規開始時（一時停止からの再開でない場合）は現在の時間を記憶 + if (!timerState.isPaused) { setLastSetTime({ minutes: timerState.minutes, seconds: timerState.seconds, }); - setHasNumberBeenEdited(false); // フラグをリセット } - // タイマー開始時の処理（フラグ管理を削除） - setTimerState((prev) => ({ ...prev, isRunning: true, isPaused: false, })); - }, [hasNumberBeenEdited, timerState.minutes, timerState.seconds, stopAlarm]); + }, [timerState.minutes, timerState.seconds, timerState.isPaused, stopAlarm]); const pauseTimer = useCallback(() => { setTimerState((prev) => ({ @@ -349,7 +367,6 @@ const App: React.FC = () => { // リセット時に記憶もクリア setLastSetTime(null); - setHasNumberBeenEdited(false); setTimerState((prev) => ({ ...prev, @@ -422,26 +439,26 @@ const App: React.FC = () => { }; }, [timerState.minutes, timerState.seconds, lastSetTime]); - // 設定変更を処理する関数 - const handleSettingsChange = useCallback( + // 設定ウィンドウから配信された設定を反映する（保存はせず副作用は useEffect で吸収） + const applyExternalSettings = useCallback( async (newSettings: SettingsType) => { - // Always on topの設定を適用 - if (isTauri() && newSettings.alwaysOnTop !== settings.alwaysOnTop) { - try { - const currentWindow = getCurrentWindow(); - await currentWindow.setAlwaysOnTop(newSettings.alwaysOnTop); - } catch (error) { - console.error("Failed to set always on top:", error); - } - } - setSettings(newSettings); - // 設定を保存 - await saveSettings(newSettings); + // 言語が変わった場合はi18nも同期 + initLanguage(newSettings.language); + setI18nLanguage(newSettings.language as LanguageSetting); }, - [settings.alwaysOnTop, saveSettings] + [setI18nLanguage] ); + // alwaysOnTop はストア起動読み込み時にも外部変更時にも自動で OS 側へ反映 + useEffect(() => { + if (!isTauri()) return; + const currentWindow = getCurrentWindow(); + currentWindow.setAlwaysOnTop(settings.alwaysOnTop).catch((error) => { + console.error("Failed to apply alwaysOnTop:", error); + }); + }, [settings.alwaysOnTop]); + const handlePowerButtonClick = async () => { if (isTauri()) { try { @@ -487,61 +504,87 @@ const App: React.FC = () => { } }; - const handleCompactModeToggle = useCallback(async () => { - // 通常 → 簡易 → ミニマム → 通常の順で循環 - const nextMode: "normal" | "compact" | "minimal" = - settings.displayMode === "normal" ? "compact" : - settings.displayMode === "compact" ? "minimal" : - "normal"; + // 表示モード遷移の共通ロジック + const transitionToMode = useCallback( + async (nextMode: "normal" | "compact" | "minimal") => { + const prevMode = settings.displayMode; + if (prevMode === nextMode) return; + + const newSettings = { ...settings, displayMode: nextMode }; + setSettings(newSettings); + // 表示モードの状態は保存しない - const newSettings = { ...settings, displayMode: nextMode }; - setSettings(newSettings); - // 表示モードの状態は保存しない + if (!isTauri()) return; + + const currentWindow = getCurrentWindow(); - // ウィンドウサイズを変更 - if (isTauri()) { try { + // フルスクリーン中はモード切り替え時に解除 + if (isFullscreen) { + setIsFullscreen(false); + if (savedWindowGeometryRef.current) { + const { x, y } = savedWindowGeometryRef.current; + await currentWindow.setPosition(new PhysicalPosition(x, y)); + savedWindowGeometryRef.current = null; + } + } + let width: number; let height: number; - if (nextMode === "normal") { width = 800; height = 200; } else if (nextMode === "compact") { width = 400; height = 200; - } else { // minimal + } else { + // minimal width = 200; height = 100; } - const currentWindow = getCurrentWindow(); - - // フルスクリーン中はモード切り替え時に解除 - if (isFullscreen) { - setIsFullscreen(false); - // 保存しておいた位置に戻す - if (savedWindowGeometryRef.current) { - const { x, y } = savedWindowGeometryRef.current; - await currentWindow.setPosition(new PhysicalPosition(x, y)); - savedWindowGeometryRef.current = null; - } - } - - // サイズ制約を一旦解除してからリサイズ await currentWindow.setMinSize(null); await currentWindow.setMaxSize(null); await invoke("set_window_size", { width, height }); - - // min/maxサイズ制約でリサイズを防止 const size = new LogicalSize(width, height); await currentWindow.setMinSize(size); await currentWindow.setMaxSize(size); } catch (error) { - console.error("Failed to set window size:", error); + console.error("Failed to transition display mode:", error); } + }, + [settings, isFullscreen] + ); + + const handleCompactModeToggle = useCallback(async () => { + // 通常 → 簡易 → ミニマム → 通常の順で循環 + const nextMode: "normal" | "compact" | "minimal" = + settings.displayMode === "normal" ? "compact" : + settings.displayMode === "compact" ? "minimal" : + "normal"; + await transitionToMode(nextMode); + }, [settings.displayMode, transitionToMode]); + + // レイヤー表示の有効/無効（永続化しない） + const [layerEnabled, setLayerEnabled] = useState(false); + + const toggleLayer = useCallback(async () => { + if (!isTauri()) { + setLayerEnabled((v) => !v); + return; + } + const next = !layerEnabled; + try { + if (next) { + await invoke("show_layer_window"); + } else { + await invoke("hide_layer_window"); + } + setLayerEnabled(next); + } catch (error) { + console.error("Failed to toggle layer:", error); } - }, [settings, isFullscreen]); + }, [layerEnabled]); // フルスクリーン切り替え（手動フルスクリーン：ネイティブのsetFullscreenはmacOSデュアルディスプレイで問題があるため使わない） const handleFullscreenToggle = useCallback(async () => { @@ -695,62 +738,20 @@ const App: React.FC = () => { // Vキーで表示モード切り替え（通常 → 簡易 → ミニマム → 通常） else if (key === "v") { event.preventDefault(); - - // 通常 → 簡易 → ミニマム → 通常の順で循環 const nextMode: "normal" | "compact" | "minimal" = settings.displayMode === "normal" ? "compact" : settings.displayMode === "compact" ? "minimal" : "normal"; + await transitionToMode(nextMode); + } - const newSettings = { ...settings, displayMode: nextMode }; - setSettings(newSettings); - - // ウィンドウサイズを変更 - if (isTauri()) { - try { - let width: number; - let height: number; - - if (nextMode === "normal") { - width = 800; - height = 200; - } else if (nextMode === "compact") { - width = 400; - height = 200; - } else { // minimal - width = 200; - height = 100; - } - - const currentWindow = getCurrentWindow(); - - // フルスクリーン中はモード切り替え時に解除 - if (isFullscreen) { - setIsFullscreen(false); - // 保存しておいた位置に戻す - if (savedWindowGeometryRef.current) { - const { x, y } = savedWindowGeometryRef.current; - await currentWindow.setPosition(new PhysicalPosition(x, y)); - savedWindowGeometryRef.current = null; - } - } - - // サイズ制約を一旦解除してからリサイズ - await currentWindow.setMinSize(null); - await currentWindow.setMaxSize(null); - await invoke("set_window_size", { width, height }); - - // min/maxサイズ制約でリサイズを防止 - const size = new LogicalSize(width, height); - await currentWindow.setMinSize(size); - await currentWindow.setMaxSize(size); - } catch (error) { - console.error("Failed to set window size:", error); - } - } + // Lキーでレイヤー表示の ON/OFF 切り替え + else if (key === "l") { + event.preventDefault(); + await toggleLayer(); } }, - [timerState, startTimer, pauseTimer, resetTimer, updateTimerBoth, settings, stopAlarm, handleFullscreenToggle, isFullscreen] + [timerState, startTimer, pauseTimer, resetTimer, updateTimerBoth, settings.displayMode, stopAlarm, handleFullscreenToggle, transitionToMode, toggleLayer] ); // キーボードイベントリスナーの設定 @@ -801,6 +802,101 @@ const App: React.FC = () => { }; }, [stopAlarm]); + // レイヤー表示中、タイマー状態をオーバーレイへ直接反映 (webview.eval 経由) + useEffect(() => { + if (!isTauri()) return; + if (!layerEnabled) return; + + invoke("update_layer_timer", { + minutes: timerState.minutes, + seconds: timerState.seconds, + showTimeUp, + }).catch((error) => { + console.error("Failed to update layer timer:", error); + }); + }, [ + layerEnabled, + timerState.minutes, + timerState.seconds, + showTimeUp, + ]); + + // レイヤー表示中、文字色・影スタイルの変更を反映 + // (event だと到達しないことがあるため Rust の webview.eval で直接更新) + useEffect(() => { + if (!isTauri()) return; + if (!layerEnabled) return; + + invoke("update_layer_style", { + color: settings.layerTextColor, + shadow: settings.layerShadowStyle, + fontSize: settings.layerFontSize, + }).catch((error) => { + console.error("Failed to update layer style:", error); + }); + }, [layerEnabled, settings.layerTextColor, settings.layerShadowStyle, settings.layerFontSize]); + + // レイヤーウィンドウからの退出要求を受信 + useEffect(() => { + if (!isTauri()) return; + + const unlistenPromise = listen("layer-exit-requested", () => { + invoke("hide_layer_window").catch(() => {}); + setLayerEnabled(false); + }); + + return () => { + unlistenPromise.then((unlisten) => unlisten()).catch(() => {}); + }; + }, []); + + // 設定ウィンドウからの設定変更を反映 + useEffect(() => { + if (!isTauri()) return; + + const unlistenPromise = listen("settings-changed", (event) => { + applyExternalSettings(event.payload); + }); + + return () => { + unlistenPromise.then((unlisten) => unlisten()).catch(() => {}); + }; + }, [applyExternalSettings]); + + // レイヤーウィンドウ初期化時に現在値とスタイルを即時送信 + useEffect(() => { + if (!isTauri()) return; + + const unlistenPromise = listen("layer-ready", () => { + invoke("update_layer_style", { + color: settings.layerTextColor, + shadow: settings.layerShadowStyle, + fontSize: settings.layerFontSize, + }).catch((error) => { + console.error("Failed to update layer style on ready:", error); + }); + invoke("update_layer_timer", { + minutes: timerState.minutes, + seconds: timerState.seconds, + showTimeUp, + }).catch((error) => { + console.error("Failed to update layer timer on ready:", error); + }); + }); + + return () => { + unlistenPromise.then((unlisten) => unlisten()).catch(() => {}); + }; + }, [ + timerState.minutes, + timerState.seconds, + timerState.isRunning, + showTimeUp, + settings.layerTextColor, + settings.layerShadowStyle, + settings.layerFontSize, + ]); + return (
{ @@ -821,14 +917,38 @@ const App: React.FC = () => { className="compact-toggle-button" onClick={handleCompactModeToggle} title={ - settings.displayMode === "normal" ? "簡易表示モード" : - settings.displayMode === "compact" ? "ミニマム表示モード" : - "通常表示に戻す" + settings.displayMode === "normal" ? t("tooltips.compactMode") : + settings.displayMode === "compact" ? t("tooltips.minimalMode") : + t("tooltips.normalMode") } > - {settings.displayMode === "normal" ? "⊡" : - settings.displayMode === "compact" ? "⧉" : - "⊞"} + {settings.displayMode === "normal" ? ( + + + + + ) : settings.displayMode === "compact" ? ( + + + + + ) : ( + + + + )} + + + {/* レイヤー表示 ON/OFF ボタン */} + {/* フルスクリーン切り替えボタン（右上） - 簡易モードのみ表示 */} @@ -836,9 +956,23 @@ const App: React.FC = () => { )} @@ -847,7 +981,7 @@ const App: React.FC = () => { @@ -869,7 +1003,7 @@ const App: React.FC = () => { onStart={startTimer} onPause={pauseTimer} onReset={resetTimer} - onSettings={() => setShowSettings(true)} + onSettings={openSettings} onHelp={() => setShowHelp(true)} onMinutesChange={(minutes) => updateTimer(minutes, timerState.seconds) @@ -888,14 +1022,6 @@ const App: React.FC = () => { )}
- {showSettings && ( - setShowSettings(false)} - onSettingsChange={handleSettingsChange} - /> - )} - {showHelp && ( setShowHelp(false)} /> )} diff --git a/src/SettingsApp.tsx b/src/SettingsApp.tsx new file mode 100644 index 0000000..c905087 --- /dev/null +++ b/src/SettingsApp.tsx @@ -0,0 +1,415 @@ +import React, { useCallback, useEffect, useRef, useState } from "react"; +import { invoke, isTauri } from "@tauri-apps/api/core"; +import { emit, listen } from "@tauri-apps/api/event"; +import { Store } from "@tauri-apps/plugin-store"; +import { Settings as SettingsType } from "./types"; +import { useTranslation } from "./i18n/useTranslation"; +import { initLanguage } from "./i18n"; +import type { LanguageSetting } from "./i18n"; + +const DEFAULT_SETTINGS: SettingsType = { + alwaysOnTop: false, + darkMode: false, + alarmSound: "alarm.mp3", + alarmVolume: 0.8, + displayMode: "normal", + showTimeUpWindow: true, + layerTextColor: "#00ff66", + layerShadowStyle: "dark", + layerFontSize: 6, + language: "auto", +}; + +const LAYER_FONT_SIZE_MIN = 2; +const LAYER_FONT_SIZE_MAX = 14; +const LAYER_FONT_SIZE_STEP = 0.5; + +const ALARM_SOUNDS = [ + { value: "alarm.mp3", label: "Alarm" }, + { value: "gong.mp3", label: "Gong" }, + { value: "marimba.mp3", label: "Marimba" }, + { value: "pulse.mp3", label: "Pulse" }, + { value: "symbal.mp3", label: "Symbal" }, +]; + +const COLOR_PRESETS = [ + "#00ff66", + "#ffffff", + "#000000", + "#ffeb3b", + "#ff5252", + "#40c4ff", + "#ff9800", + "#e040fb", +]; + +function normalizeSettings( + saved: (Partial & { compactMode?: boolean }) | null +): SettingsType { + if (!saved) return DEFAULT_SETTINGS; + return { + alwaysOnTop: saved.alwaysOnTop ?? DEFAULT_SETTINGS.alwaysOnTop, + darkMode: saved.darkMode ?? DEFAULT_SETTINGS.darkMode, + alarmSound: saved.alarmSound ?? DEFAULT_SETTINGS.alarmSound, + alarmVolume: saved.alarmVolume ?? DEFAULT_SETTINGS.alarmVolume, + displayMode: + saved.displayMode === "compact" || saved.displayMode === "minimal" + ? saved.displayMode + : saved.compactMode + ? "compact" + : "normal", + showTimeUpWindow: saved.showTimeUpWindow ?? DEFAULT_SETTINGS.showTimeUpWindow, + layerTextColor: saved.layerTextColor ?? DEFAULT_SETTINGS.layerTextColor, + layerShadowStyle: saved.layerShadowStyle ?? DEFAULT_SETTINGS.layerShadowStyle, + layerFontSize: + typeof saved.layerFontSize === "number" && saved.layerFontSize > 0 + ? saved.layerFontSize + : DEFAULT_SETTINGS.layerFontSize, + language: + saved.language === "en" || saved.language === "ja" || saved.language === "auto" + ? saved.language + : DEFAULT_SETTINGS.language, + }; +} + +const SettingsApp: React.FC = () => { + const { t, setLanguage: setI18nLanguage } = useTranslation(); + const [settings, setSettings] = useState(DEFAULT_SETTINGS); + const [loaded, setLoaded] = useState(false); + const [isPlaying, setIsPlaying] = useState(false); + const audioRef = useRef(null); + + // 起動時にストアから読み込み + useEffect(() => { + (async () => { + if (!isTauri()) { + setLoaded(true); + return; + } + try { + const store = await Store.load("settings.json"); + const saved = await store.get< + Partial & { compactMode?: boolean } + >("settings"); + setSettings(normalizeSettings(saved ?? null)); + } catch (err) { + console.error("Failed to load settings:", err); + } + setLoaded(true); + })(); + }, []); + + // ダークモードを設定ウィンドウにも反映 + useEffect(() => { + document.documentElement.classList.toggle("dark", settings.darkMode); + document.documentElement.classList.toggle("light", !settings.darkMode); + }, [settings.darkMode]); + + // メインからの設定プッシュを反映（同期保つ） + useEffect(() => { + if (!isTauri()) return; + const p = listen("settings-pushed", (event) => { + setSettings(event.payload); + // 言語が変わった場合はi18nも同期 + initLanguage(event.payload.language); + setI18nLanguage(event.payload.language as LanguageSetting); + }); + return () => { + p.then((u) => u()).catch(() => {}); + }; + }, [setI18nLanguage]); + + const persist = useCallback(async (next: SettingsType) => { + setSettings(next); + if (!isTauri()) return; + try { + const store = await Store.load("settings.json"); + await store.set("settings", next); + await store.save(); + // メインへ通知（emitTo で main に直接配信） + try { + const { emitTo } = await import("@tauri-apps/api/event"); + await emitTo("main", "settings-changed", next); + } catch { + await emit("settings-changed", next); + } + } catch (err) { + console.error("Failed to save settings:", err); + } + }, []); + + const update = useCallback( + (key: K, value: SettingsType[K]) => { + void persist({ ...settings, [key]: value }); + }, + [persist, settings] + ); + + const handleLanguageChange = useCallback( + (value: string) => { + const lang = value as LanguageSetting; + setI18nLanguage(lang); + initLanguage(lang); + void persist({ ...settings, language: lang as SettingsType["language"] }); + }, + [persist, settings, setI18nLanguage] + ); + + const handleClose = useCallback(async () => { + if (!isTauri()) return; + try { + await invoke("hide_settings_window"); + } catch (err) { + console.error("Failed to close settings window:", err); + } + }, []); + + const handleTestSound = useCallback(() => { + if (isPlaying) { + if (audioRef.current) { + audioRef.current.pause(); + audioRef.current.currentTime = 0; + audioRef.current = null; + } + setIsPlaying(false); + return; + } + const audio = new Audio(`/sounds/${settings.alarmSound}`); + audio.volume = settings.alarmVolume; + audioRef.current = audio; + audio.addEventListener("ended", () => { + setIsPlaying(false); + audioRef.current = null; + }); + audio.addEventListener("error", () => { + console.error("Failed to play test sound"); + setIsPlaying(false); + audioRef.current = null; + }); + audio + .play() + .then(() => setIsPlaying(true)) + .catch((err) => { + console.error("Failed to play test sound:", err); + setIsPlaying(false); + audioRef.current = null; + }); + }, [isPlaying, settings.alarmSound, settings.alarmVolume]); + + // Esc キーで閉じる + useEffect(() => { + const handler = (e: KeyboardEvent) => { + if (e.key === "Escape") { + void handleClose(); + } + }; + document.addEventListener("keydown", handler); + return () => document.removeEventListener("keydown", handler); + }, [handleClose]); + + if (!loaded) { + return
Loading…
; + } + + return ( +
+
+

{t("settings.title")}

+ +
+ +
+
+

{t("settings.language.title")}

+
+ {t("settings.language.label")} +
+ +
+
+

{t("settings.language.hint")}

+
+ +
+

{t("settings.window.title")}

+
+ +

{t("settings.window.alwaysOnTopHint")}

+
+
+ +

{t("settings.window.darkModeHint")}

+
+
+ +

{t("settings.window.showTimeUpWindowHint")}

+
+
+ +
+

{t("settings.alarm.title")}

+
+ {t("settings.alarm.sound")} +
+ + +
+
+
+ +
+

{t("settings.layer.title")}

+
+ {t("settings.layer.textColor")} +
+ update("layerTextColor", e.target.value)} + /> + update("layerTextColor", e.target.value)} + spellCheck={false} + /> +
+ {COLOR_PRESETS.map((color) => ( +
+
+

{t("settings.layer.textColorHint")}

+
+
+ {t("settings.layer.shadow")} +
+ + +
+
+
+ + {t("settings.layer.fontSize")} + {settings.layerFontSize.toFixed(1)} rem + +
+ update("layerFontSize", parseFloat(e.target.value))} + /> + +
+
+
+
+ 12:34 +
+

{t("settings.layer.preview")}

+
+
+
+
+ ); +}; + +export default SettingsApp; diff --git a/src/components/AboutInfo.tsx b/src/components/AboutInfo.tsx index 29e4713..22628ae 100644 --- a/src/components/AboutInfo.tsx +++ b/src/components/AboutInfo.tsx @@ -1,20 +1,21 @@ import React from "react"; import packageJson from "../../package.json"; +import { useTranslation } from "../i18n/useTranslation"; interface AboutInfoProps { onClose: () => void; } const AboutInfo: React.FC = ({ onClose }) => { - // package.jsonから情報を取得 - const appName = "Lightning Timer"; // tauri.conf.jsonのproductName（表示名） - const appVersion = packageJson.version; // package.jsonのversion + const { t } = useTranslation(); + const appName = "Lightning Timer"; + const appVersion = packageJson.version; return (
e.stopPropagation()}>
-

About

+

{t("about.title")}

@@ -29,7 +30,7 @@ const AboutInfo: React.FC = ({ onClose }) => {

{appName}

-

Version {appVersion}

+

{t("about.version")} {appVersion}

diff --git a/src/components/Help.tsx b/src/components/Help.tsx index 77a34e6..3a8b226 100644 --- a/src/components/Help.tsx +++ b/src/components/Help.tsx @@ -1,25 +1,29 @@ import React from "react"; +import { useTranslation } from "../i18n/useTranslation"; interface HelpProps { onClose: () => void; } const Help: React.FC = ({ onClose }) => { + const { t } = useTranslation(); + const shortcuts = [ - { key: "0-9", description: "Set timer time (left shift method)" }, - { key: "S", description: "Start/Pause timer" }, - { key: "Space", description: "Start/Pause timer" }, - { key: "Enter", description: "Start/Pause timer" }, - { key: "R", description: "Reset timer" }, - { key: "V", description: "Toggle compact mode" }, - { key: "Cmd/Ctrl+Enter", description: "Toggle fullscreen" }, + { key: "0-9", description: t("help.shortcuts.numbers") }, + { key: "S", description: t("help.shortcuts.startPause") }, + { key: "Space", description: t("help.shortcuts.startPause") }, + { key: "Enter", description: t("help.shortcuts.startPause") }, + { key: "R", description: t("help.shortcuts.reset") }, + { key: "V", description: t("help.shortcuts.toggleCompactMode") }, + { key: "L", description: t("help.shortcuts.toggleLayer") }, + { key: "Cmd/Ctrl+Enter", description: t("help.shortcuts.toggleFullscreen") }, ]; return (
e.stopPropagation()}>
-

Keyboard Shortcuts

+

{t("help.title")}

@@ -29,8 +33,8 @@ const Help: React.FC = ({ onClose }) => { - - + + diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx deleted file mode 100644 index 735a82a..0000000 --- a/src/components/Settings.tsx +++ /dev/null @@ -1,163 +0,0 @@ -import React, { useState, useRef } from "react"; -import { SettingsProps } from "../types"; - -const Settings: React.FC = ({ - settings, - onClose, - onSettingsChange, -}) => { - const [isPlaying, setIsPlaying] = useState(false); - const audioRef = useRef(null); - const handleAlwaysOnTopChange = (checked: boolean) => { - onSettingsChange({ - ...settings, - alwaysOnTop: checked, - }); - }; - - const handleDarkModeChange = (checked: boolean) => { - onSettingsChange({ - ...settings, - darkMode: checked, - }); - }; - - const handleAlarmSoundChange = (sound: string) => { - // 再生中の場合、停止する - if (isPlaying && audioRef.current) { - audioRef.current.pause(); - audioRef.current.currentTime = 0; - audioRef.current = null; - setIsPlaying(false); - } - - onSettingsChange({ - ...settings, - alarmSound: sound, - }); - }; - - const handleShowTimeUpWindowChange = (checked: boolean) => { - onSettingsChange({ - ...settings, - showTimeUpWindow: checked, - }); - }; - - const handleTestSound = () => { - if (isPlaying) { - // 停止 - if (audioRef.current) { - audioRef.current.pause(); - audioRef.current.currentTime = 0; - audioRef.current = null; - } - setIsPlaying(false); - } else { - // 再生 - const audio = new Audio(`/sounds/${settings.alarmSound}`); - audio.volume = settings.alarmVolume; - audioRef.current = audio; - - audio.addEventListener('ended', () => { - setIsPlaying(false); - audioRef.current = null; - }); - - audio.addEventListener('error', () => { - console.error("Failed to play test sound"); - setIsPlaying(false); - audioRef.current = null; - }); - - audio.play().then(() => { - setIsPlaying(true); - }).catch((error) => { - console.error("Failed to play test sound:", error); - setIsPlaying(false); - audioRef.current = null; - }); - } - }; - - // アラーム音の選択肢 - const alarmSounds = [ - { value: "alarm.mp3", label: "alarm" }, - { value: "gong.mp3", label: "gong" }, - { value: "marimba.mp3", label: "marimba" }, - { value: "pulse.mp3", label: "pulse" }, - { value: "symbal.mp3", label: "symbal" }, - ]; - - return ( -
-
-
-

Settings

- -
- -
-
-
- - - -
-
- -
- -
-
-
-
- ); -}; - -export default Settings; diff --git a/src/components/TimerControls.tsx b/src/components/TimerControls.tsx index 23bd961..4e37cb5 100644 --- a/src/components/TimerControls.tsx +++ b/src/components/TimerControls.tsx @@ -1,5 +1,6 @@ import React, { useCallback } from "react"; import { TimerControlsProps } from "../types"; +import { useTranslation } from "../i18n/useTranslation"; const TimerControls: React.FC = ({ minutes, @@ -16,6 +17,8 @@ const TimerControls: React.FC = ({ alarmVolume, onAlarmVolumeChange, }) => { + const { t } = useTranslation(); + const handleNumberClick = useCallback( (number: number) => { // 文字列操作による左シフト動作 @@ -252,8 +255,8 @@ const TimerControls: React.FC = ({ disabled={minutes === 0 && seconds === 0} title={ minutes === 0 && seconds === 0 - ? "時間を設定してください" - : "タイマーを開始" + ? t("tooltips.setTimeFirst") + : t("tooltips.startTimer") } > Start diff --git a/src/i18n/en.ts b/src/i18n/en.ts new file mode 100644 index 0000000..26015ba --- /dev/null +++ b/src/i18n/en.ts @@ -0,0 +1,86 @@ +const en = { + settings: { + title: "Settings", + close: "Close (Esc)", + window: { + title: "Window", + alwaysOnTop: "Always on top", + alwaysOnTopHint: "Keep timer window always on top", + darkMode: "Dark mode", + darkModeHint: "Toggle UI theme", + showTimeUpWindow: 'Show "Time Up" window', + showTimeUpWindowHint: 'Show full-screen "Time Up" screen when timer ends', + }, + alarm: { + title: "Alarm", + sound: "Sound", + testPlay: "Play", + testStop: "Stop", + }, + layer: { + title: "Layer overlay", + textColor: "Text color", + textColorHint: + "Choose the digit color for the layer overlay. Adjust to match your background.", + shadow: "Shadow", + darkShadow: "Dark shadow", + darkShadowHint: "For light backgrounds", + lightShadow: "Light shadow", + lightShadowHint: "For dark backgrounds", + fontSize: "Font size", + resetToDefault: "Reset", + resetToDefaultTitle: "Reset to default", + preview: "Preview", + }, + language: { + title: "Language", + label: "Display language", + hint: "Change the UI language (timer display always remains in English)", + auto: "Auto (OS language)", + en: "English", + ja: "Japanese", + }, + }, + help: { + title: "Keyboard Shortcuts", + keyColumn: "Key", + actionColumn: "Action", + shortcuts: { + numbers: "Set timer time (left shift method)", + startPause: "Start/Pause timer", + reset: "Reset timer", + toggleCompactMode: "Toggle display mode", + toggleFullscreen: "Toggle fullscreen", + toggleLayer: "Toggle layer overlay", + }, + }, + about: { + title: "About", + version: "Version", + }, + tooltips: { + exitApp: "Exit application", + compactMode: "Compact display mode", + minimalMode: "Minimal display mode", + normalMode: "Return to normal display", + layerOn: "Show layer overlay (L)", + layerOff: "Hide layer overlay (L)", + fullscreen: "Fullscreen", + windowMode: "Return to windowed mode", + appInfo: "App Info", + setTimeFirst: "Set time first", + startTimer: "Start timer", + }, + timeup: { + subtitle: "The time has come.", + instruction: "Click or press the Esc key to close", + }, +} as const; + +// Recursively widen all string literal types to string +type Widen = T extends string + ? string + : { [K in keyof T]: Widen }; + +export type Translations = Widen; +export default en; diff --git a/src/i18n/index.ts b/src/i18n/index.ts new file mode 100644 index 0000000..5910ef3 --- /dev/null +++ b/src/i18n/index.ts @@ -0,0 +1,58 @@ +import en from "./en"; +import ja from "./ja"; +import type { Translations } from "./en"; + +export type Language = "en" | "ja"; +export type LanguageSetting = Language | "auto"; + +const translations: Record = { en, ja }; + +let currentLanguage: Language = "en"; + +function detectOSLanguage(): Language { + const nav = navigator.language; + if (nav.startsWith("ja")) return "ja"; + return "en"; +} + +function resolveLanguage(setting: LanguageSetting): Language { + if (setting === "auto") return detectOSLanguage(); + return setting; +} + +export function initLanguage(saved?: string): void { + const setting: LanguageSetting = + saved === "en" || saved === "ja" || saved === "auto" ? saved : "auto"; + currentLanguage = resolveLanguage(setting); + localStorage.setItem("lightning-timer-language", currentLanguage); +} + +export function getLanguage(): Language { + return currentLanguage; +} + +export function setLanguage(setting: LanguageSetting): void { + const resolved = resolveLanguage(setting); + if (resolved === currentLanguage) return; + currentLanguage = resolved; + localStorage.setItem("lightning-timer-language", resolved); + window.dispatchEvent( + new CustomEvent("language-changed", { detail: resolved }) + ); +} + +// Dot-notation key lookup: t("settings.alarm.sound") → translations[lang].settings.alarm.sound +// eslint-disable-next-line @typescript-eslint/no-explicit-any +function getNestedValue(obj: any, path: string): string { + const keys = path.split("."); + let result = obj; + for (const key of keys) { + if (result == null || typeof result !== "object") return path; + result = result[key]; + } + return typeof result === "string" ? result : path; +} + +export function t(key: string): string { + return getNestedValue(translations[currentLanguage], key); +} diff --git a/src/i18n/ja.ts b/src/i18n/ja.ts new file mode 100644 index 0000000..5b469f1 --- /dev/null +++ b/src/i18n/ja.ts @@ -0,0 +1,83 @@ +import type { Translations } from "./en"; + +const ja: Translations = { + settings: { + title: "設定", + close: "閉じる (Esc)", + window: { + title: "ウィンドウ", + alwaysOnTop: "常に最前面に表示", + alwaysOnTopHint: "タイマーウィンドウを常に最前面に表示します", + darkMode: "ダークモード", + darkModeHint: "UIのテーマを切り替えます", + showTimeUpWindow: '"Time Up" 画面を表示', + showTimeUpWindowHint: + 'タイマー終了時に全画面の "Time Up" 画面を表示します', + }, + alarm: { + title: "アラーム", + sound: "サウンド", + testPlay: "試聴", + testStop: "停止", + }, + layer: { + title: "レイヤーオーバーレイ", + textColor: "文字色", + textColorHint: + "レイヤー表示の数字色を選びます。背景に合わせて調整できます。", + shadow: "影", + darkShadow: "暗い影", + darkShadowHint: "明るい背景向け", + lightShadow: "明るい影", + lightShadowHint: "暗い背景向け", + fontSize: "フォントサイズ", + resetToDefault: "リセット", + resetToDefaultTitle: "既定値に戻す", + preview: "プレビュー", + }, + language: { + title: "言語", + label: "表示言語", + hint: "UIの言語を変更します（タイマー表示は常に英語です）", + auto: "自動（OS言語に従う）", + en: "English", + ja: "日本語", + }, + }, + help: { + title: "キーボードショートカット", + keyColumn: "キー", + actionColumn: "操作", + shortcuts: { + numbers: "タイマー時間を設定（左シフト方式）", + startPause: "タイマーの開始/一時停止", + reset: "タイマーのリセット", + toggleCompactMode: "表示モードの切り替え", + toggleFullscreen: "フルスクリーンの切り替え", + toggleLayer: "レイヤー表示の切り替え", + }, + }, + about: { + title: "アプリについて", + version: "バージョン", + }, + tooltips: { + exitApp: "アプリケーションを終了", + compactMode: "簡易表示モード", + minimalMode: "ミニマム表示モード", + normalMode: "通常表示に戻す", + layerOn: "レイヤー表示を出す (L)", + layerOff: "レイヤー表示を消す (L)", + fullscreen: "フルスクリーン", + windowMode: "ウィンドウモードに戻す", + appInfo: "アプリ情報", + setTimeFirst: "時間を設定してください", + startTimer: "タイマーを開始", + }, + timeup: { + subtitle: "時間になりました。", + instruction: "クリックまたは Esc キーで閉じる", + }, +} as const; + +export default ja; diff --git a/src/i18n/useTranslation.ts b/src/i18n/useTranslation.ts new file mode 100644 index 0000000..6329431 --- /dev/null +++ b/src/i18n/useTranslation.ts @@ -0,0 +1,26 @@ +import { useState, useEffect, useCallback } from "react"; +import { t as translate, getLanguage, setLanguage as setLang } from "./index"; +import type { LanguageSetting } from "./index"; + +export function useTranslation() { + const [, setRevision] = useState(0); + + useEffect(() => { + const handler = () => setRevision((r) => r + 1); + window.addEventListener("language-changed", handler); + return () => window.removeEventListener("language-changed", handler); + }, []); + + const setLanguage = useCallback((setting: LanguageSetting) => { + setLang(setting); + // Force re-render even if resolveLanguage returns the same value + // (e.g. switching from "auto" to "en" when OS is English) + setRevision((r) => r + 1); + }, []); + + return { + t: translate, + language: getLanguage(), + setLanguage, + }; +} diff --git a/src/index.css b/src/index.css index e1b51e0..7c42ee8 100644 --- a/src/index.css +++ b/src/index.css @@ -152,9 +152,7 @@ button { border-radius: 2px; transition: all 0.2s ease; z-index: 1000; - font-size: 12px; color: var(--text-secondary); - font-weight: bold; } .compact-toggle-button:hover { @@ -163,6 +161,37 @@ button { transform: scale(1.1); } +/* レイヤー表示 ON/OFF ボタン */ +.layer-toggle-button { + position: absolute; + top: 8px; + left: 56px; + width: 16px; + height: 16px; + background: none; + border: none; + cursor: pointer; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + border-radius: 2px; + transition: all 0.2s ease; + z-index: 1000; + color: var(--text-secondary); +} + +.layer-toggle-button:hover { + background-color: rgba(0, 122, 204, 0.1); + color: var(--accent); + transform: scale(1.1); +} + +.layer-toggle-button.active { + color: var(--accent); + background-color: rgba(0, 122, 204, 0.18); +} + /* フルスクリーン切り替えボタン（右上） */ .fullscreen-toggle-button { position: absolute; @@ -180,9 +209,7 @@ button { border-radius: 2px; transition: all 0.2s ease; z-index: 1000; - font-size: 12px; color: var(--text-secondary); - font-weight: bold; } .fullscreen-toggle-button:hover { @@ -902,6 +929,89 @@ button { background-color: var(--accent-hover); } +/* レイヤー表示のスタイル設定 */ +.layer-style-section { + flex-direction: column; + align-items: stretch; + gap: 10px; +} + +.layer-style-row { + display: flex; + align-items: center; + gap: 12px; + flex-wrap: wrap; +} + +.layer-style-label { + font-size: 0.8rem; + color: var(--text-secondary); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + min-width: 130px; +} + +.layer-color-controls { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; +} + +.layer-color-picker { + width: 32px; + height: 24px; + padding: 0; + border: 1px solid var(--border); + border-radius: 4px; + background: none; + cursor: pointer; +} + +.layer-color-presets { + display: flex; + gap: 4px; +} + +.layer-color-swatch { + width: 18px; + height: 18px; + border: 1px solid var(--border); + border-radius: 50%; + cursor: pointer; + padding: 0; + transition: transform 0.15s ease, border-color 0.15s ease; +} + +.layer-color-swatch:hover { + transform: scale(1.15); +} + +.layer-color-swatch.selected { + border-color: var(--accent); + border-width: 2px; + box-shadow: 0 0 0 1px var(--bg-secondary); +} + +.layer-shadow-controls { + display: flex; + gap: 14px; +} + +.layer-shadow-controls label { + display: flex !important; + flex-direction: row !important; + align-items: center !important; + gap: 4px !important; + cursor: pointer; + text-transform: none !important; + letter-spacing: normal !important; + font-weight: normal !important; + color: var(--text-primary) !important; + font-size: 0.9rem !important; +} + .alarm-sound-selector label { flex-direction: column; align-items: flex-start; diff --git a/src/main.tsx b/src/main.tsx index 8b1ddb9..1921a52 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,29 @@ import React from "react"; import ReactDOM from "react-dom/client"; +import { isTauri } from "@tauri-apps/api/core"; +import { Store } from "@tauri-apps/plugin-store"; +import { initLanguage } from "./i18n"; import App from "./App"; import "./index.css"; -ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - - - , -); +async function bootstrap() { + let savedLanguage: string | undefined; + if (isTauri()) { + try { + const store = await Store.load("settings.json"); + const saved = await store.get<{ language?: string }>("settings"); + savedLanguage = saved?.language; + } catch { + // Settings not yet saved; use default + } + } + initLanguage(savedLanguage); + + ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( + + + , + ); +} + +bootstrap(); diff --git a/src/settings-main.tsx b/src/settings-main.tsx new file mode 100644 index 0000000..c63df39 --- /dev/null +++ b/src/settings-main.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import { isTauri } from "@tauri-apps/api/core"; +import { Store } from "@tauri-apps/plugin-store"; +import { initLanguage } from "./i18n"; +import SettingsApp from "./SettingsApp"; +import "./index.css"; +import "./settings-page.css"; + +async function bootstrap() { + let savedLanguage: string | undefined; + if (isTauri()) { + try { + const store = await Store.load("settings.json"); + const saved = await store.get<{ language?: string }>("settings"); + savedLanguage = saved?.language; + } catch { + // Settings not yet saved; use default + } + } + initLanguage(savedLanguage); + + ReactDOM.createRoot(document.getElementById("settings-root") as HTMLElement).render( + + + + ); +} + +bootstrap(); diff --git a/src/settings-page.css b/src/settings-page.css new file mode 100644 index 0000000..c637156 --- /dev/null +++ b/src/settings-page.css @@ -0,0 +1,383 @@ +/* 設定ウィンドウ専用スタイル */ + +html, body { + width: 100%; + height: 100%; + min-width: 0; + min-height: 0; +} + +#settings-root { + width: 100vw; + height: 100vh; + overflow: hidden; + background-color: var(--bg-primary); + color: var(--text-primary); +} + +.settings-page-loading { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + color: var(--text-secondary); +} + +.settings-page { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + background-color: var(--bg-primary); + color: var(--text-primary); +} + +.settings-page-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 14px 20px; + border-bottom: 1px solid var(--border); + background-color: var(--bg-secondary); +} + +.settings-page-header h1 { + font-size: 1.05rem; + font-weight: 700; + letter-spacing: 0.05em; + text-transform: uppercase; + margin: 0; +} + +.settings-page-close { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + background: none; + border: 1px solid transparent; + border-radius: 6px; + cursor: pointer; + font-size: 18px; + color: var(--text-secondary); + transition: all 0.15s ease; +} + +.settings-page-close:hover { + background-color: var(--bg-primary); + border-color: var(--border); + color: var(--text-primary); +} + +.settings-page-body { + flex: 1; + overflow-y: auto; + padding: 20px; + display: flex; + flex-direction: column; + gap: 24px; +} + +.settings-section { + display: flex; + flex-direction: column; + gap: 14px; + padding: 18px 20px; + background-color: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 8px; +} + +.settings-section-title { + margin: 0 0 4px 0; + font-size: 0.78rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--text-secondary); +} + +.settings-row { + display: flex; + flex-direction: column; + gap: 4px; +} + +.settings-row-inline { + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.settings-row-label { + font-size: 0.85rem; + color: var(--text-primary); + font-weight: 600; +} + +.settings-row-control { + display: flex; + align-items: center; + gap: 8px; +} + +.settings-row-hint { + margin: 2px 0 0 0; + font-size: 0.75rem; + color: var(--text-secondary); + line-height: 1.4; +} + +/* トグル */ +.settings-toggle { + display: inline-flex; + align-items: center; + gap: 8px; + cursor: pointer; + font-size: 0.92rem; + color: var(--text-primary); + user-select: none; +} + +.settings-toggle input[type="checkbox"] { + width: 16px; + height: 16px; + cursor: pointer; + accent-color: var(--accent); +} + +/* セレクト */ +.settings-select { + flex: 1; + min-width: 0; + max-width: 240px; + padding: 7px 10px; + background-color: var(--bg-primary); + color: var(--text-primary); + border: 1px solid var(--border); + border-radius: 6px; + font-size: 0.9rem; +} + +.settings-icon-button { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--accent); + color: white; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 0.9rem; + transition: background-color 0.15s ease; +} + +.settings-icon-button:hover { + background-color: var(--accent-hover); +} + +/* 色グループ */ +.settings-color-group { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 10px; + margin-top: 4px; +} + +.settings-color-picker { + width: 40px; + height: 30px; + padding: 0; + border: 1px solid var(--border); + border-radius: 6px; + background: none; + cursor: pointer; +} + +.settings-color-hex { + width: 96px; + padding: 6px 8px; + background-color: var(--bg-primary); + color: var(--text-primary); + border: 1px solid var(--border); + border-radius: 6px; + font-family: 'Menlo', 'Courier New', monospace; + font-size: 0.85rem; +} + +.settings-color-presets { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.settings-color-swatch { + width: 22px; + height: 22px; + border: 1px solid var(--border); + border-radius: 50%; + cursor: pointer; + padding: 0; + transition: transform 0.15s ease, box-shadow 0.15s ease; +} + +.settings-color-swatch:hover { + transform: scale(1.15); +} + +.settings-color-swatch.selected { + border-color: var(--accent); + box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--accent); +} + +/* ラジオグループ */ +.settings-radio-group { + display: flex; + flex-direction: column; + gap: 8px; + margin-top: 4px; +} + +.settings-radio { + display: inline-flex; + align-items: center; + gap: 8px; + cursor: pointer; + font-size: 0.9rem; + color: var(--text-primary); + user-select: none; +} + +.settings-radio input[type="radio"] { + width: 14px; + height: 14px; + cursor: pointer; + accent-color: var(--accent); +} + +.settings-radio-hint { + font-size: 0.75rem; + color: var(--text-secondary); +} + +/* レイヤープレビュー */ +.settings-layer-preview { + display: flex; + align-items: center; + justify-content: center; + height: 220px; + margin-top: 6px; + background-color: #4a4a4a; + background-image: repeating-conic-gradient( + #5a5a5a 0% 25%, + #3f3f3f 0% 50% + ); + background-size: 24px 24px; + background-position: 50% 50%; + border: 1px solid var(--border); + border-radius: 8px; + font-family: 'MesloPowerline', 'Menlo', 'Courier New', monospace; + font-weight: bold; + letter-spacing: 0.05em; + line-height: 1; + overflow: hidden; +} + +/* スライダー */ +.settings-slider-group { + display: flex; + align-items: center; + gap: 12px; + margin-top: 6px; +} + +.settings-slider { + flex: 1; + height: 6px; + -webkit-appearance: none; + appearance: none; + background: var(--border); + border-radius: 3px; + outline: none; + cursor: pointer; +} + +.settings-slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 18px; + height: 18px; + background: var(--accent); + border: none; + border-radius: 50%; + cursor: pointer; +} + +.settings-slider::-moz-range-thumb { + width: 18px; + height: 18px; + background: var(--accent); + border: none; + border-radius: 50%; + cursor: pointer; +} + +.settings-text-button { + padding: 5px 12px; + font-size: 0.78rem; + background: none; + color: var(--text-secondary); + border: 1px solid var(--border); + border-radius: 6px; + cursor: pointer; + transition: all 0.15s ease; +} + +.settings-text-button:hover { + border-color: var(--accent); + color: var(--accent); +} + +.settings-row-value { + margin-left: 8px; + font-family: 'Menlo', 'Courier New', monospace; + font-size: 0.82rem; + font-weight: 500; + color: var(--text-secondary); + text-transform: none; + letter-spacing: normal; +} + +.settings-layer-preview[data-shadow="dark"] { + text-shadow: + 0 0 8px rgba(0, 0, 0, 0.9), + 0 0 16px rgba(0, 0, 0, 0.7), + 0 2px 4px rgba(0, 0, 0, 1); +} + +.settings-layer-preview[data-shadow="light"] { + text-shadow: + 0 0 8px rgba(255, 255, 255, 0.95), + 0 0 16px rgba(255, 255, 255, 0.8), + 0 2px 4px rgba(255, 255, 255, 1); +} + +/* スクロールバー（macOS風の控えめ） */ +.settings-page-body::-webkit-scrollbar { + width: 10px; +} + +.settings-page-body::-webkit-scrollbar-thumb { + background-color: rgba(127, 127, 127, 0.35); + border-radius: 5px; +} + +.settings-page-body::-webkit-scrollbar-thumb:hover { + background-color: rgba(127, 127, 127, 0.55); +} diff --git a/src/types.ts b/src/types.ts index f4bce8e..fd7e49a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -13,6 +13,10 @@ export interface Settings { alarmVolume: number; displayMode: "normal" | "compact" | "minimal"; showTimeUpWindow: boolean; + layerTextColor: string; + layerShadowStyle: "dark" | "light"; + layerFontSize: number; + language: "en" | "ja" | "auto"; } export interface TimerDisplayProps { @@ -38,8 +42,3 @@ export interface TimerControlsProps { onAlarmVolumeChange: (volume: number) => void; } -export interface SettingsProps { - settings: Settings; - onClose: () => void; - onSettingsChange: (settings: Settings) => void; -} diff --git a/vite.config.ts b/vite.config.ts index 0c9adff..b9e1059 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,10 +1,20 @@ import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; +import { resolve } from "path"; // https://vitejs.dev/config/ export default defineConfig(async () => ({ plugins: [react()], + build: { + rollupOptions: { + input: { + main: resolve(__dirname, "index.html"), + settings: resolve(__dirname, "settings.html"), + }, + }, + }, + // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build` // // 1. prevent vite from obscuring rust errors
KeyAction{t("help.keyColumn")}{t("help.actionColumn")}