@asteby/metacore-runtime-react 23.3.0 → 23.5.0

package/src/dialogs/dynamic-record.tsx

@@ -62,6 +62,7 @@ import {
     useIsDarkTheme,
     type DisplayOption,
 } from '../display-value'
+import { MediaValue, RichText } from '../rich-url'
 import { generateBadgeStyles } from '@asteby/metacore-ui/lib'
 import { CollectionCell, type ItemField } from '../collection-cell'
 import type { ActionFieldDef, RelationMeta } from '../types'
@@ -1120,18 +1121,20 @@ export function ViewValue({
     // carrying `cellStyle:'url'` (e.g. `github_url`) renders as a clickable
     // external link, opening in a new tab, truncated.
     if ((renderAs === 'url' || renderAs === 'link') && value) {
-        const urlStr = String(value)
-        const href = /^https?:\/\//i.test(urlStr) ? urlStr : `https://${urlStr}`
+        // Shared media renderer (same as the table cell): an image URL shows a
+        // larger inline thumbnail, a file a chip, else a compact link chip with
+        // a smart label — never the raw 120-char URL.
         return (
-            <a
-                href={href}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
-            >
-                <ExternalLink className="h-3.5 w-3.5 shrink-0" />
-                <span className="truncate max-w-[360px]">{urlStr}</span>
-            </a>
+            <div className="py-1">
+                <MediaValue
+                    url={String(value)}
+                    getImageUrl={getImageUrl}
+                    label={field.styleConfig?.label as string | undefined}
+                    icon={field.styleConfig?.icon as string | undefined}
+                    thumbHeight={200}
+                    maxLabelWidth={360}
+                />
+            </div>
         )
     }
 
@@ -1240,16 +1243,32 @@ export function ViewValue({
     }
 
     const display = formatDisplayValue(value, field)
+    // Free text may embed URLs (a github body, notes, a long-text field). Turn
+    // them into rich chips / inline thumbnails with the shared linkifier instead
+    // of showing raw URLs — the rest of the text is preserved verbatim.
+    const hasUrl = display !== '—' && /(https?:\/\/|www\.)\S/i.test(display)
 
-    if (field.type === 'textarea') {
+    if (field.type === 'textarea' || renderAs === 'textarea' || renderAs === 'long-text') {
         return (
-            <p className="text-sm whitespace-pre-wrap rounded-md bg-muted/40 p-3 min-h-[60px]">
-                {display}
+            <p className="text-sm whitespace-pre-wrap rounded-md bg-muted/40 p-3 min-h-[60px] [&_img]:my-1">
+                {hasUrl ? (
+                    <RichText text={display} getImageUrl={getImageUrl} imageHeight={200} />
+                ) : (
+                    display
+                )}
             </p>
         )
     }
 
-    return <p className="text-sm py-1">{display}</p>
+    return (
+        <p className="text-sm py-1">
+            {hasUrl ? (
+                <RichText text={display} getImageUrl={getImageUrl} imageHeight={160} />
+            ) : (
+                display
+            )}
+        </p>
+    )
 }
 
 // IconNameViewValue — read view for a column whose value is a lucide icon name

package/src/dynamic-columns.tsx

@@ -48,6 +48,7 @@ import {
     statusColorFor,
     useIsDarkTheme,
 } from './display-value'
+import { MediaValue } from './rich-url'
 import { OptionsContext } from './options-context'
 import { DynamicIcon, isLucideIconName } from './dynamic-icon'
 import { CollectionCell } from './collection-cell'
@@ -843,33 +844,24 @@ export function makeDefaultGetDynamicColumns(
                                 : value
                             if (!rawUrl) return <EmptyCell />
                             const urlStr = String(rawUrl)
-                            const href = /^https?:\/\//i.test(urlStr) ? urlStr : `https://${urlStr}`
-                            let label: string
-                            if (labelField) {
-                                label = String(getNestedValue(row.original, labelField) ?? href)
-                            } else {
-                                try {
-                                    label = new URL(href).hostname
-                                } catch {
-                                    label = urlStr
-                                }
-                            }
-                            const isExternal = !/^https?:\/\/(localhost|127\.)/i.test(href)
-                            const newTab =
-                                styleCfg(col, 'new_tab', 'newTab') === true || isExternal
-                            const iconName = styleCfg(col, 'icon') || 'ExternalLink'
+                            // Explicit label from a `label_field` wins; otherwise
+                            // the shared primitive derives a smart label (hostname
+                            // / file name). Images render as a small (~h-8) inline
+                            // thumbnail, files as a chip, else a link chip. Same
+                            // renderer as the detail dialog.
+                            const label = labelField
+                                ? String(getNestedValue(row.original, labelField) ?? '')
+                                : undefined
+                            const iconName = styleCfg(col, 'icon')
                             return (
-                                <a
-                                    href={href}
-                                    {...(newTab
-                                        ? { target: '_blank', rel: 'noopener noreferrer' }
-                                        : {})}
-                                    className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
-                                    onClick={(e) => e.stopPropagation()}
-                                >
-                                    <DynamicIcon name={iconName} className="h-3.5 w-3.5 shrink-0" />
-                                    <span className="truncate max-w-[260px]">{label}</span>
-                                </a>
+                                <MediaValue
+                                    url={urlStr}
+                                    getImageUrl={getImageUrl}
+                                    label={label || undefined}
+                                    icon={iconName || undefined}
+                                    thumbHeight={32}
+                                    maxLabelWidth={260}
+                                />
                             )
                         }
 

package/src/dynamic-kanban.tsx

@@ -238,6 +238,28 @@ export function applyLaneTotalsOnMove<T extends { total: number | null }>(
     return next
 }
 
+/**
+ * Formats a lane header's count badge. Three cases:
+ *   - A lane filter/search is active → `shown/loaded` (the client-side narrowed
+ *     count over what this lane has loaded).
+ *   - Otherwise, when the stage's server total is known → `shown` alone once
+ *     everything is loaded (`shown >= total`), else `shown/total` (partial).
+ *   - Total still unknown → just `shown`.
+ * Pure — exported for unit tests.
+ */
+export function formatLaneCount(
+    shown: number,
+    loaded: number,
+    serverTotal: number | null,
+    laneActive: boolean,
+): string {
+    if (laneActive) return `${shown}/${loaded}`
+    if (serverTotal != null) {
+        return shown >= serverTotal ? String(serverTotal) : `${shown}/${serverTotal}`
+    }
+    return String(shown)
+}
+
 /**
  * Picks the columns shown on a card: a `title` column (first searchable column,
  * else first text-ish column) and up to `maxFields` secondary columns. Excludes
@@ -450,6 +472,11 @@ export function DynamicKanban({
     // Active drag card id (for the DragOverlay + drop-zone highlighting).
     const [activeId, setActiveId] = useState<string | null>(null)
 
+    // Monotonic token for the current board load. Bumped on every fetchData so a
+    // slow eager-totals response from a superseded filter set can't inject stale
+    // stage totals into the fresh board.
+    const fetchGenRef = useRef(0)
+
     const sensors = useSensors(
         useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     )
@@ -507,6 +534,7 @@ export function DynamicKanban({
     // change (fetchData's identity changes with filterParams).
     const fetchData = useCallback(async () => {
         if (!metadata) return
+        const gen = ++fetchGenRef.current
         setLoadingData(true)
         try {
             const res = (await api.get(endpoint || `/data/${model}`, {
@@ -519,6 +547,49 @@ export function DynamicKanban({
             setLoadingData(false)
         }
         setLanePagination({})
+        // Eager per-lane totals: so every lane header shows the REAL stage count
+        // on first render (not just what the global page happened to load), fire
+        // one lightweight `per_page=1` request per declared stage — in parallel,
+        // scoped by the SAME active filters/search (`f_<group_by>=<stage>` on top
+        // of filterParams). We read only `meta.total`; the row itself is ignored
+        // (the lane loads its real cards via loadMoreLane on scroll). The
+        // "unassigned" lane can't be stage-scoped, so it keeps its loaded count.
+        const gb = metadata.group_by
+        const declaredStages = deriveStages(metadata)
+        if (gb && declaredStages.length > 0) {
+            void Promise.all(
+                declaredStages.map(async (stage) => {
+                    try {
+                        const r = (await api.get(endpoint || `/data/${model}`, {
+                            params: {
+                                ...filterParams,
+                                page: 1,
+                                per_page: 1,
+                                [`f_${gb}`]: stage.key,
+                            },
+                        })) as { data: ApiResponse<any[]> & { meta?: any } }
+                        const total = r.data.meta?.total ?? r.data.meta?.count ?? null
+                        if (total == null || gen !== fetchGenRef.current) return
+                        setLanePagination((p) => {
+                            const existing = p[stage.key]
+                            // A real page fetch already learned this lane's total.
+                            if (existing?.total != null) return p
+                            return {
+                                ...p,
+                                [stage.key]: {
+                                    nextPage: existing?.nextPage ?? 1,
+                                    total,
+                                    loading: existing?.loading ?? false,
+                                    done: existing?.done ?? total === 0,
+                                },
+                            }
+                        })
+                    } catch (err) {
+                        // A failed total just leaves the header on the loaded count.
+                    }
+                }),
+            )
+        }
     }, [api, endpoint, model, metadata, pageSize, filterParams])
 
     // Load the next page for ONE lane/stage and append it (deduped by id) into
@@ -1257,11 +1328,7 @@ function KanbanLane({
                         {t(stage.label, { defaultValue: stage.label })}
                     </Badge>
                     <span className="text-xs font-medium tabular-nums text-muted-foreground">
-                        {laneActive
-                            ? `${count}/${totalCount}`
-                            : serverTotal != null
-                              ? `${count}/${serverTotal}`
-                              : count}
+                        {formatLaneCount(count, totalCount, serverTotal, laneActive)}
                     </span>
                 </div>
                 {/* Lane actions — always visible in muted (a hidden hover-reveal

package/src/index.ts

@@ -129,6 +129,23 @@ export {
     type DynamicColumnsHelpers,
 } from './dynamic-columns'
 export { humanizeToken } from './dynamic-columns-helpers'
+export {
+    UrlChip,
+    FileChip,
+    ImageThumbnail,
+    MediaValue,
+    RichText,
+    linkifyText,
+    classifyUrl,
+    isImageUrl,
+    isFileUrl,
+    ensureHref,
+    smartUrlLabel,
+    fileNameFromUrl,
+    splitTrailingPunct,
+    type UrlKind,
+    type LinkifyOptions,
+} from './rich-url'
 export {
     CollectionCell,
     formatScalar,

package/src/rich-url.tsx

@@ -0,0 +1,359 @@
+/**
+ * Rich URL & media rendering primitives.
+ *
+ * A URL is never shown raw. Depending on what it points at we render:
+ *   - an IMAGE (jpg/png/gif/webp/… or a `link.asteby.com/storage/media/` path)
+ *     → an inline clickable THUMBNAIL that opens the full image in a new tab,
+ *   - a FILE (pdf/zip/docx/…) → a chip with a file icon and the file name,
+ *   - anything else → a compact link CHIP: an external-link glyph plus a short
+ *     smart label (hostname, e.g. "github.com", or the last path segment for a
+ *     file-like URL), with the full URL in a native tooltip.
+ *
+ * These live here (not inline in the table/dialog) so the dynamic TABLE cell
+ * (`dynamic-columns.tsx`) and the read-only DETAIL DIALOG (`dynamic-record.tsx`)
+ * share the EXACT same rendering. Ecosystem rule: shared primitives, zero copy.
+ *
+ * No external requests are made to render a link (no favicon service — CSP /
+ * privacy): the icon is a local lucide glyph.
+ */
+import React from 'react'
+import { cn } from '@asteby/metacore-ui/lib'
+import { DynamicIcon } from './dynamic-icon'
+
+/** Image file extensions we render as an inline thumbnail. */
+const IMAGE_EXT_RE = /\.(jpe?g|png|gif|webp|avif|svg|bmp|ico)(?:[?#].*)?$/i
+
+/**
+ * Storage paths that serve images without a file extension (the link.asteby.com
+ * media CDN hands back opaque ids). Treated as images so uploaded photos still
+ * thumbnail.
+ */
+const MEDIA_PATH_RE = /\/storage\/media\//i
+
+/** Non-image file extensions we render as a download-ish file chip. */
+const FILE_EXT_RE =
+    /\.(pdf|zip|rar|7z|tar|t?gz|docx?|xlsx?|pptx?|csv|txt|json|xml|md|rtf|odt|mp4|mov|avi|mkv|webm|mp3|wav|ogg|flac|apk|dmg|exe|pkg)(?:[?#].*)?$/i
+
+export type UrlKind = 'image' | 'file' | 'link'
+
+/** `true` when the string looks like an image URL/path. */
+export function isImageUrl(url: string): boolean {
+    return IMAGE_EXT_RE.test(url) || MEDIA_PATH_RE.test(url)
+}
+
+/** `true` when the string looks like a non-image downloadable file. */
+export function isFileUrl(url: string): boolean {
+    return FILE_EXT_RE.test(url)
+}
+
+/** Classify a URL so the right primitive (thumbnail / file chip / link) renders. */
+export function classifyUrl(url: string): UrlKind {
+    if (isImageUrl(url)) return 'image'
+    if (isFileUrl(url)) return 'file'
+    return 'link'
+}
+
+/** Ensure a URL is absolute so `<a href>` and `new URL()` behave. */
+export function ensureHref(url: string): string {
+    return /^(https?:)?\/\//i.test(url) || /^(mailto|tel):/i.test(url)
+        ? url
+        : `https://${url}`
+}
+
+/**
+ * A short, human label for a URL. For a file-like URL (last segment carries an
+ * extension) the file name wins ("report.pdf"); otherwise the bare hostname
+ * ("github.com"), so a 120-char issue URL never shows raw. Falls back to the
+ * input when it can't be parsed.
+ */
+export function smartUrlLabel(url: string): string {
+    try {
+        const u = new URL(ensureHref(url))
+        const segs = u.pathname.split('/').filter(Boolean)
+        const last = segs[segs.length - 1]
+        if (last && /\.[a-z0-9]{1,8}$/i.test(last)) {
+            return decodeURIComponent(last)
+        }
+        return u.hostname.replace(/^www\./i, '')
+    } catch {
+        return url
+    }
+}
+
+/** Last path segment (decoded) — the file name for a file/image URL. */
+export function fileNameFromUrl(url: string): string {
+    try {
+        const u = new URL(ensureHref(url))
+        const segs = u.pathname.split('/').filter(Boolean)
+        return decodeURIComponent(segs[segs.length - 1] || u.hostname)
+    } catch {
+        return url.split(/[?#]/)[0].split('/').pop() || url
+    }
+}
+
+/** Stops row-click / dialog-close when a link inside them is clicked. */
+function stop(e: React.MouseEvent) {
+    e.stopPropagation()
+}
+
+/**
+ * Compact link chip: external-link glyph + smart label, full URL in the
+ * tooltip, opens in a new tab. The canonical render for a plain (non-media)
+ * URL, matching the table's `url`/`link` cell.
+ */
+export const UrlChip: React.FC<{
+    url: string
+    label?: string
+    icon?: string
+    /** Smaller label cap for a table/kanban cell. */
+    maxLabelWidth?: number
+    className?: string
+}> = ({ url, label, icon, maxLabelWidth = 260, className }) => {
+    const href = ensureHref(url)
+    const text = label || smartUrlLabel(url)
+    return (
+        <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={url}
+            onClick={stop}
+            className={cn(
+                'inline-flex max-w-full items-center gap-1.5 align-middle text-sm font-medium text-primary hover:underline',
+                className
+            )}
+        >
+            <DynamicIcon name={icon || 'ExternalLink'} className="h-3.5 w-3.5 shrink-0" />
+            <span className="truncate" style={{ maxWidth: maxLabelWidth }}>
+                {text}
+            </span>
+        </a>
+    )
+}
+
+/**
+ * Chip for a downloadable non-image file: file-text glyph + the file name,
+ * opens the file in a new tab.
+ */
+export const FileChip: React.FC<{
+    url: string
+    maxLabelWidth?: number
+    className?: string
+}> = ({ url, maxLabelWidth = 240, className }) => {
+    const href = ensureHref(url)
+    return (
+        <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={url}
+            onClick={stop}
+            className={cn(
+                'inline-flex max-w-full items-center gap-1.5 rounded-md border bg-muted/40 px-2 py-1 align-middle text-sm font-medium text-foreground hover:bg-muted',
+                className
+            )}
+        >
+            <DynamicIcon name="FileText" className="h-3.5 w-3.5 shrink-0 opacity-70" />
+            <span className="truncate" style={{ maxWidth: maxLabelWidth }}>
+                {fileNameFromUrl(url)}
+            </span>
+        </a>
+    )
+}
+
+/**
+ * Inline image thumbnail — rounded, bordered, `object-cover` — that opens the
+ * full image in a new tab. On load error it degrades to a normal link chip so a
+ * dead image URL is still reachable (and never a broken-image icon). `maxHeight`
+ * keeps a cell thumbnail small (~h-8) while the dialog shows a larger preview.
+ */
+export const ImageThumbnail: React.FC<{
+    url: string
+    getImageUrl?: (path: string) => string
+    /** Max rendered height in px. */
+    maxHeight?: number
+    className?: string
+}> = ({ url, getImageUrl, maxHeight = 160, className }) => {
+    const [failed, setFailed] = React.useState(false)
+    const href = ensureHref(url)
+    // Absolute URLs are used verbatim; only relative storage paths go through
+    // the host's image resolver (which prefixes the media base).
+    const src =
+        /^(https?:)?\/\//i.test(url) ? url : getImageUrl ? getImageUrl(url) : url
+    if (failed) return <UrlChip url={url} icon="Image" />
+    return (
+        <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={url}
+            onClick={stop}
+            className="inline-block max-w-full align-middle"
+        >
+            <img
+                src={src}
+                alt={smartUrlLabel(url)}
+                onError={() => setFailed(true)}
+                style={{ maxHeight }}
+                className={cn(
+                    'max-w-full rounded-md border object-cover',
+                    className
+                )}
+            />
+        </a>
+    )
+}
+
+/**
+ * One URL value → the right primitive (thumbnail / file chip / link chip).
+ * Single entry point used by both the table cell and the detail dialog so a URL
+ * renders identically everywhere.
+ */
+export const MediaValue: React.FC<{
+    url: string
+    getImageUrl?: (path: string) => string
+    /** Explicit label for the link chip (from a `label_field`). */
+    label?: string
+    /** Explicit icon for the link chip. */
+    icon?: string
+    /** Thumbnail max height (small in a cell, larger in the dialog). */
+    thumbHeight?: number
+    /** Link/file label truncation cap. */
+    maxLabelWidth?: number
+    className?: string
+}> = ({ url, getImageUrl, label, icon, thumbHeight, maxLabelWidth, className }) => {
+    switch (classifyUrl(url)) {
+        case 'image':
+            return (
+                <ImageThumbnail
+                    url={url}
+                    getImageUrl={getImageUrl}
+                    maxHeight={thumbHeight}
+                    className={className}
+                />
+            )
+        case 'file':
+            return <FileChip url={url} maxLabelWidth={maxLabelWidth} className={className} />
+        default:
+            return (
+                <UrlChip
+                    url={url}
+                    label={label}
+                    icon={icon}
+                    maxLabelWidth={maxLabelWidth}
+                    className={className}
+                />
+            )
+    }
+}
+
+// URL / markdown-link matcher used to linkify free text. Captures either a
+// markdown `[label](url)` or a bare http(s)/www URL. `[^\s<]+` is greedy on
+// purpose — trailing punctuation is trimmed afterwards by `splitTrailingPunct`.
+const LINK_IN_TEXT_RE =
+    /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)|(https?:\/\/[^\s<]+|www\.[^\s<]+)/gi
+
+/**
+ * Peel trailing punctuation a URL shouldn't swallow (sentence period, closing
+ * bracket, quote). A closing paren is kept only when the URL itself opened one
+ * (Wikipedia-style `(…)` paths), so `(see https://x.com/a)` links `https://x.com/a`
+ * but `https://en.wikipedia.org/wiki/Foo_(bar)` keeps its paren.
+ */
+export function splitTrailingPunct(match: string): [string, string] {
+    const m = match.match(/[).,;:!?\]}'"»›]+$/)
+    if (!m) return [match, '']
+    let trail = m[0]
+    let core = match.slice(0, match.length - trail.length)
+    if (trail.startsWith(')')) {
+        const opens = (core.match(/\(/g) || []).length
+        const closes = (core.match(/\)/g) || []).length
+        if (opens > closes) {
+            core += ')'
+            trail = trail.slice(1)
+        }
+    }
+    return [core, trail]
+}
+
+export interface LinkifyOptions {
+    getImageUrl?: (path: string) => string
+    /** Max height for an inline image found in the text. */
+    imageHeight?: number
+}
+
+/**
+ * Turn free text into React nodes, replacing every URL (bare or markdown
+ * `[label](url)`) with the matching rich primitive: an inline thumbnail for an
+ * image URL, a file chip for a file, otherwise a link chip. Plain text between
+ * matches is preserved verbatim (caller keeps `whitespace-pre-wrap`).
+ */
+export function linkifyText(
+    text: string,
+    opts: LinkifyOptions = {}
+): React.ReactNode[] {
+    if (!text) return []
+    const nodes: React.ReactNode[] = []
+    const re = new RegExp(LINK_IN_TEXT_RE.source, 'gi')
+    let lastIndex = 0
+    let key = 0
+    let m: RegExpExecArray | null
+    while ((m = re.exec(text)) !== null) {
+        const [full, mdLabel, mdUrl, bareUrl] = m
+        const start = m.index
+        if (start > lastIndex) nodes.push(text.slice(lastIndex, start))
+
+        if (mdUrl) {
+            // Markdown link: honor the author's label, keep media inline.
+            const kind = classifyUrl(mdUrl)
+            if (kind === 'image') {
+                nodes.push(
+                    <ImageThumbnail
+                        key={key}
+                        url={mdUrl}
+                        getImageUrl={opts.getImageUrl}
+                        maxHeight={opts.imageHeight ?? 200}
+                    />
+                )
+            } else if (kind === 'file') {
+                nodes.push(<FileChip key={key} url={mdUrl} />)
+            } else {
+                nodes.push(<UrlChip key={key} url={mdUrl} label={mdLabel} />)
+            }
+            lastIndex = start + full.length
+        } else {
+            const [core, trail] = splitTrailingPunct(bareUrl)
+            const kind = classifyUrl(core)
+            if (kind === 'image') {
+                nodes.push(
+                    <ImageThumbnail
+                        key={key}
+                        url={core}
+                        getImageUrl={opts.getImageUrl}
+                        maxHeight={opts.imageHeight ?? 200}
+                    />
+                )
+            } else if (kind === 'file') {
+                nodes.push(<FileChip key={key} url={core} />)
+            } else {
+                nodes.push(<UrlChip key={key} url={core} />)
+            }
+            if (trail) nodes.push(trail)
+            lastIndex = start + bareUrl.length
+        }
+        key++
+    }
+    if (lastIndex < text.length) nodes.push(text.slice(lastIndex))
+    return nodes
+}
+
+/**
+ * Linkified free text. Renders the raw string with every URL turned into a rich
+ * chip/thumbnail — the read view for a long-text / textarea / body field.
+ */
+export const RichText: React.FC<{
+    text: string
+    getImageUrl?: (path: string) => string
+    imageHeight?: number
+}> = ({ text, getImageUrl, imageHeight }) => (
+    <>{linkifyText(text, { getImageUrl, imageHeight })}</>
+)