User comments
All checks were successful
Rust / Test (push) Successful in 6m17s
Rust / Rustfmt (push) Successful in 21s
Rust / Clippy (push) Successful in 1m37s
Rust / Code coverage (push) Successful in 5m5s

This commit is contained in:
Alphonse Paix
2025-10-08 14:23:43 +02:00
parent 8a5605812c
commit ef9f860da2
21 changed files with 316 additions and 2961 deletions

View File

@@ -0,0 +1,18 @@
{
"db_name": "PostgreSQL",
"query": "\n INSERT INTO comments (user_id, comment_id, post_id, author, content)\n VALUES ($1, $2, $3, $4, $5)\n ",
"describe": {
"columns": [],
"parameters": {
"Left": [
"Uuid",
"Uuid",
"Uuid",
"Text",
"Text"
]
},
"nullable": []
},
"hash": "02fff619c0ff8cb4f9946991be0ce795385b9e6697dcaa52f915acdbb1460e65"
}

View File

@@ -1,6 +1,6 @@
{
"db_name": "PostgreSQL",
"query": "\n SELECT p.post_id, u.username AS author, p.title, p.content, p.published_at\n FROM posts p\n LEFT JOIN users u ON p.author_id = u.user_id\n ORDER BY p.published_at DESC\n LIMIT $1\n OFFSET $2\n ",
"query": "\n SELECT p.post_id, p.author_id, u.username AS author, p.title, p.content, p.published_at\n FROM posts p\n LEFT JOIN users u ON p.author_id = u.user_id\n ORDER BY p.published_at DESC\n LIMIT $1\n OFFSET $2\n ",
"describe": {
"columns": [
{
@@ -10,21 +10,26 @@
},
{
"ordinal": 1,
"name": "author_id",
"type_info": "Uuid"
},
{
"ordinal": 2,
"name": "author",
"type_info": "Text"
},
{
"ordinal": 2,
"ordinal": 3,
"name": "title",
"type_info": "Text"
},
{
"ordinal": 3,
"ordinal": 4,
"name": "content",
"type_info": "Text"
},
{
"ordinal": 4,
"ordinal": 5,
"name": "published_at",
"type_info": "Timestamptz"
}
@@ -40,8 +45,9 @@
false,
false,
false,
false,
false
]
},
"hash": "1778ace39189532c2c69850ad7366bb36c8b5fe7491064a53190a324485f0e53"
"hash": "0463e392b69c5a82a64b4fa47fcf8f0abc63fa8ee77bdf60b4f6fdaca8b77e5a"
}

View File

@@ -1,11 +1,11 @@
{
"db_name": "PostgreSQL",
"query": "\n SELECT p.post_id, u.username AS author, p.title, p.content, p.published_at\n FROM posts p\n LEFT JOIN users u ON p.author_id = u.user_id\n WHERE p.post_id = $1\n ",
"query": "\n SELECT p.author_id, u.username as author, p.post_id, p.title, p.content, p.published_at\n FROM posts p\n INNER JOIN users u ON p.author_id = u.user_id\n WHERE p.author_id = $1\n ORDER BY p.published_at DESC\n ",
"describe": {
"columns": [
{
"ordinal": 0,
"name": "post_id",
"name": "author_id",
"type_info": "Uuid"
},
{
@@ -15,16 +15,21 @@
},
{
"ordinal": 2,
"name": "post_id",
"type_info": "Uuid"
},
{
"ordinal": 3,
"name": "title",
"type_info": "Text"
},
{
"ordinal": 3,
"ordinal": 4,
"name": "content",
"type_info": "Text"
},
{
"ordinal": 4,
"ordinal": 5,
"name": "published_at",
"type_info": "Timestamptz"
}
@@ -39,8 +44,9 @@
false,
false,
false,
false,
false
]
},
"hash": "bccf441e3c1c29ddf6f7f13f7a333adf733abc527da03b12c91422b9b20f3a6f"
"hash": "35ef2d2ed8b1477aebf642fe0f7e7dfc51157611de2da3ed45aed1fcbdf247b0"
}

View File

@@ -1,30 +1,35 @@
{
"db_name": "PostgreSQL",
"query": "\n SELECT u.username as author, p.post_id, p.title, p.content, p.published_at\n FROM posts p\n INNER JOIN users u ON p.author_id = u.user_id\n WHERE p.author_id = $1\n ORDER BY p.published_at DESC\n ",
"query": "\n SELECT p.post_id, p.author_id, u.username AS author, p.title, p.content, p.published_at\n FROM posts p\n LEFT JOIN users u ON p.author_id = u.user_id\n WHERE p.post_id = $1\n ",
"describe": {
"columns": [
{
"ordinal": 0,
"name": "author",
"type_info": "Text"
},
{
"ordinal": 1,
"name": "post_id",
"type_info": "Uuid"
},
{
"ordinal": 1,
"name": "author_id",
"type_info": "Uuid"
},
{
"ordinal": 2,
"name": "title",
"name": "author",
"type_info": "Text"
},
{
"ordinal": 3,
"name": "content",
"name": "title",
"type_info": "Text"
},
{
"ordinal": 4,
"name": "content",
"type_info": "Text"
},
{
"ordinal": 5,
"name": "published_at",
"type_info": "Timestamptz"
}
@@ -39,8 +44,9 @@
false,
false,
false,
false,
false
]
},
"hash": "fba37bafbf190369575b92c91d32f57336e8c7d42d5698e2b22e2b5c0427de75"
"hash": "3b9af6d6aeed0d4550e7cc2d13a7923cfa3658c3bc4ab7b881c2147218db3d82"
}

View File

@@ -1,17 +0,0 @@
{
"db_name": "PostgreSQL",
"query": "\n INSERT INTO comments (comment_id, post_id, author, content)\n VALUES ($1, $2, $3, $4)\n ",
"describe": {
"columns": [],
"parameters": {
"Left": [
"Uuid",
"Uuid",
"Text",
"Text"
]
},
"nullable": []
},
"hash": "767386497874bbf3988938d62112be9479d5dc7eb523246ac98816ff3e8d2754"
}

View File

@@ -1,42 +1,53 @@
{
"db_name": "PostgreSQL",
"query": "\n SELECT comment_id, post_id, author, content, published_at\n FROM comments\n WHERE post_id = $1\n ORDER BY published_at DESC\n LIMIT $2\n OFFSET $3\n ",
"query": "\n SELECT c.user_id as \"user_id?\", u.username as \"username?\", c.comment_id, c.post_id, c.author, c.content, c.published_at\n FROM comments c\n LEFT JOIN users u ON c.user_id = u.user_id AND c.user_id IS NOT NULL\n ORDER BY published_at DESC\n LIMIT $1\n OFFSET $2\n ",
"describe": {
"columns": [
{
"ordinal": 0,
"name": "comment_id",
"name": "user_id?",
"type_info": "Uuid"
},
{
"ordinal": 1,
"name": "username?",
"type_info": "Text"
},
{
"ordinal": 2,
"name": "comment_id",
"type_info": "Uuid"
},
{
"ordinal": 3,
"name": "post_id",
"type_info": "Uuid"
},
{
"ordinal": 2,
"ordinal": 4,
"name": "author",
"type_info": "Text"
},
{
"ordinal": 3,
"ordinal": 5,
"name": "content",
"type_info": "Text"
},
{
"ordinal": 4,
"ordinal": 6,
"name": "published_at",
"type_info": "Timestamptz"
}
],
"parameters": {
"Left": [
"Uuid",
"Int8",
"Int8"
]
},
"nullable": [
true,
false,
false,
false,
true,
@@ -44,5 +55,5 @@
false
]
},
"hash": "0b5951c4e52f86101b33606abf65cdb411578eea4e0635a2b0ea14600e6d5031"
"hash": "886de678764ebf7f96fe683d3b685d176f0a41043c7ade8b659a9bd167a2d063"
}

View File

@@ -0,0 +1,28 @@
{
"db_name": "PostgreSQL",
"query": "SELECT username, full_name FROM users WHERE user_id = $1",
"describe": {
"columns": [
{
"ordinal": 0,
"name": "username",
"type_info": "Text"
},
{
"ordinal": 1,
"name": "full_name",
"type_info": "Text"
}
],
"parameters": {
"Left": [
"Uuid"
]
},
"nullable": [
false,
true
]
},
"hash": "bfd02c92fb5e0c8748b172bf59a77a477b432ada1f41090571f4fe0e685b1b1b"
}

View File

@@ -1,41 +1,54 @@
{
"db_name": "PostgreSQL",
"query": "\n SELECT comment_id, post_id, author, content, published_at\n FROM comments\n ORDER BY published_at DESC\n LIMIT $1\n OFFSET $2\n ",
"query": "\n SELECT c.user_id as \"user_id?\", u.username as \"username?\", c.comment_id, c.post_id, c.author, c.content, c.published_at\n FROM comments c\n LEFT JOIN users u ON c.user_id = u.user_id AND c.user_id IS NOT NULL\n WHERE c.post_id = $1\n ORDER BY c.published_at DESC\n LIMIT $2\n OFFSET $3\n ",
"describe": {
"columns": [
{
"ordinal": 0,
"name": "comment_id",
"name": "user_id?",
"type_info": "Uuid"
},
{
"ordinal": 1,
"name": "username?",
"type_info": "Text"
},
{
"ordinal": 2,
"name": "comment_id",
"type_info": "Uuid"
},
{
"ordinal": 3,
"name": "post_id",
"type_info": "Uuid"
},
{
"ordinal": 2,
"ordinal": 4,
"name": "author",
"type_info": "Text"
},
{
"ordinal": 3,
"ordinal": 5,
"name": "content",
"type_info": "Text"
},
{
"ordinal": 4,
"ordinal": 6,
"name": "published_at",
"type_info": "Timestamptz"
}
],
"parameters": {
"Left": [
"Uuid",
"Int8",
"Int8"
]
},
"nullable": [
true,
false,
false,
false,
true,
@@ -43,5 +56,5 @@
false
]
},
"hash": "dcfd46faa2f2e590bcea3ade11d48cc632d8e0027faa95142f0a698f6b06a378"
"hash": "fb280849a8a1fce21ec52cd9df73492d965357c9a410eb3b43b1a2e1cc8a0259"
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,3 @@
ALTER TABLE comments
ADD COLUMN user_id UUID
REFERENCES users (user_id) ON DELETE SET NULL;

View File

@@ -2,6 +2,8 @@ use chrono::{DateTime, Utc};
use uuid::Uuid;
pub struct CommentEntry {
pub user_id: Option<Uuid>,
pub username: Option<String>,
pub comment_id: Uuid,
pub post_id: Uuid,
pub author: Option<String>,

View File

@@ -3,6 +3,7 @@ use uuid::Uuid;
pub struct PostEntry {
pub post_id: Uuid,
pub author_id: Uuid,
pub author: String,
pub title: String,
pub content: String,

View File

@@ -27,6 +27,7 @@ pub struct CommentForm {
pub author: Option<String>,
pub content: String,
pub idempotency_key: String,
pub user_id: Option<Uuid>,
}
#[tracing::instrument(name = "Posting new comment", skip_all, fields(post_id = %post_id))]
@@ -51,9 +52,15 @@ pub async fn post_comment(
}
};
insert_comment(&mut transaction, post_id, form.author, form.content)
.await
.context("Could not insert comment into database.")?;
insert_comment(
&mut transaction,
post_id,
form.author,
form.user_id,
form.content,
)
.await
.context("Could not insert comment into database.")?;
let template = HtmlTemplate(MessageTemplate::success(
"Your comment has been posted.".into(),
@@ -75,20 +82,25 @@ async fn insert_comment(
transaction: &mut Transaction<'static, Postgres>,
post_id: Uuid,
author: Option<String>,
user_id: Option<Uuid>,
content: String,
) -> Result<Uuid, sqlx::Error> {
let author = author
.filter(|s| !s.trim().is_empty())
.map(|s| s.trim().to_string());
let author = if user_id.is_some() {
None
} else {
author
.filter(|s| !s.trim().is_empty())
.map(|s| s.trim().to_string())
};
let content = content.trim();
let comment_id = Uuid::new_v4();
tracing::Span::current().record("comment_id", comment_id.to_string());
let query = sqlx::query!(
"
INSERT INTO comments (comment_id, post_id, author, content)
VALUES ($1, $2, $3, $4)
INSERT INTO comments (user_id, comment_id, post_id, author, content)
VALUES ($1, $2, $3, $4, $5)
",
user_id,
comment_id,
post_id,
author,
@@ -177,22 +189,35 @@ pub async fn get_comments_page_for_post(
page: i64,
) -> Result<Vec<CommentEntry>, sqlx::Error> {
let offset = (page - 1) * COMMENTS_PER_PAGE;
let comments = sqlx::query_as!(
let mut comments = sqlx::query_as!(
CommentEntry,
"
SELECT comment_id, post_id, author, content, published_at
FROM comments
WHERE post_id = $1
ORDER BY published_at DESC
r#"
SELECT c.user_id as "user_id?", u.username as "username?", c.comment_id, c.post_id, c.author, c.content, c.published_at
FROM comments c
LEFT JOIN users u ON c.user_id = u.user_id AND c.user_id IS NOT NULL
WHERE c.post_id = $1
ORDER BY c.published_at DESC
LIMIT $2
OFFSET $3
",
"#,
post_id,
COMMENTS_PER_PAGE,
offset
)
.fetch_all(connection_pool)
.await?;
for comment in comments.iter_mut() {
if let Some(user_id) = comment.user_id {
let record = sqlx::query!(
"SELECT username, full_name FROM users WHERE user_id = $1",
user_id
)
.fetch_one(connection_pool)
.await?;
let author = record.full_name.unwrap_or(record.username);
comment.author = Some(author);
}
}
Ok(comments)
}
@@ -214,13 +239,14 @@ pub async fn get_comments_page(
let offset = (page - 1) * COMMENTS_PER_PAGE;
let comments = sqlx::query_as!(
CommentEntry,
"
SELECT comment_id, post_id, author, content, published_at
FROM comments
r#"
SELECT c.user_id as "user_id?", u.username as "username?", c.comment_id, c.post_id, c.author, c.content, c.published_at
FROM comments c
LEFT JOIN users u ON c.user_id = u.user_id AND c.user_id IS NOT NULL
ORDER BY published_at DESC
LIMIT $1
OFFSET $2
",
"#,
COMMENTS_PER_PAGE,
offset
)

View File

@@ -77,7 +77,7 @@ async fn get_posts(
sqlx::query_as!(
PostEntry,
r#"
SELECT p.post_id, u.username AS author, p.title, p.content, p.published_at
SELECT p.post_id, p.author_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
@@ -99,7 +99,7 @@ pub async fn get_posts_page(
sqlx::query_as!(
PostEntry,
r#"
SELECT p.post_id, u.username AS author, p.title, p.content, p.published_at
SELECT p.post_id, p.author_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
@@ -197,7 +197,7 @@ pub async fn see_post(
if let Some(post) = get_post_data(&connection_pool, post_id)
.await
.context(format!("Failed to fetch post #{}", post_id))
.context(format!("Failed to fetch post #{}.", post_id))
.map_err(AppError::unexpected_page)?
{
let post_html = post
@@ -206,16 +206,20 @@ pub async fn see_post(
let current_page = 1;
let comments_count = get_comments_count_for_post(&connection_pool, post_id)
.await
.context("Could not fetch comment count")?;
.context("Could not fetch comment count.")?;
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")?;
.context("Failed to fetch latest comments.")?;
let idempotency_key = Uuid::new_v4().to_string();
let session_user_id = session
.get_user_id()
.await
.context("Could not check for session user id.")?;
let session_username = session
.get_username()
.await
.context("Could not check for session username")?;
.context("Could not check for session username.")?;
let template = HtmlTemplate(PostTemplate {
post,
post_html,
@@ -224,6 +228,7 @@ pub async fn see_post(
current_page,
max_page,
comments_count,
session_user_id,
session_username,
});
Ok(template.into_response())
@@ -252,7 +257,7 @@ async fn get_post_data(
sqlx::query_as!(
PostEntry,
r#"
SELECT p.post_id, u.username AS author, p.title, p.content, p.published_at
SELECT p.post_id, p.author_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
WHERE p.post_id = $1

View File

@@ -299,7 +299,7 @@ async fn fetch_user_posts(
sqlx::query_as!(
PostEntry,
r#"
SELECT u.username as author, p.post_id, p.title, p.content, p.published_at
SELECT p.author_id, u.username as author, p.post_id, p.title, p.content, p.published_at
FROM posts p
INNER JOIN users u ON p.author_id = u.user_id
WHERE p.author_id = $1

View File

@@ -127,6 +127,7 @@ pub struct PostTemplate {
pub current_page: i64,
pub max_page: i64,
pub comments_count: i64,
pub session_user_id: Option<Uuid>,
pub session_username: Option<String>,
}

View File

@@ -3,13 +3,20 @@
<div class="flex items-start justify-between">
<div class="flex-1 min-w-0">
<div class="mb-1">
<span class="text-sm font-medium text-gray-900">
{% if let Some(name) = comment.author %}
{{ name }}
{% else %}
Anonymous
{% endif %}
</span>
{% if let Some(user_id) = comment.user_id %}
<a href="/users/{{ comment.username.as_ref().unwrap() }}"
class="font-semibold text-blue-600 hover:text-blue-800 hover:underline">
{{ comment.username.as_ref().unwrap() }}
</a>
{% else %}
<span class="font-medium text-gray-600">
{% if let Some(name) = comment.author %}
{{ name }}
{% else %}
Anonymous
{% endif %}
</span>
{% endif %}
</div>
<p class="text-sm text-gray-700 mb-2 line-clamp-2">{{ comment.content }}</p>
<div class="flex items-center text-xs text-gray-500 mb-1">
@@ -17,8 +24,7 @@
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="{{ comment.published_at }}">
{{ comment.formatted_date() }}
@@ -26,9 +32,8 @@
</div>
<div class="flex items-center text-xs text-gray-500">
<span class="mr-1">on</span>
<a href="/posts/{{ comment.post_id }}" class="text-blue-600 hover:underline truncate">
#{{ comment.post_id }}
</a>
<a href="/posts/{{ comment.post_id }}"
class="text-blue-600 hover:underline truncate">#{{ comment.post_id }}</a>
</div>
</div>
<button hx-delete="/admin/comments/{{ comment.comment_id }}"
@@ -40,8 +45,7 @@
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"/>
<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>

View File

@@ -1,5 +1,5 @@
<div class="bg-white rounded-lg p-4 border border-gray-200">
<div class="flex items-start space-x-3">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<div class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center">
<svg class="w-5 h-5 text-gray-500"
@@ -11,20 +11,29 @@
</div>
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center space-x-2 mb-1">
<span class="font-medium text-gray-900">
{% if let Some(user_id) = comment.user_id %}
<a href="/users/{{ comment.username.as_ref().unwrap() }}"
class="font-semibold text-blue-600 hover:text-blue-800 hover:underline">
{% if let Some(name) = comment.author %}
{{ name }}
{% else %}
{{ comment.username.as_ref().unwrap() }}
{% endif %}
</a>
{% else %}
<span class="font-medium text-gray-600">
{% if let Some(name) = comment.author %}
{{ name }}
{% else %}
Anonymous
{% endif %}
</span>
<span class="text-gray-400"></span>
<time class="text-sm text-gray-500" datetime="{{ comment.published_at }}">
{{ comment.formatted_date() }}
</time>
</div>
<p class="text-gray-700 whitespace-pre-line">{{ comment.content }}</p>
{% endif %}
<time class="block text-sm text-gray-500 mt-0.5"
datetime="{{ comment.published_at }}">
{{ comment.formatted_date() }}
</time>
</div>
</div>
<p class="text-gray-700 whitespace-pre-line mt-2">{{ comment.content }}</p>
</div>

View File

@@ -7,12 +7,27 @@
hx-target="#form-messages"
hx-swap="innerHTML"
class="space-y-4">
<input type="hidden" name="idempotency_key" value="{{ idempotency_key }}"/>
<input type="hidden" name="idempotency_key" value="{{ idempotency_key }}" />
{% if session_user_id.is_some() %}
<input type="hidden"
name="user_id"
value="{{ session_user_id.as_ref().unwrap() }}" />
{% endif %}
<div>
<input type="text"
name="author"
placeholder="Your name (optional)"
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
{% if session_username.is_none() %}
<input type="text"
name="author"
placeholder="Your name (optional)"
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
{% else %}
<input type="text"
name="author"
value="{{ session_username.as_ref().unwrap() }}"
readonly
disabled
class="w-full px-4 py-2 border border-gray-200 rounded-md bg-gray-50 text-gray-600 cursor-not-allowed">
<p class="text-sm text-gray-500 mt-1">You are authenticated.</p>
{% endif %}
</div>
<div>
<textarea name="content"
@@ -29,42 +44,41 @@
</form>
</div>
{% block comments %}
{% if comments.is_empty() %}
<div id="comments-list" class="text-center py-8 text-gray-500">
<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="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>
<p>No comments yet. Be the first to comment!</p>
</div>
{% else %}
{% let post_id = comments[0].post_id %}
<div id="comments-list" class="space-y-4">
{% for comment in comments %}
{% include "posts/comments/card.html" %}
{% endfor %}
<div id="load-more-comments" class="text-center mt-6">
{% if current_page < max_page %}
<div class="flex flex-col items-center space-y-6">
<button hx-get="/posts/{{ post_id }}/comments?page={{ current_page + 1 }}"
hx-target="#load-more-comments"
hx-swap="outerHTML"
hx-indicator="#comment-indicator"
class="text-center bg-gray-200 text-gray-700 hover:bg-gray-300 font-medium py-2 px-6 rounded-md transition-colors">
Load more comments
</button>
<span id="comment-indicator" class="htmx-indicator">
{% if comments.is_empty() %}
<div id="comments-list" class="text-center py-8 text-gray-500">
<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="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>
<p>No comments yet. Be the first to comment!</p>
</div>
{% else %}
{% let post_id = comments[0].post_id %}
<div id="comments-list" class="space-y-4">
{% for comment in comments %}
{% include "posts/comments/card.html" %}
{% endfor %}
<div id="load-more-comments" class="text-center mt-6">
{% if current_page < max_page %}
<div class="flex flex-col items-center space-y-6">
<button hx-get="/posts/{{ post_id }}/comments?page={{ current_page + 1 }}"
hx-target="#load-more-comments"
hx-swap="outerHTML"
hx-indicator="#comment-indicator"
class="text-center bg-gray-200 text-gray-700 hover:bg-gray-300 font-medium py-2 px-6 rounded-md transition-colors">
Load more comments
</button>
<span id="comment-indicator" class="htmx-indicator">
{% call macros::spinner(class="text-gray-300 w-6 h-6", highlight_class="text-gray-700", size=24) %}
</span>
</div>
{% else %}
<p class="text-gray-600">No more comments. Check back later for more!</p>
</div>
{% else %}
<p class="text-gray-600">No more comments. Check back later for more!</p>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>
{% endblock %}
{% endblock %}

View File

@@ -31,7 +31,7 @@
</time>
</div>
</div>
{% if session_username.as_deref() == Some(post.author) %}
{% if session_user_id.as_ref() == Some(post.author_id) %}
<div class="mt-4 sm:mt-0">
<button onclick="document.getElementById('edit-form').classList.toggle('hidden')"
class="inline-flex items-center px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition-colors">
@@ -47,7 +47,7 @@
{% endif %}
</div>
</header>
{% if session_username.as_deref() == Some(post.author) %}
{% if session_user_id.as_ref() == Some(post.author_id) %}
<div id="edit-form"
class="hidden bg-gray-50 border border-gray-200 rounded-lg p-6">
<h2 class="text-xl font-bold text-gray-900 mb-4">Edit post</h2>

View File

@@ -1,47 +1,47 @@
<div class="bg-white rounded-lg shadow-md border border-gray-200">
<h2 class="text-xl font-semibold text-gray-900 px-8 py-6 border-b border-gray-200">Activity</h2>
{% if posts.is_empty() %}
<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"/>
</svg>
<p>No posts yet</p>
</div>
<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" />
</svg>
<p>No posts yet</p>
</div>
{% else %}
<div class="divide-y divide-gray-200">
{% for post in posts %}
<a href="/posts/{{ post.post_id }}"
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>
<div class="flex items-center text-sm text-gray-500">
<svg class="w-4 h-4 mr-1.5"
<div class="divide-y divide-gray-200">
{% for post in posts %}
<a href="/posts/{{ post.post_id }}"
class="block hover:bg-gray-50 px-8 py-5 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>
<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="{{ post.published_at }}">
{{ post.formatted_date() }}
</time>
</div>
</div>
<svg class="w-5 h-5 text-gray-400 group-hover:text-blue-600 transition-colors flex-shrink-0 ml-4"
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="M9 5l7 7-7 7" />
</svg>
<time datetime="{{ post.published_at }}">
{{ post.formatted_date() }}
</time>
</div>
</div>
<svg class="w-5 h-5 text-gray-400 group-hover:text-blue-600 transition-colors flex-shrink-0 ml-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</div>
</a>
{% endfor %}
</div>
</a>
{% endfor %}
</div>
{% endif %}
</div>