Add: info bubble for local folders

pages/localMedia/folders/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="w-full h-full py-6">
-    <h1 class="text-base font-semibold px-2 mb-2">{{ $strings.HeaderLocalFolders }}</h1>
+    <h1 class="text-base font-semibold px-2 mb-2">
+      {{ $strings.HeaderLocalFolders }}
+      <span class="material-icons-outlined ml-2" @click.stop="showLocalFolderMoreInfo">info</span>
+    </h1>
 
     <div v-if="!isIos" class="w-full max-w-full px-2 py-2">
       <template v-for="folder in localFolders">
@@ -33,6 +36,7 @@
 
 <script>
 import { AbsFileSystem } from '@/plugins/capacitor'
+import { Dialog } from '@capacitor/dialog'
 
 export default {
   data() {
@@ -87,6 +91,16 @@ export default {
         this.$toast.success('Folder permission success')
       }
     },
+    async showLocalFolderMoreInfo() {
+      const confirmResult = await Dialog.confirm({
+        title: this.$strings.HeaderLocalFolders,
+        message: this.$strings.MessageLocalFolderDescription,
+        cancelButtonTitle: 'View More'
+      })
+      if (!confirmResult.value) {
+        window.open('https://www.audiobookshelf.org/guides/android_app_shared_storage', '_blank')
+      }
+    },
     async init() {
       const androidSdkVersion = await this.$getAndroidSDKVersion()
       this.isAndroid10OrBelow = !!androidSdkVersion && androidSdkVersion <= 29
@@ -100,4 +114,4 @@ export default {
     this.init()
   }
 }
-</script>
+</script>