release 3.3.1

hopefully removes the error that happens sometimes:
Illegal attempt to associate a collection with two open sessions. Collection : [com.commafeed.backend.model.Feed.subscriptions]

.github/workflows/build.yml

@@ -10,10 +10,18 @@ jobs:
         java: [ "8", "11", "17" ]
 
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
+      # Setup
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
       - name: Set up Java
         uses: actions/setup-java@v3
         with:
@@ -21,10 +29,12 @@ jobs:
           distribution: "temurin"
           cache: "maven"
 
+      # Build
       - name: Build with Maven
         run: mvn --batch-mode --update-snapshots verify
 
-      - uses: actions/upload-artifact@v3
+      - name: Upload JAR
+        uses: actions/upload-artifact@v3
         if: ${{ matrix.java == '8' }}
         with:
           name: commafeed.jar
@@ -32,17 +42,48 @@ jobs:
 
       # Docker
       - name: Login to Container Registry
-        if: ${{ github.ref_type == 'tag' && matrix.java == '8' }}
         uses: docker/login-action@v2
+        if: ${{ matrix.java == '8' }}
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      - name: Docker build and push
+      - name: Docker build and push tag
         uses: docker/build-push-action@v4
+        if: ${{ matrix.java == '8' && github.ref_type == 'tag' }}
         with:
           context: .
-          push: ${{ github.ref_type == 'tag' && matrix.java == '8' }}
+          push: true
+          platforms: linux/amd64,linux/arm/v7
           tags: |
             athou/commafeed:latest
             athou/commafeed:${{ github.ref_name }}
+
+      - name: Docker build and push master
+        uses: docker/build-push-action@v4
+        if: ${{ matrix.java == '8' && github.ref_name == 'master' }}
+        with:
+          context: .
+          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

@@ -1,80 +0,0 @@
-v 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
-
-v 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
-  - fixed a bug that prevented users from deleting their account
-  - fixed a bug that made commafeed store entry contents multiple times
-  - fixed a bug that prevented the app to be used as an installed app on mobile devices if the context path of commafeed was not "/"
-  - fixed a bug that prevented entries from being "marked as read older than xxx" for a feed that was just added
-  - removed support for google+ and readability as those services no longer exist
-  - removed support for deploying on openshift
-  - removed alphabetical sorting of entries because of really poor performance (title cannot be indexed)
-  - improve performance for instances with the heavy load setting enabled by preventing CommaFeed from fetching feeds from users that did not log in for a long time
-  - various dependencies upgrades (notably dropwizard from 1.3 to 2.1)
-  - add support for mariadb
-  - add support for java17+ runtime
-  - various security improvements
-v 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
-  - feed parsing performance improvements
-  - support for java9+ runtime
-  - can now properly start from an empty postgresql database
-v 2.4.0
-  - users were not able to change password or delete account
-  - fix api key generation
-  - feed entries can now be sorted alphabetically
-  - fix facebook sharing
-  - fix layout on iOS
-  - postgresql driver update (fix for postgres 9.6)
-  - various internationalization fixes
-  - security fixes
-v 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
-v 2.2.0
-  - fix youtube and instagram favicon fetching
-  - mark as read filter was lost when a feed was rearranged with drag&drop
-  - feed entry categories are now displayed if available
-  - various performance and dependencies upgrades
-  - java8 is now required
-v 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 server.applicationContextPath instead
-  - new setting app.maxFeedCapacity for deleting old entries
-  - ability to set filtering expressions for subscriptions to automatically mark new entries as read based on title, content, author or url.
-  - ability to use !keyword or -keyword to exclude a keyword from a search query
-  - facebook feeds now show user favicon instead of facebook favicon
-  - new dark theme 'nightsky'
-v 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
-v 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)
-  - fix login on firefox when fields are autofilled by the browser
-  - fix scrolling of subscriptions list on mobile
-  - user is now logged in after registration
-  - fix link to documentation on home page and about page
-  - fields autocomplete is disabled on the profile page
-  - users are able to delete their account again
-  - chinese and malaysian translation files are now correctly loaded
-  - software version in user-agent when fetching feeds is no longer hardcoded
-  - admin settings page is now read only, settings are configured in config.yml 
-  - added link to metrics on the admin settings page
-  - Rome (rss library) upgrade to 1.5.0
-v 2.0.1
-  - the redis pool no longer throws an exception when it is unable to aquire a new connection
-v2.0.0
-  - The backend has been completely rewritten using Dropwizard instead of TomEE, resulting in a lot less memory consumption and better overall performances.
-    See the README on how to build CommaFeed from now on.
-  - CommaFeed should no longer fetch the same feed multiple times in a row  
-  - Users can use their username or email to log in  

CHANGELOG.md

@@ -0,0 +1,144 @@
+# Changelog
+
+## [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
+- view mode (compact, expanded, ...) is now stored on the device so you can have a different view mode on desktop and
+  mobile
+- 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]
+
+- 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
+      its value
+- 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]
+
+- 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]
+
+- add support for media content as a backup for missing content (useful for youtube feeds)
+- correctly follow http error code 308 redirects
+- fixed a bug that prevented users from deleting their account
+- fixed a bug that made commafeed store entry contents multiple times
+- fixed a bug that prevented the app to be used as an installed app on mobile devices if the context path of commafeed
+  was not "/"
+- fixed a bug that prevented entries from being "marked as read older than xxx" for a feed that was just added
+- removed support for google+ and readability as those services no longer exist
+- removed support for deploying on openshift
+- removed alphabetical sorting of entries because of really poor performance (title cannot be indexed)
+- improve performance for instances with the heavy load setting enabled by preventing CommaFeed from fetching feeds from
+  users that did not log in for a long time
+- various dependencies upgrades (notably dropwizard from 1.3 to 2.1)
+- add support for mariadb
+- add support for java17+ runtime
+- various security improvements
+
+## [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
+- feed parsing performance improvements
+- support for java9+ runtime
+- can now properly start from an empty postgresql database
+
+## [2.4.0]
+
+- users were not able to change password or delete account
+- fix api key generation
+- feed entries can now be sorted alphabetically
+- fix facebook sharing
+- fix layout on iOS
+- postgresql driver update (fix for postgres 9.6)
+- various internationalization fixes
+- security fixes
+
+## [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]
+
+- fix youtube and instagram favicon fetching
+- mark as read filter was lost when a feed was rearranged with drag&drop
+- feed entry categories are now displayed if available
+- various performance and dependencies upgrades
+- java8 is now required
+
+## [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
+  server.applicationContextPath instead
+- new setting app.maxFeedCapacity for deleting old entries
+- ability to set filtering expressions for subscriptions to automatically mark new entries as read based on title,
+  content, author or url.
+- ability to use !keyword or -keyword to exclude a keyword from a search query
+- facebook feeds now show user favicon instead of facebook favicon
+- new dark theme 'nightsky'
+
+## [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]
+
+- api using the api key is now working again
+- context path is now configurable in config.yml (see app.contextPath in config.yml.example)
+- fix login on firefox when fields are autofilled by the browser
+- fix scrolling of subscriptions list on mobile
+- user is now logged in after registration
+- fix link to documentation on home page and about page
+- fields autocomplete is disabled on the profile page
+- users are able to delete their account again
+- chinese and malaysian translation files are now correctly loaded
+- software version in user-agent when fetching feeds is no longer hardcoded
+- admin settings page is now read only, settings are configured in config.yml
+- added link to metrics on the admin settings page
+- Rome (rss library) upgrade to 1.5.0
+
+## [2.0.1]
+
+- the redis pool no longer throws an exception when it is unable to aquire a new connection
+
+## [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.
+  See the README on how to build CommaFeed from now on.
+- CommaFeed should no longer fetch the same feed multiple times in a row
+- Users can use their username or email to log in  

Dockerfile

@@ -1,12 +1,12 @@
-FROM openjdk:17-alpine
+FROM eclipse-temurin:17-jre
+
+EXPOSE 8082
 
 RUN mkdir -p /commafeed/data
 VOLUME /commafeed/data
-
 ENV CF_SESSION_PATH=/commafeed/data/sessions
 
-COPY commafeed-server/target/commafeed.jar .
 COPY commafeed-server/config.yml.example config.yml
+COPY commafeed-server/target/commafeed.jar .
 
-EXPOSE 8082
 CMD ["java", "-Djava.net.preferIPv4Stack=true", "-jar", "commafeed.jar", "server", "config.yml"]

README.md

@@ -1,9 +1,20 @@
 # CommaFeed
 
-Sources for [CommaFeed.com](http://www.commafeed.com/).
+Google Reader inspired self-hosted RSS reader, based on Dropwizard and React/TypeScript.
 
-Google Reader inspired self-hosted RSS reader, based on Dropwizard and AngularJS.
-CommaFeed is now considered feature-complete and is in maintenance mode.
+![preview](https://user-images.githubusercontent.com/1256795/184886828-1973f148-58a9-4c6d-9587-ee5e5d3cc2cb.png)
+
+## Features
+
+- 4 different layouts
+- Dark theme
+- Fully responsive
+- Keyboard shortcuts for almost everything
+- Support for right-to-left feeds
+- Translated in 25+ languages
+- Supports thousands of users and millions of feeds
+- OPML import/export
+- REST API
 
 ## Related open-source projects
 
@@ -23,9 +34,8 @@ Docker images are built automatically and are available at https://hub.docker.co
 ### Download precompiled package
 
     mkdir commafeed && cd commafeed
-    wget https://github.com/Athou/commafeed/releases/download/3.0.0/commafeed.jar
-    wget https://raw.githubusercontent.com/Athou/commafeed/3.0.0/commafeed-server/config.yml.example -O config.yml
-    vi config.yml
+    wget https://github.com/Athou/commafeed/releases/latest/download/commafeed.jar
+    wget https://github.com/Athou/commafeed/releases/latest/download/config.yml.example -O config.yml
     java -Djava.net.preferIPv4Stack=true -jar commafeed.jar server config.yml
 
 The server will listen on http://localhost:8082. The default
@@ -37,7 +47,6 @@ user is `admin` and the default password is `admin`.
     cd commafeed
     ./mvnw clean package
     cp commafeed-server/config.yml.example config.yml
-    vi config.yml
     java -Djava.net.preferIPv4Stack=true -jar commafeed-server/target/commafeed.jar server config.yml
 
 The server will listen on http://localhost:8082. The default
@@ -65,8 +74,6 @@ two-letters [ISO-639-1 language code](http://en.wikipedia.org/wiki/List_of_ISO_6
 
 - Open `commafeed-server` in your preferred Java IDE.
     - CommaFeed uses Lombok, you need the Lombok plugin for your IDE.
-    - If using Eclipse, Go to Window → Preferences → Maven → Annotation Processing and check "Automatically configure
-      JDT APT"
 - Start `CommaFeedApplication.java` in debug mode with `server config.dev.yml` as arguments
 
 ### Frontend
@@ -74,8 +81,9 @@ two-letters [ISO-639-1 language code](http://en.wikipedia.org/wiki/List_of_ISO_6
 - Open `commafeed-client` in your preferred JavaScript IDE.
 - run `npm install`
 - run `npm run dev`
-- the frontend server is now running at http://localhost:8082 and is proxying REST requests to the backend running on
-  port 8083
+
+The frontend server is now running at http://localhost:8082 and is proxying REST requests to the backend running on
+port 8083
 
 ## Copyright and license
 

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

@@ -1,80 +1,84 @@
 {
-    "name": "commafeed-client",
-    "private": true,
-    "version": "0.0.0",
-    "type": "module",
-    "scripts": {
-        "dev": "vite --host",
-        "dev:typescript": "tsc --watch",
-        "build": "npm run i18n:compile && tsc && vite build",
-        "preview": "vite preview",
-        "test": "vitest",
-        "test:ci": "vitest run",
-        "eslint": "eslint --ext=.js,.jsx,.ts,.tsx src",
-        "i18n": "npm run i18n:extract && npm run i18n:compile",
-        "i18n:extract": "lingui extract --clean",
-        "i18n:compile": "lingui compile --typescript",
-        "postinstall": "npm run i18n:compile"
-    },
-    "dependencies": {
-        "@emotion/react": "^11.10.5",
-        "@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",
-        "@reduxjs/toolkit": "^1.9.2",
-        "axios": "^1.3.2",
-        "dayjs": "^1.11.7",
-        "interweave": "^13.0.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-infinite-scroller": "^1.2.6",
-        "react-redux": "^8.0.5",
-        "react-router-dom": "^6.8.0",
-        "react-swipeable": "^7.0.0",
-        "swagger-ui-react": "^4.15.5",
-        "tinycon": "^0.6.8",
-        "websocket-heartbeat-js": "^1.1.1"
-    },
-    "devDependencies": {
-        "@lingui/cli": "^3.17.0",
-        "@types/eslint": "^8.21.0",
-        "@types/lodash": "^4.14.191",
-        "@types/mousetrap": "^1.6.11",
-        "@types/react": "^18.0.27",
-        "@types/react-dom": "^18.0.10",
-        "@types/react-infinite-scroller": "^1.2.3",
-        "@types/swagger-ui-react": "^4.11.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",
-        "eslint-config-airbnb": "^19.0.4",
-        "eslint-config-airbnb-typescript": "^17.0.0",
-        "eslint-config-prettier": "^8.6.0",
-        "eslint-config-react-app": "^7.0.1",
-        "eslint-plugin-hooks": "^0.4.3",
-        "eslint-plugin-prettier": "^4.2.1",
-        "prettier": "^2.8.3",
-        "rollup-plugin-visualizer": "^5.9.0",
-        "typescript": "^4.9.5",
-        "vite": "^4.1.1",
-        "vite-plugin-eslint": "^1.8.1",
-        "vite-tsconfig-paths": "^4.0.5",
-        "vitest": "^0.28.4",
-        "vitest-mock-extended": "^1.0.9"
-    }
+  "name": "commafeed-client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "dev:typescript": "tsc --watch",
+    "build": "npm run i18n:compile && tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ci": "vitest run",
+    "eslint": "eslint --ext=.js,.jsx,.ts,.tsx src",
+    "i18n": "npm run i18n:extract && npm run i18n:compile",
+    "i18n:extract": "lingui extract --clean",
+    "i18n:compile": "lingui compile --typescript",
+    "postinstall": "npm run i18n:compile"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@fontsource/open-sans": "^4.5.14",
+    "@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.1.0",
+    "lodash": "^4.17.21",
+    "mousetrap": "^1.6.5",
+    "react": "^18.2.0",
+    "react-async-hook": "^4.0.0",
+    "react-contexify": "^6.0.0",
+    "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
+    "react-icons": "^4.8.0",
+    "react-infinite-scroller": "^1.2.6",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.11.1",
+    "react-swipeable": "^7.0.0",
+    "swagger-ui-react": "^4.18.3",
+    "tinycon": "^0.6.8",
+    "use-local-storage": "^3.0.0",
+    "websocket-heartbeat-js": "^1.1.2"
+  },
+  "devDependencies": {
+    "@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.2.6",
+    "@types/react-dom": "^18.2.4",
+    "@types/react-infinite-scroller": "^1.2.3",
+    "@types/swagger-ui-react": "^4.18.0",
+    "@types/tinycon": "^0.6.3",
+    "@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.8.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-hooks": "^0.4.3",
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "^2.8.8",
+    "rollup-plugin-visualizer": "^5.9.0",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.5",
+    "vite-plugin-eslint": "^1.8.1",
+    "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.0.0</version>
+		<version>3.3.1</version>
 	</parent>
 	<artifactId>commafeed-client</artifactId>
 	<name>CommaFeed Client</name>

commafeed-client/src/App.tsx

@@ -1,9 +1,9 @@
 import { i18n } from "@lingui/core"
 import { I18nProvider } from "@lingui/react"
 import { ColorScheme, ColorSchemeProvider, MantineProvider } from "@mantine/core"
-import { useColorScheme, useLocalStorage } from "@mantine/hooks"
+import { useColorScheme } from "@mantine/hooks"
 import { ModalsProvider } from "@mantine/modals"
-import { NotificationsProvider } from "@mantine/notifications"
+import { Notifications } from "@mantine/notifications"
 import { Constants } from "app/constants"
 import { redirectTo } from "app/slices/redirect"
 import { reloadServerInfos } from "app/slices/server"
@@ -26,17 +26,16 @@ 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()
-    const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
-        key: "color-scheme",
-        defaultValue: preferredColorScheme,
-        getInitialValueInEffect: true,
-    })
+    const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>("color-scheme", preferredColorScheme)
     const toggleColorScheme = (value?: ColorScheme) => setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"))
 
     return (
@@ -52,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>
@@ -69,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 />} />
@@ -114,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(() => {
@@ -138,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/slices/user.ts

@@ -3,7 +3,7 @@ import { showNotification } from "@mantine/notifications"
 import { createAsyncThunk, createSlice, isAnyOf } from "@reduxjs/toolkit"
 import { client } from "app/client"
 import { RootState } from "app/store"
-import { ReadingMode, ReadingOrder, Settings, SharingSettings, UserModel, ViewMode } from "app/types"
+import { ReadingMode, ReadingOrder, Settings, SharingSettings, UserModel } from "app/types"
 // eslint-disable-next-line import/no-cycle
 import { reloadEntries } from "./entries"
 
@@ -36,46 +36,67 @@ export const changeReadingOrder = createAsyncThunk<void, ReadingOrder, { state:
         thunkApi.dispatch(reloadEntries())
     }
 )
-export const changeViewMode = createAsyncThunk<void, ViewMode, { state: RootState }>("settings/viewMode", (viewMode, thunkApi) => {
-    const { settings } = thunkApi.getState().user
-    if (!settings) return
-    client.user.saveSettings({ ...settings, viewMode })
-    thunkApi.dispatch(reloadEntries())
-})
-export const changeLanguage = createAsyncThunk<void, string, { state: RootState }>("settings/language", (language, thunkApi) => {
+export const changeLanguage = createAsyncThunk<
+    void,
+    string,
+    {
+        state: RootState
+    }
+>("settings/language", (language, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
     client.user.saveSettings({ ...settings, language })
 })
-export const changeScrollSpeed = createAsyncThunk<void, boolean, { state: RootState }>("settings/scrollSpeed", (speed, thunkApi) => {
+export const changeScrollSpeed = createAsyncThunk<
+    void,
+    boolean,
+    {
+        state: RootState
+    }
+>("settings/scrollSpeed", (speed, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
     client.user.saveSettings({ ...settings, scrollSpeed: speed ? 400 : 0 })
 })
-export const changeShowRead = createAsyncThunk<void, boolean, { state: RootState }>("settings/showRead", (showRead, thunkApi) => {
+export const changeShowRead = createAsyncThunk<
+    void,
+    boolean,
+    {
+        state: RootState
+    }
+>("settings/showRead", (showRead, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
     client.user.saveSettings({ ...settings, showRead })
 })
-export const changeScrollMarks = createAsyncThunk<void, boolean, { state: RootState }>("settings/scrollMarks", (scrollMarks, thunkApi) => {
+export const changeScrollMarks = createAsyncThunk<
+    void,
+    boolean,
+    {
+        state: RootState
+    }
+>("settings/scrollMarks", (scrollMarks, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
     client.user.saveSettings({ ...settings, scrollMarks })
 })
-export const changeSharingSetting = createAsyncThunk<void, { site: keyof SharingSettings; value: boolean }, { state: RootState }>(
-    "settings/sharingSetting",
-    (sharingSetting, thunkApi) => {
-        const { settings } = thunkApi.getState().user
-        if (!settings) return
-        client.user.saveSettings({
-            ...settings,
-            sharingSettings: {
-                ...settings.sharingSettings,
-                [sharingSetting.site]: sharingSetting.value,
-            },
-        })
+export const changeSharingSetting = createAsyncThunk<
+    void,
+    { site: keyof SharingSettings; value: boolean },
+    {
+        state: RootState
     }
-)
+>("settings/sharingSetting", (sharingSetting, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({
+        ...settings,
+        sharingSettings: {
+            ...settings.sharingSettings,
+            [sharingSetting.site]: sharingSetting.value,
+        },
+    })
+})
 
 export const userSlice = createSlice({
     name: "user",
@@ -99,10 +120,6 @@ export const userSlice = createSlice({
             if (!state.settings) return
             state.settings.readingOrder = action.meta.arg
         })
-        builder.addCase(changeViewMode.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.viewMode = action.meta.arg
-        })
         builder.addCase(changeLanguage.pending, (state, action) => {
             if (!state.settings) return
             state.settings.language = action.meta.arg

commafeed-client/src/app/types.ts

@@ -228,11 +228,10 @@ export interface Settings {
     language: string
     readingMode: ReadingMode
     readingOrder: ReadingOrder
-    viewMode: ViewMode
     showRead: boolean
     scrollMarks: boolean
-    theme?: string
     customCss?: string
+    customJs?: string
     scrollSpeed: number
     sharingSettings: SharingSettings
 }
@@ -306,4 +305,4 @@ export type ReadingMode = "all" | "unread"
 
 export type ReadingOrder = "asc" | "desc"
 
-export type ViewMode = "title" | "cozy" | "expanded"
+export type ViewMode = "title" | "cozy" | "detailed" | "expanded"

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,6 +17,7 @@ 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"
@@ -28,7 +29,7 @@ export function FeedEntries() {
     const entriesTimestamp = useAppSelector(state => state.entries.timestamp)
     const selectedEntryId = useAppSelector(state => state.entries.selectedEntryId)
     const hasMore = useAppSelector(state => state.entries.hasMore)
-    const viewMode = useAppSelector(state => state.user.settings?.viewMode)
+    const { viewMode } = useViewMode()
     const scrollMarks = useAppSelector(state => state.user.settings?.scrollMarks)
     const scrollingToEntry = useAppSelector(state => state.entries.scrollingToEntry)
     const dispatch = useAppDispatch()
@@ -233,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,8 +1,10 @@
-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, useAppSelector } from "app/store"
-import { Entry } from "app/types"
+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 { FeedEntryBody } from "./FeedEntryBody"
@@ -18,16 +20,23 @@ interface FeedEntryProps {
     onHeaderClick: (e: React.MouseEvent) => void
 }
 
-const useStyles = createStyles((theme, props: FeedEntryProps & { compact: boolean }) => {
+const useStyles = createStyles((theme, props: FeedEntryProps & { viewMode?: ViewMode }) => {
     let backgroundColor
     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
-    if (props.compact) marginY = 6
+    let marginY = 10
+    if (props.viewMode === "title") marginY = 2
+    else if (props.viewMode === "cozy") marginY = 6
 
     let mobileMarginY = 6
-    if (props.compact) mobileMarginY = 4
+    if (props.viewMode === "title") mobileMarginY = 2
+    else if (props.viewMode === "cozy") mobileMarginY = 4
+
+    let backgroundHoverColor = backgroundColor
+    if (!props.expanded && !props.entry.read) {
+        backgroundHoverColor = theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]
+    }
 
     const styles = {
         paper: {
@@ -38,6 +47,15 @@ const useStyles = createStyles((theme, props: FeedEntryProps & { compact: boolea
                 marginTop: mobileMarginY,
                 marginBottom: mobileMarginY,
             },
+            "@media (hover: hover)": {
+                "&:hover": {
+                    backgroundColor: backgroundHoverColor,
+                },
+            },
+        },
+        headerLink: {
+            color: "inherit",
+            textDecoration: "none",
         },
         body: {
             maxWidth: Constants.layout.entryMaxWidth,
@@ -52,11 +70,8 @@ const useStyles = createStyles((theme, props: FeedEntryProps & { compact: boolea
 })
 
 export function FeedEntry(props: FeedEntryProps) {
-    const viewMode = useAppSelector(state => state.user.settings?.viewMode)
-    const compact = viewMode === "title"
-    const compactHeader = compact && !props.expanded
-
-    const { classes } = useStyles({ ...props, compact })
+    const { viewMode } = useViewMode()
+    const { classes } = useStyles({ ...props, viewMode })
 
     const dispatch = useAppDispatch()
 
@@ -66,13 +81,22 @@ export function FeedEntry(props: FeedEntryProps) {
 
     const { onContextMenu } = useFeedEntryContextMenu(props.entry)
 
-    const spacing = compact ? 8 : "xs"
-    const borderRadius = compact ? "xs" : "sm"
+    let paddingX: MantineNumberSize = "xs"
+    if (viewMode === "title" || viewMode === "cozy") paddingX = 6
 
+    let paddingY: MantineNumberSize = "xs"
+    if (viewMode === "title") paddingY = 4
+    else if (viewMode === "cozy") paddingY = 8
+
+    let borderRadius: MantineNumberSize = "sm"
+    if (viewMode === "title") borderRadius = 0
+    else if (viewMode === "cozy") borderRadius = "xs"
+
+    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"
@@ -80,17 +104,17 @@ export function FeedEntry(props: FeedEntryProps) {
                 onAuxClick={props.onHeaderClick}
                 onContextMenu={onContextMenu}
             >
-                <Box p={spacing} {...swipeHandlers}>
+                <Box px={paddingX} py={paddingY} {...swipeHandlers}>
                     {compactHeader && <FeedEntryCompactHeader entry={props.entry} />}
                     {!compactHeader && <FeedEntryHeader entry={props.entry} expanded={props.expanded} />}
                 </Box>
-            </Anchor>
+            </a>
             {props.expanded && (
-                <Box px={spacing} pb={spacing}>
+                <Box px={paddingX} pb={paddingY}>
                     <Box className={classes.body} sx={{ direction: props.entry.rtl ? "rtl" : "ltr" }}>
                         <FeedEntryBody entry={props.entry} />
                     </Box>
-                    <Divider variant="dashed" my={spacing} />
+                    <Divider variant="dashed" my={paddingY} />
                     <FeedEntryFooter entry={props.entry} />
                 </Box>
             )}

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,17 +1,18 @@
-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 { changeViewMode } from "app/slices/user"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { ViewMode } from "app/types"
+import { useViewMode } from "hooks/useViewMode"
 import { useState } from "react"
 import {
     TbChartLine,
     TbHelp,
     TbLayoutList,
     TbList,
+    TbListDetails,
     TbMoon,
     TbNotes,
     TbPower,
@@ -54,6 +55,17 @@ const viewModeData: ViewModeControlItem[] = [
             </Group>
         ),
     },
+    {
+        value: "detailed",
+        label: (
+            <Group>
+                <TbListDetails size={iconSize} />
+                <Box ml={6}>
+                    <Trans>Detailed</Trans>
+                </Box>
+            </Group>
+        ),
+    },
     {
         value: "expanded",
         label: (
@@ -69,7 +81,7 @@ const viewModeData: ViewModeControlItem[] = [
 
 export function ProfileMenu(props: ProfileMenuProps) {
     const [opened, setOpened] = useState(false)
-    const viewMode = useAppSelector(state => state.user.settings?.viewMode)
+    const { viewMode, setViewMode } = useViewMode()
     const profile = useAppSelector(state => state.user.profile)
     const admin = useAppSelector(state => state.user.profile?.admin)
     const dispatch = useAppDispatch()
@@ -99,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,
                             })
@@ -127,7 +139,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
                     orientation="vertical"
                     data={viewModeData}
                     value={viewMode}
-                    onChange={e => dispatch(changeViewMode(e as ViewMode))}
+                    onChange={e => setViewMode(e as ViewMode)}
                     mb="xs"
                 />
 

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

@@ -0,0 +1,7 @@
+import { ViewMode } from "app/types"
+import useLocalStorage from "use-local-storage"
+
+export function useViewMode() {
+    const [viewMode, setViewMode] = useLocalStorage<ViewMode>("view-mode", "detailed")
+    return { viewMode, setViewMode }
+}

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 "تاريخ الإنشاء"
@@ -219,6 +232,10 @@ msgstr "حذف المستخدم"
 msgid "Desc"
 msgstr "تنازلي"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,6 +427,7 @@ msgstr "تحميل العلامات ..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "تسجيل الدخول"
 
@@ -617,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
@@ -685,6 +704,7 @@ msgstr "إظهار تعليمات اختصار لوحة المفاتيح"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "قم بالتسجيل"
 
@@ -757,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ó"
@@ -219,6 +232,10 @@ msgstr "Suprimeix l'usuari"
 msgid "Desc"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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ó"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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í"
@@ -219,6 +232,10 @@ msgstr "Smazat uživatele"
 msgid "Desc"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Dileu defnyddiwr"
 msgid "Desc"
 msgstr "Rhag"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Slet bruger"
 msgid "Desc"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Benutzer löschen"
 msgid "Desc"
 msgstr "Beschr"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Delete user"
 msgid "Desc"
 msgstr "Desc"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr "Detailed"
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Borrar usuario"
 msgid "Desc"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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 "تاریخ ایجاد"
@@ -219,6 +232,10 @@ msgstr "حذف کاربر"
 msgid "Desc"
 msgstr "توصیف"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,6 +427,7 @@ msgstr "بارگیری برچسب ها..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "وارد شوید"
 
@@ -617,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
@@ -685,6 +704,7 @@ msgstr "نمایش راهنمایی میانبر صفحه کلید"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "ثبت نام کنید"
 
@@ -757,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ä"
@@ -219,6 +232,10 @@ msgstr "Poista käyttäjä"
 msgid "Desc"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Effacer l'utilisateur"
 msgid "Desc"
 msgstr "Descendant"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr "Vue détaillée"
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Eliminar usuario"
 msgid "Desc"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Felhasználó törlése"
 msgid "Desc"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Hapus pengguna"
 msgid "Desc"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Elimina utente"
 msgid "Desc"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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 "作成日"
@@ -219,6 +232,10 @@ msgstr "ユーザーの削除"
 msgid "Desc"
 msgstr "説明"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,6 +427,7 @@ msgstr "タグを読み込んでいます..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "ログイン"
 
@@ -617,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
@@ -685,6 +704,7 @@ msgstr "キーボード ショートカットのヘルプを表示"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "サインアップ"
 
@@ -757,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 "생성 날짜"
@@ -219,6 +232,10 @@ msgstr "사용자 삭제"
 msgid "Desc"
 msgstr "설명"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,6 +427,7 @@ msgstr "태그 로드 중..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "로그인"
 
@@ -617,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
@@ -685,6 +704,7 @@ msgstr "키보드 단축키 도움말 표시"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "가입"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Padam pengguna"
 msgid "Desc"
 msgstr "Dec"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Slett bruker"
 msgid "Desc"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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å"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Gebruiker verwijderen"
 msgid "Desc"
 msgstr "Beschrijving"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Slett bruker"
 msgid "Desc"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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å"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Usuń użytkownika"
 msgid "Desc"
 msgstr "Opis"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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ę"
 
@@ -617,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
@@ -685,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ę"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Excluir usuário"
 msgid "Desc"
 msgstr "Descrição"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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 "Дата создания"
@@ -219,6 +232,10 @@ msgstr "Удалить пользователя"
 msgid "Desc"
 msgstr "По убыванию"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,6 +427,7 @@ msgstr "Загрузка тегов..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "Войти"
 
@@ -617,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
@@ -685,6 +704,7 @@ msgstr "Показать справку по сочетаниям клавиш."
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "Зарегистрироваться"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Vymažte používateľa"
 msgid "Desc"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Ta bort användare"
 msgid "Desc"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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"
@@ -219,6 +232,10 @@ msgstr "Kullanıcıyı sil"
 msgid "Desc"
 msgstr "Açılış"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,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ş"
 
@@ -617,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
@@ -685,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"
 
@@ -757,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 "创建日期"
@@ -219,6 +232,10 @@ msgstr "删除用户"
 msgid "Desc"
 msgstr "描述"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Detailed"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
@@ -410,6 +427,7 @@ msgstr "正在加载标签..."
 
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Log in"
 msgstr "登录"
 
@@ -617,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
@@ -685,6 +704,7 @@ msgstr "显示键盘快捷键帮助"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Sign up"
 msgstr "注册"
 
@@ -757,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/admin/MetricsPage.tsx

@@ -1,7 +1,6 @@
-import { Accordion, Box, Tabs } from "@mantine/core"
+import { Accordion, Tabs } from "@mantine/core"
 import { client } from "app/client"
 import { Loader } from "components/Loader"
-import { Gauge } from "components/metrics/Gauge"
 import { Meter } from "components/metrics/Meter"
 import { MetricAccordionItem } from "components/metrics/MetricAccordionItem"
 import { Timer } from "components/metrics/Timer"
@@ -9,26 +8,18 @@ import { useAsync } from "react-async-hook"
 import { TbChartAreaLine, TbClock } from "react-icons/tb"
 
 const shownMeters: { [key: string]: string } = {
-    "com.commafeed.backend.feed.FeedQueues.refill": "Refresh queue refill rate",
-    "com.commafeed.backend.feed.FeedRefreshTaskGiver.feedRefreshed": "Feed refreshed",
-    "com.commafeed.backend.feed.FeedRefreshUpdater.feedUpdated": "Feed updated",
-    "com.commafeed.backend.feed.FeedRefreshUpdater.entryCacheHit": "Entry cache hit",
-    "com.commafeed.backend.feed.FeedRefreshUpdater.entryCacheMiss": "Entry cache miss",
-}
-
-const shownGauges: { [key: string]: string } = {
-    "com.commafeed.backend.feed.FeedRefreshExecutor.feed-refresh-updater.active": "Feed Updater active",
-    "com.commafeed.backend.feed.FeedRefreshExecutor.feed-refresh-updater.pending": "Feed Updater queued",
-    "com.commafeed.backend.feed.FeedRefreshExecutor.feed-refresh-worker.active": "Feed Worker active",
-    "com.commafeed.backend.feed.FeedRefreshExecutor.feed-refresh-worker.pending": "Feed Worker queued",
-    "com.commafeed.backend.feed.FeedQueues.queue": "Feed Refresh queue size",
+    "com.commafeed.backend.feed.FeedRefreshEngine.refill": "Feed queue refill rate",
+    "com.commafeed.backend.feed.FeedRefreshWorker.feedFetched": "Feed fetching rate",
+    "com.commafeed.backend.feed.FeedRefreshUpdater.feedUpdated": "Feed update rate",
+    "com.commafeed.backend.feed.FeedRefreshUpdater.entryCacheHit": "Entry cache hit rate",
+    "com.commafeed.backend.feed.FeedRefreshUpdater.entryCacheMiss": "Entry cache miss rate",
 }
 
 export function MetricsPage() {
     const query = useAsync(() => client.admin.getMetrics(), [])
 
     if (!query.result) return <Loader />
-    const { meters, gauges, timers } = query.result.data
+    const { meters, timers } = query.result.data
     return (
         <Tabs defaultValue="stats">
             <Tabs.List>
@@ -48,15 +39,6 @@ export function MetricsPage() {
                         </MetricAccordionItem>
                     ))}
                 </Accordion>
-
-                <Box pt="xs">
-                    {Object.keys(shownGauges).map(g => (
-                        <Box key={g}>
-                            <span>{shownGauges[g]}&nbsp;</span>
-                            <Gauge gauge={gauges[g]} />
-                        </Box>
-                    ))}
-                </Box>
             </Tabs.Panel>
 
             <Tabs.Panel value="timers" pt="xs">

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

@@ -69,7 +69,7 @@ app:
   
   # user-agent string that will be used by the http client, leave empty for the default one
   userAgent:
-  
+
 # Database connection
 # -------------------  
 # for MySQL
@@ -92,7 +92,7 @@ database:
   properties:
     charSet: UTF-8
   validationQuery: "/* CommaFeed Health Check */ SELECT 1"
-    
+
 server:
   applicationConnectors:
     - type: http
@@ -100,7 +100,7 @@ server:
   adminConnectors:
     - type: http
       port: 8084
-      
+
 logging:
   level: INFO
   loggers:
@@ -108,6 +108,7 @@ logging:
     liquibase: INFO
     org.hibernate.SQL: INFO # or ALL for sql debugging
     org.hibernate.engine.internal.StatisticalLoggingSessionEventListener: WARN
+    org.hibernate.orm.deprecation: "OFF"
   appenders:
     - type: console
     - type: file
@@ -117,14 +118,16 @@ logging:
       archivedLogFilenamePattern: log/commafeed-%d.log
       archivedFileCount: 5
       timeZone: UTC
-      
+
 # Redis pool configuration
 # (only used if app.cache is 'redis')
 # -----------------------------------
 redis:
   host: localhost
   port: 6379
-  password: 
+  # username is only required when using ACLs
+  username:
+  password:
   timeout: 2000
   database: 0
   maxTotal: 500

commafeed-server/config.yml.example

@@ -104,9 +104,11 @@ server:
   adminConnectors:
     - type: http
       port: 8084
+  requestLog:
+    appenders: [ ]
       
 logging:
-  level: WARN
+  level: ERROR
   loggers:
     com.commafeed: INFO
     liquibase: INFO
@@ -128,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

@@ -1,19 +1,23 @@
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 
 	<modelVersion>4.0.0</modelVersion>
 
 	<parent>
 		<groupId>com.commafeed</groupId>
 		<artifactId>commafeed</artifactId>
-		<version>3.0.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.2.1</querydsl.version>
-		<rome.version>1.18.0</rome.version>
+		<querydsl.version>4.4.0</querydsl.version>
+		<rome.version>2.1.0</rome.version>
 	</properties>
 
 	<dependencyManagement>
@@ -21,7 +25,7 @@
 			<dependency>
 				<groupId>io.dropwizard</groupId>
 				<artifactId>dropwizard-dependencies</artifactId>
-				<version>2.1.1</version>
+				<version>2.1.6</version>
 				<type>pom</type>
 				<scope>import</scope>
 			</dependency>
@@ -41,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>
@@ -112,8 +117,10 @@
 						</goals>
 						<configuration>
 							<transformers>
-								<transformer implementation="org.apache.maven.plugins.shade.resource.ServicesResourceTransformer" />
-								<transformer implementation="org.apache.maven.plugins.shade.resource.ManifestResourceTransformer">
+								<transformer
+										implementation="org.apache.maven.plugins.shade.resource.ServicesResourceTransformer" />
+								<transformer
+										implementation="org.apache.maven.plugins.shade.resource.ManifestResourceTransformer">
 									<mainClass>com.commafeed.CommaFeedApplication</mainClass>
 								</transformer>
 								<transformer implementation="org.kordamp.shade.resources.PropertiesFileTransformer">
@@ -230,7 +237,7 @@
 		<dependency>
 			<groupId>com.commafeed</groupId>
 			<artifactId>commafeed-client</artifactId>
-			<version>3.0.0</version>
+			<version>3.3.1</version>
 		</dependency>
 
 		<dependency>
@@ -290,7 +297,7 @@
 		<dependency>
 			<groupId>be.tomcools</groupId>
 			<artifactId>dropwizard-websocket-jee7-bundle</artifactId>
-			<version>2.0.0</version>
+			<version>2.1.6</version>
 		</dependency>
 		<dependency>
 			<groupId>io.whitfin</groupId>
@@ -298,6 +305,12 @@
 			<version>1.1.1</version>
 		</dependency>
 
+		<dependency>
+			<groupId>io.reactivex.rxjava3</groupId>
+			<artifactId>rxjava</artifactId>
+			<version>3.1.6</version>
+		</dependency>
+
 		<dependency>
 			<groupId>javax.xml.bind</groupId>
 			<artifactId>jaxb-api</artifactId>
@@ -378,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>
@@ -410,50 +423,38 @@
 		<dependency>
 			<groupId>org.jsoup</groupId>
 			<artifactId>jsoup</artifactId>
-			<version>1.14.3</version>
+			<version>1.15.4</version>
 		</dependency>
 		<dependency>
 			<groupId>com.ibm.icu</groupId>
 			<artifactId>icu4j</artifactId>
-			<version>70.1</version>
+			<version>73.1</version>
 		</dependency>
 		<dependency>
 			<groupId>net.sourceforge.cssparser</groupId>
 			<artifactId>cssparser</artifactId>
-			<version>0.9.29</version>
+			<version>0.9.30</version>
 		</dependency>
 		<dependency>
-			<groupId>edu.uci.ics</groupId>
-			<artifactId>crawler4j</artifactId>
-			<version>3.5</version>
-			<exclusions>
-				<exclusion>
-					<groupId>log4j</groupId>
-					<artifactId>log4j</artifactId>
-				</exclusion>
-			</exclusions>
+			<groupId>org.netpreserve</groupId>
+			<artifactId>urlcanon</artifactId>
+			<version>0.4.0</version>
 		</dependency>
 		<dependency>
-			<groupId>com.google.gwt</groupId>
+			<groupId>org.gwtproject</groupId>
 			<artifactId>gwt-servlet</artifactId>
-			<version>2.9.0</version>
+			<version>2.10.0</version>
 		</dependency>
 		<dependency>
 			<groupId>io.github.hakky54</groupId>
 			<artifactId>sslcontext-kickstart</artifactId>
-			<version>7.2.0</version>
+			<version>7.4.11</version>
 		</dependency>
 
 		<dependency>
 			<groupId>com.google.apis</groupId>
 			<artifactId>google-api-services-youtube</artifactId>
-			<version>v3-rev139-1.20.0</version>
-			<exclusions>
-				<exclusion>
-					<groupId>com.google.guava</groupId>
-					<artifactId>guava-jdk5</artifactId>
-				</exclusion>
-			</exclusions>
+			<version>v3-rev222-1.25.0</version>
 		</dependency>
 
 		<dependency>
@@ -461,14 +462,14 @@
 			<artifactId>h2</artifactId>
 		</dependency>
 		<dependency>
-			<groupId>mysql</groupId>
-			<artifactId>mysql-connector-java</artifactId>
-			<version>8.0.28</version>
+			<groupId>com.mysql</groupId>
+			<artifactId>mysql-connector-j</artifactId>
+			<version>8.0.33</version>
 		</dependency>
 		<dependency>
 			<groupId>org.postgresql</groupId>
 			<artifactId>postgresql</artifactId>
-			<version>42.4.1</version>
+			<version>42.6.0</version>
 		</dependency>
 		<dependency>
 			<groupId>net.sourceforge.jtds</groupId>
@@ -494,7 +495,7 @@
 		<dependency>
 			<groupId>org.mock-server</groupId>
 			<artifactId>mockserver-junit-jupiter</artifactId>
-			<version>5.13.2</version>
+			<version>5.15.0</version>
 			<scope>test</scope>
 		</dependency>
 		<dependency>
@@ -510,7 +511,7 @@
 		<dependency>
 			<groupId>com.microsoft.playwright</groupId>
 			<artifactId>playwright</artifactId>
-			<version>1.24.1</version>
+			<version>1.32.0</version>
 			<scope>test</scope>
 		</dependency>
 

commafeed-server/src/main/java/com/commafeed/CommaFeedApplication.java

@@ -18,9 +18,7 @@ import javax.websocket.server.ServerEndpointConfig;
 import org.hibernate.cfg.AvailableSettings;
 
 import com.codahale.metrics.json.MetricsModule;
-import com.commafeed.backend.feed.FeedRefreshTaskGiver;
-import com.commafeed.backend.feed.FeedRefreshUpdater;
-import com.commafeed.backend.feed.FeedRefreshWorker;
+import com.commafeed.backend.feed.FeedRefreshEngine;
 import com.commafeed.backend.model.AbstractModel;
 import com.commafeed.backend.model.Feed;
 import com.commafeed.backend.model.FeedCategory;
@@ -32,7 +30,7 @@ import com.commafeed.backend.model.FeedSubscription;
 import com.commafeed.backend.model.User;
 import com.commafeed.backend.model.UserRole;
 import com.commafeed.backend.model.UserSettings;
-import com.commafeed.backend.service.StartupService;
+import com.commafeed.backend.service.DatabaseStartupService;
 import com.commafeed.backend.service.UserService;
 import com.commafeed.backend.task.ScheduledTask;
 import com.commafeed.frontend.auth.SecurityCheckFactoryProvider;
@@ -45,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;
@@ -61,6 +60,8 @@ import be.tomcools.dropwizard.websocket.WebsocketBundle;
 import io.dropwizard.Application;
 import io.dropwizard.assets.AssetsBundle;
 import io.dropwizard.configuration.DefaultConfigurationFactoryFactory;
+import io.dropwizard.configuration.EnvironmentVariableSubstitutor;
+import io.dropwizard.configuration.SubstitutingSourceProvider;
 import io.dropwizard.db.DataSourceFactory;
 import io.dropwizard.forms.MultiPartBundle;
 import io.dropwizard.hibernate.HibernateBundle;
@@ -93,10 +94,19 @@ public class CommaFeedApplication extends Application<CommaFeedConfiguration> {
 			@Override
 			protected ObjectMapper configureObjectMapper(ObjectMapper objectMapper) {
 				// disable case sensitivity because EnvironmentSubstitutor maps MYPROPERTY to myproperty and not to myProperty
-				return objectMapper.enable(MapperFeature.ACCEPT_CASE_INSENSITIVE_PROPERTIES);
+				return objectMapper
+						.setConfig(objectMapper.getDeserializationConfig().with(MapperFeature.ACCEPT_CASE_INSENSITIVE_PROPERTIES));
 			}
 		});
-		bootstrap.setConfigurationSourceProvider(new EnvironmentSubstitutor("CF", bootstrap.getConfigurationSourceProvider()));
+
+		// enable config.yml string substitution
+		// e.g. having a custom config.yml file with app.session.path=${SOME_ENV_VAR} will substitute SOME_ENV_VAR
+		SubstitutingSourceProvider substitutingSourceProvider = new SubstitutingSourceProvider(bootstrap.getConfigurationSourceProvider(),
+				new EnvironmentVariableSubstitutor(false));
+		// enable config.yml properties override with env variables prefixed with CF_
+		// e.g. setting CF_APP_ALLOWREGISTRATIONS=true will set app.allowRegistrations to true
+		EnvironmentSubstitutor environmentSubstitutor = new EnvironmentSubstitutor("CF", substitutingSourceProvider);
+		bootstrap.setConfigurationSourceProvider(environmentSubstitutor);
 
 		bootstrap.getObjectMapper().registerModule(new MetricsModule(TimeUnit.SECONDS, TimeUnit.SECONDS, false));
 
@@ -164,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
@@ -184,12 +195,10 @@ public class CommaFeedApplication extends Application<CommaFeedConfiguration> {
 		}
 
 		// database init/changelogs
-		environment.lifecycle().manage(injector.getInstance(StartupService.class));
+		environment.lifecycle().manage(injector.getInstance(DatabaseStartupService.class));
 
-		// background feed fetching
-		environment.lifecycle().manage(injector.getInstance(FeedRefreshTaskGiver.class));
-		environment.lifecycle().manage(injector.getInstance(FeedRefreshWorker.class));
-		environment.lifecycle().manage(injector.getInstance(FeedRefreshUpdater.class));
+		// start feed fetching engine
+		environment.lifecycle().manage(injector.getInstance(FeedRefreshEngine.class));
 
 		// prevent caching index.html, so that the webapp is always up to date
 		environment.servlets()

commafeed-server/src/main/java/com/commafeed/backend/HttpGetter.java

@@ -14,7 +14,6 @@ import org.apache.http.HttpHeaders;
 import org.apache.http.HttpHost;
 import org.apache.http.HttpResponseInterceptor;
 import org.apache.http.HttpStatus;
-import org.apache.http.client.ClientProtocolException;
 import org.apache.http.client.HttpResponseException;
 import org.apache.http.client.config.CookieSpecs;
 import org.apache.http.client.config.RequestConfig;
@@ -59,7 +58,7 @@ public class HttpGetter {
 		}
 	}
 
-	public HttpResult getBinary(String url, int timeout) throws ClientProtocolException, IOException, NotModifiedException {
+	public HttpResult getBinary(String url, int timeout) throws IOException, NotModifiedException {
 		return getBinary(url, null, null, timeout);
 	}
 
@@ -71,14 +70,10 @@ public class HttpGetter {
 	 *            header we got last time we queried that url, or null
 	 * @param eTag
 	 *            header we got last time we queried that url, or null
-	 * @return
-	 * @throws ClientProtocolException
-	 * @throws IOException
 	 * @throws NotModifiedException
 	 *             if the url hasn't changed since we asked for it last time
 	 */
-	public HttpResult getBinary(String url, String lastModified, String eTag, int timeout)
-			throws ClientProtocolException, IOException, NotModifiedException {
+	public HttpResult getBinary(String url, String lastModified, String eTag, int timeout) throws IOException, NotModifiedException {
 		HttpResult result = null;
 		long start = System.currentTimeMillis();
 
@@ -175,13 +170,6 @@ public class HttpGetter {
 		return builder.build();
 	}
 
-	public static void main(String[] args) throws Exception {
-		CommaFeedConfiguration config = new CommaFeedConfiguration();
-		HttpGetter getter = new HttpGetter(config);
-		HttpResult result = getter.getBinary("https://sourceforge.net/projects/mpv-player-windows/rss", 30000);
-		System.out.println(new String(result.content));
-	}
-
 	@Getter
 	public static class NotModifiedException extends Exception {
 		private static final long serialVersionUID = 1L;
@@ -189,12 +177,12 @@ public class HttpGetter {
 		/**
 		 * if the value of this header changed, this is its new value
 		 */
-		private String newLastModifiedHeader;
+		private final String newLastModifiedHeader;
 
 		/**
 		 * if the value of this header changed, this is its new value
 		 */
-		private String newEtagHeader;
+		private final String newEtagHeader;
 
 		public NotModifiedException(String message) {
 			this(message, null, null);

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/dao/FeedDAO.java

@@ -36,7 +36,7 @@ public class FeedDAO extends GenericDAO<Feed> {
 			QFeedSubscription subs = QFeedSubscription.feedSubscription;
 			QUser user = QUser.user;
 
-			query.join(feed.subscriptions, subs).join(subs.user, user).where(user.lastLogin.gt(lastLoginThreshold));
+			query.join(subs).on(subs.feed.id.eq(feed.id)).join(subs.user, user).where(user.lastLogin.gt(lastLoginThreshold));
 		}
 
 		return query.orderBy(feed.disabledUntil.asc()).limit(count).fetch();

commafeed-server/src/main/java/com/commafeed/backend/feed/FeedFetcher.java

@@ -2,6 +2,7 @@ package com.commafeed.backend.feed;
 
 import java.io.IOException;
 import java.util.Date;
+import java.util.List;
 import java.util.Set;
 
 import javax.inject.Inject;
@@ -13,13 +14,19 @@ import org.apache.commons.codec.digest.DigestUtils;
 import com.commafeed.backend.HttpGetter;
 import com.commafeed.backend.HttpGetter.HttpResult;
 import com.commafeed.backend.HttpGetter.NotModifiedException;
+import com.commafeed.backend.feed.FeedParser.FeedParserResult;
 import com.commafeed.backend.model.Feed;
+import com.commafeed.backend.model.FeedEntry;
 import com.commafeed.backend.urlprovider.FeedURLProvider;
 import com.rometools.rome.io.FeedException;
 
 import lombok.RequiredArgsConstructor;
+import lombok.Value;
 import lombok.extern.slf4j.Slf4j;
 
+/**
+ * Fetches a feed then parses it
+ */
 @Slf4j
 @RequiredArgsConstructor(onConstructor = @__({ @Inject }))
 @Singleton
@@ -29,18 +36,18 @@ public class FeedFetcher {
 	private final HttpGetter getter;
 	private final Set<FeedURLProvider> urlProviders;
 
-	public FetchedFeed fetch(String feedUrl, boolean extractFeedUrlFromHtml, String lastModified, String eTag, Date lastPublishedDate,
+	public FeedFetcherResult fetch(String feedUrl, boolean extractFeedUrlFromHtml, String lastModified, String eTag, Date lastPublishedDate,
 			String lastContentHash) throws FeedException, IOException, NotModifiedException {
 		log.debug("Fetching feed {}", feedUrl);
-		FetchedFeed fetchedFeed = null;
 
 		int timeout = 20000;
 
 		HttpResult result = getter.getBinary(feedUrl, lastModified, eTag, timeout);
 		byte[] content = result.getContent();
 
+		FeedParserResult parserResult;
 		try {
-			fetchedFeed = parser.parse(result.getUrlAfterRedirect(), content);
+			parserResult = parser.parse(result.getUrlAfterRedirect(), content);
 		} catch (FeedException e) {
 			if (extractFeedUrlFromHtml) {
 				String extractedUrl = extractFeedUrl(urlProviders, feedUrl, StringUtils.newStringUtf8(result.getContent()));
@@ -49,7 +56,7 @@ public class FeedFetcher {
 
 					result = getter.getBinary(extractedUrl, lastModified, eTag, timeout);
 					content = result.getContent();
-					fetchedFeed = parser.parse(result.getUrlAfterRedirect(), content);
+					parserResult = parser.parse(result.getUrlAfterRedirect(), content);
 				} else {
 					throw e;
 				}
@@ -73,21 +80,20 @@ public class FeedFetcher {
 					etagHeaderValueChanged ? result.getETag() : null);
 		}
 
-		if (lastPublishedDate != null && fetchedFeed.getFeed().getLastPublishedDate() != null
-				&& lastPublishedDate.getTime() == fetchedFeed.getFeed().getLastPublishedDate().getTime()) {
+		if (lastPublishedDate != null && parserResult.getFeed().getLastPublishedDate() != null
+				&& lastPublishedDate.getTime() == parserResult.getFeed().getLastPublishedDate().getTime()) {
 			log.debug("publishedDate not modified: {}", feedUrl);
 			throw new NotModifiedException("publishedDate not modified",
 					lastModifiedHeaderValueChanged ? result.getLastModifiedSince() : null,
 					etagHeaderValueChanged ? result.getETag() : null);
 		}
 
-		Feed feed = fetchedFeed.getFeed();
+		Feed feed = parserResult.getFeed();
 		feed.setLastModifiedHeader(result.getLastModifiedSince());
 		feed.setEtagHeader(FeedUtils.truncate(result.getETag(), 255));
 		feed.setLastContentHash(hash);
-		fetchedFeed.setFetchDuration(result.getDuration());
-		fetchedFeed.setUrlAfterRedirect(result.getUrlAfterRedirect());
-		return fetchedFeed;
+		return new FeedFetcherResult(parserResult.getFeed(), parserResult.getEntries(), parserResult.getTitle(),
+				result.getUrlAfterRedirect(), result.getDuration());
 	}
 
 	private static String extractFeedUrl(Set<FeedURLProvider> urlProviders, String url, String urlContent) {
@@ -100,4 +106,14 @@ public class FeedFetcher {
 
 		return null;
 	}
+
+	@Value
+	public static class FeedFetcherResult {
+		Feed feed;
+		List<FeedEntry> entries;
+		String title;
+		String urlAfterRedirect;
+		long fetchDuration;
+	}
+
 }

commafeed-server/src/main/java/com/commafeed/backend/feed/FeedParser.java

@@ -3,6 +3,7 @@ package com.commafeed.backend.feed;
 import java.io.StringReader;
 import java.nio.charset.Charset;
 import java.text.DateFormat;
+import java.util.ArrayList;
 import java.util.Date;
 import java.util.List;
 import java.util.stream.Collectors;
@@ -37,8 +38,12 @@ import com.rometools.rome.io.SyndFeedInput;
 
 import lombok.Data;
 import lombok.RequiredArgsConstructor;
+import lombok.Value;
 import lombok.extern.slf4j.Slf4j;
 
+/**
+ * Parses raw xml as a Feed object
+ */
 @Slf4j
 @RequiredArgsConstructor(onConstructor = @__({ @Inject }))
 @Singleton
@@ -50,10 +55,7 @@ public class FeedParser {
 	private static final Date START = new Date(86400000);
 	private static final Date END = new Date(1000L * Integer.MAX_VALUE - 86400000);
 
-	public FetchedFeed parse(String feedUrl, byte[] xml) throws FeedException {
-		FetchedFeed fetchedFeed = new FetchedFeed();
-		Feed feed = fetchedFeed.getFeed();
-		List<FeedEntry> entries = fetchedFeed.getEntries();
+	public FeedParserResult parse(String feedUrl, byte[] xml) throws FeedException {
 
 		try {
 			Charset encoding = FeedUtils.guessEncoding(xml);
@@ -63,17 +65,19 @@ public class FeedParser {
 			}
 			xmlString = FeedUtils.replaceHtmlEntitiesWithNumericEntities(xmlString);
 			InputSource source = new InputSource(new StringReader(xmlString));
+
 			SyndFeed rss = new SyndFeedInput().build(source);
 			handleForeignMarkup(rss);
 
-			fetchedFeed.setTitle(rss.getTitle());
+			String title = rss.getTitle();
+			Feed feed = new Feed();
 			feed.setPushHub(findHub(rss));
 			feed.setPushTopic(findSelf(rss));
 			feed.setUrl(feedUrl);
 			feed.setLink(rss.getLink());
-			List<SyndEntry> items = rss.getEntries();
 
-			for (SyndEntry item : items) {
+			List<FeedEntry> entries = new ArrayList<>();
+			for (SyndEntry item : rss.getEntries()) {
 				FeedEntry entry = new FeedEntry();
 
 				String guid = item.getUri();
@@ -121,6 +125,7 @@ public class FeedParser {
 
 				entries.add(entry);
 			}
+
 			Date lastEntryDate = null;
 			Date publishedDate = validateDate(rss.getPublishedDate(), false);
 			if (!entries.isEmpty()) {
@@ -133,10 +138,10 @@ public class FeedParser {
 			feed.setAverageEntryInterval(FeedUtils.averageTimeBetweenEntries(entries));
 			feed.setLastEntryDate(lastEntryDate);
 
+			return new FeedParserResult(feed, entries, title);
 		} catch (Exception e) {
 			throw new FeedException(String.format("Could not parse feed from %s : %s", feedUrl, e.getMessage()), e);
 		}
-		return fetchedFeed;
 	}
 
 	/**
@@ -273,4 +278,11 @@ public class FeedParser {
 		}
 	}
 
+	@Value
+	public static class FeedParserResult {
+		Feed feed;
+		List<FeedEntry> entries;
+		String title;
+	}
+
 }

commafeed-server/src/main/java/com/commafeed/backend/feed/FeedQueues.java

@@ -1,124 +0,0 @@
-package com.commafeed.backend.feed;
-
-import java.util.Date;
-import java.util.List;
-import java.util.concurrent.BlockingDeque;
-import java.util.concurrent.LinkedBlockingDeque;
-import java.util.concurrent.TimeUnit;
-
-import javax.inject.Inject;
-import javax.inject.Singleton;
-
-import org.apache.commons.codec.digest.DigestUtils;
-import org.apache.commons.lang3.time.DateUtils;
-import org.hibernate.SessionFactory;
-
-import com.codahale.metrics.Gauge;
-import com.codahale.metrics.Meter;
-import com.codahale.metrics.MetricRegistry;
-import com.commafeed.CommaFeedConfiguration;
-import com.commafeed.backend.dao.FeedDAO;
-import com.commafeed.backend.dao.UnitOfWork;
-import com.commafeed.backend.model.Feed;
-
-@Singleton
-public class FeedQueues {
-
-	private final SessionFactory sessionFactory;
-	private final FeedDAO feedDAO;
-	private final CommaFeedConfiguration config;
-	private final BlockingDeque<FeedRefreshContext> queue = new LinkedBlockingDeque<>();
-	private final Meter refill;
-
-	@Inject
-	public FeedQueues(SessionFactory sessionFactory, FeedDAO feedDAO, CommaFeedConfiguration config, MetricRegistry metrics) {
-		this.sessionFactory = sessionFactory;
-		this.config = config;
-		this.feedDAO = feedDAO;
-		this.refill = metrics.meter(MetricRegistry.name(getClass(), "refill"));
-
-		metrics.register(MetricRegistry.name(getClass(), "queue"), (Gauge<Integer>) queue::size);
-	}
-
-	/**
-	 * take a feed from the refresh queue
-	 */
-	public synchronized FeedRefreshContext take() {
-		FeedRefreshContext context = queue.poll();
-		if (context != null) {
-			return context;
-		}
-
-		refill();
-		try {
-			// try to get something from the queue
-			// if the queue is empty, wait a bit
-			// polling the queue instead of sleeping gives us the opportunity to process a feed immediately if it was added manually with
-			// add()
-			return queue.poll(15, TimeUnit.SECONDS);
-		} catch (InterruptedException e) {
-			throw new RuntimeException("interrupted while waiting for a feed in the queue", e);
-		}
-	}
-
-	/**
-	 * add a feed to the refresh queue
-	 */
-	public void add(Feed feed, boolean urgent) {
-		if (isFeedAlreadyQueued(feed)) {
-			return;
-		}
-
-		FeedRefreshContext context = new FeedRefreshContext(feed, urgent);
-		if (urgent) {
-			queue.addFirst(context);
-		} else {
-			queue.addLast(context);
-		}
-	}
-
-	/**
-	 * refills the refresh queue
-	 */
-	private void refill() {
-		refill.mark();
-
-		// add feeds that are up to refresh from the database
-		int batchSize = Math.min(100, 3 * config.getApplicationSettings().getBackgroundThreads());
-		List<Feed> feeds = UnitOfWork.call(sessionFactory, () -> {
-			List<Feed> list = feedDAO.findNextUpdatable(batchSize, getLastLoginThreshold());
-
-			// set the disabledDate as we use it in feedDAO.findNextUpdatable() to decide what to refresh next
-			Date nextRefreshDate = DateUtils.addMinutes(new Date(), config.getApplicationSettings().getRefreshIntervalMinutes());
-			list.forEach(f -> f.setDisabledUntil(nextRefreshDate));
-			feedDAO.saveOrUpdate(list);
-
-			return list;
-		});
-
-		feeds.forEach(f -> add(f, false));
-	}
-
-	public void giveBack(Feed feed) {
-		String normalized = FeedUtils.normalizeURL(feed.getUrl());
-		feed.setNormalizedUrl(normalized);
-		feed.setNormalizedUrlHash(DigestUtils.sha1Hex(normalized));
-		feed.setLastUpdated(new Date());
-		UnitOfWork.run(sessionFactory, () -> feedDAO.saveOrUpdate(feed));
-
-		// we just finished updating the feed, remove it from the queue
-		queue.removeIf(c -> isFeedAlreadyQueued(c.getFeed()));
-	}
-
-	private Date getLastLoginThreshold() {
-		if (config.getApplicationSettings().getHeavyLoad()) {
-			return DateUtils.addDays(new Date(), -30);
-		} else {
-			return null;
-		}
-	}
-
-	private boolean isFeedAlreadyQueued(Feed feed) {
-		return queue.stream().anyMatch(c -> c.getFeed().getId().equals(feed.getId()));
-	}
-}

commafeed-server/src/main/java/com/commafeed/backend/feed/FeedRefreshContext.java

@@ -1,22 +0,0 @@
-package com.commafeed.backend.feed;
-
-import java.util.List;
-
-import com.commafeed.backend.model.Feed;
-import com.commafeed.backend.model.FeedEntry;
-
-import lombok.Getter;
-import lombok.Setter;
-
-@Getter
-@Setter
-public class FeedRefreshContext {
-	private Feed feed;
-	private List<FeedEntry> entries;
-	private boolean urgent;
-
-	public FeedRefreshContext(Feed feed, boolean isUrgent) {
-		this.feed = feed;
-		this.urgent = isUrgent;
-	}
-}

commafeed-server/src/main/java/com/commafeed/backend/feed/FeedRefreshEngine.java

@@ -0,0 +1,108 @@
+package com.commafeed.backend.feed;
+
+import java.util.Date;
+import java.util.List;
+import java.util.concurrent.TimeUnit;
+
+import javax.inject.Inject;
+import javax.inject.Singleton;
+
+import org.apache.commons.lang3.time.DateUtils;
+import org.hibernate.SessionFactory;
+
+import com.codahale.metrics.Meter;
+import com.codahale.metrics.MetricRegistry;
+import com.commafeed.CommaFeedConfiguration;
+import com.commafeed.backend.dao.FeedDAO;
+import com.commafeed.backend.dao.UnitOfWork;
+import com.commafeed.backend.model.Feed;
+
+import io.dropwizard.lifecycle.Managed;
+import io.reactivex.rxjava3.core.Flowable;
+import io.reactivex.rxjava3.disposables.Disposable;
+import io.reactivex.rxjava3.processors.PublishProcessor;
+import io.reactivex.rxjava3.schedulers.Schedulers;
+import lombok.extern.slf4j.Slf4j;
+
+@Slf4j
+@Singleton
+public class FeedRefreshEngine implements Managed {
+
+	private final SessionFactory sessionFactory;
+	private final FeedDAO feedDAO;
+	private final FeedRefreshWorker worker;
+	private final FeedRefreshUpdater updater;
+	private final CommaFeedConfiguration config;
+	private final Meter refill;
+
+	private final PublishProcessor<Feed> priorityQueue;
+	private Disposable flow;
+
+	@Inject
+	public FeedRefreshEngine(SessionFactory sessionFactory, FeedDAO feedDAO, FeedRefreshWorker worker, FeedRefreshUpdater updater,
+			CommaFeedConfiguration config, MetricRegistry metrics) {
+		this.sessionFactory = sessionFactory;
+		this.feedDAO = feedDAO;
+		this.worker = worker;
+		this.updater = updater;
+		this.config = config;
+		this.refill = metrics.meter(MetricRegistry.name(getClass(), "refill"));
+		this.priorityQueue = PublishProcessor.create();
+	}
+
+	@Override
+	public void start() {
+		Flowable<Feed> database = Flowable.fromCallable(() -> findNextUpdatableFeeds(getBatchSize(), getLastLoginThreshold()))
+				.onErrorResumeNext(e -> {
+					log.error("error while fetching next updatable feeds", e);
+					return Flowable.empty();
+				})
+				// repeat query 15s after the flowable has been emptied
+				// https://github.com/ReactiveX/RxJava/issues/448#issuecomment-233244964
+				.repeatWhen(o -> o.concatMap(v -> Flowable.timer(15, TimeUnit.SECONDS)))
+				.flatMap(Flowable::fromIterable);
+		Flowable<Feed> source = Flowable.merge(priorityQueue, database);
+
+		this.flow = source.subscribeOn(Schedulers.io())
+				// feed fetching
+				.parallel(config.getApplicationSettings().getBackgroundThreads())
+				.runOn(Schedulers.io())
+				.flatMap(f -> Flowable.fromCallable(() -> worker.update(f)).onErrorResumeNext(e -> {
+					log.error("error while fetching feed", e);
+					return Flowable.empty();
+				}))
+				.sequential()
+				// database updating
+				.parallel(config.getApplicationSettings().getDatabaseUpdateThreads())
+				.runOn(Schedulers.io())
+				.flatMap(fae -> Flowable.fromCallable(() -> updater.update(fae.getFeed(), fae.getEntries())).onErrorResumeNext(e -> {
+					log.error("error while updating database", e);
+					return Flowable.empty();
+				}))
+				.sequential()
+				// end flow
+				.subscribe();
+	}
+
+	public void refreshImmediately(Feed feed) {
+		priorityQueue.onNext(feed);
+	}
+
+	private List<Feed> findNextUpdatableFeeds(int max, Date lastLoginThreshold) {
+		refill.mark();
+		return UnitOfWork.call(sessionFactory, () -> feedDAO.findNextUpdatable(max, lastLoginThreshold));
+	}
+
+	private int getBatchSize() {
+		return Math.min(Flowable.bufferSize(), 3 * config.getApplicationSettings().getBackgroundThreads());
+	}
+
+	private Date getLastLoginThreshold() {
+		return Boolean.TRUE.equals(config.getApplicationSettings().getHeavyLoad()) ? DateUtils.addDays(new Date(), -30) : null;
+	}
+
+	@Override
+	public void stop() {
+		flow.dispose();
+	}
+}

commafeed-server/src/main/java/com/commafeed/backend/feed/FeedRefreshExecutor.java

@@ -1,99 +0,0 @@
-package com.commafeed.backend.feed;
-
-import java.util.concurrent.LinkedBlockingDeque;
-import java.util.concurrent.RejectedExecutionHandler;
-import java.util.concurrent.ThreadPoolExecutor;
-import java.util.concurrent.TimeUnit;
-
-import com.codahale.metrics.Gauge;
-import com.codahale.metrics.MetricRegistry;
-
-import lombok.extern.slf4j.Slf4j;
-
-/**
- * Wraps a {@link ThreadPoolExecutor} instance. Blocks when queue is full instead of rejecting the task. Allow priority queueing by using
- * {@link Task} instead of {@link Runnable}
- * 
- */
-@Slf4j
-public class FeedRefreshExecutor {
-
-	private String poolName;
-	private ThreadPoolExecutor pool;
-	private LinkedBlockingDeque<Runnable> queue;
-
-	public FeedRefreshExecutor(final String poolName, int threads, int queueCapacity, MetricRegistry metrics) {
-		log.info("Creating pool {} with {} threads", poolName, threads);
-		this.poolName = poolName;
-		pool = new ThreadPoolExecutor(threads, threads, 0, TimeUnit.MILLISECONDS, queue = new LinkedBlockingDeque<Runnable>(queueCapacity) {
-			private static final long serialVersionUID = 1L;
-
-			@Override
-			public boolean offer(Runnable r) {
-				Task task = (Task) r;
-				if (task.isUrgent()) {
-					return offerFirst(r);
-				} else {
-					return offerLast(r);
-				}
-			}
-		}) {
-			@Override
-			protected void afterExecute(Runnable r, Throwable t) {
-				if (t != null) {
-					log.error("thread from pool {} threw a runtime exception", poolName, t);
-				}
-			}
-		};
-		pool.setRejectedExecutionHandler(new RejectedExecutionHandler() {
-			@Override
-			public void rejectedExecution(Runnable r, ThreadPoolExecutor e) {
-				log.debug("{} thread queue full, waiting...", poolName);
-				try {
-					Task task = (Task) r;
-					if (task.isUrgent()) {
-						queue.putFirst(r);
-					} else {
-						queue.put(r);
-					}
-				} catch (InterruptedException e1) {
-					log.error(poolName + " interrupted while waiting for queue.", e1);
-				}
-			}
-		});
-
-		metrics.register(MetricRegistry.name(getClass(), poolName, "active"), new Gauge<Integer>() {
-			@Override
-			public Integer getValue() {
-				return pool.getActiveCount();
-			}
-		});
-
-		metrics.register(MetricRegistry.name(getClass(), poolName, "pending"), new Gauge<Integer>() {
-			@Override
-			public Integer getValue() {
-				return queue.size();
-			}
-		});
-	}
-
-	public void execute(Task task) {
-		pool.execute(task);
-	}
-
-	public void shutdown() {
-		pool.shutdownNow();
-		while (!pool.isTerminated()) {
-			try {
-				Thread.sleep(100);
-			} catch (InterruptedException e) {
-				log.error("{} interrupted while waiting for threads to finish.", poolName);
-			}
-		}
-	}
-
-	public interface Task extends Runnable {
-		boolean isUrgent();
-	}
-
-}

commafeed-server/src/main/java/com/commafeed/backend/feed/FeedRefreshIntervalCalculator.java

@@ -22,9 +22,9 @@ public class FeedRefreshIntervalCalculator {
 		this.refreshIntervalMinutes = config.getApplicationSettings().getRefreshIntervalMinutes();
 	}
 
-	public Date onFetchSuccess(FetchedFeed fetchedFeed) {
+	public Date onFetchSuccess(Feed feed) {
 		Date defaultRefreshInterval = getDefaultRefreshInterval();
-		return heavyLoad ? computeRefreshIntervalForHeavyLoad(fetchedFeed.getFeed(), defaultRefreshInterval) : defaultRefreshInterval;
+		return heavyLoad ? computeRefreshIntervalForHeavyLoad(feed, defaultRefreshInterval) : defaultRefreshInterval;
 	}
 
 	public Date onFeedNotModified(Feed feed) {

commafeed-server/src/main/java/com/commafeed/backend/feed/FeedRefreshTaskGiver.java

@@ -1,75 +0,0 @@
-package com.commafeed.backend.feed;
-
-import java.util.concurrent.ExecutorService;
-import java.util.concurrent.Executors;
-
-import javax.inject.Inject;
-import javax.inject.Singleton;
-
-import com.codahale.metrics.Meter;
-import com.codahale.metrics.MetricRegistry;
-import com.commafeed.CommaFeedConfiguration;
-import com.commafeed.backend.dao.FeedDAO;
-
-import io.dropwizard.lifecycle.Managed;
-import lombok.extern.slf4j.Slf4j;
-
-/**
- * Infinite loop fetching feeds from @FeedQueues and queuing them to the {@link FeedRefreshWorker} pool.
- * 
- */
-@Slf4j
-@Singleton
-public class FeedRefreshTaskGiver implements Managed {
-
-	private final FeedQueues queues;
-	private final FeedRefreshWorker worker;
-
-	private final ExecutorService executor;
-
-	private final Meter feedRefreshed;
-
-	@Inject
-	public FeedRefreshTaskGiver(FeedQueues queues, FeedDAO feedDAO, FeedRefreshWorker worker, CommaFeedConfiguration config,
-			MetricRegistry metrics) {
-		this.queues = queues;
-		this.worker = worker;
-
-		executor = Executors.newFixedThreadPool(1);
-		feedRefreshed = metrics.meter(MetricRegistry.name(getClass(), "feedRefreshed"));
-	}
-
-	@Override
-	public void stop() {
-		log.info("shutting down feed refresh task giver");
-		executor.shutdownNow();
-		while (!executor.isTerminated()) {
-			try {
-				Thread.sleep(100);
-			} catch (InterruptedException e) {
-				log.error("interrupted while waiting for threads to finish.");
-			}
-		}
-	}
-
-	@Override
-	public void start() {
-		log.info("starting feed refresh task giver");
-		executor.execute(new Runnable() {
-			@Override
-			public void run() {
-				while (!executor.isShutdown()) {
-					try {
-						FeedRefreshContext context = queues.take();
-						if (context != null) {
-							feedRefreshed.mark();
-							worker.updateFeed(context);
-						}
-					} catch (Exception e) {
-						log.error(e.getMessage(), e);
-					}
-				}
-			}
-		});
-	}
-}

commafeed-server/src/main/java/com/commafeed/backend/feed/FeedRefreshUpdater.java

@@ -20,17 +20,16 @@ import org.hibernate.SessionFactory;
 import com.codahale.metrics.Meter;
 import com.codahale.metrics.MetricRegistry;
 import com.commafeed.CommaFeedConfiguration;
-import com.commafeed.CommaFeedConfiguration.ApplicationSettings;
 import com.commafeed.backend.cache.CacheService;
 import com.commafeed.backend.dao.FeedSubscriptionDAO;
 import com.commafeed.backend.dao.UnitOfWork;
-import com.commafeed.backend.feed.FeedRefreshExecutor.Task;
 import com.commafeed.backend.model.Feed;
 import com.commafeed.backend.model.FeedEntry;
 import com.commafeed.backend.model.FeedEntryContent;
 import com.commafeed.backend.model.FeedSubscription;
 import com.commafeed.backend.model.User;
-import com.commafeed.backend.service.FeedUpdateService;
+import com.commafeed.backend.service.FeedEntryService;
+import com.commafeed.backend.service.FeedService;
 import com.commafeed.backend.service.PubSubService;
 import com.commafeed.frontend.ws.WebSocketMessageBuilder;
 import com.commafeed.frontend.ws.WebSocketSessions;
@@ -40,20 +39,22 @@ import io.dropwizard.lifecycle.Managed;
 import lombok.AllArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 
+/**
+ * Updates the feed in the database and inserts new entries
+ */
 @Slf4j
 @Singleton
 public class FeedRefreshUpdater implements Managed {
 
 	private final SessionFactory sessionFactory;
-	private final FeedUpdateService feedUpdateService;
+	private final FeedService feedService;
+	private final FeedEntryService feedEntryService;
 	private final PubSubService pubSubService;
-	private final FeedQueues queues;
 	private final CommaFeedConfiguration config;
 	private final FeedSubscriptionDAO feedSubscriptionDAO;
 	private final CacheService cache;
 	private final WebSocketSessions webSocketSessions;
 
-	private final FeedRefreshExecutor pool;
 	private final Striped<Lock> locks;
 
 	private final Meter entryCacheMiss;
@@ -62,22 +63,19 @@ public class FeedRefreshUpdater implements Managed {
 	private final Meter entryInserted;
 
 	@Inject
-	public FeedRefreshUpdater(SessionFactory sessionFactory, FeedUpdateService feedUpdateService, PubSubService pubSubService,
-			FeedQueues queues, CommaFeedConfiguration config, MetricRegistry metrics, FeedSubscriptionDAO feedSubscriptionDAO,
+	public FeedRefreshUpdater(SessionFactory sessionFactory, FeedService feedService, FeedEntryService feedEntryService,
+			PubSubService pubSubService, CommaFeedConfiguration config, MetricRegistry metrics, FeedSubscriptionDAO feedSubscriptionDAO,
 			CacheService cache, WebSocketSessions webSocketSessions) {
 		this.sessionFactory = sessionFactory;
-		this.feedUpdateService = feedUpdateService;
+		this.feedService = feedService;
+		this.feedEntryService = feedEntryService;
 		this.pubSubService = pubSubService;
-		this.queues = queues;
 		this.config = config;
 		this.feedSubscriptionDAO = feedSubscriptionDAO;
 		this.cache = cache;
 		this.webSocketSessions = webSocketSessions;
 
-		ApplicationSettings settings = config.getApplicationSettings();
-		int threads = Math.max(settings.getDatabaseUpdateThreads(), 1);
-		pool = new FeedRefreshExecutor("feed-refresh-updater", threads, Math.min(50 * threads, 1000), metrics);
-		locks = Striped.lazyWeakLock(threads * 100000);
+		locks = Striped.lazyWeakLock(100000);
 
 		entryCacheMiss = metrics.meter(MetricRegistry.name(getClass(), "entryCacheMiss"));
 		entryCacheHit = metrics.meter(MetricRegistry.name(getClass(), "entryCacheHit"));
@@ -85,20 +83,6 @@ public class FeedRefreshUpdater implements Managed {
 		entryInserted = metrics.meter(MetricRegistry.name(getClass(), "entryInserted"));
 	}
 
-	@Override
-	public void start() throws Exception {
-	}
-
-	@Override
-	public void stop() throws Exception {
-		log.info("shutting down feed refresh updater");
-		pool.shutdown();
-	}
-
-	public void updateFeed(FeedRefreshContext context) {
-		pool.execute(new EntryTask(context));
-	}
-
 	private AddEntryResult addEntry(final Feed feed, final FeedEntry entry, final List<FeedSubscription> subscriptions) {
 		boolean processed = false;
 		boolean inserted = false;
@@ -123,7 +107,7 @@ public class FeedRefreshUpdater implements Managed {
 			locked2 = lock2.tryLock(1, TimeUnit.MINUTES);
 			if (locked1 && locked2) {
 				processed = true;
-				inserted = UnitOfWork.call(sessionFactory, () -> feedUpdateService.addEntry(feed, entry, subscriptions));
+				inserted = UnitOfWork.call(sessionFactory, () -> feedEntryService.addEntry(feed, entry, subscriptions));
 				if (inserted) {
 					entryInserted.mark();
 				}
@@ -166,76 +150,63 @@ public class FeedRefreshUpdater implements Managed {
 		}
 	}
 
-	private class EntryTask implements Task {
+	public boolean update(Feed feed, List<FeedEntry> entries) {
+		boolean processed = true;
+		boolean insertedAtLeastOneEntry = false;
 
-		private final FeedRefreshContext context;
+		if (!entries.isEmpty()) {
+			List<String> lastEntries = cache.getLastEntries(feed);
+			List<String> currentEntries = new ArrayList<>();
 
-		public EntryTask(FeedRefreshContext context) {
-			this.context = context;
-		}
-
-		@Override
-		public void run() {
-			boolean processed = true;
-			boolean insertedAtLeastOneEntry = false;
-
-			final Feed feed = context.getFeed();
-			List<FeedEntry> entries = context.getEntries();
-			if (entries.isEmpty()) {
-				feed.setMessage("Feed has no entries");
-			} else {
-				List<String> lastEntries = cache.getLastEntries(feed);
-				List<String> currentEntries = new ArrayList<>();
-
-				List<FeedSubscription> subscriptions = null;
-				for (FeedEntry entry : entries) {
-					String cacheKey = cache.buildUniqueEntryKey(feed, entry);
-					if (!lastEntries.contains(cacheKey)) {
-						log.debug("cache miss for {}", entry.getUrl());
-						if (subscriptions == null) {
-							subscriptions = UnitOfWork.call(sessionFactory, () -> feedSubscriptionDAO.findByFeed(feed));
-						}
-						AddEntryResult addEntryResult = addEntry(feed, entry, subscriptions);
-						processed &= addEntryResult.processed;
-						insertedAtLeastOneEntry |= addEntryResult.inserted;
-
-						entryCacheMiss.mark();
-					} else {
-						log.debug("cache hit for {}", entry.getUrl());
-						entryCacheHit.mark();
+			List<FeedSubscription> subscriptions = null;
+			for (FeedEntry entry : entries) {
+				String cacheKey = cache.buildUniqueEntryKey(feed, entry);
+				if (!lastEntries.contains(cacheKey)) {
+					log.debug("cache miss for {}", entry.getUrl());
+					if (subscriptions == null) {
+						subscriptions = UnitOfWork.call(sessionFactory, () -> feedSubscriptionDAO.findByFeed(feed));
 					}
+					AddEntryResult addEntryResult = addEntry(feed, entry, subscriptions);
+					processed &= addEntryResult.processed;
+					insertedAtLeastOneEntry |= addEntryResult.inserted;
 
-					currentEntries.add(cacheKey);
+					entryCacheMiss.mark();
+				} else {
+					log.debug("cache hit for {}", entry.getUrl());
+					entryCacheHit.mark();
 				}
-				cache.setLastEntries(feed, currentEntries);
 
-				if (subscriptions == null) {
-					feed.setMessage("No new entries found");
-				} else if (insertedAtLeastOneEntry) {
-					List<User> users = subscriptions.stream().map(FeedSubscription::getUser).collect(Collectors.toList());
-					cache.invalidateUnreadCount(subscriptions.toArray(new FeedSubscription[0]));
-					cache.invalidateUserRootCategory(users.toArray(new User[0]));
+				currentEntries.add(cacheKey);
+			}
+			cache.setLastEntries(feed, currentEntries);
 
-					// notify over websocket
-					subscriptions.forEach(sub -> webSocketSessions.sendMessage(sub.getUser(), WebSocketMessageBuilder.newFeedEntries(sub)));
-				}
-			}
+			if (subscriptions == null) {
+				feed.setMessage("No new entries found");
+			} else if (insertedAtLeastOneEntry) {
+				List<User> users = subscriptions.stream().map(FeedSubscription::getUser).collect(Collectors.toList());
+				cache.invalidateUnreadCount(subscriptions.toArray(new FeedSubscription[0]));
+				cache.invalidateUserRootCategory(users.toArray(new User[0]));
 
-			if (config.getApplicationSettings().getPubsubhubbub()) {
-				handlePubSub(feed);
-			}
-			if (!processed) {
-				// requeue asap
-				feed.setDisabledUntil(new Date(0));
+				// notify over websocket
+				subscriptions.forEach(sub -> webSocketSessions.sendMessage(sub.getUser(), WebSocketMessageBuilder.newFeedEntries(sub)));
 			}
+		}
+
+		if (Boolean.TRUE.equals(config.getApplicationSettings().getPubsubhubbub())) {
+			handlePubSub(feed);
+		}
+		if (!processed) {
+			// requeue asap
+			feed.setDisabledUntil(new Date(0));
+		}
+
+		if (insertedAtLeastOneEntry) {
 			feedUpdated.mark();
-			queues.giveBack(feed);
 		}
 
-		@Override
-		public boolean isUrgent() {
-			return context.isUrgent();
-		}
+		UnitOfWork.run(sessionFactory, () -> feedService.save(feed));
+
+		return processed;
 	}
 
 	@AllArgsConstructor