feat: relation field and picker

web/src/components/EntryTable.vue

@@ -9,11 +9,13 @@ import { EMPTY_TEXT, formatEntryDate } from '@/lib/entryCells'
 import { ENTRY_SORT_FIELDS, sortParts } from '@/lib/entryListQuery'
 import { fieldTypeSpec } from '@/lib/fieldTypes'
 import { mediaOf } from '@/lib/mediaField'
+import { summariesOf } from '@/lib/relationField'
 import { entryPath } from '@/lib/routePaths'
 
 const ID_WIDTH = 'w-16.5'
 const NARROW_WIDTH = 'w-23'
 const FIELD_WIDTH = 'w-33'
+const WIDE_WIDTH = 'w-50'
 const CREATED_WIDTH = 'w-30.5'
 const UPDATED_WIDTH = 'w-40.5'
 const UPDATED_BY_WIDTH = 'w-37'
@@ -37,7 +39,11 @@ function widthOf(field: BuiltinField, index: number) {
 	if (index === 0) {
 		return ''
 	}
-	return fieldTypeSpec(field.type).narrowColumn ? NARROW_WIDTH : FIELD_WIDTH
+	const spec = fieldTypeSpec(field.type)
+	if (spec.wideColumn) {
+		return WIDE_WIDTH
+	}
+	return spec.narrowColumn ? NARROW_WIDTH : FIELD_WIDTH
 }
 
 function column(id: string, header: string, width: string, edge = 'px-1.5') {
@@ -152,6 +158,7 @@ watchPostEffect(() => {
 						:field="field"
 						:value="row.original.data[field.key]"
 						:image="mediaOf(row.original, field.key)"
+						:relations="summariesOf(row.original, field.key)"
 						class="min-w-0"
 					/>
 				</RouterLink>
@@ -160,6 +167,7 @@ watchPostEffect(() => {
 					:field="field"
 					:value="row.original.data[field.key]"
 					:image="mediaOf(row.original, field.key)"
+					:relations="summariesOf(row.original, field.key)"
 				/>
 			</template>