Merge branch 'develop' into 'feat/timeline-quick-settings'

# Conflicts:
#   CHANGELOG.md

src/components/basic_user_card/basic_user_card.vue

@@ -42,7 +42,7 @@
           class="basic-user-card-screen-name"
           :to="userProfileLink(user)"
         >
-          @{{ user.screen_name }}
+          @{{ user.screen_name_ui }}
         </router-link>
       </div>
       <slot />

src/components/chat/chat.js

@@ -73,7 +73,7 @@ const Chat = {
     },
     formPlaceholder () {
       if (this.recipient) {
-        return this.$t('chats.message_user', { nickname: this.recipient.screen_name })
+        return this.$t('chats.message_user', { nickname: this.recipient.screen_name_ui })
       } else {
         return ''
       }

src/components/chat/chat.scss

@@ -98,10 +98,10 @@
     .unread-message-count {
       font-size: 0.8em;
       left: 50%;
-      transform: translate(-50%, 0);
-      border-radius: 100%;
       margin-top: -1rem;
-      padding: 0;
+      padding: 0.1em;
+      border-radius: 50px;
+      position: absolute;
     }
 
     .chat-loading-error {

src/components/chat_title/chat_title.js

@@ -12,7 +12,7 @@ export default Vue.component('chat-title', {
   ],
   computed: {
     title () {
-      return this.user ? this.user.screen_name : ''
+      return this.user ? this.user.screen_name_ui : ''
     },
     htmlTitle () {
       return this.user ? this.user.name_html : ''

src/components/emoji_input/emoji_input.js

@@ -194,11 +194,18 @@ const EmojiInput = {
     }
   },
   methods: {
+    focusPickerInput () {
+      const pickerEl = this.$refs.picker.$el
+      if (!pickerEl) return
+      const pickerInput = pickerEl.querySelector('input')
+      if (pickerInput) pickerInput.focus()
+    },
     triggerShowPicker () {
       this.showPicker = true
       this.$refs.picker.startEmojiLoad()
       this.$nextTick(() => {
         this.scrollIntoView()
+        this.focusPickerInput()
       })
       // This temporarily disables "click outside" handler
       // since external trigger also means click originates
@@ -214,6 +221,7 @@ const EmojiInput = {
       if (this.showPicker) {
         this.scrollIntoView()
         this.$refs.picker.startEmojiLoad()
+        this.$nextTick(this.focusPickerInput)
       }
     },
     replace (replacement) {

src/components/emoji_input/emoji_input.vue

@@ -9,8 +9,8 @@
       <button
         v-if="!hideEmojiButton"
         class="button-unstyled emoji-picker-icon"
-        @click.prevent="togglePicker"
         type="button"
+        @click.prevent="togglePicker"
       >
         <FAIcon :icon="['far', 'smile-beam']" />
       </button>

src/components/emoji_input/suggestor.js

@@ -116,8 +116,8 @@ export const suggestUsers = ({ dispatch, state }) => {
 
       return diff + nameAlphabetically + screenNameAlphabetically
       /* eslint-disable camelcase */
-    }).map(({ screen_name, name, profile_image_url_original }) => ({
-      displayText: screen_name,
+    }).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({
+      displayText: screen_name_ui,
       detailText: name,
       imageUrl: profile_image_url_original,
       replacement: '@' + screen_name + ' '

src/components/mfa_form/recovery_form.vue

@@ -25,16 +25,16 @@
             <div>
               <button
                 class="button-unstyled -link"
-                @click.prevent="requireTOTP"
                 type="button"
+                @click.prevent="requireTOTP"
               >
                 {{ $t('login.enter_two_factor_code') }}
               </button>
               <br>
               <button
                 class="button-unstyled -link"
-                @click.prevent="abortMFA"
                 type="button"
+                @click.prevent="abortMFA"
               >
                 {{ $t('general.cancel') }}
               </button>

src/components/mfa_form/totp_form.vue

@@ -27,16 +27,16 @@
             <div>
               <button
                 class="button-unstyled -link"
-                @click.prevent="requireRecovery"
                 type="button"
+                @click.prevent="requireRecovery"
               >
                 {{ $t('login.enter_recovery_code') }}
               </button>
               <br>
               <button
                 class="button-unstyled -link"
-                @click.prevent="abortMFA"
                 type="button"
+                @click.prevent="abortMFA"
               >
                 {{ $t('general.cancel') }}
               </button>

src/components/notification/notification.vue

@@ -11,7 +11,7 @@
     >
       <small>
         <router-link :to="userProfileLink">
-          {{ notification.from_profile.screen_name }}
+          {{ notification.from_profile.screen_name_ui }}
         </router-link>
       </small>
       <button
@@ -54,14 +54,14 @@
             <bdi
               v-if="!!notification.from_profile.name_html"
               class="username"
-              :title="'@'+notification.from_profile.screen_name"
+              :title="'@'+notification.from_profile.screen_name_ui"
               v-html="notification.from_profile.name_html"
             />
             <!-- eslint-enable vue/no-v-html -->
             <span
               v-else
               class="username"
-              :title="'@'+notification.from_profile.screen_name"
+              :title="'@'+notification.from_profile.screen_name_ui"
             >{{ notification.from_profile.name }}</span>
             <span v-if="notification.type === 'like'">
               <FAIcon
@@ -152,7 +152,7 @@
             :to="userProfileLink"
             class="follow-name"
           >
-            @{{ notification.from_profile.screen_name }}
+            @{{ notification.from_profile.screen_name_ui }}
           </router-link>
           <div
             v-if="notification.type === 'follow_request'"
@@ -177,7 +177,7 @@
           class="move-text"
         >
           <router-link :to="targetUserProfileLink">
-            @{{ notification.target.screen_name }}
+            @{{ notification.target.screen_name_ui }}
           </router-link>
         </div>
         <template v-else>

src/components/popover/popover.js

@@ -128,9 +128,12 @@ const Popover = {
       }
     },
     showPopover () {
-      if (this.hidden) this.$emit('show')
+      const wasHidden = this.hidden
       this.hidden = false
-      this.$nextTick(this.updateStyles)
+      this.$nextTick(() => {
+        if (wasHidden) this.$emit('show')
+        this.updateStyles()
+      })
     },
     hidePopover () {
       if (!this.hidden) this.$emit('close')

src/components/post_status_form/post_status_form.js

@@ -115,7 +115,7 @@ const PostStatusForm = {
       ? this.copyMessageScope
       : this.$store.state.users.currentUser.default_scope
 
-    const { postContentType: contentType } = this.$store.getters.mergedConfig
+    const { postContentType: contentType, sensitiveByDefault } = this.$store.getters.mergedConfig
 
     return {
       dropFiles: [],
@@ -126,7 +126,7 @@ const PostStatusForm = {
       newStatus: {
         spoilerText: this.subject || '',
         status: statusText,
-        nsfw: false,
+        nsfw: !!sensitiveByDefault,
         files: [],
         poll: {},
         mediaDescriptions: {},

src/components/react_button/react_button.js

@@ -23,6 +23,12 @@ const ReactButton = {
         this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
       }
       close()
+    },
+    focusInput () {
+      this.$nextTick(() => {
+        const input = this.$el.querySelector('input')
+        if (input) input.focus()
+      })
     }
   },
   computed: {

src/components/react_button/react_button.vue

@@ -6,6 +6,7 @@
     :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
     remove-padding
+    @show="focusInput"
   >
     <div
       slot="content"

src/components/scope_selector/scope_selector.vue

@@ -8,8 +8,8 @@
       class="button-unstyled scope"
       :class="css.direct"
       :title="$t('post_status.scope.direct')"
-      @click="changeVis('direct')"
       type="button"
+      @click="changeVis('direct')"
     >
       <FAIcon
         icon="envelope"
@@ -21,8 +21,8 @@
       class="button-unstyled scope"
       :class="css.private"
       :title="$t('post_status.scope.private')"
-      @click="changeVis('private')"
       type="button"
+      @click="changeVis('private')"
     >
       <FAIcon
         icon="lock"
@@ -34,8 +34,8 @@
       class="button-unstyled scope"
       :class="css.unlisted"
       :title="$t('post_status.scope.unlisted')"
-      @click="changeVis('unlisted')"
       type="button"
+      @click="changeVis('unlisted')"
     >
       <FAIcon
         icon="lock-open"
@@ -47,8 +47,8 @@
       class="button-unstyled scope"
       :class="css.public"
       :title="$t('post_status.scope.public')"
-      @click="changeVis('public')"
       type="button"
+      @click="changeVis('public')"
     >
       <FAIcon
         icon="globe"

src/components/search/search.vue

@@ -15,8 +15,8 @@
       >
       <button
         class="btn button-default search-button"
-        @click="newQuery(searchTerm)"
         type="submit"
+        @click="newQuery(searchTerm)"
       >
         <FAIcon icon="search" />
       </button>

src/components/search_bar/search_bar.vue

@@ -7,8 +7,8 @@
       v-if="hidden"
       class="button-unstyled nav-icon"
       :title="$t('nav.search')"
-      @click.prevent.stop="toggleHidden"
       type="button"
+      @click.prevent.stop="toggleHidden"
     >
       <FAIcon
         fixed-width
@@ -28,8 +28,8 @@
       >
       <button
         class="button-default search-button"
-        @click="find(searchTerm)"
         type="submit"
+        @click="find(searchTerm)"
       >
         <FAIcon
           fixed-width
@@ -38,8 +38,8 @@
       </button>
       <button
         class="button-unstyled cancel-search"
-        @click.prevent.stop="toggleHidden"
         type="button"
+        @click.prevent.stop="toggleHidden"
       >
         <FAIcon
           fixed-width

src/components/settings_modal/helpers/modified_indicator.vue

@@ -2,21 +2,21 @@
   <span
     v-if="changed"
     class="ModifiedIndicator"
-    >
+  >
     <Popover
       trigger="hover"
-      >
+    >
       <span slot="trigger">
         &nbsp;
-          <FAIcon
-            icon="wrench"
-          />
+        <FAIcon
+          icon="wrench"
+        />
       </span>
       <div
-        class="modified-tooltip"
         slot="content"
-        >
-      {{ $t('settings.setting_changed') }}
+        class="modified-tooltip"
+      >
+        {{ $t('settings.setting_changed') }}
       </div>
     </Popover>
   </span>
@@ -32,8 +32,8 @@ library.add(
 )
 
 export default {
-  props: ['changed'],
-  components: { Popover }
+  components: { Popover },
+  props: ['changed']
 }
 </script>
 

src/components/settings_modal/tabs/filtering_tab.vue

@@ -75,8 +75,8 @@
         <p>{{ $t('settings.filtering_explanation') }}</p>
         <textarea
           id="muteWords"
-          class="resize-height"
           v-model="muteWordsString"
+          class="resize-height"
         />
       </div>
       <div>

src/components/settings_modal/tabs/general_tab.vue

@@ -144,7 +144,12 @@
         </li>
         <li>
           <BooleanSetting path="minimalScopesMode">
-            {{ $t('settings.minimal_scopes_mode') }} {{ minimalScopesModeDefaultValue }}
+            {{ $t('settings.minimal_scopes_mode') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="sensitiveByDefault">
+            {{ $t('settings.sensitive_by_default') }}
           </BooleanSetting>
         </li>
         <li>

src/components/status/status.js

@@ -136,7 +136,7 @@ const Status = {
       }
     },
     retweet () { return !!this.statusoid.retweeted_status },
-    retweeter () { return this.statusoid.user.name || this.statusoid.user.screen_name },
+    retweeter () { return this.statusoid.user.name || this.statusoid.user.screen_name_ui },
     retweeterHtml () { return this.statusoid.user.name_html },
     retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
     status () {
@@ -216,7 +216,7 @@ const Status = {
         return this.status.in_reply_to_screen_name
       } else {
         const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
-        return user && user.screen_name
+        return user && user.screen_name_ui
       }
     },
     replySubject () {

src/components/status/status.vue

@@ -26,7 +26,7 @@
             icon="retweet"
           />
           <router-link :to="userProfileLink">
-            {{ status.user.screen_name }}
+            {{ status.user.screen_name_ui }}
           </router-link>
         </small>
         <small
@@ -156,10 +156,10 @@
                 </h4>
                 <router-link
                   class="account-name"
-                  :title="status.user.screen_name"
+                  :title="status.user.screen_name_ui"
                   :to="userProfileLink"
                 >
-                  {{ status.user.screen_name }}
+                  {{ status.user.screen_name_ui }}
                 </router-link>
                 <img
                   v-if="!!(status.user && status.user.favicon)"

src/components/user_avatar/user_avatar.vue

@@ -2,8 +2,8 @@
   <StillImage
     v-if="user"
     class="Avatar"
-    :alt="user.screen_name"
-    :title="user.screen_name"
+    :alt="user.screen_name_ui"
+    :title="user.screen_name_ui"
     :src="imgSrc(user.profile_image_url_original)"
     :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
     :image-load-error="imageLoadError"

src/components/user_card/user_card.vue

@@ -73,10 +73,10 @@
             <div class="bottom-line">
               <router-link
                 class="user-screen-name"
-                :title="user.screen_name"
+                :title="user.screen_name_ui"
                 :to="userProfileLink(user)"
               >
-                @{{ user.screen_name }}
+                @{{ user.screen_name_ui }}
               </router-link>
               <template v-if="!hideBio">
                 <span

src/components/user_list_popover/user_list_popover.vue

@@ -26,7 +26,7 @@
             <!-- eslint-disable vue/no-v-html -->
             <span v-html="user.name_html" />
             <!-- eslint-enable vue/no-v-html -->
-            <span class="user-list-screen-name">{{ user.screen_name }}</span>
+            <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
           </div>
         </div>
       </div>

src/components/user_reporting_modal/user_reporting_modal.vue

@@ -6,7 +6,7 @@
     <div class="user-reporting-panel panel">
       <div class="panel-heading">
         <div class="title">
-          {{ $t('user_reporting.title', [user.screen_name]) }}
+          {{ $t('user_reporting.title', [user.screen_name_ui]) }}
         </div>
       </div>
       <div class="panel-body">