refactor(settings): replace file input with browser-fs-access

pages/settings/users/index.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
+import { fileOpen } from 'browser-fs-access'
 import type { UserLogin } from '~/types'
 
-const { lg } = breakpoints
-
 const loggedInUsers = useUsers()
 
 async function exportTokens() {
@@ -22,15 +21,10 @@ async function exportTokens() {
 }
 
 async function importTokens() {
-  const input = document.createElement('input') as HTMLInputElement
-  input.type = 'file'
-  input.accept = 'application/json'
-  input.multiple = false
-
-  input.addEventListener('change', async (e) => {
-    const file = (e.target as any)?.files?.[0] as File
-    if (!file)
-      return
+  const file = await fileOpen({
+    description: 'Token File',
+    mimeTypes: ['application/json'],
+  })
 
   try {
     const content = await file.text()
@@ -56,9 +50,6 @@ async function importTokens() {
     console.error(e)
     alert('Invalid Elk tokens file')
   }
-  })
-
-  input.click()
 }
 </script>