update icons and add placeholder prop to code interface

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',
 				},
 			},