#399

frontend/src/components/TagLink.tsx

@@ -4,9 +4,13 @@ import { cn } from '@/lib/utils'
 
 import type { ComponentProps, CSSProperties, FC, HTMLAttributes } from 'react'
 
-import type { Tag } from '@/types'
+import type { Category, Tag } from '@/types'
 
-type CommonProps = { 
+type LightweightTag = {
+    name:     string
+    category: Category }
+
+type FullCommonProps = {
     tag:        Tag
     nestLevel?: number
     truncateOnMobile?: boolean
@@ -14,18 +18,43 @@ type CommonProps = {
     withCount?: boolean }
 
 type PropsWithLink =
-    & CommonProps
+    & FullCommonProps
     & { linkFlg?: true }
     & Partial<ComponentProps<typeof PrefetchLink>>
 
 type PropsWithoutLink =
-    & CommonProps
+    & FullCommonProps
     & { linkFlg: false }
     & Partial<HTMLAttributes<HTMLSpanElement>>
 
+type LightweightPropsWithLink =
+    & {
+	tag:              LightweightTag
+	nestLevel?:       number
+	truncateOnMobile?: boolean
+	withWiki:         false
+	withCount:        false
+	linkFlg?:         true }
+    & Partial<ComponentProps<typeof PrefetchLink>>
+
+type LightweightPropsWithoutLink =
+    & {
+	tag:              LightweightTag
+	nestLevel?:       number
+	truncateOnMobile?: boolean
+	withWiki:         false
+	withCount:        false
+	linkFlg:          false }
+    & Partial<HTMLAttributes<HTMLSpanElement>>
+
 type Props =
     | PropsWithLink
     | PropsWithoutLink
+    | LightweightPropsWithLink
+    | LightweightPropsWithoutLink
+
+const isFullTag = (tag: Tag | LightweightTag): tag is Tag =>
+    'id' in tag
 
 
 const TagLink: FC<Props> = ({ tag,
@@ -50,12 +79,13 @@ const TagLink: FC<Props> = ({ tag,
       'inline-flex min-w-0 max-w-full flex-nowrap items-stretch align-baseline gap-x-1 md:items-baseline'
   const markerWrapClass = 'shrink-0 self-start md:self-auto'
   const countClass = 'shrink-0 self-end md:self-auto'
+  const matchedAlias = isFullTag (tag) ? tag.matchedAlias : null
   const textTitle = title
-      ?? (tag.matchedAlias == null ? tag.name : `${ tag.matchedAlias } → ${ tag.name }`)
+      ?? (matchedAlias == null ? tag.name : `${ matchedAlias } → ${ tag.name }`)
 
   return (
       <span className={rootClass}>
-	{(linkFlg && withWiki) && (
+	{(linkFlg && withWiki && isFullTag (tag)) && (
 	    <span className={markerWrapClass}>
 	      {(tag.materialId != null || tag.hasWiki || tag.hasDeerjikists)
 	       ? (
@@ -118,7 +148,7 @@ const TagLink: FC<Props> = ({ tag,
 		style={{ paddingLeft: `${ (nestLevel - 1) }rem` }}>
 	      ↳
 	    </span>)}
-	{tag.matchedAlias != null && (
+	{matchedAlias != null && (
 	    <>
 	      <span
 		  title={textTitle}
@@ -126,7 +156,7 @@ const TagLink: FC<Props> = ({ tag,
 		  style={colourStyle}
 		  {...props}>
 		<ResponsiveMarqueeText
-		    text={tag.matchedAlias}
+		    text={matchedAlias}
 		    title={textTitle}
 		    truncateOnMobile={truncateOnMobile}/>
 	      </span>
@@ -156,7 +186,7 @@ const TagLink: FC<Props> = ({ tag,
 		  title={textTitle}
 		  truncateOnMobile={truncateOnMobile}/>
 	    </span>)}
-	{withCount && (
+	{(withCount && isFullTag (tag)) && (
 	    <span className={countClass}>{tag.postCount}</span>)}
       </span>)
 }

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