Mastodon: compose toot

src/App.vue

@@ -263,7 +263,7 @@ a, .osef
   text-decoration: none
   color: $noneColor
 
-input, select, button
+input, select, button, textarea
   background-color: $backColor
   color: $foreColor
   border: 1px solid $halfColor

src/services/mastodon/Client.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-.client(@scroll.passive="onScroll")
-  .statues
+.client
+  .statues(@scroll.passive="onScroll")
     .header(v-if="hasNotifications") Accueil
     success-loadable.list(:loadable="statues")
       template(v-for="status in statues.get()")
@@ -14,6 +14,23 @@
     .list
       notification(v-for="notification in notifications.get()" :key="notification.id" :notification="notification"
         :showMedia="options.showMedia" @dismiss="onNotificationDismiss" @mark="onStatusMark")
+  .compose-toggle(@click="showCompose = !showCompose") 🖉
+  .compose(v-show="showCompose")
+    textarea.content(v-model="compose.status" placeholder="message")
+    .options
+      .sens
+        label.note(for="sensitive") Sensitive:&nbsp;
+        input(id="sensitive" v-model="compose.sensitive" type="checkbox")
+      .cw
+        input(v-show="compose.sensitive" v-model="compose.spoiler_text" placeholder="content warning")
+      .visibility
+        select(v-model="compose.visibility")
+          option(value="public") ◍
+          option(value="unlisted") 👁
+          option(selected value="private") ⚿
+          option(value="direct") ✉
+        span.note {{ compose.visibility }}
+      button(@click="sendStatus") Toot
 </template>
 
 <script lang="ts">
@@ -27,7 +44,7 @@ import AxiosLodableMore from '@/helpers/loadable/AxiosLoadableMore'
 import { AUTH, getHeaders, getRest } from './Mastodon.vue'
 import Notification from './Notification.vue'
 import Status from './Status.vue'
-import { MarkMessage, Notification as INotification, Options, Status as IStatus } from './Types'
+import { MarkMessage, Notification as INotification, Options, Status as IStatus, StatusPost } from './Types'
 
 @Component({ components: { Status, Notification } })
 export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient) {
@@ -37,6 +54,14 @@ export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient
   statues = new AxiosLodableMore<IStatus[], object>()
   notifications = new AxiosLodable<INotification[], object>()
 
+  showCompose = false
+  compose: StatusPost = {
+    status: '',
+    visibility: 'private',
+    sensitive: false,
+    spoiler_text: ''
+  }
+
   get hasNotifications() {
     if(!this.notifications.isSuccess) {
       return false
@@ -64,6 +89,23 @@ export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient
     return this.catchEmit(this.rest.post(path, options))
   }
 
+  sendStatus() {
+    if(this.compose.status) {
+      const post: StatusPost = {
+        status: this.compose.status,
+        visibility: this.compose.visibility
+      }
+      if(this.compose.sensitive) {
+        post.sensitive = true
+        if(this.compose.spoiler_text) {
+          post.spoiler_text = this.compose.spoiler_text
+        }
+      }
+      this.post('/statuses', post)
+      this.compose.status = ''
+    }
+  }
+
   getTimeline(options = {}) {
     return this.get('/timelines/home', options)
   }
@@ -143,16 +185,38 @@ export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient
 .mastodon
   .client
     display: flex
+    flex-direction: column
     height: 100%
-    overflow-y: auto
+    overflow: hidden
+    position: relative
     .header
       @include main-tile
     .list
       @include group-tile
     .statues
       flex: 1
+      overflow-y: auto
     .notifications
       max-width: 33%
+    .compose-toggle
+      position: absolute
+      bottom: .5em
+      right: 1.5em
+      background-color: $backColor
+      border: 1px solid $darkColor
+      border-radius: 100%
+      height: 2em
+      width: 2em
+      text-align: center
+      line-height: 2em
+    .compose
+      @include main-tile
+      display: flex
+      min-height: 5em
+      textarea
+        flex: 1
+      .options
+        margin-right: 1em
 
     .account
       .name

src/services/mastodon/Status.vue

@@ -38,6 +38,11 @@
     a.favourites(:class="{ colored: status.favourited }" @click.stop.prevent="makeFav(status)")
       span.text-icon ⚝
       | {{ status.favourites_count }}
+    a.visibility
+      template(v-if="status.visibility == 'public'") ◍
+      template(v-else-if="status.visibility == 'unlisted'") 👁
+      template(v-else-if="status.visibility == 'private'") ⚿
+      template(v-else-if="status.visibility == 'direct'") ✉
     a.fil(v-if="status.in_reply_to_id" @click.stop.prevent="showReply(status.in_reply_to_id)")
       | Voir le fil
 </template>

src/services/mastodon/Types.ts

@@ -18,6 +18,17 @@ export interface Options {
   showMedia: boolean
 }
 
+export type VisibilityType = 'public' | 'unlisted' | 'private' | 'direct'
+
+export interface StatusPost {
+  status: string
+  in_reply_to_id?: number
+  media_ids?: number[] // TODO:
+  sensitive?: boolean
+  spoiler_text?: string
+  visibility: VisibilityType
+}
+
 export interface Status {
   id: number
   uri: string
@@ -36,7 +47,8 @@ export interface Status {
   reblog?: Status
   spoiler_text?: string,
   card?: Card,
-  poll?: Poll
+  poll?: Poll,
+  visibility: VisibilityType
 }
 
 export type CardType = 'link' | 'photo' | 'video' | 'rich'