From 8dac91215fa0ebb10a563a52917665bffe74d555 Mon Sep 17 00:00:00 2001
From: TraceLumen <tracelumen@root-kit.ru>
Date: Wed, 2 Sep 2026 13:54:48 +0300
Subject: [PATCH] SPA preview in PrintMenu

---
 src/lib/PrintMenu.svelte             | 178 +++++++++++++--------------
 src/lib/preview/PreviewPage.svelte   |   0
 src/lib/preview/SelectionPage.svelte |   0
 3 files changed, 89 insertions(+), 89 deletions(-)
 create mode 100644 src/lib/preview/PreviewPage.svelte
 create mode 100644 src/lib/preview/SelectionPage.svelte

diff --git a/src/lib/PrintMenu.svelte b/src/lib/PrintMenu.svelte
index 81cba5c..4bc69f0 100644
--- a/src/lib/PrintMenu.svelte
+++ b/src/lib/PrintMenu.svelte
@@ -362,100 +362,102 @@
   }
 </script>
 
-<div class="page-container">
-  <header class="header">
-    <button class="back-btn" onclick={onBack}>← Назад</button>
-    <h1>Печать</h1>
-  </header>
+{#if !activeFile}
+  <div class="page-container">
+    <header class="header">
+      <button class="back-btn" onclick={onBack}>← Назад</button>
+      <h1>Печать</h1>
+    </header>
 
-  <main class="options">
-    {#if files.length === 0}
-      <div class="empty-upload">
-        <p class="empty-hint">Загрузите файлы для печати</p>
-        <button class="action-btn primary" onclick={triggerFileInput}>Загрузить файл(ы)</button>
-      </div>
-    {:else}
-      {#each files as file (file.id)}
-        <section class="option-group file-card" class:expanded={file.expanded}>
-          <div class="file-row" onclick={() => toggleExpanded(file)}>
-            <span class="chevron">{#if file.expanded}▼{:else}►{/if}</span>
-            <span class="file-name" title={file.file.name}>{file.file.name}</span>
-            <span class="file-row-actions" onclick={(e) => e.stopPropagation()}>
-              {#if file.previewUrl}
-                <button type="button" class="icon-btn" onclick={() => openPreview(file)} title="Предпросмотр">🔍</button>
-              {/if}
-              <button type="button" class="icon-btn danger" onclick={() => removeFile(file)} title="Удалить">✕</button>
-            </span>
-          </div>
+    <main class="options">
+      {#if files.length === 0}
+        <div class="empty-upload">
+          <p class="empty-hint">Загрузите файлы для печати</p>
+          <button class="action-btn primary" onclick={triggerFileInput}>Загрузить файл(ы)</button>
+        </div>
+      {:else}
+        {#each files as file (file.id)}
+          <section class="option-group file-card" class:expanded={file.expanded}>
+            <div class="file-row" onclick={() => toggleExpanded(file)}>
+              <span class="chevron">{#if file.expanded}▼{:else}►{/if}</span>
+              <span class="file-name" title={file.file.name}>{file.file.name}</span>
+              <span class="file-row-actions" onclick={(e) => e.stopPropagation()}>
+                {#if file.previewUrl}
+                  <button type="button" class="icon-btn" onclick={() => openPreview(file)} title="Предпросмотр">🔍</button>
+                {/if}
+                <button type="button" class="icon-btn danger" onclick={() => removeFile(file)} title="Удалить">✕</button>
+              </span>
+            </div>
 
-          {#if file.expanded}
-            <div class="file-options">
-              <div class="option-sub print-params-row">
-                <div class="pages-control">
-                  <label class="option-title compact">Страницы:</label>
-                  <button type="button" class="pages-btn" onclick={() => handlePagesClick(file)}>
-                    {pagesLabel(file)}
-                  </button>
+            {#if file.expanded}
+              <div class="file-options">
+                <div class="option-sub print-params-row">
+                  <div class="pages-control">
+                    <label class="option-title compact">Страницы:</label>
+                    <button type="button" class="pages-btn" onclick={() => handlePagesClick(file)}>
+                      {pagesLabel(file)}
+                    </button>
+                  </div>
+                  <div class="copies-control-inline">
+                    <label class="option-title compact">Кол-во:</label>
+                    <div class="mini-counter">
+                      <button type="button" class="circle-btn small" onclick={() => decrementCopies(file)} disabled={file.copies <= 1}>−</button>
+                      <span class="copies-value">{file.copies} шт.</span>
+                      <button type="button" class="circle-btn small" onclick={() => incrementCopies(file)}>＋</button>
+                    </div>
+                  </div>
                 </div>
-                <div class="copies-control-inline">
-                  <label class="option-title compact">Кол-во:</label>
-                  <div class="mini-counter">
-                    <button type="button" class="circle-btn small" onclick={() => decrementCopies(file)} disabled={file.copies <= 1}>−</button>
-                    <span class="copies-value">{file.copies} шт.</span>
-                    <button type="button" class="circle-btn small" onclick={() => incrementCopies(file)}>＋</button>
+
+                <div class="option-sub">
+                  <label class="option-title">Формат</label>
+                  <div class="toggle-group horizontal">
+                    {#each formats as f}
+                      <button type="button" class="toggle-btn {file.format === f ? 'active' : ''}" onclick={() => toggleFormat(file, f)}>{f}</button>
+                    {/each}
+                  </div>
+                </div>
+
+                <div class="option-sub">
+                  <label class="option-title">Цветность</label>
+                  <div class="toggle-group horizontal">
+                    {#each colorModes as c}
+                      <button type="button" class="toggle-btn {file.colorMode === c.id ? 'active' : ''}" onclick={() => toggleColor(file, c)}>{c.label}</button>
+                    {/each}
+                  </div>
+                </div>
+
+                <div class="option-sub quality-sub">
+                  <label class="option-title">Качество – {qualities[file.qualityIndex].label}</label>
+                  <input type="range" min={0} max={qualities.length - 1} step={1} bind:value={file.qualityIndex} class="quality-slider" style="--fill: {qualityFillFor(file)}%" />
+                  <div class="quality-marks-inline">
+                    {#each qualities as q}<span class="quality-mark">{q.label}</span>{/each}
                   </div>
                 </div>
               </div>
+            {/if}
+          </section>
+        {/each}
+        <button type="button" class="add-file-btn" onclick={triggerFileInput}>＋ Добавить файлы</button>
+      {/if}
+    </main>
 
-              <div class="option-sub">
-                <label class="option-title">Формат</label>
-                <div class="toggle-group horizontal">
-                  {#each formats as f}
-                    <button type="button" class="toggle-btn {file.format === f ? 'active' : ''}" onclick={() => toggleFormat(file, f)}>{f}</button>
-                  {/each}
-                </div>
-              </div>
-
-              <div class="option-sub">
-                <label class="option-title">Цветность</label>
-                <div class="toggle-group horizontal">
-                  {#each colorModes as c}
-                    <button type="button" class="toggle-btn {file.colorMode === c.id ? 'active' : ''}" onclick={() => toggleColor(file, c)}>{c.label}</button>
-                  {/each}
-                </div>
-              </div>
-
-              <div class="option-sub quality-sub">
-                <label class="option-title">Качество – {qualities[file.qualityIndex].label}</label>
-                <input type="range" min={0} max={qualities.length - 1} step={1} bind:value={file.qualityIndex} class="quality-slider" style="--fill: {qualityFillFor(file)}%" />
-                <div class="quality-marks-inline">
-                  {#each qualities as q}<span class="quality-mark">{q.label}</span>{/each}
-                </div>
-              </div>
-            </div>
-          {/if}
-        </section>
-      {/each}
-      <button type="button" class="add-file-btn" onclick={triggerFileInput}>＋ Добавить файлы</button>
-    {/if}
-  </main>
-
-  <footer class="actions">
-    {#if files.length > 0}
-      <p class="file-count">
-        {files.length} {plFiles(files.length)}
-        {#if extraCopies > 0}, {extraCopies} {plCopies(extraCopies)}{/if}
-      </p>
-    {/if}
-    <div class="price-summary">
-      <span class="summary-itogo">Итого</span>
-      <span class="summary-price">{totalPrice}</span>
-    </div>
-    <button type="button" class="action-btn secondary" onclick={onPrint}>Печать</button>
-    <div class="home-bar-spacer"><div class="home-bar"></div></div>
-    <input type="file" bind:this={fileInput} accept="image/*,.pdf" multiple onchange={handleFileSelect} style="display:none" />
-  </footer>
-</div>
+    <footer class="actions">
+      {#if files.length > 0}
+        <p class="file-count">
+          {files.length} {plFiles(files.length)}
+          {#if extraCopies > 0}, {extraCopies} {plCopies(extraCopies)}{/if}
+        </p>
+      {/if}
+      <div class="price-summary">
+        <span class="summary-itogo">Итого</span>
+        <span class="summary-price">{totalPrice}</span>
+      </div>
+      <button type="button" class="action-btn secondary" onclick={onPrint}>Печать</button>
+      <!-- Input можно оставить здесь, он скрыт через display:none и не влияет на верстку -->
+      <input type="file" bind:this={fileInput} accept="image/*,.pdf" multiple onchange={handleFileSelect} style="display:none" />
+    </footer>
+  </div>
+{/if}
 
 <!-- ═══════════════════════════════════════════════════════════ -->
 <!-- УНИВЕРСАЛЬНЫЙ ОВЕРЛЕЙ (Галерея выбора ИЛИ Просмотр)      -->
@@ -620,8 +622,6 @@
   .price-summary { display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
   .summary-itogo { font-size: 30px; font-weight: 700; color: #8b93a1; }
   .summary-price { font-size: 38px; font-weight: 800; color: #fff; }
-  .home-bar-spacer { margin-top: auto; padding: 24px 0 8px; display: flex; justify-content: center; }
-  .home-bar { width: 134px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); }
 
   /* ═══════════════════════════════════════ */
   /* ОБЩИЙ ОВЕРЛЕЙ                          */
diff --git a/src/lib/preview/PreviewPage.svelte b/src/lib/preview/PreviewPage.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/preview/SelectionPage.svelte b/src/lib/preview/SelectionPage.svelte
new file mode 100644
index 0000000..e69de29