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

2026-07-02 01:55:35 +09:00
@@ -1,23 +1,43 @@
-import { Fragment, useEffect, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useEffect, useRef, useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'

-import TagLink from '@/components/TagLink'
 import SidebarComponent from '@/components/layout/SidebarComponent'
-import { apiGet } from '@/lib/api'
+import TagLink from '@/components/TagLink'
+import { fetchMaterialTagTree, parseMaterialFilter } from '@/lib/materials'
+import { materialsKeys } from '@/lib/queryKeys'
+import { cn } from '@/lib/utils'

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

-import type { Tag } from '@/types'
+import type { MaterialFilter, MaterialSidebarTag, Tag } from '@/types'

-type TagWithDepth = Tag & {
-    hasChildren:  boolean
-    children:     TagWithDepth[] }
+const FILTERS: MaterialFilter[] = ['missing', 'present', '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 = (
-    tags:     TagWithDepth[],
+    tags:     MaterialSidebarTag[],
    targetId: number,
-    children: TagWithDepth[],
-): TagWithDepth[] => (
+    children: MaterialSidebarTag[],
+): MaterialSidebarTag[] => (
    tags.map (tag => {
      if (tag.id === targetId)
 	return { ...tag, children }
@@ -25,75 +45,462 @@ const setChildrenById = (
      if (tag.children.length === 0)
 	return tag

-      return { ...tag,
-	       children: (setChildrenById (tag.children, targetId, children)
-			  .filter (t => t.category !== 'meme' || t.hasChildren)) }
+      return { ...tag, children: setChildrenById (tag.children, targetId, children) }
    }))


-const MaterialSidebar: FC = () => {
-  const [tags, setTags] = useState<TagWithDepth[]> ([])
-  const [openTags, setOpenTags] = useState<Record<number, boolean>> ({ })
-  const [tagFetchedFlags, setTagFetchedFlags] = useState<Record<number, boolean>> ({ })
+const materialPath = (
+    tagId: number,
+    materialFilter: MaterialFilter,
+): string =>
+    `/materials?tag_id=${ tagId }&include_descendants=1&group_by=parent_tag`
+    + `&material_filter=${ materialFilter }`

-  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>)))
+const sidebarTagToTag = (tag: MaterialSidebarTag): Tag => ({
+    id:             tag.id,
+    name:           tag.name,
+    category:       tag.category,
+    deprecatedAt:   tag.deprecated ? '' : null,
+    aliases:        [],
+    parents:        [],
+    postCount:      0,
+    createdAt:      '',
+    updatedAt:      '',
+    hasWiki:        false,
+    materialId:     null,
+    hasDeerjikists: false,
+    matchedAlias:   null })

-  return (
-      <SidebarComponent>
-	<ul>
-	  {renderTags (tags)}
-	</ul>
-      </SidebarComponent>)
+
+const tagSelectionShellClass = (selected: boolean): string =>
+    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 () }` : '' }`)
 }

-export default MaterialSidebar
+
+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
+	      key={value}
+	      type="button"
+	      onClick={() => onChange (value)}
+	      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>)
+
+
+const MaterialTreeNode: FC<{
+    materialFilter: MaterialFilter
+    selectedTagId:  number | null
+    nestLevel?:     number
+    onChildren:     (tagId: number, children: MaterialSidebarTag[]) => void
+    openTags:       Record<number, boolean>
+    setOpenTags:    Dispatch<SetStateAction<Record<number, boolean>>>
+    tag:            MaterialSidebarTag
+}> = ({ materialFilter, nestLevel = 0, onChildren, openTags, selectedTagId,
+	 setOpenTags, tag }) => {
+  const open = Boolean (openTags[tag.id])
+  const { data } = useQuery ({
+      queryKey: materialsKeys.tree ({ parentId: tag.id, materialFilter }),
+      queryFn:	() => fetchMaterialTagTree ({ parentId: tag.id, materialFilter }),
+      enabled:	open && tag.hasChildren && tag.children.length === 0})
+
+  useEffect (() => {
+    if (open && data && tag.children.length === 0)
+      onChildren (tag.id, data)
+  }, [data, onChildren, open, tag.children.length, tag.id])
+
+  return (
+      <>
+	<li>
+	  <div className="flex flex-center">
+	    <div className="flex-none w-4 my-auto">
+	      {tag.hasChildren && (
+		  <button
+		      type="button"
+		      onClick={() => setOpenTags (prev => ({ ...prev, [tag.id]: !prev[tag.id] }))}
+		      className="text-neutral-500 dark:text-stone-400">
+		    {open ? <>&minus;</> : '+'}
+		  </button>)}
+	    </div>
+	    <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}
+		    title={tag.name}
+		    withCount={false}
+		    withWiki={false}
+		    to={materialPath (tag.id, materialFilter)}/>
+	      </div>
+	    </div>
+	  </div>
+	</li>
+	{open && tag.children.length > 0 && (
+	    <ul>
+	      {tag.children.map (child => (
+		  <MaterialTreeNode
+		      key={child.id}
+		      tag={child}
+		      nestLevel={nestLevel + 1}
+		      materialFilter={materialFilter}
+		      selectedTagId={selectedTagId}
+		      openTags={openTags}
+		      setOpenTags={setOpenTags}
+		      onChildren={onChildren}/>))}
+	    </ul>)}
+      </>)
+}
+
+
+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 }),
+      enabled:  open && tag.hasChildren && tag.children.length === 0})
+
+  useEffect (() => {
+    if (open && data && tag.children.length === 0)
+      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 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
+	      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)}
+		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="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
+		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>)
+}
+
+
+const MaterialSidebar: FC = () => {
+  const location = useLocation ()
+  const navigate = useNavigate ()
+  const qs = new URLSearchParams (location.search)
+  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 }),
+      queryFn:  () => fetchMaterialTagTree ({ parentId: null, materialFilter })})
+
+  useEffect (() => {
+    setDesktopTags (rootTags)
+  }, [rootTags])
+
+  useEffect (() => {
+    const el = mobileRailRef.current
+    if (!(el))
+      return
+
+    requestAnimationFrame (() => {
+      el.scrollLeft = el.scrollWidth
+    })
+  }, [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[]) => {
+    setDesktopTags (prev => {
+      const base = prev.length > 0 ? prev : rootTags
+      return setChildrenById (base, tagId, children)
+    })
+  }
+
+  const handleFilterChange = (value: MaterialFilter) => {
+    setDesktopTags ([])
+    setOpenTags ({ })
+    updateMaterialFilterQuery (location.pathname, location.search, navigate, value)
+  }
+
+  const renderDesktopTree = (tags: MaterialSidebarTag[]): ReactNode => (
+      tags.map (tag => (
+	  <MaterialTreeNode
+	      key={tag.id}
+	      tag={tag}
+	      materialFilter={materialFilter}
+	      selectedTagId={selectedTagId}
+	      openTags={openTags}
+	      setOpenTags={setOpenTags}
+	      onChildren={setChildren}/>)))
+
+  return (
+      <>
+	<div className="border-b bg-stone-50 p-3 dark:border-stone-700 dark:bg-stone-950
+			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 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}
+		      setOpenTags={setOpenTags}
+		      onChildren={setChildren}/>))}
+	    </div>
+	  </div>
+	</div>
+
+	<div className="hidden md:block">
+	  <SidebarComponent>
+	    <div className="space-y-4">
+	      <MaterialFilterButtons
+		  materialFilter={materialFilter}
+		  onChange={handleFilterChange}/>
+	      {isLoading && (
+		  <p className="text-sm text-neutral-500 dark:text-stone-400">読込中……</p>)}
+	      {isError && (
+		  <p className="text-sm text-red-600 dark:text-red-300">
+		    タグ一覧の取得に失敗しました．
+		  </p>)}
+	      {(!isLoading && !isError) && (
+		  <ul>
+		    {renderDesktopTree (visibleRootTags)}
+		  </ul>)}
+	    </div>
+	  </SidebarComponent>
+	</div>
+      </>)
+}
+
+
+export default MaterialSidebar
@@ -107,8 +107,7 @@ export default forwardRef ((props: Props, ref: ForwardedRef<NiconicoViewerHandle
    loadCompleteTimerRef.current = setTimeout (() => {
      onError?.({
 	  eventName: 'loadCompleteTimeout',
-	  reason:    'niconico video length was not reported by embed',
-      })
+	  reason:    'niconico video length was not reported by embed'})
    }, LOAD_COMPLETE_TIMEOUT_MS)
  }, [clearLoadCompleteTimer, onError])

@@ -19,8 +19,7 @@ const PostOriginalCreatedTimeField: FC<Props> = (
      setOriginalCreatedFrom,
      originalCreatedBefore,
      setOriginalCreatedBefore,
-      errors }: Props,
-) => (
+      errors }: Props) => (
    <FormField label="オリジナルの作成日時" messages={errors}>
      {({ describedBy, invalid }) => (
 	  <>
@@ -37,8 +37,7 @@ const renderTagTree = (
    path:             string,
    suppressClickRef: MutableRefObject<boolean>,
    parentTagId?:     number,
-    sp?:              boolean,
-): ReactNode[] => {
+    sp?:              boolean): ReactNode[] => {
  const key = `${ path }-${ tag.id }`

  const self = (
@@ -130,8 +129,7 @@ const buildTagByCategory = (post: Post): TagByCategory => {

 const changeCategory = async (
    tagId:    number,
-    category: Category,
-): Promise<void> => {
+    category: Category): Promise<void> => {
  await apiPatch (`/tags/${ tagId }`, { category })
 }

@@ -294,8 +292,7 @@ const TagDetailSidebar: FC<Props> = ({ post, sp }) => {
 	      addEventListener ('click', e => {
 		e.preventDefault ()
 		e.stopPropagation ()
-		suppressClickRef.current = false
-	      }, { capture: true, once: true })
+		suppressClickRef.current = false}, { capture: true, once: true })
 	    }}
 	    onDragCancel={() => {
 	      setActiveTagId (null)
@@ -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>)}
@@ -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' },
@@ -49,12 +55,18 @@ export const menuOutline = ({ tag, wikiId, user, pathName }: {
 	    visible: tagFlg },
 	  { name: '履歴', to: `/tags/changes?id=${ tag?.id }`,
 	    visible: tagFlg && tag?.category !== 'nico' }] },
-      { name: '素材', to: '/materials', visible: false, subMenu: [
+      { name: '素材', to: '/materials', visible: true, 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/suppressions' },
+	  { name: '全体履歴', to: '/materials/changes' },
+	  { name: 'ヘルプ', to: '/wiki/ヘルプ:素材管理' },
+	  { component: <Separator/>, visible: materialFlg },
+	  { name: `広場 (${ postCount || 0 })`,
+	    to: `/posts?tags=${ encodeURIComponent (material?.tag?.name ?? '') }`,
+	    visible: materialFlg && Boolean (material?.tag) },
+	  { 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 +131,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)
@@ -1,12 +1,14 @@
 import React from 'react'

+import { cn } from '@/lib/utils'
+
 import type { FC } from 'react'

-type Props = { children: React.ReactNode }
+type Props = { children: React.ReactNode; className?: string }


-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>)

@@ -16,8 +16,7 @@ const range = (start: number, end: number): number[] =>
 const getPages = (
    page:         number,
    total:        number,
-    siblingCount: number,
-): (number | '…')[] => {
+    siblingCount: number): (number | '…')[] => {
  if (total <= 1)
    return [1]

@@ -103,8 +103,7 @@ const DialogueProvider: FC<Props> = ({ children }) => {
      choice: options => new Promise (resolve => {
 	push ({ kind: 'choice',
 		options: options as ChoiceOptions<string>,
-		resolve: resolve as (value: string | null) => void })
-      }) }), [push])
+		resolve: resolve as (value: string | null) => void })}) }), [push])

  const active = queue[0]

@@ -10,41 +10,35 @@ const buttonVariants = cva (
    'rounded-md text-sm font-medium transition-colors',
    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400',
    'disabled:pointer-events-none disabled:opacity-50',
-    '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  ].join (' '),
+    '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0'].join (' '),
  {
    variants: {
      variant: {
-        default:
-          'bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-300',
+	default:
+	  'bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-300',

-        destructive:
-          'bg-red-600 text-white hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-600',
+	destructive:
+	  'bg-red-600 text-white hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-600',

-        outline:
-          'border border-slate-300 bg-white text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800',
+	outline:
+	  'border border-slate-300 bg-white text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800',

-        secondary:
-          'bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700',
+	secondary:
+	  'bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700',

-        ghost:
-          'text-slate-900 hover:bg-slate-100 dark:text-slate-100 dark:hover:bg-slate-800',
+	ghost:
+	  'text-slate-900 hover:bg-slate-100 dark:text-slate-100 dark:hover:bg-slate-800',

-        link:
-          'text-blue-700 underline-offset-4 hover:underline dark:text-blue-300',
-      },
+	link:
+	  'text-blue-700 underline-offset-4 hover:underline dark:text-blue-300'},
      size: {
-        default: 'h-10 px-4 py-2',
-        sm:      'h-9 rounded-md px-3',
-        lg:      'h-11 rounded-md px-8',
-        icon:    'h-10 w-10',
-      },
-    },
+	default: 'h-10 px-4 py-2',
+	sm:      'h-9 rounded-md px-3',
+	lg:      'h-11 rounded-md px-8',
+	icon:    'h-10 w-10'}},
    defaultVariants: {
      variant: 'default',
-      size:    'default',
-    },
-  })
+      size:    'default'}})

 export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -57,13 +51,11 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
+	className={cn(buttonVariants({ variant, size, className }))}
+	ref={ref}
+	{...props}
+      />)
+  })
 Button.displayName = "Button"

 export { Button, buttonVariants }
@@ -22,11 +22,9 @@ const DialogOverlay = React.forwardRef<
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
+      className)}
    {...props}
-  />
-))
+  />))
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

 const DialogContent = React.forwardRef<
@@ -62,8 +60,7 @@ const DialogContent = React.forwardRef<
 	<span className="sr-only">閉ぢる</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
-  </DialogPortal>
-))
+  </DialogPortal>))
 DialogContent.displayName = DialogPrimitive.Content.displayName

 const DialogHeader = ({
@@ -73,11 +70,9 @@ const DialogHeader = ({
  <div
    className={cn(
      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
+      className)}
    {...props}
-  />
-)
+  />)
 DialogHeader.displayName = "DialogHeader"

 const DialogFooter = ({
@@ -87,11 +82,9 @@ const DialogFooter = ({
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
+      className)}
    {...props}
-  />
-)
+  />)
 DialogFooter.displayName = "DialogFooter"

 const DialogTitle = React.forwardRef<
@@ -102,11 +95,9 @@ const DialogTitle = React.forwardRef<
    ref={ref}
    className={cn(
      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
+      className)}
    {...props}
-  />
-))
+  />))
 DialogTitle.displayName = DialogPrimitive.Title.displayName

 const DialogDescription = React.forwardRef<
@@ -117,8 +108,7 @@ const DialogDescription = React.forwardRef<
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
-  />
-))
+  />))
 DialogDescription.displayName = DialogPrimitive.Description.displayName

 export {
@@ -1,22 +1,19 @@
-import * as React from "react"
+import * as React from 'react'

-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'

-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
+	type={type}
+	className={cn(
+	  'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+	  className)}
+	ref={ref}
+	{...props}
+      />)
+  })
+Input.displayName = 'Input'

 export { Input }
@@ -1,9 +1,9 @@
-"use client"
+'use client'

-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from 'react'
+import * as SwitchPrimitives from '@radix-ui/react-switch'

-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'

 const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -11,19 +11,16 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
-    )}
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      className)}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-      )}
+	'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')}
    />
-  </SwitchPrimitives.Root>
-))
+  </SwitchPrimitives.Root>))
 Switch.displayName = SwitchPrimitives.Root.displayName

 export { Switch }
@@ -1,129 +1,115 @@
-"use client"
-
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
-    )}
-    {...props}
-  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold", className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-}
+"use client"
+
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+)}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+	default: "border bg-background text-foreground",
+	destructive:
+	  "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: { variant: "default" } }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+)
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+)}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+)}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
@@ -1,31 +1,30 @@
-'use client'
-
-import { useToast } from '@/components/ui/use-toast'
-import { Toast,
-	 ToastClose,
-	 ToastDescription,
-	 ToastProvider,
-	 ToastTitle,
-	 ToastViewport } from '@/components/ui/toast'
-
-
-export const Toaster = () => {
-  const { toasts } = useToast ()
-
-  return (
-    <ToastProvider>
-      {toasts.map (({ id, title, description, action, ...props }) => (
-	  <Toast key={id}
-		 className="bg-gray-300/80 dark:bg-gray-700/80"
-		 {...props}>
-	    <div className="grid gap-1">
-	      {title && <ToastTitle>{title}</ToastTitle>}
-	      {description && <ToastDescription>{description}</ToastDescription>}
-	    </div>
-	    {action}
-	    <ToastClose />
-	  </Toast>))}
-      <ToastViewport />
-    </ToastProvider>
-  )
-}
+'use client'
+
+import { useToast } from '@/components/ui/use-toast'
+import { Toast,
+	 ToastClose,
+	 ToastDescription,
+	 ToastProvider,
+	 ToastTitle,
+	 ToastViewport } from '@/components/ui/toast'
+
+
+export const Toaster = () => {
+  const { toasts } = useToast ()
+
+  return (
+    <ToastProvider>
+      {toasts.map (({ id, title, description, action, ...props }) => (
+	  <Toast key={id}
+		 className="bg-gray-300/80 dark:bg-gray-700/80"
+		 {...props}>
+	    <div className="grid gap-1">
+	      {title && <ToastTitle>{title}</ToastTitle>}
+	      {description && <ToastDescription>{description}</ToastDescription>}
+	    </div>
+	    {action}
+	    <ToastClose />
+	  </Toast>))}
+      <ToastViewport />
+    </ToastProvider>
+)
@@ -58,8 +58,7 @@ const addToRemoveQueue = (toastId: string) => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
-      toastId: toastId,
-    })
+      toastId: toastId})
  }, TOAST_REMOVE_DELAY)

  toastTimeouts.set(toastId, timeout)
@@ -69,17 +68,14 @@ export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
+	...state,
+	toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)}

    case "UPDATE_TOAST":
      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      }
+	...state,
+	toasts: state.toasts.map((t) =>
+	  t.id === action.toast.id ? { ...t, ...action.toast } : t)}

    case "DISMISS_TOAST": {
      const { toastId } = action
@@ -87,36 +83,31 @@ export const reducer = (state: State, action: Action): State => {
      // ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
-        addToRemoveQueue(toastId)
+	addToRemoveQueue(toastId)
      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
+	state.toasts.forEach((toast) => {
+	  addToRemoveQueue(toast.id)
+	})
      }

      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t
-        ),
-      }
+	...state,
+	toasts: state.toasts.map((t) =>
+	  t.id === toastId || toastId === undefined
+	    ? {
+		...t,
+		open: false}
+	    : t)}
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        }
+	return {
+	  ...state,
+	  toasts: []}
      }
      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
+	...state,
+	toasts: state.toasts.filter((t) => t.id !== action.toastId)}
  }
 }

@@ -139,8 +130,7 @@ function toast({ ...props }: Toast) {
  const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    })
+      toast: { ...props, id }})
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

  dispatch({
@@ -150,16 +140,13 @@ function toast({ ...props }: Toast) {
      id,
      open: true,
      onOpenChange: (open) => {
-        if (!open) dismiss()
-      },
-    },
-  })
+	if (!open) dismiss()
+      }}})

  return {
    id: id,
    dismiss,
-    update,
-  }
+    update}
 }

 function useToast() {
@@ -170,7 +157,7 @@ function useToast() {
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
-        listeners.splice(index, 1)
+	listeners.splice(index, 1)
      }
    }
  }, [state])
@@ -178,8 +165,7 @@ function useToast() {
  return {
    ...state,
    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId })}
 }

 export { useToast, toast }