release 3.3.0

compiler is only needed in the java module
no longer need to insert code between imports
2026-03-21 21:37:29 +00:00 · 2023-05-10 08:34:09 +02:00 · 2023-05-09 14:45:19 +02:00 · 2023-05-08 17:30:32 +02:00 · 2023-05-08 17:30:32 +02:00 · 2023-05-08 13:42:16 +02:00
85 changed files with 3615 additions and 3304 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog

+## [3.3.0]
+
+- there are now database changes, rolling back to 2.x will no longer be possible
+- restore support for user custom CSS rules
+- add support for user custom JS code that will be executed on page load
+
+
 ## [3.2.0]

 - restore the welcome page
--- a/commafeed-client/.linguirc
+++ b/commafeed-client/.linguirc
@@ -48,10 +48,5 @@
    "sourceLocale": "en",
    "fallbackLocales": {
        "default": "en"
-    },
-    "extractBabelOptions": {
-        "presets": [
-            "@babel/preset-typescript"
-        ]
    }
 }
--- a/commafeed-client/index.html
+++ b/commafeed-client/index.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/x-icon" href="favicon.ico" />
-        <link rel="manifest" href="manifest.json" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-        <title>CommaFeed</title>
-    </head>
-    <body>
-        <div id="root"></div>
-        <script type="module" src="/src/main.tsx"></script>
-    </body>
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  <link rel="manifest" href="manifest.json" />
+  <link rel="stylesheet" href="custom_css.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <title>CommaFeed</title>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="/src/main.tsx"></script>
+<script src="custom_js.js"></script>
+</body>
 </html>
--- a/commafeed-client/package-lock.json
+++ b/commafeed-client/package-lock.json
--- a/commafeed-client/package.json
+++ b/commafeed-client/package.json
@@ -17,67 +17,68 @@
    "postinstall": "npm run i18n:compile"
  },
  "dependencies": {
-    "@emotion/react": "^11.10.5",
+    "@emotion/react": "^11.11.0",
    "@fontsource/open-sans": "^4.5.14",
-    "@lingui/core": "^3.17.0",
-    "@lingui/macro": "^3.17.0",
-    "@lingui/react": "^3.17.0",
-    "@mantine/core": "^5.10.3",
-    "@mantine/form": "^5.10.3",
-    "@mantine/hooks": "^5.10.3",
-    "@mantine/modals": "^5.10.3",
-    "@mantine/notifications": "^5.10.3",
-    "@mantine/spotlight": "^5.10.3",
-    "@mantine/styles": "^5.10.3",
-    "@reduxjs/toolkit": "^1.9.2",
-    "axios": "^1.3.2",
+    "@lingui/core": "^4.0.0",
+    "@lingui/macro": "^4.0.0",
+    "@lingui/react": "^4.0.0",
+    "@mantine/core": "^6.0.10",
+    "@mantine/form": "^6.0.10",
+    "@mantine/hooks": "^6.0.10",
+    "@mantine/modals": "^6.0.10",
+    "@mantine/notifications": "^6.0.10",
+    "@mantine/spotlight": "^6.0.10",
+    "@mantine/styles": "^6.0.10",
+    "@reduxjs/toolkit": "^1.9.5",
+    "axios": "^1.4.0",
    "dayjs": "^1.11.7",
-    "interweave": "^13.0.0",
+    "interweave": "^13.1.0",
    "lodash": "^4.17.21",
-    "make-plural": "^7.2.0",
    "mousetrap": "^1.6.5",
    "react": "^18.2.0",
    "react-async-hook": "^4.0.0",
    "react-contexify": "^6.0.0",
    "react-dom": "^18.2.0",
    "react-ga4": "^2.1.0",
-    "react-icons": "^4.7.1",
+    "react-icons": "^4.8.0",
    "react-infinite-scroller": "^1.2.6",
    "react-redux": "^8.0.5",
-    "react-router-dom": "^6.8.0",
+    "react-router-dom": "^6.11.1",
    "react-swipeable": "^7.0.0",
-    "swagger-ui-react": "^4.15.5",
+    "swagger-ui-react": "^4.18.3",
    "tinycon": "^0.6.8",
    "use-local-storage": "^3.0.0",
-    "websocket-heartbeat-js": "^1.1.1"
+    "websocket-heartbeat-js": "^1.1.2"
  },
  "devDependencies": {
-    "@lingui/cli": "^3.17.0",
-    "@types/eslint": "^8.21.0",
-    "@types/lodash": "^4.14.191",
+    "@lingui/cli": "^4.0.0",
+    "@lingui/vite-plugin": "^4.0.0",
+    "@types/eslint": "^8.37.0",
+    "@types/lodash": "^4.14.194",
    "@types/mousetrap": "^1.6.11",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
    "@types/react-infinite-scroller": "^1.2.3",
-    "@types/swagger-ui-react": "^4.11.0",
+    "@types/swagger-ui-react": "^4.18.0",
    "@types/tinycon": "^0.6.3",
-    "@typescript-eslint/eslint-plugin": "^5.50.0",
-    "@typescript-eslint/parser": "^5.50.0",
-    "@vitejs/plugin-react": "^3.1.0",
-    "eslint": "^8.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
+    "@vitejs/plugin-react": "^4.0.0",
+    "babel-plugin-macros": "^3.1.0",
+    "eslint": "^8.40.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-prettier": "^8.8.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-hooks": "^0.4.3",
    "eslint-plugin-prettier": "^4.2.1",
-    "prettier": "^2.8.3",
+    "prettier": "^2.8.8",
    "rollup-plugin-visualizer": "^5.9.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.1",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.5",
    "vite-plugin-eslint": "^1.8.1",
-    "vite-tsconfig-paths": "^4.0.5",
-    "vitest": "^0.28.4",
-    "vitest-mock-extended": "^1.0.9"
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^0.31.0",
+    "vitest-mock-extended": "^1.1.3"
  }
 }
--- a/commafeed-client/pom.xml
+++ b/commafeed-client/pom.xml
@@ -5,7 +5,7 @@
 	<parent>
 		<groupId>com.commafeed</groupId>
 		<artifactId>commafeed</artifactId>
-		<version>3.2.0</version>
+		<version>3.3.0</version>
 	</parent>
 	<artifactId>commafeed-client</artifactId>
 	<name>CommaFeed Client</name>
--- a/commafeed-client/src/App.tsx
+++ b/commafeed-client/src/App.tsx
@@ -3,7 +3,7 @@ import { I18nProvider } from "@lingui/react"
 import { ColorScheme, ColorSchemeProvider, MantineProvider } from "@mantine/core"
 import { useColorScheme } from "@mantine/hooks"
 import { ModalsProvider } from "@mantine/modals"
-import { NotificationsProvider } from "@mantine/notifications"
+import { Notifications } from "@mantine/notifications"
 import { Constants } from "app/constants"
 import { redirectTo } from "app/slices/redirect"
 import { reloadServerInfos } from "app/slices/server"
@@ -26,12 +26,12 @@ import { TagDetailsPage } from "pages/app/TagDetailsPage"
 import { LoginPage } from "pages/auth/LoginPage"
 import { PasswordRecoveryPage } from "pages/auth/PasswordRecoveryPage"
 import { RegistrationPage } from "pages/auth/RegistrationPage"
+import { WelcomePage } from "pages/WelcomePage"
 import React, { useEffect } from "react"
 import ReactGA from "react-ga4"
 import { HashRouter, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom"
 import Tinycon from "tinycon"
 import useLocalStorage from "use-local-storage"
-import { WelcomePage } from "./pages/WelcomePage"

 function Providers(props: { children: React.ReactNode }) {
    const preferredColorScheme = useColorScheme()
@@ -51,9 +51,8 @@ function Providers(props: { children: React.ReactNode }) {
                    }}
                >
                    <ModalsProvider>
-                        <NotificationsProvider position="bottom-right" zIndex={9999}>
-                            <ErrorBoundary>{props.children}</ErrorBoundary>
-                        </NotificationsProvider>
+                        <Notifications position="bottom-right" zIndex={9999} />
+                        <ErrorBoundary>{props.children}</ErrorBoundary>
                    </ModalsProvider>
                </MantineProvider>
            </ColorSchemeProvider>
--- a/commafeed-client/src/app/slices/entries.test.ts
+++ b/commafeed-client/src/app/slices/entries.test.ts
@@ -1,19 +1,20 @@
 /* eslint-disable import/first */
-import { beforeEach, describe, expect, it, vi } from "vitest"
-import { DeepMockProxy, mockDeep, mockReset } from "vitest-mock-extended"
-
-vi.doMock("app/client", () => ({ client: mockDeep() }))
-
 import { configureStore } from "@reduxjs/toolkit"
 import { client } from "app/client"
 import { reducers } from "app/store"
 import { Entries, Entry } from "app/types"
 import { AxiosResponse } from "axios"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+import { mockReset } from "vitest-mock-extended"
 import { loadEntries, loadMoreEntries, markAllEntries, markEntry } from "./entries"

-describe("entries", () => {
-    const mockClient = client as DeepMockProxy<typeof client>
+const mockClient = await vi.hoisted(async () => {
+    const mockModule = await import("vitest-mock-extended")
+    return mockModule.mockDeep<typeof client>()
+})
+vi.mock("app/client", () => ({ client: mockClient }))

+describe("entries", () => {
    beforeEach(() => {
        mockReset(mockClient)
    })
--- a/commafeed-client/src/app/types.ts
+++ b/commafeed-client/src/app/types.ts
@@ -230,8 +230,8 @@ export interface Settings {
    readingOrder: ReadingOrder
    showRead: boolean
    scrollMarks: boolean
-    theme?: string
    customCss?: string
+    customJs?: string
    scrollSpeed: number
    sharingSettings: SharingSettings
 }
--- a/commafeed-client/src/components/ActionButtton.tsx
+++ b/commafeed-client/src/components/ActionButtton.tsx
@@ -1,14 +1,15 @@
-import { ActionIcon, Button, ButtonVariant, useMantineTheme } from "@mantine/core"
-import { ActionIconVariant } from "@mantine/core/lib/ActionIcon/ActionIcon.styles"
+import { ActionIcon, Button, useMantineTheme } from "@mantine/core"
+import { ActionIconProps } from "@mantine/core/lib/ActionIcon/ActionIcon"
+import { ButtonProps } from "@mantine/core/lib/Button/Button"
 import { useMediaQuery } from "@mantine/hooks"
 import { forwardRef, MouseEventHandler, ReactNode } from "react"

 interface ActionButtonProps {
    className?: string
    icon?: ReactNode
-    label?: string
+    label?: ReactNode
    onClick?: MouseEventHandler
-    variant?: ActionIconVariant & ButtonVariant
+    variant?: ActionIconProps["variant"] & ButtonProps["variant"]
    showLabelOnMobile?: boolean
 }

@@ -18,7 +19,7 @@ interface ActionButtonProps {
 export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((props: ActionButtonProps, ref) => {
    const theme = useMantineTheme()
    const variant = props.variant ?? "subtle"
-    const mobile = !useMediaQuery(`(min-width: ${theme.breakpoints.lg}px)`)
+    const mobile = !useMediaQuery(`(min-width: ${theme.breakpoints.lg})`)
    const iconOnly = !props.showLabelOnMobile && (mobile || !props.label)
    return iconOnly ? (
        <ActionIcon ref={ref} color={theme.primaryColor} variant={variant} className={props.className} onClick={props.onClick}>
--- a/commafeed-client/src/components/Alert.tsx
+++ b/commafeed-client/src/components/Alert.tsx
@@ -1,5 +1,5 @@
-import { t } from "@lingui/macro"
-import { Alert as MantineAlert, Box } from "@mantine/core"
+import { Trans } from "@lingui/macro"
+import { Box, Alert as MantineAlert } from "@mantine/core"
 import { Fragment } from "react"
 import { TbAlertCircle, TbAlertTriangle, TbCircleCheck } from "react-icons/tb"

@@ -10,24 +10,24 @@ export interface ErrorsAlertProps {
 }

 export function Alert(props: ErrorsAlertProps) {
-    let title: string
+    let title: React.ReactNode
    let color: string
    let icon: React.ReactNode

    const level = props.level ?? "error"
    switch (level) {
        case "error":
-            title = t`Error`
+            title = <Trans>Error</Trans>
            color = "red"
            icon = <TbAlertCircle />
            break
        case "warning":
-            title = t`Warning`
+            title = <Trans>Warning</Trans>
            color = "orange"
            icon = <TbAlertTriangle />
            break
        case "success":
-            title = t`Success`
+            title = <Trans>Success</Trans>
            color = "green"
            icon = <TbCircleCheck />
            break
--- a/commafeed-client/src/components/admin/UserEdit.tsx
+++ b/commafeed-client/src/components/admin/UserEdit.tsx
@@ -1,4 +1,4 @@
-import { t, Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import { Box, Button, Checkbox, Group, PasswordInput, Stack, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { client, errorToStrings } from "app/client"
@@ -29,11 +29,11 @@ export function UserEdit(props: UserEditProps) {

            <form onSubmit={form.onSubmit(saveUser.execute)}>
                <Stack>
-                    <TextInput label={t`Name`} {...form.getInputProps("name")} required />
-                    <PasswordInput label={t`Password`} {...form.getInputProps("password")} required={!props.user} />
-                    <TextInput type="email" label={t`E-mail`} {...form.getInputProps("email")} />
-                    <Checkbox label={t`Admin`} {...form.getInputProps("admin", { type: "checkbox" })} />
-                    <Checkbox label={t`Enabled`} {...form.getInputProps("enabled", { type: "checkbox" })} />
+                    <TextInput label={<Trans>Name</Trans>} {...form.getInputProps("name")} required />
+                    <PasswordInput label={<Trans>Password</Trans>} {...form.getInputProps("password")} required={!props.user} />
+                    <TextInput type="email" label={<Trans>E-mail</Trans>} {...form.getInputProps("email")} />
+                    <Checkbox label={<Trans>Admin</Trans>} {...form.getInputProps("admin", { type: "checkbox" })} />
+                    <Checkbox label={<Trans>Enabled</Trans>} {...form.getInputProps("enabled", { type: "checkbox" })} />

                    <Group>
                        <Button variant="default" onClick={props.onCancel}>
--- a/commafeed-client/src/components/content/FeedEntries.tsx
+++ b/commafeed-client/src/components/content/FeedEntries.tsx
@@ -1,4 +1,4 @@
-import { t } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import { openModal } from "@mantine/modals"
 import { Constants } from "app/constants"
 import {
@@ -17,11 +17,11 @@ import { openLinkInBackgroundTab } from "app/utils"
 import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
 import { Loader } from "components/Loader"
 import { useMousetrap } from "hooks/useMousetrap"
+import { useViewMode } from "hooks/useViewMode"
 import throttle from "lodash/throttle"
 import { useEffect } from "react"
 import InfiniteScroll from "react-infinite-scroller"
 import { FeedEntry } from "./FeedEntry"
-import { useViewMode } from "../../hooks/useViewMode"

 export function FeedEntries() {
    const source = useAppSelector(state => state.entries.source)
@@ -234,11 +234,18 @@ export function FeedEntries() {
        )
    })
    useMousetrap("g a", () => dispatch(redirectToRootCategory()))
-    useMousetrap("?", () => openModal({ title: t`Keyboard shortcuts`, size: "xl", children: <KeyboardShortcutsHelp /> }))
+    useMousetrap("?", () =>
+        openModal({
+            title: <Trans>Keyboard shortcuts</Trans>,
+            size: "xl",
+            children: <KeyboardShortcutsHelp />,
+        })
+    )

    if (!entries) return <Loader />
    return (
        <InfiniteScroll
+            id="entries"
            initialLoad={false}
            loadMore={() => dispatch(loadMoreEntries())}
            hasMore={hasMore}
--- a/commafeed-client/src/components/content/FeedEntry.tsx
+++ b/commafeed-client/src/components/content/FeedEntry.tsx
@@ -1,12 +1,12 @@
-import { Anchor, Box, createStyles, Divider, Paper } from "@mantine/core"
+import { Box, createStyles, Divider, Paper } from "@mantine/core"
 import { MantineNumberSize } from "@mantine/styles"
 import { Constants } from "app/constants"
 import { markEntry } from "app/slices/entries"
 import { useAppDispatch } from "app/store"
 import { Entry, ViewMode } from "app/types"
+import { useViewMode } from "hooks/useViewMode"
 import React from "react"
 import { useSwipeable } from "react-swipeable"
-import { useViewMode } from "../../hooks/useViewMode"
 import { FeedEntryBody } from "./FeedEntryBody"
 import { FeedEntryCompactHeader } from "./FeedEntryCompactHeader"
 import { FeedEntryContextMenu, useFeedEntryContextMenu } from "./FeedEntryContextMenu"
@@ -25,7 +25,7 @@ const useStyles = createStyles((theme, props: FeedEntryProps & { viewMode?: View
    if (theme.colorScheme === "dark") backgroundColor = props.entry.read ? "inherit" : theme.colors.dark[5]
    else backgroundColor = props.entry.read && !props.expanded ? theme.colors.gray[0] : "inherit"

-    let marginY = theme.spacing.xs
+    let marginY = 10
    if (props.viewMode === "title") marginY = 2
    else if (props.viewMode === "cozy") marginY = 6

@@ -53,6 +53,10 @@ const useStyles = createStyles((theme, props: FeedEntryProps & { viewMode?: View
                },
            },
        },
+        headerLink: {
+            color: "inherit",
+            textDecoration: "none",
+        },
        body: {
            maxWidth: Constants.layout.entryMaxWidth,
        },
@@ -91,8 +95,8 @@ export function FeedEntry(props: FeedEntryProps) {
    const compactHeader = !props.expanded && (viewMode === "title" || viewMode === "cozy")
    return (
        <Paper withBorder radius={borderRadius} className={classes.paper}>
-            <Anchor
-                variant="text"
+            <a
+                className={classes.headerLink}
                href={props.entry.url}
                target="_blank"
                rel="noreferrer"
@@ -104,7 +108,7 @@ export function FeedEntry(props: FeedEntryProps) {
                    {compactHeader && <FeedEntryCompactHeader entry={props.entry} />}
                    {!compactHeader && <FeedEntryHeader entry={props.entry} expanded={props.expanded} />}
                </Box>
-            </Anchor>
+            </a>
            {props.expanded && (
                <Box px={paddingX} pb={paddingY}>
                    <Box className={classes.body} sx={{ direction: props.entry.rtl ? "rtl" : "ltr" }}>
--- a/commafeed-client/src/components/content/FeedEntryContextMenu.tsx
+++ b/commafeed-client/src/components/content/FeedEntryContextMenu.tsx
@@ -1,4 +1,4 @@
-import { t, Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import { createStyles, Group } from "@mantine/core"
 import { Constants } from "app/constants"
 import { markEntriesUpToEntry, markEntry, starEntry } from "app/slices/entries"
@@ -29,6 +29,7 @@ const useStyles = createStyles(theme => ({
 }))

 const menuId = (entry: Entry) => entry.id
+
 export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
    const { classes, theme } = useStyles()
    const sourceType = useAppSelector(state => state.entries.source.type)
@@ -64,13 +65,13 @@ export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
            <Item onClick={() => dispatch(starEntry({ entry: props.entry, starred: !props.entry.starred }))}>
                <Group>
                    {props.entry.starred ? <TbStarOff size={iconSize} /> : <TbStar size={iconSize} />}
-                    {props.entry.starred ? t`Unstar` : t`Star`}
+                    {props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>}
                </Group>
            </Item>
            <Item onClick={() => dispatch(markEntry({ entry: props.entry, read: !props.entry.read }))}>
                <Group>
                    {props.entry.read ? <TbEyeOff size={iconSize} /> : <TbEyeCheck size={iconSize} />}
-                    {props.entry.read ? t`Keep unread` : t`Mark as read`}
+                    {props.entry.read ? <Trans>Keep unread</Trans> : <Trans>Mark as read</Trans>}
                </Group>
            </Item>
            <Item onClick={() => dispatch(markEntriesUpToEntry(props.entry))}>
--- a/commafeed-client/src/components/content/FeedEntryFooter.tsx
+++ b/commafeed-client/src/components/content/FeedEntryFooter.tsx
@@ -1,4 +1,4 @@
-import { t } from "@lingui/macro"
+import { t, Trans } from "@lingui/macro"
 import { Group, Indicator, MultiSelect, Popover } from "@mantine/core"
 import { useMediaQuery } from "@mantine/hooks"
 import { Constants } from "app/constants"
@@ -20,7 +20,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
    const [scrollPosition, setScrollPosition] = useState(0)
    const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
    const tags = useAppSelector(state => state.user.tags)
-    const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint}px)`)
+    const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint})`)
    const dispatch = useAppDispatch()

    const showSharingButtons = sharingSettings && Object.values(sharingSettings).some(v => v)
@@ -50,20 +50,20 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                {props.entry.markable && (
                    <ActionButton
                        icon={props.entry.read ? <TbEyeOff size={18} /> : <TbEyeCheck size={18} />}
-                        label={props.entry.read ? t`Keep unread` : t`Mark as read`}
+                        label={props.entry.read ? <Trans>Keep unread</Trans> : <Trans>Mark as read</Trans>}
                        onClick={readStatusButtonClicked}
                    />
                )}
                <ActionButton
                    icon={props.entry.starred ? <TbStarOff size={18} /> : <TbStar size={18} />}
-                    label={props.entry.starred ? t`Unstar` : t`Star`}
+                    label={props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>}
                    onClick={() => dispatch(starEntry({ entry: props.entry, starred: !props.entry.starred }))}
                />

                {showSharingButtons && (
                    <Popover withArrow withinPortal shadow="md" positionDependencies={[scrollPosition]} closeOnClickOutside={!mobile}>
                        <Popover.Target>
-                            <ActionButton icon={<TbShare size={18} />} label={t`Share`} />
+                            <ActionButton icon={<TbShare size={18} />} label={<Trans>Share</Trans>} />
                        </Popover.Target>
                        <Popover.Dropdown>
                            <ShareButtons url={props.entry.url} description={props.entry.title} />
@@ -74,8 +74,8 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                {tags && (
                    <Popover withArrow withinPortal shadow="md" positionDependencies={[scrollPosition]} closeOnClickOutside={!mobile}>
                        <Popover.Target>
-                            <Indicator label={props.entry.tags.length} showZero={false} dot={false} inline size={16}>
-                                <ActionButton icon={<TbTag size={18} />} label={t`Tags`} />
+                            <Indicator label={props.entry.tags.length} disabled={props.entry.tags.length === 0} inline size={16}>
+                                <ActionButton icon={<TbTag size={18} />} label={<Trans>Tags</Trans>} />
                            </Indicator>
                        </Popover.Target>
                        <Popover.Dropdown>
@@ -94,13 +94,13 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                )}

                <a href={props.entry.url} target="_blank" rel="noreferrer">
-                    <ActionButton icon={<TbExternalLink size={18} />} label={t`Open link`} />
+                    <ActionButton icon={<TbExternalLink size={18} />} label={<Trans>Open link</Trans>} />
                </a>
            </ButtonToolbar>

            <ActionButton
                icon={<TbArrowBarToDown size={18} />}
-                label={t`Mark as read up to here`}
+                label={<Trans>Mark as read up to here</Trans>}
                onClick={() => dispatch(markEntriesUpToEntry(props.entry))}
            />
        </Group>
--- a/commafeed-client/src/components/content/add/AddCategory.tsx
+++ b/commafeed-client/src/components/content/add/AddCategory.tsx
@@ -33,8 +33,8 @@ export function AddCategory() {

            <form onSubmit={form.onSubmit(addCategory.execute)}>
                <Stack>
-                    <TextInput label={t`Category`} placeholder={t`Category`} {...form.getInputProps("name")} required />
-                    <CategorySelect label={t`Parent`} {...form.getInputProps("parentId")} clearable />
+                    <TextInput label={<Trans>Category</Trans>} placeholder={t`Category`} {...form.getInputProps("name")} required />
+                    <CategorySelect label={<Trans>Parent</Trans>} {...form.getInputProps("parentId")} clearable />
                    <Group position="center">
                        <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
                            <Trans>Cancel</Trans>
--- a/commafeed-client/src/components/content/add/ImportOpml.tsx
+++ b/commafeed-client/src/components/content/add/ImportOpml.tsx
@@ -36,9 +36,14 @@ export function ImportOpml() {
            <form onSubmit={form.onSubmit(v => importOpml.execute(v.file))}>
                <Stack>
                    <FileInput
-                        label={t`OPML file`}
+                        label={<Trans>OPML file</Trans>}
                        placeholder={t`OPML file`}
-                        description={t`An opml file is an XML file containing feed URLs and categories. You can get an OPML file by exporting your data from other feed reading services.`}
+                        description={
+                            <Trans>
+                                An opml file is an XML file containing feed URLs and categories. You can get an OPML file by exporting your
+                                data from other feed reading services.
+                            </Trans>
+                        }
                        {...form.getInputProps("file")}
                        required
                        accept="application/xml"
--- a/commafeed-client/src/components/content/add/Subscribe.tsx
+++ b/commafeed-client/src/components/content/add/Subscribe.tsx
@@ -1,4 +1,4 @@
-import { t, Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import { Box, Button, Group, Stack, Stepper, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { client, errorToStrings } from "app/client"
@@ -74,24 +74,33 @@ export function Subscribe() {
            <form onSubmit={nextStep}>
                <Stepper active={activeStep} onStepClick={setActiveStep}>
                    <Stepper.Step
-                        label={t`Analyze feed`}
-                        description={t`Check that the feed is working`}
+                        label={<Trans>Analyze feed</Trans>}
+                        description={<Trans>Check that the feed is working</Trans>}
                        allowStepSelect={activeStep === 1}
                    >
                        <TextInput
-                            label={t`Feed URL`}
+                            label={<Trans>Feed URL</Trans>}
                            placeholder="http://www.mysite.com/rss"
-                            description={t`The URL for the feed you want to subscribe to. You can also use the website's url directly and CommaFeed will try to find the feed in the page.`}
+                            description={
+                                <Trans>
+                                    The URL for the feed you want to subscribe to. You can also use the website's url directly and CommaFeed
+                                    will try to find the feed in the page.
+                                </Trans>
+                            }
                            required
                            autoFocus
                            {...step0Form.getInputProps("url")}
                        />
                    </Stepper.Step>
-                    <Stepper.Step label={t`Subscribe`} description={t`Subscribe to the feed`} allowStepSelect={false}>
+                    <Stepper.Step
+                        label={<Trans>Subscribe</Trans>}
+                        description={<Trans>Subscribe to the feed</Trans>}
+                        allowStepSelect={false}
+                    >
                        <Stack>
-                            <TextInput label={t`Feed URL`} {...step1Form.getInputProps("url")} disabled />
-                            <TextInput label={t`Feed name`} {...step1Form.getInputProps("title")} required autoFocus />
-                            <CategorySelect label={t`Category`} {...step1Form.getInputProps("categoryId")} clearable />
+                            <TextInput label={<Trans>Feed URL</Trans>} {...step1Form.getInputProps("url")} disabled />
+                            <TextInput label={<Trans>Feed name</Trans>} {...step1Form.getInputProps("title")} required autoFocus />
+                            <CategorySelect label={<Trans>Category</Trans>} {...step1Form.getInputProps("categoryId")} clearable />
                        </Stack>
                    </Stepper.Step>
                </Stepper>
--- a/commafeed-client/src/components/header/Header.tsx
+++ b/commafeed-client/src/components/header/Header.tsx
@@ -1,4 +1,4 @@
-import { t } from "@lingui/macro"
+import { t, Trans } from "@lingui/macro"
 import { ActionIcon, Center, Divider, Indicator, Popover, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { reloadEntries, search } from "app/slices/entries"
@@ -17,6 +17,7 @@ function HeaderDivider() {
 }

 const iconSize = 18
+
 export function Header() {
    const settings = useAppSelector(state => state.user.settings)
    const profile = useAppSelector(state => state.user.profile)
@@ -40,26 +41,30 @@ export function Header() {
    return (
        <Center>
            <ButtonToolbar>
-                <ActionButton icon={<TbRefresh size={iconSize} />} label={t`Refresh`} onClick={() => dispatch(reloadEntries())} />
+                <ActionButton
+                    icon={<TbRefresh size={iconSize} />}
+                    label={<Trans>Refresh</Trans>}
+                    onClick={() => dispatch(reloadEntries())}
+                />
                <MarkAllAsReadButton iconSize={iconSize} />

                <HeaderDivider />

                <ActionButton
                    icon={settings.readingMode === "all" ? <TbEye size={iconSize} /> : <TbEyeOff size={iconSize} />}
-                    label={settings.readingMode === "all" ? t`All` : t`Unread`}
+                    label={settings.readingMode === "all" ? <Trans>All</Trans> : <Trans>Unread</Trans>}
                    onClick={() => dispatch(changeReadingMode(settings.readingMode === "all" ? "unread" : "all"))}
                />
                <ActionButton
                    icon={settings.readingOrder === "asc" ? <TbArrowUp size={iconSize} /> : <TbArrowDown size={iconSize} />}
-                    label={settings.readingOrder === "asc" ? t`Asc` : t`Desc`}
+                    label={settings.readingOrder === "asc" ? <Trans>Asc</Trans> : <Trans>Desc</Trans>}
                    onClick={() => dispatch(changeReadingOrder(settings.readingOrder === "asc" ? "desc" : "asc"))}
                />

                <Popover>
                    <Popover.Target>
                        <Indicator disabled={!searchFromStore}>
-                            <ActionButton icon={<TbSearch size={iconSize} />} label={t`Search`} />
+                            <ActionButton icon={<TbSearch size={iconSize} />} label={<Trans>Search</Trans>} />
                        </Indicator>
                    </Popover.Target>
                    <Popover.Dropdown>
--- a/commafeed-client/src/components/header/MarkAllAsReadButton.tsx
+++ b/commafeed-client/src/components/header/MarkAllAsReadButton.tsx
@@ -1,4 +1,4 @@
-import { t, Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"

 import { Button, Code, Group, Modal, Slider, Stack, Text } from "@mantine/core"
 import { markAllEntries } from "app/slices/entries"
@@ -17,7 +17,7 @@ export function MarkAllAsReadButton(props: { iconSize: number }) {

    return (
        <>
-            <Modal opened={opened} onClose={() => setOpened(false)} title={t`Mark all entries as read`}>
+            <Modal opened={opened} onClose={() => setOpened(false)} title={<Trans>Mark all entries as read</Trans>}>
                <Stack>
                    <Text size="sm">
                        {threshold === 0 && (
@@ -72,7 +72,7 @@ export function MarkAllAsReadButton(props: { iconSize: number }) {
            </Modal>
            <ActionButton
                icon={<TbChecks size={props.iconSize} />}
-                label={t`Mark all as read`}
+                label={<Trans>Mark all as read</Trans>}
                onClick={() => {
                    setThreshold(0)
                    setOpened(true)
--- a/commafeed-client/src/components/header/ProfileMenu.tsx
+++ b/commafeed-client/src/components/header/ProfileMenu.tsx
@@ -1,10 +1,11 @@
-import { t, Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import { Box, Divider, Group, Menu, SegmentedControl, SegmentedControlItem, useMantineColorScheme } from "@mantine/core"
 import { showNotification } from "@mantine/notifications"
 import { client } from "app/client"
 import { redirectToAbout, redirectToAdminUsers, redirectToMetrics, redirectToSettings } from "app/slices/redirect"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { ViewMode } from "app/types"
+import { useViewMode } from "hooks/useViewMode"
 import { useState } from "react"
 import {
    TbChartLine,
@@ -20,7 +21,6 @@ import {
    TbUsers,
    TbWorldDownload,
 } from "react-icons/tb"
-import { useViewMode } from "../../hooks/useViewMode"

 interface ProfileMenuProps {
    control: React.ReactElement
@@ -111,7 +111,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
                    onClick={() =>
                        client.feed.refreshAll().then(() => {
                            showNotification({
-                                message: t`Your feeds have been queued for refresh.`,
+                                message: <Trans>Your feeds have been queued for refresh.</Trans>,
                                color: "green",
                                autoClose: 1000,
                            })
--- a/commafeed-client/src/components/settings/CustomCodeSettings.tsx
+++ b/commafeed-client/src/components/settings/CustomCodeSettings.tsx
@@ -0,0 +1,96 @@
+import { Trans } from "@lingui/macro"
+import { Box, Button, Group, Stack, Textarea } from "@mantine/core"
+import { useForm } from "@mantine/form"
+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"
+
+interface FormData {
+    customCss: string
+    customJs: string
+}
+
+export function CustomCodeSettings() {
+    const settings = useAppSelector(state => state.user.settings)
+    const dispatch = useAppDispatch()
+
+    const form = useForm<FormData>()
+    const { setValues } = form
+
+    const saveCustomCode = useAsyncCallback(
+        async (d: FormData) => {
+            if (!settings) return
+            await client.user.saveSettings({
+                ...settings,
+                customCss: d.customCss,
+                customJs: d.customJs,
+            })
+        },
+        {
+            onSuccess: () => {
+                window.location.reload()
+            },
+        }
+    )
+
+    useEffect(() => {
+        if (!settings) return
+        setValues({
+            customCss: settings.customCss,
+            customJs: settings.customJs,
+        })
+    }, [setValues, settings])
+
+    return (
+        <>
+            {saveCustomCode.error && (
+                <Box mb="md">
+                    <Alert messages={errorToStrings(saveCustomCode.error)} />
+                </Box>
+            )}
+
+            <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={{
+                            input: {
+                                fontFamily: "monospace",
+                            },
+                        }}
+                    />
+
+                    <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={saveCustomCode.loading}>
+                            <Trans>Save</Trans>
+                        </Button>
+                    </Group>
+                </Stack>
+            </form>
+        </>
+    )
+}
--- a/commafeed-client/src/components/settings/DisplaySettings.tsx
+++ b/commafeed-client/src/components/settings/DisplaySettings.tsx
@@ -1,4 +1,4 @@
-import { t } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import { Divider, Select, SimpleGrid, Stack, Switch } from "@mantine/core"
 import { Constants } from "app/constants"
 import { changeLanguage, changeScrollMarks, changeScrollSpeed, changeSharingSetting, changeShowRead } from "app/slices/user"
@@ -17,7 +17,7 @@ export function DisplaySettings() {
    return (
        <Stack>
            <Select
-                description={t`Language`}
+                description={<Trans>Language</Trans>}
                value={language}
                data={locales.map(l => ({
                    value: l.key,
@@ -27,24 +27,24 @@ export function DisplaySettings() {
            />

            <Switch
-                label={t`Scroll smoothly when navigating between entries`}
+                label={<Trans>Scroll smoothly when navigating between entries</Trans>}
                checked={scrollSpeed ? scrollSpeed > 0 : false}
                onChange={e => dispatch(changeScrollSpeed(e.currentTarget.checked))}
            />

            <Switch
-                label={t`Show feeds and categories with no unread entries`}
+                label={<Trans>Show feeds and categories with no unread entries</Trans>}
                checked={showRead}
                onChange={e => dispatch(changeShowRead(e.currentTarget.checked))}
            />

            <Switch
-                label={t`In expanded view, scrolling through entries mark them as read`}
+                label={<Trans>In expanded view, scrolling through entries mark them as read</Trans>}
                checked={scrollMarks}
                onChange={e => dispatch(changeScrollMarks(e.currentTarget.checked))}
            />

-            <Divider label={t`Sharing sites`} labelPosition="center" />
+            <Divider label={<Trans>Sharing sites</Trans>} labelPosition="center" />

            <SimpleGrid cols={2}>
                {(Object.keys(Constants.sharing) as Array<keyof SharingSettings>).map(site => (
--- a/commafeed-client/src/components/settings/ProfileSettings.tsx
+++ b/commafeed-client/src/components/settings/ProfileSettings.tsx
@@ -41,13 +41,13 @@ export function ProfileSettings() {

    const openDeleteProfileModal = () =>
        openConfirmModal({
-            title: t`Delete account`,
+            title: <Trans>Delete account</Trans>,
            children: (
                <Text size="sm">
                    <Trans>Are you sure you want to delete your account? There's no turning back!</Trans>
                </Text>
            ),
-            labels: { confirm: t`Confirm`, cancel: t`Cancel` },
+            labels: { confirm: <Trans>Confirm</Trans>, cancel: <Trans>Cancel</Trans> },
            confirmProps: { color: "red" },
            onConfirm: () => deleteProfile.execute(),
        })
@@ -77,12 +77,16 @@ export function ProfileSettings() {

            <form onSubmit={form.onSubmit(saveProfile.execute)}>
                <Stack>
-                    <Input.Wrapper label={t`User name`}>
+                    <Input.Wrapper label={<Trans>User name</Trans>}>
                        <Box>{profile?.name}</Box>
                    </Input.Wrapper>
                    <Input.Wrapper
-                        label={t`OPML export`}
-                        description={t`Export your subscriptions and categories as an OPML file that can be imported in other feed reading services`}
+                        label={<Trans>OPML export</Trans>}
+                        description={
+                            <Trans>
+                                Export your subscriptions and categories as an OPML file that can be imported in other feed reading services
+                            </Trans>
+                        }
                    >
                        <Box>
                            <Anchor href="rest/feed/export" download="commafeed_opml.xml">
@@ -91,20 +95,20 @@ export function ProfileSettings() {
                        </Box>
                    </Input.Wrapper>
                    <PasswordInput
-                        label={t`Current password`}
-                        description={t`Enter your current password to change profile settings`}
+                        label={<Trans>Current password</Trans>}
+                        description={<Trans>Enter your current password to change profile settings</Trans>}
                        required
                        {...form.getInputProps("currentPassword")}
                    />
-                    <TextInput type="email" label={t`E-mail`} {...form.getInputProps("email")} required />
+                    <TextInput type="email" label={<Trans>E-mail</Trans>} {...form.getInputProps("email")} required />
                    <PasswordInput
-                        label={t`New password`}
-                        description={t`Changing password will generate a new API key`}
+                        label={<Trans>New password</Trans>}
+                        description={<Trans>Changing password will generate a new API key</Trans>}
                        {...form.getInputProps("newPassword")}
                    />
-                    <PasswordInput label={t`Confirm password`} {...form.getInputProps("newPasswordConfirmation")} />
-                    <TextInput label={t`API key`} readOnly value={profile?.apiKey} />
-                    <Checkbox label={t`Generate new API key`} {...form.getInputProps("newApiKey", { type: "checkbox" })} />
+                    <PasswordInput label={<Trans>Confirm password</Trans>} {...form.getInputProps("newPasswordConfirmation")} />
+                    <TextInput label={<Trans>API key</Trans>} readOnly value={profile?.apiKey} />
+                    <Checkbox label={<Trans>Generate new API key</Trans>} {...form.getInputProps("newApiKey", { type: "checkbox" })} />

                    <Group>
                        <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
--- a/commafeed-client/src/components/sidebar/Tree.tsx
+++ b/commafeed-client/src/components/sidebar/Tree.tsx
@@ -1,4 +1,4 @@
-import { t } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import { Box, Stack } from "@mantine/core"
 import { Constants } from "app/constants"
 import {
@@ -27,6 +27,7 @@ const expandedIcon = <TbChevronDown size={16} />
 const collapsedIcon = <TbChevronRight size={16} />

 const errorThreshold = 9
+
 export function Tree() {
    const root = useAppSelector(state => state.tree.rootCategory)
    const source = useAppSelector(state => state.entries.source)
@@ -63,7 +64,7 @@ export function Tree() {
    const allCategoryNode = () => (
        <TreeNode
            id={Constants.categories.all.id}
-            name={t`All`}
+            name={<Trans>All</Trans>}
            icon={allIcon}
            unread={categoryUnreadCount(root)}
            selected={source.type === "category" && source.id === Constants.categories.all.id}
@@ -76,7 +77,7 @@ export function Tree() {
    const starredCategoryNode = () => (
        <TreeNode
            id={Constants.categories.starred.id}
-            name={t`Starred`}
+            name={<Trans>Starred</Trans>}
            icon={starredIcon}
            unread={0}
            selected={source.type === "category" && source.id === Constants.categories.starred.id}
--- a/commafeed-client/src/components/sidebar/TreeNode.tsx
+++ b/commafeed-client/src/components/sidebar/TreeNode.tsx
@@ -5,8 +5,8 @@ import { UnreadCount } from "./UnreadCount"

 interface TreeNodeProps {
    id: string
-    name: string
-    icon: ReactNode | string
+    name: ReactNode
+    icon: ReactNode
    unread: number
    selected: boolean
    expanded?: boolean
--- a/commafeed-client/src/components/sidebar/TreeSearch.tsx
+++ b/commafeed-client/src/components/sidebar/TreeSearch.tsx
@@ -1,4 +1,4 @@
-import { t } from "@lingui/macro"
+import { t, Trans } from "@lingui/macro"
 import { Box, Center, Kbd, TextInput } from "@mantine/core"
 import { openSpotlight, SpotlightAction, SpotlightProvider } from "@mantine/spotlight"
 import { redirectToFeed } from "app/slices/redirect"
@@ -11,6 +11,7 @@ import { TbSearch } from "react-icons/tb"
 export interface TreeSearchProps {
    feeds: Subscription[]
 }
+
 export function TreeSearch(props: TreeSearchProps) {
    const dispatch = useAppDispatch()

@@ -40,7 +41,7 @@ export function TreeSearch(props: TreeSearchProps) {
            searchIcon={searchIcon}
            searchPlaceholder={t`Search`}
            shortcut="ctrl+k"
-            nothingFoundMessage={t`Nothing found`}
+            nothingFoundMessage={<Trans>Nothing found</Trans>}
        >
            <TextInput
                placeholder={t`Search`}
--- a/commafeed-client/src/hooks/useViewMode.ts
+++ b/commafeed-client/src/hooks/useViewMode.ts
@@ -1,5 +1,5 @@
+import { ViewMode } from "app/types"
 import useLocalStorage from "use-local-storage"
-import { ViewMode } from "../app/types"

 export function useViewMode() {
    const [viewMode, setViewMode] = useLocalStorage<ViewMode>("view-mode", "detailed")
--- a/commafeed-client/src/i18n.ts
+++ b/commafeed-client/src/i18n.ts
@@ -29,37 +29,7 @@ import "dayjs/locale/sk"
 import "dayjs/locale/sv"
 import "dayjs/locale/tr"
 import "dayjs/locale/zh"
-import {
-    ar,
-    ca,
-    cs,
-    cy,
-    da,
-    de,
-    en,
-    es,
-    fa,
-    fi,
-    fr,
-    gl,
-    hu,
-    id,
-    it,
-    ja,
-    ko,
-    ms,
-    nb,
-    nl,
-    nn,
-    pl,
-    PluralCategory,
-    pt,
-    ru,
-    sk,
-    sv,
-    tr,
-    zh,
-} from "make-plural"
+
 import { useEffect } from "react"
 import { messages as arMessages } from "./locales/ar/messages"
 import { messages as caMessages } from "./locales/ca/messages"
@@ -94,48 +64,42 @@ interface Locale {
    key: string
    label: string
    messages: Messages
-    plurals?: (n: number | string, ord?: boolean) => PluralCategory
 }

 // add an object to the array to add a new locale
 // don't forget to also add it to the 'locales' array in .linguirc
 export const locales: Locale[] = [
-    { key: "ar", messages: arMessages, plurals: ar, label: "العربية" },
-    { key: "ca", messages: caMessages, plurals: ca, label: "Català" },
-    { key: "cs", messages: csMessages, plurals: cs, label: "Čeština" },
-    { key: "cy", messages: cyMessages, plurals: cy, label: "Cymraeg" },
-    { key: "da", messages: daMessages, plurals: da, label: "Danish" },
-    { key: "de", messages: deMessages, plurals: de, label: "Deutsch" },
-    { key: "en", messages: enMessages, plurals: en, label: "English" },
-    { key: "es", messages: esMessages, plurals: es, label: "Español" },
-    { key: "fa", messages: faMessages, plurals: fa, label: "فارسی" },
-    { key: "fi", messages: fiMessages, plurals: fi, label: "Suomi" },
-    { key: "fr", messages: frMessages, plurals: fr, label: "Français" },
-    { key: "gl", messages: glMessages, plurals: gl, label: "Galician" },
-    { key: "hu", messages: huMessages, plurals: hu, label: "Magyar" },
-    { key: "id", messages: idMessages, plurals: id, label: "Indonesian" },
-    { key: "it", messages: itMessages, plurals: it, label: "Italiano" },
-    { key: "ja", messages: jaMessages, plurals: ja, label: "日本語" },
-    { key: "ko", messages: koMessages, plurals: ko, label: "한국어" },
-    { key: "ms", messages: msMessages, plurals: ms, label: "Bahasa Malaysian" },
-    { key: "nb", messages: nbMessages, plurals: nb, label: "Norsk (bokmål)" },
-    { key: "nl", messages: nlMessages, plurals: nl, label: "Nederlands" },
-    { key: "nn", messages: nnMessages, plurals: nn, label: "Norsk (nynorsk)" },
-    { key: "pl", messages: plMessages, plurals: pl, label: "Polski" },
-    { key: "pt", messages: ptMessages, plurals: pt, label: "Português" },
-    { key: "ru", messages: ruMessages, plurals: ru, label: "Русский" },
-    { key: "sk", messages: skMessages, plurals: sk, label: "Slovenčina" },
-    { key: "sv", messages: svMessages, plurals: sv, label: "Svenska" },
-    { key: "tr", messages: trMessages, plurals: tr, label: "Türkçe" },
-    { key: "zh", messages: zhMessages, plurals: zh, label: "简体中文" },
+    { key: "ar", messages: arMessages, label: "العربية" },
+    { key: "ca", messages: caMessages, label: "Català" },
+    { key: "cs", messages: csMessages, label: "Čeština" },
+    { key: "cy", messages: cyMessages, label: "Cymraeg" },
+    { key: "da", messages: daMessages, label: "Danish" },
+    { key: "de", messages: deMessages, label: "Deutsch" },
+    { key: "en", messages: enMessages, label: "English" },
+    { key: "es", messages: esMessages, label: "Español" },
+    { key: "fa", messages: faMessages, label: "فارسی" },
+    { key: "fi", messages: fiMessages, label: "Suomi" },
+    { key: "fr", messages: frMessages, label: "Français" },
+    { key: "gl", messages: glMessages, label: "Galician" },
+    { key: "hu", messages: huMessages, label: "Magyar" },
+    { key: "id", messages: idMessages, label: "Indonesian" },
+    { key: "it", messages: itMessages, label: "Italiano" },
+    { key: "ja", messages: jaMessages, label: "日本語" },
+    { key: "ko", messages: koMessages, label: "한국어" },
+    { key: "ms", messages: msMessages, label: "Bahasa Malaysian" },
+    { key: "nb", messages: nbMessages, label: "Norsk (bokmål)" },
+    { key: "nl", messages: nlMessages, label: "Nederlands" },
+    { key: "nn", messages: nnMessages, label: "Norsk (nynorsk)" },
+    { key: "pl", messages: plMessages, label: "Polski" },
+    { key: "pt", messages: ptMessages, label: "Português" },
+    { key: "ru", messages: ruMessages, label: "Русский" },
+    { key: "sk", messages: skMessages, label: "Slovenčina" },
+    { key: "sv", messages: svMessages, label: "Svenska" },
+    { key: "tr", messages: trMessages, label: "Türkçe" },
+    { key: "zh", messages: zhMessages, label: "简体中文" },
 ]

 locales.forEach(l => {
-    i18n.loadLocaleData({
-        [l.key]: {
-            plurals: l.plurals,
-        },
-    })
    i18n.load({
        [l.key]: l.messages,
    })
--- a/commafeed-client/src/locales/ar/messages.po
+++ b/commafeed-client/src/locales/ar/messages.po
@@ -123,6 +123,7 @@ msgstr "ملحقات المستعرض"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr "السيطرة"
 msgid "Current password"
 msgstr "كلمة المرور الحالية"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "تاريخ الإنشاء"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/ca/messages.po
+++ b/commafeed-client/src/locales/ca/messages.po
@@ -123,6 +123,7 @@ msgstr "Extensions del navegador"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Contrasenya actual"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Data de creació"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/cs/messages.po
+++ b/commafeed-client/src/locales/cs/messages.po
@@ -123,6 +123,7 @@ msgstr "Rozšíření prohlížeče"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Aktuální heslo"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Datum vytvoření"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/cy/messages.po
+++ b/commafeed-client/src/locales/cy/messages.po
@@ -123,6 +123,7 @@ msgstr "Estyniadau porwr"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Cyfrinair presennol"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Dyddiad creu"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/da/messages.po
+++ b/commafeed-client/src/locales/da/messages.po
@@ -123,6 +123,7 @@ msgstr "Browserudvidelser"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Nuværende adgangskode"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Dato oprettet"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/de/messages.po
+++ b/commafeed-client/src/locales/de/messages.po
@@ -123,6 +123,7 @@ msgstr "Browsererweiterungen"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr "Strg"
 msgid "Current password"
 msgstr "Aktuelles Passwort"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Erstellungsdatum"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/en/messages.po
+++ b/commafeed-client/src/locales/en/messages.po
@@ -123,6 +123,7 @@ msgstr "Browser extentions"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr "Ctrl"
 msgid "Current password"
 msgstr "Current password"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr "Custom CSS rules that will be applied"
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr "Custom JS code that will be executed on page load"
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr "Custom code"
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Date created"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr "Right click"

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/es/messages.po
+++ b/commafeed-client/src/locales/es/messages.po
@@ -123,6 +123,7 @@ msgstr "Extensiones del navegador"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Contraseña actual"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Fecha de creación"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/fa/messages.po
+++ b/commafeed-client/src/locales/fa/messages.po
@@ -123,6 +123,7 @@ msgstr "گسترش مرورگر"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "رمز عبور فعلی"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "تاریخ ایجاد"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/fi/messages.po
+++ b/commafeed-client/src/locales/fi/messages.po
@@ -123,6 +123,7 @@ msgstr "Selaimen laajennukset"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Nykyinen salasana"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Luontipäivämäärä"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/fr/messages.po
+++ b/commafeed-client/src/locales/fr/messages.po
@@ -123,6 +123,7 @@ msgstr "Extensions pour navigateurs"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr "Ctrl"
 msgid "Current password"
 msgstr "Mot de passe actuel"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Date de création"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/gl/messages.po
+++ b/commafeed-client/src/locales/gl/messages.po
@@ -123,6 +123,7 @@ msgstr "Extensións do navegador"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Contrasinal actual"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Data de creación"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/hu/messages.po
+++ b/commafeed-client/src/locales/hu/messages.po
@@ -123,6 +123,7 @@ msgstr "Böngészőbővítések"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Jelenlegi jelszó"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Létrehozás dátuma"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/id/messages.po
+++ b/commafeed-client/src/locales/id/messages.po
@@ -123,6 +123,7 @@ msgstr "Ekstensi peramban"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Kata sandi saat ini"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Tanggal dibuat"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/it/messages.po
+++ b/commafeed-client/src/locales/it/messages.po
@@ -123,6 +123,7 @@ msgstr "Estensioni del browser"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr "ctrl"
 msgid "Current password"
 msgstr "Password attuale"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Data di creazione"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/ja/messages.po
+++ b/commafeed-client/src/locales/ja/messages.po
@@ -123,6 +123,7 @@ msgstr "ブラウザ拡張機能"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr "コントロール"
 msgid "Current password"
 msgstr "現在のパスワード"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "作成日"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/ko/messages.po
+++ b/commafeed-client/src/locales/ko/messages.po
@@ -123,6 +123,7 @@ msgstr "브라우저 확장"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr "컨트롤"
 msgid "Current password"
 msgstr "현재 비밀번호"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "생성 날짜"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/ms/messages.po
+++ b/commafeed-client/src/locales/ms/messages.po
@@ -123,6 +123,7 @@ msgstr "Peluasan penyemak imbas"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Kata laluan semasa"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Tarikh dibuat"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/nb/messages.po
+++ b/commafeed-client/src/locales/nb/messages.po
@@ -123,6 +123,7 @@ msgstr "Nettleserutvidelser"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Gjeldende passord"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Dato opprettet"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/nl/messages.po
+++ b/commafeed-client/src/locales/nl/messages.po
@@ -123,6 +123,7 @@ msgstr "Browserextensies"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Huidig wachtwoord"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Datum gemaakt"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/nn/messages.po
+++ b/commafeed-client/src/locales/nn/messages.po
@@ -123,6 +123,7 @@ msgstr "Nettleserutvidelser"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Gjeldende passord"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Dato opprettet"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/pl/messages.po
+++ b/commafeed-client/src/locales/pl/messages.po
@@ -123,6 +123,7 @@ msgstr "Rozszerzenia przeglądarki"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "aktualne hasło"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Data utworzenia"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/pt/messages.po
+++ b/commafeed-client/src/locales/pt/messages.po
@@ -123,6 +123,7 @@ msgstr "Extensões do navegador"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Senha atual"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Data de criação"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/ru/messages.po
+++ b/commafeed-client/src/locales/ru/messages.po
@@ -123,6 +123,7 @@ msgstr "Расширения браузера"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Текущий пароль"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Дата создания"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/sk/messages.po
+++ b/commafeed-client/src/locales/sk/messages.po
@@ -123,6 +123,7 @@ msgstr "Rozšírenia prehliadača"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Aktuálne heslo"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Dátum vytvorenia"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/sv/messages.po
+++ b/commafeed-client/src/locales/sv/messages.po
@@ -123,6 +123,7 @@ msgstr "Webbläsartillägg"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Aktuellt lösenord"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Datum skapat"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/tr/messages.po
+++ b/commafeed-client/src/locales/tr/messages.po
@@ -123,6 +123,7 @@ msgstr "Tarayıcı uzantıları"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr ""
 msgid "Current password"
 msgstr "Geçerli şifre"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Oluşturulma tarihi"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/locales/zh/messages.po
+++ b/commafeed-client/src/locales/zh/messages.po
@@ -123,6 +123,7 @@ msgstr "浏览器扩展"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -194,6 +195,18 @@ msgstr "控制"
 msgid "Current password"
 msgstr "当前密码"

+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
+msgstr ""
+
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "创建日期"
@@ -622,6 +635,7 @@ msgid "Right click"
 msgstr ""

 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
--- a/commafeed-client/src/pages/ErrorPage.tsx
+++ b/commafeed-client/src/pages/ErrorPage.tsx
@@ -13,7 +13,7 @@ const useStyles = createStyles(theme => ({
        fontWeight: "bold",
        fontSize: 120,
        lineHeight: 1,
-        marginBottom: theme.spacing.xl * 1.5,
+        marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
        color: theme.colors[theme.primaryColor][3],
    },

@@ -27,7 +27,7 @@ const useStyles = createStyles(theme => ({
        maxWidth: 540,
        margin: "auto",
        marginTop: theme.spacing.xl,
-        marginBottom: theme.spacing.xl * 1.5,
+        marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
    },
 }))

--- a/commafeed-client/src/pages/PageTitle.tsx
+++ b/commafeed-client/src/pages/PageTitle.tsx
@@ -1,5 +1,5 @@
 import { Center, Title } from "@mantine/core"
-import { Logo } from "../components/Logo"
+import { Logo } from "components/Logo"

 export function PageTitle() {
    return (
--- a/commafeed-client/src/pages/WelcomePage.tsx
+++ b/commafeed-client/src/pages/WelcomePage.tsx
@@ -1,18 +1,18 @@
-import { t } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import { Anchor, Box, Center, Container, Divider, Group, Image, Title, useMantineColorScheme } from "@mantine/core"
 import { useMediaQuery } from "@mantine/hooks"
+import { client } from "app/client"
+import { Constants } from "app/constants"
+import { redirectToLogin, redirectToRegistration, redirectToRootCategory } from "app/slices/redirect"
+import { useAppDispatch, useAppSelector } from "app/store"
 import welcome_page_dark from "assets/welcome_page_dark.png"
 import welcome_page_light from "assets/welcome_page_light.png"
+import { ActionButton } from "components/ActionButtton"
+import { ButtonToolbar } from "components/ButtonToolbar"
 import { useAsyncCallback } from "react-async-hook"
 import { SiGithub, TbKey, TbUserPlus } from "react-icons/all"
 import { SiTwitter } from "react-icons/si"
 import { TbClock, TbMoon, TbSun } from "react-icons/tb"
-import { client } from "../app/client"
-import { Constants } from "../app/constants"
-import { redirectToLogin, redirectToRegistration, redirectToRootCategory } from "../app/slices/redirect"
-import { useAppDispatch, useAppSelector } from "../app/store"
-import { ActionButton } from "../components/ActionButtton"
-import { ButtonToolbar } from "../components/ButtonToolbar"
 import { PageTitle } from "./PageTitle"

 export function WelcomePage() {
@@ -38,7 +38,7 @@ export function WelcomePage() {
 }

 function Header() {
-    const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint}px)`)
+    const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint})`)

    if (mobile) {
        return (
@@ -76,7 +76,7 @@ function Buttons() {
        <ButtonToolbar>
            {serverInfos?.demoAccountEnabled && (
                <ActionButton
-                    label={t`Try the demo!`}
+                    label={<Trans>Try the demo!</Trans>}
                    icon={<TbClock size={iconSize} />}
                    variant="outline"
                    onClick={() => login.execute({ name: "demo", password: "demo" })}
@@ -84,7 +84,7 @@ function Buttons() {
                />
            )}
            <ActionButton
-                label={t`Log in`}
+                label={<Trans>Log in</Trans>}
                icon={<TbKey size={iconSize} />}
                variant="outline"
                onClick={() => dispatch(redirectToLogin())}
@@ -92,7 +92,7 @@ function Buttons() {
            />
            {serverInfos?.allowRegistrations && (
                <ActionButton
-                    label={t`Sign up`}
+                    label={<Trans>Sign up</Trans>}
                    icon={<TbUserPlus size={iconSize} />}
                    variant="filled"
                    onClick={() => dispatch(redirectToRegistration())}
--- a/commafeed-client/src/pages/admin/AdminUsersPage.tsx
+++ b/commafeed-client/src/pages/admin/AdminUsersPage.tsx
@@ -1,4 +1,4 @@
-import { t, Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import { ActionIcon, Box, Code, Container, Group, Table, Text, Title, useMantineTheme } from "@mantine/core"
 import { closeAllModals, openConfirmModal, openModal } from "@mantine/modals"
 import { client, errorToStrings } from "app/client"
@@ -7,6 +7,7 @@ import { UserEdit } from "components/admin/UserEdit"
 import { Alert } from "components/Alert"
 import { Loader } from "components/Loader"
 import { RelativeDate } from "components/RelativeDate"
+import { ReactNode } from "react"
 import { useAsync, useAsyncCallback } from "react-async-hook"
 import { TbCheck, TbPencil, TbPlus, TbTrash, TbX } from "react-icons/tb"

@@ -26,7 +27,7 @@ export function AdminUsersPage() {
        },
    })

-    const openUserEditModal = (title: string, user?: UserModel) => {
+    const openUserEditModal = (title: ReactNode, user?: UserModel) => {
        openModal({
            title,
            children: (
@@ -45,7 +46,7 @@ export function AdminUsersPage() {
    const openUserDeleteModal = (user: UserModel) => {
        const userName = user.name
        openConfirmModal({
-            title: t`Delete user`,
+            title: <Trans>Delete user</Trans>,
            children: (
                <Text size="sm">
                    <Trans>
@@ -53,7 +54,7 @@ export function AdminUsersPage() {
                    </Trans>
                </Text>
            ),
-            labels: { confirm: t`Confirm`, cancel: t`Cancel` },
+            labels: { confirm: <Trans>Confirm</Trans>, cancel: <Trans>Cancel</Trans> },
            confirmProps: { color: "red" },
            onConfirm: () => deleteUser.execute({ id: user.id }),
        })
@@ -65,7 +66,7 @@ export function AdminUsersPage() {
            <Title order={3} mb="md">
                <Group>
                    <Trans>Manage users</Trans>
-                    <ActionIcon color={theme.primaryColor} onClick={() => openUserEditModal(t`Add user`)}>
+                    <ActionIcon color={theme.primaryColor} onClick={() => openUserEditModal(<Trans>Add user</Trans>)}>
                        <TbPlus size={20} />
                    </ActionIcon>
                </Group>
@@ -126,7 +127,7 @@ export function AdminUsersPage() {
                            </td>
                            <td>
                                <Group>
-                                    <ActionIcon color={theme.primaryColor} onClick={() => openUserEditModal(t`Edit user`, u)}>
+                                    <ActionIcon color={theme.primaryColor} onClick={() => openUserEditModal(<Trans>Edit user</Trans>, u)}>
                                        <TbPencil size={18} />
                                    </ActionIcon>
                                    <ActionIcon
--- a/commafeed-client/src/pages/app/AboutPage.tsx
+++ b/commafeed-client/src/pages/app/AboutPage.tsx
@@ -15,7 +15,7 @@ const useStyles = createStyles(() => ({
    },
 }))

-function Section(props: { title: string; icon: React.ReactNode; children: React.ReactNode }) {
+function Section(props: { title: React.ReactNode; icon: React.ReactNode; children: React.ReactNode }) {
    const { classes } = useStyles()
    return (
        <Box my="xl">
@@ -38,7 +38,7 @@ function NextUnreadBookmarklet() {

    return (
        <Box>
-            <CategorySelect value={categoryId} onChange={c => c && setCategoryId(c)} withAll description={t`Category`} />
+            <CategorySelect value={categoryId} onChange={c => c && setCategoryId(c)} withAll description={<Trans>Category</Trans>} />
            <NativeSelect
                data={[
                    { value: "desc", label: t`Newest first` },
@@ -46,7 +46,7 @@ function NextUnreadBookmarklet() {
                ]}
                value={order}
                onChange={e => setOrder(e.target.value)}
-                description={t`Order`}
+                description={<Trans>Order</Trans>}
            />
            <Trans>Drag link to bookmark bar</Trans>
            <span> </span>
@@ -58,6 +58,7 @@ function NextUnreadBookmarklet() {
 }

 const bitcoinAddress = <Code>{Constants.bitcoinWalletAddress}</Code>
+
 export function AboutPage() {
    const version = useAppSelector(state => state.server.serverInfos?.version)
    const revision = useAppSelector(state => state.server.serverInfos?.gitCommit)
@@ -65,7 +66,7 @@ export function AboutPage() {
    return (
        <Container size="xl">
            <SimpleGrid cols={2} breakpoints={[{ maxWidth: Constants.layout.mobileBreakpoint, cols: 1 }]}>
-                <Section title={t`About`} icon={<TbHelp size={24} />}>
+                <Section title={<Trans>About</Trans>} icon={<TbHelp size={24} />}>
                    <Box>
                        <Trans>
                            CommaFeed version {version} ({revision})
@@ -119,7 +120,7 @@ export function AboutPage() {
                        <Trans>For those of you who prefer bitcoin, here is the address: {bitcoinAddress}</Trans>
                    </Box>
                </Section>
-                <Section title={t`Goodies`} icon={<TbPuzzle size={24} />}>
+                <Section title={<Trans>Goodies</Trans>} icon={<TbPuzzle size={24} />}>
                    <List>
                        <List.Item>
                            <Trans>Browser extentions</Trans>
@@ -161,10 +162,10 @@ export function AboutPage() {
                        </List.Item>
                    </List>
                </Section>
-                <Section title={t`Keyboard shortcuts`} icon={<TbKeyboard size={24} />}>
+                <Section title={<Trans>Keyboard shortcuts</Trans>} icon={<TbKeyboard size={24} />}>
                    <KeyboardShortcutsHelp />
                </Section>
-                <Section title={t`REST API`} icon={<TbRocket size={24} />}>
+                <Section title={<Trans>REST API</Trans>} icon={<TbRocket size={24} />}>
                    <Anchor onClick={() => dispatch(redirectToApiDocumentation())}>
                        <Trans>Go to the API documentation.</Trans>
                    </Anchor>
--- a/commafeed-client/src/pages/app/AddPage.tsx
+++ b/commafeed-client/src/pages/app/AddPage.tsx
@@ -10,13 +10,13 @@ export function AddPage() {
        <Container size="sm" px={0}>
            <Tabs defaultValue="subscribe">
                <Tabs.List>
-                    <Tabs.Tab value="subscribe" icon={<TbRss />}>
+                    <Tabs.Tab value="subscribe" icon={<TbRss size={16} />}>
                        <Trans>Subscribe</Trans>
                    </Tabs.Tab>
-                    <Tabs.Tab value="category" icon={<TbFolderPlus />}>
+                    <Tabs.Tab value="category" icon={<TbFolderPlus size={16} />}>
                        <Trans>Add category</Trans>
                    </Tabs.Tab>
-                    <Tabs.Tab value="opml" icon={<TbFileImport />}>
+                    <Tabs.Tab value="opml" icon={<TbFileImport size={16} />}>
                        <Trans>OPML</Trans>
                    </Tabs.Tab>
                </Tabs.List>
--- a/commafeed-client/src/pages/app/CategoryDetailsPage.tsx
+++ b/commafeed-client/src/pages/app/CategoryDetailsPage.tsx
@@ -1,4 +1,4 @@
-import { t, Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import { Anchor, Box, Button, Code, Container, Divider, Group, Input, NumberInput, Stack, Text, TextInput, Title } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { openConfirmModal } from "@mantine/modals"
@@ -48,7 +48,7 @@ export function CategoryDetailsPage() {
    const openDeleteCategoryModal = () => {
        const categoryName = category?.name
        return openConfirmModal({
-            title: t`Delete Category`,
+            title: <Trans>Delete Category</Trans>,
            children: (
                <Text size="sm">
                    <Trans>
@@ -56,7 +56,7 @@ export function CategoryDetailsPage() {
                    </Trans>
                </Text>
            ),
-            labels: { confirm: t`Confirm`, cancel: t`Cancel` },
+            labels: { confirm: <Trans>Confirm</Trans>, cancel: <Trans>Cancel</Trans> },
            confirmProps: { color: "red" },
            onConfirm: () => deleteCategory.execute({ id: +id }),
        })
@@ -91,7 +91,7 @@ export function CategoryDetailsPage() {
            <form onSubmit={form.onSubmit(modifyCategory.execute)}>
                <Stack>
                    <Title order={3}>{category.name}</Title>
-                    <Input.Wrapper label={t`Generated feed url`}>
+                    <Input.Wrapper label={<Trans>Generated feed url</Trans>}>
                        <Box>
                            {apiKey && (
                                <Anchor
@@ -108,14 +108,14 @@ export function CategoryDetailsPage() {

                    {editable && (
                        <>
-                            <TextInput label={t`Name`} {...form.getInputProps("name")} required />
+                            <TextInput label={<Trans>Name</Trans>} {...form.getInputProps("name")} required />
                            <CategorySelect
-                                label={t`Parent Category`}
+                                label={<Trans>Parent Category</Trans>}
                                {...form.getInputProps("parentId")}
                                clearable
                                withoutCategoryIds={[id]}
                            />
-                            <NumberInput label={t`Position`} {...form.getInputProps("position")} required min={0} />
+                            <NumberInput label={<Trans>Position</Trans>} {...form.getInputProps("position")} required min={0} />
                        </>
                    )}

--- a/commafeed-client/src/pages/app/FeedDetailsPage.tsx
+++ b/commafeed-client/src/pages/app/FeedDetailsPage.tsx
@@ -1,4 +1,4 @@
-import { t, Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import { Anchor, Box, Button, Code, Container, Divider, Group, Input, NumberInput, Stack, Text, TextInput, Title } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { openConfirmModal } from "@mantine/modals"
@@ -47,6 +47,7 @@ function FilteringExpressionDescription() {
        </div>
    )
 }
+
 export function FeedDetailsPage() {
    const { id } = useParams()
    if (!id) throw Error("id required")
@@ -75,7 +76,7 @@ export function FeedDetailsPage() {
    const openUnsubscribeModal = () => {
        const feedName = feed?.name
        return openConfirmModal({
-            title: t`Unsubscribe`,
+            title: <Trans>Unsubscribe</Trans>,
            children: (
                <Text size="sm">
                    <Trans>
@@ -83,7 +84,7 @@ export function FeedDetailsPage() {
                    </Trans>
                </Text>
            ),
-            labels: { confirm: t`Confirm`, cancel: t`Cancel` },
+            labels: { confirm: <Trans>Confirm</Trans>, cancel: <Trans>Cancel</Trans> },
            confirmProps: { color: "red" },
            onConfirm: () => unsubscribe.execute({ id: +id }),
        })
@@ -112,34 +113,34 @@ export function FeedDetailsPage() {
            <form onSubmit={form.onSubmit(modifyFeed.execute)}>
                <Stack>
                    <Title order={3}>{feed.name}</Title>
-                    <Input.Wrapper label={t`Feed URL`}>
+                    <Input.Wrapper label={<Trans>Feed URL</Trans>}>
                        <Box>
                            <Anchor href={feed.feedUrl} target="_blank" rel="noreferrer">
                                {feed.feedUrl}
                            </Anchor>
                        </Box>
                    </Input.Wrapper>
-                    <Input.Wrapper label={t`Website`}>
+                    <Input.Wrapper label={<Trans>Website</Trans>}>
                        <Box>
                            <Anchor href={feed.feedLink} target="_blank" rel="noreferrer">
                                {feed.feedLink}
                            </Anchor>
                        </Box>
                    </Input.Wrapper>
-                    <Input.Wrapper label={t`Last refresh`}>
+                    <Input.Wrapper label={<Trans>Last refresh</Trans>}>
                        <Box>
                            <RelativeDate date={feed.lastRefresh} />
                        </Box>
                    </Input.Wrapper>
-                    <Input.Wrapper label={t`Last refresh message`}>
-                        <Box>{feed.message ?? t`N/A`}</Box>
+                    <Input.Wrapper label={<Trans>Last refresh message</Trans>}>
+                        <Box>{feed.message ?? <Trans>N/A</Trans>}</Box>
                    </Input.Wrapper>
-                    <Input.Wrapper label={t`Next refresh`}>
+                    <Input.Wrapper label={<Trans>Next refresh</Trans>}>
                        <Box>
                            <RelativeDate date={feed.nextRefresh} />
                        </Box>
                    </Input.Wrapper>
-                    <Input.Wrapper label={t`Generated feed url`}>
+                    <Input.Wrapper label={<Trans>Generated feed url</Trans>}>
                        <Box>
                            {apiKey && (
                                <Anchor href={`rest/feed/entriesAsFeed?id=${feed.id}&apiKey=${apiKey}`} target="_blank" rel="noreferrer">
@@ -150,11 +151,11 @@ export function FeedDetailsPage() {
                        </Box>
                    </Input.Wrapper>

-                    <TextInput label={t`Name`} {...form.getInputProps("name")} required />
-                    <CategorySelect label={t`Category`} {...form.getInputProps("categoryId")} clearable />
-                    <NumberInput label={t`Position`} {...form.getInputProps("position")} required min={0} />
+                    <TextInput label={<Trans>Name</Trans>} {...form.getInputProps("name")} required />
+                    <CategorySelect label={<Trans>Category</Trans>} {...form.getInputProps("categoryId")} clearable />
+                    <NumberInput label={<Trans>Position</Trans>} {...form.getInputProps("position")} required min={0} />
                    <TextInput
-                        label={t`Filtering expression`}
+                        label={<Trans>Filtering expression</Trans>}
                        description={<FilteringExpressionDescription />}
                        {...form.getInputProps("filter")}
                    />
--- a/commafeed-client/src/pages/app/FeedEntriesPage.tsx
+++ b/commafeed-client/src/pages/app/FeedEntriesPage.tsx
@@ -1,5 +1,5 @@
-import { t, Trans } from "@lingui/macro"
-import { ActionIcon, Anchor, Box, Center, Divider, Group, Title, useMantineTheme } from "@mantine/core"
+import { Trans } from "@lingui/macro"
+import { ActionIcon, Box, Center, createStyles, Divider, Group, Title, useMantineTheme } from "@mantine/core"
 import { useViewportSize } from "@mantine/hooks"
 import { Constants } from "app/constants"
 import { EntrySourceType, loadEntries } from "app/slices/entries"
@@ -27,7 +27,15 @@ interface FeedEntriesPageProps {
    sourceType: EntrySourceType
 }

+const useStyles = createStyles(() => ({
+    sourceWebsiteLink: {
+        color: "inherit",
+        textDecoration: "none",
+    },
+}))
+
 export function FeedEntriesPage(props: FeedEntriesPageProps) {
+    const { classes } = useStyles()
    const location = useLocation()
    const { id = Constants.categories.all.id } = useParams()
    const viewport = useViewportSize()
@@ -63,9 +71,9 @@ export function FeedEntriesPage(props: FeedEntriesPageProps) {
        <Box mb={viewport.height - Constants.layout.headerHeight - 210}>
            <Group spacing="xl">
                {sourceWebsiteUrl && (
-                    <Anchor href={sourceWebsiteUrl} target="_blank" rel="noreferrer" variant="text">
+                    <a href={sourceWebsiteUrl} target="_blank" rel="noreferrer" className={classes.sourceWebsiteLink}>
                        <Title order={3}>{sourceLabel}</Title>
-                    </Anchor>
+                    </a>
                )}
                {!sourceWebsiteUrl && <Title order={3}>{sourceLabel}</Title>}
                {sourceLabel && (
@@ -77,7 +85,7 @@ export function FeedEntriesPage(props: FeedEntriesPageProps) {

            <FeedEntries />

-            {!hasMore && <Divider my="xl" label={t`No more entries`} labelPosition="center" />}
+            {!hasMore && <Divider my="xl" label={<Trans>No more entries</Trans>} labelPosition="center" />}
        </Box>
    )
 }
--- a/commafeed-client/src/pages/app/Layout.tsx
+++ b/commafeed-client/src/pages/app/Layout.tsx
@@ -1,6 +1,5 @@
 import {
    ActionIcon,
-    Anchor,
    AppShell,
    Box,
    Burger,
@@ -37,13 +36,13 @@ interface LayoutProps {
 }

 const sidebarPadding = DEFAULT_THEME.spacing.xs
-const sidebarRightBorderWidth = 1
+const sidebarRightBorderWidth = "1px"

 const useStyles = createStyles(theme => ({
    sidebarContent: {
-        maxWidth: Constants.layout.sidebarWidth - sidebarPadding * 2 - sidebarRightBorderWidth,
+        maxWidth: `calc(${Constants.layout.sidebarWidth} - ${sidebarPadding} * 2 - ${sidebarRightBorderWidth})`,
        [theme.fn.smallerThan(Constants.layout.mobileBreakpoint)]: {
-            maxWidth: `calc(100vw - ${sidebarPadding * 2 + sidebarRightBorderWidth}px)`,
+            maxWidth: `calc(100vw - ${sidebarPadding} * 2 - ${sidebarRightBorderWidth})`,
        },
    },
    mainContentWrapper: {
@@ -68,14 +67,12 @@ const useStyles = createStyles(theme => ({
 function LogoAndTitle() {
    const dispatch = useAppDispatch()
    return (
-        <Anchor onClick={() => dispatch(redirectToRootCategory())} variant="text">
-            <Center inline>
-                <Logo size={24} />
-                <Title order={3} pl="md">
-                    CommaFeed
-                </Title>
-            </Center>
-        </Anchor>
+        <Center inline onClick={() => dispatch(redirectToRootCategory())} style={{ cursor: "pointer" }}>
+            <Logo size={24} />
+            <Title order={3} pl="md">
+                CommaFeed
+            </Title>
+        </Center>
    )
 }

@@ -122,6 +119,7 @@ export default function Layout({ sidebar, header }: LayoutProps) {
            classNames={{ main: classes.mainContentWrapper }}
            navbar={
                <Navbar
+                    id="sidebar"
                    p={sidebarPadding}
                    hiddenBreakpoint={Constants.layout.mobileBreakpoint}
                    hidden={!mobileMenuOpen}
@@ -133,7 +131,7 @@ export default function Layout({ sidebar, header }: LayoutProps) {
                </Navbar>
            }
            header={
-                <Header height={Constants.layout.headerHeight} p="md">
+                <Header id="header" height={Constants.layout.headerHeight} p="md">
                    <OnMobile>
                        {mobileMenuOpen && (
                            <Group position="apart">
@@ -171,7 +169,7 @@ export default function Layout({ sidebar, header }: LayoutProps) {
                    if (ref) ref.id = Constants.dom.mainScrollAreaId
                }}
            >
-                <Box className={classes.mainContent}>
+                <Box id="content" className={classes.mainContent}>
                    <Suspense fallback={<Loader />}>
                        <Outlet />
                    </Suspense>
--- a/commafeed-client/src/pages/app/SettingsPage.tsx
+++ b/commafeed-client/src/pages/app/SettingsPage.tsx
@@ -1,18 +1,22 @@
 import { Trans } from "@lingui/macro"
 import { Container, Tabs } from "@mantine/core"
+import { CustomCodeSettings } from "components/settings/CustomCodeSettings"
 import { DisplaySettings } from "components/settings/DisplaySettings"
 import { ProfileSettings } from "components/settings/ProfileSettings"
-import { TbPhoto, TbUser } from "react-icons/tb"
+import { TbCode, TbPhoto, TbUser } from "react-icons/tb"

 export function SettingsPage() {
    return (
        <Container size="sm" px={0}>
            <Tabs defaultValue="display">
                <Tabs.List>
-                    <Tabs.Tab value="display" icon={<TbPhoto />}>
+                    <Tabs.Tab value="display" icon={<TbPhoto size={16} />}>
                        <Trans>Display</Trans>
                    </Tabs.Tab>
-                    <Tabs.Tab value="profile" icon={<TbUser />}>
+                    <Tabs.Tab value="customCode" icon={<TbCode size={16} />}>
+                        <Trans>Custom code</Trans>
+                    </Tabs.Tab>
+                    <Tabs.Tab value="profile" icon={<TbUser size={16} />}>
                        <Trans>Profile</Trans>
                    </Tabs.Tab>
                </Tabs.List>
@@ -21,6 +25,10 @@ export function SettingsPage() {
                    <DisplaySettings />
                </Tabs.Panel>

+                <Tabs.Panel value="customCode" pt="xl">
+                    <CustomCodeSettings />
+                </Tabs.Panel>
+
                <Tabs.Panel value="profile" pt="xl">
                    <ProfileSettings />
                </Tabs.Panel>
--- a/commafeed-client/src/pages/app/TagDetailsPage.tsx
+++ b/commafeed-client/src/pages/app/TagDetailsPage.tsx
@@ -1,4 +1,4 @@
-import { t, Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"

 import { Anchor, Box, Button, Container, Group, Input, Stack, Title } from "@mantine/core"
 import { Constants } from "app/constants"
@@ -16,7 +16,7 @@ export function TagDetailsPage() {
        <Container>
            <Stack>
                <Title order={3}>{id}</Title>
-                <Input.Wrapper label={t`Generated feed url`}>
+                <Input.Wrapper label={<Trans>Generated feed url</Trans>}>
                    <Box>
                        {apiKey && (
                            <Anchor
--- a/commafeed-client/src/pages/auth/LoginPage.tsx
+++ b/commafeed-client/src/pages/auth/LoginPage.tsx
@@ -42,15 +42,17 @@ export function LoginPage() {
                <form onSubmit={form.onSubmit(login.execute)}>
                    <Stack>
                        <TextInput
-                            label={t`User Name or E-mail`}
+                            label={<Trans>User Name or E-mail</Trans>}
                            placeholder={t`User Name or E-mail`}
                            {...form.getInputProps("name")}
-                            description={serverInfos?.demoAccountEnabled ? t`Try out CommaFeed with the demo account: demo/demo` : ""}
+                            description={
+                                serverInfos?.demoAccountEnabled ? <Trans>Try out CommaFeed with the demo account: demo/demo</Trans> : ""
+                            }
                            size="md"
                            required
                        />
                        <PasswordInput
-                            label={t`Password`}
+                            label={<Trans>Password</Trans>}
                            placeholder={t`Password`}
                            {...form.getInputProps("password")}
                            size="md"
--- a/commafeed-client/src/pages/auth/PasswordRecoveryPage.tsx
+++ b/commafeed-client/src/pages/auth/PasswordRecoveryPage.tsx
@@ -53,7 +53,7 @@ export function PasswordRecoveryPage() {
                    <Stack>
                        <TextInput
                            type="email"
-                            label={t`E-mail`}
+                            label={<Trans>E-mail</Trans>}
                            placeholder={t`E-mail`}
                            {...form.getInputProps("email")}
                            size="md"
--- a/commafeed-client/src/pages/auth/RegistrationPage.tsx
+++ b/commafeed-client/src/pages/auth/RegistrationPage.tsx
@@ -53,14 +53,14 @@ export function RegistrationPage() {
                                <TextInput label="User Name" placeholder="User Name" {...form.getInputProps("name")} size="md" required />
                                <TextInput
                                    type="email"
-                                    label={t`E-mail address`}
+                                    label={<Trans>E-mail address</Trans>}
                                    placeholder={t`E-mail address`}
                                    {...form.getInputProps("email")}
                                    size="md"
                                    required
                                />
                                <PasswordInput
-                                    label={t`Password`}
+                                    label={<Trans>Password</Trans>}
                                    placeholder={t`Password`}
                                    {...form.getInputProps("password")}
                                    size="md"
--- a/commafeed-client/vite.config.ts
+++ b/commafeed-client/vite.config.ts
@@ -24,6 +24,8 @@ export default defineConfig({
            "/rest": "http://localhost:8083",
            "/ws": "ws://localhost:8083",
            "/swagger": "http://localhost:8083",
+            "/custom_css.css": "http://localhost:8083",
+            "/custom_js.js": "http://localhost:8083",
        },
    },
    build: {
--- a/commafeed-server/pom.xml
+++ b/commafeed-server/pom.xml
@@ -6,12 +6,15 @@
 	<parent>
 		<groupId>com.commafeed</groupId>
 		<artifactId>commafeed</artifactId>
-		<version>3.2.0</version>
+		<version>3.3.0</version>
 	</parent>
 	<artifactId>commafeed-server</artifactId>
 	<name>CommaFeed Server</name>

 	<properties>
+		<maven.compiler.source>1.8</maven.compiler.source>
+		<maven.compiler.target>1.8</maven.compiler.target>
+
 		<guice.version>5.1.0</guice.version>
 		<querydsl.version>4.4.0</querydsl.version>
 		<rome.version>2.1.0</rome.version>
@@ -42,6 +45,7 @@
 			<plugin>
 				<groupId>org.apache.maven.plugins</groupId>
 				<artifactId>maven-compiler-plugin</artifactId>
+				<version>3.10.1</version>
 				<configuration>
 					<parameters>true</parameters>
 				</configuration>
@@ -233,7 +237,7 @@
 		<dependency>
 			<groupId>com.commafeed</groupId>
 			<artifactId>commafeed-client</artifactId>
-			<version>3.2.0</version>
+			<version>3.3.0</version>
 		</dependency>

 		<dependency>
--- a/commafeed-server/src/main/java/com/commafeed/CommaFeedApplication.java
+++ b/commafeed-server/src/main/java/com/commafeed/CommaFeedApplication.java
@@ -43,6 +43,7 @@ import com.commafeed.frontend.resource.ServerREST;
 import com.commafeed.frontend.resource.UserREST;
 import com.commafeed.frontend.servlet.AnalyticsServlet;
 import com.commafeed.frontend.servlet.CustomCssServlet;
+import com.commafeed.frontend.servlet.CustomJsServlet;
 import com.commafeed.frontend.servlet.LogoutServlet;
 import com.commafeed.frontend.servlet.NextUnreadServlet;
 import com.commafeed.frontend.session.SessionHelperFactoryProvider;
@@ -173,6 +174,7 @@ public class CommaFeedApplication extends Application<CommaFeedConfiguration> {
 		environment.servlets().addServlet("next", injector.getInstance(NextUnreadServlet.class)).addMapping("/next");
 		environment.servlets().addServlet("logout", injector.getInstance(LogoutServlet.class)).addMapping("/logout");
 		environment.servlets().addServlet("customCss", injector.getInstance(CustomCssServlet.class)).addMapping("/custom_css.css");
+		environment.servlets().addServlet("customJs", injector.getInstance(CustomJsServlet.class)).addMapping("/custom_js.js");
 		environment.servlets().addServlet("analytics.js", injector.getInstance(AnalyticsServlet.class)).addMapping("/analytics.js");

 		// WebSocket endpoint
--- a/commafeed-server/src/main/java/com/commafeed/backend/model/UserSettings.java
+++ b/commafeed-server/src/main/java/com/commafeed/backend/model/UserSettings.java
@@ -46,24 +46,22 @@ public class UserSettings extends AbstractModel {
 	@Column(nullable = false)
 	private ReadingOrder readingOrder;

-	@Enumerated(EnumType.STRING)
-	@Column(nullable = false)
-	private ViewMode viewMode;
-
 	@Column(name = "user_lang", length = 4)
 	private String language;

 	private boolean showRead;
 	private boolean scrollMarks;

-	@Column(length = 32)
-	private String theme;
-
 	@Lob
 	@Column(length = Integer.MAX_VALUE)
 	@Type(type = "org.hibernate.type.TextType")
 	private String customCss;

+	@Lob
+	@Column(length = Integer.MAX_VALUE)
+	@Type(type = "org.hibernate.type.TextType")
+	private String customJs;
+
 	@Column(name = "scroll_speed")
 	private int scrollSpeed;

--- a/commafeed-server/src/main/java/com/commafeed/frontend/model/Settings.java
+++ b/commafeed-server/src/main/java/com/commafeed/frontend/model/Settings.java
@@ -20,21 +20,18 @@ public class Settings implements Serializable {
 	@ApiModelProperty(value = "user reads entries in ascending or descending order", allowableValues = "asc,desc", required = true)
 	private String readingOrder;

-	@ApiModelProperty(value = "user viewing mode, either title-only or expande view", allowableValues = "title,expanded", required = true)
-	private String viewMode;
-
 	@ApiModelProperty(value = "user wants category and feeds with no unread entries shown", required = true)
 	private boolean showRead;

 	@ApiModelProperty(value = "In expanded view, scroll through entries mark them as read", required = true)
 	private boolean scrollMarks;

-	@ApiModelProperty(value = "user's selected theme")
-	private String theme;
-
 	@ApiModelProperty(value = "user's custom css for the website")
 	private String customCss;

+	@ApiModelProperty(value = "user's custom js for the website")
+	private String customJs;
+
 	@ApiModelProperty(value = "user's preferred scroll speed when navigating between entries", required = true)
 	private int scrollSpeed;

--- a/commafeed-server/src/main/java/com/commafeed/frontend/resource/UserREST.java
+++ b/commafeed-server/src/main/java/com/commafeed/frontend/resource/UserREST.java
@@ -39,7 +39,6 @@ import com.commafeed.backend.model.UserRole.Role;
 import com.commafeed.backend.model.UserSettings;
 import com.commafeed.backend.model.UserSettings.ReadingMode;
 import com.commafeed.backend.model.UserSettings.ReadingOrder;
-import com.commafeed.backend.model.UserSettings.ViewMode;
 import com.commafeed.backend.service.MailService;
 import com.commafeed.backend.service.PasswordEncryptionService;
 import com.commafeed.backend.service.UserService;
@@ -88,7 +87,6 @@ public class UserREST {
 		if (settings != null) {
 			s.setReadingMode(settings.getReadingMode().name());
 			s.setReadingOrder(settings.getReadingOrder().name());
-			s.setViewMode(settings.getViewMode().name());
 			s.setShowRead(settings.isShowRead());

 			s.getSharingSettings().setEmail(settings.isEmail());
@@ -101,16 +99,14 @@ public class UserREST {
 			s.getSharingSettings().setBuffer(settings.isBuffer());

 			s.setScrollMarks(settings.isScrollMarks());
-			s.setTheme(settings.getTheme());
 			s.setCustomCss(settings.getCustomCss());
+			s.setCustomJs(settings.getCustomJs());
 			s.setLanguage(settings.getLanguage());
 			s.setScrollSpeed(settings.getScrollSpeed());
 		} else {
 			s.setReadingMode(ReadingMode.unread.name());
 			s.setReadingOrder(ReadingOrder.desc.name());
-			s.setViewMode(ViewMode.title.name());
 			s.setShowRead(true);
-			s.setTheme("default");

 			s.getSharingSettings().setEmail(true);
 			s.getSharingSettings().setGmail(true);
@@ -144,10 +140,9 @@ public class UserREST {
 		s.setReadingMode(ReadingMode.valueOf(settings.getReadingMode()));
 		s.setReadingOrder(ReadingOrder.valueOf(settings.getReadingOrder()));
 		s.setShowRead(settings.isShowRead());
-		s.setViewMode(ViewMode.valueOf(settings.getViewMode()));
 		s.setScrollMarks(settings.isScrollMarks());
-		s.setTheme(settings.getTheme());
 		s.setCustomCss(settings.getCustomCss());
+		s.setCustomJs(settings.getCustomJs());
 		s.setLanguage(settings.getLanguage());
 		s.setScrollSpeed(settings.getScrollSpeed());

--- a/commafeed-server/src/main/java/com/commafeed/frontend/servlet/AbstractCustomCodeServlet.java
+++ b/commafeed-server/src/main/java/com/commafeed/frontend/servlet/AbstractCustomCodeServlet.java
@@ -0,0 +1,51 @@
+package com.commafeed.frontend.servlet;
+
+import java.io.IOException;
+import java.util.Optional;
+
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+
+import org.hibernate.SessionFactory;
+
+import com.commafeed.backend.dao.UnitOfWork;
+import com.commafeed.backend.dao.UserSettingsDAO;
+import com.commafeed.backend.model.User;
+import com.commafeed.backend.model.UserSettings;
+import com.commafeed.frontend.session.SessionHelper;
+
+import lombok.RequiredArgsConstructor;
+
+@RequiredArgsConstructor
+abstract class AbstractCustomCodeServlet extends HttpServlet {
+
+	private final SessionFactory sessionFactory;
+	private final UserSettingsDAO userSettingsDAO;
+
+	@Override
+	protected final void doGet(final HttpServletRequest req, HttpServletResponse resp) throws IOException {
+		resp.setContentType(getMimeType());
+
+		final Optional<User> user = new SessionHelper(req).getLoggedInUser();
+		if (!user.isPresent()) {
+			return;
+		}
+
+		UserSettings settings = UnitOfWork.call(sessionFactory, () -> userSettingsDAO.findByUser(user.get()));
+		if (settings == null) {
+			return;
+		}
+
+		String customCode = getCustomCode(settings);
+		if (customCode == null) {
+			return;
+		}
+
+		resp.getWriter().write(customCode);
+	}
+
+	protected abstract String getMimeType();
+
+	protected abstract String getCustomCode(UserSettings settings);
+}
--- a/commafeed-server/src/main/java/com/commafeed/frontend/servlet/CustomCssServlet.java
+++ b/commafeed-server/src/main/java/com/commafeed/frontend/servlet/CustomCssServlet.java
@@ -1,47 +1,27 @@
 package com.commafeed.frontend.servlet;

-import java.io.IOException;
-import java.util.Optional;
-
 import javax.inject.Inject;
-import javax.inject.Singleton;
-import javax.servlet.ServletException;
-import javax.servlet.http.HttpServlet;
-import javax.servlet.http.HttpServletRequest;
-import javax.servlet.http.HttpServletResponse;

 import org.hibernate.SessionFactory;

-import com.commafeed.backend.dao.UnitOfWork;
 import com.commafeed.backend.dao.UserSettingsDAO;
-import com.commafeed.backend.model.User;
 import com.commafeed.backend.model.UserSettings;
-import com.commafeed.frontend.session.SessionHelper;

-import lombok.RequiredArgsConstructor;
+public class CustomCssServlet extends AbstractCustomCodeServlet {

-@SuppressWarnings("serial")
-@RequiredArgsConstructor(onConstructor = @__({ @Inject }))
-@Singleton
-public class CustomCssServlet extends HttpServlet {
-
-	private final SessionFactory sessionFactory;
-	private final UserSettingsDAO userSettingsDAO;
+	@Inject
+	public CustomCssServlet(SessionFactory sessionFactory, UserSettingsDAO userSettingsDAO) {
+		super(sessionFactory, userSettingsDAO);
+	}

 	@Override
-	protected void doGet(final HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
-		resp.setContentType("text/css");
-
-		final Optional<User> user = new SessionHelper(req).getLoggedInUser();
-		if (!user.isPresent()) {
-			return;
-		}
-
-		UserSettings settings = UnitOfWork.call(sessionFactory, () -> userSettingsDAO.findByUser(user.get()));
-		if (settings == null || settings.getCustomCss() == null) {
-			return;
-		}
-
-		resp.getWriter().write(settings.getCustomCss());
+	protected String getMimeType() {
+		return "text/css";
 	}
+
+	@Override
+	protected String getCustomCode(UserSettings settings) {
+		return settings.getCustomCss();
+	}
+
 }
--- a/commafeed-server/src/main/java/com/commafeed/frontend/servlet/CustomJsServlet.java
+++ b/commafeed-server/src/main/java/com/commafeed/frontend/servlet/CustomJsServlet.java
@@ -0,0 +1,29 @@
+package com.commafeed.frontend.servlet;
+
+import javax.inject.Inject;
+import javax.inject.Singleton;
+
+import org.hibernate.SessionFactory;
+
+import com.commafeed.backend.dao.UserSettingsDAO;
+import com.commafeed.backend.model.UserSettings;
+
+@Singleton
+public class CustomJsServlet extends AbstractCustomCodeServlet {
+
+	@Inject
+	public CustomJsServlet(SessionFactory sessionFactory, UserSettingsDAO userSettingsDAO) {
+		super(sessionFactory, userSettingsDAO);
+	}
+
+	@Override
+	protected String getMimeType() {
+		return "application/javascript";
+	}
+
+	@Override
+	protected String getCustomCode(UserSettings settings) {
+		return settings.getCustomJs();
+	}
+
+}
--- a/commafeed-server/src/main/resources/changelogs/db.changelog-3.2.xml
+++ b/commafeed-server/src/main/resources/changelogs/db.changelog-3.2.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<databaseChangeLog xmlns="http://www.liquibase.org/xml/ns/dbchangelog"
+				   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+				   xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-3.1.xsd">
+
+
+	<changeSet id="delete-removed-settings" author="athou">
+		<dropColumn tableName="USERSETTINGS" columnName="theme" />
+		<dropColumn tableName="USERSETTINGS" columnName="viewMode" />
+	</changeSet>
+
+	<changeSet id="add-customjs-column" author="athou">
+		<addColumn tableName="USERSETTINGS">
+			<column name="customJs" type="CLOB" />
+		</addColumn>
+	</changeSet>
+
+</databaseChangeLog>
--- a/commafeed-server/src/main/resources/migrations.xml
+++ b/commafeed-server/src/main/resources/migrations.xml
@@ -1,21 +1,22 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <databaseChangeLog xmlns="http://www.liquibase.org/xml/ns/dbchangelog"
-	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-	xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-3.1.xsd">
-	
-	<property name="blob_type" value="bytea" dbms="postgresql"/>
-	<property name="blob_type" value="blob" dbms="h2" />
-	<property name="blob_type" value="blob" dbms="mysql,mariadb" />
-	<property name="blob_type" value="blob" dbms="mssql" />
+				   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+				   xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-3.1.xsd">
+
+	<property name="blob_type" value="bytea" dbms="postgresql"/>
+	<property name="blob_type" value="blob" dbms="h2"/>
+	<property name="blob_type" value="blob" dbms="mysql,mariadb"/>
+	<property name="blob_type" value="blob" dbms="mssql"/>
+
+	<include file="changelogs/db.changelog-1.0.xml"/>
+	<include file="changelogs/db.changelog-1.1.xml"/>
+	<include file="changelogs/db.changelog-1.2.xml"/>
+	<include file="changelogs/db.changelog-1.3.xml"/>
+	<include file="changelogs/db.changelog-1.4.xml"/>
+	<include file="changelogs/db.changelog-1.5.xml"/>
+	<include file="changelogs/db.changelog-2.1.xml"/>
+	<include file="changelogs/db.changelog-2.2.xml"/>
+	<include file="changelogs/db.changelog-2.6.xml"/>
+	<include file="changelogs/db.changelog-3.2.xml"/>

-	<include file="changelogs/db.changelog-1.0.xml" />
-	<include file="changelogs/db.changelog-1.1.xml" />
-	<include file="changelogs/db.changelog-1.2.xml" />
-	<include file="changelogs/db.changelog-1.3.xml" />
-	<include file="changelogs/db.changelog-1.4.xml" />
-	<include file="changelogs/db.changelog-1.5.xml" />
-	<include file="changelogs/db.changelog-2.1.xml" />
-	<include file="changelogs/db.changelog-2.2.xml" />
-	<include file="changelogs/db.changelog-2.6.xml" />
-	
 </databaseChangeLog> 
--- a/pom.xml
+++ b/pom.xml
@@ -5,40 +5,14 @@

 	<groupId>com.commafeed</groupId>
 	<artifactId>commafeed</artifactId>
-	<version>3.2.0</version>
+	<version>3.3.0</version>
 	<name>CommaFeed</name>
 	<packaging>pom</packaging>

 	<properties>
 		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
-		<maven.compiler.source>1.8</maven.compiler.source>
-		<maven.compiler.target>1.8</maven.compiler.target>
 	</properties>

-	<profiles>
-		<profile>
-			<id>only-eclipse</id>
-			<activation>
-				<property>
-					<name>m2e.version</name>
-				</property>
-			</activation>
-			<build>
-				<directory>target-ide</directory>
-			</build>
-		</profile>
-	</profiles>
-
-	<build>
-		<plugins>
-			<plugin>
-				<groupId>org.apache.maven.plugins</groupId>
-				<artifactId>maven-compiler-plugin</artifactId>
-				<version>3.10.1</version>
-			</plugin>
-		</plugins>
-	</build>
-
 	<modules>
 		<module>commafeed-client</module>
 		<module>commafeed-server</module>
Author	SHA1	Message	Date
Athou	f858eed150	release 3.3.0	2023-05-10 08:34:09 +02:00
Athou	bbdd712b01	compiler is only needed in the java module	2023-05-09 14:45:19 +02:00
Athou	c0875971e9	no longer need to insert code between imports	2023-05-08 17:30:32 +02:00
Athou	0199ebb6c3	major mantine update	2023-05-08 17:30:32 +02:00
Athou	c5763e2f8f	update all dependencies	2023-05-08 13:42:16 +02:00
Athou	5338ec0c34	lingui major update	2023-05-08 13:38:27 +02:00
Athou	8b5735f521	use Trans as much as possible to ease lingui upgrade to 4.0	2023-05-08 12:51:51 +02:00
Athou	3d1a1cd033	add support for custom js code that will be executed on page load (#1032 )	2023-05-05 20:23:23 +02:00
Athou	b1b5eeb0e0	delete removed settings	2023-05-05 17:50:06 +02:00
Athou	49e37587f9	show alert on error	2023-05-05 14:56:53 +02:00
Athou	01102ae973	use absolute imports	2023-05-05 14:55:03 +02:00
Athou	e7931bf360	call reload() only once	2023-05-05 14:47:15 +02:00
Athou	d095e4b35a	restore custom css setting (#1024 )	2023-05-05 14:12:31 +02:00