Personal and 3rd-party messages divided by sides of chat area

[lesykm]

Like it is done in most of modern messages, like:
https://static.makeuseof.com/wp-content/uploads/2015/01/whatsapp-web-everything-670x335.jpg
Should be pretty simple fix, will try to poke css this weekend if will find time.
Example:

[nickvergessen]

@jancborchardt can you make a suggestion?
mirroring the layout feels awkward because the time is then on the wrong side for your own messages?

[nickvergessen]

My suggestion would be to skip your own name

[jancborchardt]

I’m not entirely sure about this. Slack for example doesn’t do any of the right-alignment, and neither does Wire: https://wire.com/en/

On mobile it is nice, but on desktop it doesn’t particularly add reading flow, and we would need to add some max-width and probably center everything.

[nickvergessen]

Yeah I noticed Slack to, and it was the first comment together with IRC.
But e.g. Telegram and Whatsapp do it also on the desktop.
I think it would help with reading and searching for stuff, because you can easily spot where you interacted in the communication

[jancborchardt]

Another idea would be to add a blue bar to the left of your own messages, as we do for the active entry in the left navigation?

That also serves as an indicator and does not change the whole layout.

[nickvergessen]

Sample in main view:

Sample in sidebar:

[nickvergessen]

If you want to play around with it a bit:

diff --git a/css/comments.scss b/css/comments.scss
index 52ef5eee..e067ed39 100644
--- a/css/comments.scss
+++ b/css/comments.scss
@@ -257,6 +257,18 @@ body:not(#body-public) #commentsTabView .comment .authorRow:not(.currentUser):no
        color: $color-primary-text;
 }
 
+#app-content-wrapper #commentsTabView .comment.currentUser {
+       box-shadow: inset 4px 0 $color-primary;
+       margin-left: -40px;
+       padding-left: 36px;
+}
+
+#app-sidebar-wrapper #commentsTabView .comment.currentUser {
+       box-shadow: inset 4px 0 $color-primary;
+       margin-left: -10px;
+       padding-left: 6px;
+}
+
 body:not(#body-public) #commentsTabView .comment:not(.newCommentRow) .message .mention-user:not(.current-user) {
        cursor: pointer;
 }
diff --git a/js/views/chatview.js b/js/views/chatview.js
index b9b3f5e9..1f481a6e 100644
--- a/js/views/chatview.js
+++ b/js/views/chatview.js
@@ -52,7 +52,7 @@
                '</div>';
 
        var COMMENT_TEMPLATE =
-               '<li class="comment" data-id="{{id}}">' +
+               '<li class="comment{{#if isUserAuthor}} currentUser{{/if}}" data-id="{{id}}">' +
                '    <div class="authorRow{{#if isUserAuthor}} currentUser{{/if}}{{#if isGuest}} guestUser{{/if}}">' +
                '        <div class="avatar" data-user-id="{{actorId}}" data-displayname="{{actorDisplayName}}"> </div>' +
                '        <div class="author">{{actorDisplayName}}</div>' +

[nickvergessen]

so, to do or not to do?
cc @jancborchardt @jenniferpiperek