use popState in message inbox

app/controllers/conversations_controller.rb

 class ConversationsController < ApplicationController
   before_filter :authenticate_user!
 
-  respond_to :html, :json
+  respond_to :html, :json, :js
 
   def index
     @conversations = Conversation.joins(:conversation_visibilities).where(
@@ -44,17 +44,12 @@ class ConversationsController < ApplicationController
   def show
     @conversation = Conversation.joins(:conversation_visibilities).where(:id => params[:id],
                                                                          :conversation_visibilities => {:person_id => current_user.person.id}).first
-
     if @visibility = ConversationVisibility.where(:conversation_id => params[:id], :person_id => current_user.person.id).first
       @visibility.unread = 0
       @visibility.save
     end
 
-    if @conversation
-      render :layout => false
-    else
-      redirect_to conversations_path
-    end
+    respond_with @conversation
   end
 
   def new

app/views/conversations/_conversation.haml

@@ -2,20 +2,21 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-.stream_element.conversation{:data=>{:guid=>conversation.id}, :class => ('unread' if unread_counts[conversation.id].to_i > 0)}
-  = person_image_tag(authors[conversation.id])
+%a.conversation{:href => conversations_path(:conversation_id => conversation.id)}
+  .stream_element.conversation{:data=>{:guid=>conversation.id}, :class => ('unread' if unread_counts[conversation.id].to_i > 0)}
+    = person_image_tag(conversation.author)
 
-  .subject
-    .message_count
-      = conversation.messages.size
+    .subject
+      .message_count
+        = conversation.messages.size
 
-    = conversation.subject[0..30]
+      = conversation.subject[0..30]
 
-  .last_author
-    .timestamp
-      = time_ago_in_words(conversation.updated_at)
-    = authors[conversation.id].name
+    .last_author
+      .timestamp
+        = time_ago_in_words(conversation.updated_at)
+      = authors[conversation.id].name
 
-    - if conversation.participants.size > 2
-      %span.participant_count
-        = "(+#{conversation.participants.size - 1})"
+      - if conversation.participants.size > 2
+        %span.participant_count
+          = "(+#{conversation.participants.size - 1})"

app/views/conversations/index.js.erb

+$('#conversation_show').html("<%= escape_javascript(render('conversations/show', :conversation => @conversation)) %>");
+
+$(".stream_element", "#conversation_inbox").removeClass('selected');
+$(".stream_element[data-guid='<%= @conversation.id %>']", "#conversation_inbox").addClass('selected');
+
+Diaspora.widgets.timeago.updateTimeAgo();

public/javascripts/inbox.js

@@ -5,24 +5,15 @@
 
 $(document).ready(function(){
 
-  var bindIt = function(element){
-    var conversationSummary = element,
-        conversationGuid = conversationSummary.attr('data-guid');
-    $.get("conversations/"+conversationGuid, function(data){
-
-      $('.conversation', '.stream').removeClass('selected');
-      conversationSummary.addClass('selected').removeClass('unread');
-      $('#conversation_show').html(data);
-      Diaspora.widgets.timeago.updateTimeAgo();
-    });
-
-    if (typeof(history.pushState) == 'function') {
-      history.pushState(null, document.title, '?conversation_id='+conversationGuid);
-    }
-  }
+  $('a.conversation').live('click', function(){
+    $.getScript(this.href);
+    history.pushState(null, "", this.href);
+    return false;
+  });
 
-  $('.conversation', '.stream').bind('mousedown', function(){
-    bindIt($(this));
+  $(window).bind("popstate", function(){
+    $.getScript(location.href);
+    return false;
   });
 
   resize();

public/stylesheets/sass/application.sass

@@ -320,6 +320,11 @@ header
       :margin 0
       :padding 0
 
+#conversation_inbox a
+  &:hover
+    :text
+      :decoration none
+
 .stream_element
   :position relative
   :word-wrap break-word
@@ -2621,7 +2626,12 @@ div.dislikes
 
   &:hover:not(.selected)
     :background
-      :color #f0f0f0
+      :color #fafafa
+
+  &.selected:hover
+    :background
+      :color lighten($blue,5%)
+
   &:hover
     :cursor pointer