feat(attachments): attach external notes, screenshots, photos, and image URLs to sparks
This commit is contained in:
airent106 committed
1 parent
8a25771839
commit
4c5560a5a1
6 files changed
+888
-5
No files matched your search
@@ -37,6 +37,14 @@
|
||||
<option value="research">🔬 Research</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Capture</button>
|
||||
<button
|
||||
type="button"
|
||||
id="btn-open-external-clip"
|
||||
class="btn btn-secondary btn-sm"
|
||||
title="Attach external notes, clipboard screenshots, photos, or image URLs to a spark"
|
||||
>
|
||||
📎 Clip / Attach
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
id="btn-quick-whack-prompt"
|
||||
@@ -466,6 +474,56 @@
|
||||
<button type="submit" class="btn btn-ghost btn-sm">+ Add Link</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- External Attachments: Clipped Notes, Screenshots & Reference Images -->
|
||||
<div class="field-group">
|
||||
<div class="field-header-row">
|
||||
<label>📎 Attached External Notes & Reference Images (<span id="drawer-attachments-count">0</span>)</label>
|
||||
<span class="muted-label">Paste (Ctrl+V), drop files, or clip from URL</span>
|
||||
</div>
|
||||
|
||||
<div id="drawer-attachment-dropzone" class="attachment-dropzone">
|
||||
<div class="dropzone-header">
|
||||
<span>📥 <strong>Drop image here</strong>, press <kbd>Ctrl+V</kbd> to paste a screenshot, or attach a note/URL below:</span>
|
||||
<label class="btn btn-secondary btn-xs" style="cursor:pointer;">
|
||||
📷 Choose Image / Camera
|
||||
<input type="file" id="drawer-attach-file-input" accept="image/*" hidden />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="drawer-attach-preview-row" class="attach-preview-row hidden">
|
||||
<img id="drawer-attach-preview-img" src="" alt="Staged attachment" />
|
||||
<div style="flex:1;">
|
||||
<strong style="font-size:0.82rem;">Staged Image Ready to Attach</strong>
|
||||
<p class="muted-label">Add an optional caption or note below and click Attach.</p>
|
||||
</div>
|
||||
<button type="button" id="btn-drawer-clear-staged-img" class="btn btn-ghost btn-xs">✕ Remove</button>
|
||||
</div>
|
||||
|
||||
<div class="form-row-2">
|
||||
<input type="text" id="drawer-attach-title" class="text-input input-sm" placeholder="Title / Caption (e.g. Vintage Ski Patch Ref)" />
|
||||
<input type="url" id="drawer-attach-url" class="text-input input-sm" placeholder="External Image URL or Source Link (https://...)" />
|
||||
</div>
|
||||
<textarea id="drawer-attach-text" rows="2" class="textarea-input" placeholder="Paste external note, quote, spec snippet, or commentary..."></textarea>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.5rem;">
|
||||
<div style="display:flex;gap:0.85rem;flex-wrap:wrap;">
|
||||
<label class="filter-checkbox">
|
||||
<input type="checkbox" id="drawer-attach-append-notes" />
|
||||
<span>Also append text to Markdown Notes</span>
|
||||
</label>
|
||||
<label class="filter-checkbox">
|
||||
<input type="checkbox" id="drawer-attach-set-cover" />
|
||||
<span>Set image as Spark Cover</span>
|
||||
</label>
|
||||
</div>
|
||||
<button type="button" id="btn-drawer-save-attachment" class="btn btn-primary btn-sm">
|
||||
📎 Attach to Spark
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="drawer-attachments-list" class="attachments-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB 2: NANO BANANA 2.1 VISUAL MOCKUP STUDIO -->
|
||||
@@ -700,6 +758,81 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: EXTERNAL CLIPPER / ATTACH TO SPARK -->
|
||||
<div id="external-clip-modal" class="modal-backdrop hidden">
|
||||
<div class="modal-card" style="max-width:600px;">
|
||||
<div class="modal-header">
|
||||
<h3>📎 Attach External Note or Image to Spark</h3>
|
||||
<button type="button" id="btn-close-clip-modal" class="btn btn-ghost btn-sm">✕</button>
|
||||
</div>
|
||||
<form id="external-clip-form" class="modal-body">
|
||||
<p class="muted-label">
|
||||
Clip a screenshot (<kbd>Ctrl+V</kbd> anywhere in this dialog), upload a photo from your phone, fetch an external image URL, or attach notes/links to an existing Spark (or create a new one).
|
||||
</p>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="clip-target-idea">Target Spark / Idea</label>
|
||||
<select id="clip-target-idea" class="filter-select full-width"></select>
|
||||
</div>
|
||||
|
||||
<div id="clip-new-idea-group" class="field-group hidden">
|
||||
<label for="clip-new-idea-title">New Spark Title</label>
|
||||
<input type="text" id="clip-new-idea-title" class="text-input" placeholder="e.g. Vintage Campfire Enamel Mug #merch @creative" />
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="clip-title-input">Attachment Title / Caption</label>
|
||||
<input type="text" id="clip-title-input" class="text-input" placeholder="e.g. Field Notes Photo / Competitor Spec / Article Excerpt" />
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label>Image Source (File / Camera, Clipboard Paste, or Direct Image URL)</label>
|
||||
<div id="clip-dropzone" class="attachment-dropzone">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;gap:0.5rem;flex-wrap:wrap;">
|
||||
<span class="muted-label">📋 Paste image (<kbd>Ctrl+V</kbd>) or drop file here</span>
|
||||
<label class="btn btn-secondary btn-xs" style="cursor:pointer;">
|
||||
📷 Select Photo / File
|
||||
<input type="file" id="clip-file-input" accept="image/*" hidden />
|
||||
</label>
|
||||
</div>
|
||||
<div id="clip-preview-row" class="attach-preview-row hidden">
|
||||
<img id="clip-preview-img" src="" alt="Clip preview" />
|
||||
<span class="muted-label" style="flex:1;">Image staged for attachment</span>
|
||||
<button type="button" id="btn-clip-clear-img" class="btn btn-ghost btn-xs">✕ Clear</button>
|
||||
</div>
|
||||
<input type="url" id="clip-external-img-url" class="text-input input-sm" placeholder="Or paste an external image URL (https://example.com/photo.jpg)..." />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="clip-text-input">External Note / Excerpt / Markdown</label>
|
||||
<textarea id="clip-text-input" rows="3" class="textarea-input" placeholder="Paste notes, thoughts, article quotes, or garment/project details..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="clip-source-url">Source Webpage URL (Optional)</label>
|
||||
<input type="url" id="clip-source-url" class="text-input input-sm" placeholder="https://..." />
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:1rem;flex-wrap:wrap;">
|
||||
<label class="filter-checkbox">
|
||||
<input type="checkbox" id="clip-append-notes" checked />
|
||||
<span>Append note text to Spark's Markdown Notes</span>
|
||||
</label>
|
||||
<label class="filter-checkbox">
|
||||
<input type="checkbox" id="clip-set-cover" checked />
|
||||
<span>Set image as Spark cover</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" id="btn-cancel-clip-modal" class="btn btn-ghost">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">📎 Save Attachment to Spark</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: CARD / MOCKUP LIGHTBOX INSPECTOR -->
|
||||
<div id="lightbox-modal" class="modal-backdrop hidden">
|
||||
<div class="lightbox-card">
|
||||
|
||||
Reference in new issue
Block a user