#34

frontend/src/pages/posts/PostNewPage.tsx

@@ -43,18 +43,21 @@ const PostNewPage: FC<Props> = ({ user }) => {
   const [parentPostIds, setParentPostIds] = useState ('')
   const [tags, setTags] = useState ('')
   const [duration, setDuration] = useState ('')
-  const [thumbnailAutoFlg, setThumbnailAutoFlg] =
-      useState (settings.autoFetchThumbnail === 'auto')
   const [thumbnailFile, setThumbnailFile] = useState<File | null> (null)
   const [thumbnailLoading, setThumbnailLoading] = useState (false)
   const [thumbnailPreview, setThumbnailPreview] = useState<string> ('')
   const [title, setTitle] = useState ('')
-  const [titleAutoFlg, setTitleAutoFlg] = useState (settings.autoFetchTitle === 'auto')
   const [titleLoading, setTitleLoading] = useState (false)
   const [url, setURL] = useState ('')
 
   const previousURLRef = useRef ('')
   const thumbnailPreviewRef = useRef ('')
+  const titleFetchMode = settings.autoFetchTitle
+  const thumbnailFetchMode = settings.autoFetchThumbnail
+  const titleAutoFlg = titleFetchMode === 'auto'
+  const thumbnailAutoFlg = thumbnailFetchMode === 'auto'
+  const titleFetchVisible = titleFetchMode !== 'off'
+  const thumbnailFetchVisible = thumbnailFetchMode !== 'off'
   const videoFlg =
       useMemo (() => tags.split (/\s+/).some (tag => tag.replace (/\[.*\]$/, '') === '動画'),
                [tags])
@@ -103,9 +106,15 @@ const PostNewPage: FC<Props> = ({ user }) => {
   const fetchTitle = useCallback (async () => {
     setTitle ('')
     setTitleLoading (true)
-    const data = await apiGet<{ title: string }> ('/preview/title', { params: { url } })
-    setTitle (data.title || '')
-    setTitleLoading (false)
+    try
+    {
+      const data = await apiGet<{ title: string }> ('/preview/title', { params: { url } })
+      setTitle (data.title || '')
+    }
+    finally
+    {
+      setTitleLoading (false)
+    }
   }, [url])
 
   const fetchThumbnail = useCallback (async () => {
@@ -114,28 +123,26 @@ const PostNewPage: FC<Props> = ({ user }) => {
     setThumbnailLoading (true)
     if (thumbnailPreviewRef.current)
       URL.revokeObjectURL (thumbnailPreviewRef.current)
-    const data = await apiGet<Blob> ('/preview/thumbnail',
-				     { params: { url }, responseType: 'blob' })
-    const imageURL = URL.createObjectURL (data)
-    setThumbnailPreview (imageURL)
-    setThumbnailFile (new File ([data],
-				'thumbnail.png',
-				{ type: data.type || 'image/png' }))
-    setThumbnailLoading (false)
+    try
+    {
+      const data = await apiGet<Blob> ('/preview/thumbnail',
+				       { params: { url }, responseType: 'blob' })
+      const imageURL = URL.createObjectURL (data)
+      setThumbnailPreview (imageURL)
+      setThumbnailFile (new File ([data],
+				  'thumbnail.png',
+				  { type: data.type || 'image/png' }))
+    }
+    finally
+    {
+      setThumbnailLoading (false)
+    }
   }, [url])
 
   useEffect (() => {
     thumbnailPreviewRef.current = thumbnailPreview
   }, [thumbnailPreview])
 
-  useEffect (() => {
-    setTitleAutoFlg (settings.autoFetchTitle === 'auto')
-  }, [settings.autoFetchTitle])
-
-  useEffect (() => {
-    setThumbnailAutoFlg (settings.autoFetchThumbnail === 'auto')
-  }, [settings.autoFetchThumbnail])
-
   useEffect (() => {
     if (titleAutoFlg && url)
       fetchTitle ()
@@ -172,34 +179,58 @@ const PostNewPage: FC<Props> = ({ user }) => {
 	  </FormField>
 
 	  {/* タイトル */}
-	  <FormField
-	      checkBox={{
-		  label:    '自動',
-		  checked:  titleAutoFlg,
-		  onChange: ev => setTitleAutoFlg (ev.target.checked)}}
-	      label="タイトル"
-	      messages={fieldErrors.title}>
+	  <FormField label="タイトル" messages={fieldErrors.title}>
 	    {({ describedBy, invalid }) => (
-		<input type="text"
-		       aria-describedby={describedBy}
-		       aria-invalid={invalid}
-		       className={inputClass (invalid)}
-		       value={title}
-		       placeholder={titleLoading ? 'Loading...' : ''}
-		       onChange={ev => setTitle (ev.target.value)}
-		       disabled={titleAutoFlg}/>)}
+		<div className="space-y-2">
+		  <input type="text"
+			 aria-describedby={describedBy}
+			 aria-invalid={invalid}
+			 className={inputClass (invalid)}
+			 value={title}
+			 placeholder={titleLoading ? 'Loading...' : ''}
+			 onChange={ev => setTitle (ev.target.value)}
+			 disabled={titleAutoFlg}/>
+		  <div className="flex flex-wrap items-center gap-2 text-sm">
+		    <span>
+		      {titleAutoFlg
+		       ? 'URL 入力時に自動取得します．'
+		       : titleFetchMode === 'manual'
+			 ? '自動取得しません．必要なら手動で取得できます．'
+			 : '取得機能は無効です．'}
+		    </span>
+		    {titleFetchVisible && !(titleAutoFlg) && (
+			<Button
+			    type="button"
+			    variant="outline"
+			    onClick={() => void fetchTitle ()}
+			    disabled={!(url) || titleLoading}>
+			  取得
+			</Button>)}
+		  </div>
+		</div>)}
 	  </FormField>
 
 	  {/* サムネール */}
-	  <FormField
-	      checkBox={{
-		  label:    '自動',
-		  checked:  thumbnailAutoFlg,
-		  onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}
-	      label="サムネール"
-	      messages={fieldErrors.thumbnail}>
+	  <FormField label="サムネール" messages={fieldErrors.thumbnail}>
 	    {({ describedBy, invalid }) => (
 		<>
+		  <div className="mb-2 flex flex-wrap items-center gap-2 text-sm">
+		    <span>
+		      {thumbnailAutoFlg
+		       ? 'URL 入力時に自動取得します．'
+		       : thumbnailFetchMode === 'manual'
+			 ? '自動取得しません．必要なら手動で取得できます．'
+			 : '取得機能は無効です．'}
+		    </span>
+		    {thumbnailFetchVisible && !(thumbnailAutoFlg) && (
+			<Button
+			    type="button"
+			    variant="outline"
+			    onClick={() => void fetchThumbnail ()}
+			    disabled={!(url) || thumbnailLoading}>
+			  取得
+			</Button>)}
+		  </div>
 		  {thumbnailAutoFlg
 		   ? (thumbnailLoading
 		      ? <p className="text-gray-500 text-sm">Loading...</p>

frontend/src/pages/posts/PostSearchPage.tsx

@@ -85,10 +85,6 @@ const PostSearchPage: FC = () => {
       queryKey: postsKeys.index (keys),
       queryFn: () => fetchPosts (keys) })
   const results = data?.posts ?? []
-  const visibleResults =
-      settings.viewedPostDisplay === 'hide'
-      ? results.filter (row => !(row.viewed))
-      : results
   const totalPages = data ? Math.ceil (data.count / limit) : 0
 
   useEffect (() => {
@@ -247,7 +243,7 @@ const PostSearchPage: FC = () => {
 	  </form>
 	</div>
 
-	{loading ? 'Loading...' : (visibleResults.length > 0 ? (
+	{loading ? 'Loading...' : (results.length > 0 ? (
 	    <div className="mt-4">
 	      <div className="overflow-x-auto">
 		<table className="w-full min-w-[1200px] table-fixed border-collapse">
@@ -303,7 +299,7 @@ const PostSearchPage: FC = () => {
 		    </tr>
 		  </thead>
 		  <tbody>
-		    {visibleResults.map (row => (
+		    {results.map (row => (
 			<tr
 			    key={row.id}
 			    className={