From 998551ab19e6d59bd2cbfc85ee2beba243c9c76b Mon Sep 17 00:00:00 2001
From: Saberlve <saberlve9@gmail.com>
Date: Wed, 15 Apr 2026 15:52:33 +0800
Subject: [PATCH] feat(import-window): replace modal CSS with window frame CSS

Replaces .modal-shell, .modal-overlay, .modal-card with
.window-shell, .window-frame supporting:
- 90vw x 75vh centered floating window
- minimize/maximize/close buttons
- draggable toolbar
- resizable window
- session-persisted position/size

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/zotero_kb/templates/index.html | 113 +++++++++++++++++++----------
 1 file changed, 76 insertions(+), 37 deletions(-)

diff --git a/src/zotero_kb/templates/index.html b/src/zotero_kb/templates/index.html
index ce183b1..9eaaf50 100644
--- a/src/zotero_kb/templates/index.html
+++ b/src/zotero_kb/templates/index.html
@@ -144,69 +144,108 @@
         border-radius: 16px;
         color: var(--muted);
       }
-      .modal-shell[hidden] {
+      .window-shell[hidden] {
         display: none;
       }
-      .modal-shell {
+      .window-shell {
         position: fixed;
         inset: 0;
         z-index: 40;
+        pointer-events: none;
       }
-      .modal-overlay {
-        position: absolute;
-        inset: 0;
-        border-radius: 0;
-        background: rgba(24, 28, 22, 0.42);
+      .window-shell:not([hidden]) {
+        pointer-events: auto;
       }
-      .modal-card {
-        position: relative;
-        z-index: 1;
-        width: min(1100px, calc(100vw - 2rem));
-        max-height: calc(100vh - 2rem);
-        margin: 1rem auto;
+      .window-frame {
+        position: fixed;
+        z-index: 40;
+        width: var(--fw-width, 90vw);
+        height: var(--fw-height, 75vh);
+        left: var(--fw-left, calc((100vw - var(--fw-width, 90vw)) / 2));
+        top: var(--fw-top, calc((100vh - var(--fw-height, 75vh)) / 2));
+        min-width: 40rem;
+        min-height: 30rem;
+        border-radius: 16px;
+        box-shadow: 0 24px 64px rgba(35, 31, 21, 0.22);
         display: grid;
-        grid-template-rows: auto auto 1fr auto;
+        grid-template-rows: auto 1fr auto;
+        overflow: hidden;
         background: var(--surface);
         border: 1px solid var(--line);
-        border-radius: 24px;
-        box-shadow: 0 24px 60px rgba(35, 31, 21, 0.2);
-        overflow: hidden;
       }
-      .modal-header,
-      .modal-action-bar {
+      .window-frame.maximized {
+        width: 100vw;
+        height: 100vh;
+        left: 0 !important;
+        top: 0 !important;
+        border-radius: 0;
+        --fw-width: 100vw;
+        --fw-height: 100vh;
+      }
+      .window-frame:not(.maximized):not(.minimized) {
+        resize: both;
+        overflow: auto;
+      }
+      .window-minimized-bar {
+        position: fixed;
+        bottom: 1rem;
+        right: 1rem;
+        z-index: 50;
+        height: 2.5rem;
+        width: 14rem;
+        border-radius: 8px;
+        background: var(--surface);
+        border: 1px solid var(--line);
+        box-shadow: 0 8px 24px rgba(35, 31, 21, 0.14);
+        display: none;
+        align-items: center;
+        padding: 0 0.75rem;
+        gap: 0.5rem;
+        cursor: pointer;
+        font-size: 0.9rem;
+        font-weight: 600;
+        color: var(--ink);
+      }
+      .window-minimized-bar:not([hidden]) {
+        display: flex;
+      }
+      .window-minimized-bar:hover {
+        background: var(--panel);
+      }
+      .window-toolbar {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 0.75rem;
+        gap: 1rem;
         padding: 1rem 1.25rem;
         border-bottom: 1px solid var(--line);
+        background: rgba(255, 253, 248, 0.98);
+        cursor: grab;
       }
-      .modal-action-bar {
-        border-top: 1px solid var(--line);
-        border-bottom: 0;
-        position: sticky;
-        bottom: 0;
-        z-index: 2;
-        background: var(--surface);
+      .window-toolbar:active {
+        cursor: grabbing;
       }
-      .modal-header-actions {
+      .window-toolbar-actions {
         display: flex;
         align-items: center;
         gap: 0.75rem;
         flex-wrap: wrap;
       }
-      .modal-body {
+      .window-body {
         display: grid;
-        grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.2fr);
-        min-height: 24rem;
-      }
-      .modal-pane {
-        display: grid;
-        gap: 0.6rem;
-        padding: 1rem 1.25rem;
+        grid-template-columns: 22rem minmax(0, 1fr);
         min-height: 0;
       }
-      .modal-scroll {
+      .window-pane {
+        display: grid;
+        gap: 0.6rem;
+        min-height: 0;
+        padding: 1rem 1.25rem;
+      }
+      .window-pane.collections {
+        border-right: 1px solid var(--line);
+      }
+      .window-scroll {
         min-height: 0;
         overflow: auto;
       }