Add 24-hour time format toggle with browser locale detection

[Copilot]

Implements a user-configurable time format toggle (Auto/12h/24h) that changes timestamp display throughout the application. Auto mode detects browser locale; explicit settings override. Preference persists via localStorage.

Implementation

Settings infrastructure (src/utils/settings-context.jsx)

• React Context provider for time format state management
• Browser locale detection: formats 1 PM, checks for "13" without AM/PM markers
• localStorage persistence with graceful fallback

UI component (src/common-components/time-format-toggle.jsx)

• Material-UI ToggleButtonGroup with Auto/12h/24h options
• Localized labels (en/uk), ARIA support

Timestamp formatting

• FormatTimestamp component: uses hour12 parameter in toLocaleString()
• Block panel tooltips: consistent formatting with user preference
• All relative timestamps ("2 hours ago") unchanged; full date tooltips affected

Placement

• Home page header and profile pages, next to donate button
• App wrapped with SettingsProvider for global access

Example

// Browser detection
const date = new Date(2000, 0, 1, 13, 0, 0);
const formatted = date.toLocaleTimeString();
// "1:00 PM" → 12h, "13:00" → 24h

// Format with setting
date.toLocaleString(undefined, {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  hour12: effectiveFormat === '12'
});
// 12h: "January 15, 2024 at 1:30:45 PM"
// 24h: "January 15, 2024 at 13:30:45"

Files Changed

• New: settings-context.jsx, time-format-toggle.jsx
• Modified: app.jsx, format-timestamp.jsx, list-view.jsx, home-header.jsx, layout.jsx

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add 24 hour time format toggle to all screens</issue_title>
<issue_description>Add a 24 hour toggle that will change the timestamps on each tab or wherever there is a timestamp.</issue_description>

Comments on the Issue (you are @copilot in this section)

@thieflord06 Or, be able to use the system settings of the browser.

• Fixes Add 24 hour time format toggle to all screens #274

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
clearsky-ui	Ready	Preview	Comment	Nov 13, 2025 3:43am