implement note editing

and improve display of edited note timestamps

3 files changed, 74 insertions, 31 deletions

diff --git a/templates/note/editable.php b/templates/note/editable.php
new file mode 100644
index 0000000..7a864a9
--- /dev/null
+++ b/templates/note/editable.php
@@ -0,0 +1,30 @@
+<article class="note">
+    <a href="/@/<?= $note->author->getFullHandle() ?>">
+        <?php call_template('actor/avatar', ['actor' => $note->author]); ?>
+    </a>
+
+    <div>
+
+        <?php call_template('note/info_line', ['note' => $note]); ?>
+
+        <form hx-post="/fragment/note/<?= $note->id ?>/edit" hx-target="closest .note" hx-swap="outerHTML"
+            class="noteEditForm">
+            <div class="row summaryAndContent">
+                <label for="noteContent-<?= $note->id ?>"><?= __('note.editForm.label') ?></label>
+                <input name="summary" type="text" placeholder="<?= __('writeNote.summary.label') ?>"
+                    value="<?= htmlspecialchars($note->summary) ?>">
+                <textarea id="noteContent-<?= $note->id ?>" name="content" required
+                    placeholder="<?= __('writeNote.placeholder') ?>"><?= htmlspecialchars(
+                          $note->formattedContent['text/markdown'] ?? $note->plainContent
+                      ) ?></textarea>
+                <?php call_template('formatting_hint'); ?>
+            </div>
+            <div class="row actionButtons">
+                <button type="button" class="secondary"
+                    hx-get="/fragment/note/<?= $note->id ?>"><?= __('form.discardChanges') ?></button>
+                <button type="submit" class="primary"><?= __('form.saveChanges') ?></button>
+            </div>
+        </form>
+
+    </div>
+</article>
\ No newline at end of file
diff --git a/templates/note/info_line.php b/templates/note/info_line.php
new file mode 100644
index 0000000..acc85d7
--- /dev/null
+++ b/templates/note/info_line.php
@@ -0,0 +1,28 @@
+<?php
+
+use Digitigrade\Model\NotePrivacyScope;
+
+?>
+<div class="infoLine">
+    <a class="authorName"
+        href="/@/<?= htmlspecialchars($note->author->getFullHandle()) ?>"><?= htmlspecialchars($note->author->displayName) ?></a>
+    <span class="authorPronouns">
+        <?php if (isset($note->author->pronouns) && trim($note->author->pronouns) != '') {
+            echo htmlspecialchars($note->author->pronouns);
+        } ?>
+    </span>
+    <a class="timestamp" href="<?= htmlspecialchars($note->getLocalUiHref()) ?>">
+        <?= format_datetime($note->created) ?>
+    </a>
+    <span class="privacyScope inlineIcon material-symbols <?= match ($note->privacy->scope) {
+        NotePrivacyScope::NONE => 'lock',
+        NotePrivacyScope::MUTUALS => 'group',
+        NotePrivacyScope::FOLLOWERS => 'groups',
+        NotePrivacyScope::PUBLIC => 'public'
+    } ?>" title="<?= match ($note->privacy->scope) {
+         NotePrivacyScope::NONE => __('note.privacy.scope.none'),
+         NotePrivacyScope::MUTUALS => __('note.privacy.scope.mutuals'),
+         NotePrivacyScope::FOLLOWERS => __('note.privacy.scope.followers'),
+         NotePrivacyScope::PUBLIC => __('note.privacy.scope.public')
+     } ?>"></span>
+</div>
\ No newline at end of file
diff --git a/templates/note/note.php b/templates/note/note.php
index 7cef342..0d48272 100644
--- a/templates/note/note.php
+++ b/templates/note/note.php
@@ -3,7 +3,6 @@
 
 use Digitigrade\Model\Actor;
 use Digitigrade\Model\InteractionKind;
-use Digitigrade\Model\NotePrivacyScope;
 use Digitigrade\Model\UserAccount;
 use Digitigrade\UserSettings;
 
@@ -17,7 +16,6 @@ if ($user != null) {
     $interactions = $note->getInteractionsWithAuthor($user->actor);
     $interKinds = array_map(fn($inter) => $inter->kind, $interactions);
 }
-$pathToSelf = $note->getLocalUiHref();
 ?>
 <article class="note <?= ($selected ?? false) ? 'selected' : '' ?>">
 
@@ -27,40 +25,14 @@ $pathToSelf = $note->getLocalUiHref();
 
     <div>
 
-        <div class="infoLine">
-            <a class="authorName"
-                href="/@/<?= htmlspecialchars($note->author->getFullHandle()) ?>"><?= htmlspecialchars($note->author->displayName) ?></a>
-            <span class="authorPronouns">
-                <?php if (isset($note->author->pronouns) && trim($note->author->pronouns) != '') {
-                    echo htmlspecialchars($note->author->pronouns);
-                } ?>
-            </span>
-            <a class="timestamp" href="<?= htmlspecialchars($pathToSelf) ?>">
-                <?= format_datetime($note->created)
-                    . (isset($note->modified) && $note->modified != $note->created
-                        ? ' (' . format_datetime($note->modified) . ')'
-                        : ''
-                    ) ?>
-            </a>
-            <span class="privacyScope inlineIcon material-symbols <?= match ($note->privacy->scope) {
-                NotePrivacyScope::NONE => 'lock',
-                NotePrivacyScope::MUTUALS => 'group',
-                NotePrivacyScope::FOLLOWERS => 'groups',
-                NotePrivacyScope::PUBLIC => 'public'
-            } ?>" title="<?= match ($note->privacy->scope) {
-                 NotePrivacyScope::NONE => __('note.privacy.scope.none'),
-                 NotePrivacyScope::MUTUALS => __('note.privacy.scope.mutuals'),
-                 NotePrivacyScope::FOLLOWERS => __('note.privacy.scope.followers'),
-                 NotePrivacyScope::PUBLIC => __('note.privacy.scope.public')
-             } ?>"></span>
-        </div>
+        <?php call_template('note/info_line', ['note' => $note]); ?>
 
         <?php if (isset($note->inReplyTo)): ?>
             <div class="replyInfo">
                 <span class="material-symbols reply inlineIcon"></span>
                 <a
                     href="/@/<?= htmlspecialchars($note->inReplyTo->author->getFullHandle()) ?>/note/<?= $note->inReplyTo->id ?>">
-                    <?= sprintf(__('note.info.replyTo'),
+                    <?= __f('note.info.replyTo',
                         '<b>' . htmlspecialchars($note->inReplyTo->author->displayName)) . '</b>' ?>
                 </a>
             </div>
@@ -68,7 +40,7 @@ $pathToSelf = $note->getLocalUiHref();
             <div class="replyInfo">
                 <span class="material-symbols alternate-email inlineIcon"></span>
                 <span>
-                    <?= sprintf(__('note.info.mentions'), implode(', ', array_map(
+                    <?= __f('note.info.mentions', implode(', ', array_map(
                         fn(Actor $m) => '<b><a href="/@/' . htmlspecialchars($m->getFullHandle()) . '">' . htmlspecialchars($m->displayName) . '</a></b>',
                         $note->mentions
                     ))) ?>
@@ -76,6 +48,13 @@ $pathToSelf = $note->getLocalUiHref();
             </div>
         <?php endif; ?>
 
+        <?php if (isset($note->modified) && $note->modified != $note->created): ?>
+            <div class="modifiedInfo">
+                <span class="material-symbols edit-outline inlineIcon"></span>
+                <span><?= __f('note.info.modified', format_datetime($note->modified)) ?></span>
+            </div>
+        <?php endif; ?>
+
         <?php if (isset($note->summary)): ?>
             <details>
                 <summary><?= htmlspecialchars($note->summary) ?></summary>
@@ -151,6 +130,12 @@ $pathToSelf = $note->getLocalUiHref();
                     </li>
                     <?php if ($note->author->isLocal && ($note->author == $user?->actor || $user?->isAdmin)): ?>
                         <li>
+                            <button hx-get="/fragment/note/<?= $note->id ?>/edit" hx-target="closest .note" hx-swap="outerHTML">
+                                <span class="material-symbols edit-outline"></span>
+                                <span><?= __('note.action.edit') ?></span>
+                            </button>
+                        </li>
+                        <li>
                             <button hx-delete="/fragment/note/<?= $note->id ?>"
                                 hx-confirm="<?= __('note.action.delete.confirmation') ?>" hx-target="closest .note"
                                 hx-swap="delete">