add description to all displays

app/src/displays/collection/index.ts

@@ -3,7 +3,8 @@ import DisplayCollection from './collection.vue';
 
 export default defineDisplay(({ i18n }) => ({
 	id: 'collection',
-	name: i18n.t('collection'),
+	name: i18n.t('displays.collection.collection'),
+	description: i18n.t('displays.collection.description'),
 	types: ['string'],
 	icon: 'label',
 	handler: DisplayCollection,
@@ -15,7 +16,7 @@ export default defineDisplay(({ i18n }) => ({
 			meta: {
 				interface: 'toggle',
 				options: {
-					label: `Show the collection's icon`,
+					label: i18n.t('displays.collection.icon_label'),
 				},
 			},
 		},

app/src/displays/color-dot/index.ts

@@ -3,14 +3,15 @@ import DisplayColorDot from './color-dot.vue';
 
 export default defineDisplay(({ i18n }) => ({
 	id: 'color-dot',
-	name: i18n.t('color_dot'),
+	name: i18n.t('displays.color-dot.color-dot'),
+	description: i18n.t('displays.color-dot.description'),
 	types: ['string'],
 	icon: 'flag',
 	handler: DisplayColorDot,
 	options: [
 		{
 			field: 'defaultColor',
-			name: i18n.t('default_color'),
+			name: i18n.t('displays.color-dot.default_color'),
 			type: 'string',
 			meta: {
 				interface: 'color',
@@ -25,7 +26,7 @@ export default defineDisplay(({ i18n }) => ({
 			name: i18n.t('choices'),
 			type: 'json',
 			meta: {
-				note: i18n.t('displays.color-dot.choices-note'),
+				note: i18n.t('displays.color-dot.choices_note'),
 				interface: 'repeater',
 				options: {
 					template: '{{text}}',

app/src/displays/datetime/index.ts

@@ -3,18 +3,19 @@ import DisplayDateTime from './datetime.vue';
 
 export default defineDisplay(({ i18n }) => ({
 	id: 'datetime',
-	name: i18n.t('datetime'),
+	name: i18n.t('displays.datetime.datetime'),
+	description: i18n.t('displays.datetime.description'),
 	icon: 'query_builder',
 	handler: DisplayDateTime,
 	options: [
 		{
 			field: 'relative',
-			name: i18n.t('relative'),
+			name: i18n.t('displays.datetime.relative'),
 			type: 'boolean',
 			meta: {
 				interface: 'toggle',
 				options: {
-					label: 'Show relative time, eg: 5 minutes ago',
+					label: i18n.t('displays.datetime.relative_label'),
 				},
 			},
 		},

app/src/displays/file/index.ts

@@ -3,7 +3,8 @@ import DisplayFile from './file.vue';
 
 export default defineDisplay(({ i18n }) => ({
 	id: 'file',
-	name: i18n.t('file'),
+	name: i18n.t('displays.file.file'),
+	description: i18n.t('displays.file.description'),
 	icon: 'insert_drive_file',
 	handler: DisplayFile,
 	types: ['uuid'],

app/src/displays/filesize/index.ts

@@ -3,7 +3,8 @@ import handler from './handler';
 
 export default defineDisplay(({ i18n }) => ({
 	id: 'filesize',
-	name: i18n.t('filesize'),
+	name: i18n.t('displays.filesize.filesize'),
+	description: i18n.t('displays.filesize.description'),
 	icon: 'description',
 	handler: handler,
 	options: [],

app/src/displays/formatted-value/index.ts

@@ -3,19 +3,20 @@ import DisplayFormattedValue from './formatted-value.vue';
 
 export default defineDisplay(({ i18n }) => ({
 	id: 'formatted-value',
-	name: i18n.t('formatted_value'),
+	name: i18n.t('displays.formatted-value.formatted-value'),
+	description: i18n.t('displays.formatted-value.description'),
 	types: ['string', 'text'],
 	icon: 'text_format',
 	handler: DisplayFormattedValue,
 	options: [
 		{
 			field: 'formatTitle',
-			name: i18n.t('format_title'),
+			name: i18n.t('displays.formatted-value.format_title'),
 			meta: {
 				width: 'half',
 				interface: 'toggle',
 				options: {
-					label: i18n.t('auto_format_casing'),
+					label: i18n.t('displays.formatted-value.format_title_label'),
 				},
 			},
 			schema: {
@@ -29,7 +30,7 @@ export default defineDisplay(({ i18n }) => ({
 				width: 'half',
 				interface: 'toggle',
 				options: {
-					label: i18n.t('use_bold_style'),
+					label: i18n.t('displays.formatted-value.bold_label'),
 				},
 			},
 		},

app/src/displays/icon/index.ts

@@ -3,7 +3,8 @@ import DisplayIcon from './icon.vue';
 
 export default defineDisplay(({ i18n }) => ({
 	id: 'icon',
-	name: i18n.t('icon'),
+	name: i18n.t('displays.icon.icon'),
+	description: i18n.t('displays.icon.description'),
 	icon: 'thumb_up',
 	handler: DisplayIcon,
 	options: [
@@ -15,7 +16,7 @@ export default defineDisplay(({ i18n }) => ({
 				interface: 'toggle',
 				width: 'half',
 				options: {
-					label: i18n.t('displays.icon.use_filled_variant'),
+					label: i18n.t('displays.icon.filled_label'),
 				},
 			},
 		},

app/src/displays/image/index.ts

@@ -3,18 +3,22 @@ import DisplayImage from './image.vue';
 
 export default defineDisplay(({ i18n }) => ({
 	id: 'image',
-	name: i18n.t('image'),
+	name: i18n.t('displays.image.image'),
+	description: i18n.t('displays.image.description'),
 	types: ['uuid'],
 	icon: 'insert_photo',
 	handler: DisplayImage,
 	options: [
 		{
 			field: 'circle',
-			name: i18n.t('circle'),
+			name: i18n.t('displays.image.circle'),
 			type: 'boolean',
 			meta: {
 				width: 'half',
 				interface: 'toggle',
+				options: {
+					label: i18n.t('displays.image.circle_label'),
+				},
 			},
 		},
 	],

app/src/displays/labels/index.ts

@@ -3,14 +3,15 @@ import DisplayLabels from './labels.vue';
 
 export default defineDisplay(({ i18n }) => ({
 	id: 'labels',
-	name: i18n.t('labels'),
+	name: i18n.t('displays.labels.labels'),
+	description: i18n.t('displays.labels.description'),
 	types: ['string', 'json'],
 	icon: 'flag',
 	handler: DisplayLabels,
 	options: [
 		{
 			field: 'defaultForeground',
-			name: i18n.t('default_foreground'),
+			name: i18n.t('displays.labels.default_foreground'),
 			type: 'string',
 			meta: {
 				interface: 'color',
@@ -22,7 +23,7 @@ export default defineDisplay(({ i18n }) => ({
 		},
 		{
 			field: 'defaultBackground',
-			name: i18n.t('default_background'),
+			name: i18n.t('displays.labels.default_background'),
 			type: 'string',
 			meta: {
 				interface: 'color',
@@ -39,6 +40,9 @@ export default defineDisplay(({ i18n }) => ({
 			meta: {
 				width: 'half-left',
 				interface: 'toggle',
+				options: {
+					label: i18n.t('displays.labels.format_label'),
+				},
 			},
 			schema: {
 				default_value: true,

app/src/displays/mime-type/index.ts

@@ -4,17 +4,18 @@ import { defineDisplay } from '@/displays/define';
 
 export default defineDisplay(({ i18n }) => ({
 	id: 'mime-type',
-	name: i18n.t('mime_type'),
+	name: i18n.t('displays.mime-type.mime-type'),
+	description: i18n.t('displays.mime-type.description'),
 	icon: 'picture_as_pdf',
 	options: [
 		{
 			field: 'showAsExtension',
-			name: i18n.t('extension_only'),
+			name: i18n.t('displays.mime-type.extension_only'),
 			type: 'boolean',
 			meta: {
 				interface: 'toggle',
 				options: {
-					label: i18n.t('only_show_the_file_extension'),
+					label: i18n.t('displays.mime-type.extension_only_label'),
 				},
 			},
 		},

app/src/displays/rating/index.ts

@@ -4,6 +4,7 @@ import DisplayRating from './rating.vue';
 export default defineDisplay(({ i18n }) => ({
 	id: 'rating',
 	name: i18n.t('displays.rating.rating'),
+	description: i18n.t('displays.rating.description'),
 	icon: 'star',
 	handler: DisplayRating,
 	options: [

app/src/displays/related-values/index.ts

@@ -12,7 +12,8 @@ type Options = {
 
 export default defineDisplay(({ i18n }) => ({
 	id: 'related-values',
-	name: i18n.t('related_values'),
+	name: i18n.t('displays.related-values.related-values'),
+	description: i18n.t('displays.related-values.description'),
 	icon: 'settings_ethernet',
 	handler: DisplayRelatedValues,
 	options: [

app/src/displays/user/index.ts

@@ -3,7 +3,8 @@ import DisplayUser from './user.vue';
 
 export default defineDisplay(({ i18n }) => ({
 	id: 'user',
-	name: i18n.t('user'),
+	name: i18n.t('displays.user.user'),
+	description: i18n.t('displays.user.description'),
 	types: ['uuid'],
 	icon: 'person',
 	handler: DisplayUser,
@@ -43,6 +44,9 @@ export default defineDisplay(({ i18n }) => ({
 			meta: {
 				width: 'half',
 				interface: 'toggle',
+				options: {
+					label: i18n.t('displays.user.circle_label'),
+				},
 			},
 		},
 	],

app/src/lang/en-US/displays.json

@@ -1,28 +1,83 @@
 {
 	"displays": {
-		"icon": {
-			"icon": "Icon",
-			"filled": "Filled",
-			"use_filled_variant": "Use the filled variant"
+		"collection": {
+			"collection": "Collection",
+			"description": "Display a collection.",
+			"icon_label": "Show the collection's icon"
 		},
 		"color-dot": {
-			"choices-note": "Set colors relative to the text."
+			"color-dot": "Color Dot",
+			"description": "Display a colored dot.",
+			"default_color": "Default Color",
+			"choices_note": "Set colors relative to the text."
 		},
-		"format-title": {
-			"format-title": "Format Title"
+		"datetime": {
+			"datetime": "Datetime",
+			"description": "Display values related to time.",
+			"relative": "Relative",
+			"relative_label": "Show relative time, eg: 5 minutes ago"
+		},
+		"file": {
+			"file": "File",
+			"description": "Display files."
+		},
+		"file-size": {
+			"file-size": "File Size",
+			"description": "Display the size of a file."
+		},
+		"formatted-value": {
+			"formatted-value": "Formatted Value",
+			"description": "Display a formatted version of the text.",
+			"format_title": "Format Title",
+			"format_title_label": "Auto-format casing",
+			"bold_label": "Use bold style"
+		},
+		"icon": {
+			"icon": "Icon",
+			"description": "Display an icon.",
+			"filled": "Filled",
+			"filled_label": "Use the filled variant"
+		},
+		"image": {
+			"image": "Image",
+			"description": "Display a tiny image preview.",
+			"circle": "Circle",
+			"circle_label": "Display as a circle"
+		},
+		"labels": {
+			"labels": "Labels",
+			"description": "Display either a single or a list of labels.",
+			"default_foreground": "Default Foreground",
+			"default_background": "Default Background",
+			"format_label": "Format each label"
+
+		},
+		"mime-type": {
+			"mime-type": "MIME Type",
+			"description": "Show the MIME-Type of a file.",
+			"extension_only": "Extension Only",
+			"extension_only_label": "Only show the file extension"
 		},
 		"rating": {
 			"rating": "Rating",
+			"description": "Visualize a number as stars relative to the max-value.",
 			"simple": "Simple",
 			"simple_label": "Show stars in a simple format."
 		},
 		"raw": {
 			"raw": "Raw Value"
 		},
+		"related-values": {
+			"related-values": "Related Values",
+			"description": "Display relative values."
+		},
 		"user": {
+			"user": "User",
+			"description": "Display a directus user.",
 			"avatar": "Avatar",
 			"name": "Name",
-			"both": "Both"
+			"both": "Both",
+			"circle_label": "Show user in a circle"
 		}
 	}
 }