#428

2026-10-17 16:47:08 +09:00
@@ -1,7 +1,8 @@
 import { useQuery } from '@tanstack/react-query'
 import { useEffect, useRef, useState } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'

+import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
 import SidebarComponent from '@/components/layout/SidebarComponent'
 import TagLink from '@/components/TagLink'
 import { fetchMaterialTagTree, parseMaterialFilter } from '@/lib/materials'
@@ -83,7 +84,7 @@ const tagSelectionShellClass = (selected: boolean): string =>
 const updateMaterialFilterQuery = (
    pathname: string,
    locationSearch: string,
-    navigate: ReturnType<typeof useNavigate>,
+    navigate: ReturnType<typeof useLocaleNavigate>,
    materialFilter: MaterialFilter,
 ) => {
  const qs = new URLSearchParams (locationSearch)
@@ -125,10 +126,11 @@ const MaterialTreeNode: FC<{
    tag:            MaterialSidebarTag
 }> = ({ materialFilter, nestLevel = 0, onChildren, openTags, selectedTagId,
 	 setOpenTags, tag }) => {
+  const locale = useLocale ()
  const open = Boolean (openTags[tag.id])
  const { data } = useQuery ({
-      queryKey: materialsKeys.tree ({ parentId: tag.id, materialFilter }),
-      queryFn:	() => fetchMaterialTagTree ({ parentId: tag.id, materialFilter }),
+      queryKey: materialsKeys.tree ({ parentId: tag.id, materialFilter }, locale),
+      queryFn:	() => fetchMaterialTagTree ({ parentId: tag.id, materialFilter }, locale),
      enabled:	open && tag.hasChildren && tag.children.length === 0})

  useEffect (() => {
@@ -200,6 +202,7 @@ const MobileMaterialTreeNode: FC<{ depth?: number
      tag,
    },
 ) => {
+  const locale = useLocale ()
  const open = Boolean (openTags[tag.id])
  const tagColumnRef = useRef<HTMLDivElement | null> (null)
  const chipRef = useRef<HTMLDivElement | null> (null)
@@ -210,8 +213,8 @@ const MobileMaterialTreeNode: FC<{ depth?: number
  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 }),
+      queryKey: materialsKeys.tree ({ parentId: tag.id, materialFilter }, locale),
+      queryFn:  () => fetchMaterialTagTree ({ parentId: tag.id, materialFilter }, locale),
      enabled:  open && tag.hasChildren && tag.children.length === 0})

  useEffect (() => {
@@ -382,8 +385,9 @@ const MobileMaterialTreeNode: FC<{ depth?: number


 const MaterialSidebar: FC = () => {
+  const locale = useLocale ()
  const location = useLocation ()
-  const navigate = useNavigate ()
+  const navigate = useLocaleNavigate ()
  const qs = new URLSearchParams (location.search)
  const materialFilter = parseMaterialFilter (qs.get ('material_filter'), 'any')
  const selectedTagId = Number (qs.get ('tag_id') ?? 0) || null
@@ -395,8 +399,8 @@ const MaterialSidebar: FC = () => {
      useState<number | null> (null)

  const { data: rootTags = [], isLoading, isError } = useQuery ({
-      queryKey: materialsKeys.tree ({ parentId: null, materialFilter }),
-      queryFn:  () => fetchMaterialTagTree ({ parentId: null, materialFilter })})
+      queryKey: materialsKeys.tree ({ parentId: null, materialFilter }, locale),
+      queryFn:  () => fetchMaterialTagTree ({ parentId: null, materialFilter }, locale)})

  useEffect (() => {
    setDesktopTags (rootTags)
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'

+import { useLocale } from '@/lib/useLocale'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
 import FieldError from '@/components/common/FieldError'
 import PostDurationField from '@/components/posts/PostDurationField'
@@ -51,6 +52,7 @@ type Props = { post:    Post


 const PostEditForm: FC<Props> = ({ post, onSave }) => {
+  const locale = useLocale ()
  const [disabled, setDisabled] = useState (false)
  const [duration, setDuration] = useState<string> (videoMsToDurationValue (post.videoMs))
  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
@@ -75,7 +77,7 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {

    try
    {
-      const data = await updatePost (...args)
+      const data = await updatePost (...args, undefined, locale)
      onSave ({ ...post,
 		versionNo:              data.versionNo,
 		title:                  data.title,
@@ -2,6 +2,7 @@

 import { useRef, useState } from 'react'

+import { useLocale } from '@/lib/useLocale'
 import TagSearchBox from '@/components/TagSearchBox'
 import FormField from '@/components/common/FormField'
 import TextArea from '@/components/common/TextArea'
@@ -38,6 +39,7 @@ type Props = Omit<ComponentPropsWithoutRef<'textarea'>, 'value' | 'onChange' | '


 const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
+  const locale = useLocale ()
  const ref = useRef<HTMLTextAreaElement> (null)

  const [bounds, setBounds] = useState<{ start: number; end: number }> ({ start: 0, end: 0 })
@@ -68,7 +70,7 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {

    setBounds ({ start, end })

-    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: {
+    const data = await apiGet<Tag[]> ('/tags/autocomplete', { locale, params: {
 	q: token,
 	nico: '0' } })
    const nextSuggestions = data.filter (t => t.postCount > 0)
@@ -1,8 +1,10 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { forwardRef, useMemo } from 'react'
 import { flushSync } from 'react-dom'
-import { createPath, useNavigate } from 'react-router-dom'
+import { createPath } from 'react-router-dom'

+import { localiseTo } from '@/lib/locales'
+import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
 import { useOverlayStore } from '@/components/RouteBlockerOverlay'
 import { prefetchForURL } from '@/lib/prefetchers'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
@@ -32,13 +34,17 @@ export default forwardRef<HTMLAnchorElement, Props> (({
  if ('onClick' in rest)
    delete rest['onClick']

-  const navigate = useNavigate ()
+  const navigate = useLocaleNavigate ()
+  const locale = useLocale ()
  const qc = useQueryClient ()
  const behaviourSettings = useClientBehaviourSettings ()
  const linkPreloadMode = behaviourSettings.linkPreload ?? 'intent'
  const path = useMemo (
-      () => typeof to === 'string' ? to : createPath (to),
-      [to],
+      () => {
+	const localised = localiseTo (to, locale)
+	return typeof localised === 'string' ? localised : createPath (localised)
+      },
+      [to, locale],
  )
  const url = useMemo (() => {
    return (new URL (path, window.location.origin)).toString ()
@@ -98,7 +104,7 @@ export default forwardRef<HTMLAnchorElement, Props> (({
      if (!(ok) && cancelOnError)
 	return

-      navigate (to, { replace, ...(state && { state }) })
+      navigate (path, { replace, ...(state && { state }) })
    }
    catch (ex)
    {
@@ -12,6 +12,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
 import { useEffect, useMemo, useRef, useState } from 'react'

+import { useLocale } from '@/lib/useLocale'
 import DraggableDroppableTagRow from '@/components/DraggableDroppableTagRow'
 import PrefetchLink from '@/components/PrefetchLink'
 import TagLink from '@/components/TagLink'
@@ -27,6 +28,7 @@ import { postsKeys, tagsKeys } from '@/lib/queryKeys'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { dateString, originalCreatedAtString } from '@/lib/utils'

+import type { LocaleCode } from '@/lib/locales'
 import type { CollisionDetection, DragEndEvent } from '@dnd-kit/core'
 import type { FC, MutableRefObject, ReactNode } from 'react'

@@ -180,8 +182,10 @@ const buildFlatTagByCategory = (

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


@@ -227,6 +231,7 @@ type ActiveTagDrag = {


 const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
+  const locale = useLocale ()
  sp = Boolean (sp)

  const qc = useQueryClient ()
@@ -271,7 +276,7 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
      useSensor (TouchSensor, { activationConstraint: { delay: 250, tolerance: 8 } }))

  const reloadTags = async (): Promise<void> => {
-    setTags (buildTagByCategory (await apiGet<Post> (`/posts/${ post.id }`)))
+    setTags (buildTagByCategory (await apiGet<Post> (`/posts/${ post.id }`, { locale })))
    qc.invalidateQueries ({ queryKey: postsKeys.root })
    qc.invalidateQueries ({ queryKey: tagsKeys.root })
  }
@@ -314,9 +319,9 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 	    return

 	  if (fromParentId != null)
-	    await apiDelete (`/tags/${ fromParentId }/children/${ childId }`)
+	    await apiDelete (`/tags/${ fromParentId }/children/${ childId }`, { locale })

-	  await apiPost (`/tags/${ parentId }/children/${ childId }`, { })
+	  await apiPost (`/tags/${ parentId }/children/${ childId }`, { }, { locale })

 	  await reloadTags ()
 	  toast ({
@@ -333,10 +338,10 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 	    return

 	  if (child.category !== cat)
-	    await changeCategory (childId, cat)
+	    await changeCategory (childId, cat, locale)

 	  if (fromParentId != null)
-	    await apiDelete (`/tags/${ fromParentId }/children/${ childId }`)
+	    await apiDelete (`/tags/${ fromParentId }/children/${ childId }`, { locale })

 	  const fromParent = fromParentId == null ? null : findTag (tags, fromParentId)

@@ -1,8 +1,9 @@
 // TODO: タグ入力系すべてに同様の処理あるため共通化する．

 import { useEffect, useState } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'

+import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
 import { apiGet } from '@/lib/api'
 import { inputClass } from '@/lib/utils'

@@ -14,8 +15,9 @@ import type { Tag } from '@/types'


 const TagSearch: FC = () => {
+  const locale = useLocale ()
  const location = useLocation ()
-  const navigate = useNavigate ()
+  const navigate = useLocaleNavigate ()

  const [activeIndex, setActiveIndex] = useState (-1)
  const [search, setSearch] = useState ('')
@@ -32,7 +34,7 @@ const TagSearch: FC = () => {
 	return
      }

-    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q } })
+    const data = await apiGet<Tag[]> ('/tags/autocomplete', { locale, params: { q } })
    setSuggestions (data.filter (t => t.postCount > 0))
    if (suggestions.length > 0)
      setSuggestionsVsbl (true)
@@ -1,7 +1,8 @@
 import { AnimatePresence, motion } from 'framer-motion'
 import { useEffect, useState } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'

+import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
 import TagLink from '@/components/TagLink'
 import TagSearch from '@/components/TagSearch'
 import SectionTitle from '@/components/common/SectionTitle'
@@ -22,7 +23,8 @@ type Props = { posts:     Post[]


 const TagSidebar: FC<Props> = ({ posts, onClick }) => {
-  const navigate = useNavigate ()
+  const locale = useLocale ()
+  const navigate = useLocaleNavigate ()
  const behaviourSettings = useClientBehaviourSettings ()
  const animationMode = behaviourSettings.animation ?? 'normal'
  const animationsOff = animationMode === 'off'
@@ -96,7 +98,7 @@ const TagSidebar: FC<Props> = ({ posts, onClick }) => {
 	       try
 	       {
 		 const data = await apiGet<Post> ('/posts/random',
-		     { params: { tags: tagsQuery.split (' ').filter (e => e !== '').join (' '),
+		     { locale, params: { tags: tagsQuery.split (' ').filter (e => e !== '').join (' '),
 				 match: (anyFlg ? 'any' : 'all') } })
 		 navigate (`/posts/${ data.id }`)
 	       }
@@ -3,10 +3,18 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'

+import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
 import Separator from '@/components/MenuSeparator'
 import PrefetchLink from '@/components/PrefetchLink'
 import TopNavUser from '@/components/TopNavUser'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
+import { LOCALE_LABELS,
+	 SUPPORTED_LOCALES,
+	 isLocaleCode,
+	 localeFromPath,
+	 switchLocalePath,
+	 unlocalisedPath } from '@/lib/locales'
+import { uiMessage, uiMessageLanguage } from '@/lib/messages'
 import { materialsKeys, tagsKeys, wikiKeys } from '@/lib/queryKeys'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { canEditContent } from '@/lib/users'
@@ -24,13 +32,16 @@ type NavDensity = 'auto' | 'comfortable' | 'compact'


 export const menuOutline = (
-    { tag, material, wikiId, user, pathName }: {
+    { tag, material, wikiId, user, pathName: fullPathname }: {
 	tag?: Tag | null
 	material?: Material | null
 	wikiId: number | null
 	user: User | null
 	pathName: string },
 ): Menu => {
+  const pathName = unlocalisedPath (fullPathname)
+  const locale = localeFromPath (fullPathname) ?? 'ja'
+  const message = (key: Parameters<typeof uiMessage>[1]) => uiMessage (locale, key)
  const postCount = tag?.postCount ?? material?.tag?.postCount ?? 0
  const editable = canEditContent (user)

@@ -41,71 +52,73 @@ export const menuOutline = (

  const materialFlg = /^\/materials\/\d+/.test (pathName)

-  const helpVsbl = /\/help\/((?!changes)[^\/?]+)/.test (pathName)
+  const helpVsbl = /\/help\/((?!changes)[^/?]+)/.test (pathName)
  const helpIdentifier = pathName.split ('/')[2] ?? ''

  return [
-      { name: '広場', to: '/posts', subMenu: [
-	  { name: '一覧', to: '/posts' },
-	  { name: '検索', to: '/posts/search' },
-	  { name: '追加', to: '/posts/new', visible: editable },
-	  { name: '全体履歴', to: '/posts/changes' },
-	  { name: 'ヘルプ', to: '/wiki/ヘルプ:広場' }] },
-      { name: 'タグ', to: '/tags', subMenu: [
-	  { name: 'マスタ', to: '/tags' },
-	  { name: 'ニコニコ連携', to: '/tags/nico' },
-	  { name: '全体履歴', to: '/tags/changes' },
-	  { name: 'ヘルプ', to: '/wiki/ヘルプ:タグ' },
+      { name: message ('square'), to: '/posts', subMenu: [
+	  { name: message ('list'), to: '/posts' },
+	  { name: message ('search'), to: '/posts/search' },
+	  { name: message ('add'), to: '/posts/new', visible: editable },
+	  { name: message ('allHistory'), to: '/posts/changes' },
+	  { name: message ('help'), to: '/wiki/ヘルプ:広場' }] },
+      { name: message ('tags'), to: '/tags', subMenu: [
+	  { name: message ('master'), to: '/tags' },
+	  { name: message ('nicoLinks'), to: '/tags/nico' },
+	  { name: message ('allHistory'), to: '/tags/changes' },
+	  { name: message ('help'), to: '/wiki/ヘルプ:タグ' },
 	  { component: <Separator/>, visible: tagFlg },
 	  { name: `広場 (${ postCount || 0 })`,
 	    to: `/posts?tags=${ encodeURIComponent (tag?.name ?? '') }`,
 	    visible: tagFlg },
-	  { name: '履歴', to: `/tags/changes?id=${ tag?.id }`,
+	  { name: message ('history'), to: `/tags/changes?id=${ tag?.id }`,
 	    visible: tagFlg && tag?.category !== 'nico' }] },
-      { name: '素材', to: '/materials', visible: true, subMenu: [
-	  { name: '一覧', to: '/materials' },
-	  { name: '追加', to: '/materials/new', visible: editable },
-	  { name: '抑止', to: '/materials/suppressions',
+      { name: message ('materials'), to: '/materials', visible: true, subMenu: [
+	  { name: message ('list'), to: '/materials' },
+	  { name: message ('add'), to: '/materials/new', visible: editable },
+	  { name: message ('suppressions'), to: '/materials/suppressions',
 	    visible: user?.role === 'admin' },
-	  { name: '全体履歴', to: '/materials/changes' },
-	  { name: 'ヘルプ', to: '/wiki/ヘルプ:素材管理' },
+	  { name: message ('allHistory'), to: '/materials/changes' },
+	  { name: message ('help'), 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 }`,
+	  { name: message ('history'), to: `/materials/changes?material_id=${ material?.id }`,
 	    visible: materialFlg }] },
-      { name: 'Wiki', to: '/wiki', subMenu: [
-	  { name: '検索', to: '/wiki' },
-	  { name: '新規', to: '/wiki/new', visible: editable },
-	  { name: '全体履歴', to: '/wiki/changes' },
-	  { name: 'ヘルプ', to: '/wiki/ヘルプ:Wiki' },
+      { name: message ('wiki'), to: '/wiki', subMenu: [
+	  { name: message ('search'), to: '/wiki' },
+	  { name: message ('create'), to: '/wiki/new', visible: editable },
+	  { name: message ('allHistory'), to: '/wiki/changes' },
+	  { name: message ('help'), to: '/wiki/ヘルプ:Wiki' },
 	  { component: <Separator/>, visible: wikiPageFlg },
 	  { name: `広場 (${ postCount || 0 })`, to: `/posts?tags=${ wikiTitle }`,
 	    visible: wikiPageFlg },
-	  { name: '履歴', to: `/wiki/changes?id=${ wikiId }`, visible: wikiPageFlg },
-	  { name: '編輯', to: `/wiki/${ wikiId || wikiTitle }/edit`,
+	  { name: message ('history'), to: `/wiki/changes?id=${ wikiId }`, visible: wikiPageFlg },
+	  { name: message ('edit'), to: `/wiki/${ wikiId || wikiTitle }/edit`,
 	    visible: wikiPageFlg && editable }] },
-      { name: 'ヘルプ', to: '/help/home', base: '/help', subMenu: [
-	  { name: '検索', to: '/help' },
-	  { name: '全体履歴', to: '/help/changes' },
+      { name: message ('help'), to: '/help/home', base: '/help', subMenu: [
+	  { name: message ('search'), to: '/help' },
+	  { name: message ('allHistory'), to: '/help/changes' },
 	  { component: <Separator/>, visible: helpVsbl },
-	  { name: '履歴',
+	  { name: message ('history'),
 	    to: `/help/changes?identifier=${ helpIdentifier }`,
 	    visible: helpVsbl }] },
-      { name: 'おたのしみ', visible: false, subMenu: [
-	  { name: '上映会 (β)', to: '/theatres/1' },
-	  { name: 'グカネータ (β)', to: '/gekanator' }] },
-      { name: 'ユーザ', to: '/users/settings', visible: false, subMenu: [
-	  { name: '一覧', to: '/users', visible: false },
-	  { name: 'お前', to: `/users/${ user?.id }`, visible: false },
-	  { name: '設定', to: '/users/settings', visible: Boolean (user) }] },
-      { name: '法規', visible: false, subMenu: [
-	  { name: '利用規約', to: '/tos' }] }]
+      { name: message ('entertainment'), visible: false, subMenu: [
+	  { name: message ('theatre'), to: '/theatres/1' },
+	  { name: message ('gekanator'), to: '/gekanator' }] },
+      { name: message ('users'), to: '/users/settings', visible: false, subMenu: [
+	  { name: message ('list'), to: '/users', visible: false },
+	  { name: message ('currentUser'), to: `/users/${ user?.id }`, visible: false },
+	  { name: message ('settings'), to: '/users/settings', visible: Boolean (user) }] },
+      { name: message ('legal'), visible: false, subMenu: [
+	  { name: message ('terms'), to: '/tos' }] }]
 }


 const TopNav: FC<Props> = ({ user }) => {
+  const locale = useLocale ()
+  const navigate = useLocaleNavigate ()
  const location = useLocation ()
  const behaviourSettings = useClientBehaviourSettings ()
  const animationMode = behaviourSettings.animation ?? 'normal'
@@ -151,25 +164,26 @@ const TopNav: FC<Props> = ({ user }) => {

  const { data: wikiPage } = useQuery ({
      enabled: Boolean (wikiIdStr),
-      queryKey: wikiKeys.show (wikiIdStr, { }),
-      queryFn: () => fetchWikiPage (wikiIdStr, { }) })
+      queryKey: wikiKeys.show (wikiIdStr, { }, locale),
+      queryFn: () => fetchWikiPage (wikiIdStr, { }, locale) })

-  const tagFlg = /^\/tags\/\d+/.test (location.pathname)
-  const materialFlg = /^\/materials\/\d+/.test (location.pathname)
+  const pathname = unlocalisedPath (location.pathname)
+  const tagFlg = /^\/tags\/\d+/.test (pathname)
+  const materialFlg = /^\/materials\/\d+/.test (pathname)
  const effectiveTitle = (((tagFlg || materialFlg)
-			   ? location.pathname.split ('/')[2]
+			   ? pathname.split ('/')[2]
 			   : wikiPage?.title)
 			  ?? '')

  const { data: tag } = useQuery ({
      enabled: Boolean (effectiveTitle),
-      queryKey: tagsKeys.show (effectiveTitle),
-      queryFn: () => (tagFlg ? fetchTag : fetchTagByName) (effectiveTitle) })
+      queryKey: tagsKeys.show (effectiveTitle, locale),
+      queryFn: () => (tagFlg ? fetchTag : fetchTagByName) (effectiveTitle, locale) })

  const { data: material } = useQuery ({
      enabled: Boolean (effectiveTitle),
-      queryKey: materialsKeys.show (effectiveTitle),
-      queryFn: () => fetchMaterial (effectiveTitle) })
+      queryKey: materialsKeys.show (effectiveTitle, locale),
+      queryFn: () => fetchMaterial (effectiveTitle, locale) })

  const menu = menuOutline ({ tag, material, wikiId, user, pathName: location.pathname })
  const visibleMenu = menu.filter ((item): item is MenuVisibleItem => item.visible ?? true)
@@ -177,7 +191,7 @@ const TopNav: FC<Props> = ({ user }) => {
      !(item.visible ?? true)
      || item.subMenu.filter (subItem => subItem.visible ?? true).length > 0)
  const activeIdx =
-      visibleMenu.findIndex (item => location.pathname.startsWith (item.base || item.to))
+      visibleMenu.findIndex (item => pathname.startsWith (item.base || item.to))
  const submenuHeight = moreVsbl ? 40 * moreMenu.length : (activeIdx < 0 ? 0 : 40)
  const topNavTransition =
      animationsOff
@@ -298,7 +312,7 @@ const TopNav: FC<Props> = ({ user }) => {
  return (
      <div ref={layoutRef} className="top-nav-layout w-full min-w-0 shrink-0"
 	  data-desktop={desktop} data-density={density}>
-	<nav ref={barRef}
+	<nav ref={barRef} lang={uiMessageLanguage (locale, 'square')}
 	    className="top-nav-root top-nav-bar flex justify-between items-center w-full">
 	  <div className="top-nav-primary flex shrink-0 items-center h-12">
 	    <PrefetchLink
@@ -373,6 +387,22 @@ const TopNav: FC<Props> = ({ user }) => {
 	  </button>
 	</nav>

+	<div className="flex min-w-0 justify-end px-2">
+	  <select
+	      aria-label={LOCALE_LABELS[locale]}
+	      value={locale}
+	      className="max-w-full rounded border border-gray-300 bg-white text-xs text-gray-900
+			 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+	      onChange={event => {
+		const nextLocale = event.target.value
+		if (isLocaleCode (nextLocale))
+		  navigate (switchLocalePath (location, nextLocale))
+	      }}>
+	    {SUPPORTED_LOCALES.map (code => (
+		<option key={code} value={code}>{LOCALE_LABELS[code]}</option>))}
+	  </select>
+	</div>
+
 	<AnimatePresence initial={false}>
 	  <motion.div
 	      key="submenu-shell"
@@ -3,6 +3,7 @@ import { useMemo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGFM from 'remark-gfm'

+import { useLocale } from '@/lib/useLocale'
 import PrefetchLink from '@/components/PrefetchLink'
 import { wikiKeys } from '@/lib/queryKeys'
 import remarkWikiAutoLink from '@/lib/remark-wiki-autolink'
@@ -26,10 +27,11 @@ const mdComponents = { a: (({ href, children }) => (


 const WikiBody: FC<Props> = ({ title, body }) => {
+  const locale = useLocale ()
  const { data } = useQuery ({
      enabled: Boolean (body),
-      queryKey: wikiKeys.index ({ }),
-      queryFn: () => fetchWikiPages ({ }) })
+      queryKey: wikiKeys.index ({ }, locale),
+      queryFn: () => fetchWikiPages ({ }, locale) })
  const pageNames = (data ?? []).map (page => page.title).sort ((a, b) => b.length - a.length)

  const remarkPlugins = useMemo (
@@ -1,5 +1,6 @@
 import { useState } from 'react'

+import { useLocale } from '@/lib/useLocale'
 import TagSearchBox from '@/components/TagSearchBox'
 import { apiGet } from '@/lib/api'
 import { inputClass } from '@/lib/utils'
@@ -24,6 +25,7 @@ const TagInput: FC<Props> = ({
    value,
    setValue,
 }) => {
+  const locale = useLocale ()
  const [activeIndex, setActiveIndex] = useState (-1)
  const [suggestions, setSuggestions] = useState<Tag[]> ([])
  const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
@@ -39,7 +41,7 @@ const TagInput: FC<Props> = ({
 	return
      }

-    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: {
+    const data = await apiGet<Tag[]> ('/tags/autocomplete', { locale, params: {
 	q,
 	nico: includeNico ? '1' : '0' } })
    const nextSuggestions = data.filter (t => t.postCount > 0)
@@ -88,8 +88,9 @@ const DialogueProvider: FC<Props> = ({ children }) => {
    })
    setPendingIds (current => current.filter (pendingId => pendingId !== id))
    setFormActions (current => {
-	const { [id]: _, ...rest } = current
-	return rest
+      const rest = { ...current }
+      delete rest[id]
+      return rest
    })
    delete formControls.current[id]
  }, [])