css for marking as unread, and hook for notification page to be part of it when called.

app/views/notifications/index.html.haml

@@ -2,33 +2,40 @@
 -self.extend AspectsHelper
 -self.extend ApplicationHelper
 -self.extend ErrorMessagesHelper
-.span-13
+#notifications_content
-  %h2
+  .span-13
-    %span.notification_count{:class => ('unread' if @notification_count > 0)}
+    %h2
-      = @notification_count
+      %span.notification_count{:class => ('unread' if @notification_count > 0)}
-    = t('.notifications')
+        = @notification_count
-.span-8.last
+      = t('.notifications')
-  = link_to t('.mark_all_as_read'), read_all_notifications_path, :class => 'button'
+  .span-8.last
+    = link_to t('.mark_all_as_read'), read_all_notifications_path, :class => 'button'
+  .span-24.last
+    .stream.notifications
+      - group_days.each do |day, notes|
+        .day_group.span-24.last
+          .span-3
+            .date
+              .day= the_day(day.split(' '))
+              .month= the_month(day.split(' '))
 
-.span-24.last
+          .span-8.notifications_for_day
-  .stream.notifications
+            - notes.each do |note|
-    - group_days.each do |day, notes|
+              .stream_element{:data=>{:guid => note.id}, :class => "#{note.unread ? 'unread' : 'read'}"}
-      .day_group.span-24.last
+                - if note.type == "Notifications::StartedSharing" && contact = current_user.contact_for(note[:target])
-        .span-3
+                  .right
-          .date
+                    = aspect_membership_dropdown(contact, note[:target], 'left')
-            .day= the_day(day.split(' '))
-            .month= the_month(day.split(' '))
 
-        .span-8.notifications_for_day
+                %span.from
-          - notes.each do |note|
+                  = notification_message_for(note)
-            .stream_element{:data=>{:guid => note.id}, :class => "#{note.unread ? 'unread' : ''}"}
+                %br
-              - if note.type == "Notifications::StartedSharing" && contact = current_user.contact_for(note[:target])
+                %time= timeago(note.created_at)
-                .right
+                %a{:class => 'unread-setter'}
-                  = aspect_membership_dropdown(contact, note[:target], 'left')
+                  mark unread
+          .span-13.last
+      = will_paginate notifications
 
-              %span.from
+:javascript
-                = notification_message_for(note)
+  $(document).ready(function(){
-              %br
+    Diaspora.page.header.notifications.setUpNotificationPage( $("#notifications_content" ) );
-              %time= timeago(note.created_at)
+  });
-        .span-13.last
-    = will_paginate notifications

public/stylesheets/sass/application.sass

@@ -2987,6 +2987,12 @@ ul.left_nav
   .user_card
     :margin-left 8px
 
+.unread-setter
+  :float right
+  :display none
+  :cursor pointer
+  :margin-top 8px
+
 .stream_container
   :min-height 500px
 
@@ -3139,7 +3145,8 @@ a.toggle_selector
   .notification_element
     :padding 10px
     :min-height 30px
-
+    &:hover
+      :background-color #FAFAFA
     > img
       :height 30px
       :width 30px