add test message

mail.css

@@ -39,7 +39,6 @@ h1 img, h2 img, h3 img, h4 img, h5 img, h6 img
 a
 {
 	font: inherit;
-	color: inherit;
 	text-decoration: underline;
 	outline: 0;
 }
@@ -1222,6 +1221,11 @@ div
 	flex: 1;
 }
 
+.message-view .text pre, .message-view .text p
+{
+	margin: 0 0 .5em 0;
+}
+
 .message-view .blocked-images
 {
 	flex: none;

mail.js

@@ -35,6 +35,7 @@ var Store = {
     layout: 'message-on-right',
     quickReply: true,
     msg: null,
+    threads: false,
 
     listeners: {},
     on: function(ev, cb)
@@ -351,21 +352,20 @@ var dropdown_threads = React.createElement(
 var ListSortSettings = React.createClass({
     render: function()
     {
-        var self = this;
-        return <div className={this.props.className}>
+        return <div className={this.props.className} value={this.props.sort.sortby}>
             <select className="sortby">
                 {['sent date', 'status', 'label', 'size', 'subject'].map(function(i) {
-                    return <option key={'s'+i} selected={self.props.sort.sortby == i ? 'selected' : null}>Sort by {i}</option>
+                    return <option key={'s'+i} value={i}>Sort by {i}</option>
                 })}
             </select>
-            <select className="group">
-                <option selected={!this.props.sort.group ? 'selected' : null}>Do not group</option>
-                <option selected={this.props.sort.group == 'read' ? 'selected' : null}>Group by read status</option>
-                <option selected={this.props.sort.group == 'pinned' ? 'selected' : null}>Group by pinned status</option>
-                <option selected={this.props.sort.group == 'date' ? 'selected' : null}>Group by date</option>
+            <select className="group" value={this.props.sort.group}>
+                <option value="">Do not group</option>
+                <option value="read">Group by read status</option>
+                <option value="pinned">Group by pinned status</option>
+                <option value="date">Group by date</option>
             </select>
-            <label><input type="checkbox" checked={this.props.sort.ascending ? "checked" : null} /> Sort ascending</label>
-            <label><input type="checkbox" checked={this.props.sort.threaded ? "checked" : null} /> Threaded</label>
+            <label><input type="checkbox" checked={this.props.sort.ascending} /> Sort ascending</label>
+            <label><input type="checkbox" checked={this.props.sort.threaded} /> Threaded</label>
         </div>
     }
 });
@@ -962,10 +962,10 @@ var MessageInList = React.createClass({
     {
         var msg = this.props.msg;
         return <div className={'message'+(this.msgClasses.map(c => (msg[c] ? ' '+c : '')).join(''))+
-            (this.state.selected ? ' selected' : '')+(msg.thread ? ' thread0' : '')} onMouseDown={this.onClick}>
+            (this.state.selected ? ' selected' : '')+(msg.thread && Store.threads ? ' thread0' : '')} onMouseDown={this.onClick}>
             <div className="icon" style={{ width: (20+10*(msg.level||0)), backgroundPosition: (10*(msg.level||0))+'px 7px' }}></div>
             <div className="subject" style={{ paddingLeft: (20+10*(msg.level||0)) }}>{msg.subject}</div>
-            {msg.thread ? <div className={'expand'+(msg.collapsed ? '' : ' collapse')}></div> : null}
+            {msg.thread && Store.threads ? <div className={'expand'+(msg.collapsed ? '' : ' collapse')}></div> : null}
             <div className="bullet"></div>
             <div className="from" style={{ left: (21+10*(msg.level||0)) }}>{(msg.sent || msg.outgoing ? 'To '+msg.to : msg.from)}</div>
             <div className="size">{formatBytes(msg.size)}</div>
@@ -975,6 +975,7 @@ var MessageInList = React.createClass({
     }
 });
 
+// TODO: full keyboard navigation in message list, expand/collapse days, virtual scroll...
 var MessageList = React.createClass({
     getInitialState: function()
     {
@@ -1009,9 +1010,11 @@ var MessageList = React.createClass({
                         {grp.messages.map(msg => [
                             <MessageInList msg={msg} onClick={this.onMsgClick} />,
                             (msg.thread ?
-                                <div className="thread">
-                                    {msg.thread.map(reply => <MessageInList msg={reply} onClick={this.onMsgClick} />)}
-                                </div>
+                                (Store.threads ?
+                                    <div className="thread">
+                                        {msg.thread.map(reply => <MessageInList msg={reply} onClick={this.onMsgClick} />)}
+                                    </div>
+                                : msg.thread.map(reply => <MessageInList msg={reply} onClick={this.onMsgClick} />))
                             : null)
                         ])}
                     </div>
@@ -1195,6 +1198,21 @@ var composeAccounts = [
 
 var listGroups = [ {
     name: 'TODAY',
+    messages: [ {
+        subject: 'The Glossary of Happiness  By Emily Anthes , May 12, 2016',
+        from: 'Margarita Philippova',
+        fromEmail: 'philippova.marga@gmail.com',
+        to: 'Виталий Филиппов',
+        time: '2016-06-20 00:11:18',
+        unread: true,
+        body: '<pre><a href="http://www.newyorker.com/tech/elements/the-glossary-of-happiness">http://www.newyorker.com/tech/elements/the-glossary-of-happiness</a><br />\
+<br />\
+--<br />\
+Best regards,<br />\
+  Margarita Philippova</pre>'
+    } ]
+}, {
+    name: 'LAST WEEK',
     messages: [ {
         subject: 'кошку хочешь?))',
         sent: true,