update icons and add placeholder prop to code interface

app/src/displays/file/index.ts

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

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

@@ -13,7 +13,7 @@ type Options = {
 export default defineDisplay(({ i18n }) => ({
 	id: 'related-values',
 	name: i18n.t('related_values'),
-	icon: 'text_fields',
+	icon: 'settings_ethernet',
 	handler: DisplayRelatedValues,
 	options: [
 		/** @todo make this a component so we have dynamic collection for display template component */

app/src/interfaces/checkboxes/index.ts

@@ -3,9 +3,10 @@ import InterfaceCheckboxes from './checkboxes.vue';
 
 export default defineInterface(({ i18n }) => ({
 	id: 'checkboxes',
-	name: i18n.t('checkboxes'),
+	name: i18n.t('interfaces.checkboxes.checkboxes'),
 	icon: 'check_box',
 	component: InterfaceCheckboxes,
+	description: i18n.t('interfaces.checkboxes.description'),
 	types: ['json'],
 	options: [
 		{
@@ -43,7 +44,7 @@ export default defineInterface(({ i18n }) => ({
 		},
 		{
 			field: 'allowOther',
-			name: i18n.t('allow_other'),
+			name: i18n.t('interfaces.checkboxes.allow_other'),
 			type: 'boolean',
 			meta: {
 				width: 'half',
@@ -76,9 +77,6 @@ export default defineInterface(({ i18n }) => ({
 				width: 'half',
 				interface: 'icon',
 			},
-			schema: {
-				default_value: 'check_box',
-			},
 		},
 		{
 			field: 'iconOff',
@@ -88,9 +86,6 @@ export default defineInterface(({ i18n }) => ({
 				width: 'half',
 				interface: 'icon',
 			},
-			schema: {
-				default_value: 'check_box_outline_blank',
-			},
 		},
 	],
 	recommendedDisplays: ['tags'],

app/src/interfaces/code/code.vue

@@ -19,6 +19,7 @@ import 'codemirror/addon/search/matchesonscrollbar.js';
 import 'codemirror/addon/scroll/annotatescrollbar.js';
 import 'codemirror/addon/lint/lint.js';
 import 'codemirror/addon/search/search.js';
+import 'codemirror/addon/display/placeholder.js';
 
 import 'codemirror/addon/comment/comment.js';
 import 'codemirror/addon/dialog/dialog.js';
@@ -48,6 +49,10 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		placeholder: {
+			type: String,
+			default: null,
+		},
 		language: {
 			type: String,
 			default: 'text/plain',
@@ -235,6 +240,7 @@ export default defineComponent({
 					lineNumbers: props.lineNumber,
 					readOnly: props.disabled ? 'nocursor' : false,
 					mode: props.language,
+					placeholder: props.placeholder,
 				},
 				props.altOptions ? props.altOptions : {}
 			);
@@ -296,6 +302,12 @@ export default defineComponent({
 	text-align: right;
 }
 
+::v-deep .CodeMirror {
+	.CodeMirror-placeholder {
+		color: var(--foreground-subdued);
+	}
+}
+
 .v-button {
 	position: absolute;
 	top: 10px;

app/src/interfaces/code/index.ts

@@ -12,7 +12,8 @@ choices.push({ text: 'JSON', value: 'JSON' });
 
 export default defineInterface(({ i18n }) => ({
 	id: 'code',
-	name: i18n.t('code'),
+	name: i18n.t('interfaces.code.code'),
+	description: i18n.t('interfaces.code.description'),
 	icon: 'code',
 	component: InterfaceCode,
 	types: ['string', 'json', 'text'],
@@ -29,7 +30,7 @@ export default defineInterface(({ i18n }) => ({
 		},
 		{
 			field: 'lineNumber',
-			name: i18n.t('line_number'),
+			name: i18n.t('interfaces.code.line_number'),
 			type: 'boolean',
 			meta: {
 				width: 'half',
@@ -47,6 +48,7 @@ export default defineInterface(({ i18n }) => ({
 				width: 'full',
 				interface: 'code',
 				options: {
+					placeholder: i18n.t('interfaces.code.placeholder'),
 					language: 'text/plain',
 				},
 			},

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

@@ -1,5 +1,16 @@
 {
 	"interfaces": {
-
+		"checkboxes": {
+			"checkboxes": "Checkboxes",
+			"description": "Choose between multiple options via checkboxes.",
+			"allow_other": "Allow Other",
+			"enable_custom_values": "Enable custom values"
+		},
+		"code": {
+			"code": "Code",
+			"description": "Write or share code snippets.",
+			"line_number": "Line Number",
+			"placeholder": "Enter code here..."
+		}
 	}
 }