Add timezone selector

frontend/src/app/app.constants.ts

@@ -439,4 +439,39 @@ export const fiatCurrencies = {
     code: 'ZAR',
     indexed: true,
   },
-};
+};
+
+export interface Timezone {
+  offset: string;
+  name: string;
+}
+
+export const timezones: Timezone[] = [
+  { offset: '-12', name: 'Anywhere on Earth (AoE)' },
+  { offset: '-11', name: 'Samoa Standard Time (SST)' },
+  { offset: '-10', name: 'Hawaii-Aleutian Standard Time (HST)' },
+  { offset: '-9', name: 'Alaska Standard Time (AKST)' },
+  { offset: '-8', name: 'Pacific Standard Time (PST)' },
+  { offset: '-7', name: 'Mountain Standard Time (MST)' },
+  { offset: '-6', name: 'Central Standard Time (CST)' },
+  { offset: '-5', name: 'Eastern Standard Time (EST)' },
+  { offset: '-4', name: 'Atlantic Standard Time (AST)' },
+  { offset: '-3', name: 'Argentina Time (ART)' },
+  { offset: '-2', name: 'Fernando de Noronha Time (FNT)' },
+  { offset: '-1', name: 'Azores Time (AZOT)' },
+  { offset: '+0', name: 'Greenwich Mean Time (GMT)' },
+  { offset: '+1', name: 'Central European Time (CET)' },
+  { offset: '+2', name: 'Eastern European Time (EET)' },
+  { offset: '+3', name: 'Moscow Standard Time (MSK)' },
+  { offset: '+4', name: 'Armenia Time (AMT)' },
+  { offset: '+5', name: 'Pakistan Standard Time (PKT)' },
+  { offset: '+6', name: 'Xinjiang Time (XJT)' },
+  { offset: '+7', name: 'Indochina Time (ICT)' },
+  { offset: '+8', name: 'Hong Kong Time (HKT)' },
+  { offset: '+9', name: 'Japan Standard Time (JST)' },
+  { offset: '+10', name: 'Australian Eastern Standard Time (AEST)' },
+  { offset: '+11', name: 'Norfolk Time (NFT)' },
+  { offset: '+12', name: 'New Zealand Standard Time (NZST)' },
+  { offset: '+13', name: 'Tonga Time (TOT)' },
+  { offset: '+14', name: 'Line Islands Time (LINT)' }
+];

frontend/src/app/components/timezone-selector/timezone-selector.component.html

@@ -0,0 +1,8 @@
+<div [formGroup]="timezoneForm" class="text-small text-center">
+    <select formControlName="mode" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 110px;" (change)="changeMode()">
+        <option value="local">UTC{{ localTimezoneOffset !== '+0' ? localTimezoneOffset : '' }} {{ localTimezoneName ? '- ' + localTimezoneName : '' }}</option>
+        <option value="+0" *ngIf="localTimezoneOffset !== '+0'">UTC - Greenwich Mean Time (GMT)</option>
+        <option disabled>────</option>
+        <option *ngFor="let timezone of timezones" [value]="timezone.offset">UTC{{ timezone.offset !== '+0' ? timezone.offset : '' }} - {{ timezone.name }}</option>
+    </select>
+</div>

frontend/src/app/components/timezone-selector/timezone-selector.component.ts

@@ -0,0 +1,58 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { StorageService } from '@app/services/storage.service';
+import { StateService } from '@app/services/state.service';
+import { timezones } from '@app/app.constants';
+
+
+@Component({
+  selector: 'app-timezone-selector',
+  templateUrl: './timezone-selector.component.html',
+  styleUrls: ['./timezone-selector.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TimezoneSelectorComponent implements OnInit {
+  timezoneForm: UntypedFormGroup;
+  timezones = timezones;
+  localTimezoneOffset: string = '';
+  localTimezoneName: string;
+
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private stateService: StateService,
+    private storageService: StorageService,
+  ) { }
+
+  ngOnInit() {
+    this.setLocalTimezone();
+    this.timezoneForm = this.formBuilder.group({
+      mode: ['local'],
+    });
+    this.stateService.timezone$.subscribe((mode) => {
+      this.timezoneForm.get('mode')?.setValue(mode);
+    });
+  }
+
+  changeMode() {
+    const newMode = this.timezoneForm.get('mode')?.value;
+    this.storageService.setValue('timezone-preference', newMode);
+    this.stateService.timezone$.next(newMode);
+  }
+
+  setLocalTimezone() {
+    const offset = new Date().getTimezoneOffset();
+    const sign = offset <= 0 ? "+" : "-";
+    const absOffset = Math.abs(offset);
+    const hours = String(Math.floor(absOffset / 60));
+    const minutes = String(absOffset % 60).padStart(2, '0');
+    if (minutes === '00') {
+      this.localTimezoneOffset = `${sign}${hours}`;
+    } else {
+      this.localTimezoneOffset = `${sign}${hours.padStart(2, '0')}:${minutes}`;
+    }
+
+    const timezone = this.timezones.find(tz => tz.offset === this.localTimezoneOffset);
+    this.timezones = this.timezones.filter(tz => tz.offset !== this.localTimezoneOffset && tz.offset !== '+0');
+    this.localTimezoneName = timezone ? timezone.name : '';
+  }
+}

frontend/src/app/services/state.service.ts

@@ -186,6 +186,7 @@ export class StateService {
   live2Chart$ = new Subject<OptimizedMempoolStats>();
 
   viewAmountMode$: BehaviorSubject<'btc' | 'sats' | 'fiat'>;
+  timezone$: BehaviorSubject<string>;
   connectionState$ = new BehaviorSubject<0 | 1 | 2>(2);
   isTabHidden$: Observable<boolean>;
 
@@ -347,6 +348,9 @@ export class StateService {
     const viewAmountModePreference = this.storageService.getValue('view-amount-mode') as 'btc' | 'sats' | 'fiat';
     this.viewAmountMode$ = new BehaviorSubject<'btc' | 'sats' | 'fiat'>(viewAmountModePreference || 'btc');
 
+    const timezonePreference = this.storageService.getValue('timezone-preference');
+    this.timezone$ = new BehaviorSubject<string>(timezonePreference || 'local');
+
     this.backend$.subscribe(backend => {
       this.backend = backend;
     });

frontend/src/app/shared/components/global-footer/global-footer.component.html

@@ -30,7 +30,7 @@
             <app-fiat-selector></app-fiat-selector>
           </div>
           <div class="selector">
-            <app-rate-unit-selector></app-rate-unit-selector>
+            <app-timezone-selector></app-timezone-selector>
           </div>
           <div class="selector d-none" [ngClass]="isServicesPage ? 'd-lg-flex' : 'd-md-flex'">
             <app-amount-selector></app-amount-selector>

frontend/src/app/shared/components/timestamp/timestamp.component.html

@@ -1,6 +1,6 @@
 <span *ngIf="seconds === undefined">-</span>
 <span *ngIf="seconds !== undefined">
-  &lrm;{{ seconds * 1000 | date: customFormat ?? 'yyyy-MM-dd HH:mm' }}
+  &lrm;{{ seconds * 1000 | date: customFormat ?? 'yyyy-MM-dd HH:mm' : (stateService.timezone$ | async) }}
   <div class="lg-inline" *ngIf="!hideTimeSince">
     <i class="symbol">(<app-time kind="since" [time]="seconds" [fastRender]="true" [precision]="precision" [minUnit]="minUnit"></app-time>)</i>
   </div>

frontend/src/app/shared/components/timestamp/timestamp.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
+import { StateService } from '@app/services/state.service';
 
 @Component({
   selector: 'app-timestamp',
@@ -16,6 +17,10 @@ export class TimestampComponent implements OnChanges {
 
   seconds: number | undefined = undefined;
 
+  constructor(
+    public stateService: StateService,
+  ) { }
+
   ngOnChanges(): void {
     if (this.unixTime) {
       this.seconds = this.unixTime;

frontend/src/app/shared/shared.module.ts

@@ -36,6 +36,7 @@ import { FiatSelectorComponent } from '@components/fiat-selector/fiat-selector.c
 import { RateUnitSelectorComponent } from '@components/rate-unit-selector/rate-unit-selector.component';
 import { ThemeSelectorComponent } from '@components/theme-selector/theme-selector.component';
 import { AmountSelectorComponent } from '@components/amount-selector/amount-selector.component';
+import { TimezoneSelectorComponent } from '@components/timezone-selector/timezone-selector.component';
 import { BrowserOnlyDirective } from '@app/shared/directives/browser-only.directive';
 import { ServerOnlyDirective } from '@app/shared/directives/server-only.directive';
 import { ColoredPriceDirective } from '@app/shared/directives/colored-price.directive';
@@ -134,6 +135,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from '@app/shared/components/
     ThemeSelectorComponent,
     RateUnitSelectorComponent,
     AmountSelectorComponent,
+    TimezoneSelectorComponent,
     ScriptpubkeyTypePipe,
     RelativeUrlPipe,
     NoSanitizePipe,
@@ -283,6 +285,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from '@app/shared/components/
     RateUnitSelectorComponent,
     ThemeSelectorComponent,
     AmountSelectorComponent,
+    TimezoneSelectorComponent,
     ScriptpubkeyTypePipe,
     RelativeUrlPipe,
     Hex2asciiPipe,