#34

frontend/src/App.tsx

@@ -12,7 +12,8 @@ import TopNav from '@/components/TopNav'
 import DialogueProvider from '@/components/dialogues/DialogueProvider'
 import { Toaster } from '@/components/ui/toaster'
 import { apiPost, isApiError } from '@/lib/api'
-import { applyClientAppearance,
+import { applyClientAnimationMode,
+	 applyClientAppearance,
 	 fetchUserThemeSlots,
 	 fetchUserSettings,
 	 getClientThemeMode,
@@ -142,6 +143,10 @@ const App: FC = () => {
     return () => mediaQuery.removeEventListener ('change', handleThemeChange)
   }, [])
 
+  useEffect (() => {
+    applyClientAnimationMode (animationMode)
+  }, [animationMode])
+
   useEffect (() => {
     const createUser = async () => {
       const data = await apiPost<{ code: string; user: User }> ('/users')

frontend/src/components/TagDetailSidebar.tsx

@@ -30,9 +30,6 @@ import type { FC, MutableRefObject, ReactNode } from 'react'
 import type { Category, Post, TagWithSections } from '@/types'
 
 type TagByCategory = { [key in Category]: TagWithSections[] }
-type FlatTagRow = {
-    tag:          TagWithSections
-    parentTagId?: number }
 
 
 const renderTagTree = (
@@ -64,34 +61,6 @@ const renderTagTree = (
 	  ?? [])]
 }
 
-
-const flattenTagTree = (
-    tags: TagWithSections[],
-): FlatTagRow[] => {
-  const seen = new Set<number> ()
-  const rows: FlatTagRow[] = []
-
-  const visit = (
-      tag:           TagWithSections,
-      parentTagId?:  number,
-  ) => {
-    if (seen.has (tag.id))
-      return
-
-    seen.add (tag.id)
-    rows.push ({ tag, parentTagId })
-
-    for (const child of tag.children ?? [])
-      visit (child, tag.id)
-  }
-
-  for (const tag of tags)
-    visit (tag)
-
-  return rows.sort ((rowA, rowB) => rowA.tag.name < rowB.tag.name ? -1 : 1)
-}
-
-
 const isDescendant = (
     root:     TagWithSections,
     targetId: number,
@@ -158,6 +127,37 @@ const buildTagByCategory = (post: Post): TagByCategory => {
 }
 
 
+const buildFlatTagByCategory = (
+    byCategory: TagByCategory,
+): TagByCategory => {
+  const tagsTmp = { } as TagByCategory
+  const seen = new Set<number> ()
+
+  for (const category of CATEGORIES)
+    tagsTmp[category] = []
+
+  const visit = (tag: TagWithSections) => {
+    if (seen.has (tag.id))
+      return
+
+    seen.add (tag.id)
+    tagsTmp[tag.category].push ({ ...tag, children: [] })
+
+    for (const child of tag.children ?? [])
+      visit (child)
+  }
+
+  for (const category of CATEGORIES)
+    for (const tag of byCategory[category] ?? [])
+      visit (tag)
+
+  for (const category of CATEGORIES)
+    tagsTmp[category].sort ((tagA, tagB) => tagA.name < tagB.name ? -1 : 1)
+
+  return tagsTmp
+}
+
+
 const changeCategory = async (
     tagId:    number,
     category: Category): Promise<void> => {
@@ -210,6 +210,10 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
   const [dragging, setDragging] = useState (false)
   const [saving, setSaving] = useState (false)
   const [tags, setTags] = useState (baseTags)
+  const flatTagsByCategory = useMemo<TagByCategory> (
+      () => buildFlatTagByCategory (tags),
+      [tags],
+  )
 
   const suppressClickRef = useRef (false)
 
@@ -343,41 +347,50 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 	      document.body.style.userSelect = ''
 	    }}
 	    modifiers={[restrictToWindowEdges]}>
-	  {CATEGORIES.map ((cat: Category) => ((tags[cat] ?? []).length > 0 || dragging) && (
-	      <div className="my-3" key={cat}>
-		<SubsectionTitle>
-		  <motion.div
-		      layoutId={`tag-${ sp ? 'sp-' : '' }${ cat }`}
-		      transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
-		    {CATEGORY_NAMES[cat]}
-		  </motion.div>
-		</SubsectionTitle>
+	  {CATEGORIES.map ((cat: Category) => {
+	    const categoryTags =
+		tagRelationDisplay === 'grouped'
+		? (tags[cat] ?? [])
+		: (flatTagsByCategory[cat] ?? [])
 
-		<ul>
-		  {(tagRelationDisplay === 'grouped'
-		    ? (tags[cat] ?? []).flatMap (tag =>
-			  renderTagTree (
-			      tag,
-			      0,
-			      `cat-${ cat }`,
-			      suppressClickRef,
-			      undefined,
-			      sp,
-			  ),
-		      )
-		    : flattenTagTree (tags[cat] ?? []).map (row => (
-			<li key={`flat-${ cat }-${ row.tag.id }`} className="mb-1">
-			  <DraggableDroppableTagRow
-			      tag={row.tag}
-			      nestLevel={0}
-			      pathKey={`flat-${ cat }-${ row.tag.id }`}
-			      parentTagId={row.parentTagId}
-			      suppressClickRef={suppressClickRef}
-			      sp={sp}/>
-			</li>)))}
-		  <DropSlot cat={cat}/>
-		</ul>
-	      </div>))}
+	    if (!(categoryTags.length > 0 || dragging))
+	      return null
+
+	    return (
+		<div className="my-3" key={cat}>
+		  <SubsectionTitle>
+		    <motion.div
+			layoutId={`tag-${ sp ? 'sp-' : '' }${ cat }`}
+			transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
+		      {CATEGORY_NAMES[cat]}
+		    </motion.div>
+		  </SubsectionTitle>
+
+		  <ul>
+		    {(tagRelationDisplay === 'grouped'
+		      ? (tags[cat] ?? []).flatMap (tag =>
+			    renderTagTree (
+				tag,
+				0,
+				`cat-${ cat }`,
+				suppressClickRef,
+				undefined,
+				sp,
+			    ),
+			)
+		      : (flatTagsByCategory[cat] ?? []).map (tag => (
+			  <li key={`flat-${ cat }-${ tag.id }`} className="mb-1">
+			    <DraggableDroppableTagRow
+				tag={tag}
+				nestLevel={0}
+				pathKey={`flat-${ cat }-${ tag.id }`}
+				suppressClickRef={suppressClickRef}
+				sp={sp}/>
+			  </li>)))}
+		    <DropSlot cat={cat}/>
+		  </ul>
+		</div>)
+	  })}
 	  {post && (
 	      <motion.div
 		  layoutId={`post-info-${ sp }`}

frontend/src/components/TopNav.tsx

@@ -161,13 +161,17 @@ const TopNav: FC<Props> = ({ user }) => {
       visibleMenu.findIndex (item => location.pathname.startsWith (item.base || item.to))
   const submenuHeight = moreVsbl ? 40 * moreMenu.length : (activeIdx < 0 ? 0 : 40)
   const topNavTransition =
-      reducedAnimations
-      ? { duration: .08, ease: 'linear' as const }
-      : { duration: .2, ease: 'easeOut' as const }
+      animationsOff
+      ? { duration: 0 }
+      : reducedAnimations
+	? { duration: .08, ease: 'linear' as const }
+	: { duration: .2, ease: 'easeOut' as const }
   const opacityTransition =
-      reducedAnimations
-      ? { duration: .08 }
-      : { duration: .12 }
+      animationsOff
+      ? { duration: 0 }
+      : reducedAnimations
+	? { duration: .08 }
+	: { duration: .12 }
   const highlightTransitionClass =
       animationsOff
       ? undefined