feat(amm-ui): add navbar to switch between views

amm-ui/qml/Main.qml

@@ -14,7 +14,29 @@ Item {
         { symbol: "TOK6", name: "Token 6", color: "#9b59b6", letter: "L", address: "0x1337000000000000000000000000000000000cafe", usdPrice: 0.42   }
     ]
 
-    // ── Theme ─────────────────────────────────────────────────────────────────
+    // ── Navigation bar ────────────────────────────────────────────────────────
+    // Pinned to the top; self-contained styling, unaffected by view themes.
+    NavBar {
+        id: navbar
+        anchors.top:   parent.top
+        anchors.left:  parent.left
+        anchors.right: parent.right
+        z: 100
+    }
+
+    // ── Content area (below the nav bar) ──────────────────────────────────────
+    Item {
+        anchors.top:    navbar.bottom
+        anchors.left:   parent.left
+        anchors.right:  parent.right
+        anchors.bottom: parent.bottom
+
+        // ── Trade view ────────────────────────────────────────────────────────
+        Item {
+            anchors.fill: parent
+            visible: navbar.currentIndex === 0
+
+            // Trade view theme — scoped here, invisible to NavBar and LP view.
             QtObject {
                 id: theme
                 property bool isDark: false
@@ -65,7 +87,6 @@ Item {
                 })
             }
 
-    // ── Root background ───────────────────────────────────────────────────────
             Rectangle {
                 anchors.fill: parent
                 color: theme.colors.background
@@ -103,14 +124,6 @@ Item {
                     anchors.centerIn: parent
                     spacing: 28
 
-            Text {
-                Layout.alignment: Qt.AlignHCenter
-                text: "Logos AMM"
-                color: theme.colors.textPrimary
-                font.pixelSize: 48
-                font.weight: Font.Bold
-            }
-
                     SwapCard {
                         id: swapCard
                         Layout.alignment: Qt.AlignHCenter
@@ -149,4 +162,12 @@ Item {
                     }
                 }
             }
+        }
+
+        // ── Liquidity view (placeholder — replaced when LP branch merges) ─────
+        Item {
+            anchors.fill: parent
+            visible: navbar.currentIndex === 1
+        }
+    }
 }

amm-ui/qml/NavBar.qml

@@ -0,0 +1,86 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+
+// Self-contained navigation bar — styling is independent of any view's theme.
+// Use currentIndex to read the active tab; tabChanged(index) fires on selection.
+Item {
+    id: root
+
+    property int currentIndex: 0
+    readonly property var tabs: ["Trade", "Liquidity"]
+
+    signal tabChanged(int index)
+
+    implicitHeight: 56
+
+    Rectangle {
+        anchors.fill: parent
+        color: "#ffffff"
+
+        // Bottom separator
+        Rectangle {
+            anchors.left:   parent.left
+            anchors.right:  parent.right
+            anchors.bottom: parent.bottom
+            height: 1
+            color: Qt.rgba(0, 0, 0, 0.08)
+        }
+
+        RowLayout {
+            anchors.fill: parent
+            anchors.leftMargin:  20
+            anchors.rightMargin: 20
+            spacing: 4
+
+            // App identity
+            Text {
+                text: "Logos AMM"
+                color: "#111111"
+                font.pixelSize: 17
+                font.weight: Font.Bold
+            }
+
+            Item { Layout.fillWidth: true }
+
+            // Tab pills
+            Row {
+                spacing: 4
+
+                Repeater {
+                    model: root.tabs
+
+                    delegate: Rectangle {
+                        readonly property bool active: root.currentIndex === index
+
+                        height: 36
+                        width:  tabLabel.implicitWidth + 28
+                        radius: 18
+                        color:  active ? "#111111" : "transparent"
+
+                        Behavior on color { ColorAnimation { duration: 150 } }
+
+                        Text {
+                            id: tabLabel
+                            anchors.centerIn: parent
+                            text:        modelData
+                            color:       active ? "#ffffff" : "#666666"
+                            font.pixelSize: 14
+                            font.weight: active ? Font.Medium : Font.Normal
+
+                            Behavior on color { ColorAnimation { duration: 150 } }
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                root.currentIndex = index
+                                root.tabChanged(index)
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}