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