Improve live power flow layout and device controls

Author: =

frontend/src/components/PowerFlow.css

@@ -1,4 +1,5 @@
 .power-flow-card {
+  position: relative;
   margin: 1.5rem 0;
   padding: 1.5rem;
   border: 1px solid var(--color-border);

frontend/src/components/SimplePowerFlow.css

@@ -1,197 +1,77 @@
 .simple-power-flow {
-  position: relative;
-  isolation: isolate;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-areas:
-    '. solar .'
-    'battery home grid'
-    '. car .';
-  align-items: start;
-  gap: 2rem 1rem;
-  min-height: 320px;
-  padding: 1rem 0;
+  max-width: 700px;
+  margin: 0 auto;
+  padding-bottom: 1.5rem;
 }
 
-/* Measured SVG connections sit below the nodes and must not intercept pointer input. */
-.simple-power-flow-lines {
-  position: absolute;
-  inset: 0;
+.simple-power-flow-diagram {
+  font-family: inherit;
+  display: block;
   width: 100%;
-  height: 100%;
-  z-index: 0;
   overflow: visible;
-  pointer-events: none;
-}
-
-.simple-node {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-  text-align: center;
-}
-
-.simple-solar {
-  grid-area: solar;
-}
-
-.simple-battery {
-  grid-area: battery;
-}
-
-.simple-home {
-  grid-area: home;
-}
-
-.right-100 {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  left: 50px;
-  top: -15px;
-}
-
-.simple-grid {
-  grid-area: grid;
-}
-
-.simple-car {
-  grid-area: car;
 }
 
+.simple-node { text-anchor: middle; }
 .simple-node-circle {
+  fill: var(--color-surface);
+  stroke: currentColor;
+  stroke-width: 2;
+}
+.simple-node-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 72px;
-  height: 72px;
-  margin: 0.25rem;
-  border-radius: 50%;
-  background: var(--color-bg);
-  border: 2px solid var(--color-border);
-}
-
-.simple-node-circle svg {
-  font-size: 1.7rem;
-}
-
-.simple-node strong {
-  font-size: 0.85rem;
-}
-
-.simple-node-power {
-  font-size: 1.15rem;
-  font-weight: 600;
-}
-
-.simple-node span,
-.simple-node small {
-  color: var(--color-text-muted);
-}
-
-.simple-node small {
-  font-size: 0.7rem;
-}
-
-.grid-icon {
-  width: 1.6rem;
-  height: 1.6rem;
-}
-
-.simple-car.is-charging .simple-node-power,
-.simple-car.is-charging small {
-  color: var(--color-charge);
-}
-
-/* Base connection line */
-.simple-flow-line {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 3;
-  stroke-linecap: round;
-  vector-effect: non-scaling-stroke;
-}
-
-/* Semantic flow colours */
-.flow-solar {
-  color: var(--color-warning, #f59e0b);
-}
-
-.flow-battery {
-  color: var(--color-success, #16a34a);
-}
-
-.flow-grid {
-  color: var(--color-text-muted, #6b7280);
-}
-
-.flow-car {
-  color: var(--color-hold-car, #d97706);
-}
-
+  height: 100%;
+  color: var(--color-text);
+}
+.simple-node-icon svg { width: 23px; height: 23px; }
+.simple-node-power { fill: currentColor; font-size: 13px; font-weight: 600; }
+.simple-node-label { fill: var(--color-text-muted); font-size: 14px; }
+.simple-node-soc { fill: var(--color-text); font-size: 12px; }
+.simple-node-power.is-muted { fill: var(--color-text-muted); }
+.flow-solar { color: var(--color-flow-solar, #f59e0b); }
+.flow-grid { color: var(--color-current, #3b82f6); }
+.flow-export { color: var(--color-export, #a855f7); }
+.flow-charge { color: #ec4899; }
+.flow-battery, .flow-home { color: #40b5ad; }
+.flow-car { color: var(--color-success, #22c55e); }
+.flow-heat-pump { color: #b9c63a; }
 .simple-flow-base {
+  fill: none;
   stroke: currentColor;
-  stroke-width: 2;
-  stroke-linecap: round;
-  vector-effect: non-scaling-stroke;
-  transition:
-    opacity 0.2s ease,
-    stroke-width 0.2s ease;
-}
-
-/* Idle connection remains visible but subdued */
-.simple-flow-base.is-idle {
-  opacity: 0.2;
-}
-
-/* Active connection becomes a little stronger */
-.simple-flow-base.is-active {
-  opacity: 0.45;
-}
-
-/* Animated energy particles */
-.simple-flow-dot {
-  fill: currentColor;
-  pointer-events: none;
-  filter: drop-shadow(0 0 3px currentColor);
-}
-
-.simple-flow-dot-primary {
-  opacity: 1;
-}
-
-.simple-flow-dot-secondary {
-  opacity: 0.65;
-}
-
-.simple-flow-dot-tertiary {
-  opacity: 0.35;
-}
-
-/* Semantic colours */
-
-.flow-solar {
-  color: var(--color-flow-solar);
+  stroke-width: 1.3;
 }
-
-.flow-battery {
-  color: var(--color-flow-battery);
-}
-
-.flow-grid {
-  color: var(--color-flow-grid);
+.simple-flow-base.is-idle { opacity: 0.15; }
+.simple-flow-base.is-active { opacity: 0.7; }
+.simple-flow-dot { fill: currentColor; }
+.simple-flow-subtract {
+  position: absolute;
+  right: 0.75rem;
+  bottom: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.3rem;
+  min-height: 44px;
+  color: color-mix(in srgb, var(--color-text-muted) 50%, transparent);
+  font-size: 0.6875rem;
+  cursor: pointer;
+}
+.simple-flow-subtract .toggle-switch { width: 32px; height: 18px; }
+.simple-flow-subtract .toggle-slider::before { width: 12px; height: 12px; }
+.simple-flow-subtract .toggle-switch input:checked + .toggle-slider::before { transform: translateX(14px); }
+@media (prefers-reduced-motion: reduce) {
+  .simple-flow-dot { display: none; }
 }
 
-.flow-car {
-  color: var(--color-flow-car);
-}
+.simple-node.flow-solar .simple-node-power { fill: var(--color-solar-text); }
+.simple-power-flow-diagram .flow-heat-pump .simple-node-power { fill: var(--color-text-secondary); }
 
-/* Remove animation for users who prefer reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  .simple-flow-dot {
-    display: none;
-  }
+@media (max-width: 480px) {
+  .simple-node-circle { r: 49px; }
+  .simple-node-power { font-size: 19px; }
+  .simple-node-label { font-size: 20px; transform: translateY(6px); }
+  .flow-solar .simple-node-label,
+  .flow-heat-pump .simple-node-label { transform: translateY(-6px); }
+  .simple-node-soc { font-size: 17px; }
 }