From 98ceb35b0f410bbbea0775a368f47beca977b839 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 21 Jan 2023 16:26:49 +0900
Subject: [PATCH 1/9] refs #3771 Add compose window to footer

---
 src/renderer/components/TimelineSpace.vue     | 28 ++++++-
 .../components/TimelineSpace/Compose.vue      | 82 +++++++++++++++++++
 .../TimelineSpace/Contents/Home.vue           | 44 ----------
 3 files changed, 107 insertions(+), 47 deletions(-)
 create mode 100644 src/renderer/components/TimelineSpace/Compose.vue

diff --git a/src/renderer/components/TimelineSpace.vue b/src/renderer/components/TimelineSpace.vue
index f1b5b763..8e67e60a 100644
--- a/src/renderer/components/TimelineSpace.vue
+++ b/src/renderer/components/TimelineSpace.vue
@@ -11,7 +11,13 @@
       <header class="header" style="-webkit-app-region: drag">
         <header-menu></header-menu>
       </header>
-      <contents></contents>
+      <div class="contents-wrapper" ref="contentsRef">
+        <contents />
+      </div>
+      <div class="compose-wrapper">
+        <compose />
+        <resize-observer @notify="composeResized" />
+      </div>
     </div>
     <modals></modals>
     <receive-drop v-show="droppableVisible"></receive-drop>
@@ -26,6 +32,7 @@ import { useI18next } from 'vue3-i18next'
 import SideMenu from './TimelineSpace/SideMenu.vue'
 import HeaderMenu from './TimelineSpace/HeaderMenu.vue'
 import Contents from './TimelineSpace/Contents.vue'
+import Compose from './TimelineSpace/Compose.vue'
 import Modals from './TimelineSpace/Modals.vue'
 import Mousetrap from 'mousetrap'
 import ReceiveDrop from './TimelineSpace/ReceiveDrop.vue'
@@ -42,7 +49,7 @@ import { ACTION_TYPES as NEW_TOOT_ACTION } from '@/store/TimelineSpace/Modals/Ne
 
 export default defineComponent({
   name: 'timeline-space',
-  components: { SideMenu, HeaderMenu, Modals, Contents, ReceiveDrop },
+  components: { SideMenu, HeaderMenu, Modals, Contents, ReceiveDrop, Compose },
   setup() {
     const space = 'TimelineSpace'
     const store = useStore()
@@ -51,6 +58,7 @@ export default defineComponent({
 
     const dropTarget = ref<any>(null)
     const droppableVisible = ref<boolean>(false)
+    const contentsRef = ref<HTMLElement | null>(null)
 
     const loading = computed(() => store.state.TimelineSpace.loading)
     const collapse = computed(() => store.state.TimelineSpace.SideMenu.collapse)
@@ -155,10 +163,18 @@ export default defineComponent({
       e.preventDefault()
     }
 
+    const composeResized = (event: { width: number; height: number }) => {
+      if (contentsRef.value) {
+        contentsRef.value.style.setProperty('height', `calc(100% - ${event.height}px)`)
+      }
+    }
+
     return {
       loading,
       collapse,
-      droppableVisible
+      droppableVisible,
+      composeResized,
+      contentsRef
     }
   }
 })
@@ -169,6 +185,12 @@ export default defineComponent({
   height: 100%;
 }
 
+.compose-wrapper {
+  position: sticky;
+  bottom: 0;
+  padding: 0 12px 18px 12px;
+}
+
 .page {
   margin-left: 180px;
   height: 100%;
diff --git a/src/renderer/components/TimelineSpace/Compose.vue b/src/renderer/components/TimelineSpace/Compose.vue
new file mode 100644
index 00000000..a9967a98
--- /dev/null
+++ b/src/renderer/components/TimelineSpace/Compose.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="compose">
+    <el-form :model="form" class="compose-form">
+      <el-input v-model="form.status" type="textarea" :autosize="{ minRows: 2 }" :placeholder="$t('modals.new_toot.status')" />
+      <div class="form-footer">
+        <el-button-group class="tool-buttons">
+          <el-button link size="default">
+            <font-awesome-icon icon="camera" />
+          </el-button>
+          <el-button link size="default" disabled>
+            <font-awesome-icon icon="square-poll-horizontal" />
+          </el-button>
+          <el-button link size="default">
+            <font-awesome-icon icon="globe" />
+          </el-button>
+          <el-button link size="default">
+            <font-awesome-icon :icon="['far', 'face-smile']" />
+          </el-button>
+        </el-button-group>
+        <div class="actions-group">
+          <span>500</span>
+          <el-button type="primary"> {{ $t('modals.new_toot.toot') }} </el-button>
+        </div>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive } from 'vue'
+
+export default defineComponent({
+  name: 'Compose',
+  setup() {
+    const form = reactive({
+      status: ''
+    })
+
+    return {
+      form
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.compose {
+  height: auto;
+  width: 100%;
+  box-sizing: border-box;
+
+  .compose-form {
+    height: calc(100% - 24px);
+  }
+
+  .compose-form :deep(.el-textarea__inner) {
+    color: var(--theme-primary-color);
+    background-color: var(--theme-background-color);
+    box-shadow: 0 0 0 1px var(--theme-border-color, var(--theme-border-color)) inset;
+  }
+
+  .form-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 4px;
+
+    .tool-buttons {
+      button {
+        margin-right: 8px;
+      }
+    }
+
+    .actions-group {
+      span {
+        margin-right: 8px;
+        color: var(--theme-secondary-color);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue
index 0a88ea50..5f9a0a8d 100644
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Home.vue
@@ -27,12 +27,6 @@
         </template>
       </template>
     </DynamicScroller>
-
-    <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
-      <el-button type="primary" @click="upper" circle>
-        <font-awesome-icon icon="angle-up" class="upper-icon" />
-      </el-button>
-    </div>
   </div>
 </template>
 
@@ -204,10 +198,6 @@ export default defineComponent({
           }, 500)
         })
     }
-    const upper = () => {
-      scroller.value.scrollToItem(0)
-      focusedId.value = null
-    }
     const focusNext = () => {
       if (currentFocusedIndex.value === -1) {
         focusedId.value = timeline.value[0].uri + timeline.value[0].id
@@ -245,7 +235,6 @@ export default defineComponent({
       focusToot,
       openSideBar,
       heading,
-      upper,
       account
     }
   }
@@ -269,39 +258,6 @@ export default defineComponent({
   .loading-card:empty {
     height: 0;
   }
-
-  .upper {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    transition: all 0.5s;
-  }
-
-  .upper-with-side-bar {
-    position: fixed;
-    bottom: 20px;
-    right: calc(20px + var(--current-sidebar-width));
-    transition: all 0.5s;
-  }
-
-  .upper-icon {
-    padding: 3px;
-  }
-
-  .unread {
-    position: fixed;
-    right: 24px;
-    top: 52px;
-    background-color: rgba(0, 0, 0, 0.6);
-    color: #ffffff;
-    padding: 4px 8px;
-    border-radius: 0 0 2px 2px;
-    z-index: 1;
-
-    &:empty {
-      display: none;
-    }
-  }
 }
 </style>
 

From 135ed92b56b205bfb067cdc5f9d84d87bb941e12 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 21 Jan 2023 21:09:46 +0900
Subject: [PATCH 2/9] refs #3771 Post simple status

---
 .../components/TimelineSpace/Compose.vue      | 43 +++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Compose.vue b/src/renderer/components/TimelineSpace/Compose.vue
index a9967a98..e87c2868 100644
--- a/src/renderer/components/TimelineSpace/Compose.vue
+++ b/src/renderer/components/TimelineSpace/Compose.vue
@@ -19,7 +19,7 @@
         </el-button-group>
         <div class="actions-group">
           <span>500</span>
-          <el-button type="primary"> {{ $t('modals.new_toot.toot') }} </el-button>
+          <el-button type="primary" @click="post"> {{ $t('modals.new_toot.toot') }} </el-button>
         </div>
       </div>
     </el-form>
@@ -27,17 +27,54 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue'
+import { defineComponent, reactive, computed, ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import generator, { MegalodonInterface } from 'megalodon'
+import { useStore } from '@/store'
+import { MyWindow } from '~/src/types/global'
+import { LocalAccount } from '~/src/types/localAccount'
+import { LocalServer } from '~/src/types/localServer'
 
 export default defineComponent({
   name: 'Compose',
   setup() {
+    const route = useRoute()
+    const store = useStore()
+    const win = (window as any) as MyWindow
+
+    const id = computed(() => parseInt(route.params.id as string))
+    const userAgent = computed(() => store.state.App.userAgent)
+
+    const client = ref<MegalodonInterface | null>(null)
     const form = reactive({
       status: ''
     })
 
+    onMounted(async () => {
+      const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
+      const c = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
+      client.value = c
+    })
+
+    const post = async () => {
+      if (!client.value) {
+        return
+      }
+      try {
+        await client.value.postStatus(form.status)
+        clear()
+      } catch (err) {
+        console.error(err)
+      }
+    }
+
+    const clear = () => {
+      form.status = ''
+    }
+
     return {
-      form
+      form,
+      post
     }
   }
 })

From a7d80c9d68f99e93b56be421b5332c143446b50c Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 21 Jan 2023 22:08:16 +0900
Subject: [PATCH 3/9] refs #3771 Attach media files

---
 .../components/TimelineSpace/Compose.vue      | 111 +++++++++++++++++-
 1 file changed, 106 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Compose.vue b/src/renderer/components/TimelineSpace/Compose.vue
index e87c2868..17d43811 100644
--- a/src/renderer/components/TimelineSpace/Compose.vue
+++ b/src/renderer/components/TimelineSpace/Compose.vue
@@ -2,11 +2,18 @@
   <div class="compose">
     <el-form :model="form" class="compose-form">
       <el-input v-model="form.status" type="textarea" :autosize="{ minRows: 2 }" :placeholder="$t('modals.new_toot.status')" />
+      <div class="preview" ref="previewRef">
+        <div class="image-wrapper" v-for="media in attachments" :key="media.id">
+          <img :src="media.preview_url" class="preview-image" />
+          <el-button class="remove-image" link @click="removeAttachment(media)"><font-awesome-icon icon="circle-xmark" /></el-button>
+        </div>
+      </div>
       <div class="form-footer">
         <el-button-group class="tool-buttons">
-          <el-button link size="default">
+          <el-button link size="default" @click="selectImage">
             <font-awesome-icon icon="camera" />
           </el-button>
+          <input name="image" type="file" class="image-input" ref="imageRef" @change="onChangeImage" />
           <el-button link size="default" disabled>
             <font-awesome-icon icon="square-poll-horizontal" />
           </el-button>
@@ -19,7 +26,7 @@
         </el-button-group>
         <div class="actions-group">
           <span>500</span>
-          <el-button type="primary" @click="post"> {{ $t('modals.new_toot.toot') }} </el-button>
+          <el-button type="primary" @click="post" :loading="loading"> {{ $t('modals.new_toot.toot') }} </el-button>
         </div>
       </div>
     </el-form>
@@ -29,7 +36,7 @@
 <script lang="ts">
 import { defineComponent, reactive, computed, ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import generator, { MegalodonInterface } from 'megalodon'
+import generator, { Entity, MegalodonInterface } from 'megalodon'
 import { useStore } from '@/store'
 import { MyWindow } from '~/src/types/global'
 import { LocalAccount } from '~/src/types/localAccount'
@@ -49,6 +56,9 @@ export default defineComponent({
     const form = reactive({
       status: ''
     })
+    const imageRef = ref<any>(null)
+    const attachments = ref<Array<Entity.Attachment | Entity.AsyncAttachment>>([])
+    const loading = ref<boolean>(false)
 
     onMounted(async () => {
       const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
@@ -60,21 +70,69 @@ export default defineComponent({
       if (!client.value) {
         return
       }
+      let options = {}
       try {
-        await client.value.postStatus(form.status)
+        loading.value = true
+        if (attachments.value.length > 0) {
+          options = Object.assign(options, {
+            media_ids: attachments.value.map(m => m.id)
+          })
+        }
+        await client.value.postStatus(form.status, options)
         clear()
       } catch (err) {
         console.error(err)
+      } finally {
+        loading.value = false
       }
     }
 
     const clear = () => {
       form.status = ''
+      attachments.value = []
+    }
+
+    const selectImage = () => {
+      imageRef?.value?.click()
+    }
+
+    const onChangeImage = async (e: Event) => {
+      const target = e.target as HTMLInputElement
+      const file = target.files?.item(0)
+      if (file === null || file === undefined) {
+        return
+      }
+      await uploadImage(file)
+    }
+
+    const uploadImage = async (file: File) => {
+      if (!client.value) {
+        return
+      }
+      try {
+        loading.value = true
+        const res = await client.value.uploadMedia(file)
+        attachments.value = [...attachments.value, res.data]
+      } catch (err) {
+        console.error(err)
+      } finally {
+        loading.value = false
+      }
+    }
+
+    const removeAttachment = async (attachment: Entity.Attachment | Entity.AsyncAttachment) => {
+      attachments.value = attachments.value.filter(e => e.id !== attachment.id)
     }
 
     return {
       form,
-      post
+      post,
+      imageRef,
+      selectImage,
+      onChangeImage,
+      loading,
+      attachments,
+      removeAttachment
     }
   }
 })
@@ -96,6 +154,45 @@ export default defineComponent({
     box-shadow: 0 0 0 1px var(--theme-border-color, var(--theme-border-color)) inset;
   }
 
+  .preview {
+    box-sizing: border-box;
+    display: flex;
+    flex-flow: row wrap;
+
+    .image-wrapper {
+      position: relative;
+      display: flex;
+      min-width: 10%;
+      height: 80px;
+      margin: 4px;
+
+      .preview-image {
+        width: 80px;
+        height: 80px;
+        object-fit: cover;
+        border: 0;
+        border-radius: 8px;
+      }
+
+      .remove-image {
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        padding: 0;
+        cursor: pointer;
+        font-size: 1.5rem;
+
+        .fa-icon {
+          font-size: 0.9rem;
+          width: auto;
+          height: 1em;
+          max-width: 100%;
+          max-height: 100%;
+        }
+      }
+    }
+  }
+
   .form-footer {
     display: flex;
     justify-content: space-between;
@@ -106,6 +203,10 @@ export default defineComponent({
       button {
         margin-right: 8px;
       }
+
+      .image-input {
+        display: none;
+      }
     }
 
     .actions-group {

From 226741f651917d4cc4a64029b664cbc0f4b07e6e Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 22 Jan 2023 00:56:01 +0900
Subject: [PATCH 4/9] refs #3771 Add emoji picker

---
 .../components/TimelineSpace/Compose.vue      | 89 +++++++++++++++++--
 1 file changed, 82 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Compose.vue b/src/renderer/components/TimelineSpace/Compose.vue
index 17d43811..4bb7a6fa 100644
--- a/src/renderer/components/TimelineSpace/Compose.vue
+++ b/src/renderer/components/TimelineSpace/Compose.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="compose">
     <el-form :model="form" class="compose-form">
-      <el-input v-model="form.status" type="textarea" :autosize="{ minRows: 2 }" :placeholder="$t('modals.new_toot.status')" />
+      <el-input
+        v-model="form.status"
+        type="textarea"
+        :autosize="{ minRows: 2 }"
+        :placeholder="$t('modals.new_toot.status')"
+        ref="statusRef"
+      />
       <div class="preview" ref="previewRef">
         <div class="image-wrapper" v-for="media in attachments" :key="media.id">
           <img :src="media.preview_url" class="preview-image" />
@@ -20,9 +26,24 @@
           <el-button link size="default">
             <font-awesome-icon icon="globe" />
           </el-button>
-          <el-button link size="default">
-            <font-awesome-icon :icon="['far', 'face-smile']" />
-          </el-button>
+          <el-popover placement="top" width="0" :visible="emojiVisible" popper-class="new-toot-emoji-picker">
+            <picker
+              v-if="emojiData !== null"
+              :data="emojiData"
+              set="twitter"
+              :autoFocus="true"
+              @select="selectEmoji"
+              :perLine="7"
+              :emojiSize="24"
+              :showPreview="false"
+              :emojiTooltip="true"
+            />
+            <template #reference>
+              <el-button link size="default" @click="emojiVisible = !emojiVisible">
+                <font-awesome-icon :icon="['far', 'face-smile']" />
+              </el-button>
+            </template>
+          </el-popover>
         </el-button-group>
         <div class="actions-group">
           <span>500</span>
@@ -37,6 +58,8 @@
 import { defineComponent, reactive, computed, ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
+import emojiDefault from 'emoji-mart-vue-fast/data/all.json'
+import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
 import { useStore } from '@/store'
 import { MyWindow } from '~/src/types/global'
 import { LocalAccount } from '~/src/types/localAccount'
@@ -44,6 +67,7 @@ import { LocalServer } from '~/src/types/localServer'
 
 export default defineComponent({
   name: 'Compose',
+  components: { Picker },
   setup() {
     const route = useRoute()
     const store = useStore()
@@ -51,19 +75,42 @@ export default defineComponent({
 
     const id = computed(() => parseInt(route.params.id as string))
     const userAgent = computed(() => store.state.App.userAgent)
-
+    const emojiData = ref<EmojiIndex | null>(null)
     const client = ref<MegalodonInterface | null>(null)
     const form = reactive({
       status: ''
     })
-    const imageRef = ref<any>(null)
     const attachments = ref<Array<Entity.Attachment | Entity.AsyncAttachment>>([])
     const loading = ref<boolean>(false)
+    const emojiVisible = ref<boolean>(false)
+    const imageRef = ref<any>(null)
+    const statusRef = ref<any>(null)
 
     onMounted(async () => {
       const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
       const c = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
       client.value = c
+
+      const res = await c.getInstanceCustomEmojis()
+      const customEmojis = res.data
+        .map(emoji => {
+          return {
+            name: `:${emoji.shortcode}:`,
+            image: emoji.url
+          }
+        })
+        .filter((e, i, array) => {
+          return array.findIndex(ar => e.name === ar.name) === i
+        })
+        .map(e => ({
+          name: e.name,
+          short_names: [e.name],
+          text: e.name,
+          emoticons: [],
+          keywords: [e.name],
+          imageUrl: e.image
+        }))
+      emojiData.value = new EmojiIndex(emojiDefault, { custom: customEmojis })
     })
 
     const post = async () => {
@@ -124,6 +171,19 @@ export default defineComponent({
       attachments.value = attachments.value.filter(e => e.id !== attachment.id)
     }
 
+    const selectEmoji = emoji => {
+      if (!statusRef.value) {
+        return
+      }
+      const current = statusRef.value?.textarea.selectionStart
+      if (emoji.native) {
+        form.status = form.status.slice(0, current) + emoji.native + form.status.slice(current)
+      } else {
+        form.status = form.status.slice(0, current) + emoji.name + form.status.slice(current)
+      }
+      emojiVisible.value = false
+    }
+
     return {
       form,
       post,
@@ -132,7 +192,11 @@ export default defineComponent({
       onChangeImage,
       loading,
       attachments,
-      removeAttachment
+      removeAttachment,
+      emojiData,
+      selectEmoji,
+      statusRef,
+      emojiVisible
     }
   }
 })
@@ -218,3 +282,14 @@ export default defineComponent({
   }
 }
 </style>
+
+<style lang="scss">
+.new-toot-emoji-picker {
+  background-color: transparent !important;
+  border: none !important;
+
+  .el-popper__arrow {
+    display: none;
+  }
+}
+</style>

From 732c6d4e8f894677cdbc4fa257c202072bbd1bc1 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 22 Jan 2023 01:19:47 +0900
Subject: [PATCH 5/9] refs #3771 Add spoiler

---
 .../components/TimelineSpace/Compose.vue      | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Compose.vue b/src/renderer/components/TimelineSpace/Compose.vue
index 4bb7a6fa..fd9a3892 100644
--- a/src/renderer/components/TimelineSpace/Compose.vue
+++ b/src/renderer/components/TimelineSpace/Compose.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="compose">
     <el-form :model="form" class="compose-form">
+      <el-input v-model="form.spoiler" class="spoiler" :placeholder="$t('modals.new_toot.cw')" v-if="cw" />
       <el-input
         v-model="form.status"
         type="textarea"
@@ -44,6 +45,7 @@
               </el-button>
             </template>
           </el-popover>
+          <el-button link size="default" @click="cw = !cw"> CW </el-button>
         </el-button-group>
         <div class="actions-group">
           <span>500</span>
@@ -78,9 +80,11 @@ export default defineComponent({
     const emojiData = ref<EmojiIndex | null>(null)
     const client = ref<MegalodonInterface | null>(null)
     const form = reactive({
-      status: ''
+      status: '',
+      spoiler: ''
     })
     const attachments = ref<Array<Entity.Attachment | Entity.AsyncAttachment>>([])
+    const cw = ref<boolean>(false)
     const loading = ref<boolean>(false)
     const emojiVisible = ref<boolean>(false)
     const imageRef = ref<any>(null)
@@ -125,6 +129,12 @@ export default defineComponent({
             media_ids: attachments.value.map(m => m.id)
           })
         }
+        if (form.spoiler.length > 0) {
+          options = Object.assign(options, {
+            spoiler_text: form.spoiler
+          })
+        }
+
         await client.value.postStatus(form.status, options)
         clear()
       } catch (err) {
@@ -136,7 +146,10 @@ export default defineComponent({
 
     const clear = () => {
       form.status = ''
+      form.spoiler = ''
       attachments.value = []
+      cw.value = false
+      emojiVisible.value = false
     }
 
     const selectImage = () => {
@@ -196,7 +209,8 @@ export default defineComponent({
       emojiData,
       selectEmoji,
       statusRef,
-      emojiVisible
+      emojiVisible,
+      cw
     }
   }
 })
@@ -210,6 +224,10 @@ export default defineComponent({
 
   .compose-form {
     height: calc(100% - 24px);
+
+    .spoiler {
+      padding-bottom: 8px;
+    }
   }
 
   .compose-form :deep(.el-textarea__inner) {
@@ -218,6 +236,15 @@ export default defineComponent({
     box-shadow: 0 0 0 1px var(--theme-border-color, var(--theme-border-color)) inset;
   }
 
+  .compose-form :deep(.el-input__wrapper) {
+    background-color: var(--theme-background-color);
+    box-shadow: 0 0 0 1px var(--theme-border-color, var(--theme-border-color)) inset;
+  }
+
+  .compose-form :deep(.el-input__inner) {
+    color: var(--theme-primary-color);
+  }
+
   .preview {
     box-sizing: border-box;
     display: flex;

From f6bba5f38f04a36906958cffeef9c3336be0e7b2 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 22 Jan 2023 01:35:42 +0900
Subject: [PATCH 6/9] refs #3771 Specify visibility

---
 .../components/TimelineSpace/Compose.vue      | 66 +++++++++++++++++--
 1 file changed, 61 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Compose.vue b/src/renderer/components/TimelineSpace/Compose.vue
index fd9a3892..9409c768 100644
--- a/src/renderer/components/TimelineSpace/Compose.vue
+++ b/src/renderer/components/TimelineSpace/Compose.vue
@@ -24,9 +24,33 @@
           <el-button link size="default" disabled>
             <font-awesome-icon icon="square-poll-horizontal" />
           </el-button>
-          <el-button link size="default">
-            <font-awesome-icon icon="globe" />
-          </el-button>
+          <div>
+            <el-dropdown trigger="click" @command="changeVisibility">
+              <el-button size="default" link :title="$t('modals.new_toot.footer.change_visibility')">
+                <font-awesome-icon :icon="visibilityIcon" />
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item :command="visibilityList.Public.key">
+                    <font-awesome-icon icon="globe" class="privacy-icon" />
+                    {{ $t(visibilityList.Public.name) }}
+                  </el-dropdown-item>
+                  <el-dropdown-item :command="visibilityList.Unlisted.key">
+                    <font-awesome-icon icon="unlock" class="privacy-icon" />
+                    {{ $t(visibilityList.Unlisted.name) }}
+                  </el-dropdown-item>
+                  <el-dropdown-item :command="visibilityList.Private.key">
+                    <font-awesome-icon icon="lock" class="privacy-icon" />
+                    {{ $t(visibilityList.Private.name) }}
+                  </el-dropdown-item>
+                  <el-dropdown-item :command="visibilityList.Direct.key">
+                    <font-awesome-icon icon="envelope" class="privacy-icon" size="sm" />
+                    {{ $t(visibilityList.Direct.name) }}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
           <el-popover placement="top" width="0" :visible="emojiVisible" popper-class="new-toot-emoji-picker">
             <picker
               v-if="emojiData !== null"
@@ -66,6 +90,7 @@ import { useStore } from '@/store'
 import { MyWindow } from '~/src/types/global'
 import { LocalAccount } from '~/src/types/localAccount'
 import { LocalServer } from '~/src/types/localServer'
+import visibilityList from '~/src/constants/visibility'
 
 export default defineComponent({
   name: 'Compose',
@@ -77,6 +102,21 @@ export default defineComponent({
 
     const id = computed(() => parseInt(route.params.id as string))
     const userAgent = computed(() => store.state.App.userAgent)
+    const visibilityIcon = computed(() => {
+      switch (visibility.value) {
+        case visibilityList.Public.key:
+          return 'globe'
+        case visibilityList.Unlisted.key:
+          return 'unlock'
+        case visibilityList.Private.key:
+          return 'lock'
+        case visibilityList.Direct.key:
+          return 'envelope'
+        default:
+          return 'globe'
+      }
+    })
+
     const emojiData = ref<EmojiIndex | null>(null)
     const client = ref<MegalodonInterface | null>(null)
     const form = reactive({
@@ -85,6 +125,7 @@ export default defineComponent({
     })
     const attachments = ref<Array<Entity.Attachment | Entity.AsyncAttachment>>([])
     const cw = ref<boolean>(false)
+    const visibility = ref(visibilityList.Public.key)
     const loading = ref<boolean>(false)
     const emojiVisible = ref<boolean>(false)
     const imageRef = ref<any>(null)
@@ -121,7 +162,9 @@ export default defineComponent({
       if (!client.value) {
         return
       }
-      let options = {}
+      let options = {
+        visibility: visibility.value
+      }
       try {
         loading.value = true
         if (attachments.value.length > 0) {
@@ -197,6 +240,10 @@ export default defineComponent({
       emojiVisible.value = false
     }
 
+    const changeVisibility = (value: 'public' | 'unlisted' | 'private' | 'direct') => {
+      visibility.value = value
+    }
+
     return {
       form,
       post,
@@ -210,7 +257,10 @@ export default defineComponent({
       selectEmoji,
       statusRef,
       emojiVisible,
-      cw
+      cw,
+      visibilityList,
+      visibilityIcon,
+      changeVisibility
     }
   }
 })
@@ -291,6 +341,8 @@ export default defineComponent({
     margin-top: 4px;
 
     .tool-buttons {
+      display: flex;
+
       button {
         margin-right: 8px;
       }
@@ -308,6 +360,10 @@ export default defineComponent({
     }
   }
 }
+
+.privacy-icon {
+  margin-right: 4px;
+}
 </style>
 
 <style lang="scss">

From c431104f14be5b41e4fe94c6cf939b147259f3fb Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 22 Jan 2023 01:50:18 +0900
Subject: [PATCH 7/9] refs #3771 Specify NSFW

---
 src/config/locales/en/translation.json            |  2 +-
 src/renderer/components/TimelineSpace/Compose.vue | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/config/locales/en/translation.json b/src/config/locales/en/translation.json
index 97453110..565305cb 100644
--- a/src/config/locales/en/translation.json
+++ b/src/config/locales/en/translation.json
@@ -294,7 +294,7 @@
         "add_image": "Add images",
         "poll": "Add a poll",
         "change_visibility": "Change visibility",
-        "change_sensitive": "Change sensitive",
+        "change_sensitive": "Mark media as sensitive",
         "add_cw": "Add content warning",
         "pined_hashtag": "Pin the hashtag"
       },
diff --git a/src/renderer/components/TimelineSpace/Compose.vue b/src/renderer/components/TimelineSpace/Compose.vue
index 9409c768..b425b03f 100644
--- a/src/renderer/components/TimelineSpace/Compose.vue
+++ b/src/renderer/components/TimelineSpace/Compose.vue
@@ -15,6 +15,9 @@
           <el-button class="remove-image" link @click="removeAttachment(media)"><font-awesome-icon icon="circle-xmark" /></el-button>
         </div>
       </div>
+      <div class="nsfw" v-if="attachments.length > 0">
+        <el-checkbox v-model="nsfw">{{ $t('modals.new_toot.footer.change_sensitive') }}</el-checkbox>
+      </div>
       <div class="form-footer">
         <el-button-group class="tool-buttons">
           <el-button link size="default" @click="selectImage">
@@ -126,6 +129,7 @@ export default defineComponent({
     const attachments = ref<Array<Entity.Attachment | Entity.AsyncAttachment>>([])
     const cw = ref<boolean>(false)
     const visibility = ref(visibilityList.Public.key)
+    const nsfw = ref<boolean>(false)
     const loading = ref<boolean>(false)
     const emojiVisible = ref<boolean>(false)
     const imageRef = ref<any>(null)
@@ -171,6 +175,11 @@ export default defineComponent({
           options = Object.assign(options, {
             media_ids: attachments.value.map(m => m.id)
           })
+          if (nsfw.value) {
+            options = Object.assign(options, {
+              sensitive: nsfw.value
+            })
+          }
         }
         if (form.spoiler.length > 0) {
           options = Object.assign(options, {
@@ -260,7 +269,8 @@ export default defineComponent({
       cw,
       visibilityList,
       visibilityIcon,
-      changeVisibility
+      changeVisibility,
+      nsfw
     }
   }
 })

From 6c38c0dddf74c6cf81c57bfe99948b002eb87256 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 22 Jan 2023 13:01:08 +0900
Subject: [PATCH 8/9] refs #3771 Set reply

---
 .../components/TimelineSpace/Compose.vue      | 18 ++++++++-
 src/renderer/components/organisms/Toot.vue    |  7 +++-
 src/renderer/store/TimelineSpace.ts           |  5 ++-
 src/renderer/store/TimelineSpace/Compose.ts   | 37 +++++++++++++++++++
 4 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 src/renderer/store/TimelineSpace/Compose.ts

diff --git a/src/renderer/components/TimelineSpace/Compose.vue b/src/renderer/components/TimelineSpace/Compose.vue
index b425b03f..1d43b672 100644
--- a/src/renderer/components/TimelineSpace/Compose.vue
+++ b/src/renderer/components/TimelineSpace/Compose.vue
@@ -84,7 +84,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed, ref, onMounted } from 'vue'
+import { defineComponent, reactive, computed, ref, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
 import emojiDefault from 'emoji-mart-vue-fast/data/all.json'
@@ -94,6 +94,7 @@ import { MyWindow } from '~/src/types/global'
 import { LocalAccount } from '~/src/types/localAccount'
 import { LocalServer } from '~/src/types/localServer'
 import visibilityList from '~/src/constants/visibility'
+import { MUTATION_TYPES } from '@/store/TimelineSpace/Compose'
 
 export default defineComponent({
   name: 'Compose',
@@ -101,6 +102,7 @@ export default defineComponent({
   setup() {
     const route = useRoute()
     const store = useStore()
+    const space = 'TimelineSpace/Compose'
     const win = (window as any) as MyWindow
 
     const id = computed(() => parseInt(route.params.id as string))
@@ -130,6 +132,8 @@ export default defineComponent({
     const cw = ref<boolean>(false)
     const visibility = ref(visibilityList.Public.key)
     const nsfw = ref<boolean>(false)
+    const inReplyTo = computed(() => store.state.TimelineSpace.Compose.inReplyTo)
+
     const loading = ref<boolean>(false)
     const emojiVisible = ref<boolean>(false)
     const imageRef = ref<any>(null)
@@ -162,6 +166,12 @@ export default defineComponent({
       emojiData.value = new EmojiIndex(emojiDefault, { custom: customEmojis })
     })
 
+    watch(inReplyTo, current => {
+      if (current) {
+        form.status = `@${current.acct} `
+      }
+    })
+
     const post = async () => {
       if (!client.value) {
         return
@@ -186,6 +196,11 @@ export default defineComponent({
             spoiler_text: form.spoiler
           })
         }
+        if (inReplyTo.value) {
+          options = Object.assign(options, {
+            in_reply_to_id: inReplyTo.value?.id
+          })
+        }
 
         await client.value.postStatus(form.status, options)
         clear()
@@ -202,6 +217,7 @@ export default defineComponent({
       attachments.value = []
       cw.value = false
       emojiVisible.value = false
+      store.commit(`${space}/${MUTATION_TYPES.CLEAR_REPLY_TO_ID}`)
     }
 
     const selectImage = () => {
diff --git a/src/renderer/components/organisms/Toot.vue b/src/renderer/components/organisms/Toot.vue
index 63b842c8..e14c269d 100644
--- a/src/renderer/components/organisms/Toot.vue
+++ b/src/renderer/components/organisms/Toot.vue
@@ -255,9 +255,9 @@ import { usernameWithStyle, accountNameWithStyle } from '@/utils/username'
 import { parseDatetime } from '@/utils/datetime'
 import { MUTATION_TYPES as SIDEBAR_MUTATION, ACTION_TYPES as SIDEBAR_ACTION } from '@/store/TimelineSpace/Contents/SideBar'
 import { ACTION_TYPES as PROFILE_ACTION } from '@/store/TimelineSpace/Contents/SideBar/AccountProfile'
-import { ACTION_TYPES as NEW_ACTION } from '@/store/TimelineSpace/Modals/NewToot'
 import { ACTION_TYPES as DETAIL_ACTION } from '@/store/TimelineSpace/Contents/SideBar/TootDetail'
 import { ACTION_TYPES as REPORT_ACTION } from '@/store/TimelineSpace/Modals/Report'
+import { MUTATION_TYPES as COMPOSE_MUTATION } from '@/store/TimelineSpace/Compose'
 import { ACTION_TYPES as MUTE_ACTION } from '@/store/TimelineSpace/Modals/MuteConfirm'
 import { ACTION_TYPES as VIEWER_ACTION } from '@/store/TimelineSpace/Modals/ImageViewer'
 import { ACTION_TYPES } from '@/store/organisms/Toot'
@@ -477,7 +477,10 @@ export default defineComponent({
       }
     }
     const openReply = () => {
-      store.dispatch(`TimelineSpace/Modals/NewToot/${NEW_ACTION.OPEN_REPLY}`, originalMessage.value)
+      store.commit(`TimelineSpace/Compose/${COMPOSE_MUTATION.SET_REPLY_TO_ID}`, {
+        acct: originalMessage.value.account.acct,
+        id: originalMessage.value.id
+      })
     }
     const openDetail = (message: Entity.Status) => {
       store.dispatch(`TimelineSpace/Contents/SideBar/${SIDEBAR_ACTION.OPEN_TOOT_COMPONENT}`)
diff --git a/src/renderer/store/TimelineSpace.ts b/src/renderer/store/TimelineSpace.ts
index a55bc87b..fc4944ea 100644
--- a/src/renderer/store/TimelineSpace.ts
+++ b/src/renderer/store/TimelineSpace.ts
@@ -11,6 +11,7 @@ import { MyWindow } from '~/src/types/global'
 import { LocalServer } from '~/src/types/localServer'
 import { Setting } from '~/src/types/setting'
 import { DefaultSetting } from '~/src/constants/initializer/setting'
+import Compose, { ComposeState } from './TimelineSpace/Compose'
 
 const win = (window as any) as MyWindow
 
@@ -201,6 +202,7 @@ type TimelineSpaceModule = {
   HeaderMenu: HeaderMenuState
   Modals: ModalsModuleState
   Contents: ContentsModuleState
+  Compose: ComposeState
 }
 
 export type TimelineSpaceModuleState = TimelineSpaceModule & TimelineSpaceState
@@ -211,7 +213,8 @@ const TimelineSpace: Module<TimelineSpaceState, RootState> = {
     SideMenu,
     HeaderMenu,
     Modals,
-    Contents
+    Contents,
+    Compose
   },
   state: state,
   mutations: mutations,
diff --git a/src/renderer/store/TimelineSpace/Compose.ts b/src/renderer/store/TimelineSpace/Compose.ts
new file mode 100644
index 00000000..1c2680a4
--- /dev/null
+++ b/src/renderer/store/TimelineSpace/Compose.ts
@@ -0,0 +1,37 @@
+import { Module, MutationTree } from 'vuex'
+import { RootState } from '@/store'
+
+export type ReplyTo = {
+  acct: string
+  id: string
+}
+
+export type ComposeState = {
+  inReplyTo: ReplyTo | null
+}
+
+const state = (): ComposeState => ({
+  inReplyTo: null
+})
+
+export const MUTATION_TYPES = {
+  SET_REPLY_TO_ID: 'setReplyToId',
+  CLEAR_REPLY_TO_ID: 'clearReplyToId'
+}
+
+const mutations: MutationTree<ComposeState> = {
+  [MUTATION_TYPES.SET_REPLY_TO_ID]: (state, inReplyTo: ReplyTo) => {
+    state.inReplyTo = inReplyTo
+  },
+  [MUTATION_TYPES.CLEAR_REPLY_TO_ID]: state => {
+    state.inReplyTo = null
+  }
+}
+
+const Compose: Module<ComposeState, RootState> = {
+  namespaced: true,
+  state: state,
+  mutations: mutations
+}
+
+export default Compose

From b968ab9e4ecf74389f7897f015f5c00c2b3dffa5 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 22 Jan 2023 14:51:59 +0900
Subject: [PATCH 9/9] refs #3771 Add poll

---
 .../components/TimelineSpace/Compose.vue      | 112 +++++++++++++++++-
 1 file changed, 110 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Compose.vue b/src/renderer/components/TimelineSpace/Compose.vue
index 1d43b672..6350bf81 100644
--- a/src/renderer/components/TimelineSpace/Compose.vue
+++ b/src/renderer/components/TimelineSpace/Compose.vue
@@ -18,13 +18,29 @@
       <div class="nsfw" v-if="attachments.length > 0">
         <el-checkbox v-model="nsfw">{{ $t('modals.new_toot.footer.change_sensitive') }}</el-checkbox>
       </div>
+      <div class="poll" v-if="poll.options.length > 0">
+        <ul class="options-list">
+          <li class="option" v-for="(option, index) in poll.options" :key="index">
+            <el-radio :disabled="true" :label="index">
+              <el-input :placeholder="`Choice ${index}`" v-model="poll.options[index]" size="small"></el-input>
+              <el-button class="remove-poll" link size="small" @click="removePollOption(index)"
+                ><font-awesome-icon icon="xmark"
+              /></el-button>
+            </el-radio>
+          </li>
+        </ul>
+        <el-button class="add-poll" type="info" size="small" @click="addPollOption">{{ $t('modals.new_toot.poll.add_choice') }}</el-button>
+        <el-select v-model="poll.expires_in" size="small" value-key="value">
+          <el-option v-for="exp in expiresList" :key="exp.value" :label="exp.label" :value="exp.value"> </el-option>
+        </el-select>
+      </div>
       <div class="form-footer">
         <el-button-group class="tool-buttons">
           <el-button link size="default" @click="selectImage">
             <font-awesome-icon icon="camera" />
           </el-button>
           <input name="image" type="file" class="image-input" ref="imageRef" @change="onChangeImage" />
-          <el-button link size="default" disabled>
+          <el-button link size="default" @click="togglePoll">
             <font-awesome-icon icon="square-poll-horizontal" />
           </el-button>
           <div>
@@ -89,6 +105,7 @@ import { useRoute } from 'vue-router'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
 import emojiDefault from 'emoji-mart-vue-fast/data/all.json'
 import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
+import { useI18next } from 'vue3-i18next'
 import { useStore } from '@/store'
 import { MyWindow } from '~/src/types/global'
 import { LocalAccount } from '~/src/types/localAccount'
@@ -96,12 +113,18 @@ import { LocalServer } from '~/src/types/localServer'
 import visibilityList from '~/src/constants/visibility'
 import { MUTATION_TYPES } from '@/store/TimelineSpace/Compose'
 
+type Expire = {
+  label: string
+  value: number
+}
+
 export default defineComponent({
   name: 'Compose',
   components: { Picker },
   setup() {
     const route = useRoute()
     const store = useStore()
+    const i18n = useI18next()
     const space = 'TimelineSpace/Compose'
     const win = (window as any) as MyWindow
 
@@ -121,6 +144,36 @@ export default defineComponent({
           return 'globe'
       }
     })
+    const expiresList = reactive<Array<Expire>>([
+      {
+        label: i18n.t('modals.new_toot.poll.expires.5_minutes'),
+        value: 60 * 5
+      },
+      {
+        label: i18n.t('modals.new_toot.poll.expires.30_minutes'),
+        value: 60 * 30
+      },
+      {
+        label: i18n.t('modals.new_toot.poll.expires.1_hour'),
+        value: 3600
+      },
+      {
+        label: i18n.t('modals.new_toot.poll.expires.6_hours'),
+        value: 3600 * 6
+      },
+      {
+        label: i18n.t('modals.new_toot.poll.expires.1_day'),
+        value: 3600 * 24
+      },
+      {
+        label: i18n.t('modals.new_toot.poll.expires.3_days'),
+        value: 3600 * 24 * 3
+      },
+      {
+        label: i18n.t('modals.new_toot.poll.expires.7_days'),
+        value: 3600 * 24 * 7
+      }
+    ])
 
     const emojiData = ref<EmojiIndex | null>(null)
     const client = ref<MegalodonInterface | null>(null)
@@ -133,6 +186,10 @@ export default defineComponent({
     const visibility = ref(visibilityList.Public.key)
     const nsfw = ref<boolean>(false)
     const inReplyTo = computed(() => store.state.TimelineSpace.Compose.inReplyTo)
+    const poll = reactive<{ options: Array<string>; expires_in: number }>({
+      options: [],
+      expires_in: 86400
+    })
 
     const loading = ref<boolean>(false)
     const emojiVisible = ref<boolean>(false)
@@ -202,6 +259,12 @@ export default defineComponent({
           })
         }
 
+        if (poll.options.length > 0) {
+          options = Object.assign(options, {
+            poll: poll
+          })
+        }
+
         await client.value.postStatus(form.status, options)
         clear()
       } catch (err) {
@@ -218,6 +281,7 @@ export default defineComponent({
       cw.value = false
       emojiVisible.value = false
       store.commit(`${space}/${MUTATION_TYPES.CLEAR_REPLY_TO_ID}`)
+      poll.options = []
     }
 
     const selectImage = () => {
@@ -269,6 +333,22 @@ export default defineComponent({
       visibility.value = value
     }
 
+    const togglePoll = () => {
+      if (poll.options.length > 0) {
+        poll.options = []
+      } else {
+        poll.options = ['', '']
+      }
+    }
+
+    const addPollOption = () => {
+      poll.options = [...poll.options, '']
+    }
+
+    const removePollOption = (index: number) => {
+      poll.options = poll.options.filter((_, i) => i !== index)
+    }
+
     return {
       form,
       post,
@@ -286,7 +366,12 @@ export default defineComponent({
       visibilityList,
       visibilityIcon,
       changeVisibility,
-      nsfw
+      nsfw,
+      poll,
+      togglePoll,
+      expiresList,
+      addPollOption,
+      removePollOption
     }
   }
 })
@@ -360,6 +445,29 @@ export default defineComponent({
     }
   }
 
+  .poll {
+    .options-list {
+      list-style: none;
+      padding-left: 16px;
+
+      .poll-option {
+        line-height: 38px;
+
+        .remove-poll {
+          margin-left: 4px;
+        }
+      }
+    }
+
+    .add-poll {
+      margin: 0 4px 0 40px;
+    }
+  }
+
+  .poll :deep(.el-input__inner) {
+    box-shadow: none;
+  }
+
   .form-footer {
     display: flex;
     justify-content: space-between;