Q & A + journal (#174)

* tasks * task input * community route * added thread and list for community QA * answers thread * journal sidebar section * journal calendar * fix: stuff * fix: stuff * fix: stuff * chore: disable comunitty toggle * fix: typo import header --------- Co-authored-by: marshennikovaolga <marshennikova@gmail.com> Co-authored-by: Aslam H <iupin5212@gmail.com>
2026-04-22 08:18:33 +02:00 · 2024-09-28 15:47:10 +03:00
parent 34d69be960
commit 3e7c8cf38a
24 changed files with 720 additions and 89 deletions
--- a/web/components/routes/community/CommunityTopicRoute.tsx
+++ b/web/components/routes/community/CommunityTopicRoute.tsx
@@ -0,0 +1,74 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { useAccountOrGuest, useCoState } from "@/lib/providers/jazz-provider"
+import { ContentHeader, SidebarToggleButton } from "@/components/custom/content-header"
+import { GuideCommunityToggle } from "@/components/custom/GuideCommunityToggle"
+import { QuestionList } from "@/components/custom/QuestionList"
+import { QuestionThread } from "@/components/custom/QuestionThread"
+import { Topic } from "@/lib/schema"
+import { JAZZ_GLOBAL_GROUP_ID } from "@/lib/constants"
+
+interface CommunityTopicRouteProps {
+	topicName: string
+}
+
+interface Question {
+	id: string
+	title: string
+	author: string
+	timestamp: string
+}
+
+export function CommunityTopicRoute({ topicName }: CommunityTopicRouteProps) {
+	const { me } = useAccountOrGuest({ root: { personalLinks: [] } })
+	const topicID = useMemo(() => me && Topic.findUnique({ topicName }, JAZZ_GLOBAL_GROUP_ID, me), [topicName, me])
+	const topic = useCoState(Topic, topicID, { latestGlobalGuide: { sections: [] } })
+
+	const [selectedQuestion, setSelectedQuestion] = useState<Question | null>(null)
+
+	if (!topic) {
+		return null
+	}
+
+	return (
+		<div className="flex h-full flex-auto flex-col">
+			<ContentHeader className="px-6 py-4">
+				<div className="flex min-w-0 shrink-0 items-center gap-1.5">
+					<SidebarToggleButton />
+					<div className="flex min-h-0 flex-col items-start">
+						<p className="opacity-40">Topic</p>
+						<span className="truncate text-left font-bold lg:text-xl">{topic.prettyName}</span>
+					</div>
+				</div>
+				<div className="flex-grow" />
+				<GuideCommunityToggle topicName={topic.name} />
+			</ContentHeader>
+			<div className="relative flex flex-1 justify-center overflow-hidden">
+				<div
+					className={`w-1/2 overflow-y-auto p-3 transition-all duration-300 ${
+						selectedQuestion ? "opacity-700 translate-x-[-50%]" : ""
+					}`}
+				>
+					<QuestionList
+						topicName={topic.name}
+						onSelectQuestion={(question: Question) => setSelectedQuestion(question)}
+					/>
+				</div>
+				{selectedQuestion && (
+					<div className="absolute right-0 top-0 h-full w-1/2 overflow-y-auto">
+						<QuestionThread
+							question={{
+								id: selectedQuestion.id,
+								title: selectedQuestion.title,
+								author: selectedQuestion.author,
+								timestamp: selectedQuestion.timestamp
+							}}
+							onClose={() => setSelectedQuestion(null)}
+						/>
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}