#399

frontend/src/components/posts/import/PostImportRowSummary.tsx

@@ -1,4 +1,5 @@
 import FieldError from '@/components/common/FieldError'
+import PostImportTagLinks from '@/components/posts/import/PostImportTagLinks'
 import { Button } from '@/components/ui/button'
 import PostImportThumbnailPreview from '@/components/posts/import/PostImportThumbnailPreview'
 import PostImportStatusBadge from '@/components/posts/import/PostImportStatusBadge'
@@ -90,10 +91,7 @@ const PostImportRowSummary: FC<Props> = (
             <div className="truncate text-xs text-neutral-600 dark:text-neutral-300">
               {row.url}
             </div>
-            {String (row.attributes.tags ?? '') && (
-                <div className="truncate text-xs text-neutral-500 dark:text-neutral-400">
-                  {String (row.attributes.tags ?? '')}
-                </div>)}
+            <PostImportTagLinks tags={row.displayTags}/>
             <div className="text-xs text-neutral-500 dark:text-neutral-400">
               {summaryDate (row)}
             </div>
@@ -153,10 +151,7 @@ const PostImportRowSummary: FC<Props> = (
               <div className="flex flex-wrap gap-2">
                 {displayStatus != null && <PostImportStatusBadge value={displayStatus}/>}
               </div>
-              {String (row.attributes.tags ?? '') && (
-                  <div className="text-xs text-neutral-500 dark:text-neutral-400">
-                    {String (row.attributes.tags ?? '')}
-                  </div>)}
+              <PostImportTagLinks tags={row.displayTags}/>
               <div className="text-xs text-neutral-500 dark:text-neutral-400">
                 {summaryDate (row)}
               </div>

frontend/src/components/posts/import/PostImportTagLinks.tsx

@@ -0,0 +1,35 @@
+import TagLink from '@/components/TagLink'
+
+import type { FC } from 'react'
+
+import type { PostImportDisplayTag } from '@/lib/postImportTypes'
+
+type Props = {
+  tags: PostImportDisplayTag[] | undefined }
+
+const PostImportTagLinks: FC<Props> = ({ tags }) => {
+  if (tags == null || tags.length === 0)
+    return null
+
+  return (
+      <div className="flex flex-wrap gap-2">
+	{tags.map (tag => {
+	  const key = `${ tag.category }:${ tag.name }:${ tag.sectionLiterals?.join ('|') ?? '' }`
+	  return (
+	      <span key={key} className="inline-flex flex-nowrap items-baseline gap-1">
+		<TagLink
+		    tag={{
+			name: tag.name,
+			category: tag.category }}
+		    withWiki={false}
+		    withCount={false}/>
+		{tag.sectionLiterals?.map (literal => (
+		    <span key={literal} className="text-xs text-neutral-500 dark:text-neutral-400">
+		      {literal}
+		    </span>))}
+	      </span>)
+	})}
+      </div>)
+}
+
+export default PostImportTagLinks