mark icons colored if user has interacted with a post.

app/presenters/post_presenter.rb

@@ -13,6 +13,8 @@ class PostPresenter
       :post => self.post.as_api_response(:backbone).update(
         {
         :user_like => self.user_like,
+        :user_participation => self.user_participation,
+        :user_reshare => self.user_reshare,
         :next_post => self.next_post_url,
         :previous_post => self.previous_post_url
       }),
@@ -27,6 +29,19 @@ class PostPresenter
     end
   end
 
+  def user_participation
+    return unless self.current_user.present?
+
+    if participation = Participation.where(:target_id => self.post.id, :target_type => "Post", :author_id => current_user.person.id).first
+      participation.as_api_response(:backbone)
+    end
+  end
+
+  def user_reshare
+    return unless self.current_user.present?
+    Reshare.where(:root_guid => self.post.guid, :author_id => current_user.person.id).exists?
+  end
+
   def next_post_url
     if n = next_post
       Rails.application.routes.url_helpers.post_path(n)

public/javascripts/app/templates/post-viewer/feedback.handlebars

@@ -5,16 +5,28 @@
 -->
 
 <a href="#" class="label like" title="{{#if user_like}} Unlike {{else}} Like {{/if}}">
-  <i class="icon-heart icon-white"></i>
+  {{#if user_like}}
+    <i class="icon-heart icon-red"></i>
+  {{else}}
+    <i class="icon-heart icon-white"></i>
+  {{/if}}
 </a>
 
-<a href="#" class="label follow" title="Follow Post">
+<a href="#" class="label follow" title="{{#if user_participation}} Stop Following {{else}} Follow {{/if}} Post">
-  <i class="icon-plus icon-white"></i>
+  {{#if user_participation}}
+    <i class="icon-plus icon-green"></i>
+  {{else}}
+    <i class="icon-plus icon-white"></i>
+  {{/if}}
 </a>
 
 {{#if userCanReshare}}
-  <a href="#" class="label reshare" title="Reshare">
+  <a href="#" class="label reshare" title="{{#if user_reshare}} Reshared {{else}} Reshare {{/if}}">
-    <i class="icon-retweet icon-white"></i>
+    {{#if user_reshare}}
+      <i class="icon-retweet icon-blue"></i>
+    {{else}}
+      <i class="icon-retweet icon-white"></i>
+    {{/if}}
   </a>
 {{/if}}
 

public/stylesheets/sass/new-templates.scss

@@ -95,6 +95,19 @@ $light-grey: #999;
   100% { left: 0; }
 }
 
+/* bootstrap extentions */
+.icon-red {
+  background-image: url(../img/glyphicons-halflings-red.png);
+}
+
+.icon-green {
+  background-image: url(../img/glyphicons-halflings-green.png);
+}
+
+.icon-blue {
+  background-image: url(../img/glyphicons-halflings-blue.png);
+}
+
 /* styles */
 
 .bump-left { @include animation(bump-left) }