Merge branch 'main' into static

src/photo/PhotoForm.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
 import {
   FORM_METADATA_ENTRIES,
   PhotoFormData,
+  convertFormKeysToLabels,
   getInitialErrors,
   isFormValid,
 } from './form';
@@ -44,13 +45,13 @@ export default function PhotoForm({
   // is refreshed by parent
   useEffect(() => {
     if (Object.keys(updatedExifData ?? {}).length > 0) {
-      const changedKeys: string[] = [];
+      const changedKeys: (keyof PhotoFormData)[] = [];
 
       setFormData(currentForm => {
         Object.entries(updatedExifData ?? {})
           .forEach(([key, value]) => {
             if (currentForm[key as keyof PhotoFormData] !== value) {
-              changedKeys.push(key);
+              changedKeys.push(key as keyof PhotoFormData);
             }
           });
 
@@ -61,8 +62,9 @@ export default function PhotoForm({
       });
 
       if (changedKeys.length > 0) {
+        const fields = convertFormKeysToLabels(changedKeys);
         toastSuccess(
-          `Updated EXIF fields: ${changedKeys.join(', ')}`,
+          `Updated EXIF fields: ${fields.join(', ')}`,
           8000,
         );
       } else {

src/photo/form.ts

@@ -84,6 +84,9 @@ export const FORM_METADATA_ENTRIES =
   (Object.entries(FORM_METADATA) as [keyof PhotoFormData, FormMeta][])
     .filter(([_, meta]) => !meta.hideTemporarily);
 
+export const convertFormKeysToLabels = (keys: (keyof PhotoFormData)[]) =>
+  keys.map(key => FORM_METADATA[key].label.toUpperCase());
+
 export const getInitialErrors = (
   formData: Partial<PhotoFormData>
 ): Partial<Record<keyof PhotoFormData, string>> =>

src/toast/ToasterWithThemes.tsx

@@ -13,6 +13,8 @@ export default function ToasterWithThemes() {
         classNames: {
           toast: clsx(
             'font-mono font-normal',
+            '!text-gray-900 dark:!text-gray-100',
+            '!bg-white dark:!bg-black',
             '!border-gray-200 dark:!border-gray-800',
           ),
         },