Add hotosm/ui header

frontend/app/components/detail.tsx

@@ -1,14 +1,30 @@
 import React from 'react';
 
-import '@awesome.me/webawesome/dist/components/drawer/drawer.js';
-import '@awesome.me/webawesome/dist/components/button/button.js';
-import '@awesome.me/webawesome/dist/components/button-group/button-group.js';
-import '@awesome.me/webawesome/dist/components/icon/icon.js';
-import '@awesome.me/webawesome/dist/components/divider/divider.js';
+// async function registerWaComponents() {
+//   if (!customElements.get('wa-drawer')) {
+//     await import('@awesome.me/webawesome/dist/components/drawer/drawer.js');
+//   }
+//   if (!customElements.get('wa-icon')) {
+//     await import('@awesome.me/webawesome/dist/components/icon/icon.js');
+//   }
+//   if (!customElements.get('wa-button')) {
+//     await import('@awesome.me/webawesome/dist/components/button/button.js');
+//   }
+//   if (!customElements.get('button-group')) {
+//     await import(
+//       '@awesome.me/webawesome/dist/components/button-group/button-group.js'
+//     );
+//   }
+//   if (!customElements.get('wa-divider')) {
+//     await import('@awesome.me/webawesome/dist/components/divider/divider.js');
+//   }
+// }
 
 import { useStac } from '../context/StacContext';
 import { StacItem } from 'stac-ts';
 
+// await registerWaComponents();
+
 interface DetailProps {
   isDetailPaneShown: boolean;
   setShowDetailPane: (isShown: boolean) => void;

frontend/app/components/map.tsx

@@ -325,7 +325,13 @@ export default function MapComponent({
   return (
     <div
       id='map'
-      style={{ position: 'fixed', top: 0, bottom: 0, right: 0, left: 480 }}
+      style={{
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+      }}
     />
   );
 }

frontend/app/components/sidebar.tsx

@@ -1,20 +1,44 @@
 import type WaSelect from '@awesome.me/webawesome/dist/components/select/select.js';
 import type { WaSelectionChangeEvent } from '@awesome.me/webawesome/dist/webawesome.js';
 
-import '@awesome.me/webawesome/dist/components/drawer/drawer.js';
-import '@awesome.me/webawesome/dist/components/button/button.js';
-import '@awesome.me/webawesome/dist/components/copy-button/copy-button.js';
-import '@awesome.me/webawesome/dist/components/spinner/spinner.js';
-import '@awesome.me/webawesome/dist/components/icon/icon.js';
-import '@awesome.me/webawesome/dist/components/select/select.js';
-import '@awesome.me/webawesome/dist/components/option/option.js';
-import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
-import '@awesome.me/webawesome/dist/components/input/input.js';
+// async function registerWaComponents() {
+//   if (!customElements.get('wa-drawer')) {
+//     await import('@awesome.me/webawesome/dist/components/drawer/drawer.js');
+//   }
+//   if (!customElements.get('wa-icon')) {
+//     await import('@awesome.me/webawesome/dist/components/icon/icon.js');
+//   }
+//   if (!customElements.get('wa-button')) {
+//     await import('@awesome.me/webawesome/dist/components/button/button.js');
+//   }
+//   if (!customElements.get('wa-copy-button')) {
+//     await import(
+//       '@awesome.me/webawesome/dist/components/copy-button/copy-button.js'
+//     );
+//   }
+//   if (!customElements.get('wa-spinner')) {
+//     await import('@awesome.me/webawesome/dist/components/spinner/spinner.js');
+//   }
+//   if (!customElements.get('wa-select')) {
+//     await import('@awesome.me/webawesome/dist/components/select/select.js');
+//   }
+//   if (!customElements.get('wa-option')) {
+//     await import('@awesome.me/webawesome/dist/components/option/option.js');
+//   }
+//   if (!customElements.get('wa-spinner')) {
+//     await import('@awesome.me/webawesome/dist/components/dialog/dialog.js');
+//   }
+//   if (!customElements.get('wa-input')) {
+//     await import('@awesome.me/webawesome/dist/components/input/input.js');
+//   }
+// }
 
 import { useEffect, useState } from 'react';
 import { useStac } from '../context/StacContext';
 import { StacFeatureCollection } from '../types/stac';
 
+// await registerWaComponents();
+
 function CollectionDropdown() {
   const { availableCollections, handleSelectCollection } = useStac();
   const [collection, setCollection] = useState<string>();
@@ -357,7 +381,7 @@ export default function Sidebar({
     <div
       style={{
         width: '450px',
-        height: '100vh',
+        height: '100%',
         display: 'flex',
         flexDirection: 'column',
         padding: '1rem',
@@ -372,7 +396,7 @@ export default function Sidebar({
           marginBottom: '1rem'
         }}
       >
-        OpenAerialMap STAC Catalog
+        Providers
       </h2>
 
       {isStacCollectionLoading && <wa-spinner />}

frontend/app/global.d.ts

@@ -1,6 +1,13 @@
 export {};
 
 declare module 'react' {
+  // hotosm/ui
+  namespace JSX {
+    interface IntrinsicElements {
+      'hot-header': any;
+    }
+  }
+  // WebAwesome
   namespace JSX {
     interface IntrinsicElements {
       'wa-drawer': any;

frontend/app/main.tsx

@@ -1,3 +1,5 @@
+import '@hotosm/ui/dist/style.css';
+import '@hotosm/ui/dist/components/header/header.js';
 import { allDefined } from '@awesome.me/webawesome/dist/webawesome.js';
 
 import Detail from '$components/detail';
@@ -35,15 +37,32 @@ function AppContent() {
   const [showDetailPane, setShowDetailPane] = useState(false);
   return (
     <StacProvider>
-      <Sidebar
-        isDetailPaneShown={showDetailPane}
-        setShowDetailPane={setShowDetailPane}
-      />
-      <Detail
-        isDetailPaneShown={showDetailPane}
-        setShowDetailPane={setShowDetailPane}
-      />
-      <MapComponent />
+      <hot-header
+        title='OpenAerialMap'
+        logo={`${import.meta.env.BASE_URL}/favicon.svg`}
+        showLogin
+        osm-oauth-client-id='9qmECyRwBNFyqNl9LszwHX1WOxKFKeBsA5ofAS1GJGY'
+        osm-oauth-redirect-uri='https://hotosm.github.io/openaerialmap/'
+      ></hot-header>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          height: `calc(100vh - var(--hot-spacing-4x-large))`
+        }}
+      >
+        <Sidebar
+          isDetailPaneShown={showDetailPane}
+          setShowDetailPane={setShowDetailPane}
+        />
+        <Detail
+          isDetailPaneShown={showDetailPane}
+          setShowDetailPane={setShowDetailPane}
+        />
+        <div style={{ flex: 1, position: 'relative' }}>
+          <MapComponent />
+        </div>
+      </div>
     </StacProvider>
   );
 }

frontend/eslint.config.mjs

@@ -26,7 +26,7 @@ export default [
       // 'import/order': 2,
       'react/button-has-type': 2,
       'react/jsx-closing-bracket-location': 2,
-      'react/jsx-closing-tag-location': 2,
+      'react/jsx-closing-tag-location': 'off',
       'react/jsx-curly-spacing': 2,
       'react/jsx-curly-newline': 2,
       'react/jsx-equals-spacing': 2,
@@ -45,7 +45,7 @@ export default [
       'react/no-unused-prop-types': 2,
       'react/no-unused-state': 2,
       'react/react-in-jsx-scope': 'off',
-      'react/self-closing-comp': 2,
+      'react/self-closing-comp': 'off',
       'react/style-prop-object': 2,
       'react/void-dom-elements-no-children': 2,
       'react/function-component-definition': [

frontend/index.html

@@ -1,5 +1,8 @@
 <!doctype html>
-<html lang="en">
+<html
+  lang="en"
+  class="hot-theme-light wa-theme-default wa-palette-hotosm wa-brand-red wa-neutral-gray wa-success-cyan wa-warning-yellow wa-danger-orange"
+>
   <head>
     <meta charset="utf-8" />
     <meta
@@ -9,47 +12,20 @@
 
     <link
       rel="icon"
-      href="%BASE_URL%/meta/favicon.png"
+      href="%BASE_URL%/favicon.png"
       type="image/png"
       sizes="32x32"
     />
-    <link rel="icon" href="%BASE_URL%/meta/icon.svg" type="image/svg+xml" />
-    <link rel="apple-touch-icon" href="%BASE_URL%/meta/apple-touch-icon.png" />
+    <link rel="icon" href="%BASE_URL%/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="%BASE_URL%/apple-touch-icon.png" />
 
-    <meta property="og:image" content="%BASE_URL%/meta/meta-image.png" />
-    <meta name="twitter:image" content="%BASE_URL%/meta/meta-image.png" />
+    <meta property="og:image" content="%BASE_URL%/meta-image.png" />
+    <meta name="twitter:image" content="%BASE_URL%/meta-image.png" />
     <meta property="og:url" content="%BASE_URL%/" />
 
     <title>%VITE_APP_TITLE%</title>
     <meta name="title" content="%VITE_APP_TITLE%" />
     <meta name="description" content="%VITE_APP_DESCRIPTION%" />
-
-    <style>
-      html * {
-        font-family:
-          system-ui,
-          -apple-system,
-          BlinkMacSystemFont,
-          'Segoe UI',
-          Roboto,
-          Oxygen,
-          Ubuntu,
-          Cantarell,
-          'Open Sans',
-          'Helvetica Neue',
-          sans-serif;
-      }
-    </style>
-
-    <!-- Web Awesome Styling (CDN) -->
-    <link
-      rel="stylesheet"
-      href="https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/themes/default.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/webawesome.css"
-    />
   </head>
 
   <body>

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.2-b4",
     "@tanstack/react-query": "^5.81.5",
     "maplibre-gl": "^5.6.1",
     "next-themes": "^0.4.6",