From e4b93e14ccf46ea644e31a8e0e5dd0b2b129a8df Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Wed, 25 Feb 2026 08:44:22 +0100
Subject: [PATCH] Config UI: improve create loadpoint (#27665)

---
 assets/css/app.css                            |   2 +
 .../components/Config/DeviceCardEditIcon.vue  |   8 +-
 assets/js/components/Config/DeviceRefBox.vue  |  40 +
 .../js/components/Config/LoadpointModal.vue   | 893 +++++++++---------
 .../Config/Messaging/MessagingModal.vue       |  21 +-
 assets/js/components/Helper/GenericModal.vue  |   6 +-
 assets/js/configModal.ts                      |   5 +-
 assets/js/views/Config.vue                    |   6 +
 i18n/de.json                                  |   3 +-
 i18n/en.json                                  |   3 +-
 tests/config-fatals.spec.ts                   |   4 +-
 tests/config-loadpoint.spec.ts                |  24 +-
 12 files changed, 546 insertions(+), 469 deletions(-)
 create mode 100644 assets/js/components/Config/DeviceRefBox.vue

diff --git a/assets/css/app.css b/assets/css/app.css
index 1646e8b07..997593c5a 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -80,6 +80,8 @@
 	--bs-danger: var(--evcc-red);
 	--bs-danger-rgb: var(--evcc-red-rgb);
 
+	--bs-form-invalid-border-color: var(--bs-danger);
+
 	--bs-body-font-size: 14px;
 	--bs-font-sans-serif:
 		Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
diff --git a/assets/js/components/Config/DeviceCardEditIcon.vue b/assets/js/components/Config/DeviceCardEditIcon.vue
index bcca7ab14..fabdc8e8a 100644
--- a/assets/js/components/Config/DeviceCardEditIcon.vue
+++ b/assets/js/components/Config/DeviceCardEditIcon.vue
@@ -2,8 +2,11 @@
 	<button
 		ref="tooltip"
 		type="button"
-		class="btn btn-sm btn-outline-secondary position-relative border-0 p-2 edit-button"
-		:class="{ 'opacity-25': !editable, invisible: noEditButton }"
+		class="btn btn-sm position-relative border-0 p-2 edit-button"
+		:class="[
+			danger ? 'btn-outline-danger' : 'btn-outline-secondary',
+			{ 'opacity-25': !editable, invisible: noEditButton },
+		]"
 		data-bs-toggle="tooltip"
 		data-bs-html="true"
 		:title="tooltipTitle"
@@ -31,6 +34,7 @@ export default {
 		editable: Boolean,
 		noEditButton: Boolean,
 		badge: Boolean,
+		danger: Boolean,
 	},
 	emits: ["edit"],
 	data() {
diff --git a/assets/js/components/Config/DeviceRefBox.vue b/assets/js/components/Config/DeviceRefBox.vue
new file mode 100644
index 000000000..d8037f6bf
--- /dev/null
+++ b/assets/js/components/Config/DeviceRefBox.vue
@@ -0,0 +1,40 @@
+<template>
+	<label
+		class="root d-flex align-items-center justify-content-between"
+		:class="[compact ? 'py-0 px-2' : 'py-2 px-3', { invalid: error }]"
+		@click="$emit('edit')"
+	>
+		<div class="flex-grow-1 text-truncate">
+			<slot>
+				<span>{{ title }}</span>
+			</slot>
+		</div>
+		<DeviceCardEditIcon :editable="true" :danger="error" @edit="$emit('edit')" />
+	</label>
+</template>
+
+<script lang="ts">
+import DeviceCardEditIcon from "./DeviceCardEditIcon.vue";
+
+export default {
+	name: "DeviceRefBox",
+	components: { DeviceCardEditIcon },
+	props: {
+		title: { type: String, default: "" },
+		error: { type: Boolean, default: false },
+		compact: { type: Boolean, default: false },
+	},
+	emits: ["edit"],
+};
+</script>
+
+<style scoped>
+.root {
+	border: var(--bs-border-width) solid var(--bs-border-color);
+	border-radius: var(--bs-border-radius);
+	cursor: pointer;
+}
+.root.invalid {
+	border-color: var(--bs-form-invalid-border-color);
+}
+</style>
diff --git a/assets/js/components/Config/LoadpointModal.vue b/assets/js/components/Config/LoadpointModal.vue
index 599ee3cfa..7f5defd2f 100644
--- a/assets/js/components/Config/LoadpointModal.vue
+++ b/assets/js/components/Config/LoadpointModal.vue
@@ -7,6 +7,7 @@
 		data-testid="loadpoint-modal"
 		@open="onOpen"
 		@close="onClose"
+		@dismiss="onDismiss"
 	>
 		<div v-if="!loadpointType" class="d-flex flex-column gap-4">
 			<NewDeviceButton
@@ -34,7 +35,6 @@
 					id="loadpointParamTitle"
 					v-model="values.title"
 					type="String"
-					class="me-2"
 					required
 				/>
 			</FormRow>
@@ -44,25 +44,12 @@
 				:label="$t(`config.loadpoint.chargerLabel.${loadpointType}`)"
 				:error="!charger ? $t(`config.loadpoint.chargerError.${loadpointType}`) : undefined"
 			>
-				<div class="d-flex">
-					<PropertyField
-						id="loadpointParamCharger"
-						:modelValue="chargerTitle"
-						type="String"
-						class="me-2 flex-grow-1"
-						readonly
-						required
-						:invalid="!charger || hasDeviceError('charger', values.charger)"
-						@click.prevent="editCharger"
-					/>
-					<button
-						class="btn btn-link btn-sm evcc-default-text"
-						type="button"
-						@click.prevent="editCharger"
-					>
-						<EditIcon />
-					</button>
-				</div>
+				<DeviceRefBox
+					compact
+					:title="chargerTitle"
+					:error="!charger || hasDeviceError('charger', values.charger)"
+					@edit="editCharger"
+				/>
 			</FormRow>
 			<div v-else class="d-flex justify-content-end">
 				<button
@@ -82,26 +69,12 @@
 					:label="$t('config.loadpoint.energyMeterLabel')"
 					:help="$t('config.loadpoint.energyMeterHelp')"
 				>
-					<div class="d-flex">
-						<PropertyField
-							id="loadpointParamMeter"
-							:modelValue="meterTitle"
-							type="String"
-							class="me-2 flex-grow-1"
-							required
-							readonly
-							:invalid="hasDeviceError('meter', values.meter)"
-							@click="editMeter"
-						/>
-						<button
-							class="btn btn-link btn-sm evcc-default-text"
-							type="button"
-							tabindex="0"
-							@click.prevent="editMeter"
-						>
-							<EditIcon />
-						</button>
-					</div>
+					<DeviceRefBox
+						compact
+						:title="meterTitle"
+						:error="hasDeviceError('meter', values.meter)"
+						@edit="editMeter"
+					/>
 				</FormRow>
 				<p v-else>
 					<button
@@ -117,424 +90,460 @@
 			</div>
 
 			<div v-if="values.charger || !isNew">
-				<h6>{{ $t("config.loadpoint.chargingTitle") }}</h6>
+				<p v-if="isNew && !showAllSettings" class="mt-4 mb-0 text-muted">
+					{{ $t("config.loadpoint.defaultsHint") }}
+					<a href="#" @click.prevent="showAllSettings = true">
+						{{ $t("config.loadpoint.defaultsHintLink") }} </a
+					>.
+				</p>
+				<div class="collapsible-wrapper" :class="{ open: !isNew || showAllSettings }">
+					<div class="collapsible-content">
+						<h6 class="mt-4">{{ $t("config.loadpoint.chargingTitle") }}</h6>
 
-				<FormRow
-					id="loadpointMode"
-					:label="$t('config.loadpoint.defaultModeLabel')"
-					:help="
-						values.defaultMode === ''
-							? $t(`config.loadpoint.defaultModeHelpKeep`)
-							: $t(`config.loadpoint.defaultModeHelp.${loadpointType}`)
-					"
-				>
-					<PropertyField
-						id="loadpointMode"
-						v-model="values.defaultMode"
-						type="Choice"
-						class="w-100"
-						required
-						:choice="[
-							{ key: '', name: '---' },
-							{ key: 'off', name: $t('main.mode.off') },
-							{ key: 'pv', name: $t('main.mode.pv') },
-							{ key: 'minpv', name: $t('main.mode.minpv') },
-							{ key: 'now', name: $t('main.mode.now') },
-						]"
-					/>
-				</FormRow>
-
-				<FormRow
-					id="loadpointSolarMode"
-					:label="$t('config.loadpoint.solarBehaviorLabel')"
-					:help="
-						solarMode === 'default'
-							? $t('config.loadpoint.solarBehaviorDefaultHelp', {
-									enableDelay: fmtDurationNs(
-										values.thresholds.enable.delay,
-										true,
-										'm'
-									),
-									disableDelay: fmtDurationNs(
-										values.thresholds.disable.delay,
-										true,
-										'm'
-									),
-								})
-							: $t('config.loadpoint.solarBehaviorCustomHelp')
-					"
-				>
-					<SelectGroup
-						id="loadpointSolarMode"
-						v-model="solarMode"
-						class="w-100"
-						:options="[
-							{ name: $t('config.loadpoint.solarModeMaximum'), value: 'default' },
-							{ name: $t('config.loadpoint.solarModeCustom'), value: 'custom' },
-						]"
-						transparent
-						equal-width
-					/>
-				</FormRow>
-
-				<div v-show="solarMode === 'custom'" class="ms-3 mb-5">
-					<div class="mb-4">
-						<div class="d-flex flex-wrap flex-sm-nowrap gap-4">
-							<FormRow
-								id="loadpointEnableThreshold"
-								:label="$t('config.loadpoint.thresholdEnableLabel')"
-								style="margin-bottom: 0 !important"
-							>
-								<PropertyField
-									id="loadpointEnableThreshold"
-									v-model="values.thresholds.enable.threshold"
-									type="Float"
-									unit="W"
-									size="w-25 w-min-200"
-									required
-								/>
-							</FormRow>
-							<FormRow
-								id="loadpointEnableDelay"
-								:label="$t('config.loadpoint.thresholdEnableDelayLabel')"
-								style="margin-bottom: 0 !important"
-							>
-								<PropertyField
-									id="loadpointEnableDelay"
-									v-model="values.thresholds.enable.delay"
-									type="Duration"
-									unit="minute"
-									size="w-25 w-min-200"
-									required
-								/>
-							</FormRow>
-						</div>
-						<div class="form-text evcc-gray">
-							{{
-								values.thresholds.enable.threshold === 0
-									? $t("config.loadpoint.thresholdEnableHelpZero", {
-											delay: fmtDurationNs(
-												values.thresholds.enable.delay,
-												true,
-												"m"
-											),
-										})
-									: values.thresholds.enable.threshold < 0
-										? $t("config.loadpoint.thresholdEnableHelpNegative", {
-												surplus: fmtW(
-													-1 * values.thresholds.enable.threshold,
-													powerUnit.AUTO
-												),
-												delay: fmtDurationNs(
-													values.thresholds.enable.delay,
-													true,
-													"m"
-												),
-											})
-										: $t("config.loadpoint.thresholdEnableHelpInvalid")
-							}}
-						</div>
-					</div>
-
-					<div>
-						<div class="d-flex flex-wrap flex-sm-nowrap gap-4">
-							<FormRow
-								id="loadpointDisableThreshold"
-								:label="$t('config.loadpoint.thresholdDisableLabel')"
-								style="margin-bottom: 0 !important"
-							>
-								<PropertyField
-									id="loadpointDisableThreshold"
-									v-model="values.thresholds.disable.threshold"
-									type="Float"
-									unit="W"
-									size="w-25 w-min-200"
-									required
-								/>
-							</FormRow>
-							<FormRow
-								id="loadpointDisableDelay"
-								:label="$t('config.loadpoint.thresholdDisableDelayLabel')"
-								style="margin-bottom: 0 !important"
-							>
-								<PropertyField
-									id="loadpointDisableDelay"
-									v-model="values.thresholds.disable.delay"
-									type="Duration"
-									unit="minute"
-									size="w-25 w-min-200"
-									required
-								/>
-							</FormRow>
-						</div>
-						<div class="form-text evcc-gray">
-							{{
-								values.thresholds.disable.threshold === 0
-									? $t("config.loadpoint.thresholdDisableHelpZero", {
-											delay: fmtDurationNs(
-												values.thresholds.disable.delay,
-												true,
-												"m"
-											),
-										})
-									: values.thresholds.disable.threshold > 0
-										? $t("config.loadpoint.thresholdDisableHelpPositive", {
-												power: fmtW(
-													values.thresholds.disable.threshold,
-													powerUnit.AUTO
-												),
-												delay: fmtDurationNs(
-													values.thresholds.disable.delay,
-													true,
-													"m"
-												),
-											})
-										: $t("config.loadpoint.thresholdDisableHelpInvalid")
-							}}
-						</div>
-					</div>
-				</div>
-
-				<FormRow
-					v-if="showPriority"
-					id="loadpointParamPriority"
-					:label="$t('config.loadpoint.priorityLabel')"
-					:help="$t('config.loadpoint.priorityHelp')"
-				>
-					<PropertyField
-						id="loadpointParamPriority"
-						v-model="values.priority"
-						type="Choice"
-						size="w-100"
-						class="me-2"
-						:choice="priorityOptions"
-						required
-					/>
-				</FormRow>
-
-				<h6>
-					{{ $t("config.loadpoint.electricalTitle") }}
-					<small class="text-muted">{{
-						$t("config.loadpoint.electricalSubtitle")
-					}}</small>
-				</h6>
-
-				<FormRow
-					id="chargerPower"
-					:label="$t('config.loadpoint.chargerTypeLabel')"
-					:help="
-						chargerPower === '11kw'
-							? $t('config.loadpoint.chargerPower11kwHelp')
-							: chargerPower === '22kw'
-								? $t('config.loadpoint.chargerPower22kwHelp')
-								: $t('config.loadpoint.chargerPowerCustomHelp')
-					"
-				>
-					<SelectGroup
-						id="chargerPower"
-						v-model="chargerPower"
-						class="w-100"
-						:options="[
-							{ name: $t('config.loadpoint.chargerPower11kw'), value: '11kw' },
-							{ name: $t('config.loadpoint.chargerPower22kw'), value: '22kw' },
-							{ name: $t('config.loadpoint.chargerPowerCustom'), value: 'other' },
-						]"
-						transparent
-					/>
-				</FormRow>
-
-				<div v-if="chargerPower === 'other'" class="row ms-3 mb-5">
-					<FormRow
-						id="loadpointMinCurrent"
-						:label="$t('config.loadpoint.minCurrentLabel')"
-						class="col-sm-6 mb-sm-0"
-						:help="
-							values.minCurrent < 6
-								? $t('config.loadpoint.minCurrentHelp')
-								: undefined
-						"
-					>
-						<PropertyField
-							id="loadpointMinCurrent"
-							v-model="values.minCurrent"
-							type="Float"
-							unit="A"
-							size="w-25 w-min-200"
-							class="me-2"
-							required
-						/>
-					</FormRow>
-
-					<FormRow
-						id="loadpointMaxCurrent"
-						:label="$t('config.loadpoint.maxCurrentLabel')"
-						class="col-sm-6 mb-sm-0"
-						:help="
-							values.maxCurrent < values.minCurrent
-								? $t('config.loadpoint.maxCurrentHelp')
-								: undefined
-						"
-					>
-						<PropertyField
-							id="loadpointMaxCurrent"
-							v-model="values.maxCurrent"
-							type="Float"
-							unit="A"
-							size="w-25 w-min-200"
-							class="me-2"
-							required
-						/>
-					</FormRow>
-				</div>
-
-				<template v-if="!chargerIsSinglePhase">
-					<FormRow
-						v-if="chargerSupports1p3p"
-						id="loadpointParamPhases"
-						:label="$t('config.loadpoint.phasesAutomatic')"
-						:help="$t('config.loadpoint.phasesAutomaticHelp')"
-					>
-					</FormRow>
-					<FormRow
-						v-else
-						id="loadpointParamPhases"
-						:label="$t('config.loadpoint.phasesLabel')"
-						:help="$t('config.loadpoint.phasesHelp')"
-					>
-						<SelectGroup
-							id="loadpointParamPhases"
-							v-model="values.phasesConfigured"
-							class="w-100"
-							:options="phasesOptions"
-							transparent
-							equal-width
-						/>
-					</FormRow>
-				</template>
-
-				<div v-if="showCircuit">
-					<FormRow
-						id="loadpointParamCircuit"
-						:label="$t('config.loadpoint.circuitLabel')"
-						:help="$t('config.loadpoint.circuitHelp')"
-					>
-						<InvalidReferenceAlert
-							v-if="invalidCircuit"
-							:message="$t('config.loadpoint.circuitInvalid')"
-							:value="values.circuit"
-							@remove="values.circuit = ''"
-						/>
-						<PropertyField
-							v-else
-							id="loadpointParamCircuit"
-							v-model="values.circuit"
-							type="Choice"
-							class="me-2"
-							:choice="circuitOptions"
-							required
-						/>
-					</FormRow>
-				</div>
-
-				<div v-if="!chargerIsIntegratedDevice">
-					<h6>{{ $t("config.loadpoint.vehiclesTitle") }}</h6>
-
-					<InvalidReferenceAlert
-						v-if="invalidVehicle"
-						:message="$t('config.loadpoint.vehicleInvalid')"
-						:value="values.vehicle"
-						@remove="values.vehicle = ''"
-					/>
-					<div v-else-if="vehicleOptions.length">
 						<FormRow
-							id="loadpointParamVehicle"
-							:label="$t('config.loadpoint.vehicleLabel')"
+							id="loadpointMode"
+							:label="$t('config.loadpoint.defaultModeLabel')"
 							:help="
-								values.vehicle
-									? $t('config.loadpoint.vehicleHelpDefault')
-									: $t('config.loadpoint.vehicleHelpAutoDetection')
+								values.defaultMode === ''
+									? $t(`config.loadpoint.defaultModeHelpKeep`)
+									: $t(`config.loadpoint.defaultModeHelp.${loadpointType}`)
 							"
 						>
 							<PropertyField
-								id="loadpointParamVehicle"
-								v-model="values.vehicle"
+								id="loadpointMode"
+								v-model="values.defaultMode"
 								type="Choice"
-								class="me-2"
-								:choice="allVehicleOptions"
+								class="w-100"
 								required
+								:choice="[
+									{ key: '', name: '---' },
+									{ key: 'off', name: $t('main.mode.off') },
+									{ key: 'pv', name: $t('main.mode.pv') },
+									{ key: 'minpv', name: $t('main.mode.minpv') },
+									{ key: 'now', name: $t('main.mode.now') },
+								]"
 							/>
 						</FormRow>
 
 						<FormRow
-							id="loadpointPollMode"
-							:label="$t('config.loadpoint.pollModeLabel')"
+							id="loadpointSolarMode"
+							:label="$t('config.loadpoint.solarBehaviorLabel')"
 							:help="
-								values.soc.poll.mode === 'charging'
-									? $t('config.loadpoint.pollModeChargingHelp')
-									: values.soc.poll.mode === 'connected'
-										? $t('config.loadpoint.pollModeConnectedHelp')
-										: values.soc.poll.mode === 'always'
-											? $t('config.loadpoint.pollModeAlwaysHelp')
-											: undefined
+								solarMode === 'default'
+									? $t('config.loadpoint.solarBehaviorDefaultHelp', {
+											enableDelay: fmtDurationNs(
+												values.thresholds.enable.delay,
+												true,
+												'm'
+											),
+											disableDelay: fmtDurationNs(
+												values.thresholds.disable.delay,
+												true,
+												'm'
+											),
+										})
+									: $t('config.loadpoint.solarBehaviorCustomHelp')
 							"
 						>
 							<SelectGroup
-								id="loadpointPollMode"
-								v-model="values.soc.poll.mode"
+								id="loadpointSolarMode"
+								v-model="solarMode"
 								class="w-100"
 								:options="[
 									{
-										value: 'charging',
-										name: $t('config.loadpoint.pollModeCharging'),
+										name: $t('config.loadpoint.solarModeMaximum'),
+										value: 'default',
 									},
 									{
-										value: 'connected',
-										name: $t('config.loadpoint.pollModeConnected'),
+										name: $t('config.loadpoint.solarModeCustom'),
+										value: 'custom',
+									},
+								]"
+								transparent
+								equal-width
+							/>
+						</FormRow>
+
+						<div v-show="solarMode === 'custom'" class="ms-3 mb-5">
+							<div class="mb-4">
+								<div class="d-flex flex-wrap flex-sm-nowrap gap-4">
+									<FormRow
+										id="loadpointEnableThreshold"
+										:label="$t('config.loadpoint.thresholdEnableLabel')"
+										style="margin-bottom: 0 !important"
+									>
+										<PropertyField
+											id="loadpointEnableThreshold"
+											v-model="values.thresholds.enable.threshold"
+											type="Float"
+											unit="W"
+											size="w-25 w-min-200"
+											required
+										/>
+									</FormRow>
+									<FormRow
+										id="loadpointEnableDelay"
+										:label="$t('config.loadpoint.thresholdEnableDelayLabel')"
+										style="margin-bottom: 0 !important"
+									>
+										<PropertyField
+											id="loadpointEnableDelay"
+											v-model="values.thresholds.enable.delay"
+											type="Duration"
+											unit="minute"
+											size="w-25 w-min-200"
+											required
+										/>
+									</FormRow>
+								</div>
+								<div class="form-text evcc-gray">
+									{{
+										values.thresholds.enable.threshold === 0
+											? $t("config.loadpoint.thresholdEnableHelpZero", {
+													delay: fmtDurationNs(
+														values.thresholds.enable.delay,
+														true,
+														"m"
+													),
+												})
+											: values.thresholds.enable.threshold < 0
+												? $t(
+														"config.loadpoint.thresholdEnableHelpNegative",
+														{
+															surplus: fmtW(
+																-1 *
+																	values.thresholds.enable
+																		.threshold,
+																powerUnit.AUTO
+															),
+															delay: fmtDurationNs(
+																values.thresholds.enable.delay,
+																true,
+																"m"
+															),
+														}
+													)
+												: $t("config.loadpoint.thresholdEnableHelpInvalid")
+									}}
+								</div>
+							</div>
+
+							<div>
+								<div class="d-flex flex-wrap flex-sm-nowrap gap-4">
+									<FormRow
+										id="loadpointDisableThreshold"
+										:label="$t('config.loadpoint.thresholdDisableLabel')"
+										style="margin-bottom: 0 !important"
+									>
+										<PropertyField
+											id="loadpointDisableThreshold"
+											v-model="values.thresholds.disable.threshold"
+											type="Float"
+											unit="W"
+											size="w-25 w-min-200"
+											required
+										/>
+									</FormRow>
+									<FormRow
+										id="loadpointDisableDelay"
+										:label="$t('config.loadpoint.thresholdDisableDelayLabel')"
+										style="margin-bottom: 0 !important"
+									>
+										<PropertyField
+											id="loadpointDisableDelay"
+											v-model="values.thresholds.disable.delay"
+											type="Duration"
+											unit="minute"
+											size="w-25 w-min-200"
+											required
+										/>
+									</FormRow>
+								</div>
+								<div class="form-text evcc-gray">
+									{{
+										values.thresholds.disable.threshold === 0
+											? $t("config.loadpoint.thresholdDisableHelpZero", {
+													delay: fmtDurationNs(
+														values.thresholds.disable.delay,
+														true,
+														"m"
+													),
+												})
+											: values.thresholds.disable.threshold > 0
+												? $t(
+														"config.loadpoint.thresholdDisableHelpPositive",
+														{
+															power: fmtW(
+																values.thresholds.disable.threshold,
+																powerUnit.AUTO
+															),
+															delay: fmtDurationNs(
+																values.thresholds.disable.delay,
+																true,
+																"m"
+															),
+														}
+													)
+												: $t("config.loadpoint.thresholdDisableHelpInvalid")
+									}}
+								</div>
+							</div>
+						</div>
+
+						<FormRow
+							v-if="showPriority"
+							id="loadpointParamPriority"
+							:label="$t('config.loadpoint.priorityLabel')"
+							:help="$t('config.loadpoint.priorityHelp')"
+						>
+							<PropertyField
+								id="loadpointParamPriority"
+								v-model="values.priority"
+								type="Choice"
+								size="w-100"
+								class="me-2"
+								:choice="priorityOptions"
+								required
+							/>
+						</FormRow>
+
+						<h6>
+							{{ $t("config.loadpoint.electricalTitle") }}
+							<small class="text-muted">{{
+								$t("config.loadpoint.electricalSubtitle")
+							}}</small>
+						</h6>
+
+						<FormRow
+							id="chargerPower"
+							:label="$t('config.loadpoint.chargerTypeLabel')"
+							:help="
+								chargerPower === '11kw'
+									? $t('config.loadpoint.chargerPower11kwHelp')
+									: chargerPower === '22kw'
+										? $t('config.loadpoint.chargerPower22kwHelp')
+										: $t('config.loadpoint.chargerPowerCustomHelp')
+							"
+						>
+							<SelectGroup
+								id="chargerPower"
+								v-model="chargerPower"
+								class="w-100"
+								:options="[
+									{
+										name: $t('config.loadpoint.chargerPower11kw'),
+										value: '11kw',
 									},
 									{
-										value: 'always',
-										name: $t('config.loadpoint.pollModeAlways'),
+										name: $t('config.loadpoint.chargerPower22kw'),
+										value: '22kw',
+									},
+									{
+										name: $t('config.loadpoint.chargerPowerCustom'),
+										value: 'other',
 									},
 								]"
 								transparent
 							/>
 						</FormRow>
-						<FormRow
-							v-if="values.soc.poll.mode !== 'charging'"
-							id="loadpointPollInterval"
-							class="ms-3 mb-5"
-							:label="$t('config.loadpoint.pollIntervalLabel')"
-							:help="$t('config.loadpoint.pollIntervalHelp')"
-							:danger="$t('config.loadpoint.pollIntervalDanger')"
-						>
-							<PropertyField
-								id="loadpointPollInterval"
-								v-model="values.soc.poll.interval"
-								type="Duration"
-								unit="minute"
-								size="w-25 w-min-200"
-								class="me-2"
-								required
-							/>
-						</FormRow>
 
-						<div>
-							<div class="d-flex mb-4">
-								<input
-									id="loadpointEstimate"
-									v-model="values.soc.estimate"
-									class="form-check-input"
-									type="checkbox"
+						<div v-if="chargerPower === 'other'" class="row ms-3 mb-5">
+							<FormRow
+								id="loadpointMinCurrent"
+								:label="$t('config.loadpoint.minCurrentLabel')"
+								class="col-sm-6 mb-sm-0"
+								:help="
+									values.minCurrent < 6
+										? $t('config.loadpoint.minCurrentHelp')
+										: undefined
+								"
+							>
+								<PropertyField
+									id="loadpointMinCurrent"
+									v-model="values.minCurrent"
+									type="Float"
+									unit="A"
+									size="w-25 w-min-200"
+									class="me-2"
+									required
 								/>
-								<label class="form-check-label ms-2" for="loadpointEstimate">
-									{{ $t("config.loadpoint.estimateLabel") }}
-								</label>
+							</FormRow>
+
+							<FormRow
+								id="loadpointMaxCurrent"
+								:label="$t('config.loadpoint.maxCurrentLabel')"
+								class="col-sm-6 mb-sm-0"
+								:help="
+									values.maxCurrent < values.minCurrent
+										? $t('config.loadpoint.maxCurrentHelp')
+										: undefined
+								"
+							>
+								<PropertyField
+									id="loadpointMaxCurrent"
+									v-model="values.maxCurrent"
+									type="Float"
+									unit="A"
+									size="w-25 w-min-200"
+									class="me-2"
+									required
+								/>
+							</FormRow>
+						</div>
+
+						<template v-if="!chargerIsSinglePhase">
+							<FormRow
+								v-if="chargerSupports1p3p"
+								id="loadpointParamPhases"
+								:label="$t('config.loadpoint.phasesAutomatic')"
+								:help="$t('config.loadpoint.phasesAutomaticHelp')"
+							>
+							</FormRow>
+							<FormRow
+								v-else
+								id="loadpointParamPhases"
+								:label="$t('config.loadpoint.phasesLabel')"
+								:help="$t('config.loadpoint.phasesHelp')"
+							>
+								<SelectGroup
+									id="loadpointParamPhases"
+									v-model="values.phasesConfigured"
+									class="w-100"
+									:options="phasesOptions"
+									transparent
+									equal-width
+								/>
+							</FormRow>
+						</template>
+
+						<div v-if="showCircuit">
+							<FormRow
+								id="loadpointParamCircuit"
+								:label="$t('config.loadpoint.circuitLabel')"
+								:help="$t('config.loadpoint.circuitHelp')"
+							>
+								<InvalidReferenceAlert
+									v-if="invalidCircuit"
+									:message="$t('config.loadpoint.circuitInvalid')"
+									:value="values.circuit"
+									@remove="values.circuit = ''"
+								/>
+								<PropertyField
+									v-else
+									id="loadpointParamCircuit"
+									v-model="values.circuit"
+									type="Choice"
+									class="me-2"
+									:choice="circuitOptions"
+									required
+								/>
+							</FormRow>
+						</div>
+
+						<div v-if="!chargerIsIntegratedDevice">
+							<h6>{{ $t("config.loadpoint.vehiclesTitle") }}</h6>
+
+							<InvalidReferenceAlert
+								v-if="invalidVehicle"
+								:message="$t('config.loadpoint.vehicleInvalid')"
+								:value="values.vehicle"
+								@remove="values.vehicle = ''"
+							/>
+							<div v-else-if="vehicleOptions.length">
+								<FormRow
+									id="loadpointParamVehicle"
+									:label="$t('config.loadpoint.vehicleLabel')"
+									:help="
+										values.vehicle
+											? $t('config.loadpoint.vehicleHelpDefault')
+											: $t('config.loadpoint.vehicleHelpAutoDetection')
+									"
+								>
+									<PropertyField
+										id="loadpointParamVehicle"
+										v-model="values.vehicle"
+										type="Choice"
+										class="me-2"
+										:choice="allVehicleOptions"
+										required
+									/>
+								</FormRow>
+
+								<FormRow
+									id="loadpointPollMode"
+									:label="$t('config.loadpoint.pollModeLabel')"
+									:help="
+										values.soc.poll.mode === 'charging'
+											? $t('config.loadpoint.pollModeChargingHelp')
+											: values.soc.poll.mode === 'connected'
+												? $t('config.loadpoint.pollModeConnectedHelp')
+												: values.soc.poll.mode === 'always'
+													? $t('config.loadpoint.pollModeAlwaysHelp')
+													: undefined
+									"
+								>
+									<SelectGroup
+										id="loadpointPollMode"
+										v-model="values.soc.poll.mode"
+										class="w-100"
+										:options="[
+											{
+												value: 'charging',
+												name: $t('config.loadpoint.pollModeCharging'),
+											},
+											{
+												value: 'connected',
+												name: $t('config.loadpoint.pollModeConnected'),
+											},
+											{
+												value: 'always',
+												name: $t('config.loadpoint.pollModeAlways'),
+											},
+										]"
+										transparent
+									/>
+								</FormRow>
+								<FormRow
+									v-if="values.soc.poll.mode !== 'charging'"
+									id="loadpointPollInterval"
+									class="ms-3 mb-5"
+									:label="$t('config.loadpoint.pollIntervalLabel')"
+									:help="$t('config.loadpoint.pollIntervalHelp')"
+									:danger="$t('config.loadpoint.pollIntervalDanger')"
+								>
+									<PropertyField
+										id="loadpointPollInterval"
+										v-model="values.soc.poll.interval"
+										type="Duration"
+										unit="minute"
+										size="w-25 w-min-200"
+										class="me-2"
+										required
+									/>
+								</FormRow>
+
+								<div>
+									<div class="d-flex mb-4">
+										<input
+											id="loadpointEstimate"
+											v-model="values.soc.estimate"
+											class="form-check-input"
+											type="checkbox"
+										/>
+										<label
+											class="form-check-label ms-2"
+											for="loadpointEstimate"
+										>
+											{{ $t("config.loadpoint.estimateLabel") }}
+										</label>
+									</div>
+								</div>
+							</div>
+							<div v-else>
+								<p class="text-muted">{{ $t("config.loadpoint.noVehicles") }}</p>
 							</div>
 						</div>
 					</div>
-					<div v-else>
-						<p class="text-muted">{{ $t("config.loadpoint.noVehicles") }}</p>
-					</div>
 				</div>
 			</div>
 
@@ -579,10 +588,10 @@ import GenericModal from "../Helper/GenericModal.vue";
 import deepClone from "@/utils/deepClone";
 import deepEqual from "@/utils/deepEqual";
 import formatter, { POWER_UNIT } from "@/mixins/formatter";
-import EditIcon from "../MaterialIcon/Edit.vue";
+import DeviceRefBox from "./DeviceRefBox.vue";
 import NewDeviceButton from "./NewDeviceButton.vue";
 import InvalidReferenceAlert from "./InvalidReferenceAlert.vue";
-import { handleError, customChargerName } from "./DeviceModal";
+import { handleError, customChargerName, createDeviceUtils } from "./DeviceModal";
 import { getModal, openModal, replaceModal, closeModal } from "@/configModal";
 import {
 	LOADPOINT_TYPE,
@@ -631,7 +640,7 @@ export default {
 		PropertyField,
 		GenericModal,
 		SelectGroup,
-		EditIcon,
+		DeviceRefBox,
 		NewDeviceButton,
 		InvalidReferenceAlert,
 	},
@@ -648,14 +657,16 @@ export default {
 			default: () => false,
 		},
 	},
-	emits: ["changed"],
+	emits: ["changed", "dismissed"],
 	data() {
 		return {
 			isModalVisible: false,
+			showAllSettings: false,
 			saving: false,
 			values: deepClone(defaultValues) as ConfigLoadpoint,
 			chargerPower: "11kw",
 			solarMode: "default",
+			created: false,
 			tab: "solar",
 			powerUnit: POWER_UNIT,
 		};
@@ -691,7 +702,7 @@ export default {
 				this.charger.deviceProduct ||
 				this.charger.config?.template ||
 				this.$t(customChargerName(this.charger.type, this.chargerIsHeating));
-			return `${title} [${this.values.charger}]`;
+			return title;
 		},
 		chargerStatus() {
 			if (!this.chargerValues || !this.values.charger) {
@@ -719,7 +730,7 @@ export default {
 				meter?.deviceProduct ||
 				meter?.config?.template ||
 				this.$t("config.general.customOption");
-			return `${title} [${name}]`;
+			return title;
 		},
 		isDeletable() {
 			return !this.isNew;
@@ -817,6 +828,8 @@ export default {
 	methods: {
 		reset() {
 			this.values = deepClone(defaultValues);
+			this.created = false;
+			this.showAllSettings = false;
 			this.updatePhases();
 		},
 		async loadConfiguration() {
@@ -859,6 +872,7 @@ export default {
 			this.saving = true;
 			try {
 				await api.post("config/loadpoints", this.values);
+				this.created = true;
 				this.emitChanged("added");
 			} catch (e) {
 				handleError(e, "create failed");
@@ -871,6 +885,23 @@ export default {
 		onClose() {
 			this.isModalVisible = false;
 		},
+		async onDismiss() {
+			if (!this.values.id && !this.created) {
+				await this.cleanupDevice("charger", this.values.charger, this.chargers);
+				await this.cleanupDevice("meter", this.values.meter, this.meters);
+				this.$emit("dismissed");
+				this.reset();
+			}
+		},
+		async cleanupDevice(type: DeviceType, name: string, list: { name: string; id: number }[]) {
+			const id = list.find((d) => d.name === name)?.id;
+			if (id === undefined) return;
+			try {
+				await createDeviceUtils(type).remove(id);
+			} catch (e) {
+				console.error(e);
+			}
+		},
 		async editCharger() {
 			const charger = this.chargers.find((c) => c.name === this.values.charger);
 			const result = await openModal("charger", {
diff --git a/assets/js/components/Config/Messaging/MessagingModal.vue b/assets/js/components/Config/Messaging/MessagingModal.vue
index 815c0d8b6..071656e15 100644
--- a/assets/js/components/Config/Messaging/MessagingModal.vue
+++ b/assets/js/components/Config/Messaging/MessagingModal.vue
@@ -62,20 +62,13 @@
 			</div>
 			<div v-else>
 				<div v-for="(m, index) in messengers" :key="index" class="my-4">
-					<div
-						class="d-flex align-items-center justify-content-between py-2 px-4 border rounded"
+					<DeviceRefBox
 						:data-testid="`messenger-box-${index}`"
+						@edit="openMessenger(m.id)"
 					>
-						<div class="flex-grow-1">
-							<small class="text-muted">#{{ index + 1 }}</small>
-							<span class="fw-semibold mx-3">{{ messengerType(m) }}</span>
-						</div>
-						<DeviceCardEditIcon
-							:editable="true"
-							:no-edit-button="false"
-							@edit="openMessenger(m.id)"
-						/>
-					</div>
+						<small class="text-muted">#{{ index + 1 }}</small>
+						<span class="fw-semibold mx-3">{{ messengerType(m) }}</span>
+					</DeviceRefBox>
 				</div>
 				<button
 					type="button"
@@ -97,7 +90,7 @@ import "@h2d2/shopicons/es/regular/plus";
 import JsonModal from "../JsonModal.vue";
 import EventItem from "./EventItem.vue";
 import { type PropType } from "vue";
-import DeviceCardEditIcon from "../DeviceCardEditIcon.vue";
+import DeviceRefBox from "../DeviceRefBox.vue";
 import { capitalize } from "./utils";
 import { openModal } from "@/configModal";
 
@@ -106,7 +99,7 @@ export default {
 	components: {
 		JsonModal,
 		EventItem,
-		DeviceCardEditIcon,
+		DeviceRefBox,
 	},
 	props: {
 		messengers: { type: Array as PropType<ConfigMessenger[]>, required: true },
diff --git a/assets/js/components/Helper/GenericModal.vue b/assets/js/components/Helper/GenericModal.vue
index 46b33935b..2f55ecb32 100644
--- a/assets/js/components/Helper/GenericModal.vue
+++ b/assets/js/components/Helper/GenericModal.vue
@@ -53,7 +53,7 @@ export default defineComponent({
 		autofocus: { type: Boolean, default: true },
 		configModalName: String,
 	},
-	emits: ["open", "opened", "close", "closed", "visibilitychange"],
+	emits: ["open", "opened", "close", "closed", "dismiss", "visibilitychange"],
 	data() {
 		return {
 			isModalVisible: false,
@@ -112,7 +112,9 @@ export default defineComponent({
 			this.$emit("closed");
 			this.isModalVisible = false;
 			if (this.configModalName) {
-				onModalHidden(this.configModalName);
+				if (onModalHidden(this.configModalName)) {
+					this.$emit("dismiss");
+				}
 			}
 		},
 		open() {
diff --git a/assets/js/configModal.ts b/assets/js/configModal.ts
index daf8b8f31..715020b3c 100644
--- a/assets/js/configModal.ts
+++ b/assets/js/configModal.ts
@@ -40,15 +40,16 @@ export function unregisterModal(name: string): void {
 }
 
 // Called by GenericModal on hidden.bs.modal (user ESC/backdrop)
-export function onModalHidden(name: string): void {
+export function onModalHidden(name: string): boolean {
   if (_dismissingViaRoute.has(name)) {
     _dismissingViaRoute.delete(name);
-    return;
+    return false;
   }
   // User dismissed via backdrop/ESC — sync route
   if (configModal.stack.some((m) => m.name === name)) {
     closeModal();
   }
+  return true;
 }
 
 // Reactive fade direction for a named modal
diff --git a/assets/js/views/Config.vue b/assets/js/views/Config.vue
index cd50e4fda..ae539eee4 100644
--- a/assets/js/views/Config.vue
+++ b/assets/js/views/Config.vue
@@ -329,6 +329,7 @@
 					:circuits="circuits"
 					:hasDeviceError="hasDeviceError"
 					@changed="loadpointChanged"
+					@dismissed="loadpointDismissed"
 				/>
 				<VehicleModal :is-sponsor="isSponsor" @vehicle-changed="vehicleChanged" />
 				<MeterModal :is-sponsor="isSponsor" @changed="meterChanged" />
@@ -847,6 +848,11 @@ export default defineComponent({
 			await this.loadLoadpoints();
 			this.loadDirty();
 		},
+		async loadpointDismissed() {
+			await this.loadChargers();
+			await this.loadMeters();
+			this.updateValues();
+		},
 		vehicleChanged() {
 			this.loadVehicles();
 			this.loadDirty();
diff --git a/i18n/de.json b/i18n/de.json
index 6b957690d..a90addff5 100644
--- a/i18n/de.json
+++ b/i18n/de.json
@@ -324,6 +324,8 @@
       },
       "defaultModeHelpKeep": "Zuletzt ausgewählter Modus wird beibehalten.",
       "defaultModeLabel": "Standard-Modus",
+      "defaultsHint": "Standardmodus, PV-Überschussverhalten und elektrische Details verwenden sinnvolle Standardwerte.",
+      "defaultsHintLink": "Einstellungen anpassen",
       "delete": "Löschen",
       "electricalSubtitle": "Im Zweifelsfall Elektriker fragen.",
       "electricalTitle": "Elektrisch",
@@ -358,7 +360,6 @@
       "priorityHelp": "Höherer Prioritäten haben Vorrang beim PV-Überschuss.",
       "priorityLabel": "Priorität",
       "save": "Speichern",
-      "showAllSettings": "Alle Einstellungen anzeigen",
       "solarBehaviorCustomHelp": "Definiere eigene Ein- und Ausschaltschwellen und Verzögerungen.",
       "solarBehaviorDefaultHelp": "Start nach {enableDelay} ausreichend vorhandenem Überschuss. Stop wenn für {disableDelay} nicht genug Überschuss vorhanden ist.",
       "solarBehaviorLabel": "PV-Überschuss",
diff --git a/i18n/en.json b/i18n/en.json
index 77aaf8b82..86d8dc7dc 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -324,6 +324,8 @@
       },
       "defaultModeHelpKeep": "Keeps the last selected mode.",
       "defaultModeLabel": "Default mode",
+      "defaultsHint": "Default mode, solar behaviour and electrical details use sensible defaults.",
+      "defaultsHintLink": "Adjust settings",
       "delete": "Delete",
       "electricalSubtitle": "When in doubt, ask your electrician.",
       "electricalTitle": "Electrical",
@@ -358,7 +360,6 @@
       "priorityHelp": "Higher priority get preferred access to solar surplus.",
       "priorityLabel": "Priority",
       "save": "Save",
-      "showAllSettings": "Show all settings",
       "solarBehaviorCustomHelp": "Define your own enable and disable thresholds and delays.",
       "solarBehaviorDefaultHelp": "Start after {enableDelay} of sufficient surplus. Stop when there is not enough surplus for {disableDelay}.",
       "solarBehaviorLabel": "Solar",
diff --git a/tests/config-fatals.spec.ts b/tests/config-fatals.spec.ts
index 7830a296f..a08d28910 100644
--- a/tests/config-fatals.spec.ts
+++ b/tests/config-fatals.spec.ts
@@ -93,8 +93,8 @@ test.describe("fatal config handling", async () => {
     // open modal and delete meter
     await page.getByTestId("loadpoint").getByRole("button", { name: "edit" }).click();
     await expectModalVisible(lpModal);
-    await expect(lpModal.getByRole("textbox", { name: "Energy meter" })).toHaveClass(/is-invalid/);
-    await lpModal.getByRole("textbox", { name: "Energy meter" }).click();
+    await expect(lpModal.getByText("Shelly 1PM")).toBeVisible();
+    await lpModal.getByText("Shelly 1PM").click();
     await expectModalVisible(meterModal);
     await meterModal.getByRole("button", { name: "Delete" }).click();
     await expectModalHidden(meterModal);
diff --git a/tests/config-loadpoint.spec.ts b/tests/config-loadpoint.spec.ts
index 3bd1c7f05..f58698d15 100644
--- a/tests/config-loadpoint.spec.ts
+++ b/tests/config-loadpoint.spec.ts
@@ -98,10 +98,8 @@ test.describe("charging loadpoint", async () => {
     await lpModal.getByTestId("chargerPower-22kw").click();
 
     // update charger mode
-    await expect(lpModal.getByRole("textbox", { name: "Charger" })).toHaveValue(
-      "Demo charger [db:1]"
-    );
-    await lpModal.getByRole("textbox", { name: "Charger" }).click();
+    await expect(lpModal.getByText("Demo charger")).toBeVisible();
+    await lpModal.getByText("Demo charger").click();
     await chargerModal.getByLabel("Charge status").selectOption("A");
     await chargerModal.getByRole("button", { name: "Save" }).click();
     await expectModalHidden(chargerModal);
@@ -341,7 +339,7 @@ test.describe("charging loadpoint", async () => {
     // delete charger
     await page.getByTestId("loadpoint").getByRole("button", { name: "edit" }).click();
     await expectModalVisible(lpModal);
-    await lpModal.getByRole("textbox", { name: "Charger" }).click();
+    await lpModal.getByText("Demo charger").click();
     const chargerModal = page.getByTestId("charger-modal");
     await expectModalVisible(chargerModal);
     await chargerModal.getByRole("button", { name: "Delete" }).click();
@@ -361,7 +359,7 @@ test.describe("charging loadpoint", async () => {
     await page.getByTestId("loadpoint").getByRole("button", { name: "edit" }).click();
     await expectModalVisible(lpModal);
     await lpModal.getByRole("button", { name: "Add charging point" }).click();
-    await expect(lpModal.getByRole("textbox", { name: "Title" })).toHaveValue("Garage");
+    await expect(lpModal.getByLabel("Title")).toHaveValue("Garage");
     await expect(lpModal).toContainText("Configuring a charger is required.");
   });
 
@@ -381,7 +379,7 @@ test.describe("charging loadpoint", async () => {
     // delete charger
     await page.getByTestId("loadpoint").getByRole("button", { name: "edit" }).click();
     await expectModalVisible(lpModal);
-    await lpModal.getByRole("textbox", { name: "Meter" }).click();
+    await lpModal.getByText("Demo meter").click();
     const meterModal = page.getByTestId("meter-modal");
     await expectModalVisible(meterModal);
     await meterModal.getByRole("button", { name: "Delete" }).click();
@@ -398,7 +396,7 @@ test.describe("charging loadpoint", async () => {
     await expect(page.getByTestId("loadpoint")).not.toContainText("11.0 kW");
     await page.getByTestId("loadpoint").getByRole("button", { name: "edit" }).click();
     await expectModalVisible(lpModal);
-    await expect(lpModal.getByRole("textbox", { name: "Title" })).toHaveValue("Garage");
+    await expect(lpModal.getByLabel("Title")).toHaveValue("Garage");
     await expect(lpModal.getByRole("button", { name: "Add dedicated energy meter" })).toBeVisible();
   });
 
@@ -499,11 +497,9 @@ power:
     await lpEntry.getByRole("button", { name: "edit" }).click();
     await expectModalVisible(lpModal);
 
-    await expect(lpModal.getByLabel("Charger").first()).toHaveValue("User-defined charger [db:1]");
-    await expect(lpModal.getByLabel("Energy meter").first()).toHaveValue(
-      "User-defined device [db:2]"
-    );
-    await lpModal.getByLabel("Charger").first().click();
+    await expect(lpModal.getByText("User-defined charger")).toBeVisible();
+    await expect(lpModal.getByText("User-defined device")).toBeVisible();
+    await lpModal.getByText("User-defined charger").click();
     await expectModalVisible(chargerModal);
 
     await expect(chargerModal.getByLabel("Manufacturer")).toHaveValue("User-defined charger");
@@ -644,7 +640,7 @@ temp:
     // delete heater
     await page.getByTestId("loadpoint").getByRole("button", { name: "edit" }).click();
     await expectModalVisible(lpModal);
-    await lpModal.getByRole("textbox", { name: "Heater" }).click();
+    await lpModal.getByText("Demo heat pump").click();
     const chargerModal = page.getByTestId("charger-modal");
     await expectModalVisible(chargerModal);
     await chargerModal.getByRole("button", { name: "Delete" }).click();