✨ Implement WebSocket API client

- List ports
- Read and write mute state
- Read and write volume

lib/mixing_tab.dart

@@ -1,19 +1,40 @@
 import 'package:flutter/material.dart';
 import 'package:gomix_flutter/mixing_card.dart';
+import 'package:gomix_flutter/mixer_state.dart' as mixer;
 
 class MixingTab extends StatefulWidget {
-  const MixingTab({super.key});
+  final mixer.MixerState mixerState;
+  final Function sendAction;
+  const MixingTab(
+      {super.key, required this.mixerState, required this.sendAction});
 
   @override
   State<MixingTab> createState() => _MixingTabState();
 }
 
 class _MixingTabState extends State<MixingTab> {
+  Widget buildCardGrid(
+      List<mixer.Port> from, int cols, double cardGridAspectRatio) {
+    return GridView.count(
+      shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      childAspectRatio: cardGridAspectRatio,
+      crossAxisCount: cols,
+      mainAxisSpacing: 10,
+      crossAxisSpacing: 10,
+      children: from
+          .map((p) => MixingCard(port: p, sendAction: widget.sendAction))
+          .toList(),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     double screenWidth = MediaQuery.of(context).size.width;
     int cols = 1 + (screenWidth ~/ 550);
     int cardHeight = 110;
+    double cardGridAspectRatio =
+        (screenWidth - 32 - (10 * (cols - 1))) / cardHeight / cols;
 
     return SizedBox.expand(
       child: SingleChildScrollView(
@@ -24,17 +45,13 @@ class _MixingTabState extends State<MixingTab> {
             children: <Widget>[
               Text("Inputs", style: Theme.of(context).textTheme.titleLarge),
               const SizedBox(height: 10),
-              GridView.count(
-                shrinkWrap: true,
-                physics: const NeverScrollableScrollPhysics(),
-                childAspectRatio:
-                    (screenWidth - 32 - (10 * (cols - 1))) / cardHeight / cols,
-                crossAxisCount: cols,
-                mainAxisSpacing: 10,
-                crossAxisSpacing: 10,
-                children: List<Widget>.generate(
-                    6, (i) => MixingCard(name: "Port ${i.toString()}")),
-              ),
+              buildCardGrid(
+                  widget.mixerState.inputs, cols, cardGridAspectRatio),
+              const SizedBox(height: 20),
+              Text("Outputs", style: Theme.of(context).textTheme.titleLarge),
+              const SizedBox(height: 10),
+              buildCardGrid(
+                  widget.mixerState.outputs, cols, cardGridAspectRatio),
             ],
           ),
         ),