STORY#6-11: Changing time format

[Yalilix]

Story

As a user, I want to choose between 12-hour and 24-hour time formatting so that times throughout the app are displayed in my preferred format.

Acceptance criteria

• Add a global time-format control accessible from the app toolbar.
• The control allows the user to select:
  • 12-hour time, for example 3:30 PM.
  • 24-hour time, for example 15:30.
• The selected format applies consistently to every user-facing time in the app, including:
  • Weekly Bookings rows.
  • Booking details.
  • Room booking information.
  • Room availability and filtering times.
  • Week-navigation or date-selection components that display times.
• Changing the preference updates visible times immediately without requiring an app restart or another network request.
• The preference is persisted across app launches.
• The setting affects presentation only and does not modify stored dates, GraphQL variables, API requests, booking intervals, or time-zone calculations.
• Dates continue to be displayed in the device’s active calendar and time zone.
• The setting defaults to the device’s preferred time format until the user makes an explicit selection.
• Changing the device preference does not override an explicit in-app selection.
• The toolbar control clearly communicates the currently selected format.
• The control is accessible with an appropriate label, current value, hint, and sufficiently large tap target.
• Existing loading, searching, grouping, filtering, and booking-fetching behaviour remains unchanged.
• Time formatting does not use manual string splitting or unsafe collection indexing.

User opens the app without a saved preference

• Input:

  • The user opens the app before choosing an in-app time format.

• Output:

  • The app determines whether the device currently prefers 12-hour or 24-hour time.
  • All user-facing times use that format consistently.

User selects 12-hour time

• Input:

  • The user opens the global time-format control and selects “12-hour”.

• Output:

  • Visible times immediately use an AM/PM representation.
  • For example, 15:30 becomes 3:30 PM.
  • The preference is saved for future launches.

User selects 24-hour time

• Input:

  • The user opens the global time-format control and selects “24-hour”.

• Output:

  • Visible times immediately use a 24-hour representation.
  • For example, 3:30 PM becomes 15:30.
  • AM and PM markers are not displayed.
  • The preference is saved for future launches.

User relaunches the app

• Input:

  • The user closes and reopens the app after choosing a format.

• Output:

  • The previously selected time format is restored.
  • The user does not need to configure the preference again.

Time crosses midnight or midday

• Input:

  • The app displays midnight, midday, or a booking crossing a day boundary.

• Output:

  • Times are formatted correctly for the selected convention.
  • Midnight is represented appropriately, such as 12:00 AM or 00:00.
  • Midday is represented appropriately, such as 12:00 PM or 12:00.
  • The booking’s underlying dates and day grouping remain unchanged.

Suggested UI

Add a toolbar menu using a clock icon:

• Use Device Setting
• 12-hour
• 24-hour

The selected option should display a checkmark. Including “Use Device Setting” is preferable to a simple Boolean toggle because it preserves the user’s ability to follow their system preference.

Resources

• Apple Date.FormatStyle
• Apple Date.FormatStyle.Symbol.TimeStyle
• SwiftUI AppStorage
• Foundation Locale
• Foundation Calendar
• SwiftUI toolbar menus
• Existing BookingFormatting implementation
• Existing room-booking time presentation