add .env file and fix spinner behavior on error

.env-sample

@@ -0,0 +1,2 @@
+# Read from the local homeserver for testing
+VITE_TESTNET=true

.gitignore

@@ -7,6 +7,9 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+# Environment file
+.env
+
 node_modules
 dist
 dist-ssr

src/App.tsx

@@ -3,7 +3,7 @@ import './css/App.css'
 import { Explorer } from './Explorer.tsx'
 import { Spinner } from './Spinner.tsx'
 import { Show, createSignal, } from "solid-js"
-import { store, setStore, updateDir, resetStore, switchShallow, } from "./state.ts"
+import { store, setStore, updateDir, switchShallow, } from "./state.ts"
 
 
 function App() {

src/css/index.css

@@ -91,4 +91,7 @@ input:focus-visible {
   button {
     background-color: #f9f9f9;
   }
+  input {
+    background-color: #f9f9f9;
+  }
 }

src/state.ts

@@ -1,7 +1,9 @@
 import { Client } from '@synonymdev/pubky'
 import { createStore } from 'solid-js/store';
 
-export const client = new Client();
+export const client = import.meta.env.VITE_TESTNET == "true" ?
+  Client.testnet() :
+  new Client();
 
 export const [store, setStore] = createStore<{
   explorer: Boolean,
@@ -73,6 +75,14 @@ export function loadMore() {
     // @ts-ignore
     setStore('list', Array.from(map.values()))
     setStore('dir', path)
+  })
+  .catch((e: String) => {
+    setStore('loading', false)
+    if (e === "error sending request") {
+      console.log(e, ": cannot reach homeserver or pk does not exist")
+    } else {
+      console.log("ERROR: ", e);
+    }
   });
 }
 
@@ -100,30 +110,30 @@ export function updateDir(path: string) {
   loadList()
 }
 
-export function downloadFile(link: string) {
+export async function downloadFile(link: string) {
   setStore("loading", true);
 
-  client.fetch(link).then(response => {
-    if (response.ok) {
-      // Convert the response to a Blob
-      response.blob().then(fileBlob => {
+  try {
+    const response: Response = await client.fetch(link);
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch file: ${response.status} ${response.statusText}`);
+    }
+
+    const fileBlob: Blob = await response.blob();
+
     const element = document.createElement('a');
-
     element.href = URL.createObjectURL(fileBlob);
-        let parts = link.split('/');
+    const parts = link.split('/');
     element.download = parts[parts.length - 1];
-        document.body.appendChild(element); // Required for this to work in Firefox
-        element.click();
 
+    document.body.appendChild(element);
+    element.click();
     element.remove();
-        setStore("loading", false);
-      });
-    } else {
-      console.error("Failed to fetch file:", response.statusText);
+  } catch (err: unknown) {
+    console.error("Error fetching file:", err);
+  }
+  finally {
     setStore("loading", false);
   }
-  }).catch(err => {
-    console.error("Error fetching file:", err);
-    setStore("loading", false);
-  });
 }