feat: test adding hotosm/ui header

Author: spwoodcock

frontend/app/main.tsx

@@ -1,3 +1,4 @@
+import '@hotosm/ui/dist/components/header/header.js';
 import { allDefined } from '@awesome.me/webawesome/dist/webawesome.js';
 
 import Detail from '$components/detail';
@@ -35,6 +36,13 @@ function AppContent() {
   const [showDetailPane, setShowDetailPane] = useState(false);
   return (
     <StacProvider>
+      <hot-header
+        title="OpenAerialMap"
+        logo="https://data.humdata.org/image/2018-05-02-135324.187483Hot_logo_with_text_300x125.png"
+        showLogin
+        osm-oauth-client-id="9qmECyRwBNFyqNl9LszwHX1WOxKFKeBsA5ofAS1GJGY"
+        osm-oauth-redirect-uri="https://hotosm.github.io/openaerialmap/"
+      ></hot-header>
       <Sidebar
         isDetailPaneShown={showDetailPane}
         setShowDetailPane={setShowDetailPane}

frontend/package.json

@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@awesome.me/webawesome": "3.0.0-beta.1",
-    "@hotosm/ui": "0.3.1-b1",
+    "@hotosm/ui": "0.3.1-b4",
     "@tanstack/react-query": "^5.81.5",
     "maplibre-gl": "^5.6.1",
     "next-themes": "^0.4.6",