Comments management

.gitignore

@@ -1,3 +1,6 @@
 /target
 /node_modules
 .env
+/.idea
+docker-compose.yml
+

src/routes/admin/dashboard.rs

@@ -1,4 +1,7 @@
-use crate::routes::get_users;
+use crate::routes::{
+    COMMENTS_PER_PAGE, POSTS_PER_PAGE, SUBS_PER_PAGE, get_comments_count, get_comments_page,
+    get_posts_count, get_posts_page, get_users,
+};
 use crate::{
     authentication::AuthenticatedUser,
     routes::{AppError, get_max_page, get_subs, get_total_subs},
@@ -42,13 +45,29 @@ pub async fn admin_dashboard(
         .await
         .context("Could not fetch subscribers from database.")
         .map_err(AppError::unexpected_message)?;
-    let count = get_total_subs(&connection_pool)
+    let subs_count = get_total_subs(&connection_pool)
         .await
         .context("Could not fetch total subscribers count from the database.")?;
-    let max_page = get_max_page(count);
+    let max_page = get_max_page(subs_count, SUBS_PER_PAGE);
     let users = get_users(&connection_pool)
         .await
         .context("Could not fetch users")?;
+    let posts = get_posts_page(&connection_pool, 1)
+        .await
+        .context("Could not fetch posts.")?;
+    let posts_current_page = 1;
+    let posts_count = get_posts_count(&connection_pool)
+        .await
+        .context("Could not fetch posts count.")?;
+    let posts_max_page = get_max_page(posts_count, POSTS_PER_PAGE);
+    let comments_current_page = 1;
+    let comments = get_comments_page(&connection_pool, comments_current_page)
+        .await
+        .context("Could not fetch comments.")?;
+    let comments_count = get_comments_count(&connection_pool)
+        .await
+        .context("Could not fetch comments count.")?;
+    let comments_max_page = get_max_page(comments_count, COMMENTS_PER_PAGE);
     let template = DashboardTemplate {
         user,
         idempotency_key_1,
@@ -57,7 +76,16 @@ pub async fn admin_dashboard(
         subscribers,
         current_page,
         max_page,
+        count: subs_count,
         users,
+        posts,
+        posts_current_page,
+        posts_max_page,
+        posts_count,
+        comments,
+        comments_current_page,
+        comments_max_page,
+        comments_count,
     };
     Ok(Html(template.render().unwrap()).into_response())
 }

src/routes/admin/posts.rs

@@ -136,7 +136,7 @@ pub async fn delete_post(
             "We could not find the post in the database."
         )))
     } else {
-        let template = MessageTemplate::success("The subscriber has been deleted.".into());
+        let template = MessageTemplate::success("The post has been deleted.".into());
         Ok(template.render().unwrap().into_response())
     }
 }

src/routes/admin/subscribers.rs

@@ -13,7 +13,7 @@ use axum::{
 use sqlx::PgPool;
 use uuid::Uuid;
 
-const SUBS_PER_PAGE: i64 = 5;
+pub const SUBS_PER_PAGE: i64 = 5;
 
 #[tracing::instrument(name = "Retrieving subscribers from database", skip(connection_pool))]
 pub async fn get_subscribers_page(
@@ -26,7 +26,7 @@ pub async fn get_subscribers_page(
         .await
         .context("Could not fetch total subscribers count from the database.")
         .map_err(AppError::unexpected_message)?;
-    let max_page = get_max_page(count);
+    let max_page = get_max_page(count, SUBS_PER_PAGE);
     let subscribers = get_subs(&connection_pool, page)
         .await
         .context("Could not fetch subscribers data.")
@@ -102,9 +102,9 @@ pub async fn get_total_subs(connection_pool: &PgPool) -> Result<i64, sqlx::Error
     Ok(count)
 }
 
-pub fn get_max_page(count: i64) -> i64 {
-    let mut max_page = count.div_euclid(SUBS_PER_PAGE);
-    if count % SUBS_PER_PAGE > 0 {
+pub fn get_max_page(count: i64, num_per_page: i64) -> i64 {
+    let mut max_page = count.div_euclid(num_per_page);
+    if count % num_per_page > 0 {
         max_page += 1;
     }
     max_page

src/routes/comments.rs

@@ -1,3 +1,5 @@
+use crate::routes::get_max_page;
+use crate::templates::CommentsPageDashboardTemplate;
 use crate::{
     domain::CommentEntry,
     routes::AppError,
@@ -5,6 +7,7 @@ use crate::{
     templates::{CommentsList, HtmlTemplate, MessageTemplate},
 };
 use anyhow::Context;
+use askama::Template;
 use axum::{
     Form,
     extract::{Path, Query, State},
@@ -77,7 +80,7 @@ async fn insert_comment(
     Ok(comment_id)
 }
 
-const COMMENTS_PER_PAGE: i64 = 5;
+pub const COMMENTS_PER_PAGE: i64 = 5;
 
 #[derive(serde::Deserialize)]
 pub struct GetCommentsQueryParams {
@@ -92,13 +95,13 @@ pub async fn get_comments(
         connection_pool, ..
     }): State<AppState>,
 ) -> Result<Response, AppError> {
-    let comments = fetch_comments_page(&connection_pool, post_id, page)
+    let comments = get_comments_page_for_post(&connection_pool, post_id, page)
         .await
         .context("Could not fetch comments.")?;
-    let count = fetch_comments_count(&connection_pool, post_id)
+    let count = get_comments_count_for_post(&connection_pool, post_id)
         .await
         .context("Could not fetch comments count")?;
-    let max_page = get_comments_page_count(count);
+    let max_page = get_max_page(count, COMMENTS_PER_PAGE);
     let template = HtmlTemplate(CommentsList {
         comments,
         current_page: page,
@@ -107,7 +110,50 @@ pub async fn get_comments(
     Ok(template.into_response())
 }
 
-pub async fn fetch_comments_page(
+#[tracing::instrument(name = "Fetching all comments", skip(connection_pool))]
+pub async fn get_all_comments(
+    Query(GetCommentsQueryParams { page }): Query<GetCommentsQueryParams>,
+    State(AppState {
+        connection_pool, ..
+    }): State<AppState>,
+) -> Result<Response, AppError> {
+    let comments = get_comments_page(&connection_pool, page)
+        .await
+        .context("Could not fetch comments.")?;
+    let count = get_comments_count(&connection_pool)
+        .await
+        .context("Could not fetch comments count")?;
+    let comments_max_page = get_max_page(count, COMMENTS_PER_PAGE);
+    let template = HtmlTemplate(CommentsPageDashboardTemplate {
+        comments,
+        comments_current_page: page,
+        comments_max_page,
+    });
+    Ok(template.into_response())
+}
+
+pub async fn delete_comment(
+    State(AppState {
+        connection_pool, ..
+    }): State<AppState>,
+    crate::routes::Path(comment_id): crate::routes::Path<Uuid>,
+) -> Result<Response, AppError> {
+    let res = sqlx::query!("DELETE FROM comments WHERE comment_id = $1", comment_id)
+        .execute(&connection_pool)
+        .await
+        .context("Failed to delete comment from database.")
+        .map_err(AppError::unexpected_message)?;
+    if res.rows_affected() > 1 {
+        Err(AppError::unexpected_message(anyhow::anyhow!(
+            "We could not find the comment in the database."
+        )))
+    } else {
+        let template = MessageTemplate::success("The comment has been deleted.".into());
+        Ok(template.render().unwrap().into_response())
+    }
+}
+
+pub async fn get_comments_page_for_post(
     connection_pool: &PgPool,
     post_id: Uuid,
     page: i64,
@@ -132,7 +178,7 @@ pub async fn fetch_comments_page(
     Ok(comments)
 }
 
-pub async fn fetch_comments_count(
+pub async fn get_comments_count_for_post(
     connection_pool: &PgPool,
     post_id: Uuid,
 ) -> Result<i64, sqlx::Error> {
@@ -143,10 +189,32 @@ pub async fn fetch_comments_count(
     Ok(count)
 }
 
-pub fn get_comments_page_count(count: i64) -> i64 {
-    let mut max_page = count.div_euclid(COMMENTS_PER_PAGE);
-    if count % COMMENTS_PER_PAGE > 0 {
-        max_page += 1;
+pub async fn get_comments_page(
+    connection_pool: &PgPool,
+    page: i64,
+) -> Result<Vec<CommentEntry>, sqlx::Error> {
+    let offset = (page - 1) * COMMENTS_PER_PAGE;
+    let comments = sqlx::query_as!(
+        CommentEntry,
+        "
+        SELECT comment_id, post_id, author, content, published_at
+        FROM comments
+        ORDER BY published_at DESC
+        LIMIT $1
+        OFFSET $2
+        ",
+        COMMENTS_PER_PAGE,
+        offset
+    )
+    .fetch_all(connection_pool)
+    .await?;
+    Ok(comments)
 }
-    max_page
+
+pub async fn get_comments_count(connection_pool: &PgPool) -> Result<i64, sqlx::Error> {
+    let count = sqlx::query_scalar!("SELECT count(*) FROM comments")
+        .fetch_one(connection_pool)
+        .await?
+        .unwrap_or(0);
+    Ok(count)
 }

src/routes/posts.rs

@@ -1,7 +1,9 @@
+use crate::routes::{COMMENTS_PER_PAGE, get_max_page};
+use crate::templates::PostsPageDashboardTemplate;
 use crate::{
     domain::PostEntry,
     routes::{
-        AppError, Path, Query, fetch_comments_count, fetch_comments_page, get_comments_page_count,
+        AppError, Path, Query, get_comments_count_for_post, get_comments_page_for_post,
         not_found_html,
     },
     startup::AppState,
@@ -16,7 +18,7 @@ use axum::{
 use sqlx::PgPool;
 use uuid::Uuid;
 
-const NUM_PER_PAGE: i64 = 3;
+pub const POSTS_PER_PAGE: i64 = 3;
 
 #[tracing::instrument(name = "Fetching most recent posts from database", skip_all)]
 pub async fn list_posts(
@@ -24,12 +26,16 @@ pub async fn list_posts(
         connection_pool, ..
     }): State<AppState>,
 ) -> Result<Response, AppError> {
-    let count = get_posts_table_size(&connection_pool)
+    let count = get_posts_count(&connection_pool)
         .await
         .context("Could not fetch posts table size.")
         .map_err(AppError::unexpected_page)?;
-    let next_page = if count > NUM_PER_PAGE { Some(2) } else { None };
-    let posts = get_posts(&connection_pool, NUM_PER_PAGE, None)
+    let next_page = if count > POSTS_PER_PAGE {
+        Some(2)
+    } else {
+        None
+    };
+    let posts = get_posts(&connection_pool, POSTS_PER_PAGE, None)
         .await
         .context("Could not fetch latest posts")
         .map_err(AppError::unexpected_page)?;
@@ -37,6 +43,29 @@ pub async fn list_posts(
     Ok(Html(template.render().unwrap()).into_response())
 }
 
+#[tracing::instrument(name = "Fetching next posts from database", skip_all)]
+pub async fn get_posts_page_dashboard(
+    State(AppState {
+        connection_pool, ..
+    }): State<AppState>,
+    Query(LoadMoreParams { page }): Query<LoadMoreParams>,
+) -> Result<Response, AppError> {
+    let posts = get_posts_page(&connection_pool, page)
+        .await
+        .context("Could not fetch next posts page.")?;
+    let posts_current_page = page;
+    let count = get_posts_count(&connection_pool)
+        .await
+        .context("Could not fetch number of posts.")?;
+    let posts_max_page = get_max_page(count, POSTS_PER_PAGE);
+    let template = HtmlTemplate(PostsPageDashboardTemplate {
+        posts,
+        posts_current_page,
+        posts_max_page,
+    });
+    Ok(template.into_response())
+}
+
 async fn get_posts(
     connection_pool: &PgPool,
     n: i64,
@@ -59,7 +88,29 @@ async fn get_posts(
     .await
 }
 
-async fn get_posts_table_size(connection_pool: &PgPool) -> Result<i64, sqlx::Error> {
+pub async fn get_posts_page(
+    connection_pool: &PgPool,
+    page: i64,
+) -> Result<Vec<PostEntry>, sqlx::Error> {
+    let offset = (page - 1) * POSTS_PER_PAGE;
+    sqlx::query_as!(
+        PostEntry,
+        r#"
+        SELECT p.post_id, u.username AS author, p.title, p.content, p.published_at
+        FROM posts p
+        LEFT JOIN users u ON p.author_id = u.user_id
+        ORDER BY p.published_at DESC
+        LIMIT $1
+        OFFSET $2
+        "#,
+        POSTS_PER_PAGE,
+        offset
+    )
+    .fetch_all(connection_pool)
+    .await
+}
+
+pub async fn get_posts_count(connection_pool: &PgPool) -> Result<i64, sqlx::Error> {
     sqlx::query!("SELECT count(*) FROM posts")
         .fetch_one(connection_pool)
         .await
@@ -93,11 +144,11 @@ pub async fn see_post(
             .to_html()
             .context("Could not render markdown with extension.")?;
         let current_page = 1;
-        let comments_count = fetch_comments_count(&connection_pool, post_id)
+        let comments_count = get_comments_count_for_post(&connection_pool, post_id)
             .await
             .context("Could not fetch comment count")?;
-        let max_page = get_comments_page_count(comments_count);
-        let comments = fetch_comments_page(&connection_pool, post_id, 1)
+        let max_page = get_max_page(comments_count, COMMENTS_PER_PAGE);
+        let comments = get_comments_page_for_post(&connection_pool, post_id, 1)
             .await
             .context("Failed to fetch latest comments")?;
         let template = HtmlTemplate(PostTemplate {
@@ -156,15 +207,17 @@ pub async fn load_more(
     }): State<AppState>,
     Query(LoadMoreParams { page }): Query<LoadMoreParams>,
 ) -> Result<Response, AppError> {
-    let offset = (page - 1) * NUM_PER_PAGE;
-    let posts = get_posts(&connection_pool, NUM_PER_PAGE, Some(offset))
+    let posts = get_posts_page(&connection_pool, page)
         .await
         .context("Could not fetch posts from database.")?;
-    let count = posts.len();
+    let count = get_posts_count(&connection_pool)
+        .await
+        .context("Could not fetch posts count.")?;
+    let max_page = get_max_page(count, POSTS_PER_PAGE);
     Ok(Html(
         PostListTemplate {
             posts,
-            next_page: if count as i64 == NUM_PER_PAGE {
+            next_page: if page < max_page {
                 Some(page + 1)
             } else {
                 None

src/startup.rs

@@ -87,9 +87,12 @@ pub fn app(
     let admin_routes = Router::new()
         .route("/subscribers", get(get_subscribers_page))
         .route("/subscribers/{subscriber_id}", delete(delete_subscriber))
+        .route("/posts", get(get_posts_page_dashboard))
         .route("/posts/{post_id}", delete(delete_post))
         .route("/users", post(create_user))
         .route("/users/{user_id}", delete(delete_user))
+        .route("/comments", get(get_all_comments))
+        .route("/comments/{comment_id}", delete(delete_comment))
         .layer(middleware::from_fn(require_admin));
     let auth_routes = Router::new()
         .route("/dashboard", get(admin_dashboard))

src/templates.rs

@@ -64,7 +64,32 @@ pub struct DashboardTemplate {
     pub subscribers: Vec<SubscriberEntry>,
     pub current_page: i64,
     pub max_page: i64,
+    pub count: i64,
     pub users: Vec<UserEntry>,
+    pub posts: Vec<PostEntry>,
+    pub posts_current_page: i64,
+    pub posts_max_page: i64,
+    pub posts_count: i64,
+    pub comments: Vec<CommentEntry>,
+    pub comments_current_page: i64,
+    pub comments_max_page: i64,
+    pub comments_count: i64,
+}
+
+#[derive(Template)]
+#[template(path = "dashboard/posts/list.html", block = "posts")]
+pub struct PostsPageDashboardTemplate {
+    pub posts: Vec<PostEntry>,
+    pub posts_current_page: i64,
+    pub posts_max_page: i64,
+}
+
+#[derive(Template)]
+#[template(path = "dashboard/comments/list.html", block = "comments")]
+pub struct CommentsPageDashboardTemplate {
+    pub comments: Vec<CommentEntry>,
+    pub comments_current_page: i64,
+    pub comments_max_page: i64,
 }
 
 #[derive(Template)]

templates/dashboard/comments/card.html

@@ -0,0 +1,47 @@
+<div id="comment-{{ comment.comment_id }}"
+     class="block py-4 hover:bg-gray-50 px-6 transition-colors group">
+    <div class="flex items-start justify-between">
+        <div class="flex-1 min-w-0">
+            <div class="flex items-center space-x-2 mb-2">
+                <span class="text-sm font-medium text-gray-900">
+                    {% if let Some(name) = comment.author %}
+                        {{ name }}
+                    {% else %}
+                        Anonymous
+                    {% endif %}
+                </span>
+                <span class="text-gray-400">•</span>
+                <span class="text-xs text-gray-500">on</span>
+                <a href="/posts/{{ comment.post_id }}" class="text-sm text-blue-600 hover:underline truncate">
+                    #{{ comment.post_id.to_string()[..8] }}
+                </a>
+            </div>
+            <p class="text-sm text-gray-700 mb-2 line-clamp-2">{{ comment.content }}</p>
+            <div class="flex items-center text-sm text-gray-500">
+                <svg class="w-4 h-4 mr-1.5"
+                     fill="none"
+                     viewBox="0 0 24 24"
+                     stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                </svg>
+                <time datetime="{{ comment.published_at }}">
+                    {{ comment.formatted_date() }}
+                </time>
+            </div>
+        </div>
+        <button hx-delete="/admin/comments/{{ comment.comment_id }}"
+                hx-target="#comment-{{ comment.comment_id }}"
+                hx-swap="outerHTML"
+                hx-confirm="Are you sure you want to delete this comment?"
+                class="inline-flex items-center p-2 text-sm font-medium text-red-500 bg-red-50 border-2 border-dashed border-red-300 rounded-md hover:bg-red-100 hover:border-red-400 hover:text-red-600 transition-all duration-200 flex-shrink-0 ml-4">
+            <svg class="w-4 h-4 group-hover:scale-110 transition-transform"
+                 fill="none"
+                 viewBox="0 0 24 24"
+                 stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+            </svg>
+        </button>
+    </div>
+</div>

templates/dashboard/comments/list.html

@@ -0,0 +1,59 @@
+<div class="bg-white rounded-lg shadow-md border border-gray-200 mb-8">
+    <div class="p-6 border-b border-gray-200">
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+            <div>
+                <h2 class="text-xl font-semibold text-gray-900 flex items-center">
+                    <svg class="w-5 h-5 text-orange-600 mr-2"
+                         fill="none"
+                         viewBox="0 0 24 24"
+                         stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
+                    </svg>
+                    <span>Comments management ({{ comments_count }})</span>
+                </h2>
+                <p class="text-sm text-gray-600 mt-1">View and moderate all comments.</p>
+            </div>
+        </div>
+    </div>
+    <div id="comments-list" class="space-y-6">
+        {% block comments %}
+        {% if comments.is_empty() %}
+        <div class="p-8 text-center">
+            <div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
+                <svg class="w-8 h-8 text-gray-500"
+                     fill="none"
+                     viewBox="0 0 24 24"
+                     stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
+                </svg>
+            </div>
+            <h3 class="text-lg font-medium text-gray-900 mb-2">No data to display</h3>
+            <p class="text-gray-600">The request did not return any data.</p>
+        </div>
+        {% else %}
+        <div class="divide-y divide-gray-200">
+            {% for comment in comments %}
+            {% include "dashboard/comments/card.html" %}
+            {% endfor %}
+        </div>
+        {% endif %}
+        <div class="flex items-center justify-center space-x-2 mb-6">
+            <button hx-get="/admin/comments?page={{ comments_current_page - 1 }}"
+                    hx-target="#comments-list"
+                    hx-swap="innerHTML"
+                    hx-trigger="click"
+                    class="px-3 py-1 text-sm font-medium text-gray-500 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 {% if comments_current_page <= 1 %}opacity-50 cursor-not-allowed{% endif %}"
+                    {% if comments_current_page <= 1 %}disabled{% endif %}>&lt;</button>
+            <span class="px-3 py-1 text-sm font-medium text-gray-700 bg-gray-100 rounded-md">Page: {{ comments_current_page }}</span>
+            <button hx-get="/admin/comments?page={{ comments_current_page + 1 }}"
+                    hx-target="#comments-list"
+                    hx-swap="innerHTML"
+                    hx-trigger="click"
+                    class="px-3 py-1 text-sm font-medium text-gray-500 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 {% if comments_current_page >= comments_max_page %}opacity-50 cursor-not-allowed{% endif %}"
+                    {% if comments_current_page >= comments_max_page %}disabled{% endif %}>&gt;</button>
+        </div>
+        {% endblock %}
+    </div>
+</div>

templates/dashboard/dashboard.html

@@ -33,6 +33,8 @@
             {% include "users/list.html" %}
             {% include "users/form.html" %}
         </div>
+        {% include "posts/list.html" %}
+        {% include "comments/list.html" %}
     </div>
     {% endif %}
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

templates/dashboard/posts/card.html

@@ -0,0 +1,51 @@
+<div id="post-{{ post.post_id }}"
+     class="block py-4 hover:bg-gray-50 px-6 transition-colors group">
+    <div class="flex items-start justify-between">
+        <div class="flex-1 min-w-0">
+            <a href="/posts/{{ post.post_id }}" class="block mb-1">
+                <h3 class="text-base font-medium text-gray-900 group-hover:text-blue-600 transition-colors">
+                    {{ post.title }}
+                </h3>
+            </a>
+            <div class="flex items-center text-sm text-gray-500 space-x-4">
+                <div class="flex items-center">
+                    <svg class="w-4 h-4 mr-1.5"
+                         fill="none"
+                         viewBox="0 0 24 24"
+                         stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+                    </svg>
+                    <a href="/users/{{ post.author }}" class="hover:text-blue-600 hover:underline">
+                        {{ post.author }}
+                    </a>
+                </div>
+                <div class="flex items-center">
+                    <svg class="w-4 h-4 mr-1.5"
+                         fill="none"
+                         viewBox="0 0 24 24"
+                         stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                    </svg>
+                    <time datetime="{{ post.published_at }}">
+                        {{ post.formatted_date() }}
+                    </time>
+                </div>
+            </div>
+        </div>
+        <button hx-delete="/admin/posts/{{ post.post_id }}"
+                hx-target="#post-{{ post.post_id }}"
+                hx-swap="outerHTML"
+                hx-confirm="Are you sure you want to delete this post?"
+                class="inline-flex items-center p-2 text-sm font-medium text-red-500 bg-red-50 border-2 border-dashed border-red-300 rounded-md hover:bg-red-100 hover:border-red-400 hover:text-red-600 transition-all duration-200 flex-shrink-0 ml-4">
+            <svg class="w-4 h-4 group-hover:scale-110 transition-transform"
+                 fill="none"
+                 viewBox="0 0 24 24"
+                 stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+            </svg>
+        </button>
+    </div>
+</div>

templates/dashboard/posts/list.html

@@ -0,0 +1,59 @@
+<div class="bg-white rounded-lg shadow-md border border-gray-200 mb-8">
+    <div class="p-6 border-b border-gray-200">
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+            <div>
+                <h2 class="text-xl font-semibold text-gray-900 flex items-center">
+                    <svg class="w-5 h-5 text-indigo-600 mr-2"
+                         fill="none"
+                         viewBox="0 0 24 24"
+                         stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                    </svg>
+                    <span>Posts management ({{ posts_count }})</span>
+                </h2>
+                <p class="text-sm text-gray-600 mt-1">View and manage all published posts.</p>
+            </div>
+        </div>
+    </div>
+    <div id="posts-list" class="space-y-6">
+        {% block posts %}
+        {% if posts.is_empty() %}
+        <div class="p-8 text-center">
+            <div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
+                <svg class="w-8 h-8 text-gray-500"
+                     fill="none"
+                     viewBox="0 0 24 24"
+                     stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                </svg>
+            </div>
+            <h3 class="text-lg font-medium text-gray-900 mb-2">No data to display</h3>
+            <p class="text-gray-600">The request did not return any data.</p>
+        </div>
+        {% else %}
+        <div class="divide-y divide-gray-200">
+            {% for post in posts %}
+            {% include "dashboard/posts/card.html" %}
+            {% endfor %}
+        </div>
+        {% endif %}
+        <div class="flex items-center justify-center space-x-2 mb-6">
+            <button hx-get="/admin/posts?page={{ posts_current_page - 1 }}"
+                    hx-target="#posts-list"
+                    hx-swap="innerHTML"
+                    hx-trigger="click"
+                    class="px-3 py-1 text-sm font-medium text-gray-500 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 {% if posts_current_page <= 1 %}opacity-50 cursor-not-allowed{% endif %}"
+                    {% if posts_current_page <= 1 %}disabled{% endif %}>&lt;</button>
+            <span class="px-3 py-1 text-sm font-medium text-gray-700 bg-gray-100 rounded-md">Page: {{ posts_current_page }}</span>
+            <button hx-get="/admin/posts?page={{ posts_current_page + 1 }}"
+                    hx-target="#posts-list"
+                    hx-swap="innerHTML"
+                    hx-trigger="click"
+                    class="px-3 py-1 text-sm font-medium text-gray-500 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 {% if posts_current_page >= posts_max_page %}opacity-50 cursor-not-allowed{% endif %}"
+                    {% if posts_current_page >= posts_max_page %}disabled{% endif %}>&gt;</button>
+        </div>
+        {% endblock %}
+    </div>
+</div>

templates/dashboard/subscribers/list.html

@@ -13,16 +13,16 @@
                         <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                         <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                     </svg>
-                    Subscribers management
+                    Subscribers management ({{ count }})
                 </h2>
                 <p class="text-sm text-gray-600 mt-1">View and manage your subscribers.</p>
             </div>
         </div>
     </div>
-    <div id="subscribers-list" class="py-6 space-y-6">
+    <div id="subscribers-list" class="space-y-6">
         {% block subs %}
         {% if subscribers.is_empty() %}
-        <div class="bg-gray-50 rounded-lg p-8 border-2 border-dashed border-gray-300 text-center">
+        <div class="g p-8 text-center">
             <div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
                 <svg class="w-8 h-8 text-gray-500"
                      fill="none"
@@ -42,7 +42,7 @@
             {% endfor %}
         </div>
         {% endif %}
-        <div class="flex items-center justify-center space-x-2">
+        <div class="flex items-center justify-center space-x-2 mb-6">
             <button hx-get="/admin/subscribers?page={{ current_page - 1 }}"
                     hx-target="#subscribers-list"
                     hx-swap="innerHTML"

templates/dashboard/users/card.html

@@ -4,7 +4,7 @@
         <div class="flex-1 min-w-0">
             <div class="flex items-center space-x-2 mb-1">
                 <a href="/users/{{ user.username }}"
-                   class="font-medium text-gray-900 group-hover:text-blue-600 transition-colors truncate">
+                   class="font-medium text-gray-900 group-hover:text-blue-600 hover:underline transition-colors truncate">
                     {{ user.username }}
                 </a>
                 {% if user.role.to_string() == "admin" %}

templates/dashboard/users/list.html

@@ -16,9 +16,9 @@
             </div>
         </div>
     </div>
-    <div id="users-list" class="py-6">
+    <div id="users-list">
         {% if users.is_empty() %}
-        <div class="bg-gray-50 rounded-lg p-8 border-2 border-dashed border-gray-300 text-center">
+        <div class="py-6 p-8 text-center">
             <div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
                 <svg class="w-8 h-8 text-gray-500"
                      fill="none"

templates/user/activity.html

@@ -1,29 +1,32 @@
-<div class="bg-white rounded-lg shadow-md border border-gray-200 p-8">
-    <h2 class="text-xl font-semibold text-gray-900 mb-4">Activity</h2>
+<div class="bg-white rounded-lg shadow-md border border-gray-200">
+    <h2 class="text-xl font-semibold text-gray-900 pb-4 pt-8 px-8">Activity</h2>
     {% if posts.is_empty() %}
-        <div class="text-center py-8 text-gray-500">
+    <div class="text-center text-gray-500 p-8">
         <svg class="w-12 h-12 mx-auto mb-3 text-gray-400"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
         </svg>
         <p>No posts yet</p>
     </div>
     {% else %}
-        <div class="divide-y divide-gray-200">
+    <div class="divide-y divide-gray-200 pb-8">
         {% for post in posts %}
         <a href="/posts/{{ post.post_id }}"
-                   class="block py-4 hover:bg-gray-50 -mx-8 px-8 transition-colors group">
+           class="block py-4 hover:bg-gray-50 px-8 transition-colors group">
             <div class="flex items-start justify-between">
                 <div class="flex-1 min-w-0">
-                            <h3 class="text-base font-medium text-gray-900 group-hover:text-blue-600 transition-colors mb-1">{{ post.title }}</h3>
+                    <h3 class="text-base font-medium text-gray-900 group-hover:text-blue-600 transition-colors mb-1">{{
+                        post.title }}</h3>
                     <div class="flex items-center text-sm text-gray-500">
                         <svg class="w-4 h-4 mr-1.5"
                              fill="none"
                              viewBox="0 0 24 24"
                              stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                         </svg>
                         <time datetime="{{ post.published_at }}">
                             {{ post.formatted_date() }}