feat(comments): add like / undo like to comment + add comment page

app/Views/podcast/_partials/comment_actions_from_post.php

+<footer>
+    <form action="<?= route_to('post-attempt-action', interact_as_actor()->username, $comment->id) ?>" method="POST" class="flex items-center gap-x-4">
+        <button type="submit" name="action" value="favourite" class="inline-flex items-center hover:underline group" title="<?= lang(
+            'Comment.like',
+            [
+                'numberOfLikes' => $comment->likes_count,
+            ],
+        ) ?>"><?= icon('heart', 'text-xl mr-1 text-gray-400 group-hover:text-red-600') . $comment->likes_count ?></button>
+        <?= button(
+            lang('Comment.reply'),
+            route_to('post', $podcast->handle, $comment->id),
+            [
+                'size' => 'small',
+            ],
+        ) ?>
+    </form>
+    <?php if($comment->replies_count): ?>
+        <?= anchor(
+            route_to('post', $podcast->handle, $comment->id),
+            icon('caret-down', 'text-xl mr-1') . lang('Comment.view_replies', ['numberOfReplies' => $comment->replies_count]),
+            ['class' => 'inline-flex items-center text-xs hover:underline']
+        ) ?>
+    <?php endif; ?>
+</footer>
\ No newline at end of file

app/Views/podcast/_partials/comment_authenticated.php

+<article class="relative z-10 w-full bg-white shadow-md rounded-2xl">
+    <header class="flex px-6 py-4">
+        <img src="<?= $comment->actor
+            ->avatar_image_url ?>" alt="<?= $comment->actor->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
+        <div class="flex flex-col min-w-0">
+            <a href="<?= $comment->actor
+                ->uri ?>" class="flex items-baseline hover:underline" <?= $comment
+    ->actor->is_local
+    ? ''
+    : 'target="_blank" rel="noopener noreferrer"' ?>>
+                <span class="mr-2 font-semibold truncate"><?= $comment->actor
+                    ->display_name ?></span>
+                <span class="text-sm text-gray-500 truncate">@<?= $comment->actor
+                    ->username .
+                    ($comment->actor->is_local
+                        ? ''
+                        : '@' . $comment->actor->domain) ?></span>
+            </a>
+            <a href="<?= route_to('comment', $podcast->handle, $episode->slug, $comment->id) ?>"
+            class="text-xs text-gray-500">
+                <?= relative_time($comment->created_at) ?>
+            </a>
+        </div>
+    </header>
+    <div class="px-6 mb-4 post-content"><?= $comment->message_html ?></div>
+    <?= $this->include('podcast/_partials/comment_actions') ?>
+</article>

app/Views/podcast/_partials/comment_with_replies.php

+<?= $this->include('podcast/_partials/comment') ?>
+<div class="-mt-2 overflow-hidden border-b border-l border-r comment-replies rounded-b-xl">
+
+<div class="px-6 pt-8 pb-4 bg-gray-50">
+<?= anchor_popup(
+    route_to('comment-remote-action', $podcast->handle, $comment->id, 'reply'),
+    lang('comment.reply_to', ['actorUsername' => $comment->actor->username]),
+    [
+        'class' =>
+            'text-center justify-center font-semibold rounded-full shadow relative z-10 px-4 py-2 w-full bg-rose-600 text-white inline-flex items-center hover:bg-rose-700',
+        'width' => 420,
+        'height' => 620,
+    ],
+) ?>
+</div>
+
+
+<?php foreach ($comment->replies as $reply): ?>
+    <?= view('podcast/_partials/comment', ['comment' => $reply]) ?>
+<?php endforeach; ?>
+
+</div>

app/Views/podcast/_partials/comment_with_replies_authenticated.php

+<?= $this->include('podcast/_partials/comment_authenticated') ?>
+<div class="-mt-2 overflow-hidden border-b border-l border-r post-replies rounded-b-xl">
+<?= form_open(
+    route_to('comment-attempt-action', interact_as_actor()->username, $episode->slug, $comment->id),
+    [
+        'class' => 'bg-gray-50 flex px-6 pt-8 pb-4',
+    ],
+) ?>
+<img src="<?= interact_as_actor()
+    ->avatar_image_url ?>" alt="<?= interact_as_actor()
+    ->display_name ?>" class="w-12 h-12 mr-4 rounded-full ring-gray-50 ring-2" />
+<div class="flex flex-col flex-1">
+<?= form_textarea(
+    [
+        'id' => 'message',
+        'name' => 'message',
+        'class' => 'form-textarea mb-4 w-full',
+        'required' => 'required',
+        'placeholder' => lang('Comment.form.reply_to_placeholder', [
+            'actorUsername' => $comment->actor->username,
+        ]),
+    ],
+    old('message', '', false),
+    [
+        'rows' => 1,
+    ],
+) ?>
+<?= button(
+    lang('Comment.form.submit_reply'),
+    '',
+    ['variant' => 'primary', 'size' => 'small'],
+    [
+        'type' => 'submit',
+        'class' => 'self-end',
+        'name' => 'action',
+        'value' => 'reply',
+    ],
+) ?>
+</div>
+<?= form_close() ?>
+
+<?php foreach ($comment->replies as $reply): ?>
+    <?= view('podcast/_partials/comment_authenticated', [
+        'comment' => $reply,
+    ]) ?>
+<?php endforeach; ?>
+</div>

app/Views/podcast/_partials/post.php

 <article class="relative z-10 w-full bg-white shadow rounded-2xl">
     <header class="flex px-6 py-4">
         <img src="<?= $post->actor
-            ->avatar_image_url ?>" alt="<?= $post->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
+            ->avatar_image_url ?>" alt="<?= $post->actor->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
         <div class="flex flex-col min-w-0">
             <a href="<?= $post->actor
                 ->uri ?>" class="flex items-baseline hover:underline" <?= $post

app/Views/podcast/_partials/post_authenticated.php

 <article class="relative z-10 w-full bg-white shadow-md rounded-2xl">
     <header class="flex px-6 py-4">
         <img src="<?= $post->actor
-            ->avatar_image_url ?>" alt="<?= $post->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
+            ->avatar_image_url ?>" alt="<?= $post->actor->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
         <div class="flex flex-col min-w-0">
             <a href="<?= $post->actor
                 ->uri ?>" class="flex items-baseline hover:underline" <?= $post

app/Views/podcast/comment.php

+<?= $this->extend('podcast/_layout') ?>
+
+<?= $this->section('meta-tags') ?>
+    <title><?= lang('Comment.title', [
+        'actorDisplayName' => $comment->actor->display_name,
+    ]) ?></title>
+    <meta name="description" content="<?= $comment->message ?>"/>
+    <meta property="og:title" content="<?= lang('Comment.title', [
+        'actorDisplayName' => $comment->actor->display_name,
+    ]) ?>"/>
+    <meta property="og:locale" content="<?= service(
+        'request',
+    )->getLocale() ?>" />
+    <meta property="og:site_name" content="<?= $comment->actor->display_name ?>" />
+    <meta property="og:url" content="<?= current_url() ?>" />
+    <meta property="og:image" content="<?= $comment->actor->avatar_image_url ?>" />
+    <meta property="og:description" content="<?= $comment->message ?>" />
+<?= $this->endSection() ?>
+
+<?= $this->section('content') ?>
+<div class="max-w-2xl px-6 mx-auto">
+    <nav class="py-3">
+        <a href="<?= route_to('episode', $podcast->handle, $episode->slug) ?>"
+        class="inline-flex items-center px-4 py-2 text-sm"><?= icon(
+            'arrow-left',
+            'mr-2 text-lg',
+        ) .
+            lang('Comment.back_to_episode', [
+                'actor' => $comment->actor->display_name,
+            ]) ?></a>
+    </nav>
+    <div class="pb-12">
+        <?= $this->include('podcast/_partials/comment_with_replies') ?>
+    </div>
+</div>
+
+<?= $this->endSection()
+?>

app/Views/podcast/comment_authenticated.php

+<?= $this->extend('podcast/_layout_authenticated') ?>
+
+<?= $this->section('meta-tags') ?>
+    <title><?= lang('Comment.title', [
+        'actorDisplayName' => $comment->actor->display_name,
+    ]) ?></title>
+    <meta name="description" content="<?= $comment->message ?>"/>
+    <meta property="og:title" content="<?= lang('Comment.title', [
+        'actorDisplayName' => $comment->actor->display_name,
+    ]) ?>"/>
+    <meta property="og:locale" content="<?= service(
+        'request',
+    )->getLocale() ?>" />
+    <meta property="og:site_name" content="<?= $comment->actor->display_name ?>" />
+    <meta property="og:url" content="<?= current_url() ?>" />
+    <meta property="og:image" content="<?= $comment->actor->avatar_image_url ?>" />
+    <meta property="og:description" content="<?= $comment->message ?>" />
+<?= $this->endSection() ?>
+
+<?= $this->section('content') ?>
+<div class="max-w-2xl px-6 mx-auto">
+    <nav class="py-3">
+        <a href="<?= route_to('episode', $podcast->handle, $episode->slug) ?>"
+        class="inline-flex items-center px-4 py-2 text-sm"><?= icon(
+            'arrow-left',
+            'mr-2 text-lg',
+        ) .
+            lang('Comment.back_to_episode', [
+                'actor' => $comment->actor->display_name,
+            ]) ?></a>
+    </nav>
+    <div class="pb-12">
+        <?= $this->include(
+            'podcast/_partials/comment_with_replies_authenticated',
+        ) ?>
+    </div>
+</div>
+
+<?= $this->endSection()
+?>

app/Views/podcast/episode_authenticated.php

@@ -85,7 +85,7 @@
         <div class="tab-panels">
             <section id="comments" class="space-y-6 tab-panel">
             <?= form_open(route_to('comment-attempt-create', $podcast->id, $episode->id), [
-                    'class' => 'flex p-4 bg-white shadow rounded-xl',
+                    'class' => 'flex p-4',
                 ]) ?>
                 <?= csrf_field() ?>
 
@@ -118,7 +118,6 @@
                     ) ?>
                 </div>
                 <?= form_close() ?>
-                <hr class="my-4 border border-pine-100">
                 <?php foreach ($episode->comments as $comment): ?>
                     <?= view('podcast/_partials/comment', ['comment' => $comment]) ?>
                 <?php endforeach; ?>