Merge remote-tracking branch 'origin/main' into feature/047

2026-05-03 03:14:32 +09:00
parent e40f7a3620 5002859fc8
commit efaeb5325e
118 changed files with 9211 additions and 912 deletions
@@ -15,6 +15,8 @@
    "@dnd-kit/modifiers": "^9.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@fontsource-variable/noto-sans-jp": "^5.2.9",
+    "@mdx-js/react": "^3.1.1",
+    "@mdx-js/rollup": "^3.1.1",
    "@radix-ui/react-dialog": "^1.1.14",
    "@radix-ui/react-switch": "^1.2.5",
    "@radix-ui/react-toast": "^1.2.14",
@@ -37,13 +39,15 @@
    "react-youtube": "^10.1.0",
    "remark-gfm": "^4.0.1",
    "tailwind-merge": "^3.3.0",
-    "zustand": "^5.0.8",
-    "unist-util-visit-parents": "^6.0.1"
+    "unist-util-visit-parents": "^6.0.1",
+    "zustand": "^5.0.8"
  },
  "devDependencies": {
    "@eslint/js": "^9.25.0",
+    "@tailwindcss/typography": "^0.5.19",
    "@types/axios": "^0.14.4",
    "@types/markdown-it": "^14.1.2",
+    "@types/mdx": "^2.0.13",
    "@types/node": "^24.0.13",
    "@types/react": "^19.1.2",
    "@types/react-dom": "^19.1.2",
@@ -1,4 +1,4 @@
-import { AnimatePresence, LayoutGroup } from 'framer-motion'
+import { AnimatePresence, LayoutGroup, motion } from 'framer-motion'
 import { useEffect, useState } from 'react'
 import { BrowserRouter,
 	 Navigate,
@@ -10,8 +10,15 @@ import RouteBlockerOverlay from '@/components/RouteBlockerOverlay'
 import TopNav from '@/components/TopNav'
 import { Toaster } from '@/components/ui/toaster'
 import { apiPost, isApiError } from '@/lib/api'
+import MaterialBasePage from '@/pages/materials/MaterialBasePage'
+import MaterialDetailPage from '@/pages/materials/MaterialDetailPage'
+import MaterialListPage from '@/pages/materials/MaterialListPage'
+import MaterialNewPage from '@/pages/materials/MaterialNewPage'
+// import MaterialSearchPage from '@/pages/materials/MaterialSearchPage'
+import MorePage from '@/pages/MorePage'
 import NicoTagListPage from '@/pages/tags/NicoTagListPage'
 import NotFound from '@/pages/NotFound'
+import TOSPage from '@/pages/TOSPage.mdx'
 import PostDetailPage from '@/pages/posts/PostDetailPage'
 import PostHistoryPage from '@/pages/posts/PostHistoryPage'
 import PostListPage from '@/pages/posts/PostListPage'
@@ -19,6 +26,8 @@ import PostNewPage from '@/pages/posts/PostNewPage'
 import PostSearchPage from '@/pages/posts/PostSearchPage'
 import ServiceUnavailable from '@/pages/ServiceUnavailable'
 import SettingPage from '@/pages/users/SettingPage'
+import TagDetailPage from '@/pages/tags/TagDetailPage'
+import TagHistoryPage from '@/pages/tags/TagHistoryPage'
 import TagListPage from '@/pages/tags/TagListPage'
 import TheatreDetailPage from '@/pages/theatres/TheatreDetailPage'
 import WikiDetailPage from '@/pages/wiki/WikiDetailPage'
@@ -39,30 +48,38 @@ const RouteTransitionWrapper = ({ user, setUser }: {
  const location = useLocation ()

  return (
-      <LayoutGroup id="gallery-shared">
-	<AnimatePresence mode="wait">
-	  <Routes location={location} key={location.pathname}>
-	    <Route path="/" element={<Navigate to="/posts" replace/>}/>
-	    <Route path="/posts" element={<PostListPage/>}/>
-	    <Route path="/posts/new" element={<PostNewPage user={user}/>}/>
-	    <Route path="/posts/search" element={<PostSearchPage/>}/>
-	    <Route path="/posts/:id" element={<PostDetailRoute user={user}/>}/>
-	    <Route path="/posts/changes" element={<PostHistoryPage/>}/>
-	    <Route path="/tags" element={<TagListPage/>}/>
-	    <Route path="/tags/nico" element={<NicoTagListPage user={user}/>}/>
-	    <Route path="/theatres/:id" element={<TheatreDetailPage/>}/>
-	    <Route path="/wiki" element={<WikiSearchPage/>}/>
-	    <Route path="/wiki/:title" element={<WikiDetailPage/>}/>
-	    <Route path="/wiki/new" element={<WikiNewPage user={user}/>}/>
-	    <Route path="/wiki/:id/edit" element={<WikiEditPage user={user}/>}/>
-	    <Route path="/wiki/:id/diff" element={<WikiDiffPage/>}/>
-	    <Route path="/wiki/changes" element={<WikiHistoryPage/>}/>
-	    <Route path="/users/settings" element={<SettingPage user={user} setUser={setUser}/>}/>
-	    <Route path="/settings" element={<Navigate to="/users/settings" replace/>}/>
-	    <Route path="*" element={<NotFound/>}/>
-	  </Routes>
-	</AnimatePresence>
-      </LayoutGroup>)
+      <AnimatePresence mode="wait">
+	<Routes location={location}>
+	  <Route path="/" element={<Navigate to="/posts" replace/>}/>
+	  <Route path="/posts" element={<PostListPage/>}/>
+	  <Route path="/posts/new" element={<PostNewPage user={user}/>}/>
+	  <Route path="/posts/search" element={<PostSearchPage/>}/>
+	  <Route path="/posts/:id" element={<PostDetailRoute user={user}/>}/>
+	  <Route path="/posts/changes" element={<PostHistoryPage/>}/>
+	  <Route path="/tags" element={<TagListPage/>}/>
+	  <Route path="/tags/:id" element={<TagDetailPage/>}/>
+	  <Route path="/tags/nico" element={<NicoTagListPage user={user}/>}/>
+	  <Route path="/tags/changes" element={<TagHistoryPage/>}/>
+	  <Route path="/theatres/:id" element={<TheatreDetailPage/>}/>
+	  <Route path="/materials" element={<MaterialBasePage/>}>
+	    <Route index element={<MaterialListPage/>}/>
+	    <Route path="new" element={<MaterialNewPage/>}/>
+	    <Route path=":id" element ={<MaterialDetailPage/>}/>
+	  </Route>
+	  {/* <Route path="/materials/search" element={<MaterialSearchPage/>}/> */}
+	  <Route path="/wiki" element={<WikiSearchPage/>}/>
+	  <Route path="/wiki/:title" element={<WikiDetailPage/>}/>
+	  <Route path="/wiki/new" element={<WikiNewPage user={user}/>}/>
+	  <Route path="/wiki/:id/edit" element={<WikiEditPage user={user}/>}/>
+	  <Route path="/wiki/:id/diff" element={<WikiDiffPage/>}/>
+	  <Route path="/wiki/changes" element={<WikiHistoryPage/>}/>
+	  <Route path="/users/settings" element={<SettingPage user={user} setUser={setUser}/>}/>
+	  <Route path="/settings" element={<Navigate to="/users/settings" replace/>}/>
+	  <Route path="/tos" element={<TOSPage/>}/>
+	  <Route path="/more" element={<MorePage/>}/>
+	  <Route path="*" element={<NotFound/>}/>
+	</Routes>
+      </AnimatePresence>)
 }


@@ -120,10 +137,15 @@ export default (() => {
      <>
 	<RouteBlockerOverlay/>
 	<BrowserRouter>
-	  <div className="flex flex-col h-screen w-screen">
-	    <TopNav user={user}/>
-	    <RouteTransitionWrapper user={user} setUser={setUser}/>
-	  </div>
+	  <LayoutGroup>
+	    <motion.div
+		layout="position"
+		transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+		className="flex flex-col h-dvh w-full overflow-y-hidden">
+	      <TopNav user={user}/>
+	      <RouteTransitionWrapper user={user} setUser={setUser}/>
+	    </motion.div>
+	  </LayoutGroup>
 	  <Toaster/>
 	</BrowserRouter>
      </>)
@@ -90,7 +90,9 @@ export default (({ tag, nestLevel, pathKey, parentTagId, suppressClickRef, sp }:
 	  className={cn ('rounded select-none', over && 'ring-2 ring-offset-2')}
 	  {...attributes}
 	  {...listeners}>
-	<motion.div layoutId={`tag-${ sp ? 'sp-' : '' }${ tag.id }`}>
+	<motion.div
+	    transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+	    layoutId={`tag-${ sp ? 'sp-' : '' }${ tag.id }`}>
 	  <TagLink tag={tag} nestLevel={nestLevel}/>
 	</motion.div>
      </div>)
@@ -0,0 +1,97 @@
+import { Fragment, useEffect, useState } from 'react'
+
+import TagLink from '@/components/TagLink'
+import SidebarComponent from '@/components/layout/SidebarComponent'
+import { apiGet } from '@/lib/api'
+
+import type { FC, ReactNode } from 'react'
+
+import type { Tag } from '@/types'
+
+type TagWithDepth = Tag & {
+    hasChildren:  boolean
+    children:     TagWithDepth[] }
+
+
+const setChildrenById = (
+    tags:     TagWithDepth[],
+    targetId: number,
+    children: TagWithDepth[],
+): TagWithDepth[] => (
+    tags.map (tag => {
+      if (tag.id === targetId)
+	return { ...tag, children }
+
+      if (tag.children.length === 0)
+	return tag
+
+      return { ...tag,
+	       children: (setChildrenById (tag.children, targetId, children)
+			  .filter (t => t.category !== 'meme' || t.hasChildren)) }
+    }))
+
+
+export default (() => {
+  const [tags, setTags] = useState<TagWithDepth[]> ([])
+  const [openTags, setOpenTags] = useState<Record<number, boolean>> ({ })
+  const [tagFetchedFlags, setTagFetchedFlags] = useState<Record<number, boolean>> ({ })
+
+  useEffect (() => {
+    void (async () => {
+      setTags ((await apiGet<TagWithDepth[]> ('/tags/with-depth'))
+	       .filter (t => t.category !== 'meme' || t.hasChildren))
+    }) ()
+  }, [])
+
+  const renderTags = (ts: TagWithDepth[], nestLevel = 0): ReactNode => (
+      ts.map (t => (
+	  <Fragment key={t.id}>
+	    <li>
+	      <div className="flex">
+		<div className="flex-none w-4">
+		  {t.hasChildren && (
+		      <a
+			  href="#"
+			  onClick={async e => {
+			    e.preventDefault ()
+			    if (!(tagFetchedFlags[t.id]))
+			      {
+				try
+				{
+				  const data =
+				      await apiGet<TagWithDepth[]> (
+					  '/tags/with-depth', { params: { parent: String (t.id) } })
+				  setTags (prev => setChildrenById (prev, t.id, data))
+				  setTagFetchedFlags (prev => ({ ...prev, [t.id]: true }))
+				}
+				catch
+				{
+				  ;
+				}
+			      }
+			    setOpenTags (prev => ({ ...prev, [t.id]: !(prev[t.id]) }))
+			  }}>
+			{openTags[t.id] ? <>&minus;</> : '+'}
+		      </a>)}
+		</div>
+		<div className="flex-1 truncate">
+		  <TagLink
+		      tag={t}
+		      nestLevel={nestLevel}
+		      title={t.name}
+		      withCount={false}
+		      withWiki={false}
+		      to={`/materials?tag=${ encodeURIComponent (t.name) }`}/>
+		</div>
+	      </div>
+	    </li>
+	    {openTags[t.id] && renderTags (t.children, nestLevel + 1)}
+	  </Fragment>)))
+
+  return (
+      <SidebarComponent>
+	<ul>
+	  {renderTags (tags)}
+	</ul>
+      </SidebarComponent>)
+}) satisfies FC
@@ -62,7 +62,7 @@ export default (({ post, onSave }: Props) => {
 	  <Label>タイトル</Label>
 	  <input type="text"
 		 className="w-full border rounded p-2"
-		 value={title}
+		 value={title ?? ''}
 		 onChange={ev => setTitle (ev.target.value)}/>
 	</div>

@@ -56,7 +56,7 @@ export default (({ posts, onClick }: Props) => {
 		      cardRef.current.style.zIndex = ''
 		      cardRef.current.style.position = ''
 		    }}
-		    transition={{ type: 'spring', stiffness: 500, damping: 40, mass: .5 }}>
+		    transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
 		  <img src={post.thumbnail || post.thumbnailBase || undefined}
 		       alt={post.title || post.url}
 		       title={post.title || post.url || undefined}
@@ -313,7 +313,9 @@ export default (({ post, sp }: Props) => {
 	  {CATEGORIES.map ((cat: Category) => ((tags[cat] ?? []).length > 0 || dragging) && (
 	      <div className="my-3" key={cat}>
 		<SubsectionTitle>
-		  <motion.div layoutId={`tag-${ sp ? 'sp-' : '' }${ cat }`}>
+		  <motion.div
+		      layoutId={`tag-${ sp ? 'sp-' : '' }${ cat }`}
+		      transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
 		    {CATEGORY_NAMES[cat]}
 		  </motion.div>
 		</SubsectionTitle>
@@ -325,7 +327,9 @@ export default (({ post, sp }: Props) => {
 		</ul>
 	      </div>))}
 	  {post && (
-	      <motion.div layoutId={`post-info-${ sp }`}>
+	      <motion.div
+		  layoutId={`post-info-${ sp }`}
+		  transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
 		<SectionTitle>情報</SectionTitle>
 		<ul>
 		  <li>Id.: {post.id}</li>
@@ -1,8 +1,5 @@
-import { useEffect, useState } from 'react'
-
 import PrefetchLink from '@/components/PrefetchLink'
 import { LIGHT_COLOUR_SHADE, DARK_COLOUR_SHADE, TAG_COLOUR } from '@/consts'
-import { apiGet } from '@/lib/api'
 import { cn } from '@/lib/utils'

 import type { ComponentProps, FC, HTMLAttributes } from 'react'
@@ -13,8 +10,7 @@ type CommonProps = {
    tag:        Tag
    nestLevel?: number
    withWiki?:  boolean
-    withCount?: boolean
-    prefetch?:  boolean }
+    withCount?: boolean }

 type PropsWithLink =
    & CommonProps
@@ -36,37 +32,7 @@ export default (({ tag,
 		   linkFlg   = true,
 		   withWiki  = true,
 		   withCount = true,
-		   prefetch  = false,
 		   ...props }: Props) => {
-  const [havingWiki, setHavingWiki] = useState (true)
-
-  const wikiExists = async (tag: Tag) => {
-    if ('hasWiki' in tag)
-      {
-	setHavingWiki (tag.hasWiki)
-	return
-      }
-
-    const tagName = (tag as Tag).name
-
-    try
-    {
-      await apiGet (`/wiki/title/${ encodeURIComponent (tagName) }/exists`)
-      setHavingWiki (true)
-    }
-    catch
-    {
-      setHavingWiki (false)
-    }
-  }
-
-  useEffect (() => {
-    if (!(linkFlg) || !(withWiki))
-      return
-
-    wikiExists (tag)
-  }, [tag.name, linkFlg, withWiki])
-
  const spanClass = cn (
      `text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE }`,
      `dark:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE }`)
@@ -79,19 +45,39 @@ export default (({ tag,
      <>
 	{(linkFlg && withWiki) && (
 	    <span className="mr-1">
-	      {havingWiki
+	      {(tag.materialId != null || tag.hasWiki)
 	       ? (
-		  <PrefetchLink to={`/wiki/${ encodeURIComponent (tag.name) }`}
-			className={linkClass}>
-		    ?
-		  </PrefetchLink>)
+		  tag.materialId == null
+		  ? (
+		      <PrefetchLink
+			  to={`/wiki/${ encodeURIComponent (tag.name) }`}
+			  className={linkClass}>
+			?
+		      </PrefetchLink>)
+		  : (
+		      <PrefetchLink
+			  to={`/materials/${ tag.materialId }`}
+			  className={linkClass}>
+			?
+		      </PrefetchLink>))
 	       : (
-		  <PrefetchLink to={`/wiki/${ encodeURIComponent (tag.name) }`}
-			className="animate-[wiki-blink_.25s_steps(2,end)_infinite]
-				   dark:animate-[wiki-blink-dark_.25s_steps(2,end)_infinite]"
-			title={`${ tag.name } Wiki が存在しません．`}>
-		    !
-		  </PrefetchLink>)}
+		  ['character', 'material'].includes (tag.category)
+		  ? (
+		      <PrefetchLink
+			  to={`/materials/new?tag=${ encodeURIComponent (tag.name) }`}
+			  className="animate-[wiki-blink_.25s_steps(2,end)_infinite]
+				     dark:animate-[wiki-blink-dark_.25s_steps(2,end)_infinite]"
+			  title={`${ tag.name } 素材情報が存在しません．`}>
+			!
+		      </PrefetchLink>)
+		  : (
+		      <PrefetchLink
+			  to={`/wiki/${ encodeURIComponent (tag.name) }`}
+			  className="animate-[wiki-blink_.25s_steps(2,end)_infinite]
+				     dark:animate-[wiki-blink-dark_.25s_steps(2,end)_infinite]"
+			  title={`${ tag.name } Wiki が存在しません．`}>
+			!
+		      </PrefetchLink>))}
 	    </span>)}
 	{nestLevel > 0 && (
 	    <span
@@ -108,19 +94,12 @@ export default (({ tag,
 	    </>)}
 	{linkFlg
 	 ? (
-	    prefetch
-	    ? <PrefetchLink
-		  to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
-		  className={linkClass}
-		  {...props}>
-		{tag.name}
-	      </PrefetchLink>
-	    : <PrefetchLink
-		  to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
-		  className={linkClass}
-		  {...props}>
-		{tag.name}
-	      </PrefetchLink>)
+	    <PrefetchLink
+		to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
+		className={linkClass}
+		{...props}>
+	      {tag.name}
+	    </PrefetchLink>)
 	 : (
 	    <span className={spanClass}
 		  {...props}>
@@ -65,8 +65,10 @@ export default (({ posts, onClick }: Props) => {
 	  {CATEGORIES.flatMap (cat => cat in tags ? (
 	      tags[cat].map (tag => (
 		  <li key={tag.id} className="mb-1">
-		    <motion.div layoutId={`tag-${ tag.id }`}>
-		      <TagLink tag={tag} prefetch onClick={onClick}/>
+		    <motion.div
+			transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+			layoutId={`tag-${ tag.id }`}>
+		      <TagLink tag={tag} onClick={onClick}/>
 		    </motion.div>
 		  </li>))) : [])}
 	</ul>
@@ -8,82 +8,59 @@ import PrefetchLink from '@/components/PrefetchLink'
 import TopNavUser from '@/components/TopNavUser'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
 import { tagsKeys, wikiKeys } from '@/lib/queryKeys'
-import { fetchTagByName } from '@/lib/tags'
+import { fetchTag, fetchTagByName } from '@/lib/tags'
 import { cn } from '@/lib/utils'
 import { fetchWikiPage } from '@/lib/wiki'

 import type { FC, MouseEvent } from 'react'

-import type { Menu, User } from '@/types'
+import type { Menu, MenuVisibleItem, Tag, User } from '@/types'

 type Props = { user: User | null }


-export default (({ user }: Props) => {
-  const location = useLocation ()
-
-  const dirRef = useRef<(-1) | 1> (1)
-  const itemsRef = useRef<(HTMLAnchorElement | null)[]> ([])
-  const navRef = useRef<HTMLDivElement | null> (null)
-
-  const measure = () => {
-    const nav = navRef.current
-    const el = itemsRef.current[activeIdx]
-    if (!(nav) || !(el) || activeIdx < 0)
-      return
-
-    const navRect = nav.getBoundingClientRect ()
-    const elRect = el.getBoundingClientRect ()
-
-    setHl ({ left:    elRect.left - navRect.left,
-	     width:   elRect.width,
-	     visible: true })
-  }
-
-  const [hl, setHl] = useState<{ left: number; width: number; visible: boolean }> ({
-      left:     0,
-      width:    0,
-      visible:  false })
-  const [menuOpen, setMenuOpen] = useState (false)
-  const [openItemIdx, setOpenItemIdx] = useState (-1)
-  const [wikiId, setWikiId] = useState<number | null> (WikiIdBus.get ())
-
-  const wikiIdStr = String (wikiId ?? '')
-
-  const { data: wikiPage } = useQuery ({
-      enabled: Boolean (wikiIdStr),
-      queryKey: wikiKeys.show (wikiIdStr, { }),
-      queryFn: () => fetchWikiPage (wikiIdStr, { }) })
-
-  const effectiveTitle = wikiPage?.title ?? ''
-
-  const { data: tag } = useQuery ({
-      enabled: Boolean (effectiveTitle),
-      queryKey: tagsKeys.show (effectiveTitle),
-      queryFn: () => fetchTagByName (effectiveTitle) })
-
+export const menuOutline = ({ tag, wikiId, user, pathName }: { 
+    tag?: Tag | null
+    wikiId: number | null
+    user: User | null,
+    pathName: string }): Menu => {
  const postCount = tag?.postCount ?? 0

-  const wikiPageFlg = Boolean (/^\/wiki\/(?!new|changes)[^\/]+/.test (location.pathname) && wikiId)
-  const wikiTitle = location.pathname.split ('/')[2] ?? ''
-  const menu: Menu = [
+  const wikiPageFlg = Boolean (/^\/wiki\/(?!new|changes)[^\/]+/.test (pathName) && wikiId)
+  const wikiTitle = pathName.split ('/')[2] ?? ''
+
+  const tagFlg = /^\/tags\/\d+/.test (pathName)
+
+  return [
      { name: '広場', to: '/posts', subMenu: [
 	  { name: '一覧', to: '/posts' },
 	  { name: '検索', to: '/posts/search' },
-	  { name: '投稿追加', to: '/posts/new' },
+	  { name: '追加', to: '/posts/new' },
 	  { name: '履歴', to: '/posts/changes' },
 	  { name: 'ヘルプ', to: '/wiki/ヘルプ:広場' }] },
      { name: 'タグ', to: '/tags', subMenu: [
-	  { name: 'タグ一覧', to: '/tags', visible: true },
-	  { name: '別名タグ', to: '/tags/aliases', visible: false },
-	  { name: '上位タグ', to: '/tags/implications', visible: false },
+	  { name: 'マスタ', to: '/tags' },
 	  { name: 'ニコニコ連携', to: '/tags/nico' },
-	  { name: 'ヘルプ', to: '/wiki/ヘルプ:タグ' }] },
+	  { name: '履歴', to: '/tags/changes' },
+	  { name: 'ヘルプ', to: '/wiki/ヘルプ:タグ' },
+	  { component: <Separator/>, visible: tagFlg },
+	  { name: `広場 (${ postCount || 0 })`,
+	    to: `/posts?tags=${ encodeURIComponent (tag?.name ?? '') }`,
+	    visible: tagFlg },
+	  { name: '履歴', to: `/tags/changes?id=${ tag?.id }`,
+	    visible: tagFlg && tag?.category !== 'nico' }] },
+      { name: '素材', to: '/materials', visible: false, subMenu: [
+	  { name: '一覧', to: '/materials' },
+	  { name: '検索', to: '/materials/search', visible: false }, 
+	  { name: '追加', to: '/materials/new' },
+	  { name: '履歴', to: '/materials/changes', visible: false },
+	  { name: 'ヘルプ', to: '/wiki/ヘルプ:素材集' }] },
      { name: '上映会', to: '/theatres/1', base: '/theatres', subMenu: [
-          { name: <>第&thinsp;1&thinsp;会場</>, to: '/theatres/1' },
-          { name: 'CyTube', to: '//cytube.mm428.net/r/deernijika' },
+	  { name: <>第&thinsp;1&thinsp;会場</>, to: '/theatres/1' },
+	  { name: 'CyTube', to: '//cytube.mm428.net/r/deernijika' },
 	  { name: <>ニジカ放送局第&thinsp;1&thinsp;チャンネル</>,
-	    to: '//www.youtube.com/watch?v=DCU3hL4Uu6A' }] },
+	    to: '//www.youtube.com/watch?v=DCU3hL4Uu6A' },
+	  { name: 'ヘルプ', to: '/wiki/ヘルプ:上映会' }] },
      { name: 'Wiki', to: '/wiki/ヘルプ:ホーム', base: '/wiki', subMenu: [
 	  { name: '検索', to: '/wiki' },
 	  { name: '新規', to: '/wiki/new' },
@@ -94,12 +71,69 @@ export default (({ user }: Props) => {
 	    visible: wikiPageFlg },
 	  { name: '履歴', to: `/wiki/changes?id=${ wikiId }`, visible: wikiPageFlg },
 	  { name: '編輯', to: `/wiki/${ wikiId || wikiTitle }/edit`, visible: wikiPageFlg }] },
-      { name: 'ユーザ', to: '/users/settings', subMenu: [
+      { name: 'ユーザ', to: '/users/settings', visible: false, subMenu: [
 	  { name: '一覧', to: '/users', visible: false },
 	  { name: 'お前', to: `/users/${ user?.id }`, visible: false },
-	  { name: '設定', to: '/users/settings', visible: Boolean (user) }] }]
+	  { name: '設定', to: '/users/settings', visible: Boolean (user) }] },
+      { name: '法規', visible: false, subMenu: [
+	  { name: '利用規約', to: '/tos' }] }]
+}

-  const activeIdx = menu.findIndex (item => location.pathname.startsWith (item.base || item.to))
+
+export default (({ user }: Props) => {
+  const location = useLocation ()
+
+  const dirRef = useRef<(-1) | 1> (1)
+  const itemsRef = useRef<(HTMLAnchorElement | null)[]> ([])
+  const navRef = useRef<HTMLDivElement | null> (null)
+
+  const measure = (idx: number) => {
+    const nav = navRef.current
+    const el = itemsRef.current[idx < 0 ? visibleMenu.length : idx]
+
+    if (!(nav) || !(el))
+      {
+	setHL ({ left: 0, width: 0, visible: true })
+	return
+      }
+
+    const navRect = nav.getBoundingClientRect ()
+    const elRect = el.getBoundingClientRect ()
+
+    setHL ({ left:    elRect.left - navRect.left,
+	     width:   elRect.width,
+	     visible: true })
+  }
+
+  const [hl, setHL] = useState<{ left: number; width: number; visible: boolean }> ({
+      left:     0,
+      width:    0,
+      visible:  false })
+  const [menuOpen, setMenuOpen] = useState (false)
+  const [moreVsbl, setMoreVsbl] = useState (false)
+  const [openItemIdx, setOpenItemIdx] = useState (-1)
+  const [wikiId, setWikiId] = useState<number | null> (WikiIdBus.get ())
+
+  const wikiIdStr = String (wikiId ?? '')
+
+  const { data: wikiPage } = useQuery ({
+      enabled: Boolean (wikiIdStr),
+      queryKey: wikiKeys.show (wikiIdStr, { }),
+      queryFn: () => fetchWikiPage (wikiIdStr, { }) })
+
+  const tagFlg = /^\/tags\/\d+/.test (location.pathname)
+  const effectiveTitle = (tagFlg ? location.pathname.split ('/')[2] : wikiPage?.title) ?? ''
+
+  const { data: tag } = useQuery ({
+      enabled: Boolean (effectiveTitle),
+      queryKey: tagsKeys.show (effectiveTitle),
+      queryFn: () => (tagFlg ? fetchTag : fetchTagByName) (effectiveTitle) })
+
+
+  const menu = menuOutline ({ tag, wikiId, user, pathName: location.pathname })
+  const visibleMenu = menu.filter ((item): item is MenuVisibleItem => item.visible ?? true)
+  const activeIdx =
+      visibleMenu.findIndex (item => location.pathname.startsWith (item.base || item.to))

  const prevActiveIdxRef = useRef<number> (activeIdx)

@@ -112,35 +146,31 @@ export default (({ user }: Props) => {
  const dir = dirRef.current

  useLayoutEffect (() => {
-    if (activeIdx < 0)
-      return
-
-    const raf = requestAnimationFrame (measure)
-    const onResize = () => requestAnimationFrame (measure)
+    const raf = requestAnimationFrame (() => measure (moreVsbl ? -1 : activeIdx))
+    const onResize = () => requestAnimationFrame (() => measure (moreVsbl ? -1 : activeIdx))

    addEventListener ('resize', onResize)
    return () => {
      cancelAnimationFrame (raf)
      removeEventListener ('resize', onResize)
    }
-  }, [activeIdx])
+  })

  useEffect (() => {
    const unsubscribe = WikiIdBus.subscribe (setWikiId)
    return () => unsubscribe ()
-  }, [])
+  }, [activeIdx])

  useEffect (() => {
    setMenuOpen (false)
-    setOpenItemIdx (menu.findIndex (item => (
-	location.pathname.startsWith (item.base || item.to))))
+    setOpenItemIdx (activeIdx)
  }, [location])

  return (
      <>
-	<nav className="px-3 flex justify-between items-center w-full min-h-[48px]
+	<nav className="px-3 flex justify-between items-center w-full
 			bg-yellow-200 dark:bg-red-975 md:bg-yellow-50">
-	  <div className="flex items-center gap-2 h-full">
+	  <div className="flex items-center gap-2 h-12">
 	    <PrefetchLink
 		to="/posts"
 		className="mx-4 text-xl font-bold text-pink-600 hover:text-pink-400
@@ -151,26 +181,48 @@ export default (({ user }: Props) => {
 	      ぼざクリ タグ広場
 	    </PrefetchLink>

-	    <div ref={navRef} className="relative hidden md:flex h-full items-center">
+	    <div ref={navRef} className="relative hidden md:flex h-12 items-center">
 	      <div aria-hidden
-		   className={cn ('absolute top-1/2 -translate-y-1/2 h-full',
+		   className={cn ('absolute inset-y-0 h-12',
 				  'bg-yellow-200 dark:bg-red-950',
 				  'transition-[transform,width] duration-200 ease-out')}
 		   style={{ width:      hl.width,
-			    transform:  `translate(${ hl.left }px, -50%)`,
+			    transform:  `translateX(${ hl.left }px)`,
 			    opacity:    hl.visible ? 1 : 0 }}/>

-	      {menu.map ((item, i) => (
-		  <PrefetchLink
-		      key={i}
-		      to={item.to}
-		      ref={(el: (HTMLAnchorElement | null)) => {
-			itemsRef.current[i] = el
-		      }}
-		      className={cn ('relative z-10 flex h-full items-center px-5',
-				     (i === openItemIdx) && 'font-bold')}>
-		    {item.name}
-		  </PrefetchLink>))}
+	      {visibleMenu.map ((item, i) => (
+		  <motion.div
+		      key={item.to}
+		      layoutId={`menu-${ item.name }`}
+		      animate={{ opacity: moreVsbl ? 0 : 1 }}
+		      transition={{ opacity: { duration: .12 },
+				    layout: { duration: .2, ease: 'easeOut' } }}
+		      style={{ pointerEvents: moreVsbl ? 'none' : 'auto' }}
+		      onMouseEnter={() => setMoreVsbl (false)}>
+		    <PrefetchLink
+			to={item.to}
+			ref={(el: (HTMLAnchorElement | null)) => {
+			  itemsRef.current[i] = el
+			}}
+			className={cn ('relative z-10 flex h-full items-center px-5',
+				       (i === openItemIdx) && 'font-bold')}>
+		      {item.name}
+		    </PrefetchLink>
+		  </motion.div>))}
+	      <PrefetchLink
+		  to="/more"
+		  ref={(el: (HTMLAnchorElement | null)) => {
+		    itemsRef.current[visibleMenu.length] = el
+		  }}
+		  onClick={() => setMoreVsbl (false)}
+		  onMouseEnter={() => {
+		    setMoreVsbl (true)
+		    measure (-1)
+		  }}
+		  className={cn ('relative z-10 flex h-full items-center px-5',
+				 (openItemIdx < 0 || moreVsbl) && 'font-bold')}>
+		その他 &raquo;
+	      </PrefetchLink>
 	    </div>
 	  </div>

@@ -188,36 +240,115 @@ export default (({ user }: Props) => {
 	  </a>
 	</nav>

-	<div className="relative hidden md:flex bg-yellow-200 dark:bg-red-950
-			items-center w-full min-h-[40px] overflow-hidden">
-	  <AnimatePresence initial={false} custom={dir}>
-	    <motion.div
-		key={activeIdx}
-		custom={dir}
-		variants={{ enter: (d: -1 | 1) => ({ y: d * 24, opacity: 0 }),
-			    centre: { y: 0, opacity: 1 },
-			    exit: (d: -1 | 1) => ({ y: (-d) * 24, opacity: 0 }) }}
-		className="absolute inset-0 flex items-center px-3"
-		initial="enter"
-		animate="centre"
-		exit="exit"
-		transition={{ duration: .2, ease: 'easeOut' }}>
-	      {(menu[activeIdx]?.subMenu ?? [])
-	       .filter (item => item.visible ?? true)
-	       .map ((item, i) => (
-		  'component' in item
-		  ? <Fragment key={`c-${ i }`}>{item.component}</Fragment>
-		  : (
-		      <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>)))}
-	    </motion.div>
-	  </AnimatePresence>
-	</div>
+	<AnimatePresence initial={false}>
+	  <motion.div
+	      key="submenu-shell"
+	      layout
+	      className="relative hidden md:block overflow-hidden
+			 bg-yellow-200 dark:bg-red-950"
+	      style={{ height: moreVsbl ? 40 * menu.length : (activeIdx < 0 ? 0 : 40) }}
+	      onMouseLeave={() => {
+		if (moreVsbl)
+		  setMoreVsbl (false)
+	      }}
+	      transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+	      onAnimationComplete={() => {
+		measure (moreVsbl ? -1 : activeIdx)
+	      }}>
+	  {moreVsbl
+	   ? (
+	      menu.map ((item, i) => (
+		  <div key={i} className="relative h-[40px]">
+		    <div className="absolute inset-0 flex items-center px-3">
+		      <motion.div
+			  transition={{ duration: .2, ease: 'easeOut' }}
+			  {...((item.visible ?? true)
+			       ? { layoutId: `menu-${ item.name }` }
+			       : { initial: { x: 40, y: -40, opacity: 0 },
+				   animate: { x: 0, y: 0, opacity: 1 },
+				   exit: { x: 40, y: -40, opacity: 0 } })}
+			  className="z-10 h-full flex items-center px-3 font-bold w-24">
+			<h2>{item.name}</h2>
+		      </motion.div>
+		      {item.subMenu
+		       .filter (subItem => subItem.visible ?? true)
+		       .map ((subItem, j) => (
+			  'component' in subItem
+			  ? (
+			      <motion.div
+				  key={`c-${ i }-${ j }`}
+				  transition={{ duration: .2, ease: 'easeOut' }}
+				  {...((visibleMenu[activeIdx]?.name
+					=== item.name)
+				       ? { layoutId: `submenu-${ item.name }-${ j }` }
+				       : { initial: { y: -40, opacity: 0 },
+					   animate: { y: 0, opacity: 1 },
+					   exit: { y: -40, opacity: 0 } })}>
+				{subItem.component}
+			      </motion.div>)
+			  : (
+			      <motion.div
+				  key={`l-${ i }-${ j }`}
+				  transition={{ duration: .2, ease: 'easeOut' }}
+				  {...((visibleMenu[activeIdx]?.name
+					=== item.name)
+				       ? { layoutId: `submenu-${ item.name }-${ j }` }
+				       : { initial: { y: -40, opacity: 0 },
+					   animate: { y: 0, opacity: 1 },
+					   exit: { y: -40, opacity: 0 } })}>
+				<PrefetchLink
+				    to={subItem.to}
+				    target={subItem.to.slice (0, 2) === '//' ? '_blank' : undefined}
+				    onClick={() => setMoreVsbl (false)}
+				    className="h-full flex items-center px-3">
+				  {subItem.name}
+				</PrefetchLink>
+			      </motion.div>)))}
+		    </div>
+		  </div>)))
+	   : ((visibleMenu[activeIdx]?.subMenu ?? []).length > 0
+	      && (
+		  <div className="relative h-[40px]">
+		    <AnimatePresence initial={false} custom={dir}>
+		      <motion.div
+			  key={activeIdx}
+			  custom={dir}
+			  variants={{ enter: (d: -1 | 1) => ({ y: d * 24, opacity: 0 }),
+				      centre: { y: 0, opacity: 1 },
+				      exit: (d: -1 | 1) => ({ y: (-d) * 24, opacity: 0 }) }}
+			  className="absolute inset-0 flex items-center px-3"
+			  initial="enter"
+			  animate="centre"
+			  exit="exit"
+			  transition={{ duration: .2, ease: 'easeOut' }}>
+			{(visibleMenu[activeIdx]?.subMenu ?? [])
+			 .filter (item => item.visible ?? true)
+			 .map ((item, i) => (
+			    'component' in item
+			    ? (
+				<motion.div
+				    key={`c-${ i }`}
+				    transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+				    layoutId={`submenu-${ visibleMenu[activeIdx].name }-${ i }`}>
+				  {item.component}
+				</motion.div>)
+			    : (
+				<motion.div
+				    key={`l-${ i }`}
+				    transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+				    layoutId={`submenu-${ visibleMenu[activeIdx].name }-${ i }`}>
+				  <PrefetchLink
+				      to={item.to}
+				      target={item.to.slice (0, 2) === '//' ? '_blank' : undefined}
+				      className="h-full flex items-center px-3">
+				    {item.name}
+				  </PrefetchLink>
+				</motion.div>)))}
+		      </motion.div>
+		    </AnimatePresence>
+		  </div>))}
+	  </motion.div>
+	</AnimatePresence>

 	<AnimatePresence initial={false}>
 	  {menuOpen && (
@@ -234,7 +365,7 @@ export default (({ user }: Props) => {
 		  exit="closed"
 		  transition={{ duration: .2, ease: 'easeOut' }}>
 		<Separator/>
-		{menu.map ((item, i) => (
+		{visibleMenu.map ((item, i) => (
 		    <Fragment key={i}>
 		      <PrefetchLink
 			  to={i === openItemIdx ? item.to : '#'}
@@ -287,6 +418,16 @@ export default (({ user }: Props) => {
 			    </motion.div>)}
 		      </AnimatePresence>
 		    </Fragment>))}
+		<PrefetchLink
+		    to="/more"
+		    ref={(el: (HTMLAnchorElement | null)) => {
+		      itemsRef.current[visibleMenu.length] = el
+		    }}
+		    className={cn ('w-full min-h-[40px] flex items-center pl-8',
+				   ((openItemIdx < 0)
+				    && 'font-bold bg-yellow-50 dark:bg-red-950'))}>
+		  その他 &raquo;
+		</PrefetchLink>
 		<TopNavUser user={user} sp/>
 		<Separator/>
 	      </motion.div>)}
@@ -5,6 +5,5 @@ import type { FC } from 'react'
 type Props = { title: string
 	       body?: string }

-
 export default (({ title, body }: Props) =>
    <WikiMarkdown title={title} body={body ?? ''}/>) satisfies FC<Props>
@@ -1,9 +1,11 @@
-import React from 'react'
+import { cn } from '@/lib/utils'

-type Props = { children: React.ReactNode }
+import type { ComponentPropsWithoutRef, FC } from 'react'
+
+type Props = ComponentPropsWithoutRef<'h2'>


-export default ({ children }: Props) => (
-    <h2 className="text-xl my-4">
+export default (({ children, className, ...rest }: Props) => (
+    <h2 {...rest} className={cn ('text-xl my-4', className)}>
      {children}
-    </h2>)
+    </h2>)) satisfies FC<Props>
@@ -0,0 +1,97 @@
+import { useState } from 'react'
+
+import TagSearchBox from '@/components/TagSearchBox'
+import { apiGet } from '@/lib/api'
+
+import type { FC, ChangeEvent, KeyboardEvent } from 'react'
+
+import type { Tag } from '@/types'
+
+
+type Props = {
+    value:      string
+    setValue:   (value: string) => void }
+
+export default (({ value, setValue }: Props) => {
+  const [activeIndex, setActiveIndex] = useState (-1)
+  const [suggestions, setSuggestions] = useState<Tag[]> ([])
+  const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
+
+  // TODO: TagSearch からのコピペのため，共通化を考へる．
+  const whenChanged = async (ev: ChangeEvent<HTMLInputElement>) => {
+    setValue (ev.target.value)
+
+    const q = ev.target.value.trim ().split (' ').at (-1)
+    if (!(q))
+      {
+	setSuggestions ([])
+	return
+      }
+
+    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q } })
+    setSuggestions (data.filter (t => t.postCount > 0))
+    if (suggestions.length > 0)
+      setSuggestionsVsbl (true)
+  }
+
+  // TODO: TagSearch からのコピペのため，共通化を考へる．
+  const handleTagSelect = (tag: Tag) => {
+    const parts = value?.split (' ')
+    parts[parts.length - 1] = tag.name
+    setValue (parts.join (' ') + ' ')
+    setSuggestions ([])
+    setActiveIndex (-1)
+  }
+
+  // TODO: TagSearch からのコピペのため，共通化を考へる．
+  const handleKeyDown = (ev: KeyboardEvent<HTMLInputElement>) => {
+    switch (ev.key)
+    {
+    case 'ArrowDown':
+      ev.preventDefault ()
+      setActiveIndex (i => Math.min (i + 1, suggestions.length - 1))
+      setSuggestionsVsbl (true)
+      break
+
+    case 'ArrowUp':
+      ev.preventDefault ()
+      setActiveIndex (i => Math.max (i - 1, -1))
+      setSuggestionsVsbl (true)
+      break
+
+    case 'Enter':
+      if (activeIndex < 0)
+	break
+      ev.preventDefault ()
+      const selected = suggestions[activeIndex]
+      selected && handleTagSelect (selected)
+      break
+
+    case 'Escape':
+      ev.preventDefault ()
+      setSuggestionsVsbl (false)
+      break
+    }
+    if (ev.key === 'Enter' && (!(suggestionsVsbl) || activeIndex < 0))
+      {
+	setSuggestionsVsbl (false)
+      }
+  }
+
+  return (
+      <div className="relative">
+	<input
+	    type="text"
+	    value={value}
+	    onChange={whenChanged}
+	    onFocus={() => setSuggestionsVsbl (true)}
+	    onBlur={() => setSuggestionsVsbl (false)}
+	    onKeyDown={handleKeyDown}
+	    className="w-full border p-2 rounded"/>
+	<TagSearchBox
+	    suggestions={
+		suggestionsVsbl && suggestions.length > 0 ? suggestions : [] as Tag[]}
+	    activeIndex={activeIndex}
+	    onSelect={handleTagSelect}/>
+      </div>)
+}) satisfies FC<Props>
@@ -1,3 +1,5 @@
+import { motion } from 'framer-motion'
+
 import { cn } from '@/lib/utils'

 import type { FC, ReactNode } from 'react'
@@ -8,6 +10,9 @@ type Props = {


 export default (({ children, className }: Props) => (
-    <main className={cn ('flex-1 overflow-y-auto p-4', className)}>
+    <motion.main
+	transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+	className={cn ('flex-1 overflow-y-auto p-4', className)}
+	layout="position">
      {children}
-    </main>)) satisfies FC<Props>
+    </motion.main>)) satisfies FC<Props>
@@ -1,9 +1,30 @@
-import React from 'react'
+import { motion } from 'framer-motion'
+import { Helmet } from 'react-helmet-async'

-type Props = { children: React.ReactNode }
+import type { FC, ReactNode } from 'react'
+
+type Props = { children: ReactNode }


-export default ({ children }: Props) => (
-    <div className="p-4 w-full md:w-64 md:h-full">
+export default (({ children }: Props) => (
+    <motion.div
+	layout="position"
+	transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+	className="p-4 w-full md:w-64 md:h-full md:overflow-y-auto sidebar">
+      <Helmet>
+	<style>
+	  {`
+	      .sidebar
+	      {
+		direction: rtl;
+	      }
+
+	      .sidebar > *
+	      {
+		direction: ltr;
+	      }`}
+	</style>
+      </Helmet>
+
      {children}
-    </div>)
+    </motion.div>)) satisfies FC<Props>
@@ -46,10 +46,12 @@ a
 body
 {
  margin: 0;
-  display: flex;
-  place-items: center;
  min-width: 320px;
-  min-height: 100vh;
+}
+
+#root
+{
+  min-height: 100dvh;
 }

 h1
@@ -1,6 +1,6 @@
 import { apiDelete, apiGet, apiPost } from '@/lib/api'

-import type { FetchPostsParams, Post, PostTagChange } from '@/types'
+import type { FetchPostsParams, Post, PostVersion } from '@/types'


 export const fetchPosts = async (
@@ -29,17 +29,17 @@ export const fetchPost = async (id: string): Promise<Post> => await apiGet (`/po


 export const fetchPostChanges = async (
-    { id, tag, page, limit }: {
-	id?:    string
+    { post, tag, page, limit }: {
+	post?:  string
 	tag?:   string
 	page:   number
 	limit:  number },
 ): Promise<{
-    changes:  PostTagChange[]
+    versions: PostVersion[]
    count:    number }> =>
-	await apiGet ('/posts/changes', { params: { ...(id && { id }),
-						    ...(tag && { tag }),
-						    page, limit } })
+	await apiGet ('/posts/versions', { params: { ...(post && { post }),
+						     ...(tag && { tag }),
+						     page, limit } })


 export const toggleViewedFlg = async (id: string, viewed: boolean): Promise<void> => {
@@ -3,7 +3,7 @@ import { match } from 'path-to-regexp'

 import { fetchPost, fetchPosts, fetchPostChanges } from '@/lib/posts'
 import { postsKeys, tagsKeys, wikiKeys } from '@/lib/queryKeys'
-import { fetchTagByName, fetchTag, fetchTags } from '@/lib/tags'
+import { fetchTagByName, fetchTag, fetchTagChanges, fetchTags } from '@/lib/tags'
 import { fetchWikiPage,
 	 fetchWikiPageByTitle,
 	 fetchWikiPages } from '@/lib/wiki'
@@ -14,6 +14,7 @@ type Prefetcher = (qc: QueryClient, url: URL) => Promise<void>

 const mPost = match<{ id: string }> ('/posts/:id')
 const mWiki = match<{ title: string }> ('/wiki/:title')
+const mTag = match<{ id: string }> ('/tags/:id')


 const prefetchWikiPagesIndex: Prefetcher = async (qc, url) => {
@@ -169,6 +170,30 @@ const prefetchTagsIndex: Prefetcher = async (qc, url) => {
 }


+const prefetchTagShow: Prefetcher = async (qc, url) => {
+  const m = mTag (url.pathname)
+  if (!(m))
+    return
+
+  const { id } = m.params
+
+  await qc.prefetchQuery ({
+      queryKey: tagsKeys.show (id),
+      queryFn:  () => fetchTag (id) })
+}
+
+
+const prefetchTagChanges: Prefetcher = async (qc, url) => {
+  const id = url.searchParams.get ('id')
+  const page = Number (url.searchParams.get ('page') || 1)
+  const limit = Number (url.searchParams.get ('limit') || 20)
+
+  await qc.prefetchQuery ({
+      queryKey: tagsKeys.changes ({ ...(id && { id }), page, limit }),
+      queryFn: () => fetchTagChanges ({ ...(id && { id }), page, limit }) })
+}
+
+
 export const routePrefetchers: { test: (u: URL) => boolean; run: Prefetcher }[] = [
    { test: u => ['/', '/posts', '/posts/search'].includes (u.pathname),
      run: prefetchPostsIndex },
@@ -180,7 +205,11 @@ export const routePrefetchers: { test: (u: URL) => boolean; run: Prefetcher }[]
    { test: u => (!(['/wiki/new', '/wiki/changes'].includes (u.pathname))
 		  && Boolean (mWiki (u.pathname))),
      run: prefetchWikiPageShow },
-    { test: u => u.pathname === '/tags', run: prefetchTagsIndex }]
+    { test: u => u.pathname === '/tags', run: prefetchTagsIndex },
+    { test: u => (!(['/tags/nico', '/tags/changes'].includes (u.pathname))
+		  && Boolean (mTag (u.pathname))),
+      run: prefetchTagShow },
+    { test: u => u.pathname === '/tags/changes', run: prefetchTagChanges }]


 export const prefetchForURL = async (qc: QueryClient, urlLike: string): Promise<void> => {
@@ -5,13 +5,15 @@ export const postsKeys = {
    index:    (p: FetchPostsParams) => ['posts', 'index', p] as const,
    show:     (id: string) => ['posts', id] as const,
    related:  (id: string) => ['related', id] as const,
-    changes:  (p: { id?: string; tag?: string; page: number; limit: number }) =>
+    changes:  (p: { post?: string; tag?: string; page: number; limit: number }) =>
 		  ['posts', 'changes', p] as const }

 export const tagsKeys = {
-    root:   ['tags'] as const,
-    index:  (p: FetchTagsParams) => ['tags', 'index', p] as const,
-    show:   (name: string) => ['tags', name] as const }
+    root:     ['tags'] as const,
+    index:    (p: FetchTagsParams) => ['tags', 'index', p] as const,
+    show:     (name: string) => ['tags', name] as const,
+    changes:  (p: { id?: string; page: number; limit: number }) =>
+		  ['tags', 'changes', p] as const }

 export const wikiKeys = {
    root:   ['wiki'] as const,
@@ -1,6 +1,6 @@
 import { apiGet } from '@/lib/api'

-import type { FetchTagsParams, Tag } from '@/types'
+import type { FetchTagsParams, Tag, TagVersion } from '@/types'


 export const fetchTags = async (
@@ -45,3 +45,14 @@ export const fetchTagByName = async (name: string): Promise<Tag | null> => {
    return null
  }
 }
+
+
+export const fetchTagChanges = async (
+    { id, page, limit }: {
+	id?:    string
+	page:   number
+	limit:  number },
+): Promise<{
+    versions: TagVersion[]
+    count:    number }> =>
+	await apiGet ('/tags/versions', { params: { ...(id && { id }), page, limit } })
@@ -0,0 +1,4 @@
+import type { MDXComponents } from 'mdx/types'
+
+
+export const useMDXComponents = (): MDXComponents => ({ })
@@ -0,0 +1,46 @@
+import { Helmet } from 'react-helmet-async'
+
+import PrefetchLink from '@/components/PrefetchLink'
+import { menuOutline } from '@/components/TopNav'
+import SectionTitle from '@/components/common/SectionTitle'
+import MainArea from '@/components/layout/MainArea'
+import { SITE_TITLE } from '@/config'
+
+import type { FC } from 'react'
+
+import type { User } from '@/types'
+
+
+export default (() => {
+  const menu = menuOutline (
+      { tag: null, wikiId: null, user: { } as User, pathName: location.pathname })
+
+  return (
+      <MainArea className="md:flex">
+	<Helmet>
+	  <title>{`メニュー | ${ SITE_TITLE }`}</title>
+	</Helmet>
+
+	{[...Array (Math.ceil (menu.length / 4)).keys ()].map (i => (
+	    <div key={i} className="flex-1 mx-16">
+	      {menu.slice (4 * i, 4 * (i + 1)).map ((item, j) => (
+		  <section key={j}>
+		    <SectionTitle className="font-bold">{item.name}</SectionTitle>
+		    <ul>
+		      {item.subMenu
+		       .filter (subItem => (subItem.visible ?? true))
+		       .map ((subItem, k) => ('name' in subItem && (
+			  <li key={k}>
+			    <PrefetchLink
+				to={subItem.to}
+				target={subItem.to.slice (0, 2) === '//'
+					? '_blank'
+					: undefined}>
+			      {subItem.name}
+			    </PrefetchLink>
+			  </li>)))}
+		    </ul>
+		  </section>))}
+	    </div>))}
+      </MainArea>)
+}) satisfies FC
@@ -0,0 +1,134 @@
+import { Helmet } from 'react-helmet-async'
+import MainArea from '@/components/layout/MainArea'
+import { SITE_TITLE } from '@/config'
+import { dateString } from '@/lib/utils'
+
+export const lastUpdatedAt = dateString ('2026-04-12', 'hour')
+
+
+<MainArea>
+  <Helmet>
+    <title>{`利用規約 | ${ SITE_TITLE }`}</title>
+  </Helmet>
+
+  <article className="prose dark:prose-invert mx-auto p-4">
+    # 利用規約
+
+    最終更新日: {lastUpdatedAt}
+
+    この利用規約（以下「本規約」）は、ぼざクリ タグ広場（以下「本サービス」）の利用条件を定めるものです。利用者は、本サービスを利用した時点で、本規約に同意したものとみなされます。
+
+    ## 第 1 条　本サービスの位置づけ
+
+    1. 本サービスは、タグ・Wiki・外部リンクの整理を中心とする知識共有基盤です。
+    2. 本サービスの中心価値は、コンテンツそのものの再配布ではなく、タグを軸にした整理、検索、再発見、および周辺知識の蓄積にあります。
+    3. 本サービスは、運営上の必要に応じて、機能、公開範囲、名称、URL、表示内容その他の仕様を変更することがあります。
+
+    ## 第 2 条　公開方針と利用者区分
+
+    1. 本サービスは、初回一般公開時点では、**誰でも閲覧できる一方で、投稿・編輯は申請制** とします。
+    2. 初回一般公開時点では、通常の農奴は閲覧のみを行えます。
+    3. 投稿、タグ編輯、Wiki 編輯その他の耕作行為は、運営が承認した利用者（以下「耕作員」）に限って認めます。
+    4. 独裁者は、耕作員に加えて、差戻、削除、利用制限、その他の管理操作を行えます。
+    5. 運営は、履歴管理、差戻、BAN 運用、監査導線その他の運営装備がじゅうぶんに整ったと判断した場合、農奴に一部の編輯権限を開放することがあります。
+    6. 利用者区分、権限範囲、申請条件、承認基準、承認後の取扱いは、運営が必要に応じて定め、変更できます。
+
+    ## 第 3 条　利用開始と引継ぎコード
+
+    1. 本サービスでは、一般的な Id. / パスワード方式ではなく、運営が別途定める認証情報または引継ぎコードを用いる場合があります。
+    2. 利用者は、自身に割り当てられた引継ぎコード、認証情報、端末上の保存情報を自己の責任で管理するものとします。
+    3. 利用者は、自己の引継ぎコードまたは認証情報を第 3 者に譲渡、貸与、共有、漏洩してはなりません。
+    4. 引継ぎコードの漏洩、第 3 者利用、紛失、盗用その他の事故によって利用者または第 3 者に生じた損害について、運営は責任を負いません。
+    5. 運営は、本人確認、濫用対策、監査対応または保守のため、利用情報とアクセス元情報を関聯づけて扱うことがあります。
+
+    ## 第 4 条　申請制編輯の基本ルール
+
+    1. 耕作員は、タグ整理基盤の品質維持を最優先し、個人的な所有主張ではなく、検索性、再利用性、可読性、整合性を重視して編輯しなければなりません。
+    2. 耕作員は、主観的な好悪、内輪ネタ、報復、私怨、対立誘導のためにタグや Wiki を操作してはなりません。
+    3. 耕作員は、誤りの修正、体系の整理、リンクの保守、知識の補足を目的として編輯を行うものとします。
+    4. 運営は、申請内容、過去の行動、編輯品質、聯絡可能性、運営負荷その他の事情を考慮して、承認、保留、拒否、取消を行えます。
+    5. 耕作員資格は権利ではなく、運営が本サービスの維持のために付与する可撤回の権限です。
+
+    ## 第 5 条　禁止事項
+
+    利用者は、以下の行為をしてはなりません。
+
+    1. 法令または公序良俗に違反する行為。
+    2. 犯罪を助長し、またはこれに結びつく行為。
+    3. 著作権、著作者人格権、商標権、肖像権、パブリシティ権、プライバシー権その他第 3 者の権利を侵害する行為。
+    4. 無断転載、違法アップロード、違法複製物、海賊版、権限のない転載先への誘導、またはそれらを正当化、拡散、補助する行為。
+    5. 実在人物に関する名誉毀損、侮辱、差別、脅迫、晒し、つきまとい、嫌がらせ、私刑の扇動その他の加害行為。
+    6. 個人情報、非公開情報、秘匿されるべき情報を本人の承諾なく掲載、送信、共有、推測可能な形で開示する行為。
+    7. 虚偽の情報、誤解を招く情報、出典を偽装した情報、意図的なミスリード、荒らし目的のタグづけ、関係のないタグの大量付与、分類妨碍、検索妨碍その他の品質破壊行為。
+    8. マルウェア、フィッシング、詐欺、誘導広告、悪質なリダイレクト、危険な外部リンクその他利用者または運営に危害を与える行為。
+    9. 本サービスの趣旨に照らして不相当な政治的扇動、宗教勧誘、商業宣伝、連鎖的勧誘、スパム、同一内容の反復送信。
+    10. 未成年の安全に反する行為、児童性的搾取、違法または著しく不適切な性的表現、過度に露骨な性表現や残虐表現を、一般公開導線に無警告で流し込む行為。
+    11. 運営、他の利用者、外部サービスまたは第 3 者に著しい負担、不利益、混乱を生じさせる行為。
+    12. 前各号のいずれかを試みる行為、教唆する行為、容易にする行為。
+    13. その他、運営が本サービスの目的または安全な運営に照らして不適切と判断する行為。
+
+    ## 第 6 条　投稿、タグ、Wiki 等の取扱い
+
+    1. 利用者は、自らが投稿、編輯、登録、送信または変更する情報について、必要な権利を有し、または適法に利用できる状態でなければなりません。
+    2. 利用者は、自らが行った投稿、タグづけ、Wiki 編輯、説明文、コメント、関聯づけその他の行為について責任を負います。
+    3. 利用者は、運営に対し、本サービスの運営、表示、複製、保存、配信、整形、引用、履歴表示、差戻、バックアップ、障碍対応および弘報のために必要な範囲で、当該利用者生成情報を無償で利用する非独占的な権利を許諾するものとします。
+    4. 前項の許諾は、本サービスの運営上必要な範囲に限られ、利用者の権利帰属自体を運営へ移転するものではありません。
+    5. 運営は、分類整合性、表記統一、誤記修正、別名統合、差戻その他の理由により、投稿、タグ、Wiki その他の内容を編輯、非表示化、削除、統合、分割または凍結できます。
+
+    ## 第 7 条　外部リンクと埋め込み
+
+    1. 本サービスは、外部サイトへのリンク、外部コンテンツの埋め込みまたはそれらに関するメタデータを表示する場合があります。
+    2. 外部リンク先または埋め込み先の権利、利用条件、公開範囲、削除方針、広告、追跡、Cookie その他の取扱いは、当該外部サービスの定めに従います。
+    3. 運営は、外部リンク先の適法性、安全性、継続性、正確性、品質、可用性、または内容の完全性を保証しません。
+    4. 外部権利者からの申立て、運営判断、法令対応または安全性確保のため、運営は外部リンク、埋め込み、サムネイル、説明文その他の表示を制限、差替え、非表示または削除できます。
+
+    ## 第 8 条　履歴、差戻、削除
+
+    1. 本サービスでは、保守、監査、荒らし対策、説明責任その他の目的で、投稿、タグ、Wiki その他の変更履歴を保持し、表示し、または内部的に参照することがあります。
+    2. 利用者は、一度行った編輯が、後に差戻、修正、非表示化または削除されることがあることをあらかじめ承諾するものとします。
+    3. 利用者が削除を希望した場合でも、法令上、保守上、監査上、紛争対応上またはバックアップ上の必要により、直ちに完全消去できないことがあります。
+    4. 運営は、本サービス全体の健全性を維持するため、説明の有無を問わず、履歴の表示範囲、保存期間、差戻方針、削除方針を定め、変更できます。
+
+    ## 第 9 条　利用制限、資格取消、BAN
+
+    1. 運営は、利用者が次のいずれかに該当すると判断した場合、事前の通知なく、または通知後に、投稿・編輯の制限、耕作員資格の取消、コンテンツの非表示または削除、引継ぎコードの失効、ユーザ BAN、IP BAN その他必要な措置を行えます。
+        - 本規約に違反した場合
+        - 本サービスの趣旨に反する運用妨碍、荒らし、品質破壊行為を行った場合
+        - 運営からの確認、修正要請、停止要請に合理的理由なく応じない場合
+        - 登録情報、申請内容または説明に虚偽がある場合
+        - 安全性、法令順守、運営継続の観点から措置が必要と判断された場合
+    2. 運営は、前項の措置について、その理由、基準、証拠または内部判断過程を常に開示する義務を負いません。
+    3. 利用制限または資格取消後も、運営は、必要に応じて履歴、ログ、申請記録、通報記録その他のデータを保持できます。
+
+    ## 第 10 条　未成年の利用
+
+    1. 運営は、未成年の安全確保の観点から、年齢に応じた表示制限、導線制御、非表示化、削除、申請拒否その他の措置を行えます。
+    2. 利用者は、未成年が閲覧しうる一般公開面において、未成年に不適切な内容を無警告で流し込まないものとします。
+
+    ## 第 11 条　お問い合わせ、通報、御意見番
+
+    1. 利用者は、本サービスが別途案内する問い合わせ、通報または御意見板の導線を通じて、バグ報告、問題報告、削除要請その他の聯絡を行えます。
+    2. 運営は、すべての問い合わせに回答する義務を負わず、回答期限、対応結果または対応方法を保証しません。
+
+    ## 第 12 条　免責
+
+    1. 運営は、本サービスについて、特定目的適合性、完全性、正確性、継続性、安全性、無瑕疵性、または利用者の期待への適合を保証しません。
+    2. 運営は、外部リンク先、外部埋め込み先、第 3 者投稿、利用者同士の紛争、通信障碍、データ消失、誤分類、誤リンク、誤記、差戻、機能停止または仕様変更によって生じた損害について、責任を負いません。
+    3. 本サービスは、予告なく停止、終了、変更または縮小されることがあります。
+
+    ## 第 13 条　規約の変更
+
+    1. 運営は、法令改正、機能追加、運用方針の変更、安全対策、表現調整その他の理由により、本規約を変更できます。
+    2. 変更後の本規約は、本サービス上に掲載された時点または運営が別途定める時点から効力を生じます。
+    3. 変更後に利用を継続した利用者は、変更後の本規約に同意したものとみなされます。
+
+    ## 第 14 条　準拠法および管轄
+
+    1. 本規約および本サービスの利用には、日本法を準拠法とします。
+    2. 本規約または本サービスに関して生じた一切の紛争については、運営の所在地を管轄する裁判所を第 1 審の専属的合意管轄裁判所とします。ただし、法令に別段の定めがある場合はこの限りではありません。
+
+    ## 附則
+
+    本規約は、{lastUpdatedAt} から適用します。
+  </article>
+</MainArea>
@@ -0,0 +1,12 @@
+import { Outlet } from 'react-router-dom'
+
+import MaterialSidebar from '@/components/MaterialSidebar'
+
+import type { FC } from 'react'
+
+
+export default (() => (
+    <div className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
+      <MaterialSidebar/>
+      <Outlet/>
+    </div>)) satisfies FC
@@ -0,0 +1,182 @@
+import { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { useParams } from 'react-router-dom'
+
+import TagLink from '@/components/TagLink'
+import WikiBody from '@/components/WikiBody'
+import Label from '@/components/common/Label'
+import PageTitle from '@/components/common/PageTitle'
+import TabGroup, { Tab } from '@/components/common/TabGroup'
+import TagInput from '@/components/common/TagInput'
+import MainArea from '@/components/layout/MainArea'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+import { SITE_TITLE } from '@/config'
+import { apiGet, apiPut } from '@/lib/api'
+
+import type { FC } from 'react'
+
+import type { Material, Tag } from '@/types'
+
+type MaterialWithTag = Material & { tag: Tag }
+
+
+export default (() => {
+  const { id } = useParams ()
+
+  const [file, setFile] = useState<File | null> (null)
+  const [filePreview, setFilePreview] = useState ('')
+  const [loading, setLoading] = useState (false)
+  const [material, setMaterial] = useState<MaterialWithTag | null> (null)
+  const [sending, setSending] = useState (false)
+  const [tag, setTag] = useState ('')
+  const [url, setURL] = useState ('')
+
+  const handleSubmit = async () => {
+    const formData = new FormData
+    if (tag.trim ())
+      formData.append ('tag', tag)
+    if (file)
+      formData.append ('file', file)
+    if (url.trim ())
+      formData.append ('url', url)
+
+    try
+    {
+      setSending (true)
+      const data = await apiPut<Material> (`/materials/${ id }`, formData)
+      setMaterial (data)
+      toast ({ title: '更新成功!' })
+    }
+    catch
+    {
+      toast ({ title: '更新失敗……', description: '入力を見直してください．' })
+    }
+    finally
+    {
+      setSending (false)
+    }
+  }
+
+  useEffect (() => {
+    if (!(id))
+      return
+
+    void (async () => {
+      try
+      {
+	setLoading (true)
+	const data = await apiGet<MaterialWithTag> (`/materials/${ id }`)
+	setMaterial (data)
+	setTag (data.tag.name)
+	if (data.file && data.contentType)
+	  {
+	    setFilePreview (data.file)
+	    setFile (new File ([await (await fetch (data.file)).blob ()],
+			       data.file,
+			       { type: data.contentType }))
+	  }
+	setURL (data.url ?? '')
+      }
+      finally
+      {
+	setLoading (false)
+      }
+    }) ()
+  }, [id])
+
+  return (
+      <MainArea>
+	{material && (
+	    <Helmet>
+	      <title>{`${ material.tag.name } 素材照会 | ${ SITE_TITLE }`}</title>
+	    </Helmet>)}
+
+	{loading ? 'Loading...' : (material && (
+	    <>
+	      <PageTitle>
+		<TagLink
+		    tag={material.tag}
+		    withWiki={false}
+		    withCount={false}/>
+	      </PageTitle>
+
+	      {(material.file && material.contentType) && (
+		  (/image\/.*/.test (material.contentType) && (
+		      <img src={material.file} alt={material.tag.name || undefined}/>))
+		  || (/video\/.*/.test (material.contentType) && (
+		      <video src={material.file} controls/>))
+		  || (/audio\/.*/.test (material.contentType) && (
+		      <audio src={material.file} controls/>)))}
+
+	      <TabGroup>
+		<Tab name="Wiki">
+		  <WikiBody
+		      title={material.tag.name}
+		      body={material.wikiPageBody ?? undefined}/>
+		</Tab>
+
+		<Tab name="編輯">
+		  <div className="max-w-wl pt-2 space-y-4">
+		    {/* タグ */}
+		    <div>
+		      <Label>タグ</Label>
+		      <TagInput value={tag} setValue={setTag}/>
+		    </div>
+
+		    {/* ファイル */}
+		    <div>
+		      <Label>ファイル</Label>
+		      <input
+			  type="file"
+			  accept="image/*,video/*,audio/*"
+			  onChange={e => {
+			    const f = e.target.files?.[0]
+			    setFile (f ?? null)
+			    setFilePreview (f ? URL.createObjectURL (f) : '')
+			  }}/>
+		      {(file && filePreview) && (
+			  (/image\/.*/.test (file.type) && (
+			      <img
+				  src={filePreview}
+				  alt="preview"
+				  className="mt-2 max-h-48 rounded border"/>))
+			  || (/video\/.*/.test (file.type) && (
+			      <video
+				  src={filePreview}
+				  controls
+				  className="mt-2 max-h-48 rounded border"/>))
+			  || (/audio\/.*/.test (file.type) && (
+			      <audio
+				  src={filePreview}
+				  controls
+				  className="mt-2 max-h-48"/>))
+			  || (
+			      <p className="text-red-600 dark:text-red-400">
+				その形式のファイルには対応していません．
+			      </p>))}
+		    </div>
+
+		    {/* 参考 URL */}
+		    <div>
+		      <Label>参考 URL</Label>
+		      <input
+			  type="url"
+			  value={url}
+			  onChange={e => setURL (e.target.value)}
+			  className="w-full border p-2 rounded"/>
+		    </div>
+
+		    {/* 送信 */}
+		    <Button
+			onClick={handleSubmit}
+			className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
+			disabled={sending}>
+		      更新
+		    </Button>
+		  </div>
+		</Tab>
+	      </TabGroup>
+	    </>))}
+      </MainArea>)
+}) satisfies FC
@@ -0,0 +1,166 @@
+import { Fragment, useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { useLocation } from 'react-router-dom'
+
+import nikumaru from '@/assets/fonts/nikumaru.otf'
+import PrefetchLink from '@/components/PrefetchLink'
+import TagLink from '@/components/TagLink'
+import PageTitle from '@/components/common/PageTitle'
+import SectionTitle from '@/components/common/SectionTitle'
+import SubsectionTitle from '@/components/common/SubsectionTitle'
+import MainArea from '@/components/layout/MainArea'
+import { SITE_TITLE } from '@/config'
+import { apiGet } from '@/lib/api'
+
+import type { FC } from 'react'
+
+import type { Material, Tag } from '@/types'
+
+type TagWithMaterial = Omit<Tag, 'children'> & {
+    children: TagWithMaterial[]
+    material: Material | null }
+
+
+const MaterialCard = ({ tag }: { tag: TagWithMaterial }) => {
+  if (!(tag.material))
+    return
+
+  return (
+      <PrefetchLink
+	  to={`/materials/${ tag.material.id }`}
+	  className="block w-40 h-40">
+	<div
+	    className="w-full h-full overflow-hidden rounded-xl shadow
+		       text-center content-center text-4xl"
+	    style={{ fontFamily: 'Nikumaru' }}>
+	  {(tag.material.contentType && /image\/.*/.test (tag.material.contentType))
+	   ? <img src={tag.material.file || undefined}/>
+	   : <span>照会</span>}
+	</div>
+      </PrefetchLink>)
+}
+
+
+export default (() => {
+  const [loading, setLoading] = useState (false)
+  const [tag, setTag] = useState<TagWithMaterial | null> (null)
+
+  const location = useLocation ()
+  const query = new URLSearchParams (location.search)
+  const tagQuery = query.get ('tag') ?? ''
+
+  useEffect (() => {
+    if (!(tagQuery))
+      {
+	setTag (null)
+	return
+      }
+
+    void (async () => {
+      try
+      {
+	setLoading (true)
+	setTag (
+	    await apiGet<TagWithMaterial> (
+		`/tags/name/${ encodeURIComponent (tagQuery) }/materials`))
+      }
+      finally
+      {
+	setLoading (false)
+      }
+    }) ()
+  }, [location.search])
+
+  return (
+      <MainArea>
+	<Helmet>
+	  <style>
+	    {`
+		@font-face
+		{
+		  font-family: 'Nikumaru';
+		  src: url(${ nikumaru }) format('opentype');
+		}`}
+	  </style>
+	  <title>{`${ tag ? `${ tag.name } 素材集` : '素材集' } | ${ SITE_TITLE }`}</title>
+	</Helmet>
+
+	{loading ? 'Loading...' : (
+	    tag
+	    ? (
+		<>
+		  <PageTitle>
+		    <TagLink
+			tag={tag}
+			withWiki={false}
+			withCount={false}
+			to={tag.material
+			    ? `/materials/${ tag.material.id }`
+			    : `/materials?tag=${ encodeURIComponent (tag.name) }`}/>
+		  </PageTitle>
+		  {(!(tag.material) && tag.category !== 'meme') && (
+		      <div className="-mt-2">
+			<PrefetchLink
+			    to={`/materials/new?tag=${ encodeURIComponent (tag.name) }`}>
+			  追加
+			</PrefetchLink>
+		      </div>)}
+
+		  <MaterialCard tag={tag}/>
+
+		  <div className="ml-2">
+		    {tag.children.map (c2 => (
+			<Fragment key={c2.id}>
+			  <SectionTitle>
+			    <TagLink
+				tag={c2}
+				withWiki={false}
+				withCount={false}
+				to={`/materials?tag=${ encodeURIComponent (c2.name) }`}/>
+			  </SectionTitle>
+			  {(!(c2.material) && c2.category !== 'meme') && (
+			      <div className="-mt-4">
+				<PrefetchLink
+				    to={`/materials/new?tag=${ encodeURIComponent (c2.name) }`}>
+				  追加
+				</PrefetchLink>
+			      </div>)}
+
+			  <MaterialCard tag={c2}/>
+
+			  <div className="ml-2">
+			    {c2.children.map (c3 => (
+				<Fragment key={c3.id}>
+				  <SubsectionTitle>
+				    <TagLink
+					tag={c3}
+					withWiki={false}
+					withCount={false}
+					to={`/materials?tag=${ encodeURIComponent (c3.name) }`}/>
+				  </SubsectionTitle>
+				  {(!(c3.material) && c3.category !== 'meme') && (
+				      <div className="-mt-2">
+					<PrefetchLink
+					    to={`/materials/new?tag=${
+						encodeURIComponent (c3.name) }`}>
+					  追加
+					</PrefetchLink>
+				      </div>)}
+
+				  <MaterialCard tag={c3}/>
+				</Fragment>))}
+			  </div>
+			</Fragment>))}
+		  </div>
+		</>)
+	    : (
+		<>
+		  <p>左のリストから照会したいタグを選択してください。</p>
+		  <p>もしくは……</p>
+		  <ul>
+		    <li><PrefetchLink to="/materials/new">素材を新規追加する</PrefetchLink></li>
+		    {/* <li><a href="#">すべての素材をダウンロードする</a></li> */}
+		  </ul>
+		</>))}
+      </MainArea>)
+}) satisfies FC
@@ -0,0 +1,124 @@
+import { useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import Form from '@/components/common/Form'
+import Label from '@/components/common/Label'
+import PageTitle from '@/components/common/PageTitle'
+import TagInput from '@/components/common/TagInput'
+import MainArea from '@/components/layout/MainArea'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+import { SITE_TITLE } from '@/config'
+import { apiPost } from '@/lib/api'
+
+import type { FC } from 'react'
+
+
+export default (() => {
+  const location = useLocation ()
+  const query = new URLSearchParams (location.search)
+  const tagQuery = query.get ('tag') ?? ''
+
+  const navigate = useNavigate ()
+
+  const [file, setFile] = useState<File | null> (null)
+  const [filePreview, setFilePreview] = useState ('')
+  const [sending, setSending] = useState (false)
+  const [tag, setTag] = useState (tagQuery)
+  const [url, setURL] = useState ('')
+
+  const handleSubmit = async () => {
+    const formData = new FormData
+    if (tag)
+      formData.append ('tag', tag)
+    if (file)
+      formData.append ('file', file)
+    if (url)
+      formData.append ('url', url)
+
+    try
+    {
+      setSending (true)
+      await apiPost ('/materials', formData)
+      toast ({ title: '送信成功!' })
+      navigate (`/materials?tag=${ encodeURIComponent (tag) }`)
+    }
+    catch
+    {
+      toast ({ title: '送信失敗……', description: '入力を見直してください．' })
+    }
+    finally
+    {
+      setSending (false)
+    }
+  }
+
+  return (
+      <MainArea>
+	<Helmet>
+	  <title>{`素材追加 | ${ SITE_TITLE }`}</title>
+	</Helmet>
+
+	<Form>
+	  <PageTitle>素材追加</PageTitle>
+
+	  {/* タグ */}
+	  <div>
+	    <Label>タグ</Label>
+	    <TagInput value={tag} setValue={setTag}/>
+	  </div>
+
+	  {/* ファイル */}
+	  <div>
+	    <Label>ファイル</Label>
+	    <input
+		type="file"
+		accept="image/*,video/*,audio/*"
+		onChange={e => {
+		  const f = e.target.files?.[0]
+		  setFile (f ?? null)
+		  setFilePreview (f ? URL.createObjectURL (f) : '')
+		}}/>
+	    {(file && filePreview) && (
+		(/image\/.*/.test (file.type) && (
+		    <img
+			src={filePreview}
+			alt="preview"
+			className="mt-2 max-h-48 rounded border"/>))
+		|| (/video\/.*/.test (file.type) && (
+		    <video
+			src={filePreview}
+			controls
+			className="mt-2 max-h-48 rounded border"/>))
+		|| (/audio\/.*/.test (file.type) && (
+		    <audio
+			src={filePreview}
+			controls
+			className="mt-2 max-h-48"/>))
+		|| (
+		    <p className="text-red-600 dark:text-red-400">
+		      その形式のファイルには対応していません．
+		    </p>))}
+	  </div>
+
+	  {/* 参考 URL */}
+	  <div>
+	    <Label>参考 URL</Label>
+	    <input
+		type="url"
+		value={url}
+		onChange={e => setURL (e.target.value)}
+		className="w-full border p-2 rounded"/>
+	  </div>
+
+	  {/* 送信 */}
+	  <Button
+	      onClick={handleSubmit}
+	      className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
+	      disabled={sending}>
+	    追加
+	  </Button>
+	</Form>
+      </MainArea>)
+}) satisfies FC
@@ -0,0 +1,49 @@
+import { useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+
+import Label from '@/components/common/Label'
+import PageTitle from '@/components/common/PageTitle'
+import TagInput from '@/components/common/TagInput'
+import MainArea from '@/components/layout/MainArea'
+import { SITE_TITLE } from '@/config'
+
+import type { FC, FormEvent } from 'react'
+
+
+export default (() => {
+  const [tagName, setTagName] = useState ('')
+  const [parentTagName, setParentTagName] = useState ('')
+
+  const handleSearch = (e: FormEvent) => {
+    e.preventDefault ()
+  }
+
+  return (
+      <MainArea>
+	<Helmet>
+	  <title>素材集 | {SITE_TITLE}</title>
+	</Helmet>
+
+	<div className="max-w-xl">
+	  <PageTitle>素材集</PageTitle>
+
+	  <form onSubmit={handleSearch} className="space-y-2">
+	    {/* タグ */}
+	    <div>
+	      <Label>タグ</Label>
+	      <TagInput
+		  value={tagName}
+		  setValue={setTagName}/>
+	    </div>
+
+	    {/* 親タグ */}
+	    <div>
+	      <Label>親タグ</Label>
+	      <TagInput
+		  value={parentTagName}
+		  setValue={setParentTagName}/>
+	    </div>
+	  </form>
+	</div>
+      </MainArea>)
+}) satisfies FC
@@ -93,10 +93,10 @@ export default (({ user }: Props) => {
 		       : 'bg-gray-500 hover:bg-gray-600')

  return (
-      <div className="md:flex md:flex-1">
+      <div className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
 	<Helmet>
 	  {(post?.thumbnail || post?.thumbnailBase) && (
-	      <meta name="thumbnail" content={post.thumbnail || post.thumbnailBase}/>)}
+	      <meta name="thumbnail" content={post.thumbnail! || post.thumbnailBase!}/>)}
 	  {post && <title>{`${ post.title || post.url } | ${ SITE_TITLE }`}</title>}
 	</Helmet>

@@ -116,7 +116,7 @@ export default (({ user }: Props) => {
 			initial={{ opacity: 1 }}
 			animate={{ opacity: 0 }}
 			transition={{ duration: .2, ease: 'easeOut' }}>
-		      <img src={post.thumbnail || post.thumbnailBase}
+		      <img src={post.thumbnail || post.thumbnailBase || undefined}
 			   alt={post.title || post.url}
 			   title={post.title || post.url || undefined}
 			   className="object-cover w-full h-full"/>
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
 import { useEffect } from 'react'
 import { Helmet } from 'react-helmet-async'
@@ -9,15 +9,30 @@ import PrefetchLink from '@/components/PrefetchLink'
 import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
+import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
+import { apiPut } from '@/lib/api'
 import { fetchPostChanges } from '@/lib/posts'
 import { postsKeys, tagsKeys } from '@/lib/queryKeys'
 import { fetchTag } from '@/lib/tags'
-import { cn, dateString } from '@/lib/utils'
+import { cn, dateString, originalCreatedAtString } from '@/lib/utils'

 import type { FC } from 'react'


+const renderDiff = (diff: { current: string | null; prev: string | null }) => (
+    <>
+      {(diff.prev && diff.prev !== diff.current) && (
+	  <>
+	    <del className="text-red-600 dark:text-red-400">
+	      {diff.prev}
+	    </del>
+	    {diff.current && <br/>}
+	  </>)}
+      {diff.current}
+    </>)
+
+
 export default (() => {
  const location = useLocation ()
  const query = new URLSearchParams (location.search)
@@ -36,15 +51,17 @@ export default (() => {
      : { data: null }

  const { data, isLoading: loading } = useQuery ({
-      queryKey: postsKeys.changes ({ ...(id && { id }),
+      queryKey: postsKeys.changes ({ ...(id && { post: id }),
 				     ...(tagId && { tag: tagId }),
 				     page, limit }),
-      queryFn:  () => fetchPostChanges ({ ...(id && { id }),
+      queryFn:  () => fetchPostChanges ({ ...(id && { post: id }),
 					  ...(tagId && { tag: tagId }),
 					  page, limit }) })
-  const changes = data?.changes ?? []
+  const changes = data?.versions ?? []
  const totalPages = data ? Math.ceil (data.count / limit) : 0

+  const qc = useQueryClient ()
+
  useEffect (() => {
    document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
  }, [location.search])
@@ -65,76 +82,171 @@ export default (() => {

 	{loading ? 'Loading...' : (
 	    <>
-	      <table className="table-auto w-full border-collapse">
-		<thead className="border-b-2 border-black dark:border-white">
-		  <tr>
-		    <th className="p-2 text-left">投稿</th>
-		    <th className="p-2 text-left">変更</th>
-		    <th className="p-2 text-left">日時</th>
-		  </tr>
-		</thead>
-		<tbody>
-		  {changes.map ((change, i) => {
-		    const withPost = i === 0 || change.post.id !== changes[i - 1].post.id
-		    if (withPost)
-		      {
-			rowsCnt = 1
-			for (let j = i + 1;
-			     (j < changes.length
-			      && change.post.id === changes[j].post.id);
-			     ++j)
-			  ++rowsCnt
-		      }
+	      <div className="overflow-x-auto">
+		<table className="w-full min-w-[1200px] table-fixed border-collapse">
+		  <colgroup>
+		    {/* 投稿 */}
+		    <col className="w-64"/>
+		    {/* 版 */}
+		    <col className="w-40"/>
+		    {/* タイトル */}
+		    <col className="w-96"/>
+		    {/* URL */}
+		    <col className="w-96"/>
+		    {/* タグ */}
+		    <col className="w-[48rem]"/>
+		    {/* オリジナルの投稿日時 */}
+		    <col className="w-96"/>
+		    {/* 更新日時 */}
+		    <col className="w-64"/>
+		    {/* (差戻ボタン) */}
+		    <col className="w-20"/>
+		  </colgroup>

-		    let layoutId: string | undefined = `page-${ change.post.id }`
-		    if (layoutIds.includes (layoutId))
-		      layoutId = undefined
-		    else
-		      layoutIds.push (layoutId)
+		  <thead className="border-b-2 border-black dark:border-white">
+		    <tr>
+		      <th className="p-2 text-left">投稿</th>
+		      <th className="p-2 text-left">版</th>
+		      <th className="p-2 text-left">タイトル</th>
+		      <th className="p-2 text-left">URL</th>
+		      <th className="p-2 text-left">タグ</th>
+		      <th className="p-2 text-left">オリジナルの投稿日時</th>
+		      <th className="p-2 text-left">更新日時</th>
+		      <th className="p-2"/>
+		    </tr>
+		  </thead>

-		    return (
-			<tr key={`${ change.timestamp }-${ change.post.id }-${ change.tag?.id }`}
-			    className={cn ('even:bg-gray-100 dark:even:bg-gray-700',
-					   withPost && 'border-t')}>
-			  {withPost && (
-			      <td className="align-top p-2 bg-white dark:bg-[#242424] border-r"
-				  rowSpan={rowsCnt}>
-				<PrefetchLink to={`/posts/${ change.post.id }`}>
-				  <motion.div
-				      layoutId={layoutId}
-				      transition={{ type: 'spring',
-						    stiffness: 500,
-						    damping: 40,
-						    mass: .5 }}>
-				    <img src={change.post.thumbnail
-					      || change.post.thumbnailBase
-					      || undefined}
-					 alt={change.post.title || change.post.url}
-					 title={change.post.title || change.post.url || undefined}
-					 className="w-40"/>
-				  </motion.div>
-				</PrefetchLink>
-			      </td>)}
-			  <td className="p-2">
-			    {change.tag
-			     ? <TagLink tag={change.tag} withWiki={false} withCount={false}/>
-			     : '(マスタ削除済のタグ) '}
-			    {`を${ change.changeType === 'add' ? '記載' : '消除' }`}
-			  </td>
-			  <td className="p-2">
-			    {change.user
-			     ? (
-				<PrefetchLink to={`/users/${ change.user.id }`}>
-				  {change.user.name}
-				</PrefetchLink>)
-			     : 'bot 操作'}
-			    <br/>
-			    {dateString (change.timestamp)}
-			  </td>
-			</tr>)
-		  })}
-		</tbody>
-	      </table>
+		  <tbody>
+		    {changes.map ((change, i) => {
+		      const withPost = i === 0 || change.postId !== changes[i - 1].postId
+		      if (withPost)
+			{
+			  rowsCnt = 1
+			  for (let j = i + 1;
+			       (j < changes.length
+				&& change.postId === changes[j].postId);
+			       ++j)
+			    ++rowsCnt
+			}
+
+		      let layoutId: string | undefined = `page-${ change.postId }`
+		      if (layoutIds.includes (layoutId))
+			layoutId = undefined
+		      else
+			layoutIds.push (layoutId)
+
+		      return (
+			  <tr key={`${ change.postId }.${ change.versionNo }`}
+			      className={cn ('even:bg-gray-100 dark:even:bg-gray-700',
+					     withPost && 'border-t')}>
+			    {withPost && (
+				<td className="align-top p-2 bg-white dark:bg-[#242424] border-r"
+				    rowSpan={rowsCnt}>
+				  <PrefetchLink to={`/posts/${ change.postId }`}>
+				    <motion.div
+					layoutId={layoutId}
+					transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
+				      <img src={change.thumbnail.current
+						|| change.thumbnailBase.current
+						|| undefined}
+					   alt={change.title.current || change.url.current}
+					   title={change.title.current || change.url.current || undefined}
+					   className="w-40"/>
+				    </motion.div>
+				  </PrefetchLink>
+				</td>)}
+			    <td className="p-2">{change.postId}.{change.versionNo}</td>
+			    <td className="p-2 break-all">{renderDiff (change.title)}</td>
+			    <td className="p-2 break-all">{renderDiff (change.url)}</td>
+			    <td className="p-2">
+			      {change.tags.map ((tag, i) => (
+				  tag.type === 'added'
+				  ? (
+				      <ins
+					  key={i}
+					  className="mr-2 text-green-600 dark:text-green-400">
+					{tag.name}
+				      </ins>)
+				  : (
+				      tag.type === 'removed'
+				      ? (
+					  <del
+					      key={i}
+					      className="mr-2 text-red-600 dark:text-red-400">
+					    {tag.name}
+					  </del>)
+				      : (
+					  <span key={i} className="mr-2">
+					    {tag.name}
+					  </span>))))}
+			    </td>
+			    <td className="p-2">
+			      {change.versionNo === 1
+			       ? originalCreatedAtString (change.originalCreatedFrom.current,
+							  change.originalCreatedBefore.current)
+			       : renderDiff ({
+				  current: originalCreatedAtString (
+					       change.originalCreatedFrom.current,
+					       change.originalCreatedBefore.current),
+				  prev: originalCreatedAtString (
+					    change.originalCreatedFrom.prev,
+					    change.originalCreatedBefore.prev) })}
+			    </td>
+			    <td className="p-2">
+			      {change.createdByUser
+			       ? (
+				  <PrefetchLink to={`/users/${ change.createdByUser.id }`}>
+				    {change.createdByUser.name
+				     || `名もなきニジラー（#${ change.createdByUser.id }）`}
+				  </PrefetchLink>)
+			       : 'bot 操作'}
+			      <br/>
+			      {dateString (change.createdAt)}
+			    </td>
+			    <td className="p-2">
+			      <a
+				  href="#"
+				  onClick={async e => {
+				    e.preventDefault ()
+
+				    if (!(confirm (
+					`『${ change.title.current
+					      || change.url.current }』を版 ${
+					change.versionNo } に差戻します．\nよろしいですか?`)))
+				      return
+
+				    try
+				    {
+				      await apiPut (
+					  `/posts/${ change.postId }`,
+					  { title: change.title.current,
+					    tags: change.tags
+						  .filter (t => t.type !== 'removed')
+						  .map (t => t.name)
+						  .filter (t => t.slice (0, 5) !== 'nico:')
+						  .join (' '),
+					    original_created_from:
+						change.originalCreatedFrom.current,
+					    original_created_before:
+						change.originalCreatedBefore.current })
+
+				      qc.invalidateQueries ({ queryKey: postsKeys.root })
+				      qc.invalidateQueries ({ queryKey: tagsKeys.root })
+				      toast ({ description: '差戻しました．' })
+				    }
+				    catch
+				    {
+				      toast ({ description: '差戻に失敗……' })
+				    }
+				  }}>
+				復元
+			      </a>
+			    </td>
+			  </tr>)
+		    })}
+		  </tbody>
+		</table>
+	      </div>

 	      <Pagination page={page} totalPages={totalPages}/>
 	    </>)}
@@ -69,7 +69,9 @@ export default (() => {
  }, [location.search])

  return (
-      <div className="md:flex md:flex-1" ref={containerRef}>
+      <div
+	  className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden"
+	  ref={containerRef}>
 	<Helmet>
 	  <title>
 	    {tags.length
@@ -7,24 +7,22 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import PrefetchLink from '@/components/PrefetchLink'
 import SortHeader from '@/components/SortHeader'
 import TagLink from '@/components/TagLink'
-import TagSearchBox from '@/components/TagSearchBox'
 import DateTimeField from '@/components/common/DateTimeField'
 import Label from '@/components/common/Label'
 import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
+import TagInput from '@/components/common/TagInput'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
-import { apiGet } from '@/lib/api'
 import { fetchPosts } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
 import { dateString, originalCreatedAtString } from '@/lib/utils'

-import type { FC, ChangeEvent, FormEvent, KeyboardEvent } from 'react'
+import type { FC, FormEvent } from 'react'

 import type { FetchPostsOrder,
 	      FetchPostsOrderField,
-	      FetchPostsParams,
-	      Tag } from '@/types'
+	      FetchPostsParams } from '@/types'


 const setIf = (qs: URLSearchParams, k: string, v: string | null) => {
@@ -57,14 +55,11 @@ export default (() => {
  const qUpdatedTo = query.get ('updated_to') ?? ''
  const order = (query.get ('order') || 'original_created_at:desc') as FetchPostsOrder

-  const [activeIndex, setActiveIndex] = useState (-1)
  const [createdFrom, setCreatedFrom] = useState<string | null> (null)
  const [createdTo, setCreatedTo] = useState<string | null> (null)
  const [matchType, setMatchType] = useState<'all' | 'any'> ('all')
  const [originalCreatedFrom, setOriginalCreatedFrom] = useState<string | null> (null)
  const [originalCreatedTo, setOriginalCreatedTo] = useState<string | null> (null)
-  const [suggestions, setSuggestions] = useState<Tag[]> ([])
-  const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
  const [tagsStr, setTagsStr] = useState ('')
  const [title, setTitle] = useState ('')
  const [updatedFrom, setUpdatedFrom] = useState<string | null> (null)
@@ -103,58 +98,6 @@ export default (() => {
    document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
  }, [location.search])

-  // TODO: TagSearch からのコピペのため，共通化を考へる．
-  const whenChanged = async (ev: ChangeEvent<HTMLInputElement>) => {
-    setTagsStr (ev.target.value)
-
-    const q = ev.target.value.trim ().split (' ').at (-1)
-    if (!(q))
-      {
-	setSuggestions ([])
-	return
-      }
-
-    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q } })
-    setSuggestions (data.filter (t => t.postCount > 0))
-    if (suggestions.length > 0)
-      setSuggestionsVsbl (true)
-  }
-
-  // TODO: TagSearch からのコピペのため，共通化を考へる．
-  const handleKeyDown = (ev: KeyboardEvent<HTMLInputElement>) => {
-    switch (ev.key)
-    {
-    case 'ArrowDown':
-      ev.preventDefault ()
-      setActiveIndex (i => Math.min (i + 1, suggestions.length - 1))
-      setSuggestionsVsbl (true)
-      break
-
-    case 'ArrowUp':
-      ev.preventDefault ()
-      setActiveIndex (i => Math.max (i - 1, -1))
-      setSuggestionsVsbl (true)
-      break
-
-    case 'Enter':
-      if (activeIndex < 0)
-	break
-      ev.preventDefault ()
-      const selected = suggestions[activeIndex]
-      selected && handleTagSelect (selected)
-      break
-
-    case 'Escape':
-      ev.preventDefault ()
-      setSuggestionsVsbl (false)
-      break
-    }
-    if (ev.key === 'Enter' && (!(suggestionsVsbl) || activeIndex < 0))
-      {
-	setSuggestionsVsbl (false)
-      }
-  }
-
  const search = async () => {
    const qs = new URLSearchParams ()
    setIf (qs, 'tags', tagsStr)
@@ -172,15 +115,6 @@ export default (() => {
    navigate (`${ location.pathname }?${ qs.toString () }`)
  }

-  // TODO: TagSearch からのコピペのため，共通化を考へる．
-  const handleTagSelect = (tag: Tag) => {
-    const parts = tagsStr.split (' ')
-    parts[parts.length - 1] = tag.name
-    setTagsStr (parts.join (' ') + ' ')
-    setSuggestions ([])
-    setActiveIndex (-1)
-  }
-
  const handleSearch = (e: FormEvent) => {
    e.preventDefault ()
    search ()
@@ -223,21 +157,11 @@ export default (() => {
 	    </div>

 	    {/* タグ */}
-	    <div className="relative">
+	    <div>
 	      <Label>タグ</Label>
-	      <input
-		  type="text"
+	      <TagInput
 		  value={tagsStr}
-		  onChange={whenChanged}
-		  onFocus={() => setSuggestionsVsbl (true)}
-		  onBlur={() => setSuggestionsVsbl (false)}
-		  onKeyDown={handleKeyDown}
-		  className="w-full border p-2 rounded"/>
-	      <TagSearchBox
-		  suggestions={
-		      suggestionsVsbl && suggestions.length > 0 ? suggestions : [] as Tag[]}
-		  activeIndex={activeIndex}
-		  onSelect={handleTagSelect}/>
+		  setValue={setTagsStr}/>
 	      <fieldset className="w-full my-2">
 		<label>検索区分：</label>
 		<label className="mx-2">
@@ -365,7 +289,7 @@ export default (() => {
 		    {results.map (row => (
 			<tr key={row.id} className="even:bg-gray-100 dark:even:bg-gray-700">
 			  <td className="p-2">
-			    <PrefetchLink to={`/posts/${ row.id }`} title={row.title}>
+			    <PrefetchLink to={`/posts/${ row.id }`} title={row.title || undefined}>
 			      <motion.div
 				  layoutId={`page-${ row.id }`}
 				  transition={{ type: 'spring',
@@ -380,7 +304,7 @@ export default (() => {
 			    </PrefetchLink>
 			  </td>
 			  <td className="p-2 truncate">
-			    <PrefetchLink to={`/posts/${ row.id }`} title={row.title}>
+			    <PrefetchLink to={`/posts/${ row.id }`} title={row.title || undefined}>
 			      {row.title}
 			    </PrefetchLink>
 			  </td>
@@ -0,0 +1,158 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+
+import TagLink from '@/components/TagLink'
+import Label from '@/components/common/Label'
+import PageTitle from '@/components/common/PageTitle'
+import MainArea from '@/components/layout/MainArea'
+import { toast } from '@/components/ui/use-toast'
+import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
+import { apiPut } from '@/lib/api'
+import { postsKeys, tagsKeys } from '@/lib/queryKeys'
+import { fetchTag } from '@/lib/tags'
+import { cn } from '@/lib/utils'
+
+import type { FC, FormEvent } from 'react'
+
+import type { Category, Tag } from '@/types'
+
+
+export default (() => {
+  const { id } = useParams ()
+  const tagId = String (id ?? '')
+  const tagKey = tagsKeys.show (tagId)
+
+  const { data: tag, isLoading: loading } = useQuery ({
+      queryKey: tagKey,
+      queryFn: () => fetchTag (tagId) })
+
+  const [name, setName] = useState ('')
+  const [category, setCategory] = useState<Category> ('general')
+  const [aliases, setAliases] = useState ('')
+  const [parentTags, setParentTags] = useState ('')
+  const [disabled, setDisabled] = useState (true)
+
+  const qc = useQueryClient ()
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault ()
+
+    const formData = new FormData
+    formData.append ('name', name)
+    formData.append ('category', category)
+    formData.append ('aliases', aliases)
+    formData.append ('parent_tags', parentTags)
+
+    try
+    {
+      const data = await apiPut<Tag> (`/tags/${ id }`, formData)
+
+      setName (data.name)
+      setCategory (data.category as Category)
+      setAliases (data.aliases.join (' '))
+      setParentTags (data.parents.map (t => t.name).join (' '))
+
+      qc.invalidateQueries ({ queryKey: postsKeys.root })
+      qc.invalidateQueries ({ queryKey: tagsKeys.root })
+      toast ({ description: '更新しました．' })
+    }
+    catch
+    {
+      toast ({ description: '更新に失敗しました．' })
+    }
+  }
+
+  useEffect (() => {
+    if (!(tag))
+      {
+	setDisabled (true)
+	return
+      }
+
+    setName (tag.name)
+    setCategory (tag.category as Category)
+    setAliases (tag.aliases.join (' '))
+    setParentTags (tag.parents.map (t => t.name).join (' '))
+    setDisabled (tag.category === 'nico')
+  }, [tag])
+
+  return (
+      <MainArea>
+	{(loading || !(tag)) ? 'Loading...' : (
+	    <div className="max-w-xl">
+	      <PageTitle>
+		<TagLink
+		    tag={tag}
+		    withWiki={false}
+		    withCount={false}/>
+	      </PageTitle>
+
+	      <form onSubmit={handleSubmit} className="my-4 space-y-2">
+		{/* 名称 */}
+		<div>
+		  <Label>名称</Label>
+		  {/* TODO: 補完に対応させる */}
+		  <input
+		      type="text"
+		      disabled={disabled}
+		      value={name}
+		      onChange={e => setName (e.target.value)}
+		      className="w-full border p-2 rounded"/>
+		</div>
+
+		{/* カテゴリ */}
+		<div>
+		  <Label>カテゴリ</Label>
+		  <select
+		      disabled={disabled}
+		      value={category ?? ''}
+		      onChange={e => setCategory(e.target.value as Category)}
+		      className="w-full border p-2 rounded">
+		    {CATEGORIES.filter (cat => tag.category === 'nico' || cat !== 'nico')
+			       .map (cat => (
+			<option key={cat} value={cat}>
+			  {CATEGORY_NAMES[cat]}
+			</option>))}
+		  </select>
+		</div>
+
+		{/* 別名 */}
+		<div>
+		  <Label>別名</Label>
+		  {/* TODO: 補完に対応させる */}
+		  <input
+		      type="text"
+		      disabled={disabled}
+		      value={aliases}
+		      onChange={e => setAliases (e.target.value)}
+		      className="w-full border p-2 rounded"/>
+		</div>
+
+		{/* 上位タグ */}
+		<div>
+		  <Label>上位タグ</Label>
+		  {/* TODO: 補完に対応させる */}
+		  <input
+		      type="text"
+		      disabled={disabled}
+		      value={parentTags}
+		      onChange={e => setParentTags (e.target.value)}
+		      className="w-full border p-2 rounded"/>
+		</div>
+
+		<div className="py-3">
+		  <button
+		      type="submit"
+		      disabled={disabled}
+		      className={cn ('px-4 py-2 rounded',
+				     (disabled
+				      ? 'text-gray-300 bg-gray-500'
+				      : 'text-white bg-blue-500'))}>
+		    更新
+		  </button>
+		</div>
+	      </form>
+	    </div>)}
+      </MainArea>)
+}) satisfies FC
@@ -0,0 +1,212 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useEffect } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { useLocation } from 'react-router-dom'
+
+import PrefetchLink from '@/components/PrefetchLink'
+import PageTitle from '@/components/common/PageTitle'
+import Pagination from '@/components/common/Pagination'
+import MainArea from '@/components/layout/MainArea'
+import { toast } from '@/components/ui/use-toast'
+import { SITE_TITLE } from '@/config'
+import { CATEGORY_NAMES } from '@/consts'
+import { apiPut } from '@/lib/api'
+import { postsKeys, tagsKeys } from '@/lib/queryKeys'
+import { fetchTagChanges } from '@/lib/tags'
+import { cn, dateString } from '@/lib/utils'
+
+import type { FC } from 'react'
+
+
+const renderDiff = (diff: { current: string | null; prev: string | null }) => (
+    <>
+      {(diff.prev && diff.prev !== diff.current) && (
+	  <>
+	    <del className="text-red-600 dark:text-red-400">
+	      {diff.prev}
+	    </del>
+	    {diff.current && <br/>}
+	  </>)}
+      {diff.current}
+    </>)
+
+
+export default (() => {
+  const location = useLocation ()
+  const query = new URLSearchParams (location.search)
+  const id = query.get ('id')
+  const page = Number (query.get ('page') ?? 1)
+  const limit = Number (query.get ('limit') ?? 20)
+
+  const { data, isLoading: loading } = useQuery ({
+      queryKey: tagsKeys.changes ({ ...(id && { id }), page, limit }),
+      queryFn:  () => fetchTagChanges ({ ...(id && { id }), page, limit }) })
+  const changes = data?.versions ?? []
+  const totalPages = data ? Math.ceil (data.count / limit) : 0
+
+  const qc = useQueryClient ()
+
+  useEffect (() => {
+    document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
+  }, [location.search])
+
+  return (
+      <MainArea>
+	<Helmet>
+	  <title>{`タグ定義変更履歴 | ${ SITE_TITLE }`}</title>
+	</Helmet>
+
+	<PageTitle>
+	  タグ定義変更履歴
+	  {id && <>: タグ {<PrefetchLink to={`/tags/${ id }`}>#{id}</PrefetchLink>}</>}
+	</PageTitle>
+
+	{loading ? 'Loading...' : (
+	    <>
+	      <div className="overflow-x-auto">
+		<table className="w-full min-w-[1200px] table-fixed border-collapse">
+		  <colgroup>
+		    {/* 版 */}
+		    <col className="w-40"/>
+		    {/* 名称 */}
+		    <col className="w-96"/>
+		    {/* カテゴリ */}
+		    <col className="w-96"/>
+		    {/* 別名 */}
+		    <col className="w-[48rem]"/>
+		    {/* 上位タグ */}
+		    <col className="w-96"/>
+		    {/* 更新日時 */}
+		    <col className="w-64"/>
+		    {/* (差戻ボタン) */}
+		    <col className="w-20"/>
+		  </colgroup>
+
+		  <thead className="border-b-2 border-black dark:border-white">
+		    <tr>
+		      <th className="p-2 text-left">版</th>
+		      <th className="p-2 text-left">名称</th>
+		      <th className="p-2 text-left">カテゴリ</th>
+		      <th className="p-2 text-left">別名</th>
+		      <th className="p-2 text-left">上位タグ</th>
+		      <th className="p-2 text-left">更新日時</th>
+		      <th className="p-2"/>
+		    </tr>
+		  </thead>
+
+		  <tbody>
+		    {changes.map (change => (
+			<tr key={`${ change.tagId }.${ change.versionNo }`}
+			    className={cn ('even:bg-gray-100 dark:even:bg-gray-700')}>
+			  <td className="p-2">{change.tagId}.{change.versionNo}</td>
+			  <td className="p-2 break-all">{renderDiff (change.name)}</td>
+			  <td className="p-2 break-all">
+			    {renderDiff ({
+				current: CATEGORY_NAMES[change.category.current],
+				prev: (change.category.prev
+				       && CATEGORY_NAMES[change.category.prev]) })}
+			  </td>
+			  <td className="p-2">
+			    {change.aliases.map ((tag, i) => (
+				tag.type === 'added'
+				? (
+				    <ins
+					key={i}
+					className="mr-2 text-green-600 dark:text-green-400">
+				      {tag.name}
+				    </ins>)
+				: (
+				    tag.type === 'removed'
+				    ? (
+					<del
+					    key={i}
+					    className="mr-2 text-red-600 dark:text-red-400">
+					  {tag.name}
+					</del>)
+				    : (
+					<span key={i} className="mr-2">
+					  {tag.name}
+					</span>))))}
+			  </td>
+			  <td className="p-2">
+			    {change.parentTags.map ((tag, i) => (
+				tag.type === 'added'
+				? (
+				    <ins
+					key={i}
+					className="mr-2 text-green-600 dark:text-green-400">
+				      {tag.tag.name}
+				    </ins>)
+				: (
+				    tag.type === 'removed'
+				    ? (
+					<del
+					    key={i}
+					    className="mr-2 text-red-600 dark:text-red-400">
+					  {tag.tag.name}
+					</del>)
+				    : (
+					<span key={i} className="mr-2">
+					  {tag.tag.name}
+					</span>))))}
+			  </td>
+			  <td className="p-2">
+			    {change.createdByUser
+			     ? (
+				<PrefetchLink to={`/users/${ change.createdByUser.id }`}>
+				  {change.createdByUser.name
+				   || `名もなきニジラー（#${ change.createdByUser.id }）`}
+				</PrefetchLink>)
+			     : 'bot 操作'}
+			    <br/>
+			    {dateString (change.createdAt)}
+			  </td>
+			  <td className="p-2">
+			    <a
+				href="#"
+				onClick={async e => {
+				  e.preventDefault ()
+
+				  if (!(confirm (
+				      `タグ『${ change.name.current }』を版 ${
+				      change.versionNo } に差戻します．\nよろしいですか?`)))
+				    return
+
+				  try
+				  {
+				    await apiPut (
+					`/tags/${ change.tagId }`,
+					{ name: change.name.current,
+					  category: change.category.current,
+					  aliases:
+					      change.aliases
+					      .filter (t => t.type !== 'removed')
+					      .map (t => t.name)
+					      .join (' '),
+					  parent_tags:
+					      change.parentTags
+					      .filter (t => t.type !== 'removed')
+					      .map (t => t.tag.name)
+					      .join (' ') })
+
+				    qc.invalidateQueries ({ queryKey: postsKeys.root })
+				    qc.invalidateQueries ({ queryKey: tagsKeys.root })
+				    toast ({ description: '差戻しました．' })
+				  }
+				  catch
+				  {
+				    toast ({ description: '差戻に失敗……' })
+				  }
+				}}>
+			      復元
+			    </a>
+			  </td>
+			</tr>))}
+		  </tbody>
+		</table>
+	      </div>
+
+	      <Pagination page={page} totalPages={totalPages}/>
+	    </>)}
+      </MainArea>)
+}) satisfies FC
@@ -205,13 +205,15 @@ export default (() => {
 	{loading ? 'Loading...' : (results.length > 0 ? (
 	    <div className="mt-4">
 	      <div className="overflow-x-auto">
-		<table className="w-full min-w-[1200px] table-fixed border-collapse">
+		<table className="w-full min-w-[2000px] table-fixed border-collapse">
 		  <colgroup>
 		    <col className="w-72"/>
-		    <col className="w-48"/>
 		    <col className="w-16"/>
-		    <col className="w-44"/>
-		    <col className="w-44"/>
+		    <col className="w-48"/>
+		    <col className="w-72"/>
+		    <col className="w-48"/>
+		    <col className="w-56"/>
+		    <col className="w-56"/>
 		    <col className="w-16"/>
 		  </colgroup>

@@ -224,13 +226,6 @@ export default (() => {
 			    currentOrder={order}
 			    defaultDirection={defaultDirection}/>
 		      </th>
-		      <th className="p-2 text-left whitespace-nowrap">
-			<SortHeader<FetchTagsOrderField>
-			    by="category"
-			    label="カテゴリ"
-			    currentOrder={order}
-			    defaultDirection={defaultDirection}/>
-		      </th>
 		      <th className="p-2 text-left whitespace-nowrap">
 			<SortHeader<FetchTagsOrderField>
 			    by="post_count"
@@ -238,6 +233,15 @@ export default (() => {
 			    currentOrder={order}
 			    defaultDirection={defaultDirection}/>
 		      </th>
+		      <th className="p-2 text-left whitespace-nowrap">
+			<SortHeader<FetchTagsOrderField>
+			    by="category"
+			    label="カテゴリ"
+			    currentOrder={order}
+			    defaultDirection={defaultDirection}/>
+		      </th>
+		      <th className="p-2 text-left whitespace-nowrap">別名</th>
+		      <th className="p-2 text-left whitespace-nowrap">上位タグ</th>
 		      <th className="p-2 text-left whitespace-nowrap">
 			<SortHeader<FetchTagsOrderField>
 			    by="created_at"
@@ -260,10 +264,23 @@ export default (() => {
 		    {results.map (row => (
 			<tr key={row.id} className="even:bg-gray-100 dark:even:bg-gray-700">
 			  <td className="p-2">
-			    <TagLink tag={row} withCount={false}/>
+			    <TagLink
+				tag={row}
+				to={`/tags/${ encodeURIComponent (row.id) }`}
+				withCount={false}/>
 			  </td>
-			  <td className="p-2">{CATEGORY_NAMES[row.category]}</td>
 			  <td className="p-2 text-right">{row.postCount}</td>
+			  <td className="p-2">{CATEGORY_NAMES[row.category]}</td>
+			  <td className="p-2">{row.aliases.join (' ')}</td>
+			  <td className="p-2">
+			    {row.parents.map (t => (
+				<span key={t.id} className="mr-2">
+				  <TagLink
+				      tag={t}
+				      withWiki={false}
+				      withCount={false}/>
+				</span>))}
+			  </td>
 			  <td className="p-2">{dateString (row.createdAt)}</td>
 			  <td className="p-2">{dateString (row.updatedAt)}</td>
 			  <td className="p-2">
@@ -232,7 +232,7 @@ export default (() => {
    return <ErrorScreen status={status}/>

  return (
-      <div className="md:flex md:flex-1">
+      <div className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
 	<Helmet>
 	  {theatre && (
 	      <title>
@@ -7,7 +7,6 @@ import PostList from '@/components/PostList'
 import PrefetchLink from '@/components/PrefetchLink'
 import TagLink from '@/components/TagLink'
 import WikiBody from '@/components/WikiBody'
-import PageTitle from '@/components/common/PageTitle'
 import TabGroup, { Tab } from '@/components/common/TabGroup'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
@@ -107,21 +106,23 @@ export default () => {
 		  </PrefetchLink>) : '(最新)'}
 	    </div>)}

-	<PageTitle>
-	  <TagLink tag={tag ?? defaultTag}
-		   withWiki={false}
-		   withCount={false}
-		   {...(version && { to: `/wiki/${ encodeURIComponent (title) }` })}/>
-	</PageTitle>
-	<div className="prose mx-auto p-4">
-	  {loading ? 'Loading...' : <WikiBody title={title} body={wikiPage?.body}/>}
-	</div>
+	<article className="prose dark:prose-invert mx-auto p-4">
+	  <h1 className="prose-a:no-underline">
+	    <TagLink tag={tag ?? defaultTag}
+		     withWiki={false}
+		     withCount={false}
+		     {...(version && { to: `/wiki/${ encodeURIComponent (title) }` })}/>
+	  </h1>
+	  {loading ? <div>Loading...</div> : <WikiBody title={title} body={wikiPage?.body}/>}

-	{(!(version) && posts.length > 0) && (
-	    <TabGroup>
-	      <Tab name="広場">
-		<PostList posts={posts}/>
-	      </Tab>
-	    </TabGroup>)}
+	  {(!(version) && posts.length > 0) && (
+	      <div className="not-prose">
+		<TabGroup>
+		  <Tab name="広場">
+		    <PostList posts={posts}/>
+		  </Tab>
+		</TabGroup>
+	      </div>)}
+	</article>
      </MainArea>)
 }
@@ -49,12 +49,34 @@ export type FetchTagsParams = {
    limit:        number
    order:        FetchTagsOrder }

+export type Material = {
+    id:             number
+    tag:            Tag
+    file:           string | null
+    url:            string | null
+    wikiPageBody?:  string | null
+    contentType:    string | null
+    createdAt:      string
+    createdByUser:  { id: number; name: string }
+    updatedAt:      string
+    updatedByUser:  { id: number; name: string } }
+
 export type Menu = MenuItem[]

-export type MenuItem = {
+export type MenuInvisibleItem = {
+    name:     ReactNode
+    to?:      string
+    base?:    string
+    visible:  false
+    subMenu:  SubMenuItem[] }
+
+export type MenuItem = MenuVisibleItem | MenuInvisibleItem
+
+export type MenuVisibleItem = {
    name:     ReactNode
    to:       string
    base?:    string
+    visible?: true
    subMenu:  SubMenuItem[] }

 export type NicoTag = Tag & {
@@ -95,9 +117,9 @@ export type NiconicoViewerHandle = {
 export type Post = {
    id:                     number
    url:                    string
-    title:                  string
-    thumbnail:              string
-    thumbnailBase:          string
+    title:                  string | null
+    thumbnail:              string | null
+    thumbnailBase:          string | null
    tags:                   Tag[]
    viewed:                 boolean
    related:                Post[]
@@ -105,7 +127,7 @@ export type Post = {
    originalCreatedBefore:  string | null
    createdAt:              string
    updatedAt:              string
-    uploadedUser:           { id: number; name: string } | null }
+    uploadedUser:           { id: number; name: string | null } | null }

 export type PostTagChange = {
    post:       Post
@@ -114,24 +136,56 @@ export type PostTagChange = {
    changeType: 'add' | 'remove'
    timestamp:  string }

-export type SubMenuItem =
-    | { component:  ReactNode
-	visible:    boolean }
-    | { name:     ReactNode
-	to:       string
-	visible?: boolean }
+export type PostVersion = {
+    postId:                 number
+    versionNo:              number
+    eventType:              'create' | 'update' | 'discard' | 'restore'
+    title:                  { current: string | null; prev: string | null }
+    url:                    { current: string; prev: string | null }
+    thumbnail:              { current: string | null; prev: string | null }
+    thumbnailBase:          { current: string | null; prev: string | null }
+    tags:                   { name: string; type: 'context' | 'added' | 'removed' }[]
+    originalCreatedFrom:    { current: string | null; prev: string | null }
+    originalCreatedBefore:  { current: string | null; prev: string | null }
+    createdAt:              string
+    createdByUser:          { id: number; name: string | null } | null }
+
+export type SubMenuComponentItem = {
+    component:  ReactNode
+    visible:    boolean }
+
+export type SubMenuItem = SubMenuComponentItem | SubMenuStringItem
+
+export type SubMenuStringItem = {
+    name:     ReactNode
+    to:       string
+    visible?: boolean }

 export type Tag = {
    id:             number
    name:           string
    category:       Category
+    aliases:        string[]
+    parents:        Tag[]
    postCount:      number
    createdAt:      string
    updatedAt:      string
    hasWiki:        boolean
+    materialId:     number
    children?:      Tag[]
    matchedAlias?:  string | null }

+export type TagVersion = {
+    tagId:                  number
+    versionNo:              number
+    eventType:              'create' | 'update' | 'discard' | 'restore'
+    name:                   { current: string; prev: string | null }
+    category:               { current: Category; prev: Category | null }
+    aliases:                { name: string; type: 'context' | 'added' | 'removed' }[]
+    parentTags:             { tag: Tag; type: 'context' | 'added' | 'removed' }[]
+    createdAt:              string
+    createdByUser:          { id: number; name: string | null } | null }
+
 export type Theatre = {
    id:             number
    name:           string | null
@@ -8,7 +8,7 @@ import { DARK_COLOUR_SHADE,
 const colours = Object.values (TAG_COLOUR)

 export default {
-    content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
+    content: ['./src/**/*.{html,js,ts,jsx,tsx,mdx}'],
    safelist: [...colours.map (c => `text-${ c }-${ LIGHT_COLOUR_SHADE }`),
 	       ...colours.map (c => `hover:text-${ c }-${ LIGHT_COLOUR_SHADE - 200 }`),
 	       ...colours.map (c => `dark:text-${ c }-${ DARK_COLOUR_SHADE }`),
@@ -24,4 +24,4 @@ export default {
 		'rainbow-scroll': {
 		    '0%':   { backgroundPosition: '0% 50%' },
 		    '100%': { backgroundPosition: '200% 50%' } } } } },
-    plugins: [] } satisfies Config
+    plugins: [require ('@tailwindcss/typography')] } satisfies Config
@@ -1,11 +1,12 @@
-import { defineConfig } from 'vite'
+import mdx from '@mdx-js/rollup'
 import react from '@vitejs/plugin-react'
 import path from 'path'
+import { defineConfig } from 'vite'


 // https://vite.dev/config/
 export default defineConfig ({
-    plugins:  [react()],
+    plugins:  [mdx ({ providerImportSource: '@/mdx-components' }), react ()],
    resolve:  { alias: { '@': path.resolve (__dirname, './src') } },
    server:   { host:         true,
 		port:         5173,