Merge remote-tracking branch 'origin/main' into feature/302

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -6,17 +6,18 @@ import ErrorScreen from '@/components/ErrorScreen'
 import PostEmbed from '@/components/PostEmbed'
 import PrefetchLink from '@/components/PrefetchLink'
 import TagDetailSidebar from '@/components/TagDetailSidebar'
+import FieldError from '@/components/common/FieldError'
 import SectionTitle from '@/components/common/SectionTitle'
 import { useDialogue } from '@/components/dialogues/DialogueProvider'
-import { Button } from '@/components/ui/button'
 import MainArea from '@/components/layout/MainArea'
 import SidebarComponent from '@/components/layout/SidebarComponent'
 import { SITE_TITLE } from '@/config'
 import { apiGet, apiDelete, apiPatch, apiPost, apiPut, isApiError } from '@/lib/api'
 import { fetchPost } from '@/lib/posts'
-import { dateString } from '@/lib/utils'
+import { dateString, inputClass } from '@/lib/utils'
+import { useValidationErrors } from '@/lib/useValidationErrors'
 
-import type { FC, User } from 'react'
+import type { FC, ReactNode, User } from 'react'
 
 import type { NiconicoMetadata,
 	      NiconicoViewerHandle,
@@ -31,6 +32,8 @@ type TheatreInfo = {
     postStartedAt:  string | null
     watchingUsers:  { id: number; name: string }[] }
 
+type TheatreCommentField = 'content'
+
 const INITIAL_THEATRE_INFO =
     { hostFlg: false,
       postId: null,
@@ -85,6 +88,8 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
   const [post, setPost] = useState<Post | null> (null)
   const [programmes, setProgrammes] = useState<TheatreProgramme[]> ([])
   const [videoLength, setVideoLength] = useState (0)
+  const { fieldErrors, clearValidationErrors, applyValidationError } =
+      useValidationErrors<TheatreCommentField> ()
 
   useEffect (() => {
     loadingRef.current = loading
@@ -364,22 +369,28 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 		try
 		{
 		  setSending (true)
+		  clearValidationErrors ()
 		  await apiPost (`/theatres/${ id }/comments`, { content })
 		  setContent ('')
 		  commentsRef.current?.scrollTo ({ top: 0, behavior: 'smooth' })
 		}
+		catch (error)
+		{
+		  applyValidationError (error)
+		}
 		finally
 		{
 		  setSending (false)
 		}
 	      }}>
 	    <input
-		className="w-full p-2 border rounded"
+		className={inputClass ((fieldErrors.content ?? []).length > 0)}
 		type="text"
 		placeholder="ここにコメントを入力"
 		value={content}
 		onChange={e => setContent (e.target.value)}
 		disabled={sending}/>
+	    <FieldError messages={fieldErrors.content}/>
 
 	    <div
 		ref={commentsRef}