feat(phase3): PWA, auto-discovery, bookmarklet, multi-tab sync

- PWA: manifest, service worker (cache-first static, network-first API), offline page, install prompt banner - Auto-discovery: Docker socket + Traefik API scanning, approval UI - Quick-add bookmarklet: popup-based add page, favicon auto-detect - Multi-tab sync: BroadcastChannel for theme + data changes - i18n translations for all new strings (EN/RU)
2026-03-25 00:59:19 +03:00
parent c6a7de895d
commit dd6958b4d6
28 changed files with 1712 additions and 266 deletions
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { t } from 'svelte-i18n';
+
+	let origin = $state('');
+	let bookmarkletCode = $state('');
+	let bookmarkletHref = $state('');
+
+	$effect(() => {
+		if (typeof window !== 'undefined') {
+			origin = window.location.origin;
+		}
+	});
+
+	$effect(() => {
+		if (!origin) return;
+		// The bookmarklet opens the quick-add page with URL and title pre-filled
+		const code = `javascript:void(window.open('${origin}/apps/quick-add?url='+encodeURIComponent(location.href)+'&name='+encodeURIComponent(document.title),'_blank','width=600,height=500'))`;
+		bookmarkletCode = code;
+		bookmarkletHref = code;
+	});
+</script>
+
+<div class="rounded-xl border border-border bg-card p-6 shadow-sm">
+	<h2 class="mb-2 text-lg font-semibold text-card-foreground">
+		{$t('settings.bookmarklet_title')}
+	</h2>
+	<p class="mb-4 text-sm text-muted-foreground">
+		{$t('settings.bookmarklet_instructions')}
+	</p>
+
+	<div class="mb-4 flex items-center gap-3">
+		<a
+			href={bookmarkletHref}
+			class="inline-flex items-center gap-2 rounded-lg border-2 border-dashed border-primary/50 bg-primary/10 px-4 py-2 text-sm font-medium text-primary transition-colors hover:border-primary hover:bg-primary/20"
+			onclick={(e) => { e.preventDefault(); }}
+			draggable="true"
+		>
+			<svg
+				class="h-4 w-4"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
+			</svg>
+			{$t('settings.bookmarklet_drag')}
+		</a>
+		<span class="text-xs text-muted-foreground">
+			{$t('settings.bookmarklet_drag_hint')}
+		</span>
+	</div>
+
+	<details class="group">
+		<summary class="cursor-pointer text-sm font-medium text-muted-foreground hover:text-foreground">
+			{$t('settings.bookmarklet_show_code')}
+		</summary>
+		<pre class="mt-2 overflow-x-auto rounded-md border border-border bg-background p-3 text-xs text-foreground"><code>{bookmarkletCode}</code></pre>
+	</details>
+</div>