remove panel-footer in userpanel, simplify preview header, fix word-wrap in preview

src/components/post_status_form/post_status_form.js

@@ -235,13 +235,13 @@ const PostStatusForm = {
         this.posting = false
       })
     },
-    previewStatus (newStatus) {
+    previewStatus () {
       if (this.emptyStatus) {
         this.preview = { error: this.$t('status.preview_empty') }
         this.previewLoading = false
         return
       }
-
+      const newStatus = this.newStatus
       this.previewLoading = true
       statusPoster.postStatus({
         status: newStatus.status,
@@ -269,18 +269,23 @@ const PostStatusForm = {
         this.previewLoading = false
       })
     },
-    debouncePreviewStatus: debounce(function (newStatus) {
-      this.previewStatus(newStatus)
-    }, 750),
+    debouncePreviewStatus: debounce(function () { this.previewStatus() }, 750),
     autoPreview () {
       if (!this.preview) return
       this.previewLoading = true
-      this.debouncePreviewStatus(this.newStatus)
+      this.debouncePreviewStatus()
     },
     closePreview () {
       this.preview = null
       this.previewLoading = false
     },
+    togglePreview () {
+      if (this.showPreview) {
+        this.closePreview()
+      } else {
+        this.previewStatus()
+      }
+    },
     addMediaFile (fileInfo) {
       this.newStatus.files.push(fileInfo)
     },

src/components/post_status_form/post_status_form.vue

@@ -16,30 +16,26 @@
         @drop.stop="fileDrop"
       />
       <div class="form-group">
-        <a
-          v-if="!showPreview"
-          class="preview-start"
-          @click.stop.prevent="previewStatus(newStatus)"
-        >
-          {{ $t('status.preview') }}
-        </a>
+        <div class="preview-heading faint">
+          <a
+            class="preview-toggle faint"
+            @click.stop.prevent="togglePreview"
+          >
+            {{ $t('status.preview') }}
+            <i
+              class="icon-down-open"
+              :style="{ transform: showPreview ? 'rotate(0deg)' : 'rotate(-90deg)' }"
+            />
+          </a>
+          <i
+            v-show="previewLoading"
+            class="icon-spin3 animate-spin"
+          />
+        </div>
         <div
-          v-else
+          v-if="showPreview"
           class="preview-container"
         >
-          <span class="preview-heading">
-            <span class="preview-title">
-              {{ $t('status.status_preview') }}
-            </span>
-            <i
-              v-if="previewLoading"
-              class="icon-spin3 animate-spin"
-            />
-            <i
-              class="preview-close icon-cancel"
-              @click.stop.prevent="closePreview"
-            />
-          </span>
           <div
             v-if="!preview"
             class="preview-status"
@@ -369,30 +365,32 @@
     max-width: 10em;
   }
 
-  .preview-start {
-    margin-left: auto;
+  .preview-heading {
+    display: flex;
+    width: 100%;
+
+    .icon-spin3 {
+      margin-left: auto;
+    }
+  }
+
+  .preview-toggle {
+    display: flex;
     cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .icon-down-open {
+    transition: transform 0.1s;
   }
 
   .preview-container {
     margin-bottom: 1em;
   }
 
-  .preview-heading {
-    display: flex;
-    width: 100%;
-    color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
-  }
-
-  .preview-title {
-    flex-grow: 1;
-  }
-
-  .preview-close {
-    padding-left: 0.5em;
-  }
-
   .preview-error {
     font-style: italic;
     color: $fallback--faint;

src/components/status/status.vue

@@ -372,9 +372,6 @@ $status-margin: 0.75em;
 }
 
 .status-el {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
   border-left-width: 0px;
   min-width: 0;
   border-color: $fallback--border;

src/components/status_content/status_content.vue

@@ -180,6 +180,9 @@ $status-margin: 0.75em;
     font-family: var(--postFont, sans-serif);
     line-height: 1.4em;
     white-space: pre-wrap;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
 
     blockquote {
       margin: 0.2em 0 0.2em 2em;

src/components/user_panel/user_panel.vue

@@ -10,9 +10,7 @@
         :hide-bio="true"
         rounded="top"
       />
-      <div class="panel-footer">
-        <PostStatusForm />
-      </div>
+      <PostStatusForm />
     </div>
     <auth-form
       v-else

src/i18n/en.json

@@ -638,7 +638,6 @@
     "thread_muted": "Thread muted",
     "thread_muted_and_words": ", has words:",
     "preview": "Preview",
-    "status_preview": "Status preview",
     "preview_empty": "Empty"
   },
   "user_card": {