ui: Combine relative and absolute range picker

[yomete]

This PR combines the relative and absolute range pickers to be in a tab switcher so as to make it easier to switch between both range pickers.

Resolves #4748

[alwaysmeticulous]

🤖 Meticulous spotted visual differences in 368 of 488 screens tested: view and approve differences detected.

_{Last updated for commit e1c1ecd. This comment will update as new commits are pushed.}

[manojVivek]

Maybe we can try something like

parca/ui/packages/shared/components/src/DateTimeRangePicker/utils.ts

Lines 115 to 125 in c56e0c2

	getRangeStringForUI(): string {
	if (this.from.isRelative() && this.to.isRelative() && (this.to as RelativeDate).value === 0) {
	const from = this.from as RelativeDate;
	return `Last ${from.value} ${from.unit}${from.value > 1 ? 's' : ''}`;
	}
	const formattedFrom = formatDateStringForUI(this.from);
	const formattedTo = formatDateStringForUI(this.to)
	.replace(getUtcStringForDate(this.from as AbsoluteDate, 'll'), '')
	.trim();
	return `${formattedFrom} → ${formattedTo}`;
	}

here so that the text is a bit concise.

[yomete]

yeah this is better, thanks for the suggestion

[manojVivek]

These buttons are rendered as primary variants, should we go with neutral as default and only set primary for the selected range?

Having all the buttons as primary looks a bit too busy.

[yomete]

sgtm!

[manojVivek]

Just a minor comment to fix the width changes when switching around the tabs, otherwise lgtm!