feat(SPA): media field type

web/src/lib/entryCells.ts

@@ -2,6 +2,7 @@ import { formatNumber, t } from '@/i18n'
 import type { BuiltinField } from '@/lib/contentTypes'
 import { fieldTypeSpec, type FieldCellKind } from '@/lib/fieldTypes'
 import { formatDayValue } from '@/lib/entryValue'
+import { isMissingImage, type MediaSummary } from '@/lib/mediaField'
 import { formatAbsoluteDateFromIso } from '@/lib/relativeDate'
 
 export { formatDayValue }
@@ -12,6 +13,7 @@ export interface CellView {
 	kind: CellKind
 	text: string
 	yes?: boolean
+	image?: MediaSummary
 }
 
 export const EMPTY_TEXT = '–'
@@ -37,12 +39,23 @@ export function richTextFirstLine(markdown: string) {
 	return ''
 }
 
-export function describeCell(field: BuiltinField, value: unknown): CellView {
+function thumbnailCell(value: unknown, image: MediaSummary | undefined): CellView {
+	const shown = image ?? { id: Number(value), missing: true as const }
+	return {
+		kind: 'thumbnail',
+		text: isMissingImage(shown) ? '' : shown.filename,
+		image: shown,
+	}
+}
+
+export function describeCell(field: BuiltinField, value: unknown, image?: MediaSummary): CellView {
 	if (value === undefined || value === null || value === '') {
 		return EMPTY
 	}
 	const kind = fieldTypeSpec(field.type).cell
 	switch (kind) {
+		case 'thumbnail':
+			return thumbnailCell(value, image)
 		case 'boolean':
 			return { kind, text: '', yes: value === true }
 		case 'number':
@@ -75,7 +88,7 @@ export function plainCellText(cell: CellView) {
 	if (cell.kind === 'boolean') {
 		return cell.yes ? t('Yes') : t('No')
 	}
-	return cell.text
+	return cell.text || EMPTY_TEXT
 }
 
 export interface CardFields {
@@ -84,8 +97,17 @@ export interface CardFields {
 	choice?: BuiltinField
 }
 
+function isThumbnail(field: BuiltinField) {
+	return fieldTypeSpec(field.type).cell === 'thumbnail'
+}
+
+export function thumbnailColumn(columns: BuiltinField[]) {
+	return columns.find(isThumbnail)
+}
+
 export function cardFields(fields: BuiltinField[]): CardFields {
-	const [first, second] = fields
+	const [first, ...rest] = fields
+	const second = rest.find((field) => !isThumbnail(field))
 	const choice = fields.find((field) => field.type === 'select')
 	return { first, second, choice: choice === first ? undefined : choice }
 }