diff --git a/frontend-v2/src/lib/components/layout/AppShell.svelte b/frontend-v2/src/lib/components/layout/AppShell.svelte index f4c44b7..d034b21 100644 --- a/frontend-v2/src/lib/components/layout/AppShell.svelte +++ b/frontend-v2/src/lib/components/layout/AppShell.svelte @@ -79,6 +79,21 @@ if (file) handleUpload(file); } + function onPasteBox(e: ClipboardEvent) { + const items = e.clipboardData?.items; + if (!items) return; + for (const item of items) { + if (item.type.startsWith('image/')) { + const file = item.getAsFile(); + if (file) { + e.preventDefault(); + handleUpload(file); + } + break; + } + } + } + // Brain sidebar sub-items interface BrainFolder { id: string; name: string; item_count: number; } interface BrainTag { id: string; name: string; item_count: number; } @@ -144,10 +159,15 @@
e.preventDefault()} ondrop={onRailDrop}> - +
+ +
+ {#if uploadStatus === 'uploading'}Uploading...{:else if uploadStatus === 'done'}Saved!{:else}Paste screenshot{/if} +
+ +
@@ -415,24 +435,49 @@ border-top: 1px solid var(--shell-line); } - .rail-upload { + .rail-upload-row { display: flex; - align-items: center; - gap: 8px; - padding: 9px 12px; - border-radius: 999px; + gap: 4px; + align-items: stretch; + } + .paste-box { + flex: 1; + padding: 7px 10px; + border-radius: 10px; border: 1px dashed var(--shell-line); background: none; color: var(--shell-muted); - font-size: 0.78rem; + font-size: 0.72rem; font-family: inherit; + cursor: text; + transition: all 160ms; + outline: none; + min-height: 0; + overflow: hidden; + white-space: nowrap; + } + .paste-box:focus { + border-color: var(--shell-ink); + border-style: solid; + color: var(--shell-ink); + background: rgba(255,255,255,0.2); + } + .upload-icon-btn { + width: 32px; + flex-shrink: 0; + border-radius: 10px; + border: 1px solid var(--shell-line); + background: none; + color: var(--shell-muted); + display: flex; + align-items: center; + justify-content: center; cursor: pointer; transition: all 160ms; } - .rail-upload:hover { - border-color: var(--shell-ink); - color: var(--shell-ink); + .upload-icon-btn:hover { background: rgba(255,255,255,0.3); + color: var(--shell-ink); } .rail-date {