fix: auto-scroll comments to bottom in TaskModal
All checks were successful
Deploy Web Client / deploy (push) Successful in 35s

This commit is contained in:
Markov 2026-02-23 13:13:41 +01:00
parent 9064a3be12
commit 51844e61ca

View File

@ -1,6 +1,6 @@
"use client"; "use client";
import { useEffect, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { import {
Task, Member, Step, Message, Task, Member, Step, Message,
updateTask, deleteTask, getMembers, updateTask, deleteTask, getMembers,
@ -53,6 +53,7 @@ export default function TaskModal({ task, projectId, projectSlug, onClose, onUpd
const [confirmDelete, setConfirmDelete] = useState(false); const [confirmDelete, setConfirmDelete] = useState(false);
const [newStep, setNewStep] = useState(""); const [newStep, setNewStep] = useState("");
const [newComment, setNewComment] = useState(""); const [newComment, setNewComment] = useState("");
const commentsEndRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
getMembers().then(setMembers).catch(() => {}); getMembers().then(setMembers).catch(() => {});
@ -60,6 +61,10 @@ export default function TaskModal({ task, projectId, projectSlug, onClose, onUpd
getMessages({ task_id: task.id }).then(setComments).catch(() => {}); getMessages({ task_id: task.id }).then(setComments).catch(() => {});
}, [task.id]); }, [task.id]);
useEffect(() => {
commentsEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [comments]);
const save = async (patch: Partial<Task>) => { const save = async (patch: Partial<Task>) => {
setSaving(true); setSaving(true);
try { try {
@ -252,6 +257,7 @@ export default function TaskModal({ task, projectId, projectSlug, onClose, onUpd
{comments.length === 0 && ( {comments.length === 0 && (
<div className="text-sm text-[var(--muted)] italic">Нет комментариев</div> <div className="text-sm text-[var(--muted)] italic">Нет комментариев</div>
)} )}
<div ref={commentsEndRef} />
</div> </div>
<div className="flex gap-2 mt-3"> <div className="flex gap-2 mt-3">
<input <input