Fix UI issues: locale switching, dark theme, loading, edit support
Some checks failed
Validate / Hassfest (push) Has been cancelled
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:
9
frontend/src/lib/components/Loading.svelte
Normal file
9
frontend/src/lib/components/Loading.svelte
Normal file
@@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
let { lines = 3 } = $props<{ lines?: number }>();
|
||||
</script>
|
||||
|
||||
<div class="space-y-3 animate-pulse">
|
||||
{#each Array(lines) as _}
|
||||
<div class="bg-[var(--color-muted)] rounded-lg h-16"></div>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* Simple i18n store using Svelte 5 runes.
|
||||
* Supports nested keys like "nav.dashboard".
|
||||
* Simple i18n module. Uses plain variable (no $state rune)
|
||||
* so it works in both SSR and client contexts.
|
||||
*/
|
||||
|
||||
import en from './en.json';
|
||||
@@ -10,7 +10,7 @@ export type Locale = 'en' | 'ru';
|
||||
|
||||
const translations: Record<Locale, Record<string, any>> = { en, ru };
|
||||
|
||||
let currentLocale = $state<Locale>('en');
|
||||
let currentLocale: Locale = 'en';
|
||||
|
||||
export function getLocale(): Locale {
|
||||
return currentLocale;
|
||||
|
||||
Reference in New Issue
Block a user