bring back copy link; also allows gpx download (fixes #28)

Author: karussell

src/custom.d.ts

@@ -3,6 +3,12 @@ declare module '*.svg'
 declare module '*.png'
 declare module 'custom-model-editor/src/index'
 
+// Optional global injected by the Capacitor wrapper (src/app.js in graphhopper-maps-capacitor)
+// to route file downloads through native Filesystem.writeFile + Share. Absent in browser builds.
+interface Window {
+    ghSaveFile?: (args: { fileName: string; mimeType: string; fileContents: string }) => Promise<unknown>
+}
+
 declare module 'config' {
     interface ProfileGroup {
         readonly options: { profile: string }[]

src/sidebar/RoutingResults.tsx

@@ -745,14 +745,22 @@ function downloadGPX(path: Path, settings: Settings) {
 
     xmlString += '</gpx>'
 
-    const tmpElement = document.createElement('a')
-    const file = new Blob([xmlString], { type: 'application/gpx+xml' })
-    tmpElement.href = URL.createObjectURL(file)
     const date = new Date()
-    tmpElement.download = `GraphHopper-Track-${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(
+    const fileName = `GraphHopper-Track-${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(
         date.getUTCDate(),
     )}-${metersToTextForFile(path.distance, settings.showDistanceInMiles)}.gpx`
-    tmpElement.click()
+    const mimeType = 'application/gpx+xml'
+
+    if (window.ghSaveFile) {
+        // Capacitor wrapper handles native file save + share.
+        window.ghSaveFile({ fileName, mimeType, fileContents: xmlString })
+    } else {
+        const tmpElement = document.createElement('a')
+        const file = new Blob([xmlString], { type: mimeType })
+        tmpElement.href = URL.createObjectURL(file)
+        tmpElement.download = fileName
+        tmpElement.click()
+    }
 }
 
 function pad(value: number) {

src/sidebar/SettingsBox.module.css

@@ -5,6 +5,30 @@
     border-bottom: 1px lightgray solid;
 }
 
+.copyLinkRow {
+    cursor: pointer;
+    display: grid;
+    grid-template-columns: 50px auto;
+    align-items: center;
+    padding-bottom: 20px;
+    font-size: 14px;
+    color: gray;
+}
+
+.copyLinkRow div {
+    color: #5b616a;
+}
+
+.copyLinkRow:hover div,
+.copyLinkRow:hover svg {
+    color: black;
+}
+
+.copyLinkRow svg {
+    width: 30px;
+    height: 30px;
+}
+
 .settingsTable {
     display: flex;
     flex-direction: column;

src/sidebar/SettingsBox.tsx

@@ -5,7 +5,8 @@ import { tr } from '@/translation/Translation'
 import PlainButton from '@/PlainButton'
 import OnIcon from '@/sidebar/toggle_on.svg'
 import OffIcon from '@/sidebar/toggle_off.svg'
-import { useContext } from 'react'
+import LinkIcon from '@/sidebar/link.svg'
+import { useContext, useState } from 'react'
 import { SettingsContext } from '@/contexts/SettingsContext'
 import { RoutingProfile } from '@/api/graphhopper'
 import * as config from 'config'
@@ -14,6 +15,7 @@ import { clearRecentLocations } from '@/sidebar/search/RecentLocations'
 
 export default function SettingsBox({ profile }: { profile: RoutingProfile }) {
     const settings = useContext(SettingsContext)
+    const [showCopiedInfo, setShowCopiedInfo] = useState(false)
 
     function setProfile(n: string) {
         Dispatcher.dispatch(new SetVehicleProfile({ name: profile.name === n ? 'car' : n }))
@@ -23,6 +25,25 @@ export default function SettingsBox({ profile }: { profile: RoutingProfile }) {
     const group = config.profile_group_mapping[groupName]
     return (
         <div className={styles.parent}>
+            <div
+                className={styles.copyLinkRow}
+                onClick={() => {
+                    let url = window.location.href
+                    // Capacitor serves the app from https://localhost or http://localhost — rewrite to the
+                    // public URL so the shared link is openable on other devices.
+                    if (window.location.hostname === 'localhost')
+                        url = 'https://navi.graphhopper.org' + window.location.pathname + window.location.search
+                    navigator.clipboard.writeText(url)
+                    if (navigator.share) navigator.share({ url })
+                    setShowCopiedInfo(true)
+                    setTimeout(() => setShowCopiedInfo(false), 2500)
+                }}
+            >
+                <PlainButton>
+                    <LinkIcon />
+                </PlainButton>
+                <div>{showCopiedInfo ? tr('Copied!') : tr('Copy Link')}</div>
+            </div>
             {groupName && <span className={styles.groupProfileOptionsHeader}>{tr(groupName + '_settings')}</span>}
             {groupName && (
                 <div className={styles.settingsTable}>