Improve handling for PCs with no saves available

src/views/SaveSelector.tsx

@@ -2,6 +2,7 @@ import { invoke } from "@tauri-apps/api/core";
 import DragAndDrop from "../components/DragAndDrop";
 import { useEffect, useState } from "preact/hooks";
 import { FolderIcon } from "@heroicons/react/20/solid";
+import { cn } from "../utils";
 
 type SaveFile = {
   name: string;
@@ -48,21 +49,32 @@ export default function SaveSelector({ onFile }: SaveSelectorProps) {
   return (
     <>
       <DragAndDrop className="mr-1.5" onFile={onFile} />
-      <div className="mt-1 text-center select-none text-zinc-300 text-[0.85rem]">
+      <div
-        Or, select a save file from below
+        className={cn(
-      </div>
+          "mt-1 text-center select-none text-zinc-300 text-[0.85rem]",
-      <div className="mt-1.5 overflow-y-auto overflow-x-hidden pr-2 space-y-2">
+          { "italic text-zinc-400": saveFiles.length == 0 }
-        {saveFiles.map((file) => {
+        )}
-          return (
+      >
-            <Item
+        {saveFiles.length > 0
-              onClick={() => {
+          ? "Or, select a save file from below"
-                onFile?.(file.path);
+          : "No save files found..."}
-              }}
-              file={file}
-            />
-          );
-        })}
       </div>
+      {saveFiles.length > 0 ? (
+        <>
+          <div className="mt-1.5 overflow-y-auto overflow-x-hidden pr-2 space-y-2">
+            {saveFiles.map((file) => {
+              return (
+                <Item
+                  onClick={() => {
+                    onFile?.(file.path);
+                  }}
+                  file={file}
+                />
+              );
+            })}
+          </div>
+        </>
+      ) : null}
     </>
   );
 }