#434

frontend/src/components/TagSidebar.tsx

@@ -4,6 +4,7 @@ import { useLocation } from 'react-router-dom'
 
 import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
 import { useUITranslation } from '@/lib/useUITranslation'
+import PrefetchLink from '@/components/PrefetchLink'
 import TagLink from '@/components/TagLink'
 import TagSearch from '@/components/TagSearch'
 import SectionTitle from '@/components/common/SectionTitle'
@@ -93,25 +94,37 @@ const TagSidebar: FC<Props> = ({ posts, onClick }) => {
 		  </li>))) : [])}
 	</ul>
 	<SectionTitle>{label ('labels.relations')}</SectionTitle>
-	<a href="#"
-	   onClick={ev => {
-	     ev.preventDefault ()
-	     void ((async () => {
-	       try
-	       {
-		 const data = await apiGet<Post> ('/posts/random',
-		     { locale, params: { tags: tagsQuery.split (' ').filter (e => e !== '').join (' '),
-				 match: (anyFlg ? 'any' : 'all') } })
-		 navigate (`/posts/${ data.id }`)
-	       }
-	       catch
-	       {
-		 ;
-	       }
-	     }) ())
-	   }}>
-	  {label ('actions.random')}
-	</a>
+	<ul>
+	  <li>
+	    <a
+		href="#"
+		onClick={ev => {
+		  ev.preventDefault ()
+		  void ((async () => {
+		    try
+		    {
+		      const data = await apiGet<Post> (
+			  '/posts/random',
+			  { locale,
+			    params: { tags: tagsQuery.split (' ').filter (e => e !== '').join (' '),
+				      match: (anyFlg ? 'any' : 'all') } })
+		      navigate (`/posts/${ data.id }`)
+		    }
+		    catch
+		    {
+		      ;
+		    }
+		  }) ())
+		}}>
+	      {label ('actions.random')}
+	    </a>
+	  </li>
+	  <li>
+	    <PrefetchLink to={`/counts/posts?tags=${ encodeURIComponent (tagsQuery) }`}>
+	      {label ('actions.count')}
+	    </PrefetchLink>
+	  </li>
+	</ul>
       </>)
 
   return (

frontend/src/components/common/SortableColumns.tsx

@@ -2,7 +2,7 @@ import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor,
          closestCenter, useSensor, useSensors } from '@dnd-kit/core'
 import { SortableContext, arrayMove, horizontalListSortingStrategy,
          sortableKeyboardCoordinates } from '@dnd-kit/sortable'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { CSS } from '@dnd-kit/utilities'
 
@@ -15,6 +15,8 @@ const SortableColumns = ({ ids, fixed = [], name, onChange, children }: {
     ids: string[]; fixed?: string[]; name: (id: string) => { text: string; language: string }
     onChange: (ids: string[]) => void; children: (ids: string[]) => ReactNode },
 ) => {
+  const [mounted, setMounted] = useState (false)
+  useEffect (() => setMounted (true), [])
   const [active, setActive] = useState<string | null> (null)
   const drag = useRef<{ id: string; ids: string[] } | null> (null)
   const motion = useClientMotion ()
@@ -56,7 +58,7 @@ const SortableColumns = ({ ids, fixed = [], name, onChange, children }: {
     <SortableContext items={ids} strategy={horizontalListSortingStrategy}>
       {children (ids)}
     </SortableContext>
-    {typeof document !== 'undefined' && createPortal (<DragOverlay adjustScale={false}
+    {mounted && typeof document !== 'undefined' && createPortal (<DragOverlay adjustScale={false}
 	style={{ width: 'max-content', height: 'auto', maxWidth: 'calc(100vw - 2rem)' }}
         dropAnimation={motion.reduced ? null : {
 	    duration: motion.duration ('drop'), easing: motion.easing,

frontend/src/components/common/SortableList.tsx

@@ -3,7 +3,7 @@ import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor,
     from '@dnd-kit/core'
 import { SortableContext, arrayMove, rectSortingStrategy,
          sortableKeyboardCoordinates } from '@dnd-kit/sortable'
-import { useId, useRef, useState } from 'react'
+import { useEffect, useId, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { CSS } from '@dnd-kit/utilities'
 
@@ -38,6 +38,8 @@ const SortableList = (
 	renderGroup: (id: string, content: ReactNode, over: boolean) => ReactNode
 	onChange: (groups: Groups) => void; fixed?: string[] },
 ) => {
+  const [mounted, setMounted] = useState (false)
+  useEffect (() => setMounted (true), [])
   const drag = useRef<{ id: string; groups: Groups } | null> (null)
   const scope = useId ()
   const [active, setActive] = useState<string | null> (null)
@@ -139,7 +141,7 @@ const SortableList = (
 	    </div>
 	  </SortableContext>, overGroup === group)}
 	</Group>)}
-	{typeof document !== 'undefined' && createPortal (
+	{mounted && typeof document !== 'undefined' && createPortal (
 	    <DragOverlay adjustScale={false}
 		style={{ width: 'max-content', height: 'auto', maxWidth: 'calc(100vw - 2rem)' }}
 		dropAnimation={motion.reduced ? null : {