icons

android/build.gradle

@@ -7,7 +7,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:7.2.1'
+        classpath 'com.android.tools.build:gradle:7.3.1'
         classpath 'com.google.gms:google-services:4.3.13'
 
         // NOTE: Do not place your application dependencies here; they belong

src/app.css

@@ -31,9 +31,3 @@ body {
   scroll-behavior: smooth;
   box-sizing: border-box;
 }
-
-svg {
-  height: 1em;
-  display: inline-block;
-  aspect-ratio: 1/1;
-}

src/lib/components/Compass.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
+  import Icon from '$lib/icons/Icon.svelte'
   import { location } from '$lib/stores/location'
-  import IconNavigate from './IconNavigate.svelte'
 
   $: degree = ($location?.heading?.heading || 0) - 45
 </script>
 
 <div class="text-xl" style="transform: rotate({degree % 360}deg);">
-  <IconNavigate />
+  <Icon icon="Navigate" />
+  <!-- <IconNavigate /> -->
 </div>
 
 <style>

src/lib/icons/Icon.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Copy from './copy-outline.svelte'
+  import Navigate from './navigate-outline.svelte'
+
+  const Icons = {
+    Copy,
+    Navigate,
+  }
+
+  export let icon: keyof typeof Icons
+</script>
+
+<div on:click on:keypress><svelte:component this={Icons[icon]} /></div>
+
+<style>
+  div {
+    display: inline-block;
+  }
+
+  div > :global(svg) {
+    height: 1em;
+    display: inline-block;
+    aspect-ratio: 1/1;
+  }
+</style>

src/lib/views/Home.svelte

@@ -1,25 +1,32 @@
 <script lang="ts">
+  import { Clipboard } from '@capacitor/clipboard'
+
   import Button from '$lib/components/Button.svelte'
   import Card from '$lib/components/Card.svelte'
+  import Compass from '$lib/components/Compass.svelte'
   import H1 from '$lib/components/H1.svelte'
   import Measurement from '$lib/components/Measurement.svelte'
-  import Needle from '$lib/components/Needle.svelte'
   import VerticalGrid from '$lib/components/VerticalGrid.svelte'
   import { CoordinateLink } from '$lib/geo'
+  import Icon from '$lib/icons/Icon.svelte'
   import { app } from '$lib/stores/app'
   import { location } from '$lib/stores/location'
   import { bearings, type } from '$lib/stores/settings'
   import Settings from './Settings.svelte'
 
-  function pad(value: number): string {
-    return value.toString().padStart(2, '0')
-  }
-
   $: stamp = $location?.time.stamp
-  $: date = stamp && `${pad(stamp.getHours())}:${pad(stamp.getMinutes())}:${pad(stamp.getSeconds())}`
+  $: date =
+    stamp &&
+    [stamp.getHours(), stamp.getMinutes(), stamp.getSeconds()].map((t) => t.toFixed(0).padStart(2, '0')).join(':')
 
   $: coords = $location?.coords.format($type, $bearings)
   $: fix = $location?.time.fix.toFixed(0)
+
+  $: copy = () => {
+    if (!coords) return
+    const content = `${coords.lat}, ${coords.lon}`
+    Clipboard.write({ string: content })
+  }
 </script>
 
 <H1 text="GPS Info" />
@@ -27,14 +34,17 @@
 <VerticalGrid>
   <Card>
     <VerticalGrid>
-      <div class="flex items-center">
-        <div class="flex-grow">
+      <div class="flex items-center justify-between">
         <Measurement label="Heading" value={$location?.heading?.format()} />
-        </div>
-        <Needle />
+        <Compass />
       </div>
       <Measurement label="Latitude" value={coords?.lat} />
+      <div class="flex items-end justify-between">
         <Measurement label="Longitude" value={coords?.lon} />
+        <button on:click={copy}>
+          <Icon icon="Copy" />
+        </button>
+      </div>
 
       <div>
         <span class="text-sm italic">Open in:</span>
@@ -66,7 +76,7 @@
       <div>
         <span class="text-sm italic">Fixing</span>
         <div class="grid gap-4 grid-cols-2">
-          <Measurement label="Time" value={fix} unit="mnarrows" />
+          <Measurement label="Time" value={fix} unit="ms" />
           <Measurement label="Last" value={date || undefined} />
         </div>
       </div>