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>

strings/en-us.json

@@ -296,6 +296,7 @@
   "MessageItemMissing": "Item is missing and must be fixed on the server. Typically an item is marked as missing because the file paths are not accessible.",
   "MessageLoading": "Loading...",
   "MessageLoadingServerData": "Loading server data...",
+  "MessageLocalFolderDescription": "Internal App Storage is only accessible by this app. Other local folders can be used to allow other apps to access media downloaded through this app. This app does not support files added by other apps or manually through the file system.",
   "MessageMarkAsFinished": "Mark as Finished",
   "MessageMediaLinkedToADifferentServer": "Media is linked to an Audiobookshelf server on a different address ({0}). Progress will be synced when connected to this server address.",
   "MessageMediaLinkedToADifferentUser": "Media is linked to this server but was downloaded by a different user. Progress will only be synced to the user that downloaded it.",