release 3.3.1

.github/workflows/build.yml

@@ -40,19 +40,7 @@ jobs:
           name: commafeed.jar
           path: commafeed-server/target/commafeed.jar
 
-      - name: Create release
-        uses: softprops/action-gh-release@v1
-        if: ${{ matrix.java == '8' && github.ref_type == 'tag' }}
-        with:
-          name: CommaFeed ${{ github.ref_name }}
-          body: See changelog at https://github.com/Athou/commafeed/blob/master/CHANGELOG.md
-          draft: false
-          prerelease: false
-          files: |
-            commafeed-server/target/commafeed.jar
-            commafeed-server/config.yml.example
-
-          # Docker
+      # Docker
       - name: Login to Container Registry
         uses: docker/login-action@v2
         if: ${{ matrix.java == '8' }}
@@ -79,3 +67,23 @@ jobs:
           push: true
           platforms: linux/amd64,linux/arm/v7
           tags: athou/commafeed:master
+
+      # Create GitHub release after Docker image has been published
+      - name: Extract Changelog Entry
+        uses: mindsers/changelog-reader-action@v2
+        if: ${{ matrix.java == '8' && github.ref_type == 'tag' }}
+        id: changelog_reader
+        with:
+          version: ${{ github.ref_name }}
+
+      - name: Create GitHub release
+        uses: softprops/action-gh-release@v1
+        if: ${{ matrix.java == '8' && github.ref_type == 'tag' }}
+        with:
+          name: CommaFeed ${{ github.ref_name }}
+          body: ${{ steps.changelog_reader.outputs.changes }}
+          draft: false
+          prerelease: false
+          files: |
+            commafeed-server/target/commafeed.jar
+            commafeed-server/config.yml.example

CHANGELOG.md

@@ -1,8 +1,25 @@
-Changelog
-=========
+# Changelog
 
-3.1.0
------
+## [3.3.1]
+
+- fix long feed names not being shortened to respect tree max width
+
+## [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
+- only apply hover effect for unread entries (same as commafeed v2)
+- move notifications at the bottom of the screen
+- always use https for sharing urls
+- add support for redis ACLs
+- transition to google analytics v4
+
+## [3.1.0]
 
 - add an even more compact layout
 - restore hover effect from commafeed 2.x
@@ -11,8 +28,7 @@ Changelog
 - fix for the "Illegal attempt to associate a collection with two open sessions." error
 - feed fetching workflow is now orchestrated with rxjava, removing a lot of code
 
-3.0.1
------
+## [3.0.1]
 
 - allow env variable substitution in config.yml
     - e.g. having a custom config.yml file with `app.session.path=${SOME_ENV_VAR}` will substitute `SOME_ENV_VAR` with
@@ -20,16 +36,14 @@ Changelog
 - allow env variable prefixed with `CF_` to override config.yml properties
     - e.g. setting `CF_APP_ALLOWREGISTRATIONS=true` will set `app.allowRegistrations` to `true`
 
-3.0.0
------
+## [3.0.0]
 
 - complete overhaul of the UI
 - backend and frontend are now in separate maven modules
 - no changes to the api or the database
 - Docker images are now automatically built and available at https://hub.docker.com/r/athou/commafeed
 
-2.6.0
------
+## [2.6.0]
 
 - add support for media content as a backup for missing content (useful for youtube feeds)
 - correctly follow http error code 308 redirects
@@ -48,8 +62,7 @@ Changelog
 - add support for java17+ runtime
 - various security improvements
 
-2.5.0
------
+## [2.5.0]
 
 - unread count is now displayed in a favicon badge when supported
 - the user agent string for the bot fetching feeds is now configurable
@@ -57,8 +70,7 @@ Changelog
 - support for java9+ runtime
 - can now properly start from an empty postgresql database
 
-2.4.0
------
+## [2.4.0]
 
 - users were not able to change password or delete account
 - fix api key generation
@@ -69,16 +81,14 @@ Changelog
 - various internationalization fixes
 - security fixes
 
-2.3.0
------
+## [2.3.0]
 
 - dropwizard upgrade 0.9.1
 - feed enclosures are hidden if they already displayed in the content
 - fix youtube favicons
 - various internationalization fixes
 
-2.2.0
------
+## [2.2.0]
 
 - fix youtube and instagram favicon fetching
 - mark as read filter was lost when a feed was rearranged with drag&drop
@@ -86,8 +96,7 @@ Changelog
 - various performance and dependencies upgrades
 - java8 is now required
 
-2.1.0
------
+## [2.1.0]
 
 - dropwizard upgrade to 0.8.0
 - you have to remove the "app.contextPath" setting from your yml file, you can optionally use
@@ -99,16 +108,14 @@ Changelog
 - facebook feeds now show user favicon instead of facebook favicon
 - new dark theme 'nightsky'
 
-2.0.3
------
+## [2.0.3]
 
 - internet explorer ajax cache workaround
 - categories are now deletable again
 - openshift support is back
 - youtube feeds now show user favicon instead of youtube favicon
 
-2.0.2
------
+## [2.0.2]
 
 - api using the api key is now working again
 - context path is now configurable in config.yml (see app.contextPath in config.yml.example)
@@ -124,13 +131,11 @@ Changelog
 - added link to metrics on the admin settings page
 - Rome (rss library) upgrade to 1.5.0
 
-2.0.1
------
+## [2.0.1]
 
 - the redis pool no longer throws an exception when it is unable to aquire a new connection
 
-2.0.0
------
+## [2.0.0]
 
 - The backend has been completely rewritten using Dropwizard instead of TomEE, resulting in a lot less memory
   consumption and better overall performances.

commafeed-client/.linguirc

@@ -48,10 +48,5 @@
     "sourceLocale": "en",
     "fallbackLocales": {
         "default": "en"
-    },
-    "extractBabelOptions": {
-        "presets": [
-            "@babel/preset-typescript"
-        ]
     }
 }

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>

commafeed-client/package.json

@@ -17,66 +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-icons": "^4.7.1",
+    "react-ga4": "^2.1.0",
+    "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"
   }
 }

commafeed-client/pom.xml

@@ -5,7 +5,7 @@
 	<parent>
 		<groupId>com.commafeed</groupId>
 		<artifactId>commafeed</artifactId>
-		<version>3.1.0</version>
+		<version>3.3.1</version>
 	</parent>
 	<artifactId>commafeed-client</artifactId>
 	<name>CommaFeed Client</name>

commafeed-client/src/App.tsx

@@ -2,9 +2,8 @@ import { i18n } from "@lingui/core"
 import { I18nProvider } from "@lingui/react"
 import { ColorScheme, ColorSchemeProvider, MantineProvider } from "@mantine/core"
 import { useColorScheme } from "@mantine/hooks"
-import useLocalStorage from "use-local-storage"
 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"
@@ -27,9 +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 { HashRouter, Navigate, Route, Routes, useNavigate } from "react-router-dom"
+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"
 
 function Providers(props: { children: React.ReactNode }) {
     const preferredColorScheme = useColorScheme()
@@ -49,9 +51,8 @@ function Providers(props: { children: React.ReactNode }) {
                     }}
                 >
                     <ModalsProvider>
-                        <NotificationsProvider position="top-center" zIndex={9999}>
-                            <ErrorBoundary>{props.children}</ErrorBoundary>
-                        </NotificationsProvider>
+                        <Notifications position="bottom-right" zIndex={9999} />
+                        <ErrorBoundary>{props.children}</ErrorBoundary>
                     </ModalsProvider>
                 </MantineProvider>
             </ColorSchemeProvider>
@@ -66,6 +67,7 @@ function AppRoutes() {
     return (
         <Routes>
             <Route path="/" element={<Navigate to={`/app/category/${Constants.categories.all.id}`} replace />} />
+            <Route path="welcome" element={<WelcomePage />} />
             <Route path="login" element={<LoginPage />} />
             <Route path="register" element={<RegistrationPage />} />
             <Route path="passwordRecovery" element={<PasswordRecoveryPage />} />
@@ -111,6 +113,21 @@ function RedirectHandler() {
     return null
 }
 
+function GoogleAnalyticsHandler() {
+    const location = useLocation()
+    const googleAnalyticsCode = useAppSelector(state => state.server.serverInfos?.googleAnalyticsCode)
+
+    useEffect(() => {
+        if (googleAnalyticsCode) ReactGA.initialize(googleAnalyticsCode)
+    }, [googleAnalyticsCode])
+
+    useEffect(() => {
+        ReactGA.send({ hitType: "pageview", page: location.pathname })
+    }, [location])
+
+    return null
+}
+
 function FaviconHandler() {
     const root = useAppSelector(state => state.tree.rootCategory)
     useEffect(() => {
@@ -135,6 +152,7 @@ export function App() {
             <>
                 <FaviconHandler />
                 <HashRouter>
+                    <GoogleAnalyticsHandler />
                     <RedirectHandler />
                     <AppRoutes />
                 </HashRouter>

commafeed-client/src/app/client.ts

@@ -30,7 +30,9 @@ const axiosInstance = axios.create({ baseURL: "./rest", withCredentials: true })
 axiosInstance.interceptors.response.use(
     response => response,
     error => {
-        if (error.response.status === 401) window.location.hash = "/login"
+        if (error.response.status === 401 && error.response.data === "Credentials are required to access this resource.") {
+            window.location.hash = "/welcome"
+        }
         throw error
     }
 )

commafeed-client/src/app/constants.ts

@@ -54,13 +54,13 @@ const sharing: {
         label: "Twitter",
         icon: SiTwitter,
         color: "#1D9BF0",
-        url: (url, desc) => `http://twitter.com/share?text=${desc}&url=${url}`,
+        url: (url, desc) => `https://twitter.com/share?text=${desc}&url=${url}`,
     },
     tumblr: {
         label: "Tumblr",
         icon: SiTumblr,
         color: "#375672",
-        url: (url, desc) => `http://www.tumblr.com/share/link?url=${url}&name=${desc}`,
+        url: (url, desc) => `https://www.tumblr.com/share/link?url=${url}&name=${desc}`,
     },
     pocket: {
         label: "Pocket",

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)
     })

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
 }

commafeed-client/src/components/ActionButtton.tsx

@@ -1,12 +1,16 @@
 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 } from "react"
+import { forwardRef, MouseEventHandler, ReactNode } from "react"
 
 interface ActionButtonProps {
     className?: string
-    icon?: React.ReactNode
-    label?: string
-    onClick?: React.MouseEventHandler
+    icon?: ReactNode
+    label?: ReactNode
+    onClick?: MouseEventHandler
+    variant?: ActionIconProps["variant"] & ButtonProps["variant"]
+    showLabelOnMobile?: boolean
 }
 
 /**
@@ -14,13 +18,15 @@ interface ActionButtonProps {
  */
 export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((props: ActionButtonProps, ref) => {
     const theme = useMantineTheme()
-    const mobile = !useMediaQuery(`(min-width: ${theme.breakpoints.lg}px)`)
-    return mobile ? (
-        <ActionIcon ref={ref} color={theme.primaryColor} variant="subtle" className={props.className} onClick={props.onClick}>
+    const variant = props.variant ?? "subtle"
+    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}>
             {props.icon}
         </ActionIcon>
     ) : (
-        <Button ref={ref} variant="subtle" size="xs" className={props.className} leftIcon={props.icon} onClick={props.onClick}>
+        <Button ref={ref} variant={variant} size="xs" className={props.className} leftIcon={props.icon} onClick={props.onClick}>
             {props.label}
         </Button>
     )

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

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}>

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}

commafeed-client/src/components/content/FeedEntry.tsx

@@ -1,17 +1,17 @@
-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 { MantineNumberSize } from "@mantine/styles"
 import { FeedEntryBody } from "./FeedEntryBody"
 import { FeedEntryCompactHeader } from "./FeedEntryCompactHeader"
 import { FeedEntryContextMenu, useFeedEntryContextMenu } from "./FeedEntryContextMenu"
 import { FeedEntryFooter } from "./FeedEntryFooter"
 import { FeedEntryHeader } from "./FeedEntryHeader"
-import { useViewMode } from "../../hooks/useViewMode"
 
 interface FeedEntryProps {
     entry: Entry
@@ -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
 
@@ -34,7 +34,7 @@ const useStyles = createStyles((theme, props: FeedEntryProps & { viewMode?: View
     else if (props.viewMode === "cozy") mobileMarginY = 4
 
     let backgroundHoverColor = backgroundColor
-    if (!props.expanded) {
+    if (!props.expanded && !props.entry.read) {
         backgroundHoverColor = theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]
     }
 
@@ -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" }}>

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))}>

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>

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>

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"

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>

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>

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)

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,
                             })

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>
+        </>
+    )
+}

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 => (

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())}>

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}

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

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`}

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")

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,
     })

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 "تاريخ الإنشاء"
@@ -414,6 +427,7 @@ msgstr "تحميل العلامات ..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "تسجيل الدخول"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "إظهار تعليمات اختصار لوحة المفاتيح"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "قم بالتسجيل"
 
@@ -761,6 +777,10 @@ msgstr "تبديل قراءة حالة الإدخال الحالي"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "جرب CommaFeed باستخدام الحساب التجريبي: تجريبي / تجريبي"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "غير مقروءة"

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ó"
@@ -414,6 +427,7 @@ msgstr "Carregant les etiquetes..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Inicia sessió"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Mostra l'ajuda de la drecera del teclat"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Inscriu-te"
 
@@ -761,6 +777,10 @@ msgstr "Canvia l'estat de lectura de l'entrada actual"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Proveu CommaFeed amb el compte de demostració: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Sense llegir"

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í"
@@ -414,6 +427,7 @@ msgstr "Načítání značek..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Přihlaste se"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Zobrazit nápovědu ke klávesovým zkratkám"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Zaregistrujte se"
 
@@ -761,6 +777,10 @@ msgstr "Přepne stav čtení aktuálního záznamu"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Vyzkoušejte CommaFeed s demo účtem: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Nepřečteno"

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"
@@ -414,6 +427,7 @@ msgstr "Wrthi'n llwytho tagiau..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Mewngofnodi"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Dangos cymorth llwybr byr bysellfwrdd"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Cofrestrwch"
 
@@ -761,6 +777,10 @@ msgstr "Toglo statws darllen y cofnod cyfredol"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Rhowch gynnig ar CommaFeed gyda'r cyfrif demo: demo / demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Heb ei ddarllen"

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"
@@ -414,6 +427,7 @@ msgstr "Indlæser tags..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Log ind"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Vis hjælp til tastaturgenveje"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Tilmeld dig"
 
@@ -761,6 +777,10 @@ msgstr "Skift læsestatus for den aktuelle post"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Prøv CommaFeed med demokontoen: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Ulæst"

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"
@@ -414,6 +427,7 @@ msgstr "Tags werden geladen..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Einloggen"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Tastenkürzel-Hilfe anzeigen"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Melden Sie sich an"
 
@@ -761,6 +777,10 @@ msgstr "Lesestatus des aktuellen Eintrags umschalten"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Testen Sie CommaFeed mit dem Demokonto: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Ungelesen"

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"
@@ -414,6 +427,7 @@ msgstr "Loading tags..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Log in"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Show keyboard shortcut help"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Sign up"
 
@@ -761,6 +777,10 @@ msgstr "Toggle read status of current entry"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Try out CommaFeed with the demo account: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr "Try the demo!"
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Unread"

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"
@@ -414,6 +427,7 @@ msgstr "Cargando etiquetas..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Iniciar sesión"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Mostrar ayuda de atajo de teclado"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Registrarse"
 
@@ -761,6 +777,10 @@ msgstr "Alternar estado de lectura de la entrada actual"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Pruebe CommaFeed con la cuenta demo: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "No leído"

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 "تاریخ ایجاد"
@@ -414,6 +427,7 @@ msgstr "بارگیری برچسب ها..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "وارد شوید"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "نمایش راهنمایی میانبر صفحه کلید"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "ثبت نام کنید"
 
@@ -761,6 +777,10 @@ msgstr "وضعیت خواندن ورودی فعلی را تغییر دهید"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "CommaFeed را با حساب آزمایشی امتحان کنید: دمو/دمو"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "خوانده نشده"

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ä"
@@ -414,6 +427,7 @@ msgstr "Ladataan tunnisteita..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Kirjaudu sisään"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Näytä pikanäppäimen ohje"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Rekisteröidy"
 
@@ -761,6 +777,10 @@ msgstr "Vaihda nykyisen merkinnän lukutila"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Kokeile CommaFeediä demotilillä: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Lukematon"

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"
@@ -414,6 +427,7 @@ msgstr "Chargement des tags ..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Connexion"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Montrer les raccourcis clavier"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Créer un compte"
 
@@ -761,6 +777,10 @@ msgstr "Marquer l'entrée actuelle comme lue/non lue"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Essayez CommaFeed avec le compte de démonstration : demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Non lu"

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"
@@ -414,6 +427,7 @@ msgstr "Cargando etiquetas..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Iniciar sesión"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Mostrar axuda do atallo do teclado"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Rexístrese"
 
@@ -761,6 +777,10 @@ msgstr "alternar o estado de lectura da entrada actual"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Proba CommaFeed coa conta de demostración: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Sen ler"

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"
@@ -414,6 +427,7 @@ msgstr "Címkék betöltése..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Jelentkezzen be"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "A billentyűparancsok súgójának megjelenítése"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Regisztráljon"
 
@@ -761,6 +777,10 @@ msgstr "Az aktuális bejegyzés olvasási állapotának váltása"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Próbálja ki a CommaFeed-et a demo fiókkal: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Olvasatlan"

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"
@@ -414,6 +427,7 @@ msgstr "Memuat tag..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Masuk"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Tampilkan bantuan pintasan keyboard"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Daftar"
 
@@ -761,6 +777,10 @@ msgstr "Beralih status baca entri saat ini"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Cobalah CommaFeed dengan akun demo: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Belum Dibaca"

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"
@@ -414,6 +427,7 @@ msgstr "Caricamento tag..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Accedi"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Mostra la guida alle scorciatoie da tastiera"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Iscriviti"
 
@@ -761,6 +777,10 @@ msgstr "Commuta lo stato di lettura della voce corrente"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Prova CommaFeed con il conto demo: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Non letto"

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 "作成日"
@@ -414,6 +427,7 @@ msgstr "タグを読み込んでいます..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "ログイン"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "キーボード ショートカットのヘルプを表示"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "サインアップ"
 
@@ -761,6 +777,10 @@ msgstr "現在のエントリの読み取りステータスを切り替えます
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "デモアカウントで CommaFeed を試す: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "未読"

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 "생성 날짜"
@@ -414,6 +427,7 @@ msgstr "태그 로드 중..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "로그인"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "키보드 단축키 도움말 표시"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "가입"
 
@@ -761,6 +777,10 @@ msgstr "현재 항목의 읽기 상태 전환"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "데모 계정으로 CommaFeed를 사용해 보세요: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "읽지 않음"

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"
@@ -414,6 +427,7 @@ msgstr "Memuatkan tag..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Log masuk"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Tunjukkan bantuan pintasan papan kekunci"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Daftar"
 
@@ -761,6 +777,10 @@ msgstr "Togol status bacaan entri semasa"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Cuba CommaFeed dengan akaun demo: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Belum dibaca"

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"
@@ -414,6 +427,7 @@ msgstr "Laster tagger..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Logg inn"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Vis hurtigtasthjelp"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Meld deg på"
 
@@ -761,6 +777,10 @@ msgstr "Veksle lesestatus for gjeldende oppføring"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Prøv CommaFeed med demokontoen: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Ulest"

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"
@@ -414,6 +427,7 @@ msgstr "Tags laden..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Inloggen"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Toon hulp bij sneltoetsen"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Aanmelden"
 
@@ -761,6 +777,10 @@ msgstr "Toggle leesstatus van huidige invoer"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Probeer CommaFeed uit met het demo-account: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Ongelezen"

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"
@@ -414,6 +427,7 @@ msgstr "Laster tagger..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Logg inn"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Vis hurtigtasthjelp"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Meld deg på"
 
@@ -761,6 +777,10 @@ msgstr "Veksle lesestatus for gjeldende oppføring"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Prøv CommaFeed med demokontoen: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Ulest"

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"
@@ -414,6 +427,7 @@ msgstr "Ładowanie tagów..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Zaloguj się"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Pokaż pomoc dotyczącą skrótów klawiaturowych"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Zarejestruj się"
 
@@ -761,6 +777,10 @@ msgstr "Przełącz stan odczytu bieżącego wpisu"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Wypróbuj CommaFeed z kontem demo: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Nieprzeczytane"

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"
@@ -414,6 +427,7 @@ msgstr "Carregando tags..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Entrar"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Mostrar ajuda de atalho de teclado"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Inscreva-se"
 
@@ -761,6 +777,10 @@ msgstr "Alternar o status de leitura da entrada atual"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Experimente o CommaFeed com a conta demo: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Não lido"

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 "Дата создания"
@@ -414,6 +427,7 @@ msgstr "Загрузка тегов..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Войти"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Показать справку по сочетаниям клавиш."
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Зарегистрироваться"
 
@@ -761,6 +777,10 @@ msgstr "Переключить статус чтения текущей запи
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Попробуйте CommaFeed на демо-счете: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "непрочитано"

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"
@@ -414,6 +427,7 @@ msgstr "Načítavam značky..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Prihláste sa"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Zobraziť pomoc s klávesovými skratkami"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Zaregistrujte sa"
 
@@ -761,6 +777,10 @@ msgstr "Prepne stav čítania aktuálneho záznamu"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Vyskúšajte CommaFeed s demo účtom: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Neprečítané"

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"
@@ -414,6 +427,7 @@ msgstr "Laddar taggar..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Logga in"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Visa kortkommandohjälp"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Anmäl dig"
 
@@ -761,6 +777,10 @@ msgstr "Växla lässtatus för aktuell post"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Prova CommaFeed med demokontot: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Oläst"

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"
@@ -414,6 +427,7 @@ msgstr "Etiketler yükleniyor..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Giriş"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "Klavye kısayolu yardımını göster"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Kaydolun"
 
@@ -761,6 +777,10 @@ msgstr "Geçerli girişin okuma durumunu değiştir"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "CommaFeed'i demo hesabıyla deneyin: demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "Okunmadı"

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 "创建日期"
@@ -414,6 +427,7 @@ msgstr "正在加载标签..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "登录"
 
@@ -621,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
@@ -689,6 +704,7 @@ msgstr "显示键盘快捷键帮助"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "注册"
 
@@ -761,6 +777,10 @@ msgstr "切换当前条目的读取状态"
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "使用演示帐户试用 CommaFeed：demo/demo"
 
+#: src/pages/WelcomePage.tsx
+msgid "Try the demo!"
+msgstr ""
+
 #: src/components/header/Header.tsx
 msgid "Unread"
 msgstr "未读"

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)`,
     },
 }))
 

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 (

commafeed-client/src/pages/WelcomePage.tsx

@@ -0,0 +1,126 @@
+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 { PageTitle } from "./PageTitle"
+
+export function WelcomePage() {
+    const { colorScheme } = useMantineColorScheme()
+    const image = colorScheme === "light" ? welcome_page_light : welcome_page_dark
+    return (
+        <Container>
+            <Header />
+
+            <Center my="xl">
+                <Title order={3}>Bloat-free feed reader</Title>
+            </Center>
+
+            <Divider my="xl" />
+
+            <Image src={image} />
+
+            <Divider my="xl" />
+
+            <Footer />
+        </Container>
+    )
+}
+
+function Header() {
+    const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint})`)
+
+    if (mobile) {
+        return (
+            <>
+                <PageTitle />
+                <Center>
+                    <Buttons />
+                </Center>
+            </>
+        )
+    }
+
+    return (
+        <Group position="apart">
+            <PageTitle />
+            <Buttons />
+        </Group>
+    )
+}
+
+function Buttons() {
+    const iconSize = 18
+    const serverInfos = useAppSelector(state => state.server.serverInfos)
+    const { colorScheme, toggleColorScheme } = useMantineColorScheme()
+
+    const dispatch = useAppDispatch()
+
+    const login = useAsyncCallback(client.user.login, {
+        onSuccess: () => {
+            dispatch(redirectToRootCategory())
+        },
+    })
+
+    return (
+        <ButtonToolbar>
+            {serverInfos?.demoAccountEnabled && (
+                <ActionButton
+                    label={<Trans>Try the demo!</Trans>}
+                    icon={<TbClock size={iconSize} />}
+                    variant="outline"
+                    onClick={() => login.execute({ name: "demo", password: "demo" })}
+                    showLabelOnMobile
+                />
+            )}
+            <ActionButton
+                label={<Trans>Log in</Trans>}
+                icon={<TbKey size={iconSize} />}
+                variant="outline"
+                onClick={() => dispatch(redirectToLogin())}
+                showLabelOnMobile
+            />
+            {serverInfos?.allowRegistrations && (
+                <ActionButton
+                    label={<Trans>Sign up</Trans>}
+                    icon={<TbUserPlus size={iconSize} />}
+                    variant="filled"
+                    onClick={() => dispatch(redirectToRegistration())}
+                    showLabelOnMobile
+                />
+            )}
+
+            <ActionButton
+                icon={colorScheme === "dark" ? <TbSun size={18} /> : <TbMoon size={iconSize} />}
+                onClick={() => toggleColorScheme()}
+            />
+        </ButtonToolbar>
+    )
+}
+
+function Footer() {
+    return (
+        <Box>
+            <Group>
+                <span>© CommaFeed</span>
+                <span> - </span>
+                <Anchor variant="text" href="https://github.com/Athou/commafeed/" target="_blank" rel="noreferrer">
+                    <SiGithub />
+                </Anchor>
+                <Anchor variant="text" href="https://twitter.com/CommaFeed" target="_blank" rel="noreferrer">
+                    <SiTwitter />
+                </Anchor>
+            </Group>
+        </Box>
+    )
+}

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

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>

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>

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} />
                         </>
                     )}
 

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")}
                     />

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>
     )
 }

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}px - ${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>

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>

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

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"

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"

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"

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: {

commafeed-server/config.dev.yml

@@ -125,6 +125,8 @@ logging:
 redis:
   host: localhost
   port: 6379
+  # username is only required when using ACLs
+  username:
   password:
   timeout: 2000
   database: 0

commafeed-server/config.yml.example

@@ -130,6 +130,8 @@ logging:
 redis:
   host: localhost
   port: 6379
+  # username is only required when using ACLs
+  username:
   password: 
   timeout: 2000
   database: 0

commafeed-server/pom.xml

@@ -6,12 +6,15 @@
 	<parent>
 		<groupId>com.commafeed</groupId>
 		<artifactId>commafeed</artifactId>
-		<version>3.1.0</version>
+		<version>3.3.1</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>
@@ -114,7 +118,7 @@
 						<configuration>
 							<transformers>
 								<transformer
-										implementation="org.apache.maven.plugins.shade.resource.ServicesResourceTransformer"/>
+										implementation="org.apache.maven.plugins.shade.resource.ServicesResourceTransformer" />
 								<transformer
 										implementation="org.apache.maven.plugins.shade.resource.ManifestResourceTransformer">
 									<mainClass>com.commafeed.CommaFeedApplication</mainClass>
@@ -233,7 +237,7 @@
 		<dependency>
 			<groupId>com.commafeed</groupId>
 			<artifactId>commafeed-client</artifactId>
-			<version>3.1.0</version>
+			<version>3.3.1</version>
 		</dependency>
 
 		<dependency>
@@ -387,7 +391,7 @@
 		<dependency>
 			<groupId>redis.clients</groupId>
 			<artifactId>jedis</artifactId>
-			<version>2.7.2</version>
+			<version>4.3.2</version>
 		</dependency>
 		<dependency>
 			<groupId>com.sun.mail</groupId>
@@ -437,7 +441,7 @@
 			<version>0.4.0</version>
 		</dependency>
 		<dependency>
-			<groupId>com.google.gwt</groupId>
+			<groupId>org.gwtproject</groupId>
 			<artifactId>gwt-servlet</artifactId>
 			<version>2.10.0</version>
 		</dependency>
@@ -458,8 +462,8 @@
 			<artifactId>h2</artifactId>
 		</dependency>
 		<dependency>
-			<groupId>mysql</groupId>
-			<artifactId>mysql-connector-java</artifactId>
+			<groupId>com.mysql</groupId>
+			<artifactId>mysql-connector-j</artifactId>
 			<version>8.0.33</version>
 		</dependency>
 		<dependency>

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

commafeed-server/src/main/java/com/commafeed/backend/cache/RedisPoolFactory.java

@@ -1,27 +1,53 @@
 package com.commafeed.backend.cache;
 
-import org.apache.commons.lang3.StringUtils;
+import com.fasterxml.jackson.annotation.JsonProperty;
 
 import lombok.Getter;
+import lombok.extern.slf4j.Slf4j;
+import redis.clients.jedis.DefaultJedisClientConfig;
+import redis.clients.jedis.HostAndPort;
+import redis.clients.jedis.JedisClientConfig;
 import redis.clients.jedis.JedisPool;
 import redis.clients.jedis.JedisPoolConfig;
 import redis.clients.jedis.Protocol;
 
+@Slf4j
 @Getter
 public class RedisPoolFactory {
-	private final String host = "localhost";
-	private final int port = Protocol.DEFAULT_PORT;
-	private String password;
-	private final int timeout = Protocol.DEFAULT_TIMEOUT;
-	private final int database = Protocol.DEFAULT_DATABASE;
 
-	private final int maxTotal = 500;
+	@JsonProperty
+	private String host = "localhost";
+
+	@JsonProperty
+	private int port = Protocol.DEFAULT_PORT;
+
+	@JsonProperty
+	private String username;
+
+	@JsonProperty
+	private String password;
+
+	@JsonProperty
+	private int timeout = Protocol.DEFAULT_TIMEOUT;
+
+	@JsonProperty
+	private int database = Protocol.DEFAULT_DATABASE;
+
+	@JsonProperty
+	private int maxTotal = 500;
 
 	public JedisPool build() {
-		JedisPoolConfig config = new JedisPoolConfig();
-		config.setMaxTotal(maxTotal);
+		JedisPoolConfig poolConfig = new JedisPoolConfig();
+		poolConfig.setMaxTotal(maxTotal);
 
-		return new JedisPool(config, host, port, timeout, StringUtils.trimToNull(password), database);
+		JedisClientConfig clientConfig = DefaultJedisClientConfig.builder()
+				.user(username)
+				.password(password)
+				.timeoutMillis(timeout)
+				.database(database)
+				.build();
+
+		return new JedisPool(poolConfig, new HostAndPort(host, port), clientConfig);
 	}
 
 }

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;
 

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;
 

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());
 

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);
+}

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();
+	}
+
 }

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();
+	}
+
+}

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>

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> 

commafeed-server/src/test/java/com/commafeed/e2e/AuthentificationIT.java

@@ -15,12 +15,12 @@ import io.dropwizard.testing.junit5.DropwizardExtensionsSupport;
 @ExtendWith(DropwizardExtensionsSupport.class)
 class AuthentificationIT extends PlaywrightTestBase {
 
-	private static final DropwizardAppExtension<CommaFeedConfiguration> EXT = new DropwizardAppExtension<CommaFeedConfiguration>(
-			CommaFeedApplication.class, ResourceHelpers.resourceFilePath("config.test.yml"));
+	private static final DropwizardAppExtension<CommaFeedConfiguration> EXT = new DropwizardAppExtension<>(CommaFeedApplication.class,
+			ResourceHelpers.resourceFilePath("config.test.yml"));
 
 	@Test
 	void loginFail() {
-		page.navigate("http://localhost:" + EXT.getLocalPort());
+		page.navigate(getLoginPageUrl());
 		page.locator("[placeholder='User Name or E-mail']").fill("admin");
 		page.locator("[placeholder='Password']").fill("wrong_password");
 		page.locator("button:has-text('Log in')").click();
@@ -29,14 +29,14 @@ class AuthentificationIT extends PlaywrightTestBase {
 
 	@Test
 	void loginSuccess() {
-		page.navigate("http://localhost:" + EXT.getLocalPort());
+		page.navigate(getLoginPageUrl());
 		PlaywrightTestUtils.login(page);
 		PlaywrightAssertions.assertThat(page).hasURL("http://localhost:" + EXT.getLocalPort() + "/#/app/category/all");
 	}
 
 	@Test
 	void registerFailPasswordTooSimple() {
-		page.navigate("http://localhost:" + EXT.getLocalPort());
+		page.navigate(getLoginPageUrl());
 		page.locator("text=Sign up!").click();
 		page.locator("[placeholder='User Name']").fill("user");
 		page.locator("[placeholder='E-mail address']").fill("user@domain.com");
@@ -52,7 +52,7 @@ class AuthentificationIT extends PlaywrightTestBase {
 
 	@Test
 	void registerSuccess() {
-		page.navigate("http://localhost:" + EXT.getLocalPort());
+		page.navigate(getLoginPageUrl());
 		page.locator("text=Sign up!").click();
 		page.locator("[placeholder='User Name']").fill("user");
 		page.locator("[placeholder='E-mail address']").fill("user@domain.com");
@@ -60,4 +60,8 @@ class AuthentificationIT extends PlaywrightTestBase {
 		page.locator("button:has-text('Sign up')").click();
 		PlaywrightAssertions.assertThat(page).hasURL("http://localhost:" + EXT.getLocalPort() + "/#/app/category/all");
 	}
+
+	private String getLoginPageUrl() {
+		return "http://localhost:" + EXT.getLocalPort() + "/#/login";
+	}
 }

commafeed-server/src/test/java/com/commafeed/e2e/ReadingIT.java

@@ -43,6 +43,7 @@ class ReadingIT extends PlaywrightTestBase {
 	void scenario() {
 		// login
 		page.navigate("http://localhost:" + EXT.getLocalPort());
+		page.locator("button:has-text('Log in')").click();
 		PlaywrightTestUtils.login(page);
 		PlaywrightAssertions.assertThat(page.locator("text=You don't have any subscriptions yet.")).hasCount(1);
 

pom.xml

@@ -5,40 +5,14 @@
 
 	<groupId>com.commafeed</groupId>
 	<artifactId>commafeed</artifactId>
-	<version>3.1.0</version>
+	<version>3.3.1</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>