feat(ui): Service-Badges + Routen-Toggle

Firewall: nftables-Status im Tab-Bar (tabBarExtraContent).
DNS: unbound-Status im Tab-Bar.
Routes: inline Switch statt on/off-Tags.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

management-ui/src/pages/Networks/Routes.tsx

@@ -99,6 +99,14 @@ export default function RoutesTab() {
     onSuccess: () => { qc.invalidateQueries({ queryKey: ['routes'] }) },
     onError: (e: Error) => message.error(e.message),
   })
+  const quickToggle = useMutation({
+    mutationFn: async ({ id, row, checked }: { id: number; row: ManagedRoute; checked: boolean }) => {
+      const { id: _id, ...body } = row
+      await apiClient.put(`/routes/${id}`, { ...body, active: checked })
+    },
+    onSuccess: () => { qc.invalidateQueries({ queryKey: ['routes'] }) },
+    onError: (e: Error) => message.error(e.message),
+  })
 
   const managedColumns: ColumnsType<ManagedRoute> = [
     {
@@ -115,8 +123,17 @@ export default function RoutesTab() {
       render: (v?: string) => v ? <Tag>{v}</Tag> : '—' },
     { title: t('routes.col.metric'), dataIndex: 'metric', width: 80 },
     { title: t('routes.col.table'), dataIndex: 'table_name', width: 90 },
-    { title: t('routes.col.active'), dataIndex: 'active', width: 80,
-      render: (v: boolean) => v ? <Tag color="green">on</Tag> : <Tag>off</Tag> },
+    {
+      title: t('routes.col.active'), dataIndex: 'active', width: 80,
+      render: (v: boolean, row: ManagedRoute) => (
+        <Switch
+          size="small"
+          checked={v}
+          loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
+          onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
+        />
+      ),
+    },
     { title: t('routes.col.comment'), dataIndex: 'comment',
       render: (v?: string) => v || <Text type="secondary">—</Text> },
     {