feat: make time stamp selector more discoverable

[willwearing]

Problem

When debugging production issues with Session Replay, users need UTC timestamps to correlate console errors and network calls with external logging tools (e.g., Grafana).

The timestamp format toggle (Relative/UTC/Device) exists but is hidden:

• In the player: you have to click the timestamp itself to discover it cycles through formats
• In the inspector: no visible toggle at all

This is a pain in the arse when I need to quickly debug things when I'm on call.

Changes

Two additions to make timestamp format more discoverable:

1. Inspector header: Added clock icon dropdown next to Events/Console/Network/Comments tabs
2. Player controls: Added clock icon button next to the timestamp display

Both use the existing playerSettingsLogic state—no new logic added.

How did you test this code?

• Type check passes (pnpm typescript:check)
• miniFiltersLogic tests pass
• TODO (starting Posthog locally has been pretty brutal so far - I'll update this when I have some success): Manual testing: open a session replay, verify both clock icons appear and change timestamps

Publish to changelog?

Yes - "Session Replay: Timestamp format toggle now visible in player controls and inspector header"

[greptile-apps]

_{1 file reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[Copilot]

Pull request overview

This PR enhances the discoverability of timestamp format controls in Session Replay by adding visible clock icon buttons/dropdowns in two locations: the player controls and the inspector header. Previously, users had to click directly on timestamps to discover the format toggle, which was unintuitive during incident response scenarios.

Changes:

• Added TimestampFormatButton component in player controls with clock icon dropdown
• Added TimestampFormatSettingsButton component in inspector header with clock icon and label
• Both components integrate with existing playerSettingsLogic state management

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
PlayerInspectorControls.tsx	Added TimestampFormatSettingsButton component to inspector header settings bar with clock icon, label showing current format, and dropdown menu to toggle between Relative/UTC/Device formats
PlayerControllerTime.tsx	Added TimestampFormatButton component with clock icon button and dropdown menu, plus local TIMESTAMP_FORMAT_LABELS constant for tooltip text
PlayerController.tsx	Integrated TimestampFormatButton component into player control bar next to the timestamp display

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[willwearing]

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Order changed from UTC → Device → Relative to Relative → UTC → Device. This changes existing user behavior in the playlist filters dropdown.

Suggested change

	[TimestampFormat.Relative]: 'Relative',
	[TimestampFormat.UTC]: 'UTC',
	[TimestampFormat.Device]: 'Device',
	}
	export function getTimestampFormatMenuItems(
	setTimestampFormat: (format: TimestampFormat) => void,
	currentFormat: TimestampFormat
	): Array<{ label: string; onClick: () => void; active: boolean }> {
	return [
	{
	label: 'Relative',
	onClick: () => setTimestampFormat(TimestampFormat.Relative),
	active: currentFormat === TimestampFormat.Relative,
	},
	{
	label: 'UTC',
	export function getTimestampFormatMenuItems(
	setTimestampFormat: (format: TimestampFormat) => void,
	currentFormat: TimestampFormat
	): Array<{ label: string; onClick: () => void; active: boolean }> {
	return [
	{
	label: 'UTC',
	onClick: () => setTimestampFormat(TimestampFormat.UTC),
	active: currentFormat === TimestampFormat.UTC,
	},
	{
	label: 'Device',
	onClick: () => setTimestampFormat(TimestampFormat.Device),
	active: currentFormat === TimestampFormat.Device,
	},
	{
	label: 'Relative',
	onClick: () => setTimestampFormat(TimestampFormat.Relative),
	active: currentFormat === TimestampFormat.Relative,
	},
	]
	}

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review.
Path: frontend/src/scenes/session-recordings/utils.ts
Line: 15:31

Comment:
Order changed from UTC → Device → Relative to Relative → UTC → Device. This changes existing user behavior in the playlist filters dropdown.

```suggestion
export function getTimestampFormatMenuItems(
    setTimestampFormat: (format: TimestampFormat) => void,
    currentFormat: TimestampFormat
): Array<{ label: string; onClick: () => void; active: boolean }> {
    return [
        {
            label: 'UTC',
            onClick: () => setTimestampFormat(TimestampFormat.UTC),
            active: currentFormat === TimestampFormat.UTC,
        },
        {
            label: 'Device',
            onClick: () => setTimestampFormat(TimestampFormat.Device),
            active: currentFormat === TimestampFormat.Device,
        },
        {
            label: 'Relative',
            onClick: () => setTimestampFormat(TimestampFormat.Relative),
            active: currentFormat === TimestampFormat.Relative,
        },
    ]
}
```

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.