AI: address review on PR #470

frontend/src/components/PostEditForm.tsx

@@ -1,8 +1,6 @@
-import { useQuery } from '@tanstack/react-query'
 import { useEffect, useMemo, useState } from 'react'
 
 import { useLocale } from '@/lib/useLocale'
-import PostList from '@/components/PostList'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
 import FieldError from '@/components/common/FieldError'
 import PostDurationField from '@/components/posts/PostDurationField'
@@ -12,15 +10,14 @@ import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { isApiError } from '@/lib/api'
 import useDialogue from '@/lib/dialogues/useDialogue'
-import { fetchPosts, updatePost } from '@/lib/posts'
-import { postsKeys } from '@/lib/queryKeys'
+import { updatePost } from '@/lib/posts'
 import { msToTime } from '@/lib/utils'
 import { useValidationErrors } from '@/lib/useValidationErrors'
 import { useUITranslation } from '@/lib/useUITranslation'
 
 import type { FC, FormEvent } from 'react'
 
-import type { FetchPostsParams, Post, TagWithSections } from '@/types'
+import type { Post, TagWithSections } from '@/types'
 
 type PostFormField =
     'parentPostIds' | 'tags' | 'videoMs'
@@ -71,33 +68,6 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
   const [tags, setTags] = useState<string> (() => tagsToStr (post.tags))
   const [title, setTitle] = useState (post.title)
 
-  const [importVisible, setImportVisible] = useState (false)
-  const [sourceTitle, setSourceTitle] = useState ('')
-  const [sourcePage, setSourcePage] = useState (1)
-  const sourceParams: FetchPostsParams = {
-      title: sourceTitle, page: sourcePage, limit: 20,
-      url: '', tags: '', match: 'all', order: 'original_created_at:desc',
-      originalCreatedFrom: '', originalCreatedTo: '',
-      createdFrom: '', createdTo: '', updatedFrom: '', updatedTo: '' }
-  const { data: sources, isError: sourceError } = useQuery ({
-      queryKey: postsKeys.index (sourceParams, locale),
-      queryFn: () => fetchPosts (sourceParams, locale),
-      enabled: importVisible && !disabled })
-
-  const importTags = (source: Post) => {
-    if (disabled)
-      return
-    setTags (current => {
-      const existing = new Set (current.split (/\s+/))
-      const additions = tagsToStr (source.tags).split (/\s+/)
-	  .filter (tag => tag !== '' && !existing.has (tag))
-      return additions.length > 0
-	  ? `${current}${current.trim () === '' ? '' : ' '}${additions.join (' ')}`
-	  : current
-    })
-    setImportVisible (false)
-  }
-
   const videoFlg =
       useMemo (() => tags.split (/\s+/).some (tag => tag.replace (/\[.*\]$/, '') === '動画'),
 	       [tags])
@@ -222,48 +192,6 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 	    setTags={setTags}
 	    errors={fieldErrors.tags}/>
 
-	<Button
-	    type="button"
-	    variant="outline"
-	    disabled={disabled}
-	    aria-expanded={importVisible}
-	    onClick={() => setImportVisible (visible => !visible)}>
-	  {label ('edit.import')}
-	</Button>
-	{importVisible && (
-	    <div className="space-y-2" onKeyDown={event => {
-	      if (event.key === 'Enter' && event.target instanceof HTMLInputElement)
-		event.preventDefault ()
-	    }}>
-	      <PostTextField
-		  label={label ('shared:labels.title')}
-		  type="search"
-		  value={sourceTitle}
-		  disabled={disabled}
-		  onChange={value => {
-		    setSourceTitle (value)
-		    setSourcePage (1)
-		  }}/>
-	      <FieldError messages={sourceError ? [label ('common:fetchError')] : []}/>
-	      {!disabled && <PostList posts={sources?.posts ?? []} onSelect={importTags}/>}
-	      <div className="flex flex-col gap-2 md:flex-row">
-		<Button
-		    type="button"
-		    variant="outline"
-		    disabled={disabled || sourcePage <= 1}
-		    onClick={() => setSourcePage (page => page - 1)}>
-		  {label ('common:pagination.previous')}
-		</Button>
-		<Button
-		    type="button"
-		    variant="outline"
-		    disabled={disabled || sourcePage * 20 >= (sources?.count ?? 0)}
-		    onClick={() => setSourcePage (page => page + 1)}>
-		  {label ('common:pagination.next')}
-		</Button>
-	      </div>
-	    </div>)}
-
 	{/* オリジナルの作成日時 */}
 	<PostOriginalCreatedTimeField
 	    disabled={disabled}

frontend/src/components/PostFormTagsArea.test.tsx

@@ -12,24 +12,36 @@ const api = vi.hoisted (() => ({
 vi.mock ('@/lib/api', () => api)
 
 describe ('PostFormTagsArea', () => {
-  it ('updates text and fetches autocomplete for the selected token', async () => {
+  it ('replaces the selected token and restores the caret without losing other tags', async () => {
     const setTags = vi.fn ()
     api.apiGet.mockResolvedValueOnce ([buildTag ({ name: '虹夏', postCount: 3 })])
 
-    renderWithProviders (<PostFormTagsArea tags="虹" setTags={setTags}/>)
+    const { rerender } = renderWithProviders (
+	<PostFormTagsArea tags="ぼっち 虹 後続" setTags={setTags}/>)
 
-    const textarea = screen.getByRole ('textbox')
+    const textarea = screen.getByRole<HTMLTextAreaElement> ('textbox')
     fireEvent.focus (textarea)
-    fireEvent.select (textarea, { target: { selectionStart: 1, selectionEnd: 1 } })
-    fireEvent.change (textarea, { target: { value: '虹夏' } })
+    fireEvent.change (textarea, { target: { value: 'ぼっち 虹な 後続' } })
+    rerender (<PostFormTagsArea tags="ぼっち 虹な 後続" setTags={setTags}/>)
+    fireEvent.select (textarea, { target: { selectionStart: 6, selectionEnd: 6 } })
 
     await waitFor (() => {
       expect (api.apiGet).toHaveBeenCalledWith (
-          '/tags/autocomplete',
-          { locale: 'ja', params: { q: '虹', nico: '0' },
-	    signal: expect.any (AbortSignal) },
-      )
+	  '/tags/autocomplete', {
+	      locale: 'ja', params: { q: '虹な', nico: '0' },
+	      signal: expect.any (AbortSignal) })
     })
-    expect (setTags).toHaveBeenCalledWith ('虹夏')
+    expect (setTags).toHaveBeenCalledWith ('ぼっち 虹な 後続')
+
+    fireEvent.mouseDown (await screen.findByText ('虹夏'))
+    expect (setTags).toHaveBeenLastCalledWith ('ぼっち 虹夏  後続')
+    rerender (<PostFormTagsArea tags="ぼっち 虹夏  後続" setTags={setTags}/>)
+
+    await waitFor (() => {
+      expect (textarea).toHaveFocus ()
+      expect (textarea.selectionStart).toBe (7)
+      expect (textarea.selectionEnd).toBe (7)
+    })
+    expect (screen.queryByText ('虹夏')).not.toBeInTheDocument ()
   })
 })

frontend/src/components/PostFormTagsArea.tsx

@@ -1,13 +1,10 @@
-// TODO: TagSearch と共通化する．
+import { useRef, useState } from 'react'
 
-import { useEffect, useRef, useState } from 'react'
-
-import { useLocale } from '@/lib/useLocale'
+import { useTagAutocomplete } from '@/lib/useTagAutocomplete'
 import { useUITranslation } from '@/lib/useUITranslation'
 import TagSearchBox from '@/components/TagSearchBox'
 import FormField from '@/components/common/FormField'
 import TextArea from '@/components/common/TextArea'
-import { apiGet } from '@/lib/api'
 
 import type { ComponentPropsWithoutRef, FC, ReactNode, SyntheticEvent } from 'react'
 
@@ -41,24 +38,13 @@ type Props = Omit<ComponentPropsWithoutRef<'textarea'>, 'value' | 'onChange' | '
 
 const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
   const { label } = useUITranslation ('navigation')
-  const locale = useLocale ()
   const ref = useRef<HTMLTextAreaElement> (null)
 
   const [bounds, setBounds] = useState<{ start: number; end: number }> ({ start: 0, end: 0 })
   const [focused, setFocused] = useState (false)
-  const [request, setRequest] = useState ({ query: '' })
-  const [result, setResult] = useState<{
-      locale: string
-      request: { query: string }
-      tags: Tag[] }> ({ locale, request, tags: [] })
   const currentToken = getTokenAt (tags, Math.min (bounds.start, tags.length)).token
-  const suggestions = (result.locale === locale && result.request === request
-      && request.query === currentToken) ? result.tags : []
-  const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
 
   const handleTagSelect = (tag: Tag) => {
-    setSuggestionsVsbl (false)
-    setRequest ({ query: '' })
     const textarea = ref.current!
     const newValue = replaceToken (tags, bounds.start, bounds.end, tag.name + ' ')
     setTags (newValue)
@@ -70,52 +56,18 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
     })
   }
 
+  const { inputProps, suggestionProps, requestSuggestions } =
+      useTagAutocomplete ({ token: currentToken, onSelect: handleTagSelect })
+
   const recompute = (pos: number, v: string = tags) => {
     const { start, end, token } = getTokenAt (v, pos)
-    setRequest ({ query: token })
-    setSuggestionsVsbl (token.trim () !== '')
+    requestSuggestions (token)
     if (!(token.trim ()))
-      {
-	setSuggestionsVsbl (false)
-	return
-      }
+      return
 
     setBounds ({ start, end })
   }
 
-  useEffect (() => {
-    if (request.query.trim () === '')
-      return
-    const controller = new AbortController ()
-    let active = true
-    void (async () => {
-      try
-      {
-	const tags = await apiGet<Tag[]> ('/tags/autocomplete', {
-	    locale, signal: controller.signal, params: { q: request.query, nico: '0' } })
-	if (active)
-	{
-	  setResult ({ locale, request,
-	      tags: tags.filter (tag => tag.postCount > 0) })
-	}
-      }
-      catch
-      {
-	if (active)
-	  setResult ({ locale, request, tags: [] })
-      }
-    }) ()
-    return () => {
-      active = false
-      controller.abort ()
-    }
-  }, [request, locale])
-
-  useEffect (() => {
-    setSuggestionsVsbl (false)
-    setRequest ({ query: '' })
-  }, [locale])
-
   return (
       <FormField className="relative w-full" label={label ('tags')} messages={errors}>
 	{({ describedBy, invalid }) => (
@@ -134,15 +86,10 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
 		  onFocus={() => setFocused (true)}
 		  onBlur={() => {
 		    setFocused (false)
-		    setSuggestionsVsbl (false)
+		    inputProps.onBlur ()
 		  }}/>
 	      {focused && (
-		  <TagSearchBox
-		      suggestions={suggestionsVsbl && suggestions.length > 0
-				   ? suggestions
-				   : [] as Tag[]}
-		      activeIndex={-1}
-		      onSelect={handleTagSelect}/>)}
+		  <TagSearchBox {...suggestionProps}/>)}
 	    </>)}
       </FormField>)
 }

frontend/src/components/PostList.tsx

@@ -3,7 +3,6 @@ import { useRef } from 'react'
 import { useLocation } from 'react-router-dom'
 
 import PrefetchLink from '@/components/PrefetchLink'
-import { Button } from '@/components/ui/button'
 import { useUITranslation } from '@/lib/useUITranslation'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { cn } from '@/lib/utils'
@@ -14,11 +13,10 @@ import type { FC, MouseEvent } from 'react'
 import type { Post } from '@/types'
 
 type Props = { posts:     Post[]
-	       onSelect?: (post: Post) => void
 	       onClick?:  (event: MouseEvent<HTMLElement>) => void }
 
 
-const PostList: FC<Props> = ({ posts, onClick, onSelect }) => {
+const PostList: FC<Props> = ({ posts, onClick }) => {
   const { label } = useUITranslation ('shared')
   const location = useLocation ()
   const behaviourSettings = useClientBehaviourSettings ()
@@ -41,63 +39,7 @@ const PostList: FC<Props> = ({ posts, onClick, onSelect }) => {
 	  const sharedId = `page-${ post.id }`
 	  const layoutId = sharedId
 
-	  const card = (
-	      <motion.div
-		  ref={cardRef}
-		  layout={animationMode === 'off' ? false : true}
-		  layoutId={(onSelect || animationMode === 'off') ? undefined : layoutId}
-		  className={cn ('w-full h-full overflow-hidden rounded-xl shadow',
-				 'transform-gpu will-change-transform',
-				 (post.childPosts ?? []).length > 0 && 'ring-4 ring-green-500',
-				 (post.parentPosts ?? []).length > 0 && 'ring-4 ring-yellow-500')}
-		  whileHover={{ scale: 1.02 }}
-		  onLayoutAnimationStart={() => {
-		    if (!(cardRef.current))
-		      return
-
-		    cardRef.current.style.position = 'relative'
-		    cardRef.current.style.zIndex = '9999'
-		  }}
-		  onLayoutAnimationComplete={() => {
-		    if (!(cardRef.current))
-		      return
-
-		    cardRef.current.style.zIndex = ''
-		    cardRef.current.style.position = ''
-		  }}
-		  transition={{ layout: cardLayoutTransition }}>
-		{thumbnailMode === 'off'
-		 ? (
-		    <div className="flex h-full w-full items-center justify-center
-				    bg-muted text-center text-xs text-muted-foreground">
-		      {label ('labels.noThumbnail')}
-		    </div>)
-		 : (
-		    <img
-			src={post.thumbnail || post.thumbnailBase || undefined}
-			alt={post.title || post.url}
-			title={post.title || post.url || undefined}
-			loading={
-			    thumbnailMode === 'light'
-			    ? 'lazy'
-			    : (i < 12 ? 'eager' : 'lazy')
-			}
-			decoding="async"
-			className="object-cover w-full h-full"/>)}
-	      </motion.div>)
-
-	  return onSelect
-	  ? (
-	      <Button
-		  key={post.id}
-		  type="button"
-		  variant="ghost"
-		  className="w-40 h-40 p-0"
-		  aria-label={post.title || post.url}
-		  onClick={() => onSelect (post)}>
-		{card}
-	      </Button>)
-	  : (
+	  return (
 	      <PrefetchLink
 		  to={`/posts/${ post.id }`}
 		  key={post.id}
@@ -107,7 +49,51 @@ const PostList: FC<Props> = ({ posts, onClick, onSelect }) => {
 		    setForLocationKey (location.key, sharedId)
 		    onClick?.(e)
 		  }}>
-		{card}
+		<motion.div
+		    ref={cardRef}
+		    layout={animationMode === 'off' ? false : true}
+		    layoutId={animationMode === 'off' ? undefined : layoutId}
+		    className={cn ('w-full h-full overflow-hidden rounded-xl shadow',
+				   'transform-gpu will-change-transform',
+				   (post.childPosts ?? []).length > 0 && 'ring-4 ring-green-500',
+				   (post.parentPosts ?? []).length > 0 && 'ring-4 ring-yellow-500')}
+		    whileHover={{ scale: 1.02 }}
+		    onLayoutAnimationStart={() => {
+		      if (!(cardRef.current))
+			return
+
+		      cardRef.current.style.position = 'relative'
+		      cardRef.current.style.zIndex = '9999'
+		    }}
+		    onLayoutAnimationComplete={() => {
+		      if (!(cardRef.current))
+			return
+
+		      cardRef.current.style.zIndex = ''
+		      cardRef.current.style.position = ''
+		    }}
+		    transition={{ layout: cardLayoutTransition }}>
+		  {thumbnailMode === 'off'
+		   ? (
+		      <div className="flex h-full w-full items-center justify-center
+				      bg-muted text-center text-xs text-muted-foreground">
+			{label ('labels.noThumbnail')}
+		      </div>)
+		   : (
+		      <img
+			  src={post.thumbnail || post.thumbnailBase || undefined}
+			  alt={post.title || post.url}
+			  title={post.title || post.url || undefined}
+			  loading={
+			      thumbnailMode === 'light'
+			      ? 'lazy'
+			      : i < 12
+				? 'eager'
+				: 'lazy'
+			  }
+			  decoding="async"
+			  className="object-cover w-full h-full"/>)}
+		</motion.div>
 	      </PrefetchLink>)
 	})}
       </div>)

frontend/src/components/TagSearch.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen } from '@testing-library/react'
+import { act, fireEvent, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useLocation } from 'react-router-dom'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -8,6 +8,8 @@ import * as api from '@/lib/api'
 import { buildTag } from '@/test/factories'
 import { renderWithProviders } from '@/test/render'
 
+import type { Tag } from '@/types'
+
 
 const LocationOutput = () => {
   const location = useLocation ()
@@ -117,4 +119,39 @@ describe ('TagSearch', () => {
     expect (screen.getByTestId ('location')).toHaveTextContent ('/ja/posts?page=3')
     expect (screen.queryByText ('虹夏')).not.toBeInTheDocument ()
   })
+
+  it ('aborts obsolete requests and ignores their late suggestions', async () => {
+    const responses: ((tags: Tag[]) => void)[] = []
+    vi.mocked (api.apiGet).mockImplementation (() => new Promise<Tag[]> (resolve => {
+      responses.push (resolve)
+    }))
+    const { unmount } = renderSearch ()
+    const input = screen.getByRole ('textbox')
+
+    fireEvent.change (input, { target: { value: '虹' } })
+    const previousSignal = vi.mocked (api.apiGet).mock.calls.at (-1)?.[1]?.signal
+    expect (previousSignal).toBeInstanceOf (AbortSignal)
+    expect (previousSignal?.aborted).toBe (false)
+
+    fireEvent.change (input, { target: { value: 'ぼ' } })
+    expect (previousSignal?.aborted).toBe (true)
+    expect (api.apiGet).toHaveBeenLastCalledWith ('/tags/autocomplete', {
+	locale: 'ja', params: { q: 'ぼ', nico: '1' },
+	signal: expect.any (AbortSignal) })
+    const currentSignal = vi.mocked (api.apiGet).mock.calls.at (-1)?.[1]?.signal
+
+    await act (async () => {
+      responses[1] ([buildTag ({ name: 'ぼっち' })])
+    })
+    expect (screen.getByText ('ぼっち')).toBeInTheDocument ()
+
+    await act (async () => {
+      responses[0] ([buildTag ({ name: '虹夏' })])
+    })
+    expect (screen.queryByText ('虹夏')).not.toBeInTheDocument ()
+    expect (screen.getByText ('ぼっち')).toBeInTheDocument ()
+
+    unmount ()
+    expect (currentSignal?.aborted).toBe (true)
+  })
 })

frontend/src/components/TagSearch.tsx

@@ -1,82 +1,46 @@
-// TODO: タグ入力系すべてに同様の処理あるため共通化する．
-
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 
-import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
+import TagSearchBox from '@/components/TagSearchBox'
+import { useLocaleNavigate } from '@/lib/useLocale'
+import { useTagAutocomplete } from '@/lib/useTagAutocomplete'
 import { useUITranslation } from '@/lib/useUITranslation'
-import { apiGet } from '@/lib/api'
 import { inputClass } from '@/lib/utils'
 
-import TagSearchBox from './TagSearchBox'
-
-import type { ChangeEvent, FC, FormEvent, KeyboardEvent } from 'react'
+import type { ChangeEvent, FC, FormEvent } from 'react'
 
 import type { Tag } from '@/types'
 
 
 const TagSearch: FC = () => {
   const { message } = useUITranslation ('shared')
-  const locale = useLocale ()
   const location = useLocation ()
   const navigate = useLocaleNavigate ()
-  const compositionFlgRef = useRef (false)
-
-  const [activeIndex, setActiveIndex] = useState (-1)
   const [search, setSearch] = useState ('')
-  const [request, setRequest] = useState ({ query: '' })
-  const [result, setResult] = useState<{
-      locale: string
-      request: { query: string }
-      tags: Tag[] }> ({ locale, request, tags: [] })
-  const suggestions = result.locale === locale && result.request === request
-      ? result.tags : []
-  const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
 
-  const whenChanged = (ev: ChangeEvent<HTMLInputElement>) => {
-    const value = ev.target.value
-    const query = value.trim ().split (' ').at (-1) ?? ''
-    setSearch (value)
-    setRequest ({ query })
-    setActiveIndex (-1)
-    setSuggestionsVsbl (query !== '')
+  const handleTagSelect = (tag: Tag) => {
+    const parts = search.split (' ')
+    parts[parts.length - 1] = (
+	(parts[parts.length - 1].slice (0, 4).toLowerCase () === 'not:')
+	? ('not:' + tag.name)
+	: tag.name)
+    setSearch (parts.join (' ') + ' ')
   }
 
-  useEffect (() => {
-    if (request.query === '')
-      return
-    const controller = new AbortController ()
-    let active = true
-    void (async () => {
-      try
-      {
-	const tags = await apiGet<Tag[]> ('/tags/autocomplete', {
-	    locale, signal: controller.signal, params: { q: request.query } })
-	if (active)
-	{
-	  setResult ({ locale, request,
-	      tags: tags.filter (tag => tag.postCount > 0) })
-	}
-      }
-      catch
-      {
-	if (active)
-	  setResult ({ locale, request, tags: [] })
-      }
-    }) ()
-    return () => {
-      active = false
-      controller.abort ()
-    }
-  }, [request, locale])
+  const { inputProps, suggestionProps, requestSuggestions,
+	  clearSuggestions, compositionFlgRef } = useTagAutocomplete ({
+      token: search.trim ().split (' ').at (-1) ?? '',
+      nicoFlg: true,
+      onSelect: handleTagSelect })
 
-  useEffect (() => {
-    setActiveIndex (-1)
-    setSuggestionsVsbl (false)
-  }, [locale])
+  const whenChanged = (event: ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value
+    setSearch (value)
+    requestSuggestions (value.trim ().split (' ').at (-1) ?? '')
+  }
 
-  const handleSubmit = (ev: FormEvent<HTMLFormElement>) => {
-    ev.preventDefault ()
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault ()
     if (compositionFlgRef.current)
       return
 
@@ -89,61 +53,7 @@ const TagSearch: FC = () => {
 		       .filter (t => t !== 'type:or')
 		       .join (' '),
 	    match })).toString () }`)
-    setSuggestionsVsbl (false)
-    setRequest ({ query: '' })
-  }
-
-  const handleKeyDown = (ev: KeyboardEvent<HTMLInputElement>) => {
-    if (compositionFlgRef.current
-	|| ev.nativeEvent.isComposing
-	|| ev.nativeEvent.keyCode === 229)
-    {
-      if (ev.key === 'Enter')
-	ev.preventDefault ()
-      return
-    }
-
-    switch (ev.key)
-    {
-    case 'ArrowDown':
-      ev.preventDefault ()
-      setActiveIndex (i => Math.min (i + 1, suggestions.length - 1))
-      setSuggestionsVsbl (true)
-      break
-
-    case 'ArrowUp':
-      ev.preventDefault ()
-      setActiveIndex (i => Math.max (i - 1, -1))
-      setSuggestionsVsbl (true)
-      break
-
-    case 'Enter':
-      {
-	const selected = suggestionsVsbl ? suggestions[activeIndex] : null
-	if (selected == null)
-	  break
-	ev.preventDefault ()
-	handleTagSelect (selected)
-      }
-      break
-
-    case 'Escape':
-      ev.preventDefault ()
-      setSuggestionsVsbl (false)
-      break
-    }
-  }
-
-  const handleTagSelect = (tag: Tag) => {
-    const parts = search.split (' ')
-    parts[parts.length - 1] = (
-	(parts[parts.length - 1].slice(0, 4).toLowerCase () === 'not:')
-	? ('not:' + tag.name)
-	: tag.name)
-    setSearch (parts.join (' ') + ' ')
-    setRequest ({ query: '' })
-    setSuggestionsVsbl (false)
-    setActiveIndex (-1)
+    clearSuggestions ()
   }
 
   useEffect (() => {
@@ -151,33 +61,21 @@ const TagSearch: FC = () => {
     const anyFlg = query.get ('match') === 'any'
     const tagsQuery = `${ query.get ('tags') ?? '' }${ anyFlg ? ' type:or' : '' }`
     setSearch (tagsQuery)
-    setRequest ({ query: '' })
-    setActiveIndex (-1)
-    setSuggestionsVsbl (false)
-  }, [location.search])
+    clearSuggestions ()
+  }, [location.search, clearSuggestions])
 
   return (
       <form onSubmit={handleSubmit} className="relative w-full">
 	<input type="text"
+	       {...inputProps}
 	       enterKeyHint="search"
 	       data-shortcut-focus-search="true"
 	       placeholder={message ('labels.tagSearch').text}
 	       value={search}
 	       onChange={whenChanged}
-	       onFocus={() => setSuggestionsVsbl (true)}
-	       onBlur={() => setSuggestionsVsbl (false)}
-	       onKeyDown={handleKeyDown}
-	       onCompositionStart={() => {
-		 compositionFlgRef.current = true
-	       }}
-	       onCompositionEnd={() => {
-		 compositionFlgRef.current = false
-	       }}
 	       className={inputClass (false,
 				      'px-3 py-2 dark:border-gray-600 dark:bg-gray-800 dark:text-white')}/>
-	<TagSearchBox suggestions={suggestionsVsbl && suggestions.length ? suggestions : [] as Tag[]}
-		      activeIndex={activeIndex}
-		      onSelect={handleTagSelect}/>
+	<TagSearchBox {...suggestionProps}/>
       </form>)
 }
 

frontend/src/components/common/TagInput.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import TagInput from '@/components/common/TagInput'
@@ -20,18 +20,20 @@ describe ('TagInput', () => {
     const setValue = vi.fn ()
     api.apiGet.mockResolvedValueOnce ([buildTag ({ name: '虹夏', postCount: 2 })])
 
-    render (<TagInput value="ぼっち 虹" setValue={setValue}/>)
+    const { rerender } = render (
+	<TagInput value="ぼっち 虹" setValue={setValue}/>)
 
     fireEvent.change (screen.getByRole ('textbox'), { target: { value: 'ぼっち 虹夏' } })
+    rerender (<TagInput value="ぼっち 虹夏" setValue={setValue}/>)
 
     await waitFor (() => {
       expect (api.apiGet).toHaveBeenCalledWith (
-          '/tags/autocomplete',
-          { locale: 'ja', params: { q: '虹夏', nico: '0' },
-	    signal: expect.any (AbortSignal) },
-      )
+	  '/tags/autocomplete', {
+	      locale: 'ja', params: { q: '虹夏', nico: '0' },
+	      signal: expect.any (AbortSignal) })
     })
     expect (setValue).toHaveBeenCalledWith ('ぼっち 虹夏')
+    expect (await screen.findByText ('虹夏')).toBeInTheDocument ()
   })
 
   it ('does not fetch when the last token is blank', () => {
@@ -54,10 +56,51 @@ describe ('TagInput', () => {
 
     await waitFor (() => {
       expect (api.apiGet).toHaveBeenCalledWith (
-          '/tags/autocomplete',
-          { locale: 'ja', params: { q: '虹夏', nico: '1' },
-	    signal: expect.any (AbortSignal) },
-      )
+	  '/tags/autocomplete', {
+	      locale: 'ja', params: { q: '虹夏', nico: '1' },
+	      signal: expect.any (AbortSignal) })
     })
   })
+
+  it ('preserves negation and blocks suggestion selection during composition', async () => {
+    const setValue = vi.fn ()
+    api.apiGet.mockResolvedValueOnce ([buildTag ({ name: '虹夏' })])
+    const { rerender } = render (<TagInput value="" setValue={setValue}/>)
+    const input = screen.getByRole ('textbox')
+
+    fireEvent.change (input, { target: { value: 'ぼっち NOT:虹' } })
+    rerender (<TagInput value="ぼっち NOT:虹" setValue={setValue}/>)
+    await screen.findByText ('虹夏')
+    expect (api.apiGet).toHaveBeenLastCalledWith (
+	'/tags/autocomplete', {
+	    locale: 'ja', params: { q: '虹', nico: '0' },
+	    signal: expect.any (AbortSignal) })
+
+    fireEvent.keyDown (input, { key: 'ArrowDown' })
+    fireEvent.compositionStart (input)
+    expect (fireEvent.keyDown (input, { key: 'Enter' })).toBe (false)
+    expect (setValue).toHaveBeenCalledTimes (1)
+
+    fireEvent.compositionEnd (input)
+    fireEvent.keyDown (input, { key: 'Enter' })
+
+    expect (setValue).toHaveBeenLastCalledWith ('ぼっち not:虹夏 ')
+    expect (screen.queryByText ('虹夏')).not.toBeInTheDocument ()
+  })
+
+  it.each ([false, true]) ('includes unused tags only with includeUnused=%s', async unusedFlg => {
+    const tag = buildTag ({ name: '虹夏', postCount: 0 })
+    const response = Promise.resolve ([tag])
+    api.apiGet.mockReturnValueOnce (response)
+    const props = { setValue: vi.fn (), includeUnused: unusedFlg }
+    const { rerender } = render (<TagInput {...props} value=""/>)
+
+    fireEvent.change (screen.getByRole ('textbox'), { target: { value: '虹' } })
+    rerender (<TagInput {...props} value="虹"/>)
+    await act (async () => {
+      await response
+    })
+
+    expect (screen.queryByText ('虹夏') != null).toBe (unusedFlg)
+  })
 })

frontend/src/components/common/TagInput.tsx

@@ -1,11 +1,8 @@
-import { useEffect, useState } from 'react'
-
-import { useLocale } from '@/lib/useLocale'
 import TagSearchBox from '@/components/TagSearchBox'
-import { apiGet } from '@/lib/api'
+import { useTagAutocomplete } from '@/lib/useTagAutocomplete'
 import { inputClass } from '@/lib/utils'
 
-import type { FC, ChangeEvent, KeyboardEvent } from 'react'
+import type { FC, ChangeEvent } from 'react'
 
 import type { Tag } from '@/types'
 
@@ -19,136 +16,39 @@ type Props = {
     setValue:      (value: string) => void }
 
 
-const TagInput: FC<Props> = ({
-    includeNico = false,
-    includeUnused = false,
-    describedBy,
-    invalid,
-    value,
-    setValue,
-}) => {
-  const locale = useLocale ()
-  const [activeIndex, setActiveIndex] = useState (-1)
-  const [request, setRequest] = useState ({ query: '' })
-  const [result, setResult] = useState<{
-      locale: string
-      includeNico: boolean
-      request: { query: string }
-      tags: Tag[] }> ({ locale, includeNico, request, tags: [] })
-  const suggestions = (result.locale === locale && result.includeNico === includeNico
-      && result.request === request
-      && request.query === value.trim ().split (' ').at (-1)) ? result.tags : []
-  const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
-
-  // TODO: TagSearch からのコピペのため，共通化を考へる．
-  const whenChanged = (ev: ChangeEvent<HTMLInputElement>) => {
-    setValue (ev.target.value)
-    const query = ev.target.value.trim ().split (' ').at (-1) ?? ''
-    setRequest ({ query })
-    setActiveIndex (-1)
-    setSuggestionsVsbl (query !== '')
-  }
-
-  useEffect (() => {
-    if (request.query === '')
-      return
-    const controller = new AbortController ()
-    let active = true
-    void (async () => {
-      try
-      {
-	const tags = await apiGet<Tag[]> ('/tags/autocomplete', {
-	    locale, signal: controller.signal,
-	    params: { q: request.query.replace (/^not:/i, ''), nico: includeNico ? '1' : '0' } })
-	if (active)
-	{
-	  setResult ({ locale, includeNico, request,
-	      tags: includeUnused ? tags : tags.filter (tag => tag.postCount > 0) })
-	}
-      }
-      catch
-      {
-	if (active)
-	  setResult ({ locale, includeNico, request, tags: [] })
-      }
-    }) ()
-    return () => {
-      active = false
-      controller.abort ()
-    }
-  }, [request, locale, includeNico, includeUnused])
-
-  useEffect (() => {
-    setActiveIndex (-1)
-    setSuggestionsVsbl (false)
-    setRequest ({ query: '' })
-  }, [locale, includeNico])
-
-  // TODO: TagSearch からのコピペのため，共通化を考へる．
+const TagInput: FC<Props> = (
+    { includeNico: nicoFlg = false,
+      includeUnused: unusedFlg = false,
+      describedBy, invalid, value, setValue },
+) => {
   const handleTagSelect = (tag: Tag) => {
     const parts = value?.split (' ')
     const negative = /^not:/i.test (parts[parts.length - 1])
     parts[parts.length - 1] = `${negative ? 'not:' : ''}${tag.name}`
     setValue (parts.join (' ') + ' ')
-    setRequest ({ query: '' })
-    setActiveIndex (-1)
   }
 
-  // TODO: TagSearch からのコピペのため，共通化を考へる．
-  const handleKeyDown = (ev: KeyboardEvent<HTMLInputElement>) => {
-    switch (ev.key)
-    {
-    case 'ArrowDown':
-      ev.preventDefault ()
-      setActiveIndex (i => Math.min (i + 1, suggestions.length - 1))
-      setSuggestionsVsbl (true)
-      break
+  const { inputProps, suggestionProps, requestSuggestions } =
+      useTagAutocomplete ({ token: value.trim ().split (' ').at (-1) ?? '',
+			    nicoFlg, unusedFlg, onSelect: handleTagSelect })
 
-    case 'ArrowUp':
-      ev.preventDefault ()
-      setActiveIndex (i => Math.max (i - 1, -1))
-      setSuggestionsVsbl (true)
-      break
-
-    case 'Enter':
-      if (activeIndex < 0)
-	break
-      {
-	ev.preventDefault ()
-	const selected = suggestions[activeIndex]
-	if (selected)
-	  handleTagSelect (selected)
-      }
-      break
-
-    case 'Escape':
-      ev.preventDefault ()
-      setSuggestionsVsbl (false)
-      break
-    }
-    if (ev.key === 'Enter' && (!(suggestionsVsbl) || activeIndex < 0))
-      {
-	setSuggestionsVsbl (false)
-      }
+  const whenChanged = (event: ChangeEvent<HTMLInputElement>) => {
+    setValue (event.target.value)
+    const token = event.target.value.trim ().split (' ').at (-1) ?? ''
+    requestSuggestions (token, token.replace (/^not:/i, ''))
   }
 
   return (
       <div className="relative">
 	<input
+	    {...inputProps}
 	    type="text"
 	    aria-describedby={describedBy}
 	    aria-invalid={invalid}
 	    value={value}
 	    onChange={whenChanged}
-	    onFocus={() => setSuggestionsVsbl (true)}
-	    onBlur={() => setSuggestionsVsbl (false)}
-	    onKeyDown={handleKeyDown}
 	    className={inputClass (invalid)}/>
-	<TagSearchBox
-	    suggestions={
-		suggestionsVsbl && suggestions.length > 0 ? suggestions : [] as Tag[]}
-	    activeIndex={activeIndex}
-	    onSelect={handleTagSelect}/>
+	<TagSearchBox {...suggestionProps}/>
       </div>)
 }
 

frontend/src/lib/tags.ts

@@ -11,6 +11,17 @@ import type { Deerjikist,
 	      TagVersion } from '@/types'
 
 
+export const fetchTagAutocomplete = async (
+    query: string,
+    nicoFlg: boolean,
+    locale: LocaleCode,
+    signal: AbortSignal,
+): Promise<Tag[]> =>
+    await apiGet ('/tags/autocomplete', {
+	locale, signal,
+	params: { q: query, nico: nicoFlg ? '1' : '0' } })
+
+
 export const fetchTags = async (
     { post, name, category, postCountGTE, postCountLTE, createdFrom, createdTo,
       updatedFrom, updatedTo, deprecated,

frontend/src/lib/useTagAutocomplete.ts

@@ -0,0 +1,142 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { fetchTagAutocomplete } from '@/lib/tags'
+import { useLocale } from '@/lib/useLocale'
+
+import type { KeyboardEvent } from 'react'
+
+import type { Tag } from '@/types'
+
+
+export const useTagAutocomplete = (
+    { token, onSelect, nicoFlg = false, unusedFlg = false }: {
+	token: string
+	onSelect: (tag: Tag) => void
+	nicoFlg?: boolean
+	unusedFlg?: boolean },
+) => {
+  const locale = useLocale ()
+  const compositionFlgRef = useRef (false)
+  const [activeIndex, setActiveIndex] = useState (-1)
+  const [visible, setVisible] = useState (false)
+  const [request, setRequest] = useState ({ token: '', query: '' })
+  const [result, setResult] = useState<{
+      locale: string
+      nicoFlg: boolean
+      unusedFlg: boolean
+      request: { token: string; query: string }
+      tags: Tag[] }> ({ locale, nicoFlg, unusedFlg, request, tags: [] })
+  const suggestions = (result.locale === locale && result.nicoFlg === nicoFlg
+      && result.unusedFlg === unusedFlg && result.request === request
+      && request.token === token) ? result.tags : []
+
+  const requestSuggestions = (token: string, query: string = token) => {
+    setRequest ({ token, query })
+    setActiveIndex (-1)
+    setVisible (token.trim () !== '')
+  }
+
+  const clearSuggestions = useCallback (() => {
+    setRequest ({ token: '', query: '' })
+    setActiveIndex (-1)
+    setVisible (false)
+  }, [])
+
+  useEffect (() => {
+    if (request.token.trim () === '')
+      return
+    const controller = new AbortController ()
+    let active = true
+    void (async () => {
+      try
+      {
+	const tags = await fetchTagAutocomplete (
+	    request.query, nicoFlg, locale, controller.signal)
+	if (active)
+	{
+	  setResult ({ locale, nicoFlg, unusedFlg, request,
+	      tags: unusedFlg ? tags : tags.filter (tag => tag.postCount > 0) })
+	}
+      }
+      catch
+      {
+	if (active)
+	  setResult ({ locale, nicoFlg, unusedFlg, request, tags: [] })
+      }
+    }) ()
+    return () => {
+      active = false
+      controller.abort ()
+    }
+  }, [request, locale, nicoFlg, unusedFlg])
+
+  useEffect (() => {
+    clearSuggestions ()
+  }, [locale, nicoFlg, clearSuggestions])
+
+  const handleTagSelect = (tag: Tag) => {
+    clearSuggestions ()
+    onSelect (tag)
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (compositionFlgRef.current
+	|| event.nativeEvent.isComposing
+	|| event.nativeEvent.keyCode === 229)
+    {
+      if (event.key === 'Enter')
+	event.preventDefault ()
+      return
+    }
+
+    switch (event.key)
+    {
+    case 'ArrowDown':
+      event.preventDefault ()
+      setActiveIndex (index => Math.min (index + 1, suggestions.length - 1))
+      setVisible (true)
+      break
+
+    case 'ArrowUp':
+      event.preventDefault ()
+      setActiveIndex (index => Math.max (index - 1, -1))
+      setVisible (true)
+      break
+
+    case 'Enter':
+      {
+	const selected = visible ? suggestions[activeIndex] : null
+	if (selected == null)
+	{
+	  setVisible (false)
+	  break
+	}
+	event.preventDefault ()
+	handleTagSelect (selected)
+      }
+      break
+
+    case 'Escape':
+      event.preventDefault ()
+      setVisible (false)
+      break
+    }
+  }
+
+  return {
+      requestSuggestions, clearSuggestions, compositionFlgRef,
+      inputProps: {
+	  onFocus: () => setVisible (true),
+	  onBlur: () => setVisible (false),
+	  onKeyDown: handleKeyDown,
+	  onCompositionStart: () => {
+	    compositionFlgRef.current = true
+	  },
+	  onCompositionEnd: () => {
+	    compositionFlgRef.current = false
+	  } },
+      suggestionProps: {
+	  suggestions: visible ? suggestions : [],
+	  activeIndex,
+	  onSelect: handleTagSelect } }
+}

frontend/src/locales/ain-Kana/posts.json

@@ -1,5 +1,4 @@
 {
-  "_untranslated": ["edit.import"],
   "list": {
     "tagline": "{{brand}}",
     "empty": "ミンタㇻ　タ　ネン　カ　イサㇺ",
@@ -32,7 +31,6 @@
     "showExternal": "ソイタㇰ　ソㇱ　アヌカレ"
   },
   "edit": {
-    "import": "インポート",
     "validationFailed": "アシㇼ　カㇻ　カ　エアイカㇷ゚……",
     "conflictTitle": "モㇱマ　クㇽ　アシㇼ　カㇻ　ワ　アン！",
     "conflictDescription": "モㇱマ　イカㇻ　クㇽ　エエトコ　アシㇼ　カㇻ　ワ　アン。",

frontend/src/locales/ja/posts.json

@@ -22,7 +22,6 @@
     "question": "表示しますか?", "showExternal": "外部ページを表示"
   },
   "edit": {
-    "import": "インポート",
     "validationFailed": "更新はできなかったよ……",
     "conflictTitle": "競合が発生しました．",
     "conflictDescription": "ほかの耕作員が先に更新してゐます．",