refactor: Align non-JS comments page structure and style

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>

webclient/public/index.html

@@ -52,9 +52,17 @@
 				<div class="article-container">
 					<div class="article">
 						<h1>{{ story.title }}</h1>
+
+						{% if show_comments %}
+							<div class="info">
+								<a href="/{{ story.id }}">View article</a>
+							</div>
+						{% else %}
 							<div class="info">
 								Source: <a class="source" href="{{ story.url or story.link }}">{{ url }}</a>
 							</div>
+						{% endif %}
+
 						<div class="info">
 							{{ story.score }} points
 							by <a href="{{ story.author_link }}">{{ story.author }}</a>
@@ -68,9 +76,13 @@
 							<div class="story-text">{{ story.text | safe }}</div>
 						{% elif show_comments %}
 							{% macro render_comment(comment, level) %}
-								<div class="comment" style="margin-left: {{ level * 20 }}px">
-									<div class="c-info"><a href="{{ comment.author_link }}">{{ comment.author }}</a></div>
-									<div class="c-text">{{ comment.text | safe }}</div>
+								<div class="comment{% if level > 0 %} lined{% endif %}">
+									<div class="info">
+										<p>
+											{% if comment.author == story.author %}[OP] {% endif %}{{ comment.author or '[Deleted]' }}
+										</p>
+									</div>
+									<div class="text">{{ (comment.text | safe) if comment.text else '<p>[Empty / deleted comment]</p>' }}</div>
 									{% for reply in comment.comments %}
 										{{ render_comment(reply, level + 1) }}
 									{% endfor %}