allow writing alt text on image attachments

7 files changed, 63 insertions, 8 deletions

diff --git a/locale/en_GB.json b/locale/en_GB.json
index c7bccdf..57c0fa1 100644
--- a/locale/en_GB.json
+++ b/locale/en_GB.json
@@ -81,6 +81,8 @@
   "writeNote.mentions.placeholder": "someone@social.example",
   "writeNote.attachments.label": "Attached files",
   "writeNote.attachments.add.action": "Add a file",
+  "writeNote.attachments.remove.action": "Remove",
+  "writeNote.attachments.altText.label": "Image description",
   "writeReply.label": "Write a reply",
   "writeReply.action": "Reply",
   "followRequests.pageTitle": "Pending follow requests",
diff --git a/routes/note_fragment.php b/routes/note_fragment.php
index 02655ec..be1c33f 100644
--- a/routes/note_fragment.php
+++ b/routes/note_fragment.php
@@ -109,9 +109,11 @@ Router::getInstance()->mount('/fragment/note', function (array $args) {
             $note->mentions[] = Actor::find($uid);
         }
         $index = 0;
-        foreach (($_POST['attachments'] ?? []) as $oid) {
-            $obj = StorageObject::findByOid($oid);
-            $note->attachments[] = NoteAttachment::fromStorageObject($obj, $index++, $obj->filename);
+        $attachments = $_POST['attachments'] ?? [];
+        $altTexts = $_POST['altTexts'] ?? [];
+        for ($i = 0; $i < count($attachments); $i++) {
+            $obj = StorageObject::findByOid($attachments[$i]);
+            $note->attachments[] = NoteAttachment::fromStorageObject($obj, $index++, $altTexts[$i] ?: null);
         }
         $note->save();
         $note->publish();
@@ -145,6 +147,12 @@ Router::getInstance()->mount('/fragment/note/attachmentPill', function (array $a
         // store the file and return a pill for it
         // TODO: allow other providers
         $obj = StorageObject::createFromUpload(FilesystemStorage::class, $_FILES['file']);
-        render_template('attachment_pill', ['type' => 'file', 'oid' => $obj->oid, 'name' => $obj->filename]);
+        $type = str_starts_with($obj->mimetype, 'image/') ? 'image' : 'file';
+        render_template('attachment_pill', [
+            'type' => $type,
+            'oid' => $obj->oid,
+            'name' => $obj->filename,
+            'href' => $obj->getUrl()
+        ]);
     }
 });
\ No newline at end of file
diff --git a/static/misc.css b/static/misc.css
index 8013403..d9a491c 100644
--- a/static/misc.css
+++ b/static/misc.css
@@ -23,6 +23,10 @@ button.secondary {
   font-size: inherit;
   font-family: inherit;
   font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   &:disabled {
     opacity: 80%;
     cursor: default;
diff --git a/static/pills.css b/static/pills.css
index af670b8..45f9218 100644
--- a/static/pills.css
+++ b/static/pills.css
@@ -47,3 +47,20 @@
     }
   }
 }
+
+.imageAttachmentPill {
+  grid-auto-flow: row;
+  padding: var(--spacing-single);
+
+  .pillInfo {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-single);
+    max-width: 300px;
+  }
+
+  img {
+    max-width: 300px;
+    border-radius: var(--border-radius);
+  }
+}
diff --git a/static/skeleton.css b/static/skeleton.css
index bc08f7b..2965c2d 100644
--- a/static/skeleton.css
+++ b/static/skeleton.css
@@ -133,8 +133,10 @@ main {
   #leftPane,
   #rightPane {
     position: sticky;
-    top: 72px;
+    top: 56px;
     height: max-content;
+    max-height: calc(100vh - 56px);
+    overflow-y: auto;
   }
   @media (width < 1200px) {
     #leftPane,
diff --git a/templates/attachment_pill.php b/templates/attachment_pill.php
index 76fc590..6fff74d 100644
--- a/templates/attachment_pill.php
+++ b/templates/attachment_pill.php
@@ -16,7 +16,29 @@ $type ??= 'add';
         <span class="pillIcon material-symbols attach-file"></span>
         <span class="pillText"><?= $name ?></span>
         <input type="hidden" name="attachments[]" value="<?= $oid ?>">
+        <input type="hidden" name="altTexts[]" value="<?= $name ?>">
         <span class="pillIcon material-symbols close-small"></span>
     </button>
 
+<?php elseif ($type == 'image'): ?>
+
+    <div class="inlinePill imageAttachmentPill">
+        <div class="row pillInfo">
+            <span class="pillIcon material-symbols attach-file"></span>
+            <span class="pillText"><?= $name ?></span>
+        </div>
+        <img src="<?= $href ?>">
+        <input type="hidden" name="attachments[]" value="<?= $oid ?>">
+        <div class="row">
+            <label for="altText-<?= $oid ?>"><?= __('writeNote.attachments.altText.label') ?></label>
+            <textarea id="altText-<?= $oid ?>" name="altTexts[]"></textarea>
+        </div>
+        <div class="row">
+            <button type="button" class="secondary" _="on click remove closest .inlinePill">
+                <span class="material-symbols close-small"></span>
+                <?= __('writeNote.attachments.remove.action') ?>
+            </button>
+        </div>
+    </div>
+
 <?php endif; ?>
\ No newline at end of file
diff --git a/templates/note.php b/templates/note.php
index f9eef45..b43e63e 100644
--- a/templates/note.php
+++ b/templates/note.php
@@ -79,12 +79,12 @@ if ($user != null) {
                     <?php foreach ($note->attachments as $attachment): ?>
                         <div>
                             <?php if (str_starts_with($attachment->type, 'image/')): ?>
-                                <img src="<?= $attachment->href ?>" alt="<?= $attachment->description ?? '' ?>"
-                                    title="<?= $attachment->description ?? '' ?>">
+                                <img src="<?= $attachment->href ?>" alt="<?= htmlspecialchars($attachment->description ?? '') ?>"
+                                    title="<?= htmlspecialchars($attachment->description ?? '') ?>">
                             <?php else: ?>
                                 <a class="file" href="<?= $attachment->href ?>" target="_blank">
                                     <span class="material-symbols attach-file"></span>
-                                    <span><?= $attachment->description ?? basename($attachment->href) ?></span>
+                                    <span><?= htmlspecialchars($attachment->description ?? basename($attachment->href)) ?></span>
                                 </a>
                             <?php endif; ?>
                         </div>