User comments

templates/posts/comments/card.html

@@ -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>