Adding the possibility to delete tracks, moving the import button into the track browser, changing the background geolocation precision to 5m and adding a couple of calls to db.compact() and db.viewCleanup().

src/components/map/TracksBrowser.tsx

@@ -2,16 +2,20 @@ import {
   IonButton,
   IonButtons,
   IonContent,
+  IonIcon,
   IonItem,
   IonList,
   IonModal,
   IonTitle,
   IonToolbar,
 } from '@ionic/react';
+import { trash } from 'ionicons/icons';
 import React, { Fragment, useRef } from 'react';
-import { useFind } from 'react-pouchdb';
+import { useFind, useDB } from 'react-pouchdb';
+import { deleteGps } from '../../db/gpx';
 import { enterAnimation, leaveAnimation } from '../../lib/animation';
 import phoneRoute from '../../theme/icons/font-gis/svg/routing/uEB08-phone-route-nons.svg';
+import GpxImport from './gpx-import';
 
 const TrackBrowser: React.FC<{}> = () => {
   const gpxes = useFind({
@@ -20,6 +24,8 @@ const TrackBrowser: React.FC<{}> = () => {
     },
   });
 
+  const db = useDB();
+
   const modal = useRef<HTMLIonModalElement>(null);
 
   const dismiss = () => {
@@ -40,15 +46,28 @@ const TrackBrowser: React.FC<{}> = () => {
         <IonToolbar>
           <IonTitle>Tracks</IonTitle>
           <IonButtons slot='end'>
+            <GpxImport />
             <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>;
+              return (
+                <IonItem key={gpx._id}>
+                  <span>{gpx.gpx.metadata.time}</span>
+                  <IonButtons slot='end'>
+                    <IonButton
+                      onClick={() => {
+                        deleteGps(db, { _id: gpx._id, _rev: gpx._rev });
+                      }}
+                      color='danger'
+                    >
+                      <IonIcon slot='icon-only' icon={trash} />
+                    </IonButton>
+                  </IonButtons>
+                </IonItem>
+              );
             })}
           </IonList>
         </IonContent>

src/components/map/map.tsx

@@ -19,7 +19,6 @@ import {
   IonToolbar,
 } from '@ionic/react';
 
-import GpxImport from './gpx-import';
 import Gpxes from './gpxes';
 import GpxRecord from './gpx-record';
 import { initDb } from '../../db';
@@ -68,7 +67,6 @@ const Map: react.FC<{}> = (props: {}) => {
           <IonButtons slot='end'>
             <TrackBrowser/>
             <GpxRecord />
-            <GpxImport />
             <TileServerChooserButton />
           </IonButtons>
         </IonToolbar>