hook up the interaction buttons to a dummy thing

4 files changed, 38 insertions, 3 deletions

diff --git a/routes/note_fragment.php b/routes/note_fragment.php
new file mode 100644
index 0000000..ef2e7b0
--- /dev/null
+++ b/routes/note_fragment.php
@@ -0,0 +1,10 @@
+<?php
+
+use Digitigrade\Model\Note;
+use Digitigrade\Router;
+
+Router::getInstance()->mount('/fragment/note/:id/:action', function (array $args) {
+    $note = Note::find($args['id']);
+    // TODO: actually like/dislike/reshare the note as the currently signed in user
+    render_template('interaction_button', ['action' => $args['action'], 'active' => true, 'note' => $note]);
+});
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index c94a011..04218d7 100644
--- a/static/style.css
+++ b/static/style.css
@@ -114,6 +114,16 @@ article.note {
       width: 24px;
       font-size: 24px;
       color: #3b005e44;
+
+      &.like.active {
+        color: #8c22d8;
+      }
+      &.dislike.active {
+        color: #c02e2e;
+      }
+      &.reshare.active {
+        color: #21a821;
+      }
     }
   }
 }
diff --git a/templates/interaction_button.php b/templates/interaction_button.php
new file mode 100644
index 0000000..a1fb3b0
--- /dev/null
+++ b/templates/interaction_button.php
@@ -0,0 +1,15 @@
+<?php
+$active = $active ?? false;
+$tooltip = match ($action) {
+    'like' => 'Like',
+    'dislike' => 'Dislike',
+    'reshare' => 'Reshare'
+};
+$icon = match ($action) {
+    'like' => 'favorite',
+    'dislike' => 'heart_broken',
+    'reshare' => $active ? 'repeat_on' : 'repeat'
+};
+?>
+<button title="<?= $tooltip ?>" class="icon material-symbols-outlined <?= $action . ($active ? ' active' : '') ?>"
+    hx-post="<?= "/fragment/note/$note->id/$action" ?>" hx-swap="outerHTML"><?= $icon ?></button>
\ No newline at end of file
diff --git a/templates/note.php b/templates/note.php
index 31795e4..6e718f5 100644
--- a/templates/note.php
+++ b/templates/note.php
@@ -20,9 +20,9 @@
             <?= $note->getFormattedContent('text/html') ?? htmlspecialchars($note->plainContent) ?>
         </div>
         <div class="buttons">
-            <button title="Like" class="icon material-symbols-outlined">favorite</button>
-            <button title="Dislike" class="icon material-symbols-outlined">heart_broken</button>
-            <button title="Reshare" class="icon material-symbols-outlined">repeat</button>
+            <?php foreach (['like', 'dislike', 'reshare'] as $action) {
+                render_template('interaction_button', ['action' => $action, 'note' => $note]);
+            } ?>
         </div>
     </div>
 </article>
\ No newline at end of file