diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index e45bdadc3..7c03ae469 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -2,6 +2,7 @@ import { clone, filter, findIndex, get, reduce } from 'lodash'
import { mapState as mapPiniaState } from 'pinia'
import { mapState } from 'vuex'
+import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
import QuickViewSettings from 'src/components/quick_view_settings/quick_view_settings.vue'
@@ -119,6 +120,10 @@ const conversation = {
const maxDepth = this.mergedConfig.maxDepthInThread - 2
return maxDepth >= 1 ? maxDepth : 1
},
+ lastStatus() {
+ console.log('LAST STATUS', this.conversation[this.conversation.length - 1])
+ return this.conversation[this.conversation.length - 1]
+ },
streamingEnabled() {
return (
this.mergedConfig.useStreamingApi &&
@@ -409,6 +414,7 @@ const conversation = {
QuickFilterSettings,
QuickViewSettings,
ChatMessageList,
+ PostStatusForm,
},
watch: {
statusId(newVal, oldVal) {
diff --git a/src/components/conversation/conversation.scss b/src/components/conversation/conversation.scss
new file mode 100644
index 000000000..0fc320141
--- /dev/null
+++ b/src/components/conversation/conversation.scss
@@ -0,0 +1,100 @@
+.Conversation {
+ z-index: 1;
+
+ &.-hidden {
+ background: var(--__panel-background);
+ backdrop-filter: var(--__panel-backdrop-filter);
+ }
+
+ .conversation-dive-to-top-level-box {
+ padding: var(--status-margin);
+ border-bottom: 1px solid var(--border);
+ border-radius: 0;
+
+ /* Make the button stretch along the whole row */
+ display: flex;
+ align-items: stretch;
+ flex-direction: column;
+ }
+
+ .thread-ancestors {
+ margin-left: var(--status-margin);
+ border-left: 2px solid var(--border);
+ }
+
+ .thread-ancestor.-faded .RichContent {
+ /* stylelint-disable declaration-no-important */
+ --text: var(--textFaint) !important;
+ --link: var(--linkFaint) !important;
+ --funtextGreentext: var(--funtextGreentextFaint) !important;
+ --funtextCyantext: var(--funtextCyantextFaint) !important;
+ /* stylelint-enable declaration-no-important */
+ }
+
+ .thread-ancestor-dive-box {
+ padding-left: var(--status-margin);
+ border-bottom: 1px solid var(--border);
+ border-radius: 0;
+
+ /* Make the button stretch along the whole row */
+ &,
+ &-inner {
+ display: flex;
+ align-items: stretch;
+ flex-direction: column;
+ }
+ }
+
+ .thread-ancestor-dive-box-inner {
+ padding: var(--status-margin);
+ }
+
+ .conversation-status {
+ border-bottom: 1px solid var(--border);
+ border-radius: 0;
+ }
+
+ .thread-ancestor-has-other-replies .conversation-status,
+ &:last-child:not(.-expanded) .conversation-status,
+ &.-expanded .conversation-status:last-child,
+ .thread-ancestor:last-child .conversation-status,
+ .thread-ancestor:last-child .thread-ancestor-dive-box,
+ &.-expanded .thread-tree .conversation-status {
+ border-bottom: none;
+ }
+
+ .thread-ancestors + .thread-tree > .conversation-status {
+ border-top: 1px solid var(--border);
+ }
+
+ /* expanded conversation in timeline */
+ &.status-fadein.-expanded .thread-body {
+ border-left: 4px solid var(--cRed);
+ border-radius: var(--roundness);
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-bottom: 1px solid var(--border);
+ }
+
+ &.-expanded.status-fadein {
+ --___margin: calc(var(--status-margin) / 2);
+
+ background: var(--background);
+ margin: var(--___margin);
+
+ &::before {
+ z-index: -1;
+ content: "";
+ display: block;
+ position: absolute;
+ inset: calc(var(--___margin) * -1);
+ background: var(--background);
+ backdrop-filter: var(--__panel-backdrop-filter);
+ }
+ }
+
+ .chat-view-reply-form {
+ position: sticky;
+ bottom: 0;
+ }
+}
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 59e2b97c6..5d4e94a2e 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -170,7 +170,7 @@
/>
+
-
-
+