feat: add userconfig to import-export

companion/lib/Data/ImportExport.ts

@@ -344,6 +344,10 @@ export class DataImportExport extends CoreBase {
 				exp.surfaceGroups = this.surfaces.exportAllGroups(false)
 			}
 
+			if (!config || !isFalsey(config.userconfig)) {
+				exp.userconfig = this.userconfig.getAll(false)
+			}
+
 			return exp
 		}
 
@@ -548,6 +552,7 @@ export class DataImportExport extends CoreBase {
 				customVariables: 'custom_variables' in object,
 				surfaces: 'surfaces' in object,
 				triggers: 'triggers' in object,
+				userconfig: 'userconfig' in object,
 			}
 
 			for (const [instanceId, instance] of Object.entries(object.instances || {})) {
@@ -634,6 +639,11 @@ export class DataImportExport extends CoreBase {
 				// Destroy old stuff
 				await this.#reset(undefined, !config || config.buttons)
 
+				// import userconfig
+				if (!config || config.userconfig) {
+					this.userconfig.setKeys(data.userconfig || {})
+				}
+
 				// import custom variables
 				if (!config || config.customVariables) {
 					this.variablesController.custom.replaceDefinitions(data.custom_variables || {})

companion/lib/Data/UserConfig.ts

@@ -276,6 +276,22 @@ export class DataUserConfig extends CoreBase {
 		})
 	}
 
+	/**
+	 * Get the config settings
+	 * @param {boolean} [clone = false] - <code>true</code> if a clone is needed instead of a link
+	 * @returns {UserConfigModel} the config values
+	 * @access public
+	 */
+	getAll(clone = false): UserConfigModel {
+		let out = this.#data
+
+		if (clone === true) {
+			out = cloneDeep(out)
+		}
+
+		return out
+	}
+
 	/**
 	 * Get a specific use config setting
 	 * @param key

shared-lib/lib/Model/ExportModel.ts

@@ -1,4 +1,4 @@
-import type { UserConfigGridSize } from './UserConfigModel.js'
+import type { UserConfigGridSize, UserConfigModel } from './UserConfigModel.js'
 import type { ConnectionConfig } from './Connections.js'
 import type { CustomVariablesModel } from './CustomVariableModel.js'
 
@@ -16,6 +16,7 @@ export interface ExportFullv4 extends ExportBase<'full'> {
 	instances?: ExportInstancesv4
 	surfaces?: unknown
 	surfaceGroups?: unknown
+	userconfig?: UserConfigModel
 }
 
 export interface ExportPageModelv4 extends ExportBase<'page'> {

shared-lib/lib/Model/ImportExport.ts

@@ -16,6 +16,7 @@ export interface ClientExportSelection {
 	customVariables: boolean
 	connections: boolean
 	surfaces: boolean
+	userconfig: boolean
 
 	format: ExportFormat
 }
@@ -25,6 +26,7 @@ export interface ClientImportSelection {
 	customVariables: boolean
 	surfaces: boolean
 	triggers: boolean
+	userconfig: boolean
 }
 
 export interface ClientPageInfo {
@@ -43,6 +45,7 @@ export interface ClientImportObject {
 	customVariables: boolean
 	surfaces: boolean
 	triggers: boolean | Record<string, { name: string }>
+	userconfig: boolean
 	oldPageNumber?: number
 	page?: ClientPageInfo
 	pages?: Record<number, ClientPageInfo>

webui/src/ImportExport/Export.tsx

@@ -19,7 +19,7 @@ export const ExportWizardModal = forwardRef<ExportWizardModalRef, ExportWizardMo
 			surfaces: true,
 			triggers: true,
 			customVariables: true,
-			// userconfig: true,
+			userconfig: true,
 			format: ExportFormatDefault,
 		})
 
@@ -69,7 +69,7 @@ export const ExportWizardModal = forwardRef<ExportWizardModalRef, ExportWizardMo
 						surfaces: true,
 						triggers: true,
 						customVariables: true,
-						// userconfig: true,
+						userconfig: true,
 						format: ExportFormatDefault,
 					})
 
@@ -163,13 +163,13 @@ function ExportOptionsStep({ config, setValue }: ExportOptionsStepProps) {
 					label="Surfaces"
 				/>
 			</div>
-			{/* <div className="indent3">
+			<div className="indent3">
 				<CFormCheck
 					checked={config.userconfig}
 					onChange={(e) => setValue('userconfig', e.currentTarget.checked)}
-					label='Settings'
+					label="Settings"
 				/>
-			</div> */}
+			</div>
 
 			<div>
 				<SelectExportFormat value={config.format} setValue={(val) => setValue('format', val)} label="File format" />

webui/src/ImportExport/Import/Full.tsx

@@ -134,7 +134,7 @@ function FullImportTab({ snapshot }: FullImportTabProps) {
 		surfaces: true,
 		triggers: true,
 		customVariables: true,
-		// userconfig: true,
+		userconfig: true,
 	}))
 
 	const validConfigKeys = Object.entries(config).filter(([k, v]) => v && snapshotKeys.includes(k))
@@ -206,13 +206,13 @@ function FullImportTab({ snapshot }: FullImportTabProps) {
 
 			<InputCheckbox config={config} allowKeys={snapshotKeys} keyName="surfaces" setValue={setValue} label="Surfaces" />
 
-			{/* <InputCheckbox
+			<InputCheckbox
 				config={config}
 				allowKeys={snapshotKeys}
 				keyName="userconfig"
 				setValue={setValue}
 				label="Settings"
-			/> */}
+			/>
 
 			<CAlert color="info" className="margin-top">
 				All the connections will be imported, as they are required to be able to import any actions and feedbacks.

webui/src/scss/_controls.scss

@@ -9,11 +9,20 @@
 	}
 
 	input[type='checkbox']:checked {
-		background: 0 0 url('/img/check.png') no-repeat;
+		background: 0 0 url('/img/check.svg');
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: contain;
 	}
 	input[type='checkbox']:disabled {
 		background: #eee;
 	}
+	input[type='checkbox']:indeterminate {
+		background: 0 0 url('/img/indeterminate.svg');
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: contain;
+	}
 }
 
 label.disabled {