Move personal display preferences into My account
This commit is contained in:
@@ -1,18 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { timeFormat, timeZone, timeZonePersistenceError } from '$ui/stores/time-zone.js';
|
||||
import { availableTimeZones, DEFAULT_TIME_ZONE } from '$lib/time-zone.js';
|
||||
import { onMount } from 'svelte';
|
||||
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
||||
import Button from '$ui/components/primitives/Button.svelte';
|
||||
import type { FleetSettings } from '$lib/fleet-settings.js';
|
||||
let exampleDate = $state<Date | null>(null);
|
||||
let settings = $state<FleetSettings | null>(null);
|
||||
let loading = $state(true);
|
||||
let saving = $state(false);
|
||||
let error = $state('');
|
||||
let notice = $state('');
|
||||
const zones = $derived([...new Set([...availableTimeZones(), $timeZone])].sort());
|
||||
onMount(() => { exampleDate = new Date(); void loadSettings(); });
|
||||
onMount(() => { void loadSettings(); });
|
||||
|
||||
async function loadSettings() {
|
||||
loading = true; error = '';
|
||||
@@ -40,7 +36,7 @@
|
||||
|
||||
<svelte:head><title>Settings · Electric Cherry</title></svelte:head>
|
||||
<section class="page">
|
||||
<SectionHeader title="Settings" subtitle="Manage fleet limits, history retention, and display preferences." />
|
||||
<SectionHeader title="Settings" subtitle="Manage shared fleet limits and history retention." />
|
||||
<section class="guide" aria-labelledby="fleet-heading">
|
||||
<h2 id="fleet-heading">Fleet settings</h2>
|
||||
<p>Saved for everyone using this Electric Cherry instance. Changes apply without restarting the app.</p>
|
||||
@@ -74,17 +70,7 @@
|
||||
<Button onclick={loadSettings}>Retry loading</Button>
|
||||
{/if}
|
||||
</section>
|
||||
<section class="guide" aria-labelledby="display-heading">
|
||||
<h2 id="display-heading">Display preferences</h2>
|
||||
<label class="timezone">Timezone
|
||||
<select bind:value={$timeZone} aria-describedby="timezone-help">
|
||||
{#each zones as zone}<option value={zone}>{zone.replaceAll('_', ' ')}{zone === DEFAULT_TIME_ZONE ? ' (default)' : ''}</option>{/each}
|
||||
</select>
|
||||
</label>
|
||||
<p id="timezone-help">Dates and times throughout the app use this timezone, including daylight saving changes. Saved automatically in this browser.</p>
|
||||
{#if exampleDate}<p>Example: {$timeFormat.dateTime(exampleDate)}</p>{/if}
|
||||
{#if $timeZonePersistenceError}<p role="status">Browser storage is unavailable. Your timezone applies for this visit but cannot be saved.</p>{/if}
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
<style>
|
||||
@@ -92,8 +78,6 @@
|
||||
.guide { padding: 20px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); }
|
||||
h2 { font-size: var(--text-md); margin: 0; }
|
||||
p { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.65; }
|
||||
.timezone { display: grid; gap: 8px; margin-top: 16px; font-size: var(--text-sm); max-width: 420px; }
|
||||
.timezone select { width: 100%; padding: 10px 12px; font: inherit; color: var(--text-primary); background: var(--surface-sunken); border: 1px solid var(--border-control); border-radius: var(--radius-sm); }
|
||||
fieldset { border: 0; padding: 0; margin: 20px 0 0; min-width: 0; }
|
||||
fieldset label { display: block; margin: 20px 0 8px; font-size: var(--text-sm); }
|
||||
fieldset input { width: 160px; padding: 10px 12px; font: inherit; color: var(--text-primary); background: var(--surface-sunken); border: 1px solid var(--border-control); border-radius: var(--radius-sm); }
|
||||
|
||||
Reference in New Issue
Block a user