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,7 +347,16 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 	      document.body.style.userSelect = ''
 	    }}
 	    modifiers={[restrictToWindowEdges]}>
-	  {CATEGORIES.map ((cat: Category) => ((tags[cat] ?? []).length > 0 || dragging) && (
+	  {CATEGORIES.map ((cat: Category) => {
+	    const categoryTags =
+		tagRelationDisplay === 'grouped'
+		? (tags[cat] ?? [])
+		: (flatTagsByCategory[cat] ?? [])
+
+	    if (!(categoryTags.length > 0 || dragging))
+	      return null
+
+	    return (
 		<div className="my-3" key={cat}>
 		  <SubsectionTitle>
 		    <motion.div
@@ -365,19 +378,19 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 				sp,
 			    ),
 			)
-		    : flattenTagTree (tags[cat] ?? []).map (row => (
+		      : (flatTagsByCategory[cat] ?? []).map (tag => (
-			<li key={`flat-${ cat }-${ row.tag.id }`} className="mb-1">
+			  <li key={`flat-${ cat }-${ tag.id }`} className="mb-1">
 			    <DraggableDroppableTagRow
-			      tag={row.tag}
+				tag={tag}
 				nestLevel={0}
-			      pathKey={`flat-${ cat }-${ row.tag.id }`}
+				pathKey={`flat-${ cat }-${ tag.id }`}
-			      parentTagId={row.parentTagId}
 				suppressClickRef={suppressClickRef}
 				sp={sp}/>
 			  </li>)))}
 		    <DropSlot cat={cat}/>
 		  </ul>
-	      </div>))}
+		</div>)
+	  })}
 	  {post && (
 	      <motion.div
 		  layoutId={`post-info-${ sp }`}

frontend/src/components/TopNav.tsx

@@ -161,11 +161,15 @@ 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
+      animationsOff
+      ? { duration: 0 }
+      : reducedAnimations
 	? { duration: .08, ease: 'linear' as const }
 	: { duration: .2, ease: 'easeOut' as const }
   const opacityTransition =
-      reducedAnimations
+      animationsOff
+      ? { duration: 0 }
+      : reducedAnimations
 	? { duration: .08 }
 	: { duration: .12 }
   const highlightTransitionClass =