add upload/attach file feature for writing notes

2 files changed, 31 insertions, 0 deletions

diff --git a/templates/attachment_pill.php b/templates/attachment_pill.php
new file mode 100644
index 0000000..76fc590
--- /dev/null
+++ b/templates/attachment_pill.php
@@ -0,0 +1,22 @@
+<?php
+$type ??= 'add';
+?>
+
+<?php if ($type == 'add'): ?>
+
+    <button id="writeNoteAttachmentPillAdder" type="button" class="inlinePill" type="button"
+        _="on click set f to #noteAttachmentFile then f.click()">
+        <span class="pillIcon material-symbols add"></span>
+        <span class="pillText"><?= __('writeNote.attachments.add.action') ?></span>
+    </button>
+
+<?php elseif ($type == 'file'): ?>
+
+    <button class="inlinePill" type="button" _="on click remove me">
+        <span class="pillIcon material-symbols attach-file"></span>
+        <span class="pillText"><?= $name ?></span>
+        <input type="hidden" name="attachments[]" value="<?= $oid ?>">
+        <span class="pillIcon material-symbols close-small"></span>
+    </button>
+
+<?php endif; ?>
\ No newline at end of file
diff --git a/templates/write_note_form.php b/templates/write_note_form.php
index b86e825..82964c5 100644
--- a/templates/write_note_form.php
+++ b/templates/write_note_form.php
@@ -1,3 +1,8 @@
+<form hidden id="writeNoteAttachmentForm" action="/todo" hx-post="/fragment/note/attachmentPill" hx-swap="beforebegin"
+    hx-target="#writeNoteAttachmentPillAdder" enctype="multipart/form-data">
+    <input hidden type="file" name="file" id="noteAttachmentFile" _="on change send submit to closest <form/>">
+</form>
+
 <form id="writeNoteForm" action="/todo" method="post" hx-post="/fragment/note" hx-swap="outerHTML"
     hx-disabled-elt="find button" _="on submit wait 1s then trigger update on #liveTimelineUpdater">
     <div class="row miniProfile">
@@ -21,6 +26,10 @@
         <?php call_template('user_mention_pill'); ?>
     </div>
     <div class="row">
+        <label class="standalone"><?= __('writeNote.attachments.label') ?></label>
+        <?php call_template('attachment_pill'); ?>
+    </div>
+    <div class="row">
         <label for="noteScope"><?= __('writeNote.scope.label') ?></label>
         <select name="scope" id="noteScope" required autocomplete="off">
             <option value="none"><?= __('note.privacy.scope.none') ?></option>