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>

web/components/custom/QuestionList.tsx

@@ -0,0 +1,65 @@
+import { useState, useEffect } from "react"
+import { Input } from "../ui/input"
+import { LaIcon } from "./la-icon"
+import { cn } from "@/lib/utils"
+
+interface Question {
+	id: string
+	title: string
+	author: string
+	timestamp: string
+}
+
+interface QuestionListProps {
+	topicName: string
+	onSelectQuestion: (question: Question) => void
+	selectedQuestionId?: string
+}
+
+export function QuestionList({ topicName, onSelectQuestion, selectedQuestionId }: QuestionListProps) {
+	const [questions, setQuestions] = useState<Question[]>([])
+
+	useEffect(() => {
+		const mockQuestions: Question[] = Array(10)
+			.fill(null)
+			.map((_, index) => ({
+				id: (index + 1).toString(),
+				title: "What can I do offline in Figma?",
+				author: "Ana",
+				timestamp: "13:35"
+			}))
+		setQuestions(mockQuestions)
+	}, [topicName])
+
+	return (
+		<div className="flex h-full flex-col">
+			<div className="scrollbar-hide flex-grow overflow-y-auto">
+				{questions.map(question => (
+					<div
+						key={question.id}
+						className={cn(
+							"flex cursor-pointer flex-col gap-2 rounded p-4",
+							selectedQuestionId === question.id && "bg-red-500"
+						)}
+						onClick={() => onSelectQuestion(question)}
+					>
+						<div className="flex flex-row justify-between opacity-50">
+							<div className="flex flex-row items-center space-x-2">
+								<div className="h-6 w-6 rounded-full bg-slate-500" />
+								<p className="text-sm font-medium">{question.author}</p>
+							</div>
+							<p>{question.timestamp}</p>
+						</div>
+						<h3 className="font-medium">{question.title}</h3>
+					</div>
+				))}
+			</div>
+			<div className="relative mt-4">
+				<Input className="bg-input py-5 pr-10 focus:outline-none focus:ring-0" placeholder="Ask new question..." />
+				<button className="absolute right-2 top-1/2 -translate-y-1/2 transform opacity-60 hover:opacity-80">
+					<LaIcon name="Send" />
+				</button>
+			</div>
+		</div>
+	)
+}