App multi select default items (#1638)

* feat(frontend): add default items to multi select component

* feat(frontend): set the output correctly

frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte

@@ -19,19 +19,14 @@
 	const { app, worldStore, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 	let items: string[]
 
-	let outputs = initOutput($worldStore, id, {
-		result: [] as string[]
-	})
-
-	let resolvedConfig = initConfig(
+	const resolvedConfig = initConfig(
 		components['multiselectcomponent'].initialData.configuration,
 		configuration
 	)
-	// $: outputs && handleOutputs()
 
-	// function handleOutputs() {
-	// 	value = outputs.result.peak()
-	// }
+	const outputs = initOutput($worldStore, id, {
+		result: [] as string[]
+	})
 
 	let value: string[] | undefined = outputs?.result.peak()
 
@@ -45,6 +40,17 @@
 		}
 	}
 
+	$: resolvedConfig.defaultItems && handleDefaultItems()
+
+	function handleDefaultItems() {
+		if (Array.isArray(resolvedConfig.defaultItems)) {
+			value = resolvedConfig.defaultItems?.map((label) => {
+				return typeof label === 'string' ? label : `NOT_STRING`
+			})
+			outputs?.result.set([...(value ?? [])])
+		}
+	}
+
 	$: css = concatCustomCss($app.css?.multiselectcomponent, customCss)
 
 	$: outerDiv && css?.multiselect?.style && outerDiv.setAttribute('style', css?.multiselect?.style)

frontend/src/lib/components/apps/editor/ConnectionInstructions.svelte

@@ -24,6 +24,7 @@
 						You can also navigate your app in a viewer mode: You won't be able to fire any events.
 					</li>
 					<li> Clicking on a component will open the component's output on the left. </li>
+					<li> Hovering an other component will highlight its outputs in orange. </li>
 				</ol>
 			</div>
 			<div>

frontend/src/lib/components/apps/editor/component/components.ts

@@ -1284,6 +1284,12 @@ Hello \${ctx.username}
 					subFieldType: 'text',
 					value: ['Foo', 'Bar']
 				} as StaticAppInput,
+				defaultItems: {
+					type: 'static',
+					fieldType: 'array',
+					subFieldType: 'text',
+					value: []
+				} as StaticAppInput,
 				placeholder: {
 					type: 'static',
 					fieldType: 'text',