show alert on error

commafeed-client/src/components/settings/CustomCss.tsx

@@ -1,9 +1,10 @@
 import { Trans } from "@lingui/macro"
-import { Button, Group, Stack, Textarea } from "@mantine/core"
+import { Box, Button, Group, Stack, Textarea } from "@mantine/core"
 import { useForm } from "@mantine/form"
-import { client } from "app/client"
+import { client, errorToStrings } from "app/client"
 import { redirectToSelectedSource } from "app/slices/redirect"
 import { useAppDispatch, useAppSelector } from "app/store"
+import { Alert } from "components/Alert"
 import { useEffect } from "react"
 import { useAsyncCallback } from "react-async-hook"
 import { TbDeviceFloppy } from "react-icons/tb"
@@ -40,6 +41,13 @@ export function CustomCss() {
     }, [setValues, customCss])
 
     return (
+        <>
+            {saveCustomCss.error && (
+                <Box mb="md">
+                    <Alert messages={errorToStrings(saveCustomCss.error)} />
+                </Box>
+            )}
+
             <form onSubmit={form.onSubmit(saveCustomCss.execute)}>
                 <Stack>
                     <Textarea
@@ -64,5 +72,6 @@ export function CustomCss() {
                     </Group>
                 </Stack>
             </form>
+        </>
     )
 }