Fix UI issues: locale switching, dark theme, loading, edit support

- 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>

frontend/src/routes/servers/+page.svelte

@@ -4,21 +4,39 @@
 	import { t } from '$lib/i18n';
 	import PageHeader from '$lib/components/PageHeader.svelte';
 	import Card from '$lib/components/Card.svelte';
+	import Loading from '$lib/components/Loading.svelte';
 
 	let servers = $state<any[]>([]);
 	let showForm = $state(false);
+	let editing = $state<number | null>(null);
 	let form = $state({ name: 'Immich', url: '', api_key: '' });
 	let error = $state('');
 	let submitting = $state(false);
+	let loaded = $state(false);
 
 	onMount(load);
-	async function load() { try { servers = await api('/servers'); } catch {} }
+	async function load() { try { servers = await api('/servers'); } catch {} finally { loaded = true; } }
 
-	async function create(e: SubmitEvent) {
+	function openNew() {
+		form = { name: 'Immich', url: '', api_key: '' };
+		editing = null; showForm = true;
+	}
+	function edit(s: any) {
+		form = { name: s.name, url: s.url, api_key: '' };
+		editing = s.id; showForm = true;
+	}
+
+	async function save(e: SubmitEvent) {
 		e.preventDefault(); error = ''; submitting = true;
 		try {
-			await api('/servers', { method: 'POST', body: JSON.stringify(form) });
-			form = { name: 'Immich', url: '', api_key: '' }; showForm = false; await load();
+			if (editing) {
+				const body: any = { name: form.name, url: form.url };
+				if (form.api_key) body.api_key = form.api_key;
+				await api(`/servers/${editing}`, { method: 'PUT', body: JSON.stringify(body) });
+			} else {
+				await api('/servers', { method: 'POST', body: JSON.stringify(form) });
+			}
+			showForm = false; editing = null; await load();
 		} catch (err: any) { error = err.message; }
 		submitting = false;
 	}
@@ -30,16 +48,20 @@
 </script>
 
 <PageHeader title={t('servers.title')} description={t('servers.description')}>
-	<button onclick={() => showForm = !showForm}
+	<button onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}
 		class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
 		{showForm ? t('servers.cancel') : t('servers.addServer')}
 	</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}
-		<form onsubmit={create} class="space-y-3">
+		<form onsubmit={save} class="space-y-3">
 			<div>
 				<label for="srv-name" class="block text-sm font-medium mb-1">{t('servers.name')}</label>
 				<input id="srv-name" bind:value={form.name} required class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
@@ -49,11 +71,11 @@
 				<input id="srv-url" bind:value={form.url} required placeholder={t('servers.urlPlaceholder')} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
 			</div>
 			<div>
-				<label for="srv-key" class="block text-sm font-medium mb-1">{t('servers.apiKey')}</label>
-				<input id="srv-key" bind:value={form.api_key} required type="password" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+				<label for="srv-key" class="block text-sm font-medium mb-1">{t('servers.apiKey')}{editing ? ' (leave empty to keep current)' : ''}</label>
+				<input id="srv-key" bind:value={form.api_key} type="password" required={!editing} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
 			</div>
 			<button type="submit" disabled={submitting} class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 disabled:opacity-50">
-				{submitting ? t('servers.connecting') : t('servers.addServer')}
+				{submitting ? t('servers.connecting') : (editing ? t('common.save') : t('servers.addServer'))}
 			</button>
 		</form>
 	</Card>
@@ -70,9 +92,14 @@
 						<p class="font-medium">{server.name}</p>
 						<p class="text-sm text-[var(--color-muted-foreground)]">{server.url}</p>
 					</div>
-					<button onclick={() => remove(server.id)} class="text-xs text-[var(--color-destructive)] hover:underline">{t('servers.delete')}</button>
+					<div class="flex items-center gap-3">
+						<button onclick={() => edit(server)} class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('common.edit')}</button>
+						<button onclick={() => remove(server.id)} class="text-xs text-[var(--color-destructive)] hover:underline">{t('servers.delete')}</button>
+					</div>
 				</div>
 			</Card>
 		{/each}
 	</div>
 {/if}
+
+{/if}