Add capacitor

src/core/CapacitorStorage.js

@@ -0,0 +1,20 @@
+import { Preferences } from '@capacitor/preferences'
+
+const CONFIG_KEY = 'app_config'
+
+export function createCapacitorStorage() {
+    return {
+        async load() {
+            const { value } = await Preferences.get({ key: CONFIG_KEY })
+            return value ? JSON.parse(value) : null
+        },
+        async save(data) {
+            await Preferences.set({
+                key: CONFIG_KEY,
+                value: JSON.stringify(data),
+            })
+        },
+    }
+}
+
+export default createCapacitorStorage

src/core/index.js

@@ -42,6 +42,9 @@ const initConfigManager = async (runtime, pluginManager) => {
         storage = createNodeStorage(filesystemPlugin)
     } else if (runtime === 'web') {
         storage = createWebStorage()
+    } else if (runtime === 'capacitor') {
+        const { createCapacitorStorage } = await import('./CapacitorStorage.js')
+        storage = createCapacitorStorage()
     }
 
     return createConfigManager(storage, pluginManager)

src/renderer/src/components/note/Editor.vue

@@ -76,7 +76,9 @@ onMounted(async () => {
     await nextTick()
     if (titleInput.value) {
         titleInput.value.textContent = title.value
-        titleInput.value.focus()
+        if (['', 'Untitled'].includes(title.value)) {
+            titleInput.value.focus()
+        }
     }
 })
 onBeforeUnmount(() => {

src/renderer/src/composables/useEnvironment.ts

@@ -1,6 +1,7 @@
 export enum ENVIRONMENTS {
     ELECTRON = 'electron',
     WEB = 'web',
+    CAPACITOR = 'capacitor',
 }
 
 export const useEnvironment = (): ENVIRONMENTS => {
@@ -35,7 +36,26 @@ export const useEnvironment = (): ENVIRONMENTS => {
         return false
     }
 
-    const environment = isElectron() ? ENVIRONMENTS.ELECTRON : ENVIRONMENTS.WEB
+    function isCapacitor() {
+        if (typeof window !== 'undefined' && (window as any).Capacitor) {
+            return true
+        }
+        if (typeof navigator === 'object' && navigator.userAgent) {
+            const ua = navigator.userAgent
+            return (
+                ua.includes('Capacitor') ||
+                ua.includes('Android') ||
+                ua.includes('iPhone')
+            )
+        }
+        return false
+    }
+
+    const environment = isElectron()
+        ? ENVIRONMENTS.ELECTRON
+        : isCapacitor()
+          ? ENVIRONMENTS.CAPACITOR
+          : ENVIRONMENTS.WEB
 
     return environment
 }

src/renderer/src/plugins/core.js

@@ -7,7 +7,12 @@ export const initCore = async (app) => {
     const environment = useEnvironment()
 
     // Set runtime
-    const runtime = environment === 'electron' ? 'electron-renderer' : 'web'
+    const runtime =
+        environment === 'electron'
+            ? 'electron-renderer'
+            : environment === 'capacitor'
+              ? 'capacitor'
+              : 'web'
 
     // Plugins that are valid for web (electron uses IPC)
     const plugins = [browserPlugin, supabasePlugin]

src/renderer/src/views/Directory.vue

@@ -1,5 +1,9 @@
 <template>
-    <main v-if="loaded" class="directory layout-block">
+    <main>
+        <h1>Test</h1>
+        <p>{{ environment }}</p>
+    </main>
+    <!-- <main v-if="loaded" class="directory layout-block">
         <category-row
             v-for="(category, i) in categories"
             :index="i"
@@ -18,54 +22,58 @@
         <decryption-warning :failedIds="decryptionFailures" />
     </main>
 
-    <page-loading v-else />
+    <page-loading v-else /> -->
 </template>
 
 <script setup>
-import DecryptionWarning from '@/components/DecryptionWarning.vue'
-import { onMounted, ref, watchEffect, watch } from 'vue'
-import CategoryRow from '@/components/CategoryRow.vue'
-import PageLoading from '@/components/PageLoading.vue'
-import NoteRow from '@/components/NoteRow.vue'
-import useNotes from '@/composables/useNotes'
-import NewNote from '@/components/NewNote.vue'
-import { useMagicKeys } from '@vueuse/core'
-import { useRouter } from 'vue-router'
+import { useEnvironment } from '@/composables/useEnvironment'
 
-const router = useRouter()
-const {
-    categories,
-    loadCategories,
-    loadCategoryNotes,
-    changeCount,
-    decryptionFailures,
-} = useNotes()
+const environment = useEnvironment()
 
-const notes = ref()
-const loaded = ref(false)
+// import DecryptionWarning from '@/components/DecryptionWarning.vue'
+// import { onMounted, ref, watchEffect, watch } from 'vue'
+// import CategoryRow from '@/components/CategoryRow.vue'
+// import PageLoading from '@/components/PageLoading.vue'
+// import NoteRow from '@/components/NoteRow.vue'
+// import useNotes from '@/composables/useNotes'
+// import NewNote from '@/components/NewNote.vue'
+// import { useMagicKeys } from '@vueuse/core'
+// import { useRouter } from 'vue-router'
 
-const refreshNotes = async () => {
-    loaded.value = false
-    await loadCategories()
-    notes.value = await loadCategoryNotes()
-    loaded.value = true
-}
+// const router = useRouter()
+// const {
+//     categories,
+//     loadCategories,
+//     loadCategoryNotes,
+//     changeCount,
+//     decryptionFailures,
+// } = useNotes()
 
-onMounted(async () => {
-    await refreshNotes()
-})
+// const notes = ref()
+// const loaded = ref(false)
 
-watch(changeCount, async () => {
-    await refreshNotes()
-})
+// const refreshNotes = async () => {
+//     loaded.value = false
+//     await loadCategories()
+//     notes.value = await loadCategoryNotes()
+//     loaded.value = true
+// }
 
-// New category keyboard shortcut
-const { ctrl, t } = useMagicKeys()
-watchEffect(() => {
-    if (ctrl.value && t.value) {
-        router.push('/category')
-    }
-})
+// onMounted(async () => {
+//     await refreshNotes()
+// })
+
+// watch(changeCount, async () => {
+//     await refreshNotes()
+// })
+
+// // New category keyboard shortcut
+// const { ctrl, t } = useMagicKeys()
+// watchEffect(() => {
+//     if (ctrl.value && t.value) {
+//         router.push('/category')
+//     }
+// })
 </script>
 
 <style lang="scss">