feat(frontend): Add disable prop to App Toggles (#2010)

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

@@ -38,6 +38,8 @@
 
 	let defaultValue: boolean | undefined = undefined
 	let label: string = ''
+	let disabled: boolean = false
+
 	$componentControl[id] = {
 		setValue(nvalue: boolean) {
 			value = nvalue
@@ -82,6 +84,7 @@
 
 <InputValue {id} key={extraKey} input={configuration.label} bind:value={label} />
 <InputValue {id} key={extraKey} input={configuration.defaultValue} bind:value={defaultValue} />
+<InputValue {id} key={extraKey} input={configuration.disabled} bind:value={disabled} />
 
 <InitializeComponent {id} />
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
@@ -95,5 +98,6 @@
 			preclickAction?.()
 			value = e.detail
 		}}
+		{disabled}
 	/>
 </AlignWrapper>

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

@@ -1396,6 +1396,11 @@ This is a paragraph.
 					type: 'static',
 					value: undefined,
 					fieldType: 'boolean'
+				},
+				disabled: {
+					type: 'static',
+					value: false,
+					fieldType: 'boolean'
 				}
 			}
 		}

frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -66,7 +66,7 @@
 	}))
 </script>
 
-<section class="p-2 sticky w-full z-10 top-0">
+<section class="p-2 sticky w-full z-10 top-0 bg-surface border-b">
 	<ClearableInput bind:value={search} placeholder="Search components..." />
 </section>