Resolve #737 by new messagelist view per day

dev/Common/Translator.js

@@ -78,7 +78,7 @@ export const
 			time = 0 < timeStampInUTC ? Math.min(now, timeStampInUTC * 1000) : (0 === timeStampInUTC ? now : 0);
 
 		if (31536000000 < time) {
-			const m = new Date(time);
+			const m = new Date(time), h = LanguageStore.hourCycle();
 			switch (formatStr) {
 				case 'FROMNOW':
 					return m.fromNow();
@@ -88,17 +88,17 @@ export const
 					const mt = m.getTime(), date = new Date,
 						dt = date.setHours(0,0,0,0);
 					if (mt > dt)
-						return i18n('MESSAGE_LIST/TODAY_AT', {TIME: m.format('LT',0,LanguageStore.hourCycle())});
+						return i18n('MESSAGE_LIST/TODAY_AT', {TIME: m.format('LT',0,h)});
 					if (mt > dt - 86400000)
-						return i18n('MESSAGE_LIST/YESTERDAY_AT', {TIME: m.format('LT',0,LanguageStore.hourCycle())});
+						return i18n('MESSAGE_LIST/YESTERDAY_AT', {TIME: m.format('LT',0,h)});
 					if (date.getFullYear() === m.getFullYear())
 						return m.format('d M');
-					return m.format('LL',0,LanguageStore.hourCycle());
+					return m.format('LL',0,h);
 				}
 				case 'FULL':
-					return m.format('LLL',0,LanguageStore.hourCycle());
+					return m.format('LLL',0,h);
 				default:
-					return m.format(formatStr,0,LanguageStore.hourCycle());
+					return m.format(formatStr,0,h);
 			}
 		}
 

dev/Stores/User/Messagelist.js

@@ -96,20 +96,7 @@ addComputablesTo(MessagelistUserStore, {
 				value.toString().trim(), MessagelistUserStore.threadUid())
 		)
 	},
-/*
+
-	// Idea for https://github.com/the-djmaze/snappymail/issues/737
-	listByDay: () => {
-		let list = {};
-		MessagelistUserStore.forEach(msg => {
-			let day = (new Date(msg.dateTimeStampInUTC() * 1000)).format('Ymd');
-			if (!list[day]) {
-				list[day] = {day:day,messages:[]};
-			}
-			list[day].messages.push(msg);
-		});
-		return Object.values(list);
-	},
-*/
 	listCheckedOrSelected: () => {
 		const
 			selectedMessage = MessagelistUserStore.selectedMessage(),

dev/Styles/User/MessageList.less

@@ -29,6 +29,14 @@ html.rl-no-preview-pane {
 	display: flex;
 	flex-direction: column;
 
+	.day {
+		background:rgba(128,128,128,0.2);
+		font-size: 90%;
+		line-height: 2;
+		text-align: center;
+		text-transform: capitalize;
+	}
+
 	.b-footer {
 	    display: flex;
 		flex-shrink: 0;

dev/View/User/MailBox/MessageList.js

@@ -5,7 +5,8 @@ import { Scope } from 'Common/Enums';
 
 import { ComposeType, FolderType, MessageSetAction } from 'Common/EnumsUser';
 
-import { leftPanelDisabled, toggleLeftPanel,
+import { doc,
+	leftPanelDisabled, toggleLeftPanel,
 	Settings, SettingsCapa,
 	addEventsListeners,
 	addShortcut, registerShortcut, formFieldFocused
@@ -31,6 +32,7 @@ import {
 import { AppUserStore } from 'Stores/User/App';
 import { SettingsUserStore } from 'Stores/User/Settings';
 import { FolderUserStore } from 'Stores/User/Folder';
+import { LanguageStore } from 'Stores/Language';
 import { MessageUserStore } from 'Stores/User/Message';
 import { MessagelistUserStore } from 'Stores/User/Messagelist';
 import { ThemeStore } from 'Stores/Theme';
@@ -63,7 +65,10 @@ const
 			FolderUserStore.currentFolderFullName(),
 			MessagelistUserStore.listCheckedOrSelectedUidsWithSubMails(),
 			bDelete
-		);
+		),
+
+	pad2 = v => 10 > v ? '0' + v : '' + v,
+	Ymd = dt => dt.getFullYear() + pad2(1 + dt.getMonth()) + pad2(dt.getDate());
 
 let
 	iGoToUpOrDownTimeout = 0,
@@ -141,6 +146,35 @@ export class MailMessageList extends AbstractViewRight {
 
 			mobileCheckedStateHide: () => ThemeStore.isMobile() ? !MessagelistUserStore.hasChecked() : 1,
 
+			// Idea for https://github.com/the-djmaze/snappymail/issues/737
+			listByDay: () => {
+				let list = [], current, today = Ymd(new Date()), lang = doc.documentElement.lang;
+				MessagelistUserStore.forEach(msg => {
+					let date = (new Date(msg.dateTimeStampInUTC() * 1000)),
+						ymd = Ymd(date);
+					if (!current || ymd != current.ymd) {
+						if (today == ymd) {
+							date = new Intl.RelativeTimeFormat(lang, { numeric: "auto" }).format(0, 'day');
+						} else if (today - 1 == ymd) {
+							date = new Intl.RelativeTimeFormat(lang, { numeric: "auto" }).format(-1, 'day');
+//						} else if (today - 7 < ymd) {
+//							date = date.format('l');
+						} else {
+//							date = date.format('LL',0,LanguageStore.hourCycle());
+							date = date.format({dateStyle: 'full'},0,LanguageStore.hourCycle());
+						}
+						current = {
+							ymd: ymd,
+							day: date,
+							messages: []
+						};
+						list.push(current);
+					}
+					current.messages.push(msg);
+				});
+				return list;
+			},
+
 			sortText: () => {
 				let mode = FolderUserStore.sortMode(),
 					desc = '' === mode || mode.includes('REVERSE');

snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html

@@ -128,7 +128,10 @@
 			<i class="icon-spinner"></i>
 			<span data-i18n="GLOBAL/LOADING"></span>
 		</div>
-		<div class="messageListPlace" data-bind="dragmessages: 1, foreach: messageList" draggable="true">
+
+		<div class="messageListPlace" data-bind="dragmessages: 1, foreach: listByDay" draggable="true">
+			<div class="day" data-bind="text: day"></div>
+			<!-- ko foreach: messages -->
 			<div class="messageListItem" data-bind="css: lineAsCss()">
 				<div class="messageCheckbox">
 					<div class="checkboxMessage fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
@@ -141,9 +144,10 @@
 					</div>
 					<div class="sizeParent actionHandle" data-bind="text: friendlySize()"></div>
 					<div class="threads-len" data-bind="visible: 1 < threadsLen(), text: threadsLen"></div>
-					<time class="actionHandle" data-moment-format="SHORT" data-moment-format-title="FULL" data-bind="moment: dateTimeStampInUTC"></time>
+					<time class="actionHandle" data-moment-format="LT" data-moment-format-title="FULL" data-bind="moment: dateTimeStampInUTC"></time>
 				</div>
 			</div>
+			<!-- /ko -->
 		</div>
 		<div id="messagesDragImage"><span class="text"></span>&nbsp;<span class="fontastic">✉</span></div>
 	</div>