Fix UI issues: locale switching, dark theme, loading, edit support
Some checks failed
Validate / Hassfest (push) Has been cancelled

- Fix i18n: remove $state rune (SSR incompatible in .ts files),
  use reactive localeVersion counter in layout to trigger re-render
  on locale change. Language switching now works immediately.
- Fix dark theme: add global CSS rules for input/select/textarea to
  use theme colors, override browser autofill in dark mode, set
  color-scheme for native controls (scrollbars, checkboxes)
- Collapsible sidebar: toggle button (▶/◀) with persistent state,
  icons-only mode when collapsed. Theme/language buttons moved to
  bottom above user info.
- Loading skeletons: all pages show animated pulse placeholders
  while data loads, eliminating content flicker on tab switch
- Edit support: Servers, Trackers, and Targets now have Edit buttons
  that open the form pre-filled with current values. Save calls PUT.
  Sensitive fields (API key, bot token) can be left empty to keep
  current value when editing.
- CLAUDE.md: add dev server restart rules

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-19 16:15:17 +03:00
parent 42063b7bf6
commit fd1ad91fbe
11 changed files with 264 additions and 71 deletions

View File

@@ -5,15 +5,17 @@
import { getAuth } from '$lib/auth.svelte';
import PageHeader from '$lib/components/PageHeader.svelte';
import Card from '$lib/components/Card.svelte';
import Loading from '$lib/components/Loading.svelte';
const auth = getAuth();
let users = $state<any[]>([]);
let showForm = $state(false);
let form = $state({ username: '', password: '', role: 'user' });
let error = $state('');
let loaded = $state(false);
onMount(load);
async function load() { try { users = await api('/users'); } catch {} }
async function load() { try { users = await api('/users'); } catch {} finally { loaded = true; } }
async function create(e: SubmitEvent) {
e.preventDefault(); error = '';
@@ -33,6 +35,8 @@
</button>
</PageHeader>
{#if !loaded}<Loading />{:else}
{#if showForm}
<Card class="mb-6">
{#if error}<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>{/if}
@@ -72,3 +76,5 @@
</Card>
{/each}
</div>
{/if}