From 40eee984daeb2d82af375ff322c66a6c0e7ca869 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Fri, 28 Aug 2026 11:50:50 +0500
Subject: [PATCH] feat: add link to preview design

---
 docs/plan-redesign.md               |  3 +-
 web/src/routes/(old)/+layout.svelte | 69 +++++++++++++++++++----------
 2 files changed, 46 insertions(+), 26 deletions(-)

diff --git a/docs/plan-redesign.md b/docs/plan-redesign.md
index 0ae416f..83622a8 100644
--- a/docs/plan-redesign.md
+++ b/docs/plan-redesign.md
@@ -336,8 +336,7 @@ src/routes/preview/tools/[id]/+page.svelte
 
 ### Шаг 4. Переключатель и проверка
 
-- [ ] **[C15]** Кнопка «Preview v2» + `localStorage`-флаг в старой шапке (ведёт на
-      `/preview`).
+- [x] **[C15]** В старой шапке ссылка «Preview v2» → `/preview`, ставит `localStorage['easy-png-tools:preview-v2']='1'`.
 - [ ] **[C16]** Смоук §8, скриншоты против `refs-html/`, прогон старых тестов
       (доказательство отсутствия регресса). Фиксы по результатам — отдельными
       мелкими коммитами.
diff --git a/web/src/routes/(old)/+layout.svelte b/web/src/routes/(old)/+layout.svelte
index c2e0761..989c3a9 100644
--- a/web/src/routes/(old)/+layout.svelte
+++ b/web/src/routes/(old)/+layout.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import '../../app.css';
-	import favicon from '$lib/assets/favicon.svg';
-	import { onMount } from 'svelte';
-	import { resolve } from '$app/paths';
-	import { getLocale, initLocale, setLocale } from '$lib/i18n/locale.svelte';
-	import { getTheme, initTheme, setTheme } from '$lib/theme.svelte';
-	import { t } from '$lib/i18n/t';
-	import { LOCALES, type Locale } from '$lib/i18n/dict';
+	import "../../app.css";
+	import favicon from "$lib/assets/favicon.svg";
+	import { onMount } from "svelte";
+	import { resolve } from "$app/paths";
+	import { getLocale, initLocale, setLocale } from "$lib/i18n/locale.svelte";
+	import { getTheme, initTheme, setTheme } from "$lib/theme.svelte";
+	import { t } from "$lib/i18n/t";
+	import { LOCALES, type Locale } from "$lib/i18n/dict";
 
 	let { children } = $props();
 
@@ -15,7 +15,7 @@
 		initTheme();
 	});
 
-	const LANG_LABELS: Record<Locale, string> = { ru: 'RU', en: 'EN' };
+	const LANG_LABELS: Record<Locale, string> = { ru: "RU", en: "EN" };
 </script>
 
 <svelte:head>
@@ -24,10 +24,20 @@
 
 <div class="app">
 	<header>
-		<a href={resolve('/')} class="brand">easy-png-tools</a>
-		<nav aria-label={t('header.sectionsAria')}>
-			<a class="nav-link workspace-link" href={resolve('/')}>{t('header.workspace')}</a>
-			<a class="nav-link" href={resolve('/list-tools')}>{t('header.catalog')}</a>
+		<a href={resolve("/")} class="brand">easy-png-tools</a>
+		<nav aria-label={t("header.sectionsAria")}>
+			<a class="nav-link workspace-link" href={resolve("/")}
+				>{t("header.workspace")}</a
+			>
+			<a class="nav-link" href={resolve("/list-tools")}>{t("header.catalog")}</a
+			>
+			<a
+				class="nav-link preview-v2"
+				href={resolve("/preview")}
+				onclick={() => localStorage.setItem("easy-png-tools:preview-v2", "1")}
+			>
+				Preview v2
+			</a>
 			<div class="lang-switch" role="group" aria-label="Language / Язык">
 				{#each LOCALES as l (l)}
 					<button
@@ -45,22 +55,22 @@
 				<button
 					type="button"
 					class="lang-btn"
-					class:active={getTheme() === 'light'}
-					aria-pressed={getTheme() === 'light'}
-					title={t('ui.themeLight')}
-					aria-label={t('ui.themeLight')}
-					onclick={() => setTheme('light')}
+					class:active={getTheme() === "light"}
+					aria-pressed={getTheme() === "light"}
+					title={t("ui.themeLight")}
+					aria-label={t("ui.themeLight")}
+					onclick={() => setTheme("light")}
 				>
 					☀
 				</button>
 				<button
 					type="button"
 					class="lang-btn"
-					class:active={getTheme() === 'dark'}
-					aria-pressed={getTheme() === 'dark'}
-					title={t('ui.themeDark')}
-					aria-label={t('ui.themeDark')}
-					onclick={() => setTheme('dark')}
+					class:active={getTheme() === "dark"}
+					aria-pressed={getTheme() === "dark"}
+					title={t("ui.themeDark")}
+					aria-label={t("ui.themeDark")}
+					onclick={() => setTheme("dark")}
 				>
 					☾
 				</button>
@@ -73,7 +83,7 @@
 	</main>
 
 	<footer>
-		<p class="text-caption text-muted">{t('header.footerNote')}</p>
+		<p class="text-caption text-muted">{t("header.footerNote")}</p>
 	</footer>
 </div>
 
@@ -161,6 +171,17 @@
 		color: var(--link);
 	}
 
+	.preview-v2 {
+		color: var(--accent);
+		border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
+	}
+
+	.preview-v2:hover {
+		background: var(--accent);
+		color: var(--bg);
+		text-decoration: none;
+	}
+
 	main {
 		flex: 1;
 		width: 100%;