サイド・バーの幅を可変に (#385) (#396)

Reviewed-on: #396
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/pages/theatres/TheatreDetailPage.test.tsx

@@ -105,6 +105,20 @@ const tagSection = (): HTMLElement =>
   screen.getAllByRole ('heading', { name: 'タグ' })[0].closest ('section')!
 
 const mockDefaultApi = () => {
+  let commentsFetched = false
+  let currentTheatreInfo = buildTheatreInfo ({
+    postId:        currentPost.id,
+    postStartedAt: '2026-01-02T03:04:05.000Z',
+    postElapsedMs: 1_000,
+    watchingUsers,
+    skipVote:      {
+      votesCount:         0,
+      requiredCount:      2,
+      watchingUsersCount: watchingUsers.length,
+      voted:              false,
+    },
+  })
+
   api.apiGet.mockImplementation ((path: string) => {
     switch (path)
     {
@@ -112,13 +126,17 @@ const mockDefaultApi = () => {
       return Promise.resolve (theatre)
 
     case '/theatres/7/comments':
+      if (commentsFetched)
+	return Promise.resolve ([])
+
+      commentsFetched = true
       return Promise.resolve ([
-        buildTheatreComment ({
-          theatreId: 7,
-          no:        2,
-          user:      { id: 1, name: 'tester' },
-          content:   '視聴コメント',
-        }),
+	  buildTheatreComment ({
+	    theatreId: 7,
+	    no:        2,
+	    user:      { id: 1, name: 'tester' },
+	    content:   '視聴コメント',
+	  }),
       ])
 
     case '/theatres/7/programmes':
@@ -136,32 +154,22 @@ const mockDefaultApi = () => {
     switch (path)
     {
     case '/theatres/7/watching':
-      return Promise.resolve (buildTheatreInfo ({
-        postId:        currentPost.id,
-        postStartedAt: '2026-01-02T03:04:05.000Z',
-        postElapsedMs: 1_000,
-        watchingUsers,
-        skipVote:      {
-          votesCount:         0,
-          requiredCount:      2,
-          watchingUsersCount: watchingUsers.length,
-          voted:              false,
-        },
-      }))
+      return Promise.resolve (currentTheatreInfo)
 
     case '/theatres/7/skip_vote':
-      return Promise.resolve (buildTheatreInfo ({
-        postId:        currentPost.id,
-        postStartedAt: '2026-01-02T03:04:05.000Z',
-        postElapsedMs: 2_000,
-        watchingUsers,
-        skipVote:      {
-          votesCount:         1,
-          requiredCount:      2,
-          watchingUsersCount: watchingUsers.length,
-          voted:              true,
-        },
-      }))
+      currentTheatreInfo = buildTheatreInfo ({
+	postId:        currentPost.id,
+	postStartedAt: '2026-01-02T03:04:05.000Z',
+	postElapsedMs: 2_000,
+	watchingUsers,
+	skipVote:      {
+	  votesCount:         1,
+	  requiredCount:      2,
+	  watchingUsersCount: watchingUsers.length,
+	  voted:              true,
+	},
+      })
+      return Promise.resolve (currentTheatreInfo)
 
     default:
       return Promise.reject (new Error (`Unexpected PUT ${ path }`))

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -10,6 +10,7 @@ import PrefetchLink from '@/components/PrefetchLink'
 import TagLink from '@/components/TagLink'
 import FieldError from '@/components/common/FieldError'
 import { useDialogue } from '@/components/dialogues/DialogueProvider'
+import SidebarComponent from '@/components/layout/SidebarComponent'
 import { Button } from '@/components/ui/button'
 import { SITE_TITLE } from '@/config'
 import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
@@ -52,6 +53,8 @@ const INITIAL_WEIGHTS: TheatrePostSelectionWeights =
 
 const LAYOUT_STORAGE_KEY = 'theatre-layout-mode'
 const TAG_FLOW_STORAGE_KEY = 'theatre-tag-flow'
+const MIN_MAIN_WIDTH = 360
+const SIDEBAR_GAP_WIDTH = 16
 
 const LAYOUT_LABELS: Record<TheatreLayoutMode, string> = {
     threeColumns:   '3 列',
@@ -211,11 +214,16 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
   const commentsRef = useRef<HTMLDivElement> (null)
   const embedRef = useRef<NiconicoViewerHandle> (null)
   const loadingRef = useRef (false)
+  const sidebarContainerRef = useRef<HTMLDivElement> (null)
   const theatreInfoRef = useRef<TheatreInfo> (INITIAL_THEATRE_INFO)
   const theatreInfoReceivedAtRef = useRef (performance.now ())
   const videoLengthRef = useRef (0)
   const lastCommentNoRef = useRef (0)
 
+  const [leftSidebarWidth, setLeftSidebarWidth] = useState (256)
+  const [rightSidebarWidth, setRightSidebarWidth] = useState (256)
+  const [sidebarContainerWidth, setSidebarContainerWidth] = useState (
+      () => typeof window === 'undefined' ? 0 : window.innerWidth)
   const [comments, setComments] = useState<TheatreComment[]> ([])
   const [content, setContent] = useState ('')
   const [editingPost, setEditingPost] = useState<Post | null> (null)
@@ -258,6 +266,7 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 
   const applyTheatreInfo = useCallback ((nextInfo: TheatreInfo) => {
     theatreInfoReceivedAtRef.current = performance.now ()
+    theatreInfoRef.current = nextInfo
     setTheatreInfo (nextInfo)
   }, [])
 
@@ -324,6 +333,17 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
     lastCommentNoRef.current = comments[0]?.no ?? 0
   }, [comments])
 
+  useEffect (() => {
+    const updateSidebarContainerWidth = () => {
+      const nextWidth = sidebarContainerRef.current?.clientWidth ?? window.innerWidth
+      setSidebarContainerWidth (nextWidth)
+    }
+
+    updateSidebarContainerWidth ()
+    window.addEventListener ('resize', updateSidebarContainerWidth)
+    return () => window.removeEventListener ('resize', updateSidebarContainerWidth)
+  }, [])
+
   useEffect (() => {
     if (!(id))
       return
@@ -387,6 +407,9 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 	    setComments (prev => [...newComments, ...prev])
 	  }
 
+	if (loadingRef.current)
+	  return
+
 	const currentInfo = theatreInfoRef.current
 	const ended =
 	    currentInfo.hostFlg
@@ -408,8 +431,9 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 	    return
 	  }
 
+	const watchingRequestedAt = performance.now ()
 	const nextInfo = await apiPut<TheatreInfo> (`/theatres/${ id }/watching`)
-	if (!(cancelled))
+	if (!(cancelled) && watchingRequestedAt >= theatreInfoReceivedAtRef.current)
 	  applyTheatreInfo (nextInfo)
       }
       catch (error)
@@ -538,6 +562,7 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
     if (!(id) || !(post))
       return
 
+    loadingRef.current = true
     setLoading (true)
     try
     {
@@ -566,6 +591,7 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
     }
     finally
     {
+      loadingRef.current = false
       setLoading (false)
     }
   }
@@ -639,6 +665,26 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
   if (status >= 400)
     return <ErrorScreen status={status}/>
 
+  const singleSidebarMaxWidth = Math.max (
+      192,
+      sidebarContainerWidth - MIN_MAIN_WIDTH - SIDEBAR_GAP_WIDTH)
+  const leftSidebarMaxWidth = layoutMode === 'threeColumns'
+			      ? Math.max (
+				  192,
+				  sidebarContainerWidth
+				  - rightSidebarWidth
+				  - MIN_MAIN_WIDTH
+				  - SIDEBAR_GAP_WIDTH * 2)
+			      : singleSidebarMaxWidth
+  const rightSidebarMaxWidth = layoutMode === 'threeColumns'
+			       ? Math.max (
+				   192,
+				   sidebarContainerWidth
+				   - leftSidebarWidth
+				   - MIN_MAIN_WIDTH
+				   - SIDEBAR_GAP_WIDTH * 2)
+			       : singleSidebarMaxWidth
+
   const tagPanel = (
       <section className="rounded border-zinc-300 p-4 dark:border-zinc-800">
 	<div className="mb-3 flex items-center justify-between gap-3">
@@ -806,30 +852,26 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 	  {theatre && <title>{`${ theatreTitle } | ${ SITE_TITLE }`}</title>}
 	</Helmet>
 
-	<div className={cn (
-	    'grid min-h-full gap-4 overflow-visible md:h-full md:overflow-hidden',
-	    (layoutMode === 'threeColumns'
-	     && ['md:grid-cols-[16rem_minmax(0,1fr)_22rem]',
-		 'xl:grid-cols-[18rem_minmax(0,1fr)_24rem]']),
-	    (layoutMode === 'tagsBottom'
-	     && 'md:grid-cols-[minmax(0,1fr)_22rem] xl:grid-cols-[minmax(0,1fr)_24rem]'),
-	    (layoutMode === 'commentsBottom'
-	     && 'md:grid-cols-[16rem_minmax(0,1fr)] xl:grid-cols-[18rem_minmax(0,1fr)]'))}>
+	<div
+	    ref={sidebarContainerRef}
+	    data-sidebar-container
+	    className="flex min-h-full flex-col gap-4 overflow-visible md:h-full md:flex-row
+		       md:overflow-hidden">
 	  {layoutMode !== 'tagsBottom' && (
-	      <motion.aside
-		  layout="position"
-		  className="hidden min-w-0 space-y-4 md:order-none md:block md:overflow-y-auto
-			     md:[direction:rtl]">
-		<div className="md:[direction:ltr]">
-		  {tagPanel}
-		</div>
-	      </motion.aside>)}
+	      <SidebarComponent
+		  sidebarKey="theatre-tags"
+		  side="left"
+		  maxWidth={leftSidebarMaxWidth}
+		  onWidthChange={setLeftSidebarWidth}
+		  className="hidden md:block">
+		{tagPanel}
+	      </SidebarComponent>)}
 
 	  <motion.main
 	      layout="position"
-	      className={cn ('order-1 min-w-0 space-y-4 md:order-none md:overflow-y-auto',
-			     layoutMode === 'tagsBottom' && 'md:[direction:rtl]')}>
-	    <div className={cn ('space-y-4', layoutMode === 'tagsBottom' && 'md:[direction:ltr]')}>
+	      className="order-1 min-w-0 flex-1 space-y-4 md:order-none
+			 md:min-w-[360px] md:overflow-y-auto">
+	    <div className="space-y-4">
 	      <section className="overflow-hidden rounded border-zinc-300
 				  dark:border-zinc-800">
 		<div className="flex flex-wrap items-center justify-between gap-3
@@ -965,12 +1007,17 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
 	  </motion.main>
 
 	  {layoutMode !== 'commentsBottom' && (
-	      <motion.aside
-		  layout="position"
-		  className="hidden min-w-0 space-y-4 md:order-none md:block md:overflow-y-auto">
-		{commentsPanel}
-		{participantsPanel}
-	      </motion.aside>)}
+	      <SidebarComponent
+		  sidebarKey="theatre-comments"
+		  side="right"
+		  maxWidth={rightSidebarMaxWidth}
+		  onWidthChange={setRightSidebarWidth}
+		  className="hidden md:block">
+		<div className="space-y-4">
+		  {commentsPanel}
+		  {participantsPanel}
+		</div>
+	      </SidebarComponent>)}
 	</div>
       </motion.div>)
 }