From 9cedfc3977bf749974fabdde664f90e495fc5618 Mon Sep 17 00:00:00 2001
From: Case Delst <casedelst@gmail.com>
Date: Wed, 4 Sep 2024 15:57:16 -0700
Subject: [PATCH 1/2] Do a whole lot of stuff

---
 internal/dev_server/ui/package-lock.json | 255 ++++--------------
 internal/dev_server/ui/package.json      |  10 +-
 internal/dev_server/ui/src/App.css       |  30 ++-
 internal/dev_server/ui/src/App.tsx       |  23 +-
 internal/dev_server/ui/src/Flag.tsx      | 117 +++++---
 internal/dev_server/ui/src/Flags.tsx     | 327 +++++++++++++++--------
 6 files changed, 377 insertions(+), 385 deletions(-)

diff --git a/internal/dev_server/ui/package-lock.json b/internal/dev_server/ui/package-lock.json
index a66c46a9..ba7e2d7c 100644
--- a/internal/dev_server/ui/package-lock.json
+++ b/internal/dev_server/ui/package-lock.json
@@ -11,14 +11,18 @@
         "@launchpad-ui/components": "0.4.4",
         "@launchpad-ui/core": "0.49.22",
         "@launchpad-ui/icons": "0.18.13",
-        "@launchpad-ui/tokens": "0.9.12",
+        "@launchpad-ui/tokens": "0.11.3",
         "launchdarkly-js-client-sdk": "3.4.0",
+        "lodash": "4.17.21",
         "react": "18.3.1",
-        "react-dom": "18.3.1"
+        "react-dom": "18.3.1",
+        "react-window": "1.8.10"
       },
       "devDependencies": {
+        "@types/lodash": "4.17.7",
         "@types/react": "18.3.3",
         "@types/react-dom": "18.3.0",
+        "@types/react-window": "1.8.8",
         "@typescript-eslint/eslint-plugin": "7.13.1",
         "@typescript-eslint/parser": "7.13.1",
         "@vitejs/plugin-react": "4.3.1",
@@ -312,7 +316,6 @@
       "version": "7.25.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz",
       "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==",
-      "peer": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -1053,11 +1056,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/alert/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/avatar": {
       "version": "0.6.39",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/avatar/-/avatar-0.6.39.tgz",
@@ -1072,11 +1070,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/avatar/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/banner": {
       "version": "0.10.39",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/banner/-/banner-0.10.39.tgz",
@@ -1092,11 +1085,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/banner/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/box": {
       "version": "0.1.18",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/box/-/box-0.1.18.tgz",
@@ -1114,11 +1102,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/box/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/button": {
       "version": "0.12.26",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/button/-/button-0.12.26.tgz",
@@ -1134,11 +1117,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/button/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/card": {
       "version": "0.2.46",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/card/-/card-0.2.46.tgz",
@@ -1153,11 +1131,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/card/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/chip": {
       "version": "0.9.39",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/chip/-/chip-0.9.39.tgz",
@@ -1172,11 +1145,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/chip/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/clipboard": {
       "version": "0.11.46",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/clipboard/-/clipboard-0.11.46.tgz",
@@ -1194,11 +1162,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/clipboard/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/collapsible": {
       "version": "0.1.70",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/collapsible/-/collapsible-0.1.70.tgz",
@@ -1214,11 +1177,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/collapsible/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/columns": {
       "version": "0.1.27",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/columns/-/columns-0.1.27.tgz",
@@ -1233,11 +1191,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/columns/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/components": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/components/-/components-0.4.4.tgz",
@@ -1260,11 +1213,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/components/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/core": {
       "version": "0.49.22",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/core/-/core-0.49.22.tgz",
@@ -1330,11 +1278,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/counter/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/data-table": {
       "version": "0.2.28",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/data-table/-/data-table-0.2.28.tgz",
@@ -1360,11 +1303,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/data-table/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/drawer": {
       "version": "0.5.46",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/drawer/-/drawer-0.5.46.tgz",
@@ -1386,11 +1324,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/drawer/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/dropdown": {
       "version": "0.6.120",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/dropdown/-/dropdown-0.6.120.tgz",
@@ -1408,11 +1341,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/dropdown/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/filter": {
       "version": "0.7.31",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/filter/-/filter-0.7.31.tgz",
@@ -1432,11 +1360,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/filter/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/focus-trap": {
       "version": "0.1.23",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/focus-trap/-/focus-trap-0.1.23.tgz",
@@ -1470,11 +1393,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/form/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/icons": {
       "version": "0.18.13",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/icons/-/icons-0.18.13.tgz",
@@ -1488,11 +1406,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/icons/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/inline": {
       "version": "0.1.27",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/inline/-/inline-0.1.27.tgz",
@@ -1530,16 +1443,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/inline-edit/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
-    "node_modules/@launchpad-ui/inline/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/markdown": {
       "version": "0.5.24",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/markdown/-/markdown-0.5.24.tgz",
@@ -1555,11 +1458,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/markdown/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/menu": {
       "version": "0.13.31",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/menu/-/menu-0.13.31.tgz",
@@ -1581,11 +1479,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/menu/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/modal": {
       "version": "0.17.46",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/modal/-/modal-0.17.46.tgz",
@@ -1606,11 +1499,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/modal/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/navigation": {
       "version": "0.12.46",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/navigation/-/navigation-0.12.46.tgz",
@@ -1634,11 +1522,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/navigation/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/overlay": {
       "version": "0.3.30",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/overlay/-/overlay-0.3.30.tgz",
@@ -1668,11 +1551,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/pagination/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/popover": {
       "version": "0.11.30",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/popover/-/popover-0.11.30.tgz",
@@ -1691,11 +1569,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/popover/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/portal": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/portal/-/portal-0.1.5.tgz",
@@ -1732,16 +1605,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/progress-bubbles/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
-    "node_modules/@launchpad-ui/progress/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/select": {
       "version": "0.4.46",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/select/-/select-0.4.46.tgz",
@@ -1789,11 +1652,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/select/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/slider": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/slider/-/slider-0.5.21.tgz",
@@ -1807,11 +1665,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/slider/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/snackbar": {
       "version": "0.5.27",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/snackbar/-/snackbar-0.5.27.tgz",
@@ -1828,11 +1681,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/snackbar/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/split-button": {
       "version": "0.10.31",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/split-button/-/split-button-0.10.31.tgz",
@@ -1850,11 +1698,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/split-button/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/stack": {
       "version": "0.1.27",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/stack/-/stack-0.1.27.tgz",
@@ -1869,11 +1712,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/stack/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/tab-list": {
       "version": "0.5.29",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/tab-list/-/tab-list-0.5.29.tgz",
@@ -1892,11 +1730,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/tab-list/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/table": {
       "version": "0.6.22",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/table/-/table-0.6.22.tgz",
@@ -1910,11 +1743,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/table/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/tag": {
       "version": "0.3.46",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/tag/-/tag-0.3.46.tgz",
@@ -1938,11 +1766,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/tag/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/toast": {
       "version": "0.3.40",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/toast/-/toast-0.3.40.tgz",
@@ -1958,11 +1781,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/toast/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/toggle": {
       "version": "0.7.29",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/toggle/-/toggle-0.7.29.tgz",
@@ -1979,16 +1797,11 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/toggle/node_modules/@launchpad-ui/tokens": {
+    "node_modules/@launchpad-ui/tokens": {
       "version": "0.11.3",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
       "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
     },
-    "node_modules/@launchpad-ui/tokens": {
-      "version": "0.9.12",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.9.12.tgz",
-      "integrity": "sha512-FEDBt0s+b0hlwkhSU/TiY5YXseLQYGKeIgqZUngmUiPTgaSvttlBm4BSVtoly3JK00ihNGZsvEtZVoUgp+zoKA=="
-    },
     "node_modules/@launchpad-ui/tooltip": {
       "version": "0.9.19",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/tooltip/-/tooltip-0.9.19.tgz",
@@ -2003,11 +1816,6 @@
         "react-dom": "18.3.1"
       }
     },
-    "node_modules/@launchpad-ui/tooltip/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@launchpad-ui/types": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@launchpad-ui/types/-/types-0.1.1.tgz",
@@ -2029,11 +1837,6 @@
         }
       }
     },
-    "node_modules/@launchpad-ui/vars/node_modules/@launchpad-ui/tokens": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@launchpad-ui/tokens/-/tokens-0.11.3.tgz",
-      "integrity": "sha512-84Tm/duRQIs31TreFMYfFbhNZSk+FQl00/l0OZ9DHk1d4j9La0Od8dJ5d6pRJg1u7Q5q/vLWg3J+lZqlfdMqlA=="
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4200,6 +4003,12 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.7",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
+      "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==",
+      "dev": true
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -4225,6 +4034,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-window": {
+      "version": "1.8.8",
+      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
+      "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -5987,6 +5805,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -6039,6 +5862,11 @@
         "@babel/runtime": "^7.12.5"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -6596,11 +6424,26 @@
         "react": "^16.6.3 || ^17.0.0"
       }
     },
+    "node_modules/react-window": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
+      "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "peer": true
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "node_modules/requires-port": {
       "version": "1.0.0",
diff --git a/internal/dev_server/ui/package.json b/internal/dev_server/ui/package.json
index ae07c08a..3af1191f 100644
--- a/internal/dev_server/ui/package.json
+++ b/internal/dev_server/ui/package.json
@@ -12,16 +12,20 @@
   },
   "dependencies": {
     "@launchpad-ui/components": "0.4.4",
-    "@launchpad-ui/core": "0.49.22", 
+    "@launchpad-ui/core": "0.49.22",
     "@launchpad-ui/icons": "0.18.13",
-    "@launchpad-ui/tokens": "0.9.12",
+    "@launchpad-ui/tokens": "0.11.3",
     "launchdarkly-js-client-sdk": "3.4.0",
+    "lodash": "4.17.21",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "react-window": "1.8.10"
   },
   "devDependencies": {
+    "@types/lodash": "4.17.7",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "@types/react-window": "1.8.8",
     "@typescript-eslint/eslint-plugin": "7.13.1",
     "@typescript-eslint/parser": "7.13.1",
     "@vitejs/plugin-react": "4.3.1",
diff --git a/internal/dev_server/ui/src/App.css b/internal/dev_server/ui/src/App.css
index f3e0b0fb..e54f9161 100644
--- a/internal/dev_server/ui/src/App.css
+++ b/internal/dev_server/ui/src/App.css
@@ -2,40 +2,41 @@
 @import url('../node_modules/@launchpad-ui/tokens/dist/media-queries.css');
 @import url('../node_modules/@launchpad-ui/tokens/dist/themes.css');
 
-@font-face {
+/* @font-face {
   font-family: 'Inter';
   font-style: normal;
-  font-weight: 300 800;
+  font-weight: 300 700;
   font-display: swap;
   src: url('https://fonts.gstatic.com/s/inter/v7/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2')
     format('woff2');
-}
+} */ 
 
 @font-face {
+  font-family: inter;
+  src: url('https://fonts.gstatic.com/s/inter/v7/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2') format('woff2');
+  font-display: swap;
+  font-weight: 300 700;
+}
+
+/* @font-face {
   font-family: 'Audimat 3000 Regulier';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('Audimat3000-Regulier.var-subset.woff2') format('woff2');
-}
+} */
 
 html,
 body,
 #root {
-  height: 100%;
   box-sizing: border-box;
-  font-family: 'Inter', sans-serif;
-}
+  /* font-family: 'Inter', sans-serif; */
 
-#root {
-  padding: 2rem;
+  font-family: var(--lp-font-family-base);
+  font-size: var(--lp-font-size-300);
+  line-height: var(--lp-line-height-300);
 } 
 
-.container {
-  max-width: 40rem;
-  margin: 0 auto;
-}
-
 .only-show-overrides-label {
   display: flex;
   flex-direction: row;
@@ -63,6 +64,7 @@ ul.flags-list li .flag-value {
   flex-direction: row;
   align-items: center;
   flex-shrink: 1;
+  padding-right: 1rem;
 }
 
 code {
diff --git a/internal/dev_server/ui/src/App.tsx b/internal/dev_server/ui/src/App.tsx
index 2b0387e8..f23b25a1 100644
--- a/internal/dev_server/ui/src/App.tsx
+++ b/internal/dev_server/ui/src/App.tsx
@@ -29,25 +29,22 @@ function App() {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
+        padding: '1rem',
       }}
     >
-      <div
+      <Box
         style={{
-          display: 'flex',
-          flexDirection: 'column',
           alignItems: 'center',
-          minWidth: '700px',
+          width: '100%',
+          maxWidth: '900px',
+          minWidth: '600px',
+          padding: '2rem',
+          boxSizing: 'border-box',
         }}
       >
-        <Box
-          display="flex"
-          flexDirection="column"
-          alignItems="center"
-          padding="1rem"
-          maxWidth="1200px"
-        >
+        <Box display="flex" flexDirection="column" padding="1rem" width="100%">
           {showBanner && (
-            <Box margin="0rem 0rem 2rem 0rem" width="100%">
+            <Box marginBottom="2rem" width="100%">
               <Alert kind="error">
                 <Heading>No projects.</Heading>
                 <Text>Add one via</Text>
@@ -101,7 +98,7 @@ function App() {
             </Box>
           )}
         </Box>
-      </div>
+      </Box>
     </div>
   );
 }
diff --git a/internal/dev_server/ui/src/Flag.tsx b/internal/dev_server/ui/src/Flag.tsx
index 8b62a4a2..49df8633 100644
--- a/internal/dev_server/ui/src/Flag.tsx
+++ b/internal/dev_server/ui/src/Flag.tsx
@@ -25,7 +25,8 @@ import { FormEvent, Fragment } from 'react';
 import { Icon } from '@launchpad-ui/icons';
 import { LDFlagValue } from 'launchdarkly-js-client-sdk';
 import { FlagVariation } from './api.ts';
-import { Box } from '@launchpad-ui/core';
+import { Box, Inline } from '@launchpad-ui/core';
+import _ from 'lodash';
 
 type VariationValuesProps = {
   availableVariations: FlagVariation[];
@@ -53,8 +54,8 @@ const VariationValues = ({
       );
     default:
       let variations = availableVariations;
-      let selectedVariationIndex = variations.findIndex(
-        (variation) => variation.value === currentValue,
+      let selectedVariationIndex = variations.findIndex((variation) =>
+        _.isEqual(variation.value, currentValue),
       );
       if (selectedVariationIndex === -1) {
         variations = [
@@ -74,8 +75,71 @@ const VariationValues = ({
       //TODO:
       // Grow the text area when editing local override
       return (
-        <>
-          <Box width="2rem" height="2rem" marginRight="0.5rem">
+        <Inline gap="2">
+          <Select
+            aria-label="flag variations select"
+            selectedKey={selectedVariationIndex}
+            onSelectionChange={(key) => {
+              if (typeof key != 'number') {
+                console.error(`selected non numeric key: ${key}`);
+              } else {
+                updateOverride(flagKey, variations[key].value);
+              }
+            }}
+            style={{
+              maxWidth: '250px',
+            }}
+          >
+            <Fragment key=".0">
+              {selectedVariationIndex !== null &&
+              variations[selectedVariationIndex]._id === 'OVERRIDE' ? (
+                <TooltipTrigger>
+                  <Button>
+                    <SelectValue />
+                    <Icon name="chevron-down" size="small" />
+                  </Button>
+                  <Tooltip>
+                    This value is overriden locally. Click the edit button to
+                    change the value served.
+                  </Tooltip>
+                </TooltipTrigger>
+              ) : (
+                <Button>
+                  <SelectValue
+                    style={{
+                      maxWidth: '250px',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                  />
+                  <Icon name="chevron-down" size="small" />
+                </Button>
+              )}
+              <Popover>
+                <ListBox>
+                  {variations.map((fv, index) => {
+                    const text = fv.name ? fv.name : JSON.stringify(fv.value);
+                    return (
+                      <ListBoxItem key={index} id={index} textValue={text}>
+                        {fv._id === 'OVERRIDE' ? (
+                          <div>
+                            <Inline gap="1">
+                              <Icon name="devices" size="small" />
+                              {text}
+                            </Inline>
+                          </div>
+                        ) : (
+                          <div>{text}</div>
+                        )}
+                      </ListBoxItem>
+                    );
+                  })}
+                </ListBox>
+              </Popover>
+            </Fragment>
+          </Select>
+          <Box width="2rem" height="2rem">
             <DialogTrigger>
               <TooltipTrigger>
                 <IconButton icon="edit" aria-label="edit variation value" />
@@ -89,6 +153,10 @@ const VariationValues = ({
                         <TextField
                           defaultValue={JSON.stringify(currentValue, null, 2)}
                           name="value"
+                          style={{
+                            fontFamily: 'monospace',
+                            height: '25rem',
+                          }}
                           validate={(value) => {
                             try {
                               JSON.parse(value);
@@ -126,44 +194,7 @@ const VariationValues = ({
               </ModalOverlay>
             </DialogTrigger>
           </Box>
-          <Select
-            aria-label="flag variations select"
-            selectedKey={selectedVariationIndex}
-            onSelectionChange={(key) => {
-              if (typeof key != 'number') {
-                console.error(`selected non numeric key: ${key}`);
-              } else {
-                updateOverride(flagKey, variations[key].value);
-              }
-            }}
-          >
-            <Fragment key=".0">
-              <Button>
-                <SelectValue />
-                <Icon name="chevron-down" size="small" />
-              </Button>
-              <Popover>
-                <ListBox>
-                  {variations.map((fv, index) => {
-                    const text = fv.name ? fv.name : JSON.stringify(fv.value);
-                    return (
-                      <ListBoxItem key={index} id={index} textValue={text}>
-                        {fv._id === 'OVERRIDE' ? (
-                          <>
-                            {text}
-                            <Icon name="devices" size="small" />
-                          </>
-                        ) : (
-                          text
-                        )}
-                      </ListBoxItem>
-                    );
-                  })}
-                </ListBox>
-              </Popover>
-            </Fragment>
-          </Select>
-        </>
+        </Inline>
       );
   }
 };
diff --git a/internal/dev_server/ui/src/Flags.tsx b/internal/dev_server/ui/src/Flags.tsx
index 8e89ba30..14e4c539 100644
--- a/internal/dev_server/ui/src/Flags.tsx
+++ b/internal/dev_server/ui/src/Flags.tsx
@@ -1,6 +1,20 @@
 import { LDFlagSet, LDFlagValue } from 'launchdarkly-js-client-sdk';
-import { Button, Checkbox, IconButton, Label } from '@launchpad-ui/components';
-import { Box, CopyToClipboard } from '@launchpad-ui/core';
+import {
+  Button,
+  Checkbox,
+  IconButton,
+  Label,
+  Input,
+  SearchField,
+  Group,
+} from '@launchpad-ui/components';
+import {
+  Box,
+  CopyToClipboard,
+  Inline,
+  Pagination,
+  Stack,
+} from '@launchpad-ui/core';
 import Theme from '@launchpad-ui/tokens';
 import { useEffect, useState, useCallback, useMemo } from 'react';
 import { Icon } from '@launchpad-ui/icons';
@@ -28,12 +42,47 @@ function Flags({
   const [availableVariations, setAvailableVariations] = useState<
     Record<string, FlagVariation[]>
   >({});
+  const [searchTerm, setSearchTerm] = useState('');
+  const [currentPage, setCurrentPage] = useState(0); // Change initial page to 0
+  const flagsPerPage = 20;
 
   const overridesPresent = useMemo(
     () => overrides && Object.keys(overrides).length > 0,
     [overrides],
   );
 
+  const filteredFlags = useMemo(() => {
+    if (!flags) return [];
+    const flagEntries = Object.entries(flags);
+    const filtered = flagEntries.filter(([flagKey]) => {
+      const search = searchTerm.toLowerCase();
+      const key = flagKey.toLowerCase();
+      let searchIndex = 0;
+
+      // Fuzzy search :P
+      for (let i = 0; i < key.length; i++) {
+        if (
+          key[i] === search[searchIndex] ||
+          ((key[i] == '-' || key[i] == '_' || key[i] == '.') &&
+            search[searchIndex] == ' ')
+        ) {
+          searchIndex++;
+        }
+        if (searchIndex === search.length) {
+          return true;
+        }
+      }
+      return false;
+    });
+    return filtered;
+  }, [flags, searchTerm]);
+
+  const paginatedFlags = useMemo(() => {
+    const startIndex = currentPage * flagsPerPage; // Adjust startIndex calculation
+    const endIndex = startIndex + flagsPerPage;
+    return filteredFlags.slice(startIndex, endIndex);
+  }, [filteredFlags, currentPage]);
+
   const updateOverride = useCallback(
     (flagKey: string, overrideValue: LDFlagValue) => {
       const updatedOverrides = {
@@ -149,136 +198,202 @@ function Flags({
     return null;
   }
 
+  const totalPages = Math.ceil(filteredFlags.length / flagsPerPage);
+
+  const handlePageChange = (direction: string) => {
+    switch (direction) {
+      case 'next':
+        setCurrentPage(
+          (prevPage) => Math.min(prevPage + 1, totalPages - 1), // Adjust page increment
+        );
+        break;
+      case 'prev':
+        setCurrentPage((prevPage) => Math.max(prevPage - 1, 0)); // Adjust page decrement
+        break;
+      case 'first':
+        setCurrentPage(0); // Adjust first page
+        break;
+      case 'last':
+        setCurrentPage(totalPages - 1); // Adjust last page
+        break;
+      default:
+        break;
+    }
+  };
+
   return (
     <>
-      <div className="container">
-        <Box
-          display="flex"
-          flexDirection="row"
-          justifyContent="space-between"
-          alignItems="center"
-          marginBottom="2rem"
-          padding="1rem"
-          background={Theme.color.blue[50]}
-          borderRadius={Theme.borderRadius.regular}
+      <Box
+        display="flex"
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="center"
+        marginBottom="2rem"
+        padding="1rem"
+        background={Theme.color.blue[50]}
+        borderRadius={Theme.borderRadius.regular}
+      >
+        <Label
+          htmlFor="only-show-overrides"
+          className="only-show-overrides-label"
         >
-          <Label
-            htmlFor="only-show-overrides"
-            className="only-show-overrides-label"
-          >
-            <Checkbox
-              id="only-show-overrides"
-              isSelected={onlyShowOverrides}
-              onChange={(newValue) => {
-                setOnlyShowOverrides(newValue);
-              }}
-              isDisabled={!overridesPresent}
-              style={{
-                display: 'inline-block',
-                marginRight: '.25rem',
-              }}
-            />
-            Only show flags with overrides
-          </Label>
-          <Button
-            variant="destructive"
+          <Checkbox
+            id="only-show-overrides"
+            isSelected={onlyShowOverrides}
+            onChange={(newValue) => {
+              setOnlyShowOverrides(newValue);
+            }}
             isDisabled={!overridesPresent}
-            onPress={async () => {
-              // This button is disabled unless overrides are present, but the
-              // type is nullable
-              if (!overrides) {
-                return;
-              }
+            style={{
+              display: 'inline-block',
+              marginRight: '.25rem',
+            }}
+          />
+          Only show flags with overrides
+        </Label>
+        <Button
+          variant="destructive"
+          isDisabled={!overridesPresent}
+          onPress={async () => {
+            // This button is disabled unless overrides are present, but the
+            // type is nullable
+            if (!overrides) {
+              return;
+            }
 
-              const overrideKeys = Object.keys(overrides);
+            const overrideKeys = Object.keys(overrides);
 
-              await Promise.all(
-                overrideKeys.map((flagKey) => {
-                  // Opt out of local state updates since we're bulk-removing
-                  // overrides async
-                  removeOverride(flagKey);
-                }),
-              );
+            await Promise.all(
+              overrideKeys.map((flagKey) => {
+                // Opt out of local state updates since we're bulk-removing
+                // overrides async
+                removeOverride(flagKey);
+              }),
+            );
 
-              // Winnow out removed overrides and update local state in a
-              // single pass
-              const updatedOverrides = overrideKeys.reduce(
-                (accum, flagKey) => {
-                  delete accum[flagKey];
+            // Winnow out removed overrides and update local state in a
+            // single pass
+            const updatedOverrides = overrideKeys.reduce(
+              (accum, flagKey) => {
+                delete accum[flagKey];
 
-                  return accum;
-                },
-                { ...overrides },
-              );
+                return accum;
+              },
+              { ...overrides },
+            );
 
-              setOverrides(updatedOverrides);
-              setOnlyShowOverrides(false);
-            }}
-          >
-            <Icon size="medium" name="cancel" />
-            Remove all overrides
-          </Button>
-        </Box>
+            setOverrides(updatedOverrides);
+            setOnlyShowOverrides(false);
+          }}
+        >
+          <Icon size="medium" name="cancel" />
+          Remove all overrides
+        </Button>
+      </Box>
+      <Stack gap="4">
+        <Inline gap="4">
+          <SearchField>
+            <Group>
+              <Icon name="search" size="small" />
+              <Input
+                placeholder="Search flags"
+                onChange={(e) => {
+                  setSearchTerm(e.target.value);
+                  setCurrentPage(0); // Reset pagination
+                }}
+              />
+              <IconButton
+                aria-label="clear"
+                icon="cancel-circle-outline"
+                size="small"
+                variant="minimal"
+              />
+            </Group>
+          </SearchField>
+        </Inline>
         <ul className="flags-list">
-          {Object.entries(flags).map(
-            ([flagKey, { value: flagValue }], index) => {
-              const overrideValue = overrides[flagKey]?.value;
-              const hasOverride = flagKey in overrides;
-              const currentValue = hasOverride ? overrideValue : flagValue;
+          {paginatedFlags.map(([flagKey, { value: flagValue }], index) => {
+            const overrideValue = overrides[flagKey]?.value;
+            const hasOverride = flagKey in overrides;
+            const currentValue = hasOverride ? overrideValue : flagValue;
 
-              if (onlyShowOverrides && !hasOverride) {
-                return null;
-              }
+            if (onlyShowOverrides && !hasOverride) {
+              return null;
+            }
 
-              return (
-                <li
-                  key={flagKey}
-                  style={{
-                    backgroundColor: index % 2 === 0 ? 'white' : '#f8f8f8',
-                  }}
-                >
-                  <Box
-                    whiteSpace="nowrap"
-                    flexGrow="1"
-                    paddingLeft="1rem"
-                    paddingRight="1rem"
-                  >
+            return (
+              <li
+                key={flagKey}
+                style={{
+                  backgroundColor: index % 2 === 0 ? 'white' : '#f8f8f8',
+                  height: '2rem',
+                  display: 'flex',
+                  alignItems: 'center',
+                }}
+              >
+                <Box whiteSpace="nowrap" paddingLeft="1rem" paddingRight="1rem">
+                  <Inline gap="2">
                     <CopyToClipboard asChild text={flagKey}>
                       <code className={hasOverride ? 'has-override' : ''}>
                         {flagKey}
                       </code>
                     </CopyToClipboard>
-                  </Box>
-                  <div className="flag-value">
-                    <VariationValues
-                      availableVariations={
-                        availableVariations[flagKey]
-                          ? availableVariations[flagKey]
-                          : []
-                      }
-                      currentValue={currentValue}
-                      flagValue={flagValue}
-                      flagKey={flagKey}
-                      updateOverride={updateOverride}
-                    />
-                  </div>
-                  <Box width="2rem" height="2rem" marginLeft="0.5rem">
+
                     {hasOverride && (
-                      <IconButton
+                      <Button
                         icon="cancel"
                         aria-label="Remove override"
                         onPress={() => {
                           removeOverride(flagKey);
                         }}
                         variant="destructive"
-                      />
+                      >
+                        <Inline gap="2">
+                          <Icon name="cancel" size="small" />
+                          Remove override
+                        </Inline>
+                      </Button>
                     )}
-                  </Box>
-                </li>
-              );
-            },
-          )}
+                  </Inline>
+                </Box>
+                <Box
+                  alignItems="center"
+                  paddingRight="1rem"
+                  overflow="hidden"
+                  flexShrink={0}
+                >
+                  <VariationValues
+                    availableVariations={
+                      availableVariations[flagKey]
+                        ? availableVariations[flagKey]
+                        : []
+                    }
+                    currentValue={currentValue}
+                    flagValue={flagValue}
+                    flagKey={flagKey}
+                    updateOverride={updateOverride}
+                  />
+                </Box>
+              </li>
+            );
+          })}
         </ul>
+      </Stack>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          marginTop: '1rem',
+        }}
+      >
+        <Pagination
+          currentOffset={currentPage * flagsPerPage}
+          isReady
+          onChange={(e) => handlePageChange(e as string)}
+          pageSize={flagsPerPage}
+          resourceName="flags"
+          totalCount={filteredFlags.length}
+        />
       </div>
     </>
   );

From 4f84327bb2c763984a0e6d5807bebd5b36f3b22b Mon Sep 17 00:00:00 2001
From: Case Delst <casedelst@gmail.com>
Date: Thu, 5 Sep 2024 11:37:29 -0700
Subject: [PATCH 2/2] PR feedback

---
 internal/dev_server/ui/package-lock.json |  6 ++++
 internal/dev_server/ui/package.json      |  1 +
 internal/dev_server/ui/src/App.css       | 22 ++-----------
 internal/dev_server/ui/src/Flag.tsx      |  6 ++--
 internal/dev_server/ui/src/Flags.tsx     | 35 +++++++--------------
 internal/dev_server/ui/src/main.tsx      | 40 +++++++++++++++++++-----
 6 files changed, 57 insertions(+), 53 deletions(-)

diff --git a/internal/dev_server/ui/package-lock.json b/internal/dev_server/ui/package-lock.json
index ba7e2d7c..92289af8 100644
--- a/internal/dev_server/ui/package-lock.json
+++ b/internal/dev_server/ui/package-lock.json
@@ -12,6 +12,7 @@
         "@launchpad-ui/core": "0.49.22",
         "@launchpad-ui/icons": "0.18.13",
         "@launchpad-ui/tokens": "0.11.3",
+        "fuzzysort": "3.0.2",
         "launchdarkly-js-client-sdk": "3.4.0",
         "lodash": "4.17.21",
         "react": "18.3.1",
@@ -5338,6 +5339,11 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/fuzzysort": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/fuzzysort/-/fuzzysort-3.0.2.tgz",
+      "integrity": "sha512-ZyahVgxvckB1Qosn7YGWLDJJp2XlyaQ2WmZeI+d0AzW0AMqVYnz5N89G6KAKa6m/LOtv+kzJn4lhDF/yVg11Cg=="
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
diff --git a/internal/dev_server/ui/package.json b/internal/dev_server/ui/package.json
index 3af1191f..b6f415f0 100644
--- a/internal/dev_server/ui/package.json
+++ b/internal/dev_server/ui/package.json
@@ -15,6 +15,7 @@
     "@launchpad-ui/core": "0.49.22",
     "@launchpad-ui/icons": "0.18.13",
     "@launchpad-ui/tokens": "0.11.3",
+    "fuzzysort": "3.0.2",
     "launchdarkly-js-client-sdk": "3.4.0",
     "lodash": "4.17.21",
     "react": "18.3.1",
diff --git a/internal/dev_server/ui/src/App.css b/internal/dev_server/ui/src/App.css
index e54f9161..3002ba08 100644
--- a/internal/dev_server/ui/src/App.css
+++ b/internal/dev_server/ui/src/App.css
@@ -2,15 +2,6 @@
 @import url('../node_modules/@launchpad-ui/tokens/dist/media-queries.css');
 @import url('../node_modules/@launchpad-ui/tokens/dist/themes.css');
 
-/* @font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 300 700;
-  font-display: swap;
-  src: url('https://fonts.gstatic.com/s/inter/v7/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2')
-    format('woff2');
-} */ 
-
 @font-face {
   font-family: inter;
   src: url('https://fonts.gstatic.com/s/inter/v7/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2') format('woff2');
@@ -18,23 +9,16 @@
   font-weight: 300 700;
 }
 
-/* @font-face {
-  font-family: 'Audimat 3000 Regulier';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('Audimat3000-Regulier.var-subset.woff2') format('woff2');
-} */
-
 html,
 body,
 #root {
-  box-sizing: border-box;
-  /* font-family: 'Inter', sans-serif; */
+  box-sizing: border-box; 
 
   font-family: var(--lp-font-family-base);
   font-size: var(--lp-font-size-300);
   line-height: var(--lp-line-height-300);
+
+  background-color: var(--lp-color-bg-ui-primary);
 } 
 
 .only-show-overrides-label {
diff --git a/internal/dev_server/ui/src/Flag.tsx b/internal/dev_server/ui/src/Flag.tsx
index 49df8633..51c4da00 100644
--- a/internal/dev_server/ui/src/Flag.tsx
+++ b/internal/dev_server/ui/src/Flag.tsx
@@ -26,7 +26,7 @@ import { Icon } from '@launchpad-ui/icons';
 import { LDFlagValue } from 'launchdarkly-js-client-sdk';
 import { FlagVariation } from './api.ts';
 import { Box, Inline } from '@launchpad-ui/core';
-import _ from 'lodash';
+import { isEqual } from 'lodash';
 
 type VariationValuesProps = {
   availableVariations: FlagVariation[];
@@ -55,7 +55,7 @@ const VariationValues = ({
     default:
       let variations = availableVariations;
       let selectedVariationIndex = variations.findIndex((variation) =>
-        _.isEqual(variation.value, currentValue),
+        isEqual(variation.value, currentValue),
       );
       if (selectedVariationIndex === -1) {
         variations = [
@@ -130,7 +130,7 @@ const VariationValues = ({
                             </Inline>
                           </div>
                         ) : (
-                          <div>{text}</div>
+                          text
                         )}
                       </ListBoxItem>
                     );
diff --git a/internal/dev_server/ui/src/Flags.tsx b/internal/dev_server/ui/src/Flags.tsx
index 14e4c539..4091655a 100644
--- a/internal/dev_server/ui/src/Flags.tsx
+++ b/internal/dev_server/ui/src/Flags.tsx
@@ -21,6 +21,7 @@ import { Icon } from '@launchpad-ui/icons';
 import { apiRoute, sortFlags } from './util.ts';
 import { FlagsApiResponse, FlagVariation } from './api.ts';
 import VariationValues from './Flag.tsx';
+import fuzzysort from 'fuzzysort';
 
 type FlagProps = {
   selectedProject: string;
@@ -54,26 +55,10 @@ function Flags({
   const filteredFlags = useMemo(() => {
     if (!flags) return [];
     const flagEntries = Object.entries(flags);
-    const filtered = flagEntries.filter(([flagKey]) => {
-      const search = searchTerm.toLowerCase();
-      const key = flagKey.toLowerCase();
-      let searchIndex = 0;
-
-      // Fuzzy search :P
-      for (let i = 0; i < key.length; i++) {
-        if (
-          key[i] === search[searchIndex] ||
-          ((key[i] == '-' || key[i] == '_' || key[i] == '.') &&
-            search[searchIndex] == ' ')
-        ) {
-          searchIndex++;
-        }
-        if (searchIndex === search.length) {
-          return true;
-        }
-      }
-      return false;
-    });
+    const search = searchTerm.toLowerCase();
+    const filtered = fuzzysort
+      .go(search, flagEntries, { all: true, key: '0', threshold: 0.7 })
+      .map((result) => result.obj);
     return filtered;
   }, [flags, searchTerm]);
 
@@ -217,7 +202,7 @@ function Flags({
         setCurrentPage(totalPages - 1); // Adjust last page
         break;
       default:
-        break;
+        console.error('invalid page change direction.');
     }
   };
 
@@ -230,7 +215,8 @@ function Flags({
         alignItems="center"
         marginBottom="2rem"
         padding="1rem"
-        background={Theme.color.blue[50]}
+        background={'var(--lp-color-bg-feedback-info)'}
+        border={'100px solid var(--lp-color-border-feedback-info)'}
         borderRadius={Theme.borderRadius.regular}
       >
         <Label
@@ -325,7 +311,10 @@ function Flags({
               <li
                 key={flagKey}
                 style={{
-                  backgroundColor: index % 2 === 0 ? 'white' : '#f8f8f8',
+                  backgroundColor:
+                    index % 2 === 0
+                      ? 'var(--lp-color-bg-ui-primary)'
+                      : 'var(--lp-color-bg-ui-secondary)',
                   height: '2rem',
                   display: 'flex',
                   alignItems: 'center',
diff --git a/internal/dev_server/ui/src/main.tsx b/internal/dev_server/ui/src/main.tsx
index d719fff9..269dccc5 100644
--- a/internal/dev_server/ui/src/main.tsx
+++ b/internal/dev_server/ui/src/main.tsx
@@ -1,12 +1,36 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 import { IconProvider } from './IconProvider.tsx';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <IconProvider>
-      <App />
-    </IconProvider>
-  </React.StrictMode>,
-);
+const Root = () => {
+  useEffect(() => {
+    const darkModeMediaQuery = window.matchMedia(
+      '(prefers-color-scheme: dark)',
+    );
+    const handleChange = (e: MediaQueryListEvent) => {
+      document.documentElement.setAttribute(
+        'data-theme',
+        e.matches ? 'dark' : 'default',
+      );
+    };
+
+    // Idk why but typescript is not happy with the type of darkModeMediaQuery
+    handleChange(darkModeMediaQuery as unknown as MediaQueryListEvent);
+    darkModeMediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      darkModeMediaQuery.removeEventListener('change', handleChange);
+    };
+  }, []);
+
+  return (
+    <React.StrictMode>
+      <IconProvider>
+        <App />
+      </IconProvider>
+    </React.StrictMode>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<Root />);