From 30f1c0b00f012d3833001fa49a3d7e03596ded54 Mon Sep 17 00:00:00 2001
From: Kayde Toy <goatarc@noreply.localhost>
Date: Thu, 24 Oct 2024 20:53:53 -0400
Subject: [PATCH] Add toggle to switch between "Classic" post mode and
 "Chostlike" post mode (#1)

Reviewed-on: https://git.pleasetf.me/PleaseTFMe/theta/pulls/1
Co-authored-by: Kayde Toy <goatarc@noreply.localhost>
Co-committed-by: Kayde Toy <goatarc@noreply.localhost>
---
 src/components/conversation/conversation.js   |  3 +
 src/components/conversation/conversation.vue  |  4 +-
 .../emoji_reactions/emoji_reactions.js        |  3 +
 .../emoji_reactions/emoji_reactions.vue       | 16 ++++-
 src/components/notification/notification.js   |  3 +
 src/components/notification/notification.vue  |  1 +
 src/components/popover/popover.vue            |  3 +-
 src/components/quote_card/quote_card.js       |  5 +-
 src/components/quote_card/quote_card.vue      | 20 ++++--
 .../settings_modal/tabs/general_tab.js        |  5 ++
 .../settings_modal/tabs/general_tab.vue       |  9 +++
 src/components/status/status.scss             | 68 ++++++++++++++++++-
 src/components/thread_tree/thread_tree.js     |  3 +
 src/components/thread_tree/thread_tree.vue    |  1 +
 src/i18n/en.json                              |  3 +
 src/modules/config.js                         |  1 +
 16 files changed, 133 insertions(+), 15 deletions(-)

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 68b90c72..53cfd0ce 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -82,6 +82,9 @@ const conversation = {
     streamingEnabled () {
       return this.mergedConfig.useStreamingApi && this.mastoUserSocketStatus === WSConnectionStatus.JOINED
     },
+    timelineStyle () {
+      return this.$store.getters.mergedConfig.timelineStyle
+    },
     displayStyle () {
       return this.$store.getters.mergedConfig.conversationDisplay
     },
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 61f1358a..e6cd3235 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -69,6 +69,7 @@
               :in-profile="inProfile"
               :profile-user-id="profileUserId"
               class="conversation-status status-fadein panel-body"
+              :class="timelineStyle"
 
               :simple-tree="treeViewIsSimple"
               :toggle-thread-display="toggleThreadDisplay"
@@ -173,6 +174,7 @@
           :in-profile="inProfile"
           :profile-user-id="profileUserId"
           class="conversation-status status-fadein panel-body"
+          :class="timelineStyle"
 
           :toggle-thread-display="toggleThreadDisplay"
           :thread-display-status="threadDisplayStatus"
@@ -243,7 +245,7 @@
     padding: var(--status-margin, $status-margin);
   }
 
-  .conversation-status {
+  .conversation-status.classic {
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: var(--border, $fallback--border);
diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index 94aa3734..42b74fb2 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -39,6 +39,9 @@ const EmojiReactions = {
         return acc
       }, {})
     },
+    timelineStyle () {
+      return this.$store.getters.mergedConfig.timelineStyle
+    },
     loggedIn () {
       return !!this.$store.state.users.currentUser
     },
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index c083625f..b54bbd32 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="emoji-reactions">
+  <div class="emoji-reactions" :class="timelineStyle">
     <UserListPopover
       v-for="(reaction) in filteredReactions"
       :key="reaction.url || reaction.name"
@@ -47,8 +47,19 @@
 @import '../../_variables.scss';
 
 .emoji-reactions {
+  &.classic {
+    margin-top: 0.25em;
+  }
+
+  &.chostlike {
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: .5em;
+    background: var(--bg);
+    border-bottom: 1px solid var(--faint);
+  }
+
   display: flex;
-  margin-top: 0.25em;
   flex-wrap: wrap;
   container-type: inline-size;
 }
@@ -100,6 +111,7 @@
   border: 1px solid var(--accent, $fallback--link);
   margin-left: -1px; // offset the border, can't use inset shadows either
   margin-right: calc(0.5em - 1px);
+  box-shadow: 0 0 4px 4px rgba(255,255,255,.5) inset;
 }
 
 </style>
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 30c78492..e90f6095 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -150,6 +150,9 @@ const Notification = {
     user () {
       return this.$store.getters.findUser(this.notification.from_profile.id)
     },
+    timelineStyle () {
+      return this.$store.getters.mergedConfig.timelineStyle
+    },
     userProfileLink () {
       return this.generateUserProfileLink(this.user)
     },
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 1c59c103..93cbdf27 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -2,6 +2,7 @@
   <Status
     v-if="notification.type === 'mention'"
     class="Notification"
+    :class="timelineStyle"
     :compact="true"
     :statusoid="notification.status"
   />
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index bd6284b3..8fedcdc0 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -40,6 +40,7 @@
   z-index: 500;
   position: absolute;
   min-width: 0;
+  filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.6));
 }
 
 .popover-default {
@@ -53,8 +54,6 @@
     left: 0;
     right: 0;
     z-index: 3;
-    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
-    box-shadow: var(--panelShadow);
     pointer-events: none;
   }
 
diff --git a/src/components/quote_card/quote_card.js b/src/components/quote_card/quote_card.js
index 48fdbe42..1f3a129f 100644
--- a/src/components/quote_card/quote_card.js
+++ b/src/components/quote_card/quote_card.js
@@ -14,7 +14,10 @@ const QuoteCard = {
   computed: {
     ...mapGetters([
       'mergedConfig'
-    ])
+    ]),
+    timelineStyle () {
+      return this.$store.getters.mergedConfig.timelineStyle
+    },
   },
   components: {
     QuoteCardContent
diff --git a/src/components/quote_card/quote_card.vue b/src/components/quote_card/quote_card.vue
index 8cd7eb23..f14bdab6 100644
--- a/src/components/quote_card/quote_card.vue
+++ b/src/components/quote_card/quote_card.vue
@@ -2,6 +2,7 @@
   <div>
     <router-link
       class="quote-card"
+      :class="timelineStyle"
       :to="{ name: 'conversation', params: { id: status.id } }"
     >
       <QuoteCardContent
@@ -23,6 +24,10 @@
   overflow: hidden;
   margin-top: 0.5em;
 
+  &.chostian .right-side {
+    background: linear-gradient(180deg, var(--selectedPost, $fallback--lightBg) 0%, var(--selectedPost, $fallback--lightBg) 75%, var(--bg) 75%, var(--bg) 100%) !important;
+  }
+
   .card-image {
     flex-shrink: 0;
     width: 120px;
@@ -64,11 +69,14 @@
 
   color: $fallback--text;
   color: var(--text, $fallback--text);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: $fallback--attachmentRadius;
-  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+
+  &.classic {
+    border-style: solid;
+    border-width: 1px;
+    border-radius: $fallback--attachmentRadius;
+    border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+  }
 }
 </style>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 4356a6c3..a829b0bf 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -55,6 +55,11 @@ const GeneralTab = {
         value: tab,
         label: this.$t(`user_card.${tab}`)
       })),
+      timelineStyleOptions: ['classic', 'chostlike'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.timeline_${mode}`)
+      })),
       profilesExpanded: false,
       newProfileName: '',
       loopSilentAvailable:
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 508f9a1b..c0bf3489 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -104,6 +104,15 @@
     <div class="setting-item">
       <h2>{{ $t('settings.interface') }}</h2>
       <ul class="setting-list">
+        <li>
+          <ChoiceSetting
+            id="timelineStyle"
+            path="timelineStyle"
+            :options="timelineStyleOptions"
+          >
+            {{ $t('settings.timeline_style_choice') }}
+          </ChoiceSetting>
+        </li>
         <li v-if="instanceSpecificPanelPresent">
           <BooleanSetting path="hideISP">
             {{ $t('settings.hide_isp') }}
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 56af76a6..1f958967 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -38,9 +38,72 @@
     }
   }
 
+  &.classic .status-container {
+    padding: var(--status-margin, $status-margin);
+  }
+  
+  &.classic .status-heading {
+      margin-bottom: 0.5em;
+  }
+
+  &.classic .replies {
+      margin-top: 0.25em;
+  }
+
+  &.chostlike .status-container {
+    padding: calc(10px + var(--status-margin, 0.75em)) var(--status-margin, 0.75em);
+
+    .content {
+      padding-bottom: .5em;
+      padding-top: 1em;
+      padding-left: 10px;
+      padding-right: 10px;
+      background: var(--bg);
+    }
+
+    .right-side {
+      background-color: var(--selectedPost);
+      border-radius: 10px;
+      padding: 10px 0 10px 0;
+      box-shadow: #000c 0px 0px 10px;
+    }
+
+    .status-heading {
+      border-bottom: 1px solid var(--faint);
+      padding: .3em 1em .7em 1em;
+    }
+
+    .replies {
+      padding-top: 0.25em;
+      padding-left: 10px;
+      padding-right: 10px;
+      background: var(--bg);
+    }
+
+    &.repeat-info {
+      padding-top: calc(10px + var(--status-margin, 0.75em));
+      padding-bottom: 0px;
+  
+      .right-side {
+        border-radius: 10px 10px 0 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        border-bottom: 1px solid #0003;
+      }
+    }
+
+    &.repeat-info + .status-container .right-side {
+      border-radius: 0px 0px 10px 10px;
+    }
+
+    .status-actions {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+  }
+
   .status-container {
     display: flex;
-    padding: var(--status-margin, $status-margin);
 
     .content {
       overflow: hidden;
@@ -104,7 +167,7 @@
   }
 
   .status-heading {
-    margin-bottom: 0.5em;
+    
 
     .emoji {
       --emoji-size: 16px;
@@ -244,7 +307,6 @@
   }
 
   .replies {
-    margin-top: 0.25em;
     line-height: 1.3;
     font-size: 0.85em;
     display: flex;
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
index 71e63725..b60dcf31 100644
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@@ -58,6 +58,9 @@ const ThreadTree = {
         return table
       }, {})
     },
+    timelineStyle () {
+      return this.$store.getters.mergedConfig.timelineStyle
+    },
     currentReplies () {
       return this.getReplies(this.status.id).map(({ id }) => this.statusById(id))
     },
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index ba1d1228..486b0e24 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -14,6 +14,7 @@
       :in-profile="inProfile"
       :profile-user-id="profileUserId"
       class="conversation-status conversation-status-treeview status-fadein panel-body"
+      :class="timelineStyle"
 
       :simple-tree="simple"
       :controlled-thread-display-status="threadDisplayStatus[status.id]"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index fd693bd6..95a1f3e5 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -957,6 +957,9 @@
         "third_column_mode_none": "Don't show third column at all",
         "third_column_mode_notifications": "Notifications column",
         "third_column_mode_postform": "Main post form and navigation",
+        "timeline_classic": "Classic",
+        "timeline_chostlike": "Chostlike",
+        "timeline_style_choice": "Timeline post style",
         "token": "Token",
         "tooltipRadius": "Tooltips/alerts",
         "translation_language": "Automatic Translation Language",
diff --git a/src/modules/config.js b/src/modules/config.js
index 1506b06a..efed69b4 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -142,6 +142,7 @@ export const defaultState = {
   postLanguage: undefined, // instance default,
   supportedTranslationLanguages: {}, // instance default
   userProfileDefaultTab: 'statuses',
+  timelineStyle: 'classic',
   useBlurhash: true,
 }