feat: fix back button issues

android/app/capacitor.build.gradle

@@ -9,6 +9,7 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
+    implementation project(':capacitor-app')
     implementation project(':capacitor-camera')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-preferences')

android/capacitor.settings.gradle

@@ -2,6 +2,9 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
+include ':capacitor-app'
+project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
+
 include ':capacitor-camera'
 project(':capacitor-camera').projectDir = new File('../node_modules/@capacitor/camera/android')
 

package.json

@@ -28,6 +28,7 @@
   "type": "module",
   "dependencies": {
     "@capacitor/android": "^5.3.0",
+    "@capacitor/app": "^5.0.6",
     "@capacitor/camera": "^5.0.7",
     "@capacitor/cli": "^5.3.0",
     "@capacitor/core": "^5.3.0",

src/lib/components/notes/NoteView.svelte

@@ -8,6 +8,7 @@
     import {archived, notes, pinned} from "$lib/states";
     import {Toast} from "@capacitor/toast";
     import {Haptics} from "@capacitor/haptics";
+    import {page} from "$app/stores";
 
     export let note: Note
     let showModal = false
@@ -28,6 +29,8 @@
         await Toast.show({ text: "Note deleted" })
         showModal = false
     }
+
+    const currentPage = $page.url.pathname
 </script>
 
 <style>
@@ -40,7 +43,11 @@
     }
 </style>
 
-<a use:press={{ timeframe: 300, triggerBeforeFinished: true }} on:press={show} href="/notes/{note.id}" class="drag-none flex flex-col gap-2 p-4 rounded-lg shadow select-none border-[#2F2F2F] border bg-[#2F2F2F] bg-opacity-5 w-full h-44 active:opacity-60 transition ease-in-out duration-500">
+<a
+        use:press={{ timeframe: 300, triggerBeforeFinished: true }}
+        on:press={show}
+        href="/notes/{note.id}?referrer={currentPage}"
+        class="drag-none flex flex-col gap-2 p-4 rounded-lg shadow select-none border-[#2F2F2F] border bg-[#2F2F2F] bg-opacity-5 w-full h-44 active:opacity-60 transition ease-in-out duration-500">
     <h3 class="font-bold text-white text-lg">{note.title}</h3>
     <p class="line-clamp-3">
         {note.contents}

src/lib/components/screens/Editor.svelte

@@ -15,6 +15,9 @@
     import {onDestroy, onMount} from "svelte";
     import {Toast} from "@capacitor/toast";
     import {Haptics} from "@capacitor/haptics";
+    import {App as CapacitorApp} from "@capacitor/app";
+    import type {PluginListenerHandle} from "@capacitor/core";
+    import {page} from "$app/stores";
 
     export let note: Note = {
         id: $lastNote + 1,
@@ -51,10 +54,12 @@
     let saveInterval: NodeJS.Timeout
 
     let contentChanged: boolean = false
+    let backlistener: PluginListenerHandle
 
     onMount(async () => {
         await save()
 
+        backlistener = await CapacitorApp.addListener('backButton', go_back)
         lastEditedInterval = setInterval(async () => {
             lastEdited = format(note.updated_at)
         }, 10_000)
@@ -65,12 +70,15 @@
     onDestroy(() => {
         clearInterval(lastEditedInterval)
         clearInterval(saveInterval)
+        backlistener.remove()
     })
 
     function go_back() {
         document.getElementById('go_back')?.click()
     }
 
+    const referrer = $page.url.searchParams.get('referrer') ?? '/'
+
     async function archive() {
         await Haptics.impact()
         if ($notes.find(value => value === note.id) == null) {
@@ -121,7 +129,7 @@
 
 <Layout>
     <div class="py-2 flex flex-row justify-between items-center" slot="header">
-        <a href="/" id="go_back" class="hidden"><p>.</p></a>
+        <a href="/{referrer}" id="go_back" class="hidden"><p>.</p></a>
         <div class="flex flex-row gap-6 items-center pr-4">
             <button on:click={back}>
                 <Icon src={ChevronLeft} class="w-6 text-[#9F8E7E]"/>

src/routes/(archives)/archives/+page.svelte

@@ -2,13 +2,16 @@
     import NoteView from "$lib/components/notes/NoteView.svelte";
     import {archived, layout} from "$lib/states";
     import {getNoteById} from "$lib/notes";
-    import {onMount} from "svelte";
+    import {onDestroy, onMount} from "svelte";
     import type {Note} from "$lib/notes";
     import {Icon} from "@steeze-ui/svelte-icon";
     import {ChevronLeft} from "@steeze-ui/lucide-icons";
     import Layout from "$lib/components/layouts/Layout.svelte";
+    import {App as CapacitorApp} from "@capacitor/app";
+    import type {PluginListenerHandle} from "@capacitor/core";
 
     let archivedNotes: Note[] = []
+    let backlistener: PluginListenerHandle
 
     archived.subscribe(_ => loadArchives())
 
@@ -26,14 +29,21 @@
     }
 
     onMount(async () => {
+        backlistener = await CapacitorApp.addListener('backButton', function () {
+            document.getElementById('go_back')?.click()
+        })
         await loadArchives()
     })
+
+    onDestroy(() => {
+        backlistener.remove()
+    })
 </script>
 
 <Layout>
     <div class="py-2 flex flex-row justify-between items-center" slot="header">
         <div class="flex flex-row gap-6 items-center pr-4">
-            <a href="/">
+            <a href="/" id="go_back">
                 <Icon src={ChevronLeft} class="w-6 text-[#9F8E7E]"/>
             </a>
         </div>