Merge pull request 'feat: add About dialog with version and license info' (#1) from feature/about into main

Reviewed-on: #1

README.md

@@ -9,6 +9,7 @@ TauClockは、ローカル/UTC時計、アラーム、カウントダウンタ
 - 柔軟な入力形式に対応したカウントダウンタイマー（`5m30s`, `1:15`, `90` など）
 - ラップ記録つきストップウォッチと履歴リスト
 - キーボードショートカットと画面内に表示できるチートシート
+- アプリ説明・バージョン・ライセンス本文を確認できるAboutダイアログ
 - Tauri + Rust製の軽量クロスプラットフォームバイナリ
 
 ## キーボードショートカット
@@ -16,6 +17,7 @@ TauClockは、ローカル/UTC時計、アラーム、カウントダウンタ
 | キー  | 動作                                       |
 | ----- | ------------------------------------------ |
 | `H`   | ショートカット一覧を開閉                   |
+| `I`   | Aboutダイアログを開閉                      |
 | `A`   | アラームの時刻入力欄にフォーカス           |
 | `N`   | アラームを追加                             |
 | `T`   | タイマーの時間入力欄にフォーカス           |

src-tauri/src/lib.rs

@@ -5,10 +5,21 @@
 mod state;
 
 use log::LevelFilter;
+use serde::Serialize;
 use state::{AppState, FrontendState};
 use std::{path::PathBuf, str::FromStr};
 use tauri_plugin_log::{Target, TargetKind};
 
+/// Metadata and legal text displayed by the frontend "About" dialog.
+#[derive(Debug, Clone, Serialize)]
+struct AboutInfo {
+    app_name: String,
+    version: String,
+    identifier: String,
+    license_name: String,
+    license_text: String,
+}
+
 /// Returns the current frontend snapshot without mutating any state. Used for
 /// the initial UI bootstrap.
 #[tauri::command]
@@ -107,6 +118,21 @@ fn reset_stopwatch(app_state: tauri::State<AppState>) -> FrontendState {
     app_state.reset_stopwatch()
 }
 
+/// Returns static application metadata and the bundled MIT license text for
+/// display in the About dialog.
+#[tauri::command]
+fn get_about_info(app: tauri::AppHandle) -> AboutInfo {
+    let package = app.package_info();
+    let identifier = app.config().identifier.clone();
+    AboutInfo {
+        app_name: package.name.clone(),
+        version: package.version.to_string(),
+        identifier,
+        license_name: "MIT".to_string(),
+        license_text: include_str!("../../LICENSE").trim().to_string(),
+    }
+}
+
 /// Initializes the Tauri runtime, configures plugins, and wires shared
 /// application state into every window.
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
@@ -139,7 +165,8 @@ pub fn run() {
             reset_timer,
             toggle_stopwatch,
             add_lap,
-            reset_stopwatch
+            reset_stopwatch,
+            get_about_info
         ])
         .setup(move |_| {
             log::info!("Tauclock backend ready; storage_path={}", storage_display);

src/index.html

@@ -24,6 +24,7 @@
         </div>
         <div class="header-meta">
           <button type="button" id="shortcut-trigger" class="hint-button">ショートカット一覧 (H)</button>
+          <button type="button" id="about-trigger" class="hint-button">About (I)</button>
         </div>
       </header>
 
@@ -118,6 +119,8 @@
         <dl>
           <dt>H</dt>
           <dd>ショートカット一覧を表示/非表示</dd>
+          <dt>I</dt>
+          <dd>Aboutを表示/非表示</dd>
           <dt>A</dt>
           <dd>アラーム時刻入力へフォーカス</dd>
           <dt>N</dt>
@@ -139,5 +142,26 @@
         </dl>
       </div>
     </section>
+
+    <section id="about-overlay" class="about-overlay" hidden>
+      <div class="about-card" role="dialog" aria-modal="true" aria-labelledby="about-heading" tabindex="-1">
+        <header>
+          <h2 id="about-heading">About TauClock</h2>
+          <button type="button" id="about-close" class="ghost">閉じる (Esc)</button>
+        </header>
+        <dl class="about-meta">
+          <dt>アプリ名</dt>
+          <dd id="about-name">-</dd>
+          <dt>バージョン</dt>
+          <dd id="about-version">-</dd>
+          <dt>識別子</dt>
+          <dd id="about-identifier">-</dd>
+          <dt>ライセンス</dt>
+          <dd id="about-license-name">-</dd>
+        </dl>
+        <h3>ライセンス本文</h3>
+        <pre id="about-license-text" class="about-license"></pre>
+      </div>
+    </section>
   </body>
 </html>

src/main.js

@@ -92,6 +92,7 @@ function resolveInvoke() {
 const elements = {};
 let tickInFlight = false;
 let latestState = null;
+let aboutInfo = null;
 
 /** Keyboard shortcut handlers keyed by `KeyboardEvent.code`. */
 const SHORTCUTS = {
@@ -104,6 +105,7 @@ const SHORTCUTS = {
   KeyL: () => requestState("add_lap"),
   KeyP: () => requestState("reset_stopwatch"),
   KeyH: () => toggleShortcutOverlay(),
+  KeyI: () => toggleAboutOverlay(),
 };
 
 window.addEventListener("DOMContentLoaded", () => {
@@ -141,6 +143,14 @@ function cacheElements() {
   elements.shortcutOverlay = document.getElementById("shortcut-overlay");
   elements.shortcutClose = document.getElementById("shortcut-close");
   elements.shortcutTrigger = document.getElementById("shortcut-trigger");
+  elements.aboutOverlay = document.getElementById("about-overlay");
+  elements.aboutClose = document.getElementById("about-close");
+  elements.aboutTrigger = document.getElementById("about-trigger");
+  elements.aboutName = document.getElementById("about-name");
+  elements.aboutVersion = document.getElementById("about-version");
+  elements.aboutIdentifier = document.getElementById("about-identifier");
+  elements.aboutLicenseName = document.getElementById("about-license-name");
+  elements.aboutLicenseText = document.getElementById("about-license-text");
   const missing = Object.entries(elements)
     .filter(([, value]) => !value)
     .map(([key]) => key);
@@ -198,6 +208,13 @@ function bindEvents() {
   if (elements.shortcutTrigger) {
     elements.shortcutTrigger.addEventListener("click", () => toggleShortcutOverlay(true));
   }
+  elements.aboutClose.addEventListener("click", () => toggleAboutOverlay(false));
+  elements.aboutOverlay.addEventListener("click", (event) => {
+    if (event.target === elements.aboutOverlay) toggleAboutOverlay(false);
+  });
+  if (elements.aboutTrigger) {
+    elements.aboutTrigger.addEventListener("click", () => toggleAboutOverlay(true));
+  }
 
   document.addEventListener("keydown", handleShortcuts, true);
   logInfo("Core UI events bound");
@@ -209,11 +226,21 @@ function bindEvents() {
  */
 async function bootstrap() {
   logInfo("Bootstrapping state");
-  await requestState("get_state");
+  await Promise.all([requestState("get_state"), loadAboutInfo()]);
   setInterval(runTick, 250);
   logInfo("Tick loop scheduled", { intervalMs: 250 });
 }
 
+/** Loads application metadata used by the About dialog. */
+async function loadAboutInfo() {
+  try {
+    aboutInfo = await invoke("get_about_info");
+    renderAboutInfo(aboutInfo);
+  } catch (error) {
+    logError("Failed to load About information", error);
+  }
+}
+
 /**
  * Requests a timer toggle from the backend, optionally forcing a reparse of
  * the duration input if the user explicitly pressed Enter inside the field.
@@ -401,6 +428,9 @@ function toggleShortcutOverlay(force) {
   const overlay = elements.shortcutOverlay;
   if (!overlay) return;
   const next = typeof force === "boolean" ? force : overlay.hidden;
+  if (next) {
+    toggleAboutOverlay(false);
+  }
   overlay.hidden = !next;
   logInfo("Shortcut overlay toggled", { visible: next });
   if (next) {
@@ -408,13 +438,46 @@ function toggleShortcutOverlay(force) {
   }
 }
 
+/**
+ * Toggles the About dialog visibility and lazily refreshes metadata when
+ * missing so the UI can recover from early load failures.
+ */
+function toggleAboutOverlay(force) {
+  const overlay = elements.aboutOverlay;
+  if (!overlay) return;
+  const next = typeof force === "boolean" ? force : overlay.hidden;
+  if (next) {
+    toggleShortcutOverlay(false);
+    if (!aboutInfo) {
+      loadAboutInfo();
+    }
+  }
+  overlay.hidden = !next;
+  logInfo("About overlay toggled", { visible: next });
+  if (next) {
+    overlay.querySelector(".about-card")?.focus?.();
+  }
+}
+
+/** Applies About metadata fields into the dialog. */
+function renderAboutInfo(info) {
+  if (!info) return;
+  elements.aboutName.textContent = info.app_name || "-";
+  elements.aboutVersion.textContent = info.version || "-";
+  elements.aboutIdentifier.textContent = info.identifier || "-";
+  elements.aboutLicenseName.textContent = info.license_name || "-";
+  elements.aboutLicenseText.textContent = info.license_text || "";
+}
+
 /**
  * Global keyboard listener that translates single-key shortcuts into higher
  * level actions while respecting modifier keys, focus states, and overlays.
  */
 function handleShortcuts(event) {
   if (event.defaultPrevented) return;
-  const overlayVisible = elements.shortcutOverlay && !elements.shortcutOverlay.hidden;
+  const shortcutOverlayVisible = elements.shortcutOverlay && !elements.shortcutOverlay.hidden;
+  const aboutOverlayVisible = elements.aboutOverlay && !elements.aboutOverlay.hidden;
+  const overlayVisible = shortcutOverlayVisible || aboutOverlayVisible;
   const trackedKey = Boolean(SHORTCUTS[event.code]) || event.key === "Escape";
   if (trackedKey) {
     logDebug("Shortcut event received", {
@@ -425,11 +488,16 @@ function handleShortcuts(event) {
     });
   }
   if (event.key === "Escape") {
-    if (overlayVisible) {
+    if (shortcutOverlayVisible) {
       toggleShortcutOverlay(false);
       event.preventDefault();
       return;
     }
+    if (aboutOverlayVisible) {
+      toggleAboutOverlay(false);
+      event.preventDefault();
+      return;
+    }
     if (document.activeElement && document.activeElement !== document.body) {
       document.activeElement.blur();
       event.preventDefault();
@@ -437,7 +505,7 @@ function handleShortcuts(event) {
     return;
   }
   if (event.altKey || event.metaKey || event.ctrlKey) return;
-  if (overlayVisible && event.code !== "KeyH") return;
+  if (overlayVisible && event.code !== "KeyH" && event.code !== "KeyI") return;
   if (isTypingTarget(event.target)) return;
   const handler = SHORTCUTS[event.code];
   if (handler) {

src/styles.css

@@ -77,6 +77,9 @@ h1 {
 .header-meta {
   font-size: 0.85rem;
   color: #b6c5ff;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
 }
 
 .hint {
@@ -396,8 +399,9 @@ button.ghost {
   }
 }
 
-/* Keyboard shortcut modal overlay */
+/* Keyboard shortcut/About modal overlay */
-.shortcut-overlay {
+.shortcut-overlay,
+.about-overlay {
   position: fixed;
   inset: 0;
   backdrop-filter: blur(8px);
@@ -407,7 +411,8 @@ button.ghost {
   justify-content: center;
 }
 
-.shortcut-card {
+.shortcut-card,
+.about-card {
   width: min(520px, 80vw);
   background: rgba(4, 8, 24, 0.92);
   border-radius: 1.5rem;
@@ -416,7 +421,8 @@ button.ghost {
   box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55);
 }
 
-.shortcut-card header {
+.shortcut-card header,
+.about-card header {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -441,6 +447,48 @@ button.ghost {
   color: #e5ebff;
 }
 
+.about-card {
+  width: min(760px, 92vw);
+  max-height: min(84vh, 780px);
+  overflow: auto;
+}
+
+.about-meta {
+  margin: 1rem 0;
+  display: grid;
+  grid-template-columns: minmax(120px, 180px) 1fr;
+  gap: 0.3rem 0.75rem;
+}
+
+.about-meta dt {
+  color: #9dc0ff;
+  font-weight: 600;
+}
+
+.about-meta dd {
+  margin: 0;
+  color: #e5ebff;
+  overflow-wrap: anywhere;
+}
+
+.about-card h3 {
+  margin: 0.6rem 0 0.45rem;
+  font-size: 0.95rem;
+  color: #9dc0ff;
+}
+
+.about-license {
+  margin: 0;
+  padding: 1rem;
+  border-radius: 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(1, 3, 11, 0.8);
+  color: #d9e5ff;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  font-size: 0.84rem;
+}
+
 /* Responsive adjustments for tablet/phone layouts */
 @media (max-width: 1180px) {
   .app-shell {
@@ -482,4 +530,8 @@ button.ghost {
   .shortcut-card dl {
     grid-template-columns: 1fr;
   }
+
+  .about-meta {
+    grid-template-columns: 1fr;
+  }
 }