Beginning to implement a dialog to browse within the tracks.

src/components/map/TracksBrowser.tsx

@@ -0,0 +1,60 @@
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonItem,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import React, { Fragment, useRef } from 'react';
+import { useFind } from 'react-pouchdb';
+import { enterAnimation, leaveAnimation } from '../../lib/animation';
+import phoneRoute from '../../theme/icons/font-gis/svg/routing/uEB08-phone-route-nons.svg';
+
+const TrackBrowser: React.FC<{}> = () => {
+  const gpxes = useFind({
+    selector: {
+      type: 'gpx',
+    },
+  });
+
+  const modal = useRef<HTMLIonModalElement>(null);
+
+  const dismiss = () => {
+    modal.current?.dismiss();
+  };
+
+  return (
+    <Fragment>
+      <IonButton id='track-browser-button'>
+        <img src={phoneRoute} alt='GPS tracks' width='24px' />
+      </IonButton>
+      <IonModal
+        ref={modal}
+        trigger='track-browser-button'
+        enterAnimation={enterAnimation}
+        leaveAnimation={leaveAnimation}
+      >
+        <IonToolbar>
+          <IonTitle>Tracks</IonTitle>
+          <IonButtons slot='end'>
+            <IonButton onClick={() => dismiss()}>Close</IonButton>
+          </IonButtons>
+        </IonToolbar>
+        <IonContent>
+          <IonList>
+            {gpxes.map((gpx: any) => {
+              return <IonItem key={gpx._id}>
+                <span>{gpx.gpx.metadata.time}</span>
+              </IonItem>;
+            })}
+          </IonList>
+        </IonContent>
+      </IonModal>
+    </Fragment>
+  );
+};
+
+export default TrackBrowser;

src/components/map/font-gis.d.ts

@@ -0,0 +1 @@
+declare module 'font-gis';

src/components/map/map.tsx

@@ -25,6 +25,7 @@ import GpxRecord from './gpx-record';
 import { initDb } from '../../db';
 import TileServerChooserButton from './TileServerChooserButton';
 import TileServerChooserDialog from './TileServerChooserDialog';
+import TrackBrowser from './TracksBrowser';
 
 const Map: react.FC<{}> = (props: {}) => {
   const dispatch = useDispatch();
@@ -65,9 +66,10 @@ const Map: react.FC<{}> = (props: {}) => {
       <IonHeader className='ion-no-border' translucent={true}>
         <IonToolbar>
           <IonButtons slot='end'>
-            <TileServerChooserButton />
+            <TrackBrowser/>
             <GpxRecord />
             <GpxImport />
+            <TileServerChooserButton />
           </IonButtons>
         </IonToolbar>
       </IonHeader>