feat: discussions in batches

frontend/src/components/DiscussionReplies.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="mt-6">
-		<div class="flex items-center mb-5">
+		<div v-if="!singleThread" class="flex items-center mb-5">
 			<Button variant="outline" @click="showTopics = true">
 				<template #icon>
 					<ChevronLeft class="w-5 h-5 stroke-1.5 text-gray-700" />
@@ -63,7 +63,7 @@
 					:fixedMenu="reply.editable || false"
 					:editorClass="
 						reply.editable
-							? 'prose-sm max-w-none border-b border-x rounded-b-md py-1 px-2 min-h-[4rem]'
+							? 'ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none'
 							: 'prose-sm'
 					"
 				/>
@@ -75,7 +75,7 @@
 			@change="(val) => (newReply = val)"
 			placeholder="Type your reply here..."
 			:fixedMenu="true"
-			editorClass="prose-sm max-w-none min-h-[7rem] border-b border-x rounded-b-md py-1 px-2"
+			editorClass="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none border border-gray-300 rounded-b-md min-h-[7rem] py-1 px-2"
 		/>
 		<div class="flex justify-between mt-2">
 			<span> </span>
@@ -105,6 +105,10 @@ const props = defineProps({
 		type: Object,
 		required: true,
 	},
+	singleThread: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 onMounted(() => {
@@ -156,7 +160,7 @@ const postReply = () => {
 				newReply.value = ''
 				replies.reload()
 			},
-			onError() {
+			onError(err) {
 				createToast({
 					title: 'Error',
 					text: err.messages?.[0] || err,

frontend/src/components/Discussions.vue

@@ -1,13 +1,13 @@
 <template>
 	<div>
-		<Button class="float-right" @click="openTopicModal()">
+		<Button v-if="!singleThread" class="float-right" @click="openTopicModal()">
 			{{ __('New {0}').format(title) }}
 		</Button>
 		<div class="text-xl font-semibold">
 			{{ __(title) }}
 		</div>
 	</div>
-	<div v-if="topics.data?.length">
+	<div v-if="topics.data?.length && !singleThread">
 		<div v-if="showTopics" v-for="(topic, index) in topics.data">
 			<div
 				@click="showReplies(topic)"
@@ -37,6 +37,9 @@
 			/>
 		</div>
 	</div>
+	<div v-else-if="singleThread && topics.data">
+		<DiscussionReplies :topic="topics.data" :singleThread="singleThread" />
+	</div>
 	<div v-else class="flex justify-center border mt-5 p-5 rounded-md">
 		<MessageSquareIcon class="w-10 h-10 stroke-1.5 text-gray-800 mr-2" />
 		<div>
@@ -57,13 +60,13 @@
 	/>
 </template>
 <script setup>
-import { createResource, Button } from 'frappe-ui'
+import { createResource, Button, TextEditor } from 'frappe-ui'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { timeAgo } from '../utils'
 import { ref, onMounted, inject } from 'vue'
 import DiscussionReplies from '@/components/DiscussionReplies.vue'
 import DiscussionModal from '@/components/Modals/DiscussionModal.vue'
-import { MessageSquareIcon, MessagesSquare } from 'lucide-vue-next'
+import { MessageSquareIcon } from 'lucide-vue-next'
 
 const showTopics = ref(true)
 const currentTopic = ref(null)
@@ -91,6 +94,10 @@ const props = defineProps({
 		type: String,
 		default: 'Be the first to start a discussion',
 	},
+	singleThread: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 onMounted(() => {
@@ -106,6 +113,7 @@ const topics = createResource({
 		return {
 			doctype: props.doctype,
 			docname: props.docname,
+			single_thread: props.singleThread,
 		}
 	},
 	auto: true,