Merge branch 'main' into feature/100

2025-12-25 02:51:02 +09:00
@@ -17,6 +17,7 @@
        "camelcase-keys": "^9.1.3",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
+        "framer-motion": "^12.23.26",
        "humps": "^2.0.1",
        "lucide-react": "^0.511.0",
        "markdown-it": "^14.1.0",
@@ -3573,6 +3574,33 @@
        "url": "https://github.com/sponsors/rawify"
      }
    },
+    "node_modules/framer-motion": {
+      "version": "12.23.26",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.26.tgz",
+      "integrity": "sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.23",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/fsevents": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -5216,6 +5244,21 @@
        "node": ">=16 || 14 >=14.17"
      }
    },
+    "node_modules/motion-dom": {
+      "version": "12.23.23",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -19,6 +19,7 @@
    "camelcase-keys": "^9.1.3",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "framer-motion": "^12.23.26",
    "humps": "^2.0.1",
    "lucide-react": "^0.511.0",
    "markdown-it": "^14.1.0",
@@ -19,7 +19,6 @@ const fetchPosts = async tagName => (await axios.get (`${ API_BASE_URL }/posts`,
    { params: { ...(tagName && { tags:  tagName,
                                 match: 'all',
                                 limit: '20' }) } })).data.posts
-const fetchPostIds = async () => (await fetchPosts ()).map (post => post.id)

 const fetchTags = async () => (await axios.get (`${ API_BASE_URL }/tags`)).data
 const fetchTagNames = async () => (await fetchTags ()).map (tag => tag.name)
@@ -33,7 +32,7 @@ const createPostListOutlet = async tagName => `
        <div class="flex gap-4"><a href="#" class="font-bold">広場</a></div>
        <div class="mt-2">
          <div class="flex flex-wrap gap-6 p-4">
-            ${ (await fetchPosts (tagName)).map (post => `
+            ${ (await fetchPosts (tagName)).slice (0, 20).map (post => `
                <a class="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg"
                   href="/posts/${ post.id }">
                  <img alt="${ post.title }"
@@ -42,7 +41,7 @@ const createPostListOutlet = async tagName => `
                       fetchpriority="high"
                       decoding="async"
                       class="object-none w-full h-full"
-                       src="${ post.url }" />
+                       src="${ post.thumbnail }" />
                </a>`).join ('') }
          </div>
        </div>
@@ -9,6 +9,7 @@ import { API_BASE_URL } from '@/config'
 import NicoTagListPage from '@/pages/tags/NicoTagListPage'
 import NotFound from '@/pages/NotFound'
 import PostDetailPage from '@/pages/posts/PostDetailPage'
+import PostHistoryPage from '@/pages/posts/PostHistoryPage'
 import PostListPage from '@/pages/posts/PostListPage'
 import PostNewPage from '@/pages/posts/PostNewPage'
 import ServiceUnavailable from '@/pages/ServiceUnavailable'
@@ -79,6 +80,7 @@ export default (() => {
 	    <Route path="/posts" element={<PostListPage/>}/>
 	    <Route path="/posts/new" element={<PostNewPage user={user}/>}/>
 	    <Route path="/posts/:id" element={<PostDetailPage user={user}/>}/>
+	    <Route path="/posts/changes" element={<PostHistoryPage/>}/>
 	    <Route path="/tags/nico" element={<NicoTagListPage user={user}/>}/>
 	    <Route path="/wiki" element={<WikiSearchPage/>}/>
 	    <Route path="/wiki/:title" element={<WikiDetailPage/>}/>
@@ -1,6 +1,6 @@
 import axios from 'axios'
 import toCamel from 'camelcase-keys'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'

 import PostFormTagsArea from '@/components/PostFormTagsArea'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
@@ -10,7 +10,23 @@ import { API_BASE_URL } from '@/config'

 import type { FC } from 'react'

-import type { Post } from '@/types'
+import type { Post, Tag } from '@/types'
+
+
+const tagsToStr = (tags: Tag[]): string => {
+  const result: Tag[] = []
+
+  const walk = (tag: Tag) => {
+    const { children, ...rest } = tag
+    result.push (rest)
+    children?.forEach (walk)
+  }
+
+  tags.filter (t => t.category !== 'nico').forEach (walk)
+
+  return [...(new Set (result.map (t => t.name)))].join (' ')
+}
+

 type Props = { post:    Post
 	       onSave:  (newPost: Post) => void }
@@ -22,10 +38,7 @@ export default (({ post, onSave }: Props) => {
  const [originalCreatedFrom, setOriginalCreatedFrom] =
      useState<string | null> (post.originalCreatedFrom)
  const [title, setTitle] = useState (post.title)
-  const [tags, setTags] = useState<string> (post.tags
-					    .filter (t => t.category !== 'nico')
-					    .map (t => t.name)
-					    .join (' '))
+  const [tags, setTags] = useState<string> ('')

  const handleSubmit = async () => {
    const res = await axios.put (
@@ -43,6 +56,10 @@ export default (({ post, onSave }: Props) => {
 	      originalCreatedBefore:  data.originalCreatedBefore } as Post)
  }

+  useEffect (() => {
+    setTags(tagsToStr (post.tags))
+  }, [post])
+
  return (
      <div className="max-w-xl pt-2 space-y-4">
 	{/* タイトル */}
@@ -1,3 +1,4 @@
+import { AnimatePresence, motion } from 'framer-motion'
 import { useEffect, useState } from 'react'

 import TagLink from '@/components/TagLink'
@@ -7,12 +8,37 @@ import SubsectionTitle from '@/components/common/SubsectionTitle'
 import SidebarComponent from '@/components/layout/SidebarComponent'
 import { CATEGORIES } from '@/consts'

-import type { FC } from 'react'
+import type { FC, ReactNode } from 'react'

 import type { Category, Post, Tag } from '@/types'

 type TagByCategory = { [key in Category]: Tag[] }

+
+const renderTagTree = (
+    tag:        Tag,
+    nestLevel:  number,
+    path:       string,
+): ReactNode[] => {
+  const key = `${ path }-${ tag.id }`
+
+  const self = (
+      <motion.li
+	  key={key}
+	  layout
+	  transition={{ duration: .2, ease: 'easeOut' }}
+	  className="mb-1">
+	<TagLink tag={tag} nestLevel={nestLevel}/>
+      </motion.li>)
+
+  return [self,
+	  ...((tag.children
+	       ?.sort ((a, b) => a.name < b.name ? -1 : 1)
+	       .flatMap (child => renderTagTree (child, nestLevel + 1, key)))
+	      ?? [])]
+}
+
+
 type Props = { post: Post | null }


@@ -50,58 +76,60 @@ export default (({ post }: Props) => {
  return (
      <SidebarComponent>
 	<TagSearch/>
-	{CATEGORIES.map ((cat: Category) => cat in tags && (
-	    <div className="my-3" key={cat}>
-	      <SubsectionTitle>{categoryNames[cat]}</SubsectionTitle>
-	      <ul>
-		{tags[cat].map (tag => (
-		    <li key={tag.id} className="mb-1">
-		      <TagLink tag={tag}/>
-		    </li>))}
-	      </ul>
-	    </div>))}
-	{post && (
-	    <div>
-	      <SectionTitle>情報</SectionTitle>
-	      <ul>
-		<li>Id.: {post.id}</li>
-		{/* TODO: uploadedUser の取得を対応したらコメント外す */}
-		{/*
-		<li>
-		  <>耕作者: </>
-		  {post.uploadedUser
-		   ? (
-		      <Link to={`/users/${ post.uploadedUser.id }`}>
-			{post.uploadedUser.name || '名もなきニジラー'}
-		      </Link>)
-		   : 'bot操作'}
-		</li>
-		*/}
-		<li>耕作日時: {(new Date (post.createdAt)).toLocaleString ()}</li>
-		<li>
-		  <>リンク: </>
-		  <a
-		      className="break-all"
-		      href={post.url}
-		      target="_blank"
-		      rel="noopener noreferrer nofollow">
-		    {post.url}
-		  </a>
-		</li>
-		<li>
-		  {/* TODO: 表示形式きしょすぎるので何とかする */}
-		  <>オリジナルの投稿日時: </>
-		  {!(post.originalCreatedFrom) && !(post.originalCreatedBefore)
-		   ? '不明'
-		   : (
-		      <>
-			{post.originalCreatedFrom
-			 && `${ (new Date (post.originalCreatedFrom)).toLocaleString () } 以降 `}
-			{post.originalCreatedBefore
-			 && `${ (new Date (post.originalCreatedBefore)).toLocaleString () } より前`}
-		      </>)}
-		</li>
-	      </ul>
-	    </div>)}
+	<motion.div key={post?.id ?? 0} layout>
+	  {CATEGORIES.map ((cat: Category) => cat in tags && (
+	      <motion.div layout className="my-3" key={cat}>
+		<SubsectionTitle>{categoryNames[cat]}</SubsectionTitle>
+
+		<motion.ul layout>
+		  <AnimatePresence initial={false}>
+		    {tags[cat].map (tag => renderTagTree (tag, 0, `cat-${ cat }`))}
+		  </AnimatePresence>
+		</motion.ul>
+	      </motion.div>))}
+	  {post && (
+	      <div>
+		<SectionTitle>情報</SectionTitle>
+		<ul>
+		  <li>Id.: {post.id}</li>
+		  {/* TODO: uploadedUser の取得を対応したらコメント外す */}
+		  {/*
+		  <li>
+		    <>耕作者: </>
+		    {post.uploadedUser
+		     ? (
+			<Link to={`/users/${ post.uploadedUser.id }`}>
+			  {post.uploadedUser.name || '名もなきニジラー'}
+			</Link>)
+		     : 'bot操作'}
+		  </li>
+		  */}
+		  <li>耕作日時: {(new Date (post.createdAt)).toLocaleString ()}</li>
+		  <li>
+		    <>リンク: </>
+		    <a
+			className="break-all"
+			href={post.url}
+			target="_blank"
+			rel="noopener noreferrer nofollow">
+		      {post.url}
+		    </a>
+		  </li>
+		  <li>
+		    {/* TODO: 表示形式きしょすぎるので何とかする */}
+		    <>オリジナルの投稿日時: </>
+		    {!(post.originalCreatedFrom) && !(post.originalCreatedBefore)
+		     ? '不明'
+		     : (
+			<>
+			  {post.originalCreatedFrom
+			   && `${ (new Date (post.originalCreatedFrom)).toLocaleString () } 以降 `}
+			  {post.originalCreatedBefore
+			   && `${ (new Date (post.originalCreatedBefore)).toLocaleString () } より前`}
+			</>)}
+		  </li>
+		</ul>
+	      </div>)}
+	</motion.div>
      </SidebarComponent>)
 }) satisfies FC<Props>
@@ -8,6 +8,7 @@ import type { ComponentProps, FC, HTMLAttributes } from 'react'
 import type { Tag } from '@/types'

 type CommonProps = { tag:         Tag
+		     nestLevel?:  number
 		     withWiki?:   boolean
 		     withCount?:  boolean }

@@ -21,6 +22,7 @@ type Props = PropsWithLink | PropsWithoutLink


 export default (({ tag,
+		   nestLevel = 0,
 		   linkFlg   = true,
 		   withWiki  = true,
 		   withCount = true,
@@ -42,6 +44,12 @@ export default (({ tag,
 		?
 	      </Link>
 	    </span>)}
+	{nestLevel > 0 && (
+	    <span
+		className="ml-1 mr-1"
+		style={{ paddingLeft: `${ (nestLevel - 1) }rem` }}>
+	      ↳
+	    </span>)}
 	{linkFlg
 	 ? (
 	    <Link to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { AnimatePresence, motion } from 'framer-motion'
 import { useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'

@@ -8,7 +9,6 @@ import SectionTitle from '@/components/common/SectionTitle'
 import SidebarComponent from '@/components/layout/SidebarComponent'
 import { API_BASE_URL } from '@/config'
 import { CATEGORIES } from '@/consts'
-import { cn } from '@/lib/utils'

 import type { FC } from 'react'

@@ -58,47 +58,71 @@ export default (({ posts }: Props) => {
    setTags (tagsTmp)
  }, [posts])

+  const TagBlock = (
+      <>
+	<SectionTitle>タグ</SectionTitle>
+	<ul>
+	  {CATEGORIES.flatMap (cat => cat in tags ? (
+	      tags[cat].map (tag => (
+		  <li key={tag.id} className="mb-1">
+		    <TagLink tag={tag}/>
+		  </li>))) : [])}
+	</ul>
+	<SectionTitle>関聯</SectionTitle>
+	{posts.length > 0 && (
+	    <a href="#"
+	       onClick={ev => {
+		 ev.preventDefault ()
+		 void ((async () => {
+		   try
+		   {
+		     const { data } = await axios.get (`${ API_BASE_URL }/posts/random`,
+			 { params: { tags:  tagsQuery.split (' ').filter (e => e !== '').join (' '),
+				     match: (anyFlg ? 'any' : 'all') } })
+		     navigate (`/posts/${ (data as Post).id }`)
+		   }
+		   catch
+		   {
+		     ;
+		   }
+		 }) ())
+	       }}>
+	      ランダム
+	    </a>)}
+      </>)
+
  return (
      <SidebarComponent>
 	<TagSearch/>
-	<div className={cn (!(tagsVsbl) && 'hidden', 'md:block mt-4')}>
-	  <SectionTitle>タグ</SectionTitle>
-	  <ul>
-	    {CATEGORIES.flatMap (cat => cat in tags ? (
-		tags[cat].map (tag => (
-		    <li key={tag.id} className="mb-1">
-		      <TagLink tag={tag}/>
-		    </li>))) : [])}
-	  </ul>
-	  <SectionTitle>関聯</SectionTitle>
-	  {posts.length > 0 && (
-	      <a href="#"
-		 onClick={ev => {
-		   ev.preventDefault ()
-		   void ((async () => {
-		     try
-		     {
-		       const { data } = await axios.get (`${ API_BASE_URL }/posts/random`,
-			   { params: { tags:  tagsQuery.split (' ').filter (e => e !== '').join (' '),
-				       match: (anyFlg ? 'any' : 'all') } })
-		       navigate (`/posts/${ (data as Post).id }`)
-		     }
-		     catch
-		     {
-		       ;
-		     }
-		   }) ())
-		 }}>
-		ランダム
-	      </a>)}
+
+	<div className="hidden md:block mt-4">
+	  {TagBlock}
 	</div>
+
+	<AnimatePresence initial={false}>
+	  {tagsVsbl && (
+	      <motion.div
+		  key="sptags"
+		  className="md:hidden mt-4"
+		  variants={{ hidden:   { clipPath: 'inset(0 0 100% 0)',
+					  height:   0 },
+			      visible:  { clipPath: 'inset(0 0 0% 0)',
+					  height:   'auto'} }}
+		  initial="hidden"
+		  animate="visible"
+		  exit="hidden"
+		  transition={{ duration: .2, ease: 'easeOut' }}>
+		{TagBlock}
+	      </motion.div>)}
+	</AnimatePresence>
+
 	<a href="#"
 	   className="md:hidden block my-2 text-center text-sm
 		      text-gray-500 hover:text-gray-400
 		      dark:text-gray-300 dark:hover:text-gray-100"
 	   onClick={ev => {
 	     ev.preventDefault ()
-	     setTagsVsbl (!(tagsVsbl))
+	     setTagsVsbl (v => !(v))
 	   }}>
 	  {tagsVsbl ? '▲▲▲ タグ一覧を閉じる ▲▲▲' : '▼▼▼ タグ一覧を表示 ▼▼▼'}
 	</a>
@@ -1,6 +1,7 @@
 import axios from 'axios'
 import toCamel from 'camelcase-keys'
-import { Fragment, useState, useEffect } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'

 import Separator from '@/components/MenuSeparator'
@@ -19,6 +20,28 @@ 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 [postCount, setPostCount] = useState<number | null> (null)
@@ -30,6 +53,7 @@ export default (({ user }: Props) => {
      { name: '広場', to: '/posts', subMenu: [
 	  { name: '一覧', to: '/posts' },
 	  { name: '投稿追加', to: '/posts/new' },
+	  { name: '耕作履歴', to: '/posts/changes' },
 	  { name: 'ヘルプ', to: '/wiki/ヘルプ:広場' }] },
      { name: 'タグ', to: '/tags', subMenu: [
 	  { name: 'タグ一覧', to: '/tags', visible: false },
@@ -52,6 +76,32 @@ export default (({ user }: Props) => {
 	  { name: 'お前', to: `/users/${ user?.id }`, visible: false },
 	  { name: '設定', to: '/users/settings', visible: Boolean (user) }] }]

+  const activeIdx = menu.findIndex (item => location.pathname.startsWith (item.base || item.to))
+
+  const prevActiveIdxRef = useRef<number> (activeIdx)
+
+  if (activeIdx !== prevActiveIdxRef.current)
+    {
+      dirRef.current = activeIdx > prevActiveIdxRef.current ? 1 : -1
+      prevActiveIdxRef.current = activeIdx
+    }
+
+  const dir = dirRef.current
+
+  useLayoutEffect (() => {
+    if (activeIdx < 0)
+      return
+
+    const raf = requestAnimationFrame (measure)
+    const onResize = () => requestAnimationFrame (measure)
+
+    addEventListener ('resize', onResize)
+    return () => {
+      cancelAnimationFrame (raf)
+      removeEventListener ('resize', onResize)
+    }
+  }, [activeIdx])
+
  useEffect (() => {
    const unsubscribe = WikiIdBus.subscribe (setWikiId)
    return () => unsubscribe ()
@@ -97,16 +147,26 @@ export default (({ user }: Props) => {
 	      ぼざクリ タグ広場
 	    </Link>

-	    {menu.map ((item, i) => (
-		<Link key={i}
-		      to={item.to}
-		      className={cn ('hidden md:flex h-full items-center',
-				     (location.pathname.startsWith (item.base || item.to)
-				      ? 'bg-yellow-200 dark:bg-red-950 px-4 font-bold'
-				      : 'px-2'))}>
-		  {item.name}
-		</Link>
-	    ))}
+	    <div ref={navRef} className="relative hidden md:flex h-full items-center">
+	      <div aria-hidden
+		   className={cn ('absolute top-1/2 -translate-y-1/2 h-full',
+				  'bg-yellow-200 dark:bg-red-950',
+				  'transition-[transform,width] duration-200 ease-out')}
+		   style={{ width:      hl.width,
+			    transform:  `translate(${ hl.left }px, -50%)`,
+			    opacity:    hl.visible ? 1 : 0 }}/>
+
+	      {menu.map ((item, i) => (
+		  <Link key={i}
+			to={item.to}
+			ref={el => {
+			  itemsRef.current[i] = el
+			}}
+			className={cn ('relative z-10 flex h-full items-center px-5',
+				       (i === openItemIdx) && 'font-bold')}>
+		    {item.name}
+		  </Link>))}
+	    </div>
 	  </div>

 	  <TopNavUser user={user}/>
@@ -123,49 +183,101 @@ export default (({ user }: Props) => {
 	  </a>
 	</nav>

-	<div className="hidden md:flex bg-yellow-200 dark:bg-red-950
-			items-center w-full min-h-[40px] px-3">
-	  {menu.find (item => location.pathname.startsWith (item.base || item.to))?.subMenu
-	   .filter (item => item.visible ?? true)
-	   .map ((item, i) => 'component' in item ? item.component : (
-	      <Link key={i}
-		    to={item.to}
-		    className="h-full flex items-center px-3">
-		{item.name}
-	      </Link>))}
+	<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>
+		  : (
+		      <Link key={`l-${ i }`}
+			    to={item.to}
+			    className="h-full flex items-center px-3">
+			{item.name}
+		      </Link>)))}
+	    </motion.div>
+	  </AnimatePresence>
 	</div>

-	<div className={cn (menuOpen ? 'flex flex-col md:hidden' : 'hidden',
-			    'bg-yellow-200 dark:bg-red-975 items-start')}>
-	  <Separator/>
-	  {menu.map ((item, i) => (
-	      <Fragment key={i}>
-		<Link to={i === openItemIdx ? item.to : '#'}
-		      className={cn ('w-full min-h-[40px] flex items-center pl-8',
-				     ((i === openItemIdx)
-				      && 'font-bold bg-yellow-50 dark:bg-red-950'))}
-		      onClick={ev => {
-			if (i !== openItemIdx)
-			  {
-			    ev.preventDefault ()
-			    setOpenItemIdx (i)
-			  }
-		      }}>
-		  {item.name}
-		</Link>
-		{i === openItemIdx && (
-		    item.subMenu
-		    .filter (subItem => subItem.visible ?? true)
-		    .map ((subItem, j) => 'component' in subItem ? subItem.component : (
-			<Link key={j}
-			      to={subItem.to}
-			      className="w-full min-h-[36px] flex items-center pl-12
-					 bg-yellow-50 dark:bg-red-950">
-			  {subItem.name}
-			</Link>)))}
-	      </Fragment>))}
-	  <TopNavUser user={user} sp/>
-	  <Separator/>
-	</div>
+	<AnimatePresence initial={false}>
+	  {menuOpen && (
+	      <motion.div
+		  key="spmenu"
+		  className={cn ('flex flex-col md:hidden',
+				 'bg-yellow-200 dark:bg-red-975 items-start')}
+		  variants={{ closed: { clipPath: 'inset(0 0 100% 0)',
+					height:   0 },
+			      open:   { clipPath: 'inset(0 0 0% 0)',
+					height:   'auto' } }}
+		  initial="closed"
+		  animate="open"
+		  exit="closed"
+		  transition={{ duration: .2, ease: 'easeOut' }}>
+		<Separator/>
+		{menu.map ((item, i) => (
+		    <Fragment key={i}>
+		      <Link to={i === openItemIdx ? item.to : '#'}
+			    className={cn ('w-full min-h-[40px] flex items-center pl-8',
+					   ((i === openItemIdx)
+					    && 'font-bold bg-yellow-50 dark:bg-red-950'))}
+			    onClick={ev => {
+			      if (i !== openItemIdx)
+				{
+				  ev.preventDefault ()
+				  setOpenItemIdx (i)
+				}
+			    }}>
+			{item.name}
+		      </Link>
+
+		      <AnimatePresence initial={false}>
+			{i === openItemIdx && (
+			    <motion.div
+				key={`sp-sub-${ i }`}
+				className="w-full bg-yellow-50 dark:bg-red-950"
+				variants={{ closed: { clipPath: 'inset(0 0 100% 0)',
+						      height:   0,
+						      opacity:  0 },
+					    open:   { clipPath: 'inset(0 0 0% 0)',
+						      height:   'auto',
+						      opacity:  1 } }}
+				initial="closed"
+				animate="open"
+				exit="closed"
+				transition={{ duration: .2, ease: 'easeOut' }}>
+			      {item.subMenu
+			       .filter (subItem => subItem.visible ?? true)
+			       .map ((subItem, j) => (
+				  'component' in subItem
+				  ? (
+				      <Fragment key={`sp-c-${ i }-${ j }`}>
+					{subItem.component}
+				      </Fragment>)
+				  : (
+				      <Link key={`sp-l-${ i }-${ j }`}
+					    to={subItem.to}
+					    className="w-full min-h-[36px] flex items-center pl-12">
+					{subItem.name}
+				      </Link>)))}
+			    </motion.div>)}
+		      </AnimatePresence>
+		    </Fragment>))}
+		<TopNavUser user={user} sp/>
+		<Separator/>
+	      </motion.div>)}
+	</AnimatePresence>
      </>)
 }) satisfies FC<Props>
@@ -0,0 +1,79 @@
+import { Link, useLocation } from 'react-router-dom'
+
+import type { FC } from 'react'
+
+type Props = { page:          number
+	       totalPages:    number
+	       siblingCount?: number }
+
+
+const range = (start: number, end: number): number[] =>
+    [...Array (end - start + 1).keys ()].map (i => start + i)
+
+
+const getPages = (
+    page:         number,
+    total:        number,
+    siblingCount: number,
+): (number | '…')[] => {
+  if (total <= 1)
+    return [1]
+
+  const first = 1
+  const last = total
+
+  const left = Math.max (page - siblingCount, first)
+  const right = Math.min (page + siblingCount, last)
+
+  const pages: (number | '…')[] = []
+
+  pages.push (first)
+
+  if (left > first + 1)
+    pages.push ('…')
+
+  const midStart = Math.max (left, first + 1)
+  const midEnd = Math.min (right, last - 1)
+  pages.push (...range (midStart, midEnd))
+
+  if (right < last - 1)
+    pages.push ('…')
+
+  if (last !== first)
+    pages.push (last)
+
+  return pages.filter ((v, i, arr) => i === 0 || v !== arr[i - 1])
+}
+
+
+export default (({ page, totalPages, siblingCount = 4 }) => {
+  const location = useLocation ()
+
+  const buildTo = (p: number) => {
+    const qs = new URLSearchParams (location.search)
+    qs.set ('page', String (p))
+    return `${ location.pathname }?${ qs.toString () }`
+  }
+
+  const pages = getPages (page, totalPages, siblingCount)
+
+  return (
+      <nav className="mt-4 flex justify-center" aria-label="Pagination">
+	<div className="flex items-center gap-2">
+	  {(page > 1)
+	   ? <Link to={buildTo (page - 1)} aria-label="前のページ">&lt;</Link>
+	   : <span aria-hidden>&lt;</span>}
+
+	  {pages.map ((p, idx) => (
+	      (p === '…')
+	      ? <span key={`dots-${ idx }`}>…</span>
+	      : ((p === page)
+		 ? <span key={p} className="font-bold" aria-current="page">{p}</span>
+		 : <Link key={p} to={buildTo (p)}>{p}</Link>)))}
+
+	  {(page < totalPages)
+	   ? <Link to={buildTo (page + 1)} aria-label="次のページ">&gt;</Link>
+	   : <span aria-hidden>&gt;</span>}
+	</div>
+      </nav>)
+}) satisfies FC<Props>
@@ -0,0 +1,90 @@
+import axios from 'axios'
+import toCamel from 'camelcase-keys'
+import { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { Link, useLocation } from 'react-router-dom'
+
+import TagLink from '@/components/TagLink'
+import PageTitle from '@/components/common/PageTitle'
+import Pagination from '@/components/common/Pagination'
+import MainArea from '@/components/layout/MainArea'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+
+import type { FC } from 'react'
+
+import type { PostTagChange } from '@/types'
+
+
+export default (() => {
+  const [changes, setChanges] = useState<PostTagChange[]> ([])
+  const [totalPages, setTotalPages] = useState<number> (0)
+
+  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)
+
+  useEffect (() => {
+    void (async () => {
+      const res = await axios.get (`${ API_BASE_URL }/posts/changes`,
+				   { params: { ...(id && { id }),
+					       ...(page && { page }),
+					       ...(limit && { limit }) } })
+      const data = toCamel (res.data as any, { deep: true }) as {
+	  changes:  PostTagChange[]
+	  count:    number }
+      setChanges (data.changes)
+      setTotalPages (Math.trunc ((data.count - 1) / limit))
+    }) ()
+  }, [location.search])
+
+  return (
+      <MainArea>
+	<Helmet>
+	  <title>{`耕作履歴 | ${ SITE_TITLE }`}</title>
+	</Helmet>
+
+	<PageTitle>
+	  耕作履歴
+	  {Boolean (id) && <>: 投稿 {<Link to={`/posts/${ id }`}>#{id}</Link>}</>}
+	</PageTitle>
+
+	<table className="table-auto w-full border-collapse">
+	  <thead>
+	    <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 => (
+		<tr key={`${ change.timestamp }-${ change.post.id }-${ change.tag.id }`}>
+		  <td>
+		    <Link to={`/posts/${ change.post.id }`}>
+		      <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"/>
+		    </Link>
+		  </td>
+		  <td>
+		    <TagLink tag={change.tag} withWiki={false} withCount={false}/>
+		    {`を${ change.changeType === 'add' ? '追加' : '削除' }`}
+		  </td>
+		  <td>
+		    {change.user ? (
+			<Link to={`/users/${ change.user.id }`}>
+			  {change.user.name}
+			</Link>) : 'bot 操作'}
+		    <br/>
+		    {change.timestamp}
+		  </td>
+		</tr>))}
+	  </tbody>
+	</table>
+
+	<Pagination page={page} totalPages={totalPages}/>
+      </MainArea>)
+}) satisfies FC
@@ -1,7 +1,7 @@
-import React from 'react'
-
 import { CATEGORIES, USER_ROLES, ViewFlagBehavior } from '@/consts'

+import type { ReactNode } from 'react'
+
 export type Category = typeof CATEGORIES[number]

 export type Menu = MenuItem[]
@@ -29,19 +29,26 @@ export type Post = {
    originalCreatedFrom:    string | null
    originalCreatedBefore:  string | null }

-export type SubMenuItem = {
-    component:  React.ReactNode
-    visible:    boolean
-    } | {
-    name:     string
-    to:       string
-    visible?: boolean }
+export type PostTagChange = {
+    post:       Post
+    tag:        Tag
+    user?:      User
+    changeType: 'add' | 'remove'
+    timestamp:  string }
+
+export type SubMenuItem =
+    | { component:  ReactNode
+	visible:    boolean }
+    | { name:     string
+	to:       string
+	visible?: boolean }

 export type Tag = {
    id:         number
    name:       string
    category:   Category
-    postCount:  number }
+    postCount:  number
+    children?:  Tag[] }

 export type User = {
    id:               number