Upload Directories via Web

This implements the option to choose directories when uploading files via the Web UI (The most important part of #52).

When you choose a directory, its file and sub-directory structure will be maintained.

Tested with the latest Safari, Firefox, and Chrome.

Additionally, the Deno version was updated, which required some accessibility improvements as well.

components/expenses/BudgetModal.tsx

@@ -104,6 +104,7 @@ export default function BudgetModal(
               <button
                 class='px-5 py-2 bg-red-600 text-white cursor-pointer rounded-md mr-2 opacity-30 hover:opacity-100'
                 onClick={() => onClickDelete()}
+                type='button'
               >
                 Delete
               </button>
@@ -112,6 +113,7 @@ export default function BudgetModal(
           <button
             class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md mr-2'
             onClick={() => onClose()}
+            type='button'
           >
             {budget ? 'Cancel' : 'Close'}
           </button>
@@ -123,6 +125,7 @@ export default function BudgetModal(
                 newBudgetMonth.value.substring(0, 7),
                 formatInputToNumber(newBudgetValue.value),
               )}
+            type='button'
           >
             {budget ? 'Update' : 'Create'}
           </button>

components/expenses/ExpenseModal.tsx

@@ -237,6 +237,7 @@ export default function ExpenseModal(
               <button
                 class='px-5 py-2 bg-red-600 text-white cursor-pointer rounded-md mr-2 opacity-30 hover:opacity-100'
                 onClick={() => onClickDelete()}
+                type='button'
               >
                 Delete
               </button>
@@ -245,6 +246,7 @@ export default function ExpenseModal(
           <button
             class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md mr-2'
             onClick={() => onClose()}
+            type='button'
           >
             {expense ? 'Cancel' : 'Close'}
           </button>
@@ -259,6 +261,7 @@ export default function ExpenseModal(
                 newExpenseIsRecurring.value,
               );
             }}
+            type='button'
           >
             {expense ? 'Update' : 'Create'}
           </button>

components/expenses/MainExpenses.tsx

@@ -729,12 +729,14 @@ export default function MainExpenses({ initialBudgets, initialExpenses, initialM
                 <button
                   class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600`}
                   onClick={() => onClickCreateExpense()}
+                  type='button'
                 >
                   New Expense
                 </button>
                 <button
                   class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600`}
                   onClick={() => onClickCreateBudget()}
+                  type='button'
                 >
                   New Budget
                 </button>
@@ -746,12 +748,14 @@ export default function MainExpenses({ initialBudgets, initialExpenses, initialM
                 <button
                   class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600`}
                   onClick={() => onClickImportFile()}
+                  type='button'
                 >
                   Import
                 </button>
                 <button
                   class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600`}
                   onClick={() => onClickExportFile()}
+                  type='button'
                 >
                   Export
                 </button>