The card is about the charger you picked, not all of them

Charger information stacked every imported charger, so the list beside it
selected one and the card ignored the choice — with two chargers the page
said everything twice and the picking meant nothing. It now shows the
selected one alone, and falls back to the first until something is picked:
a card that stays blank until clicked is a worse greeting than the charger
most people have only one of.

The per-block ring goes with it. Highlighting the selection inside a card
that shows nothing else is a distinction without a second thing to draw.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Web App/web/src/views/Charging.vue

@@ -218,6 +218,14 @@ async function loadHomeChargers() {
   }
 }
 
+// The card shows one charger: whichever is picked in the list beside it. Until
+// something is picked that is the first one — a card that says nothing until
+// clicked would be a worse first impression than the charger most people have
+// only one of.
+const selectedHomeCharger = computed(
+  () => homeChargers.value.find((c) => c.id === selected.value) || homeChargers.value[0] || null
+);
+
 // A charger picked here becomes the one the control card drives.
 function selectHomeCharger(c) {
   selected.value = c.id;
@@ -606,30 +614,26 @@ onMounted(async () => {
             </button>
           </div>
 
-          <div
+          <!-- The charger picked in the list beside this card, and only it. -->
-            v-for="c in homeChargers"
+          <div v-if="selectedHomeCharger" class="mt-3 rounded-control bg-sunken p-3">
-            :key="c.id"
-            class="mt-3 rounded-control bg-sunken p-3"
-            :class="selected === c.id ? 'ring-2 ring-accent' : ''"
-          >
             <div class="flex items-center justify-between gap-2">
-              <p class="truncate text-sm font-semibold text-strong">{{ c.name }}</p>
+              <p class="truncate text-sm font-semibold text-strong">{{ selectedHomeCharger.name }}</p>
               <div class="flex shrink-0 items-center gap-2">
                 <!-- Reachability, said either way. A charger the service says
                      nothing about stays silent: unknown is not offline. -->
-                <span v-if="liveFor(c)?.online === true" class="dh-badge dh-badge-success">
+                <span v-if="liveFor(selectedHomeCharger)?.online === true" class="dh-badge dh-badge-success">
                   {{ t("charging.info.online") }}
                 </span>
-                <span v-else-if="liveFor(c)?.online === false" class="dh-badge dh-badge-warning">
+                <span v-else-if="liveFor(selectedHomeCharger)?.online === false" class="dh-badge dh-badge-warning">
                   {{ t("charging.info.offline") }}
                 </span>
-                <span v-if="c.provider" class="dh-badge dh-badge-neutral">
+                <span v-if="selectedHomeCharger.provider" class="dh-badge dh-badge-neutral">
-                  {{ providerLabel(c.provider) }}
+                  {{ providerLabel(selectedHomeCharger.provider) }}
                 </span>
               </div>
             </div>
             <dl class="mt-2 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1">
-              <template v-for="row in chargerInfoRows(c)" :key="row.key">
+              <template v-for="row in chargerInfoRows(selectedHomeCharger)" :key="row.key">
                 <dt class="text-[11px] text-muted">{{ row.label }}</dt>
                 <dd class="data break-all text-[11px] text-body">{{ row.value }}</dd>
               </template>