Add quotes (#59)

Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/59

src/components/status/status.js

@@ -1,4 +1,5 @@
 import ReplyButton from '../reply_button/reply_button.vue'
+import QuoteButton from '../quote_button/quote_button.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
 import ReactButton from '../react_button/react_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
@@ -115,7 +116,8 @@ const Status = {
     StatusContent,
     RichContent,
     MentionLink,
-    MentionsLine
+    MentionsLine,
+    QuoteButton
   },
   props: [
     'statusoid',
@@ -145,6 +147,8 @@ const Status = {
     'controlledToggleShowingLongSubject',
     'controlledReplying',
     'controlledToggleReplying',
+    'controlledQuoting',
+    'controlledToggleQuoting',
     'controlledMediaPlaying',
     'controlledSetMediaPlaying',
     'dive'
@@ -152,6 +156,7 @@ const Status = {
   data () {
     return {
       uncontrolledReplying: false,
+      uncontrolledQuoting: false,
       unmuted: false,
       userExpanded: false,
       uncontrolledMediaPlaying: [],
@@ -161,7 +166,7 @@ const Status = {
     }
   },
   computed: {
-    ...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),
+    ...controlledOrUncontrolledGetters(['replying', 'quoting', 'mediaPlaying']),
     muteWords () {
       return this.mergedConfig.muteWords
     },
@@ -418,6 +423,9 @@ const Status = {
     toggleReplying () {
       controlledOrUncontrolledToggle(this, 'replying')
     },
+    toggleQuoting () {
+      controlledOrUncontrolledToggle(this, 'quoting')
+    },
     gotoOriginal (id) {
       if (this.inConversation) {
         this.$emit('goto', id)

src/components/status/status.scss

@@ -101,6 +101,10 @@
 
   .status-heading {
     margin-bottom: 0.5em;
+
+    .emoji {
+      --emoji-size: 16px;
+    }
   }
 
   .heading-name-row {
@@ -355,6 +359,15 @@
     flex: 1;
   }
 
+  .quote-form {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .quote-body {
+    flex: 1;
+  }
+
   .favs-repeated-users {
     margin-top: var(--status-margin, $status-margin);
   }

src/components/status/status.vue

@@ -430,6 +430,12 @@
               :status="status"
               @toggle="toggleReplying"
             />
+            <quote-button
+              :visibility="status.visibility"
+              :quoting="quoting"
+              :status="status"
+              @toggle="toggleQuoting"
+            />
             <retweet-button
               :visibility="status.visibility"
               :logged-in="loggedIn"
@@ -488,6 +494,20 @@
           @posted="toggleReplying"
         />
       </div>
+      <div
+        v-if="quoting"
+        class="status-container quote-form"
+      >
+        <PostStatusForm
+          class="quote-body"
+          :quote-id="status.id"
+          :attentions="[status.user]"
+          :replied-user="status.user"
+          :copy-message-scope="status.visibility"
+          :subject="replySubject"
+          @posted="toggleQuoting"
+        />
+      </div>
     </template>
   </div>
 </template>