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

@@ -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
   }

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/')) {

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
 }

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()"/>

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',

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>

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}

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 = {

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/')
       )

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: {

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' }

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)
+})