improve time bucket selectors

src/lib/chart/index.ts

@@ -8,4 +8,3 @@ export { default as HudMetric } from './HudMetric.svelte';
 export { default as Marker } from './Marker.svelte';
 export { default as PairCandleChart } from './PairCandleChart.svelte';
 export { default as ReserveInterestChart } from './ReserveInterestChart.svelte';
-export { default as TimeBucketSelector } from './TimeBucketSelector.svelte';

src/lib/components/SegmentedControl.svelte

@@ -17,7 +17,7 @@ button-like control with a segement for each possible value.
 	{#each options as option}
 		<label class:selected={option === selected}>
 			<span>{option}</span>
-			<input type="radio" bind:group={selected} value={option} />
+			<input type="radio" bind:group={selected} value={option} on:change />
 		</label>
 	{/each}
 </div>

src/routes/trading-view/[chain]/[exchange]/[pair]/ChartSection.svelte

@@ -16,10 +16,11 @@ for the same hovered date. Also displays a time-bucket selector.
 -->
 <script lang="ts">
 	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
 	import type { TimeBucket } from '$lib/chart';
 	import { type Candle, quoteFeed, candleToQuote } from '$lib/chart';
-	import { ChartLinker, HudRow, HudMetric, PairCandleChart, TimeBucketSelector } from '$lib/chart';
-	import { Alert } from '$lib/components';
+	import { ChartLinker, HudRow, HudMetric, PairCandleChart } from '$lib/chart';
+	import { Alert, SegmentedControl } from '$lib/components';
 
 	export let pairId: number | string;
 	export let pairSymbol: string;
@@ -39,7 +40,11 @@ for the same hovered date. Also displays a time-bucket selector.
 
 <div class="chart-header">
 	<h2>{pairSymbol} charts</h2>
-	<TimeBucketSelector active={timeBucket} />
+	<SegmentedControl
+		options={['1m', '5m', '15m', '1h', '4h', '1d', '7d', '30d']}
+		selected={timeBucket}
+		on:change={({ target }) => goto(`#${target.value}`, { replaceState: true, noScroll: true })}
+	/>
 </div>
 
 <div class="chart-wrapper">
@@ -127,13 +132,11 @@ for the same hovered date. Also displays a time-bucket selector.
 <style lang="postcss">
 	.chart-header {
 		display: flex;
-		gap: var(--space-md);
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--space-sm) var(--space-lg);
 		margin-bottom: 1em;
 
-		@media (--viewport-md-down) {
-			flex-direction: column;
-		}
-
 		h2 {
 			flex: 1;
 			font: var(--f-h2-medium);

src/routes/trading-view/[chain]/lending/[protocol]/[reserve]/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
 	import type { LendingReserve } from '$lib/explorer/lending-reserve-client';
 	import type { RateType } from '$lib/chart/ReserveInterestChart.svelte';
 	import { type TimeBucket, ReserveInterestChart } from '$lib/chart';
@@ -29,7 +31,7 @@
 	$: borrowable = isBorrowable(reserve);
 	$: showChart = borrowable && !isGhoToken;
 
-	let timeBucket: TimeBucket = '1d';
+	$: timeBucket = ($page.url.hash.slice(1) || '1d') as TimeBucket;
 
 	function getSecondaryRates({ additional_details: details }: LendingReserve) {
 		const rates: RateType[] = ['supply_apr'];
@@ -80,7 +82,11 @@
 	<Section padding="md">
 		<div class="chart-header">
 			<h3>Interest rates</h3>
-			<SegmentedControl options={['1h', '4h', '1d', '7d', '30d']} bind:selected={timeBucket} />
+			<SegmentedControl
+				options={['1h', '4h', '1d', '7d', '30d']}
+				selected={timeBucket}
+				on:change={({ target }) => goto(`#${target.value}`, { replaceState: true, noScroll: true })}
+			/>
 		</div>
 		<ReserveInterestChart
 			{reserve}