💄 Start working on the UI

- Add bottom NavBar
- Add top bar
- Start working on the `Mixing` Tab

lib/mixing_tab.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:gomix_flutter/mixing_card.dart';
+
+class MixingTab extends StatefulWidget {
+  const MixingTab({super.key});
+
+  @override
+  State<MixingTab> createState() => _MixingTabState();
+}
+
+class _MixingTabState extends State<MixingTab> {
+  @override
+  Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
+    int cols = screenWidth > 550 ? 2 : 1;
+    int cardHeight = 110;
+
+    return SizedBox.expand(
+      child: SingleChildScrollView(
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: <Widget>[
+              Text("Inputs", style: Theme.of(context).textTheme.titleLarge),
+              const SizedBox(height: 10),
+              GridView.count(
+                shrinkWrap: true,
+                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()}")),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}