#306

AGENTS.md

@@ -271,7 +271,12 @@ const value =
 - In TypeScript and TSX, convert every leading run of 8 spaces to a tab
   character.
 - A leading tab is exactly equivalent to 8 leading spaces.
-- Never place a closing parenthesis at the beginning of a line.
+- In TypeScript and TSX function declarations, including `const` arrow
+  function declarations, when the parameter list spans multiple lines, always
+  put the closing parenthesis at the beginning of its own line before the return
+  type or `=>`.
+- In TypeScript and TSX, never place a closing parenthesis at the beginning of
+  a line except for a multi-line function declaration parameter list.
 - Never place a closing square bracket at the beginning of a line.
 - For object literals and other associative-array-style braces, do not place
   the closing brace at the beginning of a line. Function, lambda, callback, and

frontend/src/App.tsx

@@ -75,7 +75,6 @@ const RouteTransitionWrapper = ({ user, setUser }: {
 	    <Route path="suppressions" element={<MaterialSyncSuppressionsPage/>}/>
 	    <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}/>}/>

frontend/src/components/MaterialSidebar.tsx

@@ -1,23 +1,36 @@
-import { Fragment, useEffect, useRef, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
+import { useEffect, useRef, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 
-import PrefetchLink from '@/components/PrefetchLink'
-import TagLink from '@/components/TagLink'
 import SidebarComponent from '@/components/layout/SidebarComponent'
-import { materialsKeys } from '@/lib/queryKeys'
+import TagLink from '@/components/TagLink'
 import { fetchMaterialTagTree, parseMaterialFilter } from '@/lib/materials'
+import { materialsKeys } from '@/lib/queryKeys'
+import { cn } from '@/lib/utils'
 
-import type { Dispatch, FC, ReactNode, SetStateAction } from 'react'
+import type { CSSProperties, Dispatch, FC, ReactNode, SetStateAction } from 'react'
 
 import type { MaterialFilter, MaterialSidebarTag, Tag } from '@/types'
 
-const FILTERS: MaterialFilter[] = ['present', 'missing', 'any']
+const FILTERS: MaterialFilter[] = ['missing', 'present', 'any']
+const FILTER_LABELS: Record<MaterialFilter, string> = { present: '有', missing: '無', any: '全' }
 
-const FILTER_LABELS: Record<MaterialFilter, string> = {
-    present: '素材あり',
-    missing: '素材なし',
-    any:     'すべて'}
+
+const px = (value: string): number => {
+  const parsed = Number.parseFloat (value)
+  return Number.isFinite (parsed) ? parsed : 0
+}
+
+
+const verticalChrome = (el: HTMLElement): number => {
+  const style = window.getComputedStyle (el)
+
+  return (
+      px (style.paddingTop)
+      + px (style.paddingBottom)
+      + px (style.borderTopWidth)
+      + px (style.borderBottomWidth))
+}
 
 
 const setChildrenById = (
@@ -37,24 +50,12 @@ const setChildrenById = (
 
 const materialPath = (
     tagId: number,
-    materialFilter: MaterialFilter): string =>
+    materialFilter: MaterialFilter,
+): string =>
     `/materials?tag_id=${ tagId }&include_descendants=1&group_by=parent_tag`
     + `&material_filter=${ materialFilter }`
 
 
-const clearTagSelectionPath = (
-    locationSearch: string,
-    materialFilter: MaterialFilter): string => {
-    const qs = new URLSearchParams (locationSearch)
-    qs.delete ('tag_id')
-    qs.delete ('include_descendants')
-    qs.delete ('group_by')
-    qs.delete ('page')
-    qs.set ('material_filter', materialFilter)
-    return `/materials?${ qs.toString () }`
-}
-
-
 const sidebarTagToTag = (tag: MaterialSidebarTag): Tag => ({
     id:             tag.id,
     name:           tag.name,
@@ -72,39 +73,42 @@ const sidebarTagToTag = (tag: MaterialSidebarTag): Tag => ({
 
 
 const tagSelectionShellClass = (selected: boolean): string =>
-    selected
-    ? 'rounded-md border border-sky-500 bg-sky-50 px-2 py-1 text-sky-700 '
-      + 'dark:border-sky-400 dark:bg-sky-950 dark:text-sky-100'
-    : 'px-2 py-1'
+    cn (selected
+	? ['rounded-md border border-sky-500 bg-sky-50 px-2 py-1 text-sky-700',
+	   'dark:border-sky-400 dark:bg-sky-950 dark:text-sky-100']
+	: 'px-2 py-1')
 
 
 const updateMaterialFilterQuery = (
     pathname: string,
     locationSearch: string,
     navigate: ReturnType<typeof useNavigate>,
-    materialFilter: MaterialFilter) => {
-    const qs = new URLSearchParams (locationSearch)
-    qs.set ('material_filter', materialFilter)
-    navigate (`${ pathname }${ qs.toString () ? `?${ qs.toString () }` : '' }`)
+    materialFilter: MaterialFilter,
+) => {
+  const qs = new URLSearchParams (locationSearch)
+  qs.set ('material_filter', materialFilter)
+  navigate (`${ pathname }${ qs.toString () ? `?${ qs.toString () }` : '' }`)
 }
 
 
-const MaterialFilterButtons: FC<{
-    materialFilter: MaterialFilter
-    onChange:       (materialFilter: MaterialFilter) => void
-}> = ({ materialFilter, onChange }) => (
-    <div className="flex flex-wrap gap-2">
+const MaterialFilterButtons: FC<{ materialFilter: MaterialFilter
+				  onChange:       (materialFilter: MaterialFilter) => void }> = (
+    { materialFilter, onChange },
+) => (
+    <div className="flex flex-wrap gap-2 justify-end md:justify-start flex-center">
+      <label className="my-auto text-sm font-bold">素材：</label>
       {FILTERS.map (value => (
-      <button
+	  <button
 	      key={value}
 	      type="button"
 	      onClick={() => onChange (value)}
-	      className={`rounded-full border px-3 py-1 text-sm ${
-		  materialFilter === value
-		  ? 'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400 '
-		    + 'dark:bg-sky-950 dark:text-sky-100'
-		  : 'border-neutral-300 bg-white text-neutral-700 dark:border-stone-700 '
-		    + 'dark:bg-stone-900 dark:text-stone-200' }`}>
+	      className={cn (
+		  'rounded-full border px-3 py-1 text-sm',
+		  (materialFilter === value
+		   ? ['border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
+		      'dark:bg-sky-950 dark:text-sky-100']
+		   : ['border-neutral-300 bg-white text-neutral-700 dark:border-stone-700',
+		      'dark:bg-stone-900 dark:text-stone-200']))}>
 	    {FILTER_LABELS[value]}
 	  </button>))}
     </div>)
@@ -132,10 +136,10 @@ const MaterialTreeNode: FC<{
   }, [data, onChildren, open, tag.children.length, tag.id])
 
   return (
-      <Fragment>
+      <>
 	<li>
-	  <div className="flex">
-	    <div className="flex-none w-4">
+	  <div className="flex flex-center">
+	    <div className="flex-none w-4 my-auto">
 	      {tag.hasChildren && (
 		  <button
 		      type="button"
@@ -144,8 +148,9 @@ const MaterialTreeNode: FC<{
 		    {open ? <>&minus;</> : '+'}
 		  </button>)}
 	    </div>
-	    <div className="flex-1 truncate">
-	      <div className={tagSelectionShellClass (selectedTagId === tag.id)}>
+	    <div className="min-w-0 flex-1 my-auto">
+	      <div className={cn (tagSelectionShellClass (selectedTagId === tag.id),
+				  'min-w-0 truncate')}>
 		<TagLink
 		    tag={sidebarTagToTag (tag)}
 		    nestLevel={nestLevel}
@@ -160,7 +165,7 @@ const MaterialTreeNode: FC<{
 	{open && tag.children.length > 0 && (
 	    <ul>
 	      {tag.children.map (child => (
-		      <MaterialTreeNode
+		  <MaterialTreeNode
 		      key={child.id}
 		      tag={child}
 		      nestLevel={nestLevel + 1}
@@ -170,21 +175,39 @@ const MaterialTreeNode: FC<{
 		      setOpenTags={setOpenTags}
 		      onChildren={onChildren}/>))}
 	    </ul>)}
-      </Fragment>)
+      </>)
 }
 
 
-const MobileMaterialTreeNode: FC<{
-    depth?:          number
-    materialFilter: MaterialFilter
-    selectedTagId:  number | null
-    onChildren:     (tagId: number, children: MaterialSidebarTag[]) => void
-    openTags:       Record<number, boolean>
-    setOpenTags:    Dispatch<SetStateAction<Record<number, boolean>>>
-    tag:            MaterialSidebarTag
-}> = ({ depth = 0, materialFilter, onChildren, openTags, selectedTagId,
-	 setOpenTags, tag }) => {
+const MobileMaterialTreeNode: FC<{ depth?: number
+				   availableInlineSizePx?: number | null
+				   materialFilter: MaterialFilter
+				   selectedTagId: number | null
+				   onChildren: (tagId: number, children: MaterialSidebarTag[]) =>
+						   void
+				   openTags: Record<number, boolean>
+				   setOpenTags: Dispatch<SetStateAction<Record<number, boolean>>>
+				   tag: MaterialSidebarTag }> = (
+    {
+      depth = 0,
+      availableInlineSizePx = null,
+      materialFilter,
+      onChildren,
+      openTags,
+      selectedTagId,
+      setOpenTags,
+      tag,
+    },
+) => {
   const open = Boolean (openTags[tag.id])
+  const tagColumnRef = useRef<HTMLDivElement | null> (null)
+  const chipRef = useRef<HTMLDivElement | null> (null)
+  const buttonRef = useRef<HTMLButtonElement | null> (null)
+  const expansionSlotRef = useRef<HTMLDivElement | null> (null)
+  const expansionBorderRef = useRef<HTMLDivElement | null> (null)
+  const [tagChipInlineSizePx, setTagChipInlineSizePx] = useState<number | null> (null)
+  const [tagLinkInlineSizePx, setTagLinkInlineSizePx] = useState<number | null> (null)
+  const [childAvailableInlineSizePx, setChildAvailableInlineSizePx] = useState<number | null> (null)
   const { data } = useQuery ({
       queryKey: materialsKeys.tree ({ parentId: tag.id, materialFilter }),
       queryFn:  () => fetchMaterialTagTree ({ parentId: tag.id, materialFilter }),
@@ -195,50 +218,155 @@ const MobileMaterialTreeNode: FC<{
       onChildren (tag.id, data)
   }, [data, onChildren, open, tag.children.length, tag.id])
 
+  useEffect (() => {
+    const tagColumn = tagColumnRef.current
+    const chip = chipRef.current
+    if (!(tagColumn) || !(chip))
+      return
+
+    const updateTagInlineSize = () => {
+      const buttonHeight = buttonRef.current?.offsetHeight ?? 0
+      const gap = tag.hasChildren ? px (window.getComputedStyle (tagColumn).rowGap) : 0
+      const columnHeight =
+	  availableInlineSizePx == null
+	  ? tagColumn.clientHeight
+	  : Math.min (tagColumn.clientHeight, availableInlineSizePx)
+      const nextChipInlineSize = Math.max (24, columnHeight - buttonHeight - gap)
+      const nextLinkInlineSize = Math.max (
+	  16,
+	  nextChipInlineSize - verticalChrome (chip),
+      )
+
+      setTagChipInlineSizePx (prev => prev === nextChipInlineSize ? prev : nextChipInlineSize)
+      setTagLinkInlineSizePx (prev => prev === nextLinkInlineSize ? prev : nextLinkInlineSize)
+    }
+
+    updateTagInlineSize ()
+
+    const resizeObserver = new ResizeObserver (() => {
+      updateTagInlineSize ()
+    })
+
+    resizeObserver.observe (tagColumn)
+    resizeObserver.observe (chip)
+
+    if (buttonRef.current)
+      resizeObserver.observe (buttonRef.current)
+
+    return () => {
+      resizeObserver.disconnect ()
+    }
+  }, [availableInlineSizePx, open, tag.hasChildren, tag.children.length])
+
+  useEffect (() => {
+    const expansionSlot = expansionSlotRef.current
+    const expansionBorder = expansionBorderRef.current
+    if (!(expansionSlot) || !(expansionBorder))
+      return
+
+    const updateChildInlineSize = () => {
+      const base =
+	  availableInlineSizePx == null
+	  ? expansionSlot.clientHeight
+	  : availableInlineSizePx
+      const chrome = verticalChrome (expansionSlot) + verticalChrome (expansionBorder)
+      const nextInlineSize = Math.max (24, base - chrome)
+      setChildAvailableInlineSizePx (prev => prev === nextInlineSize ? prev : nextInlineSize)
+    }
+
+    updateChildInlineSize ()
+
+    const resizeObserver = new ResizeObserver (() => {
+      updateChildInlineSize ()
+    })
+
+    resizeObserver.observe (expansionSlot)
+    resizeObserver.observe (expansionBorder)
+
+    return () => {
+      resizeObserver.disconnect ()
+    }
+  }, [availableInlineSizePx, open, tag.children.length])
+
   return (
-      <div className="flex flex-row-reverse items-start gap-2">
-      <div className="flex flex-col items-center gap-1">
+      <div className="flex h-full min-h-0 max-h-full flex-row-reverse items-start gap-2
+		      overflow-hidden">
+	<div
+	    ref={tagColumnRef}
+	    className="flex h-full min-h-0 max-h-full flex-col items-center gap-1
+		       overflow-hidden">
 	  <div
-	      className={`${ tagSelectionShellClass (selectedTagId === tag.id) } rounded-xl
-			 border px-3 py-2 text-sm shadow-sm`}
-	      style={{ writingMode: 'vertical-rl' }}>
+	      ref={chipRef}
+	      className={cn (
+		  tagSelectionShellClass (selectedTagId === tag.id),
+		  'box-border rounded-xl border px-3 py-2 text-sm shadow-sm',
+		  'min-h-0 overflow-hidden [max-inline-size:var(--tag-chip-inline-size)]',
+		  '[max-height:var(--tag-chip-inline-size)]',
+	      )}
+	      style={{
+		writingMode: 'vertical-rl',
+		'--tag-chip-inline-size': (
+		    tagChipInlineSizePx == null
+		    ? undefined
+		    : `${ tagChipInlineSizePx }px`),
+		'--tag-link-inline-size': (
+		    tagLinkInlineSizePx == null
+		    ? undefined
+		    : `${ tagLinkInlineSizePx }px`),
+	      } as CSSProperties}>
 	    <TagLink
 		tag={sidebarTagToTag (tag)}
 		title={tag.name}
 		withCount={false}
 		withWiki={false}
-		to={materialPath (tag.id, materialFilter)}/>
+		to={materialPath (tag.id, materialFilter)}
+		className="block overflow-hidden text-ellipsis whitespace-nowrap
+			   [max-inline-size:var(--tag-link-inline-size)]
+			   [max-height:var(--tag-link-inline-size)]"/>
 	  </div>
 	  {tag.hasChildren && (
 	      <button
+		  ref={buttonRef}
 		  type="button"
 		  onClick={() => setOpenTags (prev => ({ ...prev, [tag.id]: !prev[tag.id] }))}
-		  className="rounded-full border border-stone-300 bg-white px-2 py-0.5
-			     text-sm text-stone-700 dark:border-stone-700
+		  className="flex-none rounded-full border border-stone-300 bg-white
+			     px-2 py-0.5 text-sm text-stone-700 dark:border-stone-700
 			     dark:bg-stone-900 dark:text-stone-100">
 		{open ? <>&minus;</> : '+'}
 	      </button>)}
 	</div>
 	{open && tag.children.length > 0 && (
 	    <div
-		className="relative flex flex-row-reverse items-start gap-2 rounded-2xl border
-			   border-stone-200 bg-stone-100/70 py-2 pl-2 pr-2 text-stone-900
-			   dark:border-stone-700 dark:bg-stone-900/70 dark:text-stone-100"
-		style={{ marginTop: `${ depth === 0 ? 1.25 : .75 }rem` }}>
-	      <span
-		  aria-hidden="true"
-		  className="absolute -right-3 top-4 h-px w-3 bg-stone-300 dark:bg-stone-600"/>
-	      {tag.children.map (child => (
-		  <div key={child.id} className="relative">
-	    <MobileMaterialTreeNode
-		      tag={child}
-		      depth={depth + 1}
-		      materialFilter={materialFilter}
-		      selectedTagId={selectedTagId}
-		      openTags={openTags}
-		      setOpenTags={setOpenTags}
-		      onChildren={onChildren}/>
-		  </div>))}
+		ref={expansionSlotRef}
+		className={cn (
+		    'h-full min-h-0 max-h-full overflow-hidden box-border',
+		    depth === 0 ? 'pt-5' : 'pt-3')}>
+	      <div
+		  ref={expansionBorderRef}
+		  className="relative max-h-full overflow-hidden rounded-2xl border border-stone-200
+			     bg-stone-100/70 py-2 pl-2 pr-2 text-stone-900
+			     dark:border-stone-700 dark:bg-stone-900/70 dark:text-stone-100">
+		<div className="flex h-full min-h-0 max-h-full flex-row-reverse items-start gap-2
+				overflow-hidden">
+		  <span
+		      aria-hidden="true"
+		      className="absolute -right-3 top-4 h-px w-3 bg-stone-300 dark:bg-stone-600"/>
+		  {tag.children.map (child => (
+		      <div
+			  key={child.id}
+			  className="relative h-full min-h-0 max-h-full overflow-hidden">
+			<MobileMaterialTreeNode
+			    tag={child}
+			    depth={depth + 1}
+			    availableInlineSizePx={childAvailableInlineSizePx}
+			    materialFilter={materialFilter}
+			    selectedTagId={selectedTagId}
+			    openTags={openTags}
+			    setOpenTags={setOpenTags}
+			    onChildren={onChildren}/>
+		      </div>))}
+		</div>
+	      </div>
 	    </div>)}
       </div>)
 }
@@ -248,12 +376,14 @@ const MaterialSidebar: FC = () => {
   const location = useLocation ()
   const navigate = useNavigate ()
   const qs = new URLSearchParams (location.search)
-  const materialFilter = parseMaterialFilter (qs.get ('material_filter'), 'present')
+  const materialFilter = parseMaterialFilter (qs.get ('material_filter'), 'any')
   const selectedTagId = Number (qs.get ('tag_id') ?? 0) || null
 
   const [desktopTags, setDesktopTags] = useState<MaterialSidebarTag[]> ([])
   const [openTags, setOpenTags] = useState<Record<number, boolean>> ({ })
   const mobileRailRef = useRef<HTMLDivElement | null> (null)
+  const [mobileAvailableInlineSizePx, setMobileAvailableInlineSizePx] =
+      useState<number | null> (null)
 
   const { data: rootTags = [], isLoading, isError } = useQuery ({
       queryKey: materialsKeys.tree ({ parentId: null, materialFilter }),
@@ -273,6 +403,29 @@ const MaterialSidebar: FC = () => {
     })
   }, [rootTags, materialFilter])
 
+  useEffect (() => {
+    const el = mobileRailRef.current
+    if (!(el))
+      return
+
+    const updateAvailableInlineSize = () => {
+      const nextInlineSize = Math.max (24, el.clientHeight)
+      setMobileAvailableInlineSizePx (prev => prev === nextInlineSize ? prev : nextInlineSize)
+    }
+
+    updateAvailableInlineSize ()
+
+    const resizeObserver = new ResizeObserver (() => {
+      updateAvailableInlineSize ()
+    })
+
+    resizeObserver.observe (el)
+
+    return () => {
+      resizeObserver.disconnect ()
+    }
+  }, [rootTags, materialFilter])
+
   const visibleRootTags = desktopTags.length > 0 ? desktopTags : rootTags
 
   const setChildren = (tagId: number, children: MaterialSidebarTag[]) => {
@@ -288,8 +441,6 @@ const MaterialSidebar: FC = () => {
     updateMaterialFilterQuery (location.pathname, location.search, navigate, value)
   }
 
-  const clearTagSelection = clearTagSelectionPath (location.search, materialFilter)
-
   const renderDesktopTree = (tags: MaterialSidebarTag[]): ReactNode => (
       tags.map (tag => (
 	  <MaterialTreeNode
@@ -304,24 +455,21 @@ const MaterialSidebar: FC = () => {
   return (
       <>
 	<div className="border-b bg-stone-50 p-3 dark:border-stone-700 dark:bg-stone-950
-			dark:text-stone-100 md:hidden">
-	  <div className="mb-3">
-	    <PrefetchLink
-		to={clearTagSelection}
-		className="text-sm text-sky-700 underline underline-offset-2
-			   dark:text-sky-300">
-	      {selectedTagId != null ? '選択解除' : '全素材'}
-	    </PrefetchLink>
-	  </div>
+			dark:text-stone-100 md:hidden flex h-[25dvh] min-h-0 flex-col
+			overflow-hidden">
 	  <MaterialFilterButtons
 	      materialFilter={materialFilter}
 	      onChange={handleFilterChange}/>
-	  <div ref={mobileRailRef} className="mt-3 overflow-x-auto">
-	    <div className="flex min-w-max flex-row-reverse gap-3 pb-1">
+	  <div
+	      ref={mobileRailRef}
+	      className="mt-3 min-h-0 flex-1 overflow-x-auto overflow-y-hidden">
+	    <div className="flex min-w-max flex-row-reverse items-start gap-3 pb-1 h-full
+			    min-h-0 max-h-full">
 	      {visibleRootTags.map (tag => (
 		  <MobileMaterialTreeNode
 		      key={tag.id}
 		      tag={tag}
+		      availableInlineSizePx={mobileAvailableInlineSizePx}
 		      materialFilter={materialFilter}
 		      selectedTagId={selectedTagId}
 		      openTags={openTags}
@@ -334,12 +482,6 @@ const MaterialSidebar: FC = () => {
 	<div className="hidden md:block">
 	  <SidebarComponent>
 	    <div className="space-y-4">
-	      <PrefetchLink
-		  to={clearTagSelection}
-		  className="text-sm text-sky-700 underline underline-offset-2
-			     dark:text-sky-300">
-		{selectedTagId != null ? '選択解除' : '全素材'}
-	      </PrefetchLink>
 	      <MaterialFilterButtons
 		  materialFilter={materialFilter}
 		  onChange={handleFilterChange}/>

frontend/src/components/TagLink.tsx

@@ -28,11 +28,12 @@ type Props =
 
 
 const TagLink: FC<Props> = ({ tag,
-		   nestLevel = 0,
-		   linkFlg   = true,
-		   withWiki  = true,
-		   withCount = true,
-		   ...props }) => {
+			      nestLevel = 0,
+			      linkFlg   = true,
+			      withWiki  = true,
+			      withCount = true,
+			      className,
+			      ...props }) => {
   const spanClass = cn (
       `text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE }`,
       `dark:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE }`)
@@ -105,7 +106,7 @@ const TagLink: FC<Props> = ({ tag,
 	    </span>)}
 	{tag.matchedAlias != null && (
 	    <>
-	      <span className={spanClass} {...props}>
+	      <span className={cn (spanClass, className)} {...props}>
 		{tag.matchedAlias}
 	      </span>
 	      <> → </>
@@ -114,12 +115,12 @@ const TagLink: FC<Props> = ({ tag,
 	 ? (
 	    <PrefetchLink
 		to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
-		className={linkClass}
+		className={cn (linkClass, className)}
 		{...props}>
 	      {tag.name}
 	    </PrefetchLink>)
 	 : (
-	    <span className={spanClass}
+	    <span className={cn (spanClass, className)}
 		  {...props}>
 	      {tag.name}
 	    </span>)}

frontend/src/components/TopNav.tsx

@@ -7,30 +7,36 @@ import Separator from '@/components/MenuSeparator'
 import PrefetchLink from '@/components/PrefetchLink'
 import TopNavUser from '@/components/TopNavUser'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
-import { tagsKeys, wikiKeys } from '@/lib/queryKeys'
+import { materialsKeys, tagsKeys, wikiKeys } from '@/lib/queryKeys'
 import { fetchTag, fetchTagByName } from '@/lib/tags'
+import { fetchMaterial } from '@/lib/materials'
 import { cn } from '@/lib/utils'
 import { fetchWikiPage } from '@/lib/wiki'
 
 import type { FC, MouseEvent } from 'react'
 
-import type { Menu, MenuVisibleItem, Tag, User } from '@/types'
+import type { Material, Menu, MenuVisibleItem, Tag, User } from '@/types'
 
 type Props = { user: User | null }
 
 
-export const menuOutline = ({ tag, wikiId, user, pathName }: { 
-    tag?: Tag | null
-    wikiId: number | null
-    user: User | null,
-    pathName: string }): Menu => {
-  const postCount = tag?.postCount ?? 0
+export const menuOutline = (
+    { tag, material, wikiId, user, pathName }: {
+	tag?: Tag | null
+	material?: Material | null
+	wikiId: number | null
+	user: User | null,
+	pathName: string },
+): Menu => {
+  const postCount = tag?.postCount ?? material?.tag?.postCount ?? 0
 
   const wikiPageFlg = Boolean (/^\/wiki\/(?!new|changes)[^/]+/.test (pathName) && wikiId)
   const wikiTitle = pathName.split ('/')[2] ?? ''
 
   const tagFlg = /^\/tags\/\d+/.test (pathName)
 
+  const materialFlg = /^\/materials\/\d+/.test (pathName)
+
   return [
       { name: '広場', to: '/posts', subMenu: [
 	  { name: '一覧', to: '/posts' },
@@ -51,10 +57,15 @@ export const menuOutline = ({ tag, wikiId, user, pathName }: {
 	    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: '/materials/changes' },
+	  { name: 'ヘルプ', to: '/wiki/ヘルプ:素材管理' },
+	  { component: <Separator/>, visible: materialFlg },
+	  { name: `広場 (${ postCount || 0 })`,
+	    to: `/posts?tags=${ encodeURIComponent (material?.tag?.name ?? '') }`,
+	    visible: materialFlg },
+	  { name: '履歴', to: `/materials/changes?material_id=${ material?.id }`,
+	    visible: materialFlg }] },
       { name: 'Wiki', to: '/wiki/ヘルプ:ホーム', base: '/wiki', subMenu: [
 	  { name: '検索', to: '/wiki' },
 	  { name: '新規', to: '/wiki/new' },
@@ -119,15 +130,23 @@ const TopNav: FC<Props> = ({ user }) => {
       queryFn: () => fetchWikiPage (wikiIdStr, { }) })
 
   const tagFlg = /^\/tags\/\d+/.test (location.pathname)
-  const effectiveTitle = (tagFlg ? location.pathname.split ('/')[2] : wikiPage?.title) ?? ''
+  const materialFlg = /^\/materials\/\d+/.test (location.pathname)
+  const effectiveTitle = (((tagFlg || materialFlg)
+			   ? location.pathname.split ('/')[2]
+			   : wikiPage?.title)
+			  ?? '')
 
   const { data: tag } = useQuery ({
       enabled: Boolean (effectiveTitle),
       queryKey: tagsKeys.show (effectiveTitle),
       queryFn: () => (tagFlg ? fetchTag : fetchTagByName) (effectiveTitle) })
 
+  const { data: material } = useQuery ({
+      enabled: Boolean (effectiveTitle),
+      queryKey: materialsKeys.show (effectiveTitle),
+      queryFn: () => fetchMaterial (effectiveTitle) })
 
-  const menu = menuOutline ({ tag, wikiId, user, pathName: location.pathname })
+  const menu = menuOutline ({ tag, material, wikiId, user, pathName: location.pathname })
   const visibleMenu = menu.filter ((item): item is MenuVisibleItem => item.visible ?? true)
   const moreMenu = menu.filter (item =>
       !(item.visible ?? true)

frontend/src/components/common/PageTitle.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
 
+import { cn } from '@/lib/utils'
+
 import type { FC } from 'react'
 
 type Props = { children: React.ReactNode }
 
 
-const PageTitle: FC<Props> = ({ children }) => (
-    <h1 className="text-2xl font-bold mb-2">
+const PageTitle: FC<Props> = ({ children, className, ...rest }) => (
+    <h1 className={cn ('text-2xl font-bold mb-2', className)} {...rest}>
       {children}
     </h1>)
 

frontend/src/lib/materials.ts

@@ -1,41 +1,31 @@
-import {
-    apiGet,
-    isApiError,
-    apiPost,
-    apiPut,
-} from '@/lib/api'
+import { apiGet, isApiError, apiPost, apiPut } from '@/lib/api'
 
-import type {
-    Material,
-    MaterialIndexResponse,
-    MaterialVersion,
-    FetchMaterialsParams,
-    MaterialFilter,
-    MaterialSyncSuppression,
-    MaterialSidebarTag,
-    MaterialTagTree,
-} from '@/types'
+import type { Material,
+	      MaterialIndexResponse,
+	      MaterialVersion,
+	      FetchMaterialsParams,
+	      MaterialFilter,
+	      MaterialSyncSuppression,
+	      MaterialSidebarTag,
+	      MaterialTagTree } from '@/types'
 
 export type FetchMaterialTreeParams = {
     parentId?:       number | null
-    materialFilter:  MaterialFilter
-}
+    materialFilter:  MaterialFilter }
 
-export type MaterialSyncSuppressionResponse = {
-    suppressions: MaterialSyncSuppression[]
-}
+export type MaterialSyncSuppressionResponse = { suppressions: MaterialSyncSuppression[] }
 
 export type MaterialChangesResponse = {
     versions: MaterialVersion[]
-    count:    number
-}
+    count:    number }
 
 const MATERIAL_FILTERS: MaterialFilter[] = ['present', 'missing', 'any']
 
 
 export const parseMaterialFilter = (
     value: unknown,
-    fallback: MaterialFilter = 'present'): MaterialFilter =>
+    fallback: MaterialFilter = 'present',
+): MaterialFilter =>
     typeof value === 'string' && MATERIAL_FILTERS.includes (value as MaterialFilter)
     ? value as MaterialFilter
     : fallback
@@ -45,7 +35,8 @@ export const fetchMaterials = async (
     { q, tagState, mediaKind, createdFrom, createdTo,
       updatedFrom, updatedTo, sort, direction, page,
       tagId, includeDescendants, groupBy,
-      limit }: FetchMaterialsParams): Promise<MaterialIndexResponse> =>
+      limit }: FetchMaterialsParams,
+): Promise<MaterialIndexResponse> =>
     await apiGet ('/materials', { params: {
 	...(q && { q }),
 	tag_state:   tagState,

frontend/src/pages/materials/MaterialDetailPage.tsx

@@ -119,12 +119,6 @@ const MaterialDetailPage: FC = () => {
 		 : materialTitle}
 	      </PageTitle>
 
-	      <PrefetchLink
-		  to={`/materials/changes?material_id=${ material.id }`}
-		  className="text-sm text-sky-700 underline underline-offset-2 dark:text-sky-300">
-		この素材の履歴
-	      </PrefetchLink>
-
 	      {(material.file && material.contentType) && (
 		  (/image\/.*/.test (material.contentType) && (
 		      <img src={material.file} alt={material.tag?.name || undefined}/>))

frontend/src/pages/materials/MaterialHistoryPage.tsx

@@ -80,14 +80,7 @@ const MaterialHistoryPage: FC = () => {
 	</Helmet>
 
 	<div className="space-y-5">
-	  <div className="flex flex-wrap items-center justify-between gap-3">
-	    <PageTitle>素材履歴</PageTitle>
-	    <PrefetchLink
-		to="/materials"
-		className="text-sm text-sky-700 underline underline-offset-2 dark:text-sky-300">
-	      素材一覧へ戻る
-	    </PrefetchLink>
-	  </div>
+	  <PageTitle>素材履歴</PageTitle>
 
 	  <form
 	      onSubmit={handleSearch}
@@ -112,20 +105,6 @@ const MaterialHistoryPage: FC = () => {
 			onChange={e => setTagInput (e.target.value)}
 			className={inputClass (invalid)}/>)}
 	      </FormField>
-
-	      <FormField label="イベント">
-		{({ invalid }) => (
-		    <select
-			value={eventTypeInput}
-			onChange={e => setEventTypeInput (e.target.value)}
-			className={inputClass (invalid)}>
-		      <option value="">すべて</option>
-		      <option value="create">create</option>
-		      <option value="update">update</option>
-		      <option value="discard">discard</option>
-		      <option value="restore">restore</option>
-		    </select>)}
-	      </FormField>
 	    </div>
 
 	    <button
@@ -150,7 +129,6 @@ const MaterialHistoryPage: FC = () => {
 		  <table className="w-full min-w-[1200px] table-fixed border-collapse">
 		    <colgroup>
 		      <col className="w-48"/>
-		      <col className="w-32"/>
 		      <col className="w-28"/>
 		      <col className="w-24"/>
 		      <col className="w-64"/>
@@ -163,7 +141,6 @@ const MaterialHistoryPage: FC = () => {
 		    <thead className="border-b-2 border-black dark:border-white">
 		      <tr>
 			<th className="p-2 text-left">日時</th>
-			<th className="p-2 text-left">event_type</th>
 			<th className="p-2 text-left">素材 ID</th>
 			<th className="p-2 text-left">版</th>
 			<th className="p-2 text-left">タグ名</th>
@@ -180,7 +157,6 @@ const MaterialHistoryPage: FC = () => {
 			      key={version.id}
 			      className="even:bg-gray-100 dark:even:bg-gray-700">
 			    <td className="p-2">{dateString (version.createdAt)}</td>
-			    <td className="p-2">{version.eventType}</td>
 			    <td className="p-2">
 			      <PrefetchLink to={`/materials/${ version.materialId }`}>
 				#{version.materialId}

frontend/src/pages/materials/MaterialListPage.tsx

@@ -17,17 +17,16 @@ import { dateString, inputClass } from '@/lib/utils'
 
 import type { FC, FormEvent } from 'react'
 
-import type {
-    FetchMaterialsParams,
-    Material,
-    MaterialFilter,
-    MaterialIndexGroup,
-    MaterialIndexGroupBy,
-    MaterialIndexDirection,
-    MaterialIndexMediaKind,
-    MaterialIndexSort,
-    MaterialIndexTagState,
-    MaterialIndexView } from '@/types'
+import type { FetchMaterialsParams,
+	      Material,
+	      MaterialFilter,
+	      MaterialIndexGroup,
+	      MaterialIndexGroupBy,
+	      MaterialIndexDirection,
+	      MaterialIndexMediaKind,
+	      MaterialIndexSort,
+	      MaterialIndexTagState,
+	      MaterialIndexView } from '@/types'
 
 const MEDIA_KIND_LABELS: Record<Material['mediaKind'], string> = {
     image:      '画像',
@@ -195,23 +194,19 @@ const GroupHeading: FC<{
     title:          string
     tagId:          number
 }> = ({ count, materialFilter, returnTo, title, tagId }) => (
-    <div className="flex flex-wrap items-center gap-2 border-b border-stone-200 pb-2
+    <div className="flex items-center gap-2 border-b border-stone-200 pb-2
 		    dark:border-stone-700">
       <PrefetchLink
 	  to={groupedTagPath (tagId, materialFilter)}
 	  className="font-medium text-sky-700 underline underline-offset-2
-		     dark:text-sky-300">
+		     dark:text-sky-300 w-full">
 	{title}
       </PrefetchLink>
-      <span className="text-sm text-stone-600 dark:text-stone-300">
-	{count} 件
-      </span>
-      <PrefetchLink
-	  to={materialNewPath (title, returnTo)}
-	  className="text-sm text-sky-700 underline underline-offset-2
-		     dark:text-sky-300">
-	このタグに素材を追加
-      </PrefetchLink>
+      <div className="text-right w-auto">
+	<span className="text-nowrap text-sm text-stone-600 dark:text-stone-300">
+	  {count} 件
+	</span>
+      </div>
     </div>)
 
 
@@ -410,12 +405,12 @@ const MaterialListPage: FC = () => {
 		  src: url(${ nikumaru }) format('opentype');
 		}`}
 	  </style>
-	  <title>{`素材一覧 | ${ SITE_TITLE }`}</title>
+	  <title>{`素材管理 | ${ SITE_TITLE }`}</title>
 	</Helmet>
 
 	<div className="space-y-5">
 	  <div className="flex flex-wrap items-center justify-between gap-3">
-	    <PageTitle>素材一覧</PageTitle>
+	    <PageTitle className="my-auto">素材管理</PageTitle>
 	    <div className="flex flex-wrap gap-2">
 	      <PrefetchLink
 		  to="/materials/new"
@@ -431,13 +426,6 @@ const MaterialListPage: FC = () => {
 			     dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
 		同期元抑止
 	      </PrefetchLink>
-	      <PrefetchLink
-		  to="/materials/changes"
-		  className="rounded-full border border-stone-300 bg-white px-4 py-2 text-sm
-			     text-stone-900 hover:bg-stone-100 dark:border-stone-700
-			     dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
-		履歴
-	      </PrefetchLink>
 	      <a
 		  href={`${ API_BASE_URL }/materials/download.zip?profile=legacy_drive`}
 		  target="_blank"
@@ -458,12 +446,6 @@ const MaterialListPage: FC = () => {
 		  {tagScope.tag.name}
 		  {tagScope.includeDescendants ? ' 配下の素材を表示中' : ' の素材を表示中'}
 		</span>
-		<PrefetchLink
-		    to={materialNewPath (tagScope.tag.name, location.pathname + location.search)}
-		    className="font-medium underline underline-offset-2
-			       text-sky-700 dark:text-sky-300">
-		  このタグに素材を追加
-		</PrefetchLink>
 		<PrefetchLink
 		    to={clearedTagSelectionPath (location.search, materialFilter)}
 		    className="font-medium underline underline-offset-2
@@ -534,21 +516,6 @@ const MaterialListPage: FC = () => {
 		    </select>)}
 	      </FormField>
 
-	      <FormField label="グルーピング">
-		{({ invalid }) => (
-		    <select
-			value={groupByInput}
-			onChange={e => setGroupByInput (
-			    e.target.value as MaterialIndexGroupBy)}
-			disabled={tagId == null}
-			className={inputClass (invalid)}>
-		      <option value="none">{GROUP_BY_LABELS.none}</option>
-		      <option value="parent_tag" disabled={tagId == null}>
-			{GROUP_BY_LABELS.parent_tag}
-		      </option>
-		    </select>)}
-	      </FormField>
-
 	      <FormField label="作成日時">
 		{() => (
 		    <div className="flex flex-wrap items-center gap-2">
@@ -591,7 +558,7 @@ const MaterialListPage: FC = () => {
 		      : [
 			  'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
 			  'dark:bg-stone-900 dark:text-stone-100'].join (' ') }`}>
-		カード
+		アイコン
 	      </button>
 	      <button
 		  type="button"
@@ -604,7 +571,7 @@ const MaterialListPage: FC = () => {
 		      : [
 			  'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
 			  'dark:bg-stone-900 dark:text-stone-100'].join (' ') }`}>
-		一覧
+		詳細
 	      </button>
 	    </div>
 
@@ -632,7 +599,18 @@ const MaterialListPage: FC = () => {
 	  {isError && (
 	      <p className="text-red-600 dark:text-red-300">素材一覧の取得に失敗しました．</p>)}
 	  {(!isLoading && !isError && materials.length === 0) && (
-	      <p>素材はありません．</p>)}
+	      <p>
+		素材はありません。
+		{['character', 'material'].includes (tagScope?.tag.category) && (
+		    <>
+		      <PrefetchLink
+			  to={materialNewPath (tagScope.tag.name, location.pathname + location.search)}
+			  className="font-medium underline underline-offset-2
+				     text-sky-700 dark:text-sky-300">
+			追加してください
+		      </PrefetchLink>。
+		    </>)}
+	      </p>)}
 	  {materials.length > 0 && (
 	      groupBy === 'parent_tag' && groups.length > 0
 	      ? renderGroupedMaterials (groups)

frontend/src/pages/materials/MaterialSearchPage.tsx

@@ -1,51 +0,0 @@
-import { useState } from 'react'
-import { Helmet } from 'react-helmet-async'
-
-import FormField from '@/components/common/FormField'
-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'
-
-
-const MaterialSearchPage: FC = () => {
-  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">
-	    {/* タグ */}
-	    <FormField label="タグ">
-	      {() => (
-		  <TagInput
-		      value={tagName}
-		      setValue={setTagName}/>)}
-	    </FormField>
-
-	    {/* 親タグ */}
-	    <FormField label="親タグ">
-	      {() => (
-		  <TagInput
-		      value={parentTagName}
-		      setValue={setParentTagName}/>)}
-	    </FormField>
-	  </form>
-	</div>
-      </MainArea>)
-}
-
-export default MaterialSearchPage