fix(ui): error-handle fire-and-forget mutations in settings panels

apps/next/src/components/spoons/spoon-clone-panel.tsx

@@ -223,8 +223,16 @@ export const SpoonClonePanel = ({ spoon }: { spoon: Doc<'spoons'> }) => {
                 remoteName={remote.remoteName}
                 url={remote.url}
                 onRemove={async () => {
-                  await removeRemote({ remoteId: remote._id });
-                  toast.success('Remote removed.');
+                  try {
+                    await removeRemote({ remoteId: remote._id });
+                    toast.success('Remote removed.');
+                  } catch (error) {
+                    toast.error(
+                      error instanceof Error
+                        ? error.message
+                        : 'Could not remove remote.',
+                    );
+                  }
                 }}
               />
             ))}

apps/next/src/components/spoons/spoon-secrets-form.tsx

@@ -130,24 +130,35 @@ export const SpoonSecretsForm = ({ spoonId }: { spoonId: Id<'spoons'> }) => {
       return;
     }
     setBulkSaving(true);
-    try {
-      for (const secret of parsedBulk.secrets) {
+    let imported = 0;
+    const failed: string[] = [];
+    for (const secret of parsedBulk.secrets) {
+      try {
         await createSecret({
           spoonId,
           name: secret.name,
           value: secret.value,
           description: 'Imported from .env',
         });
+        imported += 1;
+      } catch (error) {
+        console.error(error);
+        failed.push(secret.name);
       }
-      setBulkText('');
-      setBulkDialogOpen(false);
-      toast.success(`${parsedBulk.secrets.length} secrets imported.`);
-    } catch (error) {
-      console.error(error);
-      toast.error('Could not import secrets.');
-    } finally {
-      setBulkSaving(false);
     }
+    setBulkSaving(false);
+
+    if (imported > 0) {
+      toast.success(`${imported} secret${imported === 1 ? '' : 's'} imported.`);
+    }
+    if (failed.length) {
+      toast.error(
+        `Could not import ${failed.length} secret${failed.length === 1 ? '' : 's'}: ${failed.join(', ')}`,
+      );
+      return;
+    }
+    setBulkText('');
+    setBulkDialogOpen(false);
   };
 
   const readEnvFile = async (file?: File) => {
@@ -310,8 +321,16 @@ export const SpoonSecretsForm = ({ spoonId }: { spoonId: Id<'spoons'> }) => {
                   size='icon'
                   aria-label={`Remove ${secret.name}`}
                   onClick={async () => {
-                    await removeSecret({ secretId: secret._id });
-                    toast.success('Secret removed.');
+                    try {
+                      await removeSecret({ secretId: secret._id });
+                      toast.success('Secret removed.');
+                    } catch (error) {
+                      toast.error(
+                        error instanceof Error
+                          ? error.message
+                          : 'Could not remove secret.',
+                      );
+                    }
                   }}
                 >
                   <Trash2 className='size-4' />