From 9c1814d12243f45cb67a797780a8c393f301080c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 22 Feb 2022 23:31:40 +0200
Subject: expert settings toggle + server-side settings

---
 src/components/settings_modal/tabs/general_tab.vue | 122 +++++++++++----------
 1 file changed, 67 insertions(+), 55 deletions(-)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index eba3b268..4accf0c1 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -27,7 +27,7 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="streaming">
+          <BooleanSetting path="streaming" expert="1">
             {{ $t('settings.streaming') }}
           </BooleanSetting>
           <ul
@@ -38,6 +38,7 @@
               <BooleanSetting
                 path="pauseOnUnfocused"
                 :disabled="!streaming"
+                expert="1"
               >
                 {{ $t('settings.pause_on_unfocused') }}
               </BooleanSetting>
@@ -45,7 +46,7 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting path="useStreamingApi">
+          <BooleanSetting path="useStreamingApi" expert="1">
             {{ $t('settings.useStreamingApi') }}
             <br>
             <small>
@@ -54,17 +55,22 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="virtualScrolling">
+          <BooleanSetting path="virtualScrolling" expert="1">
             {{ $t('settings.virtual_scrolling') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="autohideFloatingPostButton">
+          <BooleanSetting path="alwaysShowNewPostButton" expert="1">
+            {{ $t('settings.always_show_post_button') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="autohideFloatingPostButton" expert="1">
             {{ $t('settings.autohide_floating_post_button') }}
           </BooleanSetting>
         </li>
         <li v-if="instanceShoutboxPresent">
-          <BooleanSetting path="hideShoutbox">
+          <BooleanSetting path="hideShoutbox" expert="1">
             {{ $t('settings.hide_shoutbox') }}
           </BooleanSetting>
         </li>
@@ -79,13 +85,18 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="emojiReactionsOnTimeline">
+          <BooleanSetting path="emojiReactionsOnTimeline" expert="1">
             {{ $t('settings.emoji_reactions_on_timeline') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="serverSide_stripRichContent" expert="1" v-if="user">
+            {{ $t('settings.no_rich_text_description') }}
+          </BooleanSetting>
+        </li>
         <h3>{{ $t('settings.attachments') }}</h3>
         <li>
-          <BooleanSetting path="useContainFit">
+          <BooleanSetting path="useContainFit" expert="1">
             {{ $t('settings.use_contain_fit') }}
           </BooleanSetting>
         </li>
@@ -97,7 +108,7 @@
         <ul class="setting-list suboptions">
           <li>
             <BooleanSetting
-              path="preloadImage"
+              path="preloadImage" expert="1"
               :disabled="!hideNsfw"
             >
               {{ $t('settings.preload_images') }}
@@ -105,7 +116,7 @@
           </li>
           <li>
             <BooleanSetting
-              path="useOneClickNsfw"
+              path="useOneClickNsfw" expert="1"
               :disabled="!hideNsfw"
             >
               {{ $t('settings.use_one_click_nsfw') }}
@@ -113,7 +124,7 @@
           </li>
         </ul>
         <li>
-          <BooleanSetting path="loopVideo">
+          <BooleanSetting path="loopVideo" expert="1">
             {{ $t('settings.loop_video') }}
           </BooleanSetting>
           <ul
@@ -122,7 +133,7 @@
           >
             <li>
               <BooleanSetting
-                path="loopVideoSilentOnly"
+                path="loopVideoSilentOnly" expert="1"
                 :disabled="!loopVideo || !loopSilentAvailable"
               >
                 {{ $t('settings.loop_video_silent_only') }}
@@ -137,21 +148,11 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting path="playVideosInModal">
+          <BooleanSetting path="playVideosInModal" expert="1">
             {{ $t('settings.play_videos_in_modal') }}
           </BooleanSetting>
         </li>
-        <h3>{{ $t('settings.fun') }}</h3>
-        <li>
-          <BooleanSetting path="greentext">
-            {{ $t('settings.greentext') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="mentionLinkShowYous">
-            {{ $t('settings.show_yous') }}
-          </BooleanSetting>
-        </li>
+        <h3>{{ $t('settings.mention_links') }}</h3>
         <li>
           <ChoiceSetting
             id="mentionLinkDisplay"
@@ -164,15 +165,14 @@
         <ul
           class="setting-list suboptions"
         >
-          <li
-            v-if="mentionLinkDisplay === 'short'"
-          >
-            <BooleanSetting path="mentionLinkShowTooltip">
+          <li v-if="mentionLinkDisplay === 'short'">
+            <BooleanSetting path="mentionLinkShowTooltip" expert="1">
               {{ $t('settings.mention_link_show_tooltip') }}
             </BooleanSetting>
           </li>
+        </ul>
           <li>
-            <BooleanSetting path="useAtIcon">
+            <BooleanSetting path="useAtIcon" expert="1">
               {{ $t('settings.use_at_icon') }}
             </BooleanSetting>
           </li>
@@ -182,29 +182,56 @@
             </BooleanSetting>
           </li>
           <li>
-            <BooleanSetting path="mentionLinkFadeDomain">
+            <BooleanSetting path="mentionLinkFadeDomain" expert="1">
               {{ $t('settings.mention_link_fade_domain') }}
             </BooleanSetting>
           </li>
-          <li>
-            <BooleanSetting path="mentionLinkBoldenYou">
+          <li v-if="user">
+            <BooleanSetting path="mentionLinkBoldenYou" expert="1">
               {{ $t('settings.mention_link_bolden_you') }}
             </BooleanSetting>
           </li>
-        </ul>
+        <h3 v-if="expertLevel > 0">{{ $t('settings.fun') }}</h3>
+        <li>
+          <BooleanSetting path="greentext" expert="1">
+            {{ $t('settings.greentext') }}
+          </BooleanSetting>
+        </li>
+        <li v-if="user">
+          <BooleanSetting path="mentionLinkShowYous" expert="1">
+            {{ $t('settings.show_yous') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
 
-    <div class="setting-item">
+    <div class="setting-item" v-if="user">
       <h2>{{ $t('settings.composing') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="scopeCopy">
+          <label for="default-vis">
+            {{ $t('settings.default_vis') }} <ServerSideIndicator :serverSide="true"/>
+            <ScopeSelector
+              class="scope-selector"
+              :show-all="true"
+              :user-default="serverSide_defaultScope"
+              :initial-scope="serverSide_defaultScope"
+              :on-scope-change="changeDefaultScope"
+            />
+          </label>
+        </li>
+        <li>
+          <BooleanSetting path="serverSide_defaultNSFW">
+            {{ $t('settings.sensitive_by_default') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="scopeCopy" expert="1">
             {{ $t('settings.scope_copy') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="alwaysShowSubjectInput">
+          <BooleanSetting path="alwaysShowSubjectInput" expert="1">
             {{ $t('settings.subject_input_always_show') }}
           </BooleanSetting>
         </li>
@@ -213,6 +240,7 @@
             id="subjectLineBehavior"
             path="subjectLineBehavior"
             :options="subjectLineOptions"
+            expert="1"
           >
             {{ $t('settings.subject_line_behavior') }}
           </ChoiceSetting>
@@ -227,43 +255,27 @@
           </ChoiceSetting>
         </li>
         <li>
-          <BooleanSetting path="minimalScopesMode">
+          <BooleanSetting path="minimalScopesMode" expert="1">
             {{ $t('settings.minimal_scopes_mode') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="sensitiveByDefault">
-            {{ $t('settings.sensitive_by_default') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="alwaysShowNewPostButton">
+          <BooleanSetting path="alwaysShowNewPostButton" expert="1">
             {{ $t('settings.always_show_post_button') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="autohideFloatingPostButton">
+          <BooleanSetting path="autohideFloatingPostButton" expert="1">
             {{ $t('settings.autohide_floating_post_button') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="padEmoji">
+          <BooleanSetting path="padEmoji" expert="1">
             {{ $t('settings.pad_emoji') }}
           </BooleanSetting>
         </li>
       </ul>
     </div>
-
-    <div class="setting-item">
-      <h2>{{ $t('settings.notifications') }}</h2>
-      <ul class="setting-list">
-        <li>
-          <BooleanSetting path="webPushNotifications">
-            {{ $t('settings.enable_web_push_notifications') }}
-          </BooleanSetting>
-        </li>
-      </ul>
-    </div>
   </div>
 </template>
 
-- 
cgit v1.2.3-70-g09d2


From f626da838a7abeb3a2d3cd5f71ee4eb2ca272361 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 24 Feb 2022 15:00:08 +0200
Subject: revert to using local setting for default nsfw since backend is
 broken

---
 src/components/post_status_form/post_status_form.js | 1 +
 src/components/settings_modal/tabs/general_tab.vue  | 3 ++-
 src/modules/serverSideConfig.js                     | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index fe07309f..9d7bbd75 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -117,6 +117,7 @@ const PostStatusForm = {
       ? this.copyMessageScope
       : this.$store.state.users.currentUser.default_scope
 
+    // const { defaultNSFW: sensitiveByDefault } = this.$store.state.serverSideConfig
     const { postContentType: contentType, sensitiveByDefault } = this.$store.getters.mergedConfig
 
     return {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 4accf0c1..5db70d77 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -221,7 +221,8 @@
           </label>
         </li>
         <li>
-          <BooleanSetting path="serverSide_defaultNSFW">
+          <!-- <BooleanSetting path="serverSide_defaultNSFW"> -->
+          <BooleanSetting path="sensitiveByDefault">
             {{ $t('settings.sensitive_by_default') }}
           </BooleanSetting>
         </li>
diff --git a/src/modules/serverSideConfig.js b/src/modules/serverSideConfig.js
index 75ea91be..ea2dc5e3 100644
--- a/src/modules/serverSideConfig.js
+++ b/src/modules/serverSideConfig.js
@@ -2,7 +2,7 @@ import { get, set } from 'lodash'
 
 export const settingsMapGet = {
   'defaultScope': 'source.privacy',
-  'defaultNSFW': 'source.sensitive',
+  'defaultNSFW': 'source.sensitive', // BROKEN: pleroma/pleroma#2837
   'stripRichContent': 'source.pleroma.no_rich_content',
   // Privacy
   'locked': 'locked',
-- 
cgit v1.2.3-70-g09d2


From e3d602fdccb0dfe211fd3950210cdf8fda43bf95 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 28 Feb 2022 17:45:07 +0200
Subject: revert changes related to streaming/firehose setting, reword it so
 it's not confused with websocket streaming

---
 src/components/settings_modal/tabs/general_tab.vue | 3 +--
 src/i18n/en.json                                   | 4 ++--
 src/modules/config.js                              | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 5db70d77..7944b03c 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -27,7 +27,7 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="streaming" expert="1">
+          <BooleanSetting path="streaming" >
             {{ $t('settings.streaming') }}
           </BooleanSetting>
           <ul
@@ -38,7 +38,6 @@
               <BooleanSetting
                 path="pauseOnUnfocused"
                 :disabled="!streaming"
-                expert="1"
               >
                 {{ $t('settings.pause_on_unfocused') }}
               </BooleanSetting>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a66aaa0b..da5e662d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -435,7 +435,7 @@
     "valid_until": "Valid until",
     "revoke_token": "Revoke",
     "panelRadius": "Panels",
-    "pause_on_unfocused": "Pause streaming when tab is not focused",
+    "pause_on_unfocused": "Pause when tab is not focused",
     "presets": "Presets",
     "profile_background": "Profile background",
     "profile_banner": "Profile banner",
@@ -473,7 +473,7 @@
     "post_status_content_type": "Post status content type",
     "sensitive_by_default": "Mark posts as sensitive by default",
     "stop_gifs": "Pause animated images until you hover on them",
-    "streaming": "Enable automatic streaming of new posts when scrolled to the top",
+    "streaming": "Automatically show new posts when scrolled to the top",
     "user_mutes": "Users",
     "useStreamingApi": "Receive posts and notifications real-time",
     "useStreamingApiWarning": "(Not recommended, experimental, known to skip posts)",
diff --git a/src/modules/config.js b/src/modules/config.js
index e5321507..86601564 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -37,7 +37,7 @@ export const defaultState = {
   preloadImage: true,
   loopVideo: true,
   loopVideoSilentOnly: true,
-  streaming: true,
+  streaming: false,
   emojiReactionsOnTimeline: true,
   alwaysShowNewPostButton: false,
   autohideFloatingPostButton: false,
-- 
cgit v1.2.3-70-g09d2


From 77bb0b553062b91a69fbf92ce7540565f098951f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 28 Feb 2022 18:23:32 +0200
Subject: lint

---
 src/components/attachment/attachment.vue           |  19 ++-
 src/components/gallery/gallery.vue                 |   4 +-
 .../settings_modal/helpers/boolean_setting.vue     |   4 +-
 .../settings_modal/helpers/choice_setting.vue      |   4 +-
 src/components/settings_modal/settings_modal.vue   |   4 +-
 .../settings_modal/tabs/filtering_tab.vue          |  16 +-
 src/components/settings_modal/tabs/general_tab.js  |   2 +-
 src/components/settings_modal/tabs/general_tab.vue | 167 +++++++++++++++------
 .../settings_modal/tabs/notifications_tab.vue      |  15 +-
 src/components/settings_modal/tabs/profile_tab.vue |   7 +-
 10 files changed, 168 insertions(+), 74 deletions(-)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 59173759..c4399f30 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -81,56 +81,56 @@
         <button
           v-if="type === 'flash' && flashLoaded"
           class="button-unstyled attachment-button"
-          @click.prevent="stopFlash"
           :title="$t('status.attachment_stop_flash')"
+          @click.prevent="stopFlash"
         >
           <FAIcon icon="stop" />
         </button>
         <button
           v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'"
           class="button-unstyled attachment-button"
-          @click.prevent="toggleDescription"
           :title="$t('status.show_attachment_description')"
+          @click.prevent="toggleDescription"
         >
           <FAIcon icon="align-right" />
         </button>
         <button
           v-if="!useModal && type !== 'unknown'"
           class="button-unstyled attachment-button"
-          @click.prevent="openModalForce"
           :title="$t('status.show_attachment_in_modal')"
+          @click.prevent="openModalForce"
         >
           <FAIcon icon="search-plus" />
         </button>
         <button
           v-if="nsfw && hideNsfwLocal"
           class="button-unstyled attachment-button"
-          @click.prevent="toggleHidden"
           :title="$t('status.hide_attachment')"
+          @click.prevent="toggleHidden"
         >
           <FAIcon icon="times" />
         </button>
         <button
           v-if="shiftUp"
           class="button-unstyled attachment-button"
-          @click.prevent="onShiftUp"
           :title="$t('status.move_up')"
+          @click.prevent="onShiftUp"
         >
           <FAIcon icon="chevron-left" />
         </button>
         <button
           v-if="shiftDn"
           class="button-unstyled attachment-button"
-          @click.prevent="onShiftDn"
           :title="$t('status.move_down')"
+          @click.prevent="onShiftDn"
         >
           <FAIcon icon="chevron-right" />
         </button>
         <button
           v-if="remove"
           class="button-unstyled attachment-button"
-          @click.prevent="onRemove"
           :title="$t('status.remove_attachment')"
+          @click.prevent="onRemove"
         >
           <FAIcon icon="trash-alt" />
         </button>
@@ -160,7 +160,10 @@
         :href="attachment.url"
         target="_blank"
       >
-        <FAIcon size="5x" :icon="placeholderIconClass" />
+        <FAIcon
+          size="5x"
+          :icon="placeholderIconClass"
+        />
         <p>
           {{ localDescription }}
         </p>
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index f9cad8a9..f2e1b5ce 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -26,8 +26,8 @@
             :size="size"
             :editable="editable"
             :remove="removeAttachment"
-            :shiftUp="!(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment"
-            :shiftDn="!(attachmentIndex === row.items.length - 1 && rowIndex === rows.length - 1) && shiftDnAttachment"
+            :shift-up="!(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment"
+            :shift-dn="!(attachmentIndex === row.items.length - 1 && rowIndex === rows.length - 1) && shiftDnAttachment"
             :edit="editAttachment"
             :description="descriptions && descriptions[attachment.id]"
             :hide-description="size === 'small' || tooManyAttachments && hidingLong"
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 3a7bd805..e0d825f2 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -1,7 +1,7 @@
 <template>
   <label
-    class="BooleanSetting"
     v-if="matchesExpertLevel"
+    class="BooleanSetting"
   >
     <Checkbox
       :checked="state"
@@ -14,7 +14,7 @@
       >
         <slot />
       </span>
-      <ModifiedIndicator :changed="isChanged" /><ServerSideIndicator :serverSide="isServerSide" /> </Checkbox>
+      <ModifiedIndicator :changed="isChanged" /><ServerSideIndicator :server-side="isServerSide" /> </Checkbox>
   </label>
 </template>
 
diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
index 845886ca..54f5d0a7 100644
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@@ -1,7 +1,7 @@
 <template>
   <label
-    class="ChoiceSetting"
     v-if="matchesExpertLevel"
+    class="ChoiceSetting"
   >
     <slot />
     <Select
@@ -19,7 +19,7 @@
       </option>
     </Select>
     <ModifiedIndicator :changed="isChanged" />
-    <ServerSideIndicator :serverSide="isServerSide" />
+    <ServerSideIndicator :server-side="isServerSide" />
   </label>
 </template>
 
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 0aad1abb..1805c77f 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -109,8 +109,8 @@
           </template>
         </Popover>
 
-        <Checkbox v-model="expertLevel" >
-          {{ $t("settings.expert_mode")}}
+        <Checkbox v-model="expertLevel">
+          {{ $t("settings.expert_mode") }}
         </Checkbox>
       </div>
     </div>
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 0352e887..e60a8a85 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -21,8 +21,8 @@
             </li>
             <li>
               <BooleanSetting
-                :disabled="hideFilteredStatuses"
                 v-if="user"
+                :disabled="hideFilteredStatuses"
                 path="hideMutedThreads"
               >
                 {{ $t('settings.hide_muted_threads') }}
@@ -30,8 +30,8 @@
             </li>
             <li>
               <BooleanSetting
-                :disabled="hideFilteredStatuses"
                 v-if="user"
+                :disabled="hideFilteredStatuses"
                 path="hideMutedPosts"
               >
                 {{ $t('settings.hide_muted_posts') }}
@@ -40,15 +40,18 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting path="hidePostStats" expert="1">
+          <BooleanSetting
+            path="hidePostStats"
+            expert="1"
+          >
             {{ $t('settings.hide_post_stats') }}
           </BooleanSetting>
         </li>
         <ChoiceSetting
+          v-if="user"
           id="replyVisibility"
           path="replyVisibility"
           :options="replyVisibilityOptions"
-          v-if="user"
         >
           {{ $t('settings.replies_in_timeline') }}
         </ChoiceSetting>
@@ -87,7 +90,10 @@
         </li>
       </ul>
     </div>
-    <div class="setting-item" v-if="expertLevel > 0">
+    <div
+      v-if="expertLevel > 0"
+      class="setting-item"
+    >
       <h2>{{ $t('settings.user_profiles') }}</h2>
       <ul class="setting-list">
         <li>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 9e4e282f..fe7deb6e 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -41,7 +41,7 @@ const GeneralTab = {
     ChoiceSetting,
     InterfaceLanguageSwitcher,
     ScopeSelector,
-    ServerSideIndicator,
+    ServerSideIndicator
   },
   computed: {
     postFormats () {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 7944b03c..d4196c3d 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -27,7 +27,7 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="streaming" >
+          <BooleanSetting path="streaming">
             {{ $t('settings.streaming') }}
           </BooleanSetting>
           <ul
@@ -45,7 +45,10 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting path="useStreamingApi" expert="1">
+          <BooleanSetting
+            path="useStreamingApi"
+            expert="1"
+          >
             {{ $t('settings.useStreamingApi') }}
             <br>
             <small>
@@ -54,22 +57,34 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="virtualScrolling" expert="1">
+          <BooleanSetting
+            path="virtualScrolling"
+            expert="1"
+          >
             {{ $t('settings.virtual_scrolling') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="alwaysShowNewPostButton" expert="1">
+          <BooleanSetting
+            path="alwaysShowNewPostButton"
+            expert="1"
+          >
             {{ $t('settings.always_show_post_button') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="autohideFloatingPostButton" expert="1">
+          <BooleanSetting
+            path="autohideFloatingPostButton"
+            expert="1"
+          >
             {{ $t('settings.autohide_floating_post_button') }}
           </BooleanSetting>
         </li>
         <li v-if="instanceShoutboxPresent">
-          <BooleanSetting path="hideShoutbox" expert="1">
+          <BooleanSetting
+            path="hideShoutbox"
+            expert="1"
+          >
             {{ $t('settings.hide_shoutbox') }}
           </BooleanSetting>
         </li>
@@ -84,18 +99,28 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="emojiReactionsOnTimeline" expert="1">
+          <BooleanSetting
+            path="emojiReactionsOnTimeline"
+            expert="1"
+          >
             {{ $t('settings.emoji_reactions_on_timeline') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_stripRichContent" expert="1" v-if="user">
+          <BooleanSetting
+            v-if="user"
+            path="serverSide_stripRichContent"
+            expert="1"
+          >
             {{ $t('settings.no_rich_text_description') }}
           </BooleanSetting>
         </li>
         <h3>{{ $t('settings.attachments') }}</h3>
         <li>
-          <BooleanSetting path="useContainFit" expert="1">
+          <BooleanSetting
+            path="useContainFit"
+            expert="1"
+          >
             {{ $t('settings.use_contain_fit') }}
           </BooleanSetting>
         </li>
@@ -107,7 +132,8 @@
         <ul class="setting-list suboptions">
           <li>
             <BooleanSetting
-              path="preloadImage" expert="1"
+              path="preloadImage"
+              expert="1"
               :disabled="!hideNsfw"
             >
               {{ $t('settings.preload_images') }}
@@ -115,7 +141,8 @@
           </li>
           <li>
             <BooleanSetting
-              path="useOneClickNsfw" expert="1"
+              path="useOneClickNsfw"
+              expert="1"
               :disabled="!hideNsfw"
             >
               {{ $t('settings.use_one_click_nsfw') }}
@@ -123,7 +150,10 @@
           </li>
         </ul>
         <li>
-          <BooleanSetting path="loopVideo" expert="1">
+          <BooleanSetting
+            path="loopVideo"
+            expert="1"
+          >
             {{ $t('settings.loop_video') }}
           </BooleanSetting>
           <ul
@@ -132,7 +162,8 @@
           >
             <li>
               <BooleanSetting
-                path="loopVideoSilentOnly" expert="1"
+                path="loopVideoSilentOnly"
+                expert="1"
                 :disabled="!loopVideo || !loopSilentAvailable"
               >
                 {{ $t('settings.loop_video_silent_only') }}
@@ -147,7 +178,10 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting path="playVideosInModal" expert="1">
+          <BooleanSetting
+            path="playVideosInModal"
+            expert="1"
+          >
             {{ $t('settings.play_videos_in_modal') }}
           </BooleanSetting>
         </li>
@@ -165,51 +199,74 @@
           class="setting-list suboptions"
         >
           <li v-if="mentionLinkDisplay === 'short'">
-            <BooleanSetting path="mentionLinkShowTooltip" expert="1">
+            <BooleanSetting
+              path="mentionLinkShowTooltip"
+              expert="1"
+            >
               {{ $t('settings.mention_link_show_tooltip') }}
             </BooleanSetting>
           </li>
         </ul>
-          <li>
-            <BooleanSetting path="useAtIcon" expert="1">
-              {{ $t('settings.use_at_icon') }}
-            </BooleanSetting>
-          </li>
-          <li>
-            <BooleanSetting path="mentionLinkShowAvatar">
-              {{ $t('settings.mention_link_show_avatar') }}
-            </BooleanSetting>
-          </li>
-          <li>
-            <BooleanSetting path="mentionLinkFadeDomain" expert="1">
-              {{ $t('settings.mention_link_fade_domain') }}
-            </BooleanSetting>
-          </li>
-          <li v-if="user">
-            <BooleanSetting path="mentionLinkBoldenYou" expert="1">
-              {{ $t('settings.mention_link_bolden_you') }}
-            </BooleanSetting>
-          </li>
-        <h3 v-if="expertLevel > 0">{{ $t('settings.fun') }}</h3>
         <li>
-          <BooleanSetting path="greentext" expert="1">
+          <BooleanSetting
+            path="useAtIcon"
+            expert="1"
+          >
+            {{ $t('settings.use_at_icon') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="mentionLinkShowAvatar">
+            {{ $t('settings.mention_link_show_avatar') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="mentionLinkFadeDomain"
+            expert="1"
+          >
+            {{ $t('settings.mention_link_fade_domain') }}
+          </BooleanSetting>
+        </li>
+        <li v-if="user">
+          <BooleanSetting
+            path="mentionLinkBoldenYou"
+            expert="1"
+          >
+            {{ $t('settings.mention_link_bolden_you') }}
+          </BooleanSetting>
+        </li>
+        <h3 v-if="expertLevel > 0">
+          {{ $t('settings.fun') }}
+        </h3>
+        <li>
+          <BooleanSetting
+            path="greentext"
+            expert="1"
+          >
             {{ $t('settings.greentext') }}
           </BooleanSetting>
         </li>
         <li v-if="user">
-          <BooleanSetting path="mentionLinkShowYous" expert="1">
+          <BooleanSetting
+            path="mentionLinkShowYous"
+            expert="1"
+          >
             {{ $t('settings.show_yous') }}
           </BooleanSetting>
         </li>
       </ul>
     </div>
 
-    <div class="setting-item" v-if="user">
+    <div
+      v-if="user"
+      class="setting-item"
+    >
       <h2>{{ $t('settings.composing') }}</h2>
       <ul class="setting-list">
         <li>
           <label for="default-vis">
-            {{ $t('settings.default_vis') }} <ServerSideIndicator :serverSide="true"/>
+            {{ $t('settings.default_vis') }} <ServerSideIndicator :server-side="true" />
             <ScopeSelector
               class="scope-selector"
               :show-all="true"
@@ -226,12 +283,18 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="scopeCopy" expert="1">
+          <BooleanSetting
+            path="scopeCopy"
+            expert="1"
+          >
             {{ $t('settings.scope_copy') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="alwaysShowSubjectInput" expert="1">
+          <BooleanSetting
+            path="alwaysShowSubjectInput"
+            expert="1"
+          >
             {{ $t('settings.subject_input_always_show') }}
           </BooleanSetting>
         </li>
@@ -255,22 +318,34 @@
           </ChoiceSetting>
         </li>
         <li>
-          <BooleanSetting path="minimalScopesMode" expert="1">
+          <BooleanSetting
+            path="minimalScopesMode"
+            expert="1"
+          >
             {{ $t('settings.minimal_scopes_mode') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="alwaysShowNewPostButton" expert="1">
+          <BooleanSetting
+            path="alwaysShowNewPostButton"
+            expert="1"
+          >
             {{ $t('settings.always_show_post_button') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="autohideFloatingPostButton" expert="1">
+          <BooleanSetting
+            path="autohideFloatingPostButton"
+            expert="1"
+          >
             {{ $t('settings.autohide_floating_post_button') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="padEmoji" expert="1">
+          <BooleanSetting
+            path="padEmoji"
+            expert="1"
+          >
             {{ $t('settings.pad_emoji') }}
           </BooleanSetting>
         </li>
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index 5e9ce91e..86be6095 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -46,16 +46,25 @@
       </ul>
     </div>
 
-    <div class="setting-item" v-if="expertLevel > 0">
+    <div
+      v-if="expertLevel > 0"
+      class="setting-item"
+    >
       <h2>{{ $t('settings.notification_setting_privacy') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="webPushNotifications" expert="1">
+          <BooleanSetting
+            path="webPushNotifications"
+            expert="1"
+          >
             {{ $t('settings.enable_web_push_notifications') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_webPushHideContents" expert="1">
+          <BooleanSetting
+            path="serverSide_webPushHideContents"
+            expert="1"
+          >
             {{ $t('settings.notification_setting_hide_notification_contents') }}
           </BooleanSetting>
         </li>
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 699fdcf4..e00f6e5b 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -101,7 +101,8 @@
       <p class="visibility-notice">
         {{ $t('settings.avatar_size_instruction') }}
       </p>
-      <div class="current-avatar-container"> <img
+      <div class="current-avatar-container">
+        <img
           :src="user.profile_image_url_original"
           class="current-avatar"
         >
@@ -243,7 +244,7 @@
               <BooleanSetting
                 path="serverSide_hideFollowersCount"
                 :disabled="!serverSide_hideFollowers"
-                >
+              >
                 {{ $t('settings.hide_followers_count_description') }}
               </BooleanSetting>
             </li>
@@ -261,7 +262,7 @@
               <BooleanSetting
                 path="serverSide_hideFollowsCount"
                 :disabled="!serverSide_hideFollows"
-                >
+              >
                 {{ $t('settings.hide_follows_count_description') }}
               </BooleanSetting>
             </li>
-- 
cgit v1.2.3-70-g09d2


From 0582f19e7c2c6f916b427d5ecfbbb571178ce841 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 6 Aug 2021 20:18:27 -0400
Subject: Add tree-style thread display

---
 src/components/conversation/conversation.js        | 60 +++++++++++++++++++++-
 src/components/conversation/conversation.vue       | 59 ++++++++++++++-------
 src/components/settings_modal/tabs/general_tab.js  |  5 ++
 src/components/settings_modal/tabs/general_tab.vue |  9 ++++
 src/components/thread_tree/thread_tree.js          | 52 +++++++++++++++++++
 src/components/thread_tree/thread_tree.vue         | 55 ++++++++++++++++++++
 src/modules/config.js                              |  4 +-
 src/modules/instance.js                            |  1 +
 8 files changed, 224 insertions(+), 21 deletions(-)
 create mode 100644 src/components/thread_tree/thread_tree.js
 create mode 100644 src/components/thread_tree/thread_tree.vue

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 069c0b40..e663ba15 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -1,5 +1,8 @@
 import { reduce, filter, findIndex, clone, get } from 'lodash'
 import Status from '../status/status.vue'
+import ThreadTree from '../thread_tree/thread_tree.vue'
+
+const debug = console.log
 
 const sortById = (a, b) => {
   const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
@@ -53,6 +56,15 @@ const conversation = {
     }
   },
   computed: {
+    displayStyle () {
+      return this.$store.state.config.conversationDisplay
+    },
+    isTreeView () {
+      return this.displayStyle === 'tree'
+    },
+    isLinearView () {
+      return this.displayStyle === 'linear'
+    },
     hideStatus () {
       if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
         return this.virtualHidden && this.$refs.statusComponent[0].suspendable
@@ -90,6 +102,49 @@ const conversation = {
 
       return sortAndFilterConversation(conversation, this.status)
     },
+    threadTree () {
+      const reverseLookupTable = this.conversation.reduce((table, status, index) => {
+        table[status.id] = index
+        return table
+      }, {})
+
+      const threads = this.conversation.reduce((a, cur) => {
+        const id = cur.id
+        a.forest[id] = this.getReplies(id)
+          .map(s => s.id)
+          .sort((a, b) => reverseLookupTable[a] - reverseLookupTable[b])
+
+        a.topLevel = a.topLevel.filter(k => a.forest[id].contains(k))
+        return a
+      }, {
+        forest: {},
+        topLevel: this.conversation.map(s => s.id)
+      })
+
+      const walk = (forest, topLevel, depth = 0, processed = {}) => topLevel.map(id => {
+        if (processed[id]) {
+          return []
+        }
+
+        processed[id] = true
+        return [{
+          status: this.conversation[reverseLookupTable[id]],
+          id,
+          depth
+        }, walk(forest, forest[child], depth + 1, processed)].reduce((a, b) => a.concat(b), [])
+      }).reduce((a, b) => a.concat(b), [])
+
+      const linearized = walk(threads.forest, threads.topLevel)
+
+      return linearized
+    },
+    topLevel () {
+      const topLevel = this.conversation.reduce((tl, cur) =>
+        tl.filter(k => this.getReplies(cur.id).map(v => v.id).indexOf(k.id) === -1), this.conversation)
+      debug("toplevel =", topLevel)
+      debug("toplevel =", topLevel)
+      return topLevel
+    },
     replies () {
       let i = 1
       // eslint-disable-next-line camelcase
@@ -109,7 +164,7 @@ const conversation = {
       }, {})
     },
     isExpanded () {
-      return this.expanded || this.isPage
+      return !!(this.expanded || this.isPage)
     },
     hiddenStyle () {
       const height = (this.status && this.status.virtualHeight) || '120px'
@@ -117,7 +172,8 @@ const conversation = {
     }
   },
   components: {
-    Status
+    Status,
+    ThreadTree
   },
   watch: {
     statusId (newVal, oldVal) {
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 3fb26d92..cea5f88f 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -18,24 +18,47 @@
         {{ $t('timeline.collapse') }}
       </button>
     </div>
-    <status
-      v-for="status in conversation"
-      :key="status.id"
-      ref="statusComponent"
-      :inline-expanded="collapsable && isExpanded"
-      :statusoid="status"
-      :expandable="!isExpanded"
-      :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-      :focused="focused(status.id)"
-      :in-conversation="isExpanded"
-      :highlight="getHighlight()"
-      :replies="getReplies(status.id)"
-      :in-profile="inProfile"
-      :profile-user-id="profileUserId"
-      class="conversation-status status-fadein panel-body"
-      @goto="setHighlight"
-      @toggleExpanded="toggleExpanded"
-    />
+    <div v-if="isTreeView">
+      <thread-tree
+        v-for="status in topLevel"
+        :key="status.id"
+        ref="statusComponent"
+
+        :status="status"
+        :in-profile="inProfile"
+        :conversation="conversation"
+        :collapsable="collapsable"
+        :is-expanded="isExpanded"
+        :pinned-status-ids-object="pinnedStatusIdsObject"
+        :profile-user-id="profileUserId"
+
+        :focused="focused"
+        :get-replies="getReplies"
+        :get-highlight="getHighlight"
+        :set-highlight="setHighlight"
+        :toggle-expanded="toggleExpanded"
+      />
+    </div>
+    <div v-if="isLinearView">
+      <status
+        v-for="status in conversation"
+        :key="status.id"
+        ref="statusComponent"
+        :inline-expanded="collapsable && isExpanded"
+        :statusoid="status"
+        :expandable="!isExpanded"
+        :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+        :focused="focused(status.id)"
+        :in-conversation="isExpanded"
+        :highlight="getHighlight()"
+        :replies="getReplies(status.id)"
+        :in-profile="inProfile"
+        :profile-user-id="profileUserId"
+        class="conversation-status status-fadein panel-body"
+        @goto="setHighlight"
+        @toggleExpanded="toggleExpanded"
+      />
+    </div>
   </div>
   <div
     v-else
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 952c328d..abe8f6f7 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -20,6 +20,11 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
       })),
+      conversationDisplayOptions: ['tree', 'linear'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.conversation_display_${mode}`)
+      })),
       mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(mode => ({
         key: mode,
         value: mode,
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index eba3b268..8951c021 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -152,6 +152,15 @@
             {{ $t('settings.show_yous') }}
           </BooleanSetting>
         </li>
+        <li>
+          <ChoiceSetting
+            id="conversationDisplay"
+            path="conversationDisplay"
+            :options="conversationDisplayOptions"
+          >
+            {{ $t('settings.conversation_display') }}
+          </ChoiceSetting>
+        </li>
         <li>
           <ChoiceSetting
             id="mentionLinkDisplay"
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
new file mode 100644
index 00000000..4f95122a
--- /dev/null
+++ b/src/components/thread_tree/thread_tree.js
@@ -0,0 +1,52 @@
+import Status from '../status/status.vue'
+
+const debug = console.log
+
+const ThreadTree = {
+  components: {
+    Status
+  },
+  name: 'ThreadTree',
+  props: {
+    depth: Number,
+    status: Object,
+    inProfile: Boolean,
+    conversation: Array,
+    collapsable: Boolean,
+    isExpanded: Boolean,
+    pinnedStatusIdsObject: Object,
+    profileUserId: String,
+
+    focused: Function,
+    getHighlight: Function,
+    getReplies: Function,
+    setHighlight: Function,
+    toggleExpanded: Function
+  },
+  computed: {
+    reverseLookupTable () {
+      return this.conversation.reduce((table, status, index) => {
+        table[status.id] = index
+        return table
+      }, {})
+    },
+    currentReplies () {
+      debug('status:', this.status)
+      debug('getReplies:', this.getReplies(this.status.id))
+      return this.getReplies(this.status.id).map(({ id }) => this.statusById(id))
+    },
+  },
+  methods: {
+    statusById (id) {
+      return this.conversation[this.reverseLookupTable[id]]
+    },
+    collapseThread () {
+    },
+    showThread () {
+    },
+    showAllSubthreads () {
+    }
+  }
+}
+
+export default ThreadTree
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
new file mode 100644
index 00000000..8256eee6
--- /dev/null
+++ b/src/components/thread_tree/thread_tree.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="thread-tree panel-body">
+    <status
+      :key="status.id"
+      ref="statusComponent"
+      :inline-expanded="collapsable && isExpanded"
+      :statusoid="status"
+      :expandable="!isExpanded"
+      :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+      :focused="focused(status.id)"
+      :in-conversation="isExpanded"
+      :highlight="getHighlight()"
+      :replies="getReplies(status.id)"
+      :in-profile="inProfile"
+      :profile-user-id="profileUserId"
+      class="conversation-status status-fadein panel-body"
+      @goto="setHighlight"
+      @toggleExpanded="toggleExpanded"
+    />
+    <div
+      v-if="currentReplies.length"
+      class="thread-tree-replies"
+    >
+      <thread-tree
+        v-for="replyStatus in currentReplies"
+        :key="replyStatus.id"
+        ref="childComponent"
+        :status="replyStatus"
+
+        :in-profile="inProfile"
+        :conversation="conversation"
+        :collapsable="collapsable"
+        :is-expanded="isExpanded"
+        :pinned-status-ids-object="pinnedStatusIdsObject"
+        :profile-user-id="profileUserId"
+
+        :focused="focused"
+        :get-replies="getReplies"
+        :get-highlight="getHighlight"
+        :set-highlight="setHighlight"
+        :toggle-expanded="toggleExpanded"
+
+        class="conversation-status status-fadein panel-body"
+      />
+    </div>
+  </div>
+</template>
+
+<script src="./thread_tree.js"></script>
+
+<style lang="scss">
+.thread-tree-replies {
+  margin-left: 1em;
+}
+</style>
diff --git a/src/modules/config.js b/src/modules/config.js
index 20979174..ec75dbfb 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -12,6 +12,7 @@ const browserLocale = (window.navigator.language || 'en').split('-')[0]
 export const multiChoiceProperties = [
   'postContentType',
   'subjectLineBehavior',
+  'conversationDisplay', // tree | linear
   'mentionLinkDisplay' // short | full_for_remote | full
 ]
 
@@ -81,7 +82,8 @@ export const defaultState = {
   hidePostStats: undefined, // instance default
   hideUserStats: undefined, // instance default
   virtualScrolling: undefined, // instance default
-  sensitiveByDefault: undefined // instance default
+  sensitiveByDefault: undefined, // instance default
+  conversationDisplay: undefined // instance default
 }
 
 // caching the instance default properties
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 1abd784f..a160a557 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -53,6 +53,7 @@ const defaultState = {
   theme: 'pleroma-dark',
   virtualScrolling: true,
   sensitiveByDefault: false,
+  conversationDisplay: 'tree',
 
   // Nasty stuff
   customEmoji: [],
-- 
cgit v1.2.3-70-g09d2


From 2e54cf12c76e94f980fbe49f58c080a4a3d17ca4 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 7 Aug 2021 20:14:14 -0400
Subject: Add settings for max depth in thread

---
 src/components/conversation/conversation.js        | 15 ++++++++++-----
 src/components/settings_modal/tabs/general_tab.vue | 13 +++++++++++++
 src/modules/config.js                              |  3 ++-
 src/modules/instance.js                            |  1 +
 4 files changed, 26 insertions(+), 6 deletions(-)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 8e4eda51..853161df 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -74,7 +74,11 @@ const conversation = {
   },
   computed: {
     maxDepthToShowByDefault () {
-      return 4
+      // maxDepthInThread = max number of depths that is *visible*
+      // since our depth starts with 0 and "showing" means "showing children"
+      // there is a -2 here
+      const maxDepth = this.$store.getters.mergedConfig.maxDepthInThread - 2
+      return maxDepth >= 1 ? maxDepth : 1
     },
     displayStyle () {
       return this.$store.getters.mergedConfig.conversationDisplay
@@ -351,7 +355,8 @@ const conversation = {
         }
         this._diven = true
         const parentOrSelf = this.parentOrSelf(this.originalStatusId)
-        if (this.threadDisplayStatus[this.statusId] === 'hidden') {
+        // If current status is not visible
+        if (this.threadDisplayStatus[parentOrSelf] === 'hidden') {
           this.diveIntoStatus(parentOrSelf, /* preventScroll */ true)
           this.tryScrollTo(this.statusId)
         }
@@ -429,7 +434,7 @@ const conversation = {
     toggleStatusContentProperty (id, name) {
       this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
     },
-    leastShowingAncestor (id) {
+    leastVisibleAncestor (id) {
       let cur = id
       let parent = this.parentOf(cur)
       while (cur) {
@@ -453,14 +458,14 @@ const conversation = {
       const oldHighlight = this.highlight
       this.diveHistory = [...this.diveHistory.slice(0, this.diveHistory.length - 1)]
       if (oldHighlight) {
-        this.tryScrollTo(this.leastShowingAncestor(oldHighlight))
+        this.tryScrollTo(this.leastVisibleAncestor(oldHighlight))
       }
     },
     undive () {
       const oldHighlight = this.highlight
       this.diveHistory = []
       if (oldHighlight) {
-        this.tryScrollTo(this.leastShowingAncestor(oldHighlight))
+        this.tryScrollTo(this.leastVisibleAncestor(oldHighlight))
       } else {
         this.goToCurrent()
       }
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 8951c021..f97d92c3 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -161,6 +161,19 @@
             {{ $t('settings.conversation_display') }}
           </ChoiceSetting>
         </li>
+        <li v-if="conversationDisplay !== 'linear'">
+          <label for="maxDepthInThread">
+            {{ $t('settings.max_depth_in_thread') }}
+          </label>
+          <input
+            id="maxDepthInThread"
+            path.number="maxDepthInThread"
+            class="number-input"
+            type="number"
+            min="3"
+            step="1"
+          >
+        </li>
         <li>
           <ChoiceSetting
             id="mentionLinkDisplay"
diff --git a/src/modules/config.js b/src/modules/config.js
index ec75dbfb..b3c7e5ab 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -83,7 +83,8 @@ export const defaultState = {
   hideUserStats: undefined, // instance default
   virtualScrolling: undefined, // instance default
   sensitiveByDefault: undefined, // instance default
-  conversationDisplay: undefined // instance default
+  conversationDisplay: undefined, // instance default
+  maxDepthInThread: 6
 }
 
 // caching the instance default properties
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 8a5bbbd1..853be737 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -54,6 +54,7 @@ const defaultState = {
   virtualScrolling: true,
   sensitiveByDefault: false,
   conversationDisplay: 'simple_tree',
+  maxDepthInThread: 6,
 
   // Nasty stuff
   customEmoji: [],
-- 
cgit v1.2.3-70-g09d2


From 863255d52fdcbbabe45c86c7e36ebafc0f7e1c53 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 5 Sep 2021 16:35:47 -0400
Subject: Make position of other replies button a pref

---
 src/components/conversation/conversation.js        |  9 +++++
 src/components/conversation/conversation.vue       |  7 ++--
 src/components/settings_modal/tabs/general_tab.js  |  5 +++
 src/components/settings_modal/tabs/general_tab.vue | 40 +++++++++++++++-------
 src/components/status/status.js                    |  1 +
 src/components/status/status.vue                   | 15 +++++++-
 src/modules/config.js                              |  2 ++
 src/modules/instance.js                            |  1 +
 8 files changed, 63 insertions(+), 17 deletions(-)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 423930af..d4972fbc 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -92,6 +92,15 @@ const conversation = {
     isLinearView () {
       return this.displayStyle === 'linear'
     },
+    otherRepliesButtonPosition () {
+      return this.$store.getters.mergedConfig.conversationOtherRepliesButton
+    },
+    showOtherRepliesButtonBelowStatus () {
+      return this.otherRepliesButtonPosition === 'below'
+    },
+    showOtherRepliesButtonInsideStatus () {
+      return this.otherRepliesButtonPosition === 'inside'
+    },
     hideStatus () {
       if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
         return this.virtualHidden && this.$refs.statusComponent[0].suspendable
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index f0eb88c1..b3d97075 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -66,13 +66,14 @@
               :profile-user-id="profileUserId"
               class="conversation-status status-fadein panel-body"
 
-              :simple="treeViewIsSimple"
+              :simple-tree="treeViewIsSimple"
               :toggle-thread-display="toggleThreadDisplay"
               :thread-display-status="threadDisplayStatus"
               :show-thread-recursively="showThreadRecursively"
               :total-reply-count="totalReplyCount"
               :total-reply-depth="totalReplyDepth"
-              :dive="(!treeViewIsSimple) ? () => diveIntoStatus(status.id) : null"
+              :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
+              :dive="() => diveIntoStatus(status.id)"
 
               :controlled-showing-tall="statusContentProperties[status.id].showingTall"
               :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
@@ -85,7 +86,7 @@
               @toggleExpanded="toggleExpanded"
             />
             <div
-              v-if="getReplies(status.id).length > 1"
+              v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
               class="thread-ancestor-dive-box"
             >
               <div
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index c43abe8a..a963d204 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -25,6 +25,11 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.conversation_display_${mode}`)
       })),
+      conversationOtherRepliesButtonOptions: ['below', 'inside'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.conversation_other_replies_button_${mode}`)
+      })),
       mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(mode => ({
         key: mode,
         value: mode,
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index f97d92c3..d5ae7810 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -161,19 +161,33 @@
             {{ $t('settings.conversation_display') }}
           </ChoiceSetting>
         </li>
-        <li v-if="conversationDisplay !== 'linear'">
-          <label for="maxDepthInThread">
-            {{ $t('settings.max_depth_in_thread') }}
-          </label>
-          <input
-            id="maxDepthInThread"
-            path.number="maxDepthInThread"
-            class="number-input"
-            type="number"
-            min="3"
-            step="1"
-          >
-        </li>
+        <ul
+          v-if="conversationDisplay !== 'linear'"
+          class="setting-list suboptions"
+        >
+          <li>
+            <label for="maxDepthInThread">
+              {{ $t('settings.max_depth_in_thread') }}
+            </label>
+            <input
+              id="maxDepthInThread"
+              path.number="maxDepthInThread"
+              class="number-input"
+              type="number"
+              min="3"
+              step="1"
+            >
+          </li>
+          <li>
+            <ChoiceSetting
+              id="conversationOtherRepliesButton"
+              path="conversationOtherRepliesButton"
+              :options="conversationOtherRepliesButtonOptions"
+            >
+              {{ $t('settings.conversation_other_replies_button') }}
+            </ChoiceSetting>
+          </li>
+        </ul>
         <li>
           <ChoiceSetting
             id="mentionLinkDisplay"
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 15c2d029..700b9764 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -100,6 +100,7 @@ const Status = {
     'simpleTree',
     'controlledThreadDisplayStatus',
     'controlledToggleThreadDisplay',
+    'showOtherRepliesAsButton',
 
     'controlledShowingTall',
     'controlledToggleShowingTall',
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e4812711..bc0aeaf0 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -346,7 +346,20 @@
             v-if="inConversation && !isPreview && replies && replies.length"
             class="replies"
           >
-            <span class="faint">{{ $t('status.replies_list') }}</span>
+            <button
+              v-if="showOtherRepliesAsButton"
+              class="button-unstyled -link faint"
+              :title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
+              @click.prevent="dive"
+            >
+              {{ $t('status.replies_list') }}
+            </button>
+            <span
+              v-else
+              class="faint"
+            >
+              {{ $t('status.replies_list') }}
+            </span>
             <StatusPopover
               v-for="reply in replies"
               :key="reply.id"
diff --git a/src/modules/config.js b/src/modules/config.js
index b3c7e5ab..a111abca 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -13,6 +13,7 @@ export const multiChoiceProperties = [
   'postContentType',
   'subjectLineBehavior',
   'conversationDisplay', // tree | linear
+  'conversationOtherRepliesButton', // below | inside
   'mentionLinkDisplay' // short | full_for_remote | full
 ]
 
@@ -84,6 +85,7 @@ export const defaultState = {
   virtualScrolling: undefined, // instance default
   sensitiveByDefault: undefined, // instance default
   conversationDisplay: undefined, // instance default
+  conversationOtherRepliesButton: undefined, // instance default
   maxDepthInThread: 6
 }
 
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 853be737..cd17c23d 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -54,6 +54,7 @@ const defaultState = {
   virtualScrolling: true,
   sensitiveByDefault: false,
   conversationDisplay: 'simple_tree',
+  conversationOtherRepliesButton: 'below',
   maxDepthInThread: 6,
 
   // Nasty stuff
-- 
cgit v1.2.3-70-g09d2


From e7f5033c7d05038b116f7170fedc352a662cc646 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 6 Mar 2022 13:57:48 -0500
Subject: Split conversation display style into two different settings

linear => linear (now default)
simple_tree => tree / conversationTreeAdvanced=false
tree => tree / conversationTreeAdvanced=true
---
 src/components/conversation/conversation.js        | 4 ++--
 src/components/settings_modal/tabs/general_tab.js  | 2 +-
 src/components/settings_modal/tabs/general_tab.vue | 5 +++++
 src/modules/config.js                              | 1 +
 src/modules/instance.js                            | 3 ++-
 5 files changed, 11 insertions(+), 4 deletions(-)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index b9ebe7eb..46228e37 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -81,10 +81,10 @@ const conversation = {
       return this.$store.getters.mergedConfig.conversationDisplay
     },
     isTreeView () {
-      return this.displayStyle === 'tree' || this.displayStyle === 'simple_tree'
+      return !this.isLinearView
     },
     treeViewIsSimple () {
-      return this.displayStyle === 'simple_tree'
+      return !this.$store.getters.mergedConfig.conversationTreeAdvanced
     },
     isLinearView () {
       return this.displayStyle === 'linear'
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index a963d204..8ae0021c 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -20,7 +20,7 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
       })),
-      conversationDisplayOptions: ['tree', 'simple_tree', 'linear'].map(mode => ({
+      conversationDisplayOptions: ['tree', 'linear'].map(mode => ({
         key: mode,
         value: mode,
         label: this.$t(`settings.conversation_display_${mode}`)
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index d5ae7810..28b39d7b 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -165,6 +165,11 @@
           v-if="conversationDisplay !== 'linear'"
           class="setting-list suboptions"
         >
+          <li>
+            <BooleanSetting path="conversationTreeAdvanced">
+              {{ $t('settings.tree_advanced') }}
+            </BooleanSetting>
+          </li>
           <li>
             <label for="maxDepthInThread">
               {{ $t('settings.max_depth_in_thread') }}
diff --git a/src/modules/config.js b/src/modules/config.js
index a111abca..8cb3097c 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -85,6 +85,7 @@ export const defaultState = {
   virtualScrolling: undefined, // instance default
   sensitiveByDefault: undefined, // instance default
   conversationDisplay: undefined, // instance default
+  conversationTreeAdvanced: undefined, // instance default
   conversationOtherRepliesButton: undefined, // instance default
   maxDepthInThread: 6
 }
diff --git a/src/modules/instance.js b/src/modules/instance.js
index cd17c23d..6c5cb4b1 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -53,7 +53,8 @@ const defaultState = {
   theme: 'pleroma-dark',
   virtualScrolling: true,
   sensitiveByDefault: false,
-  conversationDisplay: 'simple_tree',
+  conversationDisplay: 'linear',
+  conversationTreeAdvanced: false,
   conversationOtherRepliesButton: 'below',
   maxDepthInThread: 6,
 
-- 
cgit v1.2.3-70-g09d2


From d157f6738195325c59870fe02df8fa16985c84af Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 6 Mar 2022 14:13:35 -0500
Subject: Make fading ancestors optional

---
 src/components/conversation/conversation.js        | 3 +++
 src/components/conversation/conversation.vue       | 4 ++--
 src/components/settings_modal/tabs/general_tab.vue | 5 +++++
 src/modules/config.js                              | 1 +
 src/modules/instance.js                            | 1 +
 5 files changed, 12 insertions(+), 2 deletions(-)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 46228e37..89ff2f6f 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -89,6 +89,9 @@ const conversation = {
     isLinearView () {
       return this.displayStyle === 'linear'
     },
+    shouldFadeAncestors () {
+      return this.$store.getters.mergedConfig.conversationTreeFadeAncestors
+    },
     otherRepliesButtonPosition () {
       return this.$store.getters.mergedConfig.conversationOtherRepliesButton
     },
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 73c613b9..3e96fba2 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -50,7 +50,7 @@
             v-for="status in ancestorsOf(diveRoot)"
             :key="status.id"
             class="thread-ancestor"
-            :class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1}"
+            :class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
           >
             <status
               ref="statusComponent"
@@ -210,7 +210,7 @@
     border-left: 2px solid var(--border, $fallback--border);
   }
 
-  .thread-ancestor .StatusContent {
+  .thread-ancestor.-faded .StatusContent {
     --link: var(--faintLink);
     --text: var(--faint);
     color: var(--text);
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 28b39d7b..6c108292 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -170,6 +170,11 @@
               {{ $t('settings.tree_advanced') }}
             </BooleanSetting>
           </li>
+          <li>
+            <BooleanSetting path="conversationTreeFadeAncestors">
+              {{ $t('settings.tree_fade_ancestors') }}
+            </BooleanSetting>
+          </li>
           <li>
             <label for="maxDepthInThread">
               {{ $t('settings.max_depth_in_thread') }}
diff --git a/src/modules/config.js b/src/modules/config.js
index 8cb3097c..acc71b80 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -87,6 +87,7 @@ export const defaultState = {
   conversationDisplay: undefined, // instance default
   conversationTreeAdvanced: undefined, // instance default
   conversationOtherRepliesButton: undefined, // instance default
+  conversationTreeFadeAncestors: undefined, // instance default
   maxDepthInThread: 6
 }
 
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 6c5cb4b1..f09dd0b3 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -56,6 +56,7 @@ const defaultState = {
   conversationDisplay: 'linear',
   conversationTreeAdvanced: false,
   conversationOtherRepliesButton: 'below',
+  conversationTreeFadeAncestors: false,
   maxDepthInThread: 6,
 
   // Nasty stuff
-- 
cgit v1.2.3-70-g09d2


From 551b8f3690bab1f53ec22ccf6963009a30fa45d0 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 7 Mar 2022 20:02:53 -0500
Subject: Fix "max depth in thread" setting

---
 .../settings_modal/helpers/integer_setting.js      | 37 ++++++++++++++++++++++
 .../settings_modal/helpers/integer_setting.vue     | 20 ++++++++++++
 .../settings_modal/tabs/filtering_tab.js           |  4 ++-
 .../settings_modal/tabs/filtering_tab.vue          | 15 +++------
 src/components/settings_modal/tabs/general_tab.js  |  2 ++
 src/components/settings_modal/tabs/general_tab.vue | 15 +++------
 6 files changed, 72 insertions(+), 21 deletions(-)
 create mode 100644 src/components/settings_modal/helpers/integer_setting.js
 create mode 100644 src/components/settings_modal/helpers/integer_setting.vue

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/settings_modal/helpers/integer_setting.js b/src/components/settings_modal/helpers/integer_setting.js
new file mode 100644
index 00000000..fa6569ab
--- /dev/null
+++ b/src/components/settings_modal/helpers/integer_setting.js
@@ -0,0 +1,37 @@
+import { get, set } from 'lodash'
+import ModifiedIndicator from './modified_indicator.vue'
+export default {
+  components: {
+    ModifiedIndicator
+  },
+  props: {
+    path: String,
+    disabled: Boolean,
+    min: Number
+  },
+  computed: {
+    pathDefault () {
+      const [firstSegment, ...rest] = this.path.split('.')
+      return [firstSegment + 'DefaultValue', ...rest].join('.')
+    },
+    state () {
+      const value = get(this.$parent, this.path)
+      if (value === undefined) {
+        return this.defaultState
+      } else {
+        return value
+      }
+    },
+    defaultState () {
+      return get(this.$parent, this.pathDefault)
+    },
+    isChanged () {
+      return this.state !== this.defaultState
+    }
+  },
+  methods: {
+    update (e) {
+      set(this.$parent, this.path, parseInt(e.target.value))
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/integer_setting.vue b/src/components/settings_modal/helpers/integer_setting.vue
new file mode 100644
index 00000000..8284abcc
--- /dev/null
+++ b/src/components/settings_modal/helpers/integer_setting.vue
@@ -0,0 +1,20 @@
+<template>
+  <span class="IntegerSetting">
+    <label :for="path">
+      <slot />
+    </label>
+    <input
+      :id="path"
+      class="number-input"
+      type="number"
+      step="1"
+      :disabled="disabled"
+      :min="min || 0"
+      :value="state"
+      @change="update"
+    >
+    <ModifiedIndicator :changed="isChanged" />
+  </span>
+</template>
+
+<script src="./integer_setting.js"></script>
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 4eaf4217..73413b48 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -1,6 +1,7 @@
 import { filter, trim } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
@@ -17,7 +18,8 @@ const FilteringTab = {
   },
   components: {
     BooleanSetting,
-    ChoiceSetting
+    ChoiceSetting,
+    IntegerSetting
   },
   computed: {
     ...SharedComputedObject(),
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 50ee20e0..eb1705e7 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -60,17 +60,12 @@
         </li>
         <h3>{{ $t('settings.attachments') }}</h3>
         <li>
-          <label for="maxThumbnails">
-            {{ $t('settings.max_thumbnails') }}
-          </label>
-          <input
-            id="maxThumbnails"
-            path.number="maxThumbnails"
-            class="number-input"
-            type="number"
-            min="0"
-            step="1"
+          <IntegerSetting
+            path="maxThumbnails"
+            :min="0"
           >
+            {{ $t('settings.max_thumbnails') }}
+          </IntegerSetting>
         </li>
         <li>
           <BooleanSetting path="hideAttachments">
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 8ae0021c..03ca99fa 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -1,5 +1,6 @@
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -47,6 +48,7 @@ const GeneralTab = {
   components: {
     BooleanSetting,
     ChoiceSetting,
+    IntegerSetting,
     InterfaceLanguageSwitcher
   },
   computed: {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 6c108292..ba01fdeb 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -176,17 +176,12 @@
             </BooleanSetting>
           </li>
           <li>
-            <label for="maxDepthInThread">
-              {{ $t('settings.max_depth_in_thread') }}
-            </label>
-            <input
-              id="maxDepthInThread"
-              path.number="maxDepthInThread"
-              class="number-input"
-              type="number"
-              min="3"
-              step="1"
+            <IntegerSetting
+              path="maxDepthInThread"
+              :min="3"
             >
+              {{ $t('settings.max_depth_in_thread') }}
+            </IntegerSetting>
           </li>
           <li>
             <ChoiceSetting
-- 
cgit v1.2.3-70-g09d2


From 726fdbea15009e930ce47faed1e4001b16234a46 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 13 Mar 2022 10:51:13 +0200
Subject: remove "experimental" label from streaming api

---
 src/components/settings_modal/tabs/general_tab.vue | 4 ----
 src/i18n/en.json                                   | 1 -
 2 files changed, 5 deletions(-)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index d4196c3d..ceb61655 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -50,10 +50,6 @@
             expert="1"
           >
             {{ $t('settings.useStreamingApi') }}
-            <br>
-            <small>
-              {{ $t('settings.useStreamingApiWarning') }}
-            </small>
           </BooleanSetting>
         </li>
         <li>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index da5e662d..05549682 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -476,7 +476,6 @@
     "streaming": "Automatically show new posts when scrolled to the top",
     "user_mutes": "Users",
     "useStreamingApi": "Receive posts and notifications real-time",
-    "useStreamingApiWarning": "(Not recommended, experimental, known to skip posts)",
     "text": "Text",
     "theme": "Theme",
     "theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
-- 
cgit v1.2.3-70-g09d2

