Switch to Geist/Geist Mono and fix numeric typography

[rlauuzo]

DM Sans Variable ships no tnum OpenType feature, so every tabular-nums utility in the app (scrubber timecodes, episode switcher, command palette) was a silent no-op and live-updating timestamps jittered as digit widths changed. --font-mono also pointed at JetBrains Mono, which was never installed, so mono surfaces fell back to whatever ui-monospace the OS provides.

This swaps the font stack to Geist / Geist Mono (both fontsource variable packages, same pipeline as before) and applies a consistent numeric-typography policy:

• --font-sans → 'Geist Variable', --font-mono → 'Geist Mono Variable'. Geist ships tnum, so existing tabular-nums usage now actually works.
• Editable values and technical identifiers stay mono: segment timestamp inputs, codec/container badges, kbd hints, the desktop-fallback URL.
• Read-only numeric readouts use proportional sans + tabular-nums: converted the segment dialog's duration line and the subtitle-offset readout from mono, and added missing tabular-nums to the scrubber hover-time preview and the segment dialog's live time previews.
• Removed the unused input[type='number'].time-input rule (no matching markup).

Verified in-browser: both families load (document.fonts.check true) and the UI renders in Geist; build, format check, and all 594 tests pass.

Summary by Sourcery

Switch the UI font stack to Geist/Geist Mono and standardize numeric typography for time-related readouts.

New Features:

• Adopt Geist Variable as the primary sans-serif font and Geist Mono Variable as the monospace font across the app.

Enhancements:

• Apply tabular numeric styling to time and duration readouts to prevent jitter and improve alignment in scrubbers, segment dialogs, and subtitle offset displays.
• Remove an unused time-input CSS rule that no longer corresponds to any markup.
• Update font dependencies to use Geist and Geist Mono variable packages in the build configuration.

[sourcery-ai]

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Switches the app’s font stack from DM Sans/JetBrains Mono to Geist/Geist Mono variable fonts and standardizes numeric typography by applying tabular-nums to key read-only time/offset displays while cleaning up an unused time-input rule.

Flow diagram for numeric typography policy (editable vs read-only)

flowchart LR
  start[Numeric_value_display]
  decision{Editable_input?}
  editable[Use font-mono
class font-mono]
  readonly[Use font-sans
with tabular-nums]

  start --> decision
  decision --> editable
  decision --> readonly

  subgraph Readonly_examples
    hover_time[HoverTimePreview formatTime]
    segment_duration[SegmentEditDialog duration formatTime]
    subtitle_offset[PlayerSettingsMenu subtitleOffset.toFixed]
    readonly --> hover_time
    readonly --> segment_duration
    readonly --> subtitle_offset
  end

Loading

File-Level Changes

Change	Details	Files
Switch the global font stack to Geist / Geist Mono variable fonts so sans and mono usage share a coherent family that supports tabular numerals.	Replace DM Sans variable font import with Geist variable font import in the main stylesheet. Add Geist Mono variable font import alongside Geist. Update the CSS theme’s --font-sans token to use Geist Variable. Update the CSS theme’s --font-mono token to use Geist Mono Variable instead of JetBrains Mono.	src/styles.css package.json pnpm-lock.yaml
Align numeric UI surfaces with a consistent policy: editable technical values stay mono, read-only numeric readouts use sans with tabular-nums for stable alignment.	Add tabular-nums to the live start and end time readouts in the segment edit dialog while keeping the associated inputs mono. Change the segment duration and seconds readouts from mono to proportional sans with tabular-nums. Add tabular-nums to the hover-time preview on the player scrubber for non-jittery timestamps. Change the subtitle offset readout from mono to sans with tabular-nums while preserving fixed width and alignment.	src/components/segment/SegmentEditDialog.tsx src/components/player/PlayerScrubber.tsx src/components/player/PlayerSettingsMenu.tsx
Remove an unused numeric time-input styling rule from the global stylesheet.	Delete the input[type='number'].time-input rule that applied tabular-nums and right alignment since there is no matching markup.	src/styles.css

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[github-actions]

React Doctor found no new issues. 🎉

_{Reviewed by React Doctor for commit 5bf62a6.}

[sourcery-ai]

Hey - I've left some high level feedback:

• Consider introducing a utility class or Tailwind plugin for the shared numeric-typography policy (e.g., read-only numeric + tabular-nums) to avoid sprinkling tabular-nums manually and keep future additions consistent.
• Now that Geist/Geist Mono are the primary stacks, it may be worth scanning other components that rely on font-mono or numeric readouts to ensure their usage (mono vs proportional + tabular-nums) matches the policy you described here.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- Consider introducing a utility class or Tailwind plugin for the shared numeric-typography policy (e.g., read-only numeric + tabular-nums) to avoid sprinkling `tabular-nums` manually and keep future additions consistent.
- Now that Geist/Geist Mono are the primary stacks, it may be worth scanning other components that rely on `font-mono` or numeric readouts to ensure their usage (mono vs proportional + tabular-nums) matches the policy you described here.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (8 files)

• package.json
• pnpm-lock.yaml
• src/components/player/PlayerScrubber.tsx
• src/components/player/PlayerSettingsMenu.tsx
• src/components/segment/SegmentEditDialog.tsx
• src/components/views/AlbumView.tsx
• src/components/views/SeriesView.tsx
• src/styles.css

Note: This PR is a TypeScript/React/CSS font and numeric-typography change, not C#/.NET code, so the .NET design-pattern checklist does not apply. Incremental changes since the last review add the tabular-nums utility to numeric readouts in AlbumView.tsx (track number and duration) and SeriesView.tsx (episode label/runtime line), consistent with the PR's stated numeric-typography policy. tabular-nums only affects digit glyph widths and is harmless on mixed text, so no correctness, security, runtime, logic, or performance issues were found in the changed lines. No new issues; changes are well-scoped and verified against intent.

Previous Review Summary (commit 6e02cf3)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit 6e02cf3)

Status: No Issues Found | Recommendation: Merge

Files Reviewed (6 files)

• package.json
• pnpm-lock.yaml
• src/components/player/PlayerScrubber.tsx
• src/components/player/PlayerSettingsMenu.tsx
• src/components/segment/SegmentEditDialog.tsx
• src/styles.css

Note: This PR is a TypeScript/React/CSS font and numeric-typography change, not C#/.NET code, so the .NET design-pattern checklist does not apply. The changes are well-scoped and verified against intent: font imports and --font-sans/--font-mono tokens correctly switched to Geist/Geist Mono; tabular-nums is applied to read-only numeric readouts while editable inputs correctly retain font-mono; and the unused input[type='number'].time-input rule is removed. No security, runtime, logic, or performance issues were found in the changed lines. The pre-existing Sourcery suggestion to consolidate the numeric-typography policy into a shared utility class is a non-blocking maintainability idea and is not duplicated here.

---

_{Reviewed by hy3:free · Input: 25.4K · Output: 3.1K · Cached: 133.4K}