fix: add topic selection checkbox that auto-creates datapoints

When a user checks a topic checkbox, a datapoint is automatically
created and the broker subscribes to that topic for live updates.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

display/frontend/src/pages/MqttTopics.tsx

@@ -8,6 +8,7 @@ interface Topic {
   topic: string;
   last_payload: string | null;
   json_path: string | null;
+  selected: number;
   ignored: number;
   discovered_at: string;
 }
@@ -46,6 +47,15 @@ export default function MqttTopics() {
     }
   }
 
+  async function handleSelect(id: number, selected: boolean) {
+    try {
+      await api.put(`/api/mqtt/brokers/${brokerId}/topics/${id}`, { selected: selected ? 1 : 0 });
+      load();
+    } catch (e) {
+      setError((e as Error).message);
+    }
+  }
+
   async function handleIgnore(id: number, ignored: number) {
     try {
       await api.put(`/api/mqtt/brokers/${brokerId}/topics/${id}`, { ignored: ignored ? 0 : 1 });
@@ -100,6 +110,7 @@ export default function MqttTopics() {
         <table className="w-full text-sm">
           <thead className="bg-gray-50">
             <tr>
+              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase w-10">Aktiv</th>
               <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Topic</th>
               <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Letzter Wert</th>
               <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">JSON-Pfad</th>
@@ -108,10 +119,18 @@ export default function MqttTopics() {
           </thead>
           <tbody className="divide-y divide-gray-100">
             {filtered.length === 0 && (
-              <tr><td colSpan={4} className="px-4 py-6 text-center text-gray-400">Keine Topics gefunden</td></tr>
+              <tr><td colSpan={5} className="px-4 py-6 text-center text-gray-400">Keine Topics gefunden</td></tr>
             )}
             {filtered.map((t) => (
-              <tr key={t.id} className="hover:bg-gray-50">
+              <tr key={t.id} className={`hover:bg-gray-50 ${t.selected ? 'bg-green-50' : ''}`}>
+                <td className="px-4 py-2 text-center">
+                  <input
+                    type="checkbox"
+                    checked={!!t.selected}
+                    onChange={(e) => handleSelect(t.id, e.target.checked)}
+                    className="w-4 h-4 accent-green-500"
+                  />
+                </td>
                 <td className="px-4 py-2 font-mono text-xs text-gray-700">{t.topic}</td>
                 <td className="px-4 py-2 text-xs text-gray-500 max-w-xs truncate">{t.last_payload ?? '-'}</td>
                 <td className="px-4 py-2">