Fix reset tooltips to mirror display mode (#297)

* fix: toggle reset tooltip mode

* fix: localize reset date labels

Author: robinebers

src/components/global-shortcut-section.test.tsx

@@ -1,6 +1,6 @@
-import { fireEvent, render, screen } from "@testing-library/react"
+import { act, fireEvent, render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { describe, expect, it, vi } from "vitest"
+import { afterEach, describe, expect, it, vi } from "vitest"
 import { GlobalShortcutSection } from "@/components/global-shortcut-section"
 
 function renderSection(globalShortcut: string | null = null) {
@@ -20,6 +20,10 @@ async function startRecording() {
 }
 
 describe("GlobalShortcutSection", () => {
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
   it("formats persisted shortcuts for display", () => {
     renderSection("CommandOrControl+Alt+Delete")
     expect(screen.getByText("Cmd + Opt + Delete")).toBeInTheDocument()
@@ -78,6 +82,20 @@ describe("GlobalShortcutSection", () => {
     expect(onGlobalShortcutChange).toHaveBeenCalledWith("CommandOrControl+A")
   })
 
+  it("records and saves Alt shortcuts", async () => {
+    const { onGlobalShortcutChange } = renderSection()
+    const textbox = await startRecording()
+
+    fireEvent.keyDown(textbox, { key: "Alt", code: "AltLeft" })
+    fireEvent.keyDown(textbox, { key: "/", code: "Slash" })
+    expect(screen.getByText("Opt + /")).toBeInTheDocument()
+
+    fireEvent.keyUp(textbox, { key: "/", code: "Slash" })
+    fireEvent.keyUp(textbox, { key: "Alt", code: "AltLeft" })
+
+    expect(onGlobalShortcutChange).toHaveBeenCalledWith("Alt+Slash")
+  })
+
   it("does not save when only modifiers are pressed", async () => {
     const { onGlobalShortcutChange } = renderSection()
     const textbox = await startRecording()
@@ -123,6 +141,20 @@ describe("GlobalShortcutSection", () => {
     expect(screen.getByRole("textbox", { name: /Press keys/i })).toBeInTheDocument()
   })
 
+  it("focuses the recording textbox after starting", async () => {
+    vi.useFakeTimers()
+    renderSection()
+
+    fireEvent.click(screen.getByRole("button", { name: /Click to set/i }))
+    const textbox = screen.getByRole("textbox", { name: /Press keys/i })
+
+    await act(async () => {
+      vi.advanceTimersByTime(10)
+    })
+
+    expect(textbox).toHaveFocus()
+  })
+
   it("cancels recording on blur without saving pending shortcut", async () => {
     const { onGlobalShortcutChange } = renderSection()
     const textbox = await startRecording()

src/components/provider-card.test.tsx

@@ -32,22 +32,11 @@ vi.mock("@/components/ui/tooltip", () => ({
   TooltipContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
 }))
 
-function getEnglishOrdinalSuffix(day: number): string {
-  const mod100 = day % 100
-  if (mod100 >= 11 && mod100 <= 13) return "th"
-  const mod10 = day % 10
-  if (mod10 === 1) return "st"
-  if (mod10 === 2) return "nd"
-  if (mod10 === 3) return "rd"
-  return "th"
-}
-
-function formatOrdinalDate(date: Date): string {
-  const monthText = new Intl.DateTimeFormat(undefined, {
+function formatMonthDay(date: Date): string {
+  return new Intl.DateTimeFormat(undefined, {
     month: "short",
+    day: "numeric",
   }).format(date)
-  const day = date.getDate()
-  return `${monthText} ${day}${getEnglishOrdinalSuffix(day)}`
 }
 
 describe("ProviderCard", () => {
@@ -261,7 +250,15 @@ describe("ProviderCard", () => {
       />
     )
     expect(screen.getByText("Resets in 1h 5m")).toBeInTheDocument()
-    expect(screen.getByText(formatResetTooltipText("2026-02-02T01:05:00.000Z")!)).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        formatResetTooltipText({
+          nowMs: now.getTime(),
+          resetsAtIso: "2026-02-02T01:05:00.000Z",
+          visibleMode: "relative",
+        })!
+      )
+    ).toBeInTheDocument()
     vi.useRealTimers()
   })
 
@@ -355,7 +352,7 @@ describe("ProviderCard", () => {
         ]}
       />
     )
-    expect(screen.getByText("Resets soon")).toBeInTheDocument()
+    expect(screen.getAllByText("Resets soon")).toHaveLength(2)
     vi.useRealTimers()
   })
 
@@ -380,7 +377,7 @@ describe("ProviderCard", () => {
         ]}
       />
     )
-    expect(screen.getByText("Resets soon")).toBeInTheDocument()
+    expect(screen.getAllByText("Resets soon")).toHaveLength(2)
     vi.useRealTimers()
   })
 
@@ -410,7 +407,15 @@ describe("ProviderCard", () => {
     )
     const resetButton = screen.getByRole("button", { name: /^Resets today at / })
     expect(resetButton).toBeInTheDocument()
-    expect(screen.getByText(formatResetTooltipText(resetsAt)!)).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        formatResetTooltipText({
+          nowMs: now.getTime(),
+          resetsAtIso: resetsAt,
+          visibleMode: "absolute",
+        })!
+      )
+    ).toBeInTheDocument()
     fireEvent.click(resetButton)
     expect(onToggle).toHaveBeenCalledTimes(1)
     vi.useRealTimers()
@@ -447,7 +452,7 @@ describe("ProviderCard", () => {
     const now = new Date(2026, 1, 2, 10, 0, 0)
     const resetsAt = new Date(2026, 1, 5, 16, 0, 0)
     vi.setSystemTime(now)
-    const dateText = formatOrdinalDate(resetsAt)
+    const dateText = formatMonthDay(resetsAt)
     render(
       <ProviderCard
         name="Resets"
@@ -476,7 +481,7 @@ describe("ProviderCard", () => {
     const now = new Date(2026, 1, 2, 10, 0, 0)
     const resetsAt = new Date(2026, 1, 20, 16, 0, 0)
     vi.setSystemTime(now)
-    const dateText = formatOrdinalDate(resetsAt)
+    const dateText = formatMonthDay(resetsAt)
     render(
       <ProviderCard
         name="Resets"

src/components/provider-card.tsx

@@ -14,8 +14,8 @@ import type { ManifestLine, MetricLine, PluginLink } from "@/lib/plugin-types"
 import { groupLinesByType } from "@/lib/group-lines-by-type"
 import { clamp01, formatCountNumber, formatFixedPrecisionNumber } from "@/lib/utils"
 import { calculateDeficit, calculatePaceStatus, type PaceStatus } from "@/lib/pace-status"
-import { buildPaceDetailText, formatCompactDuration, formatDeficitText, formatRunsOutText, getPaceStatusText } from "@/lib/pace-tooltip"
-import { formatResetTooltipText } from "@/lib/reset-tooltip"
+import { buildPaceDetailText, formatDeficitText, formatRunsOutText, getPaceStatusText } from "@/lib/pace-tooltip"
+import { formatResetAbsoluteLabel, formatResetRelativeLabel, formatResetTooltipText } from "@/lib/reset-tooltip"
 
 interface ProviderCardProps {
   name: string
@@ -40,61 +40,6 @@ const PACE_VISUALS: Record<PaceStatus, { dotClass: string }> = {
   behind: { dotClass: "bg-red-500" },
 }
 
-
-const RESET_SOON_THRESHOLD_MS = 5 * 60 * 1000
-
-function formatResetIn(nowMs: number, resetsAtIso: string): string | null {
-  const resetsAtMs = Date.parse(resetsAtIso)
-  if (!Number.isFinite(resetsAtMs)) return null
-  const deltaMs = resetsAtMs - nowMs
-  if (deltaMs < RESET_SOON_THRESHOLD_MS) return "Resets soon"
-  const durationText = formatCompactDuration(deltaMs)!
-  return `Resets in ${durationText}`
-}
-
-const RESET_TIME_FORMATTER = new Intl.DateTimeFormat(undefined, {
-  hour: "numeric",
-  minute: "2-digit",
-})
-
-const RESET_MONTH_FORMATTER = new Intl.DateTimeFormat(undefined, {
-  month: "short",
-})
-
-function getLocalDayIndex(timestampMs: number): number {
-  const date = new Date(timestampMs)
-  return Math.floor(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) / 86_400_000)
-}
-
-function getEnglishOrdinalSuffix(day: number): string {
-  const mod100 = day % 100
-  if (mod100 >= 11 && mod100 <= 13) return "th"
-  const mod10 = day % 10
-  if (mod10 === 1) return "st"
-  if (mod10 === 2) return "nd"
-  if (mod10 === 3) return "rd"
-  return "th"
-}
-
-function formatMonthDayWithOrdinal(timestampMs: number): string {
-  const date = new Date(timestampMs)
-  const monthText = RESET_MONTH_FORMATTER.format(date)
-  const day = date.getDate()
-  return `${monthText} ${day}${getEnglishOrdinalSuffix(day)}`
-}
-
-function formatResetAt(nowMs: number, resetsAtIso: string): string | null {
-  const resetsAtMs = Date.parse(resetsAtIso)
-  if (!Number.isFinite(resetsAtMs)) return null
-  if (resetsAtMs - nowMs <= 0) return "Resets soon"
-  const dayDiff = getLocalDayIndex(resetsAtMs) - getLocalDayIndex(nowMs)
-  const timeText = RESET_TIME_FORMATTER.format(resetsAtMs)
-  if (dayDiff <= 0) return `Resets today at ${timeText}`
-  if (dayDiff === 1) return `Resets tomorrow at ${timeText}`
-  const dateText = formatMonthDayWithOrdinal(resetsAtMs)
-  return `Resets ${dateText} at ${timeText}`
-}
-
 /** Colored dot indicator showing pace status */
 function PaceIndicator({
   status,
@@ -421,10 +366,16 @@ function MetricLineRenderer({
 
     const resetLabel = line.resetsAt
       ? resetTimerDisplayMode === "absolute"
-        ? formatResetAt(now, line.resetsAt)
-        : formatResetIn(now, line.resetsAt)
+        ? formatResetAbsoluteLabel(now, line.resetsAt)
+        : formatResetRelativeLabel(now, line.resetsAt)
+      : null
+    const resetTooltipText = line.resetsAt
+      ? formatResetTooltipText({
+          nowMs: now,
+          resetsAtIso: line.resetsAt,
+          visibleMode: resetTimerDisplayMode,
+        })
       : null
-    const resetTooltipText = line.resetsAt ? formatResetTooltipText(line.resetsAt) : null
 
     const secondaryText =
       resetLabel ??

src/components/side-nav.test.tsx

@@ -1,6 +1,8 @@
 import { render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { describe, expect, it, vi } from "vitest"
+import { openUrl } from "@tauri-apps/plugin-opener"
+import { invoke } from "@tauri-apps/api/core"
 
 import { SideNav } from "@/components/side-nav"
 
@@ -12,6 +14,14 @@ vi.mock("@/hooks/use-dark-mode", () => ({
   useDarkMode: darkModeState.useDarkModeMock,
 }))
 
+vi.mock("@tauri-apps/plugin-opener", () => ({
+  openUrl: vi.fn(() => Promise.resolve()),
+}))
+
+vi.mock("@tauri-apps/api/core", () => ({
+  invoke: vi.fn(() => Promise.resolve()),
+}))
+
 describe("SideNav", () => {
   it("calls onViewChange for Home and Settings", async () => {
     const onViewChange = vi.fn()
@@ -70,5 +80,14 @@ describe("SideNav", () => {
     const p2Style = screen.getByRole("img", { name: "P2" }).getAttribute("style") ?? ""
     expect(p2Style).toContain("rgb(255, 255, 255)")
   })
-})
 
+  it("opens the issues page and hides the panel from Help", async () => {
+    const onViewChange = vi.fn()
+    render(<SideNav activeView="home" onViewChange={onViewChange} plugins={[]} />)
+
+    await userEvent.click(screen.getByRole("button", { name: "Help" }))
+
+    expect(openUrl).toHaveBeenCalledWith("https://github.com/robinebers/openusage/issues")
+    expect(invoke).toHaveBeenCalledWith("hide_panel")
+  })
+})

src/hooks/use-now-ticker.test.ts

@@ -0,0 +1,38 @@
+import { renderHook, act } from "@testing-library/react"
+import { afterEach, describe, expect, it, vi } from "vitest"
+import { useNowTicker } from "./use-now-ticker"
+
+describe("useNowTicker", () => {
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it("does not tick when disabled", () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date("2026-02-03T00:00:00.000Z"))
+
+    const { result } = renderHook(() => useNowTicker({ enabled: false, intervalMs: 1000 }))
+    expect(result.current).toBe(Date.parse("2026-02-03T00:00:00.000Z"))
+
+    act(() => {
+      vi.advanceTimersByTime(5_000)
+    })
+
+    expect(result.current).toBe(Date.parse("2026-02-03T00:00:00.000Z"))
+  })
+
+  it("stops immediately when stopAfterMs is non-positive", () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date("2026-02-03T00:00:00.000Z"))
+
+    const { result } = renderHook(() => useNowTicker({ intervalMs: 1000, stopAfterMs: 0 }))
+    expect(result.current).toBe(Date.parse("2026-02-03T00:00:00.000Z"))
+
+    act(() => {
+      vi.setSystemTime(new Date("2026-02-03T00:00:05.000Z"))
+      vi.advanceTimersByTime(5_000)
+    })
+
+    expect(result.current).toBe(Date.parse("2026-02-03T00:00:00.000Z"))
+  })
+})

src/lib/reset-tooltip.mocked.test.ts

@@ -0,0 +1,18 @@
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+describe("reset-tooltip mocked branches", () => {
+  afterEach(() => {
+    vi.doUnmock("@/lib/pace-tooltip")
+    vi.resetModules()
+  })
+
+  it("returns null when compact duration formatting is unavailable", async () => {
+    vi.doMock("@/lib/pace-tooltip", () => ({
+      formatCompactDuration: () => null,
+    }))
+
+    const { formatResetRelativeLabel } = await import("@/lib/reset-tooltip")
+
+    expect(formatResetRelativeLabel(Date.parse("2026-02-03T11:29:00.000Z"), "2026-02-03T12:34:00.000Z")).toBeNull()
+  })
+})