Merge branch 'appearance-tab' into shigusegubu-themes3

Add setting to only show scrobbles newer than certain age.

See merge request pleroma/pleroma-fe!1904

changelog.d/quotes-count.add

@@ -0,0 +1 @@
+Display quotes count on posts and add quotes list page

changelog.d/scrobbles-age-filter.add

@@ -0,0 +1 @@
+Option to only show scrobbles that are recent enough

src/App.scss

@@ -3,7 +3,7 @@
 @import "./panel";
 
 :root {
-  --font-size: 14px;
+  --fontSize: 14px;
   --status-margin: 0.75em;
   --navbar-height: 3.5rem;
   --post-line-height: 1.4;
@@ -20,7 +20,7 @@
 }
 
 html {
-  font-size: var(--font-size);
+  font-size: var(--textSize);
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
 }
 

src/boot/routes.js

@@ -25,6 +25,7 @@ import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
 import ListsEdit from 'components/lists_edit/lists_edit.vue'
 import NavPanel from 'src/components/nav_panel/nav_panel.vue'
 import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
+import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
 
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
@@ -51,6 +52,7 @@ export default (store) => {
     { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
     { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
     { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
+    { name: 'quotes', path: '/notice/:id/quotes', component: QuotesTimeline },
     {
       name: 'remote-user-profile-acct',
       path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',

src/components/quotes_timeline/quotes_timeline.js

@@ -0,0 +1,26 @@
+import Timeline from '../timeline/timeline.vue'
+
+const QuotesTimeline = {
+  created () {
+    this.$store.commit('clearTimeline', { timeline: 'quotes' })
+    this.$store.dispatch('startFetchingTimeline', { timeline: 'quotes', statusId: this.statusId })
+  },
+  components: {
+    Timeline
+  },
+  computed: {
+    statusId () { return this.$route.params.id },
+    timeline () { return this.$store.state.statuses.timelines.quotes }
+  },
+  watch: {
+    statusId () {
+      this.$store.commit('clearTimeline', { timeline: 'quotes' })
+      this.$store.dispatch('startFetchingTimeline', { timeline: 'quotes', statusId: this.statusId })
+    }
+  },
+  unmounted () {
+    this.$store.dispatch('stopFetchingTimeline', 'quotes')
+  }
+}
+
+export default QuotesTimeline

src/components/quotes_timeline/quotes_timeline.vue

@@ -0,0 +1,10 @@
+<template>
+  <Timeline
+    :title="$t('nav.quotes')"
+    :timeline="timeline"
+    :timeline-name="'quotes'"
+    :status-id="statusId"
+  />
+</template>
+
+<script src='./quotes_timeline.js'></script>

src/components/settings_modal/helpers/setting.js

@@ -48,6 +48,10 @@ export default {
     draftMode: {
       type: Boolean,
       default: undefined
+    },
+    timedApplyMode: {
+      type: Boolean,
+      default: false
     }
   },
   inject: {
@@ -161,7 +165,11 @@ export default {
         case 'admin':
           return (k, v) => this.$store.dispatch('pushAdminSetting', { path: k, value: v })
         default:
-          return (k, v) => this.$store.dispatch('setOption', { name: k, value: v })
+          if (this.timedApplyMode) {
+            return (k, v) => this.$store.dispatch('setOptionTemporarily', { name: k, value: v })
+          } else {
+            return (k, v) => this.$store.dispatch('setOption', { name: k, value: v })
+          }
       }
     },
     defaultState () {

src/components/settings_modal/helpers/unit_setting.js

@@ -21,15 +21,23 @@ export default {
     unitSet: {
       type: String,
       default: 'none'
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    resetDefault: {
+      type: Object,
+      default: null
     }
   },
   computed: {
     ...Setting.computed,
     stateUnit () {
-      return this.state.replace(/\d+/, '')
+      return typeof this.state === 'string' ? this.state.replace(/[0-9,.]+/, '') : ''
     },
     stateValue () {
-      return this.state.replace(/\D+/, '')
+      return typeof this.state === 'string' ? this.state.replace(/[^0-9,.]+/, '') : ''
     }
   },
   methods: {
@@ -39,10 +47,18 @@ export default {
       return this.$t(['settings', 'units', this.unitSet, value].join('.'))
     },
     updateValue (e) {
-      this.configSink(this.path, parseInt(e.target.value) + this.stateUnit)
+      this.configSink(this.path, parseFloat(e.target.value) + this.stateUnit)
     },
     updateUnit (e) {
-      this.configSink(this.path, this.stateValue + e.target.value)
+      let value = this.stateValue
+      const newUnit = e.target.value
+      if (this.resetDefault) {
+        const replaceValue = this.resetDefault[newUnit]
+        if (replaceValue != null) {
+          value = replaceValue
+        }
+      }
+      this.configSink(this.path, value + newUnit)
     }
   }
 }

src/components/settings_modal/helpers/unit_setting.vue

@@ -13,7 +13,7 @@
       :id="path"
       class="input number-input"
       type="number"
-      step="1"
+      step="step"
       :disabled="disabled"
       :min="min || 0"
       :value="stateValue"

src/components/settings_modal/settings_modal.js

@@ -4,6 +4,7 @@ import AsyncComponentError from 'src/components/async_component_error/async_comp
 import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
 import Popover from '../popover/popover.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { cloneDeep, isEqual } from 'lodash'
 import {
@@ -53,6 +54,7 @@ const SettingsModal = {
     Modal,
     Popover,
     Checkbox,
+    ConfirmModal,
     SettingsModalUserContent: getResettableAsyncComponent(
       () => import('./settings_modal_user_content.vue'),
       {
@@ -165,6 +167,7 @@ const SettingsModal = {
   },
   computed: {
     currentSaveStateNotice () {
+      console.log(this.$store.state.interface.settings.currentSaveStateNotice)
       return this.$store.state.interface.settings.currentSaveStateNotice
     },
     modalActivated () {

src/components/settings_modal/settings_modal.vue

@@ -147,6 +147,18 @@
         </span>
       </div>
     </div>
+    <teleport to="#modal">
+      <ConfirmModal
+        v-if="$store.state.interface.temporaryChangesTimeoutId"
+        :title="$t('settings.confirm_new_setting')"
+        :cancel-text="$t('settings.revert')"
+        :confirm-text="$t('settings.confirm')"
+        @cancelled="$store.state.interface.temporaryChangesRevert"
+        @accepted="$store.state.interface.temporaryChangesConfirm"
+      >
+        {{ $t('settings.confirm_new_question') }}
+      </ConfirmModal>
+    </teleport>
   </Modal>
 </template>
 

src/components/settings_modal/settings_modal_user_content.js

@@ -7,6 +7,7 @@ import FilteringTab from './tabs/filtering_tab.vue'
 import SecurityTab from './tabs/security_tab/security_tab.vue'
 import ProfileTab from './tabs/profile_tab.vue'
 import GeneralTab from './tabs/general_tab.vue'
+import AppearanceTab from './tabs/appearance_tab.vue'
 import VersionTab from './tabs/version_tab.vue'
 import ThemeTab from './tabs/theme_tab/theme_tab.vue'
 
@@ -44,6 +45,7 @@ const SettingsModalContent = {
     SecurityTab,
     ProfileTab,
     GeneralTab,
+    AppearanceTab,
     VersionTab,
     ThemeTab
   },

src/components/settings_modal/settings_modal_user_content.vue

@@ -21,6 +21,13 @@
     >
       <ProfileTab />
     </div>
+    <div
+      :label="$t('settings.appearance')"
+      icon="paint-brush"
+      data-tab-name="appearance"
+    >
+      <AppearanceTab />
+    </div>
     <div
       v-if="isLoggedIn"
       :label="$t('settings.security_tab')"

src/components/settings_modal/tabs/appearance_tab.js

@@ -0,0 +1,39 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import FloatSetting from '../helpers/float_setting.vue'
+import UnitSetting from '../helpers/unit_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faGlobe
+)
+
+const AppearanceTab = {
+  data () {
+    return {}
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    FloatSetting,
+    UnitSetting,
+    ProfileSettingIndicator
+  },
+  computed: {
+    instanceWallpaperUsed () {
+      return this.$store.state.instance.background &&
+        !this.$store.state.users.currentUser.background_image
+    },
+    ...SharedComputedObject()
+  }
+}
+
+export default AppearanceTab

src/components/settings_modal/tabs/appearance_tab.vue

@@ -0,0 +1,71 @@
+<template>
+  <div :label="$t('settings.general')">
+    <div class="setting-item">
+      <h2>{{ $t('settings.interface') }}</h2>
+      <ul class="setting-list">
+        <li v-if="instanceWallpaperUsed">
+          <BooleanSetting path="hideInstanceWallpaper">
+            {{ $t('settings.hide_wallpaper') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="disableStickyHeaders">
+            {{ $t('settings.disable_sticky_headers') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="showScrollbars">
+            {{ $t('settings.show_scrollbars') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <UnitSetting
+            path="textSize"
+            step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 14, 'rem': 1 }"
+            timed-apply-mode
+          >
+            {{ $t('settings.text_size') }}
+          </UnitSetting>
+          <div>
+            <small>
+              <i18n-t
+                scope="global"
+                keypath="settings.text_size_tip"
+                tag="span"
+              >
+                <code>px</code>
+                <code>rem</code>
+              </i18n-t>
+              <br/>
+              <i18n-t
+                scope="global"
+                keypath="settings.text_size_tip2"
+                tag="span"
+              >
+                <code>14px</code>
+              </i18n-t>
+            </small>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./appearance_tab.js"></script>
+
+<style lang="scss">
+.column-settings {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+
+.column-settings .size-label {
+  display: block;
+  margin-bottom: 0.5em;
+  margin-top: 0.5em;
+}
+</style>

src/components/settings_modal/tabs/general_tab.vue

@@ -15,11 +15,6 @@
             {{ $t('settings.hide_isp') }}
           </BooleanSetting>
         </li>
-        <li v-if="instanceWallpaperUsed">
-          <BooleanSetting path="hideInstanceWallpaper">
-            {{ $t('settings.hide_wallpaper') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}
@@ -101,16 +96,6 @@
         <li>
           <h3>{{ $t('settings.columns') }}</h3>
         </li>
-        <li>
-          <BooleanSetting path="disableStickyHeaders">
-            {{ $t('settings.disable_sticky_headers') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="showScrollbars">
-            {{ $t('settings.show_scrollbars') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting path="sidebarRight">
             {{ $t('settings.right_sidebar') }}

src/components/status/status.js

@@ -373,6 +373,9 @@ const Status = {
     hidePostStats () {
       return this.mergedConfig.hidePostStats
     },
+    shouldDisplayFavsAndRepeats () {
+      return !this.hidePostStats && this.isFocused && (this.combinedFavsAndRepeatsUsers.length > 0 || this.statusFromGlobalRepository.quotes_count)
+    },
     muteBotStatuses () {
       return this.mergedConfig.muteBotStatuses
     },
@@ -429,6 +432,8 @@ const Status = {
       let multiplier = 60 * 1000 // minutes is smallest unit
       switch (unit) {
         case 'm':
+          break
+        case 'h':
           multiplier *= 60 // hour
           break
         case 'd':

src/components/status/status.scss

@@ -374,6 +374,7 @@
       font-weight: bolder;
       font-size: 1.1em;
       line-height: 1em;
+      color: var(--text);
     }
 
     &:hover .stat-title {

src/components/status/status.vue

@@ -484,7 +484,7 @@
 
           <transition name="fade">
             <div
-              v-if="!hidePostStats && isFocused && combinedFavsAndRepeatsUsers.length > 0"
+              v-if="shouldDisplayFavsAndRepeats"
               class="favs-repeated-users"
             >
               <div class="stats">
@@ -512,6 +512,19 @@
                     </div>
                   </div>
                 </UserListPopover>
+                <router-link
+                  v-if="statusFromGlobalRepository.quotes_count > 0"
+                  :to="{ name: 'quotes', params: { id: status.id } }"
+                >
+                  <div
+                    class="stat-count"
+                  >
+                    <a class="stat-title">{{ $t('status.quotes') }}</a>
+                    <div class="stat-number">
+                      {{ statusFromGlobalRepository.quotes_count }}
+                    </div>
+                  </div>
+                </router-link>
                 <div class="avatar-row">
                   <AvatarList :users="combinedFavsAndRepeatsUsers" />
                 </div>

src/components/timeline/timeline.js

@@ -25,6 +25,7 @@ const Timeline = {
     'title',
     'userId',
     'listId',
+    'statusId',
     'tag',
     'embedded',
     'count',
@@ -121,6 +122,7 @@ const Timeline = {
       showImmediately,
       userId: this.userId,
       listId: this.listId,
+      statusId: this.statusId,
       tag: this.tag
     })
   },
@@ -183,6 +185,7 @@ const Timeline = {
         showImmediately: true,
         userId: this.userId,
         listId: this.listId,
+        statusId: this.statusId,
         tag: this.tag
       }).then(({ statuses }) => {
         if (statuses && statuses.length === 0) {

src/components/timeline_menu/timeline_menu.js

@@ -19,7 +19,8 @@ export const timelineNames = () => {
     bookmarks: 'nav.bookmarks',
     dms: 'nav.dms',
     'public-timeline': 'nav.public_tl',
-    'public-external-timeline': 'nav.twkn'
+    'public-external-timeline': 'nav.twkn',
+    quotes: 'nav.quotes'
   }
 }
 

src/i18n/cs.json

@@ -678,7 +678,7 @@
     "autohide_floating_post_button": "Automaticky skrýt tlačítko nového příspěvku (mobilní zařízení)",
     "minimal_scopes_mode": "Minimalizovat možnosti rozsahu příspěvků",
     "conversation_display": "Styl zobrazení konverzací",
-    "conversation_display_tree": "Stromový styl",
+    "conversation_display_tree": "Stromové zobrazení",
     "conversation_display_tree_quick": "Stromový styl",
     "show_scrollbars": "Zobrazit posuvníky bočních sloupců",
     "third_column_mode": "Pokud je volné místo, zobrazit třetí sloupec obsahující",
@@ -863,7 +863,7 @@
     "favorites": "Oblíbené",
     "follow": "Sledovat",
     "follow_sent": "Požadavek odeslán!",
-    "follow_progress": "Odeslílám požadavek…",
+    "follow_progress": "Odesílám požadavek…",
     "follow_unfollow": "Přestat sledovat",
     "followees": "Sledovaní",
     "followers": "Sledující",

src/i18n/en.json

@@ -189,7 +189,8 @@
     "mobile_notifications": "Open notifications (there are unread ones)",
     "mobile_notifications_close": "Close notifications",
     "mobile_notifications_mark_as_seen": "Mark all as seen",
-    "announcements": "Announcements"
+    "announcements": "Announcements",
+    "quotes": "Quotes"
   },
   "notifications": {
     "broken_favorite": "Unknown status, searching for it…",
@@ -373,6 +374,14 @@
     "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
     "post_look_feel": "Posts Look & Feel",
     "mention_links": "Mention links",
+    "appearance": "Appearance",
+    "confirm_new_setting": "Confirm new setting?",
+    "confirm_new_question": "Does this look ok? Setting will be reverted in 10 seconds.",
+    "revert": "Revert",
+    "confirm": "Confirm",
+    "text_size": "Text and interface size",
+    "text_size_tip": "Use {0} for absolute values, {1} will scale with browser default text size.",
+    "text_size_tip2": "Values other than {0} might break some things and themes",
     "mfa": {
       "otp": "OTP",
       "setup_otp": "Setup OTP",
@@ -1057,6 +1066,7 @@
   "status": {
     "favorites": "Favorites",
     "repeats": "Repeats",
+    "quotes": "Quotes",
     "repeat_confirm": "Do you really want to repeat this status?",
     "repeat_confirm_title": "Repeat confirmation",
     "repeat_confirm_accept_button": "Repeat",

src/modules/api.js

@@ -202,12 +202,13 @@ const api = {
       timeline = 'friends',
       tag = false,
       userId = false,
-      listId = false
+      listId = false,
+      statusId = false
     }) {
       if (store.state.fetchers[timeline]) return
 
       const fetcher = store.state.backendInteractor.startFetchingTimeline({
-        timeline, store, userId, listId, tag
+        timeline, store, userId, listId, statusId, tag
       })
       store.commit('addFetcher', { fetcherName: timeline, fetcher })
     },

src/modules/config.js

@@ -115,7 +115,8 @@ export const defaultState = {
   sidebarColumnWidth: '25rem',
   contentColumnWidth: '45rem',
   notifsColumnWidth: '25rem',
-  emojiReactionsScale: 1.0,
+  emojiReactionsScale: undefined,
+  textSize: undefined, // instance default
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
@@ -173,6 +174,10 @@ const config = {
     }
   },
   mutations: {
+    setOptionTemporarily (state, { name, value }) {
+      set(state, name, value)
+      applyConfig(state)
+    },
     setOption (state, { name, value }) {
       set(state, name, value)
     },
@@ -203,6 +208,31 @@ const config = {
     setHighlight ({ commit, dispatch }, { user, color, type }) {
       commit('setHighlight', { user, color, type })
     },
+    setOptionTemporarily ({ commit, dispatch, state, rootState }, { name, value }) {
+      if (rootState.interface.temporaryChangesTimeoutId !== null) {
+        console.warn('Can\'t track more than one temporary change')
+        return
+      }
+      const oldValue = state[name]
+
+      commit('setOptionTemporarily', { name, value })
+
+      const confirm = () => {
+        dispatch('setOption', { name, value })
+        commit('clearTemporaryChanges')
+      }
+
+      const revert = () => {
+        commit('setOptionTemporarily', { name, value: oldValue })
+        commit('clearTemporaryChanges')
+      }
+
+      commit('setTemporaryChanges', {
+        timeoutId: setTimeout(revert, 10000),
+        confirm,
+        revert
+      })
+    },
     setOption ({ commit, dispatch, state }, { name, value }) {
       const exceptions = new Set([
         'useStreamingApi'
@@ -231,6 +261,7 @@ const config = {
           case 'sidebarColumnWidth':
           case 'contentColumnWidth':
           case 'notifsColumnWidth':
+          case 'textSize':
           case 'emojiReactionsScale':
             applyConfig(state)
             break

src/modules/instance.js

@@ -98,6 +98,8 @@ const defaultState = {
   sidebarRight: false,
   subjectLineBehavior: 'email',
   theme: 'pleroma-dark',
+  emojiReactionsScale: 1.0,
+  textSize: '14px',
   virtualScrolling: true,
   sensitiveByDefault: false,
   conversationDisplay: 'linear',

src/modules/interface.js

@@ -1,5 +1,8 @@
 const defaultState = {
   themeApplied: false,
+  temporaryChangesTimeoutId: null, // used for temporary options that revert after a timeout
+  temporaryChangesConfirm: () => {}, // used for applying temporary options
+  temporaryChangesRevert: () => {}, // used for reverting temporary options
   settingsModalState: 'hidden',
   settingsModalLoadedUser: false,
   settingsModalLoadedAdmin: false,
@@ -36,6 +39,17 @@ const interfaceMod = {
         state.settings.currentSaveStateNotice = { error: true, errorData: error }
       }
     },
+    setTemporaryChanges (state, { timeoutId, confirm, revert }) {
+      state.temporaryChangesTimeoutId = timeoutId
+      state.temporaryChangesConfirm = confirm
+      state.temporaryChangesRevert = revert
+    },
+    clearTemporaryChanges (state) {
+      clearTimeout(state.temporaryChangesTimeoutId)
+      state.temporaryChangesTimeoutId = null
+      state.temporaryChangesConfirm = () => {}
+      state.temporaryChangesRevert = () => {}
+    },
     setThemeApplied (state) {
       state.themeApplied = true
     },

src/services/api/api.service.js

@@ -108,6 +108,7 @@ const PLEROMA_POST_ANNOUNCEMENT_URL = '/api/v1/pleroma/admin/announcements'
 const PLEROMA_EDIT_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
 const PLEROMA_DELETE_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
 const PLEROMA_SCROBBLES_URL = id => `/api/v1/pleroma/accounts/${id}/scrobbles`
+const PLEROMA_STATUS_QUOTES_URL = id => `/api/v1/pleroma/statuses/${id}/quotes`
 const PLEROMA_USER_FAVORITES_TIMELINE_URL = id => `/api/v1/pleroma/accounts/${id}/favourites`
 
 const PLEROMA_ADMIN_CONFIG_URL = '/api/pleroma/admin/config'
@@ -685,6 +686,7 @@ const fetchTimeline = ({
   until = false,
   userId = false,
   listId = false,
+  statusId = false,
   tag = false,
   withMuted = false,
   replyVisibility = 'all',
@@ -702,7 +704,8 @@ const fetchTimeline = ({
     favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
     publicFavorites: PLEROMA_USER_FAVORITES_TIMELINE_URL,
     tag: MASTODON_TAG_TIMELINE_URL,
-    bookmarks: MASTODON_BOOKMARK_TIMELINE_URL
+    bookmarks: MASTODON_BOOKMARK_TIMELINE_URL,
+    quotes: PLEROMA_STATUS_QUOTES_URL
   }
   const isNotifications = timeline === 'notifications'
   const params = []
@@ -721,6 +724,10 @@ const fetchTimeline = ({
     url = url(listId)
   }
 
+  if (timeline === 'quotes') {
+    url = url(statusId)
+  }
+
   if (minId) {
     params.push(['min_id', minId])
   }

src/services/backend_interactor_service/backend_interactor_service.js

@@ -5,8 +5,8 @@ import followRequestFetcher from '../../services/follow_request_fetcher/follow_r
 import listsFetcher from '../../services/lists_fetcher/lists_fetcher.service.js'
 
 const backendInteractorService = credentials => ({
-  startFetchingTimeline ({ timeline, store, userId = false, listId = false, tag }) {
-    return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, tag })
+  startFetchingTimeline ({ timeline, store, userId = false, listId = false, statusId = false, tag }) {
+    return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, statusId, tag })
   },
 
   fetchTimeline (args) {

src/services/entity_normalizer/entity_normalizer.service.js

@@ -331,6 +331,7 @@ export const parseStatus = (data) => {
       output.quote_id = pleroma.quote_id ? pleroma.quote_id : (output.quote ? output.quote.id : undefined)
       output.quote_url = pleroma.quote_url
       output.quote_visible = pleroma.quote_visible
+      output.quotes_count = pleroma.quotes_count
     } else {
       output.text = data.content
       output.summary = data.spoiler_text

src/services/style_setter/style_setter.js

@@ -148,8 +148,19 @@ export const applyTheme = async (input, onFinish = (data) => {}) => {
   return Promise.resolve()
 }
 
-const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) =>
-  ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale })
+const configColumns = ({
+  sidebarColumnWidth,
+  contentColumnWidth,
+  notifsColumnWidth,
+  emojiReactionsScale,
+  textSize
+}) => ({
+  sidebarColumnWidth,
+  contentColumnWidth,
+  notifsColumnWidth,
+  emojiReactionsScale,
+  textSize
+})
 
 const defaultConfigColumns = configColumns(defaultState)
 
@@ -175,6 +186,7 @@ export const applyConfig = (config) => {
 
   styleSheet.toString()
   styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
+
   body.classList.remove('hidden')
 }
 

src/services/timeline_fetcher/timeline_fetcher.service.js

@@ -24,6 +24,7 @@ const fetchAndUpdate = ({
   showImmediately = false,
   userId = false,
   listId = false,
+  statusId = false,
   tag = false,
   until,
   since
@@ -47,6 +48,7 @@ const fetchAndUpdate = ({
 
   args.userId = userId
   args.listId = listId
+  args.statusId = statusId
   args.tag = tag
   args.withMuted = !hideMutedPosts
   if (loggedIn && ['friends', 'public', 'publicAndExternal'].includes(timeline)) {
@@ -78,15 +80,15 @@ const fetchAndUpdate = ({
     })
 }
 
-const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, tag = false }) => {
+const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, statusId = false, tag = false }) => {
   const rootState = store.rootState || store.state
   const timelineData = rootState.statuses.timelines[camelCase(timeline)]
   const showImmediately = timelineData.visibleStatuses.length === 0
   timelineData.userId = userId
   timelineData.listId = listId
-  fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, tag })
+  fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, statusId, tag })
   const boundFetchAndUpdate = () =>
-    fetchAndUpdate({ timeline, credentials, store, userId, listId, tag })
+    fetchAndUpdate({ timeline, credentials, store, userId, listId, statusId, tag })
   return promiseInterval(boundFetchAndUpdate, 10000)
 }
 const timelineFetcher = {