implement basic interaction controls

4 files changed, 50 insertions, 15 deletions

diff --git a/templates/note/interaction_button.php b/templates/note/interaction_button.php
new file mode 100644
index 0000000..bfcbd85
--- /dev/null
+++ b/templates/note/interaction_button.php
@@ -0,0 +1,23 @@
+<?php
+$active = $active ?? false;
+$forbidden = $disabled ? '.forbidden' : '';
+$tooltip = match ($action) {
+    'like' => __("note.action.like$forbidden"),
+    'dislike' => __("note.action.dislike$forbidden"),
+    'reshare' => __("note.action.reshare$forbidden")
+};
+$icon = match ($action) {
+    'like' => $active ? 'favorite' : 'favorite-outline',
+    'dislike' => $active ? 'heart-broken' : 'heart-broken-outline',
+    'reshare' => $active ? 'repeat-on' : 'repeat'
+};
+$id = "interactButton-$action-$note->id";
+?>
+<div class="interactButtonContainer <?= $action . ($active ? ' active' : '') ?>">
+    <button title="<?= $tooltip ?>" class="material-symbols <?= $icon ?>"
+        hx-post="<?= "/fragment/note/$note->id/$action" ?>" hx-swap="outerHTML"
+        hx-target="closest .interactButtonContainer" hx-disabled-elt="this" id="<?= $id ?>"
+        _="on htmx:afterOnLoad trigger update on #liveTimelineUpdater" <?= ($disabled ?? false) ? 'disabled' : '' ?>>
+    </button>
+    <label for="<?= $id ?>" class="interactionCount"><?= $count ?? '' ?></label>
+</div>
\ No newline at end of file
diff --git a/templates/note/note.php b/templates/note/note.php
index 94f4895..ddc2bac 100644
--- a/templates/note/note.php
+++ b/templates/note/note.php
@@ -11,7 +11,6 @@ $MAX_PREVIEW_CARDS = 1;
 $user = UserAccount::findByCurrentSession();
 $prefs = $user ? new UserSettings($user) : null;
 $interKinds = [];
-$actionsDisabled = $user == null;
 if ($user != null) {
     $interactions = $note->getInteractionsWithAuthor($user->actor);
     $interKinds = array_map(fn($inter) => $inter->kind, $interactions);
@@ -98,18 +97,18 @@ if ($user != null) {
         <div class="buttons">
             <?php foreach (['like', 'dislike', 'reshare'] as $action) {
                 $kind = InteractionKind::from($action);
-                call_template('interaction_button', [
+                call_template('note/interaction_button', [
                     'action' => $action,
                     'note' => $note,
                     'active' => in_array($kind, $interKinds),
                     'count' => $note->countInteractionsOfKind($kind),
-                    'disabled' => $actionsDisabled
+                    'disabled' => !$note->isInteractibleBy($action, $user)
                 ]);
             }
             call_template('note/reply_button', [
                 'note' => $note,
                 'count' => $note->countReplies(),
-                'disabled' => $actionsDisabled
+                'disabled' => !$note->isInteractibleBy('reply', $user)
             ]);
             ?>
             <div class="right">
diff --git a/templates/note/reply_button.php b/templates/note/reply_button.php
index de4cb1b..79267b6 100644
--- a/templates/note/reply_button.php
+++ b/templates/note/reply_button.php
@@ -7,10 +7,11 @@ $icon = $note->inReplyTo == null ? 'reply' : 'reply-all';
 $id = "interactButton-reply-$note->id";
 ?>
 <div class="interactButtonContainer reply">
-    <button title="<?= __('note.action.reply') ?>" class="material-symbols <?= $icon ?>" id="<?= $id ?>" <?= ($disabled ?? false) ? 'disabled' : '' ?> _="
+  <button title="<?= __('note.action.reply' . ($disabled ? '.forbidden' : '')) ?>" class="material-symbols <?= $icon ?>"
+    id="<?= $id ?>" <?= ($disabled ?? false) ? 'disabled' : '' ?> _="
         on click
           send toggle to [me, next .noteReplyForm]
           tell next <textarea/> js(you) you.focus() end
         on toggle toggle .active on closest <div/>"></button>
-    <label for="<?= $id ?>"><?= $count ?? '' ?></label>
+  <label for="<?= $id ?>"><?= $count ?? '' ?></label>
 </div>
\ No newline at end of file
diff --git a/templates/note/write_form.php b/templates/note/write_form.php
index 647dcac..abd916c 100644
--- a/templates/note/write_form.php
+++ b/templates/note/write_form.php
@@ -27,6 +27,27 @@
             _="on keydown[ctrlKey and key is 'Enter'] set b to #writeNoteSubmitButton then b.click()"></textarea>
         <?php call_template('formatting_hint'); ?>
     </div>
+
+    <div class="row">
+        <fieldset class="column noteScopeButtons">
+            <legend><?= __('writeNote.scope.label') ?></legend>
+            <?php foreach (['none' => 'lock', 'mutuals' => 'group', 'followers' => 'groups', 'public' => 'public'] as $scope => $icon): ?>
+                <input type="radio" name="scope" value="<?= $scope ?>" id="noteScope-<?= $scope ?>" <?= $scope == 'public' ? 'checked' : '' ?> autocomplete="off">
+                <label for="noteScope-<?= $scope ?>" class="material-symbols <?= $icon ?>"
+                    title="<?= __("note.privacy.scope.$scope") ?>"></label>
+            <?php endforeach; ?>
+        </fieldset>
+        <fieldset class="column noteInteractorButtons">
+            <legend><?= __('writeNote.interactors.label') ?></legend>
+            <?php foreach (['none' => 'person-off', 'mutuals' => 'group', 'followers' => 'groups', 'all' => 'select-all'] as $group => $icon): ?>
+                <input type="radio" name="interactors" value="<?= $group ?>" id="noteInteractors-<?= $group ?>"
+                    <?= $group == 'all' ? 'checked' : '' ?> autocomplete="off">
+                <label for="noteInteractors-<?= $group ?>" class="material-symbols <?= $icon ?>"
+                    title="<?= __("note.privacy.interactors.$group") ?>"></label>
+            <?php endforeach; ?>
+        </fieldset>
+    </div>
+
     <details>
         <summary><?= __('writeNote.moreOptions') ?></summary>
         <div class="row">
@@ -37,15 +58,6 @@
             <label class="standalone"><?= __('writeNote.attachments.label') ?></label>
             <?php call_template('note/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>
-                <option value="mutuals"><?= __('note.privacy.scope.mutuals') ?></option>
-                <option value="followers"><?= __('note.privacy.scope.followers') ?></option>
-                <option value="public" selected><?= __('note.privacy.scope.public') ?></option>
-            </select>
-        </div>
     </details>
     <div class="row">
         <button class="primary" id="writeNoteSubmitButton"><?= __('writeNote.action') ?></button>