add support for custom js code that will be executed on page load (#1032)

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

@@ -11,20 +11,24 @@ import { TbDeviceFloppy } from "react-icons/tb"
 
 interface FormData {
     customCss: string
+    customJs: string
 }
 
-export function CustomCss() {
+export function CustomCodeSettings() {
     const settings = useAppSelector(state => state.user.settings)
-    const customCss = settings?.customCss
     const dispatch = useAppDispatch()
 
     const form = useForm<FormData>()
     const { setValues } = form
 
-    const saveCustomCss = useAsyncCallback(
+    const saveCustomCode = useAsyncCallback(
         async (d: FormData) => {
             if (!settings) return
-            await client.user.saveSettings({ ...settings, customCss: d.customCss })
+            await client.user.saveSettings({
+                ...settings,
+                customCss: d.customCss,
+                customJs: d.customJs,
+            })
         },
         {
             onSuccess: () => {
@@ -34,25 +38,27 @@ export function CustomCss() {
     )
 
     useEffect(() => {
-        if (!customCss) return
+        if (!settings) return
         setValues({
-            customCss,
+            customCss: settings.customCss,
+            customJs: settings.customJs,
         })
-    }, [setValues, customCss])
+    }, [setValues, settings])
 
     return (
         <>
-            {saveCustomCss.error && (
+            {saveCustomCode.error && (
                 <Box mb="md">
-                    <Alert messages={errorToStrings(saveCustomCss.error)} />
+                    <Alert messages={errorToStrings(saveCustomCode.error)} />
                 </Box>
             )}
 
-            <form onSubmit={form.onSubmit(saveCustomCss.execute)}>
+            <form onSubmit={form.onSubmit(saveCustomCode.execute)}>
                 <Stack>
                     <Textarea
                         autosize
                         minRows={4}
+                        maxRows={15}
                         {...form.getInputProps("customCss")}
                         description={<Trans>Custom CSS rules that will be applied</Trans>}
                         styles={{
@@ -62,11 +68,24 @@ export function CustomCss() {
                         }}
                     />
 
+                    <Textarea
+                        autosize
+                        minRows={4}
+                        maxRows={15}
+                        {...form.getInputProps("customJs")}
+                        description={<Trans>Custom JS code that will be executed on page load</Trans>}
+                        styles={{
+                            input: {
+                                fontFamily: "monospace",
+                            },
+                        }}
+                    />
+
                     <Group>
                         <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
                             <Trans>Cancel</Trans>
                         </Button>
-                        <Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveCustomCss.loading}>
+                        <Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveCustomCode.loading}>
                             <Trans>Save</Trans>
                         </Button>
                     </Group>