Migrate to Base UI to fix Navbar hydration error

package.json

@@ -24,6 +24,7 @@
     "validate:snippets": "node scripts/validate-snippets.js"
   },
   "dependencies": {
+    "@base-ui-components/react": "1.0.0-beta.4",
     "@codemirror/autocomplete": "^6.18.6",
     "@codemirror/commands": "^6.3.3",
     "@codemirror/language": "^6.10.0",

playwright.config.ts

@@ -1,5 +1,8 @@
 import { defineConfig, devices } from "@playwright/test"
 
+const JSON_REPORT = process.env.JSON_REPORT === "1"
+const DEV_SERVER_PORT = process.env.DEV_SERVER_PORT || 3000
+
 /**
  * @see https://playwright.dev/docs/test-configuration
  */
@@ -10,9 +13,11 @@ export default defineConfig({
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
-  reporter: "html",
+  reporter: JSON_REPORT
+    ? [["list"], ["json", { outputFile: "./test/test-results.json" }]]
+    : [["html"]],
   use: {
-    baseURL: "http://localhost:3000",
+    baseURL: `http://localhost:${DEV_SERVER_PORT}`,
     trace: "on-first-retry",
   },
 
@@ -25,7 +30,7 @@ export default defineConfig({
 
   webServer: {
     command: "pnpm dev",
-    url: "http://localhost:3000",
+    url: `http://localhost:${DEV_SERVER_PORT}`,
     reuseExistingServer: !process.env.CI,
   },
 })