add ability to post a reply

routes/_actions/statuses.js

@@ -35,12 +35,18 @@ export async function postStatus (realm, text, inReplyToId, mediaIds,
     return
   }
 
-  store.set({postingStatus: true})
+  store.set({
+    postingStatus: true,
+    postedStatusForRealm: null
+  })
   try {
     let status = await postStatusToServer(instanceName, accessToken, text,
       inReplyToId, mediaIds, sensitive, spoilerText, visibility)
     addStatusOrNotification(instanceName, 'home', status)
     store.clearComposeData(realm)
+    store.set({
+      postedStatusForRealm: realm
+    })
   } catch (e) {
     toast.say('Unable to post status: ' + (e.message || ''))
   } finally {

routes/_components/compose/ComposeBox.html

@@ -61,6 +61,13 @@
   import { postStatus } from '../../_actions/statuses'
 
   export default {
+    oncreate() {
+      this.observe('postedStatusForRealm', postedStatusForRealm => {
+        if (postedStatusForRealm === this.get('realm')) {
+          window.history.back()
+        }
+      }, {init: false})
+    },
     components: {
       ComposeAuthor,
       ComposeToolbar,
@@ -86,7 +93,8 @@
       },
       overLimit: (length) => length > CHAR_LIMIT,
       contentWarningShown: (composeData) => composeData.contentWarningShown,
-      contentWarning: (composeData) => composeData.contentWarning || ''
+      contentWarning: (composeData) => composeData.contentWarning || '',
+      postedStatusForRealm: ($postedStatusForRealm) => $postedStatusForRealm
     },
     transitions: {
       slide
@@ -101,7 +109,9 @@
         let realm = this.get('realm')
         let mediaIds = media.map(_ => _.data.id)
 
-        /* no await */ postStatus(realm, text, null, mediaIds,
+        let inReplyTo = realm === 'home' ? null : realm
+
+        /* no await */ postStatus(realm, text, inReplyTo, mediaIds,
           sensitive, contentWarning, postPrivacyKey)
       }
     }

routes/_components/status/Status.html

@@ -157,7 +157,9 @@
         return `${$currentInstance}/${timelineType}/${timelineValue}/${notification ? notification.id : ''}/${status.id}`
       },
       originalAccount: (originalStatus) => originalStatus.account,
-      isStatusInOwnThread: (timelineType, timelineValue, statusId) => timelineType === 'status' && timelineValue === statusId,
+      isStatusInOwnThread: (timelineType, timelineValue, statusId) => {
+        return (timelineType === 'status' || timelineType === 'reply') && timelineValue === statusId
+      },
       isStatusInNotification: (status, notification) => notification && notification.status && notification.type !== 'mention' && notification.status.id === status.id,
       spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId],
       visibility: (originalStatus) => originalStatus.visibility,

routes/_components/status/StatusToolbar.html

@@ -2,6 +2,9 @@
   <IconButton
     label="Reply"
     href="#fa-reply"
+    disabled="{{disableReply}}"
+    delegateKey="{{replyKey}}"
+    ref:replyNode
     />
   <IconButton
     label="{{reblogLabel}}"
@@ -41,15 +44,18 @@
   import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
   import { setFavorited } from '../../_actions/favorite'
   import { setReblogged } from '../../_actions/reblog'
+  import { goto } from 'sapper/runtime.js'
 
   export default {
     oncreate() {
       registerClickDelegate(this.get('favoriteKey'), () => this.onFavoriteClick())
       registerClickDelegate(this.get('reblogKey'), () => this.onReblogClick())
+      registerClickDelegate(this.get('replyKey'), () => this.onReplyClick())
     },
     ondestroy() {
       unregisterClickDelegate(this.get('favoriteKey'))
       unregisterClickDelegate(this.get('reblogKey'))
+      unregisterClickDelegate(this.get('replyKey'))
     },
     components: {
       IconButton
@@ -65,6 +71,10 @@
         let statusId = this.get('statusId')
         let reblogged = this.get('reblogged')
         /* no await */ setReblogged(statusId, !reblogged)
+      },
+      onReplyClick() {
+        let statusId = this.get('statusId')
+        goto(`/statuses/${statusId}/reply`)
       }
     },
     computed: {
@@ -105,8 +115,10 @@
         return status.favourited
       },
       statusId: (status) => status.id,
+      disableReply: (statusId, timelineType, timelineValue) => timelineType === 'reply' && statusId === timelineValue,
       favoriteKey: (statusId, timelineType, timelineValue) => `fav-${timelineType}-${timelineValue}-${statusId}`,
       reblogKey: (statusId, timelineType, timelineValue) => `reblog-${timelineType}-${timelineValue}-${statusId}`,
+      replyKey: (statusId, timelineType, timelineValue) => `reply-${timelineType}-${timelineValue}-${statusId}`,
     }
   }
 </script>

routes/statuses/[statusId]/reply.html

@@ -0,0 +1,53 @@
+<:Head>
+  <title>Pinafore – Reply</title>
+</:Head>
+
+<Layout page='reply' >
+  <DynamicPageBanner title=""/>
+  <div class="reply-container">
+    {{#if status}}
+      <Status index="0"
+              length="1"
+              timelineType="reply"
+              timelineValue="{{params.statusId}}"
+              :status
+      />
+      <ComposeBox realm="{{params.statusId}}" />
+    {{else}}
+      <LoadingPage />
+    {{/if}}
+  </div>
+</Layout>
+<style>
+  .reply-container {
+    position: relative;
+    margin-top: 20px;
+    min-height: 60vh;
+  }
+</style>
+<script>
+  import Layout from '../../_components/Layout.html'
+  import { store } from '../../_store/store.js'
+  import DynamicPageBanner from '../../_components/DynamicPageBanner.html'
+  import LoadingPage from '../../_components/LoadingPage.html'
+  import ComposeBox from '../../_components/compose/ComposeBox.html'
+  import Status from '../../_components/status/Status.html'
+  import { database } from '../../_database/database'
+
+  export default {
+    async oncreate() {
+      let statusId = this.get('params').statusId
+      let instanceName = this.store.get('currentInstance')
+      let status  = await database.getStatus(instanceName, statusId)
+      this.set({status})
+    },
+    store: () => store,
+    components: {
+      Layout,
+      DynamicPageBanner,
+      LoadingPage,
+      ComposeBox,
+      Status
+    }
+  }
+</script>