Start displaying likes/shares for outbox objects

app/templates/object.html

@@ -19,7 +19,7 @@
 {% macro display_replies_tree(replies_tree_node) %}
 
 {% if replies_tree_node.is_requested %}
-    {{ utils.display_object_expanded(replies_tree_node.ap_object) }}
+    {{ utils.display_object_expanded(replies_tree_node.ap_object, likes=likes, shares=shares) }}
 {% else %}
     {{ utils.display_object(replies_tree_node.ap_object) }}
 {% endif %}

app/templates/utils.html

@@ -208,7 +208,7 @@
   {% endif %}
 {% endmacro %}
 
-{% macro display_object_expanded(object) %}
+{% macro display_object_expanded(object, likes=[], shares=[]) %}
 
 <div class="activity-expanded h-entry">
 
@@ -240,6 +240,34 @@
 
 {{ display_attachments(object) }}
 
+{% if likes or shares %}
+<div style="display: flex;column-gap: 20px;margin:20px 0;">
+    <div style="flex: 0 1 50%;max-width: 50%;">Likes
+    <div style="display: flex;column-gap: 20px;row-gap:20px;flex-wrap: wrap;margin-top:20px;">
+{% for like in likes %}
+<a href="{{ like.actor.url }}" title="{{ like.actor.handle }}" style="height:50px;">
+    <img src="{{ like.actor.resized_icon_url }}" alt="{{ like.actor.handle}}" style="max-width:50px;">
+    </a>
+{% endfor %}
+<div style="width:50px;text-align:center;">And 2223 more.</div>
+
+
+    </div>
+    </div>
+
+    <div style="flex: 0 1 50%;max-width: 50%;">Shares
+    <div style="display: flex;column-gap: 20px;row-gap:20px;flex-wrap: wrap;margin-top:20px;">
+{% for share in shares %}
+<a href="{{ share.actor.url }}" title="{{ share.actor.handle }}" style="height:50px;">
+    <img src="{{ share.actor.resized_icon_url }}" alt="{{ share.actor.handle}}" style="max-width:50px;">
+    </a>
+{% endfor %}
+    </div>
+    </div>
+{% endif %}
+
+</div>
+
 </div>
 
 {% endmacro %}
@@ -339,8 +367,7 @@
             </div>
 
 
-    {% endif %}
-    
+    {% endif %} 
   </div>
 </div>
 {% endif %}