From 261be532144b0e36ce1dd083468bbd3cb6eea9fb Mon Sep 17 00:00:00 2001
From: herteleo <leonard.hertel@gmail.com>
Date: Wed, 2 Nov 2022 20:27:27 +0100
Subject: [PATCH] feat: display compatibility hint

---
 src/features/useDir.ts | 4 ++++
 src/views/Home.vue     | 5 ++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/features/useDir.ts b/src/features/useDir.ts
index e8d4d92..614ddf4 100644
--- a/src/features/useDir.ts
+++ b/src/features/useDir.ts
@@ -29,10 +29,14 @@ export interface CurrentDirEntryFile extends CurrentDirEntryBase {
   mime: string;
 }
 
+export const isFileSystemApiAvailable = ref('showDirectoryPicker' in window);
+
 const rootDir = ref<FileSystemDirectoryHandle>();
 export const currentDir = ref<FileSystemDirectoryHandle>();
 
 export const setRootDir = async () => {
+  if (!isFileSystemApiAvailable.value) return;
+
   rootDir.value = await window.showDirectoryPicker();
   currentDir.value = rootDir.value;
 };
diff --git a/src/views/Home.vue b/src/views/Home.vue
index b6e674c..9f2cf6c 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import useDir, { setRootDir } from '@/features/useDir';
+import useDir, { setRootDir, isFileSystemApiAvailable } from '@/features/useDir';
 import { displayName, version } from '@/../package.json';
 
 useDir();
@@ -13,6 +13,9 @@ useDir();
           <app-icon class="mx-auto opacity-60" name="Folder" size="128" />
           <div class="text-xl capitalize">Click to browse your local files in the browser</div>
           <div class="opacity-30">Because why not. Your local files stay private.</div>
+          <div v-if="!isFileSystemApiAvailable" class="pt-2 text-sm text-amber-600">
+            Sadly your browser is not supported.<br />Try the latest Chrome Browser.
+          </div>
         </div>
       </button>
       <div class="text-sm opacity-20">