#297

frontend/src/components/PrefetchLink.tsx

@@ -71,7 +71,8 @@ export default forwardRef<HTMLAnchorElement, Props> (({
 	  || ev.metaKey
 	  || ev.ctrlKey
 	  || ev.shiftKey
-	  || ev.altKey)
+	  || ev.altKey
+	  || (rest.target && rest.target !== '_self'))
 	return
 
       ev.preventDefault ()

frontend/src/components/TopNav.tsx

@@ -211,6 +211,7 @@ export default (({ user }: Props) => {
 		      <PrefetchLink
 			  key={`l-${ i }`}
 			  to={item.to}
+			  target={item.to.slice (0, 2) === '//' ? '_blank' : undefined}
 			  className="h-full flex items-center px-3">
 			{item.name}
 		      </PrefetchLink>)))}
@@ -277,6 +278,9 @@ export default (({ user }: Props) => {
 				      <PrefetchLink
 					  key={`sp-l-${ i }-${ j }`}
 					  to={subItem.to}
+					  target={subItem.to.slice (0, 2) === '//'
+						  ? '_blank'
+						  : undefined}
 					  className="w-full min-h-[36px] flex items-center pl-12">
 					{subItem.name}
 				      </PrefetchLink>)))}

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -23,9 +23,14 @@ import type { NiconicoMetadata,
 type TheatreInfo = {
     hostFlg:        boolean
     postId:         number | null
-    postStartedAt:  string | null }
+    postStartedAt:  string | null
+    watchingUsers:  { id: number; name: string }[] }
 
-const INITIAL_THEATRE_INFO = { hostFlg: false, postId: null, postStartedAt: null } as const
+const INITIAL_THEATRE_INFO =
+    { hostFlg: false,
+      postId: null,
+      postStartedAt: null,
+      watchingUsers: [] as { id: number; name: string }[] } as const
 
 
 export default (() => {
@@ -93,7 +98,7 @@ export default (() => {
     commentsRef.current?.scrollTo ({
 	top: commentsRef.current.scrollHeight,
 	behavior: 'smooth' })
-  }, [commentsRef])
+  }, [comments])
 
   useEffect (() => {
     if (!(id))
@@ -265,7 +270,7 @@ export default (() => {
 
 	<SidebarComponent>
 	  <form
-	      className="w-full h-5/6"
+	      className="w-full h-auto border border-black dark:border-white rounded"
 	      onSubmit={async e => {
 		e.preventDefault ()
 
@@ -286,25 +291,42 @@ export default (() => {
 		  setSending (false)
 		}
 	      }}>
+	    <div className="p-2">
+		現在の同接数：{theatreInfo.watchingUsers.length}
+	    </div>
+
+	    <div className="overflow-x-hidden overflow-y-scroll text-wrap w-full h-32
+			    border rounded">
+	      <ul className="list-inside list-disc">
+		{theatreInfo.watchingUsers.map (user => (
+		    <li key={user.id} className="px-4 py-1 text-sm">
+		      {user.name || `名もなきニジラー（#${ user.id }）`}
+		    </li>))}
+	      </ul>
+	    </div>
+
 	    <div
 		ref={commentsRef}
-		className="overflow-x-hidden overflow-y-scroll text-wrap
+		className="overflow-x-hidden overflow-y-scroll text-wrap w-full
-			   border border-black dark:border-white w-full h-[80vh]">
+			   h-[32vh] md:h-[64vh] border rounded">
 	      {comments.map (comment => (
 		  <div key={comment.no} className="p-2">
 		    <div className="w-full">
 		      {comment.content}
 		    </div>
 		    <div className="w-full text-sm text-right">
-		      by {comment.user ? (comment.user.name || '名もなきニジラー') : '運営'}
+		      by {comment.user
+			  ? (comment.user.name || `名もなきニジラー（#${ comment.user.id }）`)
+			  : '運営'}
 		    </div>
 		    <div className="w-full text-sm text-right">
 		      {dateString (comment.createdAt)}
 		    </div>
 		  </div>))}
 	    </div>
+
 	    <input
-		className="w-full p-2 border border-black dark:border-white"
+		className="w-full p-2 border rounded"
 		type="text"
 		value={content}
 		onChange={e => setContent (e.target.value)}