fix(message): Show folder in expanded headers

internal_packages/message-list/lib/message-item.cjsx

@@ -107,15 +107,24 @@ class MessageItem extends React.Component
                            isDetailed={@state.detailedHeaders}
                            message_participants={@props.message.participants()} />
 
+      {@_renderFolder()}
       {@_renderHeaderExpansionControl()}
 
     </header>
 
+  _renderFolder: =>
+    return [] unless @state.detailedHeaders and @props.message.folder
+    <div className="header-row">
+      <div className="header-label">Folder:&nbsp;</div>
+      <div className="header-name">{@props.message.folder.displayName}</div>
+    </div>
+
+
   _onClickParticipants: (e) =>
     el = e.target
     while el isnt e.currentTarget
       if "collapsed-participants" in el.classList
-        @setState detailedHeaders: true
+        @setState(detailedHeaders: true)
         e.stopPropagation()
         return
       el = el.parentElement
@@ -149,13 +158,13 @@ class MessageItem extends React.Component
     if @state.detailedHeaders
       <div className="header-toggle-control"
            style={top: "18px", left: "-14px"}
-           onClick={ (e) => @setState detailedHeaders: false; e.stopPropagation()}>
+           onClick={ (e) => @setState(detailedHeaders: false); e.stopPropagation()}>
         <RetinaImg name={"message-disclosure-triangle-active.png"} mode={RetinaImg.Mode.ContentIsMask}/>
       </div>
     else
       <div className="header-toggle-control inactive"
            style={top: "18px"}
-           onClick={ (e) => @setState detailedHeaders: true; e.stopPropagation()}>
+           onClick={ (e) => @setState(detailedHeaders: true); e.stopPropagation()}>
         <RetinaImg name={"message-disclosure-triangle.png"} mode={RetinaImg.Mode.ContentIsMask}/>
       </div>
 

internal_packages/message-list/stylesheets/message-list.less

@@ -255,6 +255,21 @@
     padding-bottom: @spacing-standard;
     padding-top: 19px;
 
+    .header-row {
+      margin-top: 0.5em;
+      color: @text-color-very-subtle;
+
+      .header-label {
+        float: left;
+        display: block;
+        font-weight: @font-weight-normal;
+        margin-left: 0;
+      }
+
+      .header-name {
+      }
+    }
+
     .message-actions-wrap {
       text-align: right;
     }
@@ -449,6 +464,7 @@
     .participant-secondary {
       color: @text-color-very-subtle;
     }
+
     .from-contact {
       .participant-primary {
         color: @text-color;

src/flux/attributes/attribute-object.coffee

@@ -19,7 +19,15 @@ class AttributeObject extends Attribute
 
   fromJSON: (val) ->
     if @itemClass
-      return new @itemClass(val)
+      obj = new @itemClass(val)
+      # Important: if no ids are in the JSON, don't make them up randomly.
+      # This causes an object to be "different" each time it's de-serialized
+      # even if it's actually the same, makes React components re-render!
+      obj.id = undefined
+      # Warning: typeof(null) is object
+      if obj.fromJSON and val and typeof(val) is 'object'
+        obj.fromJSON(val)
+      return obj
     else
       return val ? ""