Fix: Ensure file upload compatibility across all browsers

src/app/components/FileSelector/component.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useTodoContext } from '../../context/TodoContext';
+import fileService from '../../services/FileService';
 import './style.css';
 
 const FileSelector: React.FC = () => {
@@ -12,7 +13,7 @@ const FileSelector: React.FC = () => {
   } = useTodoContext();
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
-  const isFileSystemAccessSupported = 'showOpenFilePicker' in window && 'showSaveFilePicker' in window;
+  const isFileSystemAccessSupported = fileService.isUsingFileSystemAccess();
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -23,10 +24,6 @@ const FileSelector: React.FC = () => {
 
   const handleCreateNew = async () => {
     try {
-      if (!isFileSystemAccessSupported) {
-        setError('Your browser does not support the required File System Access API. Please use Chrome, Edge or another compatible browser.');
-        return;
-      }
       const success = await createNewFile();
       if (!success) {
         setError('Failed to create new file or user cancelled');
@@ -41,10 +38,6 @@ const FileSelector: React.FC = () => {
 
   const handleOpenExisting = async () => {
     try {
-      if (!isFileSystemAccessSupported) {
-        setError('Your browser does not support the required File System Access API. Please use Chrome, Edge or another compatible browser.');
-        return;
-      }
       const success = await openExistingFile();
       if (!success) {
         setError('Failed to open file or user cancelled');
@@ -71,11 +64,21 @@ const FileSelector: React.FC = () => {
     }
   };
 
+  const handleDownloadFile = () => {
+    try {
+      fileService.downloadCurrentFile();
+      setError(null);
+    } catch (err) {
+      setError('An error occurred while downloading the file');
+      console.error(err);
+    }
+  };
+
   return (
     <div className="file-selector">
       {!isFileSystemAccessSupported && (
-        <div className="browser-warning">
-          <p><b>Warning:</b> This app requires the File System Access API which is not supported in your browser. Please use Chrome, Edge, or another compatible browser.</p>
+        <div className="browser-info">
+          <p><strong>Compatibility Mode:</strong> Using traditional file operations for broader browser compatibility. Files will be downloaded to your default download folder.</p>
         </div>
       )}
       {error && <div className="error-message">{error}</div>}
@@ -91,14 +94,12 @@ const FileSelector: React.FC = () => {
             <button 
               className="create-file-button"
               onClick={handleCreateNew}
-              disabled={!isFileSystemAccessSupported}
             >
               Create new file
             </button>
             <button 
               className="open-file-button"
               onClick={handleOpenExisting}
-              disabled={!isFileSystemAccessSupported}
             >
               Open existing file
             </button>
@@ -108,14 +109,15 @@ const FileSelector: React.FC = () => {
         <div className="file-selected">
           <div className='file-info'>
             <span className="file-name">
-              <span className="save-status">✓ Auto-saving enabled for </span>
+              <span className="save-status">
+                {isFileSystemAccessSupported ? '✓ Auto-saving enabled for ' : '📁 Working with '}
+              </span>
               <strong>{currentFileName}</strong> 
             </span>
             <div className="file-buttons">
               <button 
                 className="create-file-button"
                 onClick={handleCreateNew}
-                disabled={!isFileSystemAccessSupported}
               >
                 Create new file
               </button>
@@ -126,6 +128,15 @@ const FileSelector: React.FC = () => {
               >
                 Change current file
               </button>
+              {!isFileSystemAccessSupported && (
+                <button 
+                  className="download-file-button"
+                  onClick={handleDownloadFile}
+                  title="Download current file"
+                >
+                  Download file
+                </button>
+              )}
             </div>
           </div>
         </div>

src/app/components/FileSelector/style.css

@@ -11,7 +11,8 @@
 
 .create-file-button,
 .change-file-button,
-.open-file-button {
+.open-file-button,
+.download-file-button {
   padding: 8px 16px;
   border-radius: 4px;
   cursor: pointer;
@@ -34,9 +35,15 @@
   color: var(--primary-color);
 }
 
+.download-file-button {
+  background-color: #28a745;
+  color: white;
+}
+
 .create-file-button:hover,
 .change-file-button:hover,
-.open-file-button:hover {
+.open-file-button:hover,
+.download-file-button:hover {
   opacity: 0.9;
 }
 
@@ -55,24 +62,25 @@
   font-size: 0.9rem;
 }
 
-.browser-warning {
-  background-color: #fff3cd;
-  color: #856404;
-  padding: 5px;
+.browser-info {
+  background-color: #d4edda;
+  color: #155724;
+  padding: 8px;
   border-radius: 4px;
   margin-bottom: 10px;
+  border: 1px solid #c3e6cb;
 }
 
 .error-message {
   background-color: #f8d7da;
   color: #721c24;
-  padding: 5px;
+  padding: 8px;
   border-radius: 4px;
   margin-bottom: 10px;
+  border: 1px solid #f5c6cb;
 }
 
-.file-selected {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.loading-message {
+  color: var(--text-color);
+  font-style: italic;
 }