From b3098c8c5a875cbecc1d5d8d3a6fb4489f49402d Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 13 Apr 2019 11:04:39 -0700
Subject: [PATCH] fix: tweaks to conversations (direct) UI (#1137)

- make the url `/direct`
- call it "Direct messages"
- fix sapper export
- retain DM background color
- add test
---
 src/routes/_actions/streaming.js                   |  2 +-
 src/routes/_api/TimelineStream.js                  |  2 +-
 src/routes/_api/timelines.js                       | 12 +++++++-----
 src/routes/_components/NavShortcuts.html           |  2 +-
 src/routes/_components/status/Status.html          |  5 +++++
 src/routes/_pages/community/index.html             |  5 +++--
 .../_pages/{conversations.html => direct.html}     |  6 +++---
 src/routes/_store/computations/navComputations.js  |  8 ++++----
 src/routes/_store/observers/timelineObservers.js   |  2 +-
 src/routes/{conversations.html => direct.html}     |  4 ++--
 tests/fixtures.js                                  |  5 +++++
 tests/spec/003-basic-timeline-spec.js              | 14 +++++++++++++-
 12 files changed, 46 insertions(+), 21 deletions(-)
 rename src/routes/_pages/{conversations.html => direct.html} (82%)
 rename src/routes/{conversations.html => direct.html} (77%)

diff --git a/src/routes/_actions/streaming.js b/src/routes/_actions/streaming.js
index 3bd6f297..829dbe2d 100644
--- a/src/routes/_actions/streaming.js
+++ b/src/routes/_actions/streaming.js
@@ -21,7 +21,7 @@ function processMessage (instanceName, timelineName, message) {
       // a timeline of statuses. To have a clean implementation we would need to
       // reproduce what is done for statuses for the conversation.
       //
-      // It will add new DMs as new conversations intead of updating existing threads
+      // It will add new DMs as new conversations instead of updating existing threads
       addStatusOrNotification(instanceName, timelineName, JSON.parse(payload).last_status)
       break
   }
diff --git a/src/routes/_api/TimelineStream.js b/src/routes/_api/TimelineStream.js
index 1baef004..31501d7b 100644
--- a/src/routes/_api/TimelineStream.js
+++ b/src/routes/_api/TimelineStream.js
@@ -12,7 +12,7 @@ function getStreamName (timeline) {
       return 'user'
     case 'notifications':
       return 'user:notification'
-    case 'conversations':
+    case 'direct':
       return 'direct'
   }
   if (timeline.startsWith('tag/')) {
diff --git a/src/routes/_api/timelines.js b/src/routes/_api/timelines.js
index 25e9f5c0..bb7f455d 100644
--- a/src/routes/_api/timelines.js
+++ b/src/routes/_api/timelines.js
@@ -12,7 +12,7 @@ function getTimelineUrlPath (timeline) {
       return 'notifications'
     case 'favorites':
       return 'favourites'
-    case 'conversations':
+    case 'direct':
       return 'conversations'
   }
   if (timeline.startsWith('tag/')) {
@@ -24,7 +24,7 @@ function getTimelineUrlPath (timeline) {
   }
 }
 
-export function getTimeline (instanceName, accessToken, timeline, maxId, since, limit) {
+export async function getTimeline (instanceName, accessToken, timeline, maxId, since, limit) {
   let timelineUrlName = getTimelineUrlPath(timeline)
   let url = `${basename(instanceName)}/api/v1/${timelineUrlName}`
 
@@ -63,8 +63,10 @@ export function getTimeline (instanceName, accessToken, timeline, maxId, since,
 
   url += '?' + paramsString(params)
 
-  const timelineRequest = get(url, auth(accessToken), { timeout: DEFAULT_TIMEOUT })
+  const items = await get(url, auth(accessToken), { timeout: DEFAULT_TIMEOUT })
 
-  if (timeline !== 'conversations') return timelineRequest
-  return timelineRequest.then(items => items.map(item => item.last_status))
+  if (timeline === 'direct') {
+    return items.map(item => item.last_status)
+  }
+  return items
 }
diff --git a/src/routes/_components/NavShortcuts.html b/src/routes/_components/NavShortcuts.html
index edbeb590..00f03a81 100644
--- a/src/routes/_components/NavShortcuts.html
+++ b/src/routes/_components/NavShortcuts.html
@@ -4,7 +4,7 @@
 <Shortcut key="g h" on:pressed="goto('/')"/>
 <Shortcut key="g n" on:pressed="goto('/notifications')"/>
 <Shortcut key="g c" on:pressed="goto('/community')"/>
-<Shortcut key="g d" on:pressed="goto('/conversations')"/>
+<Shortcut key="g d" on:pressed="goto('/direct')"/>
 <Shortcut key="s" on:pressed="goto('/search')"/>
 <Shortcut key="h|?" on:pressed="showShortcutHelpDialog()"/>
 <Shortcut key="c" on:pressed="showComposeDialog()"/>
diff --git a/src/routes/_components/status/Status.html b/src/routes/_components/status/Status.html
index ef40955a..df3013b1 100644
--- a/src/routes/_components/status/Status.html
+++ b/src/routes/_components/status/Status.html
@@ -73,6 +73,10 @@
     border-bottom: 1px solid var(--main-border);
   }
 
+  .status-article.status-direct {
+    background-color: var(--status-direct-background);
+  }
+
   .status-article:focus {
     outline: none; /* focus is on the parent instead */
   }
@@ -284,6 +288,7 @@
       className: ({ visibility, timelineType, isStatusInOwnThread, $underlineLinks, $disableTapOnStatus }) => (classname(
         'status-article',
         'shortcut-list-item',
+        timelineType !== 'direct' && visibility === 'direct' && 'status-direct',
         timelineType !== 'search' && 'status-in-timeline',
         isStatusInOwnThread && 'status-in-own-thread',
         $underlineLinks && 'underline-links',
diff --git a/src/routes/_pages/community/index.html b/src/routes/_pages/community/index.html
index 565e4bec..4dc7c4ac 100644
--- a/src/routes/_pages/community/index.html
+++ b/src/routes/_pages/community/index.html
@@ -21,8 +21,8 @@
                   icon="#fa-star"
                   pinnable="true"
     />
-    <PageListItem href="/conversations"
-                  label="Conversations"
+    <PageListItem href="/direct"
+                  label="Direct messages"
                   icon="#fa-envelope"
                   pinnable="true"
     />
@@ -89,6 +89,7 @@
     <a href="/share">Share</a>
     <a href="/federated">Federated</a>
     <a href="/favorites">Favorites</a>
+    <a href="/direct">Conversations</a>
   </div>
 {/if}
 <style>
diff --git a/src/routes/_pages/conversations.html b/src/routes/_pages/direct.html
similarity index 82%
rename from src/routes/_pages/conversations.html
rename to src/routes/_pages/direct.html
index a1d801d0..58631508 100644
--- a/src/routes/_pages/conversations.html
+++ b/src/routes/_pages/direct.html
@@ -1,7 +1,7 @@
 {#if $isUserLoggedIn}
-  <TimelinePage timeline="conversations">
-    {#if $pinnedPage !== '/conversations'}
-      <DynamicPageBanner title="Conversations" icon="#fa-envelope"/>
+  <TimelinePage timeline="direct">
+    {#if $pinnedPage !== '/direct'}
+      <DynamicPageBanner title="Direct messages" icon="#fa-envelope"/>
     {/if}
   </TimelinePage>
 {:else}
diff --git a/src/routes/_store/computations/navComputations.js b/src/routes/_store/computations/navComputations.js
index 8cdf6084..2263199f 100644
--- a/src/routes/_store/computations/navComputations.js
+++ b/src/routes/_store/computations/navComputations.js
@@ -24,12 +24,12 @@ export function navComputations (store) {
           svg: '#fa-globe',
           label: 'Federated'
         }
-      } else if (pinnedPage === '/conversations') {
+      } else if (pinnedPage === '/direct') {
         pinnedPageObject = {
-          name: 'conversations',
-          href: '/conversations',
+          name: 'direct',
+          href: '/direct',
           svg: '#fa-envelope',
-          label: 'Conversations'
+          label: 'Direct messages'
         }
       } else if (pinnedPage === '/favorites') {
         pinnedPageObject = {
diff --git a/src/routes/_store/observers/timelineObservers.js b/src/routes/_store/observers/timelineObservers.js
index 08da9238..6bb06903 100644
--- a/src/routes/_store/observers/timelineObservers.js
+++ b/src/routes/_store/observers/timelineObservers.js
@@ -26,7 +26,7 @@ export function timelineObservers () {
       !(
         timeline !== 'local' &&
         timeline !== 'federated' &&
-        timeline !== 'conversations' &&
+        timeline !== 'direct' &&
         !timeline.startsWith('list/') &&
         !timeline.startsWith('tag/')
       )
diff --git a/src/routes/conversations.html b/src/routes/direct.html
similarity index 77%
rename from src/routes/conversations.html
rename to src/routes/direct.html
index b9ca42bd..a3027c8f 100644
--- a/src/routes/conversations.html
+++ b/src/routes/direct.html
@@ -1,11 +1,11 @@
-<Title name="Favorites" />
+<Title name="Direct messages" />
 
   <LazyPage {pageComponent} {params} />
 
 <script>
   import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
-  import pageComponent from './_pages/conversations.html'
+  import pageComponent from './_pages/direct.html'
 
   export default {
     components: {
diff --git a/tests/fixtures.js b/tests/fixtures.js
index bcd0f7e1..3b899f1b 100644
--- a/tests/fixtures.js
+++ b/tests/fixtures.js
@@ -51,6 +51,11 @@ export const favorites = [
   { content: 'pinned toot 1' }
 ]
 
+export const directMessages = [
+  { content: 'notification of direct message' },
+  { content: 'direct' }
+]
+
 export const quuxStatuses = [
   { content: 'pinned toot 2' },
   { content: 'pinned toot 1' }
diff --git a/tests/spec/003-basic-timeline-spec.js b/tests/spec/003-basic-timeline-spec.js
index fddcb84b..80bdacca 100644
--- a/tests/spec/003-basic-timeline-spec.js
+++ b/tests/spec/003-basic-timeline-spec.js
@@ -4,7 +4,7 @@ import {
   getFirstVisibleStatus, getNthStatus, getUrl, localTimelineNavButton, notificationsNavButton,
   validateTimeline
 } from '../utils'
-import { homeTimeline, notifications, localTimeline, favorites } from '../fixtures'
+import { homeTimeline, notifications, localTimeline, favorites, directMessages } from '../fixtures'
 import { loginAsFoobar } from '../roles'
 
 fixture`003-basic-timeline-spec.js`
@@ -72,3 +72,15 @@ test('Shows favorites', async t => {
 
   await validateTimeline(t, favorites)
 })
+
+test('Shows direct messages', async t => {
+  await loginAsFoobar(t)
+  await t
+    .expect(getUrl()).eql('http://localhost:4002/')
+    .expect(getNthStatus(1).exists).ok({ timeout: 30000 })
+    .click(communityNavButton)
+    .click($('a').withText('Direct messages'))
+    .expect(getUrl()).contains('/direct')
+
+  await validateTimeline(t, directMessages)
+})