release 6.2.0

chore(deps): update dependency npm to v11.9.0

.gitattributes

@@ -0,0 +1,3 @@
+*       text eol=lf
+*.cmd   text eol=crlf
+*.png   binary

.github/stale.yml

@@ -1,19 +1,19 @@
-# Number of days of inactivity before an issue becomes stale
+# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 60
+daysUntilStale: 60
-# Number of days of inactivity before a stale issue is closed
+# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
+daysUntilClose: 7
-# Issues with these labels will never be considered stale
+# Issues with these labels will never be considered stale
-exemptLabels:
+exemptLabels:
-  - pinned
+  - pinned
-  - security
+  - security
-  - enhancement
+  - enhancement
-  - bug
+  - bug
-# Label to use when marking an issue as stale
+# Label to use when marking an issue as stale
-staleLabel: wontfix
+staleLabel: wontfix
-# Comment to post when marking an issue as stale. Set to `false` to disable
+# Comment to post when marking an issue as stale. Set to `false` to disable
-markComment: >
+markComment: >
-  This issue has been automatically marked as stale because it has not had
+  This issue has been automatically marked as stale because it has not had
-  recent activity. It will be closed if no further activity occurs. Thank you
+  recent activity. It will be closed if no further activity occurs. Thank you
-  for your contributions.
+  for your contributions.
-# Comment to post when closing a stale issue. Set to `false` to disable
+# Comment to post when closing a stale issue. Set to `false` to disable
 closeComment: false

.github/workflows/ci.yml

@@ -1,183 +1,278 @@
-name: ci
+name: ci
-
+permissions:
-on: [ push ]
+  contents: read
-
+
-env:
+on:
-  JAVA_VERSION: 21
+  push:
-  DOCKER_BUILD_SUMMARY: false
+  pull_request:
-
+
-jobs:
+env:
-  build-linux:
+  JAVA_VERSION: 25
-    runs-on: ubuntu-latest
+  DOCKER_BUILD_SUMMARY: false
-    strategy:
+
-      matrix:
+jobs:
-        database: [ "h2", "postgresql", "mysql", "mariadb" ]
+  build:
-
+    if: github.event_name != 'pull_request' || github.actor != 'renovate[bot]' # renovate already triggers the build on pushes
-    steps:
+
-      # Checkout
+    strategy:
-      - name: Checkout
+      matrix:
-        uses: actions/checkout@v4
+        os: [ "ubuntu-latest", "ubuntu-22.04-arm", "windows-latest" ]
-        with:
+        database: [ "h2", "postgresql", "mysql", "mariadb" ]
-          fetch-depth: 0
+
-
+    runs-on: ${{ matrix.os }}
-      # Setup
+    steps:
-      - name: Set up QEMU
+      # Checkout
-        uses: docker/setup-qemu-action@v3
+      - name: Checkout
-
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
-      - name: Set up Docker Buildx
+        with:
-        uses: docker/setup-buildx-action@v3
+          fetch-depth: 0
-
+
-      - name: Set up GraalVM
+      # Setup
-        uses: graalvm/setup-graalvm@v1
+      - name: Set up GraalVM
-        with:
+        uses: graalvm/setup-graalvm@54b4f5a65c1a84b2fdfdc2078fe43df32819e4b1 # v1
-          java-version: ${{ env.JAVA_VERSION }}
+        with:
-          distribution: "graalvm"
+          java-version: ${{ env.JAVA_VERSION }}
-          cache: "maven"
+          distribution: "graalvm"
-
+          cache: "maven"
-      # Build & Test
+
-      - name: Build with Maven
+      - name: Install Playwright dependencies
-        run: mvn --batch-mode --no-transfer-progress install -Pnative -P${{ matrix.database }}
+        run: sudo apt-get install -y libgbm1
-
+        if: matrix.os != 'windows-latest'
-      # Upload artifacts
+
-      - name: Upload cross-platform app
+      # Build & Test
-        uses: actions/upload-artifact@v4
+      - name: Build with Maven
-        with:
+        run: mvn --batch-mode --no-transfer-progress install -Pnative -P${{ matrix.database }} -DskipTests=${{ matrix.os == 'windows-latest' && matrix.database != 'h2' }}
-          name: commafeed-${{ matrix.database }}-jvm
+
-          path: commafeed-server/target/commafeed-*.zip
+      # Build pages
-
+      - name: Create pages directory structure
-      - name: Upload native executable
+        run: mkdir -p target/pages/documentation/custom-css
-        uses: actions/upload-artifact@v4
+
-        with:
+      - name: Convert readme file to html
-          name: commafeed-${{ matrix.database }}-${{ runner.os }}-${{ runner.arch }}
+        uses: jaywcjlove/markdown-to-html-cli@cff9330af4ca8048b197a76d9eb1db189c2a7cee # v5.0.4
-          path: commafeed-server/target/commafeed-*-runner
+        with:
-
+          source: README.md
-      # Docker
+          output: target/pages/index.html
-      - name: Login to Container Registry
+
-        uses: docker/login-action@v3
+      - name: Convert config documentation to html
-        if: ${{ github.ref_type == 'tag' || github.ref_name == 'master' }}
+        uses: jaywcjlove/markdown-to-html-cli@cff9330af4ca8048b197a76d9eb1db189c2a7cee # v5.0.4
-        with:
+        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          source: commafeed-server/target/quarkus-generated-doc/config/commafeed-server.md
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
+          output: target/pages/documentation/index.html
-
+
-      ## tags
+      - name: Convert custom css documentation to html
-      - name: Docker build and push tag - native
+        uses: jaywcjlove/markdown-to-html-cli@cff9330af4ca8048b197a76d9eb1db189c2a7cee # v5.0.4
-        uses: docker/build-push-action@v6
+        with:
-        if: ${{ github.ref_type == 'tag' }}
+          source: documentation/CUSTOMCSS.md
-        with:
+          output: target/pages/documentation/custom-css/index.html
-          context: .
+
-          file: commafeed-server/src/main/docker/Dockerfile.native
+      # Upload artifacts
-          push: true
+      - name: Upload cross-platform app
-          platforms: linux/amd64
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
-          tags: |
+        if: matrix.os == 'ubuntu-latest' # we only need to upload the cross-platform artifact once per database
-            athou/commafeed:latest-${{ matrix.database }}
+        with:
-            athou/commafeed:${{ github.ref_name }}-${{ matrix.database }}
+          name: commafeed-${{ matrix.database }}-jvm
-
+          path: commafeed-server/target/commafeed-*.zip
-      - name: Docker build and push tag - jvm
+
-        uses: docker/build-push-action@v6
+      - name: Upload native executable
-        if: ${{ github.ref_type == 'tag' }}
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
-        with:
+        with:
-          context: .
+          name: commafeed-${{ matrix.database }}-${{ runner.os }}-${{ runner.arch }}
-          file: commafeed-server/src/main/docker/Dockerfile.jvm
+          path: commafeed-server/target/commafeed-*-runner*
-          push: true
+
-          platforms: linux/amd64,linux/arm64/v8
+      - name: Upload pages
-          tags: |
+        uses: actions/upload-pages-artifact@7b1f4a764d45c48632c6b24a0339c27f5614fb0b # v4
-            athou/commafeed:latest-${{ matrix.database }}-jvm
+        if: matrix.os == 'ubuntu-latest' && matrix.database == 'h2' # we only need to upload the pages once
-            athou/commafeed:${{ github.ref_name }}-${{ matrix.database }}-jvm
+        with:
-
+          path: target/pages
-      ## master
+
-      - name: Docker build and push master - native
+  docker:
-        uses: docker/build-push-action@v6
+    runs-on: ubuntu-latest
-        if: ${{ github.ref_name == 'master' }}
+    needs: build
-        with:
+    env:
-          context: .
+      DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          file: commafeed-server/src/main/docker/Dockerfile.native
+
-          push: true
+    strategy:
-          platforms: linux/amd64
+      matrix:
-          tags: athou/commafeed:master-${{ matrix.database }}
+        database: [ "h2", "postgresql", "mysql", "mariadb" ]
-
+
-      - name: Docker build and push master - jvm
+    steps:
-        uses: docker/build-push-action@v6
+      # Checkout
-        if: ${{ github.ref_name == 'master' }}
+      - name: Checkout
-        with:
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
-          context: .
+        with:
-          file: commafeed-server/src/main/docker/Dockerfile.jvm
+          fetch-depth: 0
-          push: true
+
-          platforms: linux/amd64,linux/arm64/v8
+      # Setup
-          tags: athou/commafeed:master-${{ matrix.database }}-jvm
+      - name: Set up QEMU
-
+        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3
-  build-windows:
+
-    runs-on: windows-latest
+      - name: Set up Docker Buildx
-    strategy:
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3
-      matrix:
+
-        database: [ "h2", "postgresql", "mysql", "mariadb" ]
+      - name: Install required packages
-
+        run: sudo apt-get install -y rename unzip
-    steps:
+
-      # Checkout
+      # Prepare artifacts
-      - name: Configure git to checkout as-is
+      - name: Download artifacts
-        run: git config --global core.autocrlf false
+        uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7
-
+        with:
-      - name: Checkout
+          pattern: commafeed-${{ matrix.database }}-*
-        uses: actions/checkout@v4
+          path: ./artifacts
-        with:
+          merge-multiple: true
-          fetch-depth: 0
+
-
+      - name: Set the exec flag on the native executables
-      # Setup
+        run: chmod +x artifacts/*-runner
-      - name: Set up GraalVM
+
-        uses: graalvm/setup-graalvm@v1
+      - name: Rename native executables to match buildx TARGETARCH
-        with:
+        run: |
-          java-version: ${{ env.JAVA_VERSION }}
+          rename 's/x86_64/amd64/g' artifacts/*
-          distribution: "graalvm"
+          rename 's/aarch_64/arm64/g' artifacts/*
-          cache: "maven"
+
-
+      - name: Unzip jvm package
-      # Build & Test
+        run: |
-      - name: Build with Maven
+          unzip artifacts/*-jvm.zip -d artifacts/extracted-jvm-package
-        run: mvn --batch-mode --no-transfer-progress install -Pnative -P${{ matrix.database }} -DskipTests=${{ matrix.database != 'h2' }}
+          rename 's/commafeed-.*/quarkus-app/g' artifacts/extracted-jvm-package/*
-
+
-      # Upload artifacts
+      # Docker
-      - name: Upload native executable
+      - name: Login to Container Registry
-        uses: actions/upload-artifact@v4
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3
-        with:
+        if: ${{ env.DOCKERHUB_USERNAME != '' }}
-          name: commafeed-${{ matrix.database }}-${{ runner.os }}-${{ runner.arch }}
+        with:
-          path: commafeed-server/target/commafeed-*-runner.exe
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
-
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
-  release:
+
-    runs-on: ubuntu-latest
+      ## build but don't push for PRs and renovate
-    needs:
+      - name: Docker build - native
-      - build-linux
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6
-      - build-windows
+        with:
-    if: github.ref_type == 'tag'
+          context: .
-
+          file: commafeed-server/src/main/docker/Dockerfile.native
-    steps:
+          push: false
-      - name: Checkout
+          platforms: linux/amd64,linux/arm64/v8
-        uses: actions/checkout@v4
+
-        with:
+      - name: Docker build - jvm
-          fetch-depth: 0
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6
-
+        with:
-      - name: Download artifacts
+          context: .
-        uses: actions/download-artifact@v4
+          file: commafeed-server/src/main/docker/Dockerfile.jvm
-        with:
+          push: false
-          pattern: commafeed-*
+          platforms: linux/amd64,linux/arm64/v8
-          path: ./artifacts
+
-          merge-multiple: true
+      ## build and push tag
-
+      - name: Docker build and push tag - native
-      - name: Extract Changelog Entry
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6
-        uses: mindsers/changelog-reader-action@v2
+        if: ${{ github.ref_type == 'tag' }}
-        id: changelog_reader
+        with:
-        with:
+          context: .
-          version: ${{ github.ref_name }}
+          file: commafeed-server/src/main/docker/Dockerfile.native
-
+          push: ${{ env.DOCKERHUB_USERNAME != '' }}
-      - name: Create GitHub release
+          platforms: linux/amd64,linux/arm64/v8
-        uses: ncipollo/release-action@v1
+          tags: |
-        with:
+            athou/commafeed:latest-${{ matrix.database }}
-          name: CommaFeed ${{ github.ref_name }}
+            athou/commafeed:${{ github.ref_name }}-${{ matrix.database }}
-          body: ${{ steps.changelog_reader.outputs.changes }}
+
-          artifacts: ./artifacts/*
+      - name: Docker build and push tag - jvm
-
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6
-      - name: Update Docker Hub Description
+        if: ${{ github.ref_type == 'tag' }}
-        uses: peter-evans/dockerhub-description@v4
+        with:
-        with:
+          context: .
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          file: commafeed-server/src/main/docker/Dockerfile.jvm
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
+          push: ${{ env.DOCKERHUB_USERNAME != '' }}
-          repository: athou/commafeed
+          platforms: linux/amd64,linux/arm64/v8
-          short-description: ${{ github.event.repository.description }}
+          tags: |
-          readme-filepath: commafeed-server/src/main/docker/README.md
+            athou/commafeed:latest-${{ matrix.database }}-jvm
+            athou/commafeed:${{ github.ref_name }}-${{ matrix.database }}-jvm
+
+      ## build and push master
+      - name: Docker build and push master - native
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6
+        if: ${{ github.ref_name == 'master' }}
+        with:
+          context: .
+          file: commafeed-server/src/main/docker/Dockerfile.native
+          push: ${{ env.DOCKERHUB_USERNAME != '' }}
+          platforms: linux/amd64,linux/arm64/v8
+          tags: athou/commafeed:master-${{ matrix.database }}
+
+      - name: Docker build and push master - jvm
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6
+        if: ${{ github.ref_name == 'master' }}
+        with:
+          context: .
+          file: commafeed-server/src/main/docker/Dockerfile.jvm
+          push: ${{ env.DOCKERHUB_USERNAME != '' }}
+          platforms: linux/amd64,linux/arm64/v8
+          tags: athou/commafeed:master-${{ matrix.database }}-jvm
+
+  release:
+    runs-on: ubuntu-latest
+    needs:
+      - build
+      - docker
+    permissions:
+      contents: write
+    if: github.ref_type == 'tag'
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+        with:
+          fetch-depth: 0
+
+      - name: Download artifacts
+        uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7
+        with:
+          pattern: commafeed-*
+          path: ./artifacts
+          merge-multiple: true
+
+      - name: Set the exec flag on the native executables
+        run: chmod +x artifacts/*-runner
+
+      - name: Extract Changelog Entry
+        uses: mindsers/changelog-reader-action@32aa5b4c155d76c94e4ec883a223c947b2f02656 # v2
+        id: changelog_reader
+        with:
+          version: ${{ github.ref_name }}
+
+      - name: Create GitHub release
+        uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1
+        with:
+          name: CommaFeed ${{ github.ref_name }}
+          body: ${{ steps.changelog_reader.outputs.changes }}
+          artifacts: ./artifacts/*
+
+
+  update-dockerhub-description:
+    runs-on: ubuntu-latest
+    needs: release
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+        with:
+          fetch-depth: 0
+
+      - name: Update Docker Hub Description
+        uses: peter-evans/dockerhub-description@1b9a80c056b620d92cedb9d9b5a223409c68ddfa # v5
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+          repository: athou/commafeed
+          short-description: ${{ github.event.repository.description }}
+          readme-filepath: commafeed-server/src/main/docker/README.md
+
+
+  deploy-pages:
+    runs-on: ubuntu-latest
+    needs: release
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4
+        id: deployment

.mvn/wrapper/maven-wrapper.properties

@@ -1,18 +1,3 @@
-# Licensed to the Apache Software Foundation (ASF) under one
+wrapperVersion=3.3.4
-# or more contributor license agreements.  See the NOTICE file
+distributionType=only-script
-# distributed with this work for additional information
+distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.12/apache-maven-3.9.12-bin.zip
-# regarding copyright ownership.  The ASF licenses this file
-# to you under the Apache License, Version 2.0 (the
-# "License"); you may not use this file except in compliance
-# with the License.  You may obtain a copy of the License at
-#
-#   http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing,
-# software distributed under the License is distributed on an
-# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-# KIND, either express or implied.  See the License for the
-# specific language governing permissions and limitations
-# under the License.
-distributionType=only-script
-distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.9/apache-maven-3.9.9-bin.zip

CHANGELOG.md

@@ -1,424 +1,544 @@
-# Changelog
+# Changelog
-
+
-## [5.3.2]
+## [6.2.0]
-
+
-- Fixed an issue that could cause some images from not being rendered correctly (#1587)
+- Starred entries are no longer deleted after a certain amount of time, they are now kept indefinitely. The new `commafeed.database.cleanup.keep-starred-entries` setting can be disabled to restore the previous behavior if you want to keep deleting starred entries during normal entries cleanup (#1581)
-
+
-## [5.3.1]
+## [6.1.1]
-
+
-- Fixed an issue that could cause some HTTP feeds to return a 400 error (#1572)
+- Fix old starred entries not loading if they were marked as read (#2031)
-
+
-## [5.3.0]
+## [6.1.0]
-
+
-- Added a setting to set a cooldown on the "fetch all my feeds" action, disabled by default (#1556)
+- When clicking on the password reset link, a random password is no longer generated automatically. The user is now redirected to a page where they can set their own password (#2023)
-- Fixed an issue that could cause entries to not correctly load when using the "next" header button (#1557)
+- Use browser preferred language instead of English when using CommaFeed for the first time (#2018)
-
+- The profile menu is now closed when scrolling the page (#2019)
-## [5.2.0]
+- The "disable pull to refresh" feature is now disabled by default (#2030)
-
+
-- Added an option to keep a number of entries above the selected entry when scrolling
+## [6.0.0]
-- Added a cache to the HTTP client to reduce the number of requests made to feeds when subscribing (#1431)
+
-- Feeds are no longer refreshed between the moment its last user unsubscribes and the moment the feed is cleaned up (every hour)
+- When booting CommaFeed for the first time, the default "admin" account is no longer created automatically. A setup wizard will guide you through the creation of an admin account
-- Fixed an issue that could cause entries to not correctly load when using keyboard navigation (#1557)
+- Default password complexity requirements have been lowered for local network deployments, where strict password rules are often unnecessary. The `commafeed.users.strict-password-policy` setting has been replaced by `commafeed.users.minimum-password-length` with a default value of `4` (#1916)
-
+- Email addresses are no longer required when creating users and when they update their profile. The `commafeed.users.email-address-required` setting has been added to restore the previous behavior (#1914)
-## [5.1.1]
+- Java 25+ is now required to build and run CommaFeed
-
+
-- Fixed database migration issue when upgrading from 5.0.0 to 5.1.0 on MariaDB (#1544)
+## [5.12.1]
-- When feeds without unread entries are hidden from the tree, the feed is displayed in the tree until another one is selected (#1543)
+
-
+- The favicon is now crispier (#1978)
-## [5.1.0]
+- The ReadKit iOS app now works via the Fever API (#1602)
-
+
-- Added a setting for showing/hiding unread count in the browser's tab title/favicon (#1518)
+## [5.12.0]
-- Fixed an issue that could prevent the app from starting on some systems (#1532)
+
-- Added a cache busting filter for the webapp index.html and openapi documentation to make sure they are always up to date
+- Added a setting to disable the "disable pull to refresh" feature because it messes with some browsers (#1168)
-- Reduced database cleanup log verbosity
+- Emojis in feeds are now correctly displayed (#1955)
-
+- Don't show "Star/Unstar" in the context menu if the entry is too old to be starred (#1935)
-## [5.0.2]
+- Invalid relative urls in feeds no longer prevent those feeds from being parsed (#1939)
-
+- Fix an issue that could prevent large feeds from being parsed when using Java 24+ (#1961)
-- Fix favicon fetching for Youtube channels in native mode when Google auth key is set
+- Enforce user password validation when created in the admin view (#1937)
-- Fix an error that appears in the logs when fetching some favicons
+- The process in the docker native image is now called "commafeed" instead of "application"
-
+
-## [5.0.1]
+## [5.11.1]
-
+
-- Configure native compilation to support older CPU architectures (#1524)
+- The search limit of 3 characters has been removed (#1887)
-
+- Fix an issue that caused feed filtering expressions to be incorrectly converted to lowercase when saving them (#1899)
-## [5.0.0]
+
-
+## [5.11.0]
-CommaFeed is now powered by Quarkus instead of Dropwizard. Read the rationale behind this change in
+
-the [announcement](https://github.com/Athou/commafeed/discussions/1517).
+- Add an option to navigate to the next unread category/feed when marking all entries as read (#1807)
-The gist of it is that CommaFeed can now be compiled to a native binary, resulting in blazing fast startup times (around
+- Google Analytics support has been removed
-0.3s) and very low memory footprint (< 50M).
+
-
+## [5.10.0]
-- CommaFeed now has a different package for each supported database.
+
-    - If you are deploying CommaFeed with a precompiled package, please
+- Add an indicator next to each feed's unread count in the tree to show when new entries are discovered while the app is open (#1762)
-      read [this section of the README](https://github.com/Athou/commafeed/tree/master?tab=readme-ov-file#download-a-precompiled-package).
+- Feeds with uppercase HTTP:// or HTTPS:// URLs are now correctly handled again
-    - If you are building CommaFeed from sources, please
+- The aarch64 native executable now also works on the Raspberry Pi 5 (#1795)
-      read [this section of the README](https://github.com/Athou/commafeed/tree/master?tab=readme-ov-file#build-from-sources).
+- Improve general performance of the UI by reducing the number of re-renders, especially when a lot of entries are displayed (#1087)
-    - If you are using the Docker image, please read the instructions on
+
-      the [Docker Hub page](https://hub.docker.com/r/athou/commafeed).
+## [5.9.0]
-- Due to the switch to Quarkus, the way CommaFeed is configured is very different (the `config.yml` file is gone).
+
-  Please
+- A lot of CSS classes have been added to the elements of the application to ease custom CSS rules (#1757)
-  read [this section of the README](https://github.com/Athou/commafeed/tree/master?tab=readme-ov-file#configuration).
+- Added a link in the README to the [documentation](https://athou.github.io/commafeed/documentation/custom-css/) of the new CSS classes
-  Note that a lot of configuration elements have been removed or renamed and are now nested/grouped by feature.
+- Static resources are now cached for much longer (#1782)
-- Added a setting to prevent parsing large feeds to avoid out of memory errors. The default is 5MB.
+
-- Use a different icon for filtering unread entries and marking an entry as read (#1506)
+## [5.8.0]
-- Added various HTML attributes to ease custom JS/CSS customization (#1507)
+
-- The Redis cache has been removed. There have been multiple enhancements to the feed refresh engine and it is no longer
+- A color picker is now available on the settings page to change the orange accent of the application (#1598)
-  needed, even for instances with a large number of feeds.
+- A font size slider is now available to change the size of the text of feed entries (#1462)
-- The H2 migration tool that automatically upgrades H2 databases from format 2 to 3 has been removed. If you're using
+- The "mark all as read" confirmation setting now also applies to the "shift+a" keyboard shortcut (#1744)
-  the H2 embedded database, please upgrade to at least version 4.3.0 before upgrading to CommaFeed 5.0.0.
+- CommaFeed wil try to match the language of the browser before defaulting to english (#1767)
-
+- The default value for the number of entries to keep above the selected entry when scrolling is now 1 instead of 0 to match what other feed readers do
-## [4.6.0]
+
-
+## [5.7.0]
-- switched from Temurin to OpenJ9 as the JVM used in the Docker image, resulting in memory usage reduction by up to 50%
+
-- fix an issue that could cause old entries to reappear if they were updated by their author (#1486)
+- Add Shift+J/Shift+K keyboard shortcuts to navigate to the next/previous feed or category with unread entries (#1558)
-- show all entries regardless of their read status when searching with keywords, even if the ui is configured to show
+- Add the referrer "no-referrer" meta to index.html (#1724)
-  unread entries only
+- Load custom JS code when the app is done loading (#1724)
-
+- Correctly handle feeds that return an unmodified Last-Modified header but a different ETag header (#1746)
-## [4.5.0]
+- Restore gzip compression of responses that was accidentaly disabled since 5.0.0
-
+- Fix tooltips not showing up in mobile view
-- significantly reduce the time needed to retrieve entries or mark them as read, especially when there are a lot of
+- Fix the bookmarklet generator on the About page
-  entries (#1452)
+
-- fix a race condition where a feed could be refreshed before it was created in the database
+## [5.6.1]
-- fix an issue that could cause the websocket notification to contain the wrong number of unread entries when using
+
-  mysql/mariadb
+- Restore support for iframes in feed entries (#1688)
-- fix an error when trying to mark all starred entries as read
+- There is now a package available for Arch Linux thanks to @dcelasun (#1691)
-- remove the `onlyIds` parameter from REST endpoints since retrieving all the entries is now just as fast
+
-- remove support for microsoft sqlserver because it's not covered with integration tests (please open an issue if you'd
+## [5.6.0]
-  like it back)
+
-
+- To better respect the bandwidth of feed owners, the default value of `commafeed.feed-refresh.interval-empirical` is now true. This means feeds no longer refresh exactly every 5 minutes (the default value of `commafeed.feed-refresh.interval`) but between 5 minutes and 4 hours (the default value of the new `commafeed.feed-refresh.max-interval` setting). The interval is calculated based on feed activity, so highly active feeds refresh more often (#1677)
-## [4.4.1]
+- Many previously hardcoded values used in feed refresh interval calculation are now exposed as settings (#1677)
-
+- Access to local addresses is now blocked to mitigate server-side request forgery (SSRF) attacks, which could potentially expose internal resources. You might want to disable the new `commafeed.http-client.block-local-addresses` setting if you subscribe to feeds only available on your local network and you trust all your users
-- fix vertical scrolling issues with Safari (#1168)
+- If a feed responds with a "429 - Too many requests" response, a backoff mechanism is triggered when the response does not contain a "Retry-After" header
-- the default value for new users for the "star entry" button and the "open in new tab" button in the entry headers is
+
-  now "on desktop" instead of "always"
+## [5.5.0]
-- the "keyboard shortcuts" help page now shows "Cmd" instead of "Ctrl" on macOS (#1389)
+
-- remove a superfluous feed fetch when subscribing to a feed (#1431)
+- CommaFeed now honors the Retry-After response header and will not try to refresh a feed sooner than the value of this header
-- the Docker image now uses Java 21
+- Audio enclosures (e.g. podcasts) now fill available entry width
-
+- Fix an issue with some labels not correctly internationalized
-## [4.4.0]
+
-
+## [5.4.0]
-- add support for sharing using the browser native capabilities if available (#1255)
+
-- add a button in the entry headers to star an entry (#1025)
+- An arm64 native executable is now available for download on the releases page
-- add a button in the entry headers to open links in a new tab (#1333)
+- The native executable Docker image now supports arm64
-- add two options in the settings to toggle those buttons
+- Fixed an issue with feeds that declared an invalid DOCTYPE (#1260)
-- accept .opml file extension when importing and export with the .opml extension
+
-- the "mark as read" option is no longer shown in the context menu for entries that are too old to be marked as read (
+## [5.3.6]
-  older than `keepStatusDays`) (#1303)
+
-
+- Ignore invalid Cache-Control header values (#1619)
-## [4.3.3]
+
-
+## [5.3.5]
-- fix OPML import (#1279)
+
-
+- Fixed an issue with the aspect ratio of images of some feeds (#1595)
-## [4.3.2]
+- CommaFeed now honors the Cache-Control response header and will not try to refresh a feed sooner than its max-age property (#1615)
-
+- Added support for compilation with JDK 23+. If you're building CommaFeed from sources with a JDK 17 or 21, you may need to update it to the most recent patch version to support `-proc:full` (#1618)
-- added support for unix sockets (#1278)
+
-
+## [5.3.4]
-## [4.3.1]
+
-
+- Added support for Internationalized Domain Names (#1588)
-- fix an issue that prevents new feeds from being added when mysql/mariadb is used as the database and the database
+
-  timezone is not UTC (#1239)
+## [5.3.3]
-- videos in enclosures can no longer have a width larger than the page (#1240)
+
-
+- Removed image bottom margins (#1587)
-## [4.3.0]
+
-
+## [5.3.2]
-- h2 (the embedded database) has been upgraded to 2.2.224
+
-    - this version uses a different file format than 2.1.x, the first time you start CommaFeed with this version, the
+- Fixed an issue that could cause some images from not being rendered correctly (#1587)
-      database will be automatically converted to the new format
+
-- add a setting to completely disable scrolling to selected entry (#1157)
+## [5.3.1]
-- add a css class reflecting the current view mode to ease custom css rules (#1232)
+
-- fix an issue that prevents new feeds from being added when mysql/mariadb is used as the database (#1239)
+- Fixed an issue that could cause some HTTP feeds to return a 400 error (#1572)
-
+
-## [4.2.1]
+## [5.3.0]
-
+
-- fix an issue that caused the tree to show an incorrect unread count after a websocket notification because entries
+- Added a setting to set a cooldown on the "fetch all my feeds" action, disabled by default (#1556)
-  that were already marked as read by a filtering expression were not ignored (#1191)
+- Fixed an issue that could cause entries to not correctly load when using the "next" header button (#1557)
-
+
-## [4.2.0]
+## [5.2.0]
-
+
-- add a setting to display the action buttons in the footer instead of in the header on mobile (#1121)
+- Added an option to keep a number of entries above the selected entry when scrolling
-- the websocket notification now contains everything needed to update the UI, the client no longer needs to make an API
+- Added a cache to the HTTP client to reduce the number of requests made to feeds when subscribing (#1431)
-  call to get the latest data when receiving the notification
+- Feeds are no longer refreshed between the moment its last user unsubscribes and the moment the feed is cleaned up (every hour)
-- add a workaround to the Fever API for the Unread iOS app (#1188)
+- Fixed an issue that could cause entries to not correctly load when using keyboard navigation (#1557)
-- fix an issue that caused dates to be saved incorrectly if the database server and the application server were in
+
-  different timezones (#1187)
+## [5.1.1]
-
+
-## [4.1.0]
+- Fixed database migration issue when upgrading from 5.0.0 to 5.1.0 on MariaDB (#1544)
-
+- When feeds without unread entries are hidden from the tree, the feed is displayed in the tree until another one is selected (#1543)
-- it is now possible to open the sidebar on mobile by swiping to the right (#1098)
+
-- swiping to mark entries as read/unread changed from swiping right to left because swiping right now opens the sidebar
+## [5.1.0]
-- the full hierarchy of categories are now displayed in the category dropdown (#1045)
+
-- added a setting `maxEntriesAgeDays` to delete old entries based on their age during database cleanup.
+- Added a setting for showing/hiding unread count in the browser's tab title/favicon (#1518)
-  The setting is disabled by default for existing installations, except for the docker image where it is enabled and set
+- Fixed an issue that could prevent the app from starting on some systems (#1532)
-  to 365 days
+- Added a cache busting filter for the webapp index.html and openapi documentation to make sure they are always up to date
-- if user registrations are disabled on your instance which is the default behavior, users are redirected on the login
+- Reduced database cleanup log verbosity
-  page instead of the welcome page when not logged in (#1185)
+
-- the sidebar resizer is no longer shown in the middle of the screen on mobile
+## [5.0.2]
-- when using the system color scheme and the system is using a dark theme, feed entries no longer flicker on load
+
-- the demo account (if enabled) cannot register custom javascript code anymore
+- Fix favicon fetching for Youtube channels in native mode when Google auth key is set
-- removed the usage of `toSorted` in the client because older browsers do not support it (#1183)
+- Fix an error that appears in the logs when fetching some favicons
-- the openapi documentation is no longer cached by the browser so you always have access to the latest version
+
-- added a memory management section to the readme, reading it is recommended if you are running CommaFeed on a server
+## [5.0.1]
-  with limited memory
+
-- fixed an issue that caused users without an email address set to be unable to edit their profile (#1184)
+- Configure native compilation to support older CPU architectures (#1524)
-
+
-## [4.0.0]
+## [5.0.0]
-
+
-- migrated from dropwizard 2 to dropwizard 4, Java 17+ is now required
+CommaFeed is now powered by Quarkus instead of Dropwizard. Read the rationale behind this change in
-- entries that were fetched and inserted in the database but not yet shown in the UI are no longer marked as read when
+the [announcement](https://github.com/Athou/commafeed/discussions/1517).
-  marking all entries as read
+The gist of it is that CommaFeed can now be compiled to a native binary, resulting in blazing fast startup times (around
-- your custom sidebar width is now persisted in the local storage of your browser
+0.3s) and very low memory footprint (< 50M).
-- there is now a third color scheme option in addition to light and dark: system (follows the system color scheme)
+
-- added support for youtube playlist favicons
+- CommaFeed now has a different package for each supported database.
-- custom JS code is now executed when the app is done loading instead of when the page is loaded
+    - If you are deploying CommaFeed with a precompiled package, please
-- the favicon is now correctly returned for feeds that return an invalid content type
+      read [this section of the README](https://github.com/Athou/commafeed/tree/master?tab=readme-ov-file#download-a-precompiled-package).
-- the feed refresh engine now uses httpclient5 with connection pooling and no longer creates a new client for each
+    - If you are building CommaFeed from sources, please
-  request, reducing CPU usage
+      read [this section of the README](https://github.com/Athou/commafeed/tree/master?tab=readme-ov-file#build-from-sources).
-- updated UI library Mantine to 7.0, improving performance
+    - If you are using the Docker image, please read the instructions on
-- the h2 embedded database is now compacted on shutdown to reclaim unused space
+      the [Docker Hub page](https://hub.docker.com/r/athou/commafeed).
-- the admin connector on port 8084 is now disabled in config.yml.example. Disabling it in your config.yml is
+- Due to the switch to Quarkus, the way CommaFeed is configured is very different (the `config.yml` file is gone).
-  recommended (see https://github.com/Athou/commafeed/commit/929df60f09cce56020b0962ab111cd8349b271b0)
+  Please
-- migrated documentation from swagger 2 to openapi 3
+  read [this section of the README](https://github.com/Athou/commafeed/tree/master?tab=readme-ov-file#configuration).
-- added a GET method to the fever api to indicate that the endpoint is working correctly when accessed from a browser
+  Note that a lot of configuration elements have been removed or renamed and are now nested/grouped by feature.
-- the websocket connection can now be disabled, the websocket ping interval and the tree reload interval can now be
+- Added a setting to prevent parsing large feeds to avoid out of memory errors. The default is 5MB.
-  configured (see config.yml.example)
+- Use a different icon for filtering unread entries and marking an entry as read (#1506)
-- the websocket connection now works correctly when the context root of the application is not "/"
+- Added various HTML attributes to ease custom JS/CSS customization (#1507)
-- unstable pubsubhubbub support was removed
+- The Redis cache has been removed. There have been multiple enhancements to the feed refresh engine and it is no longer
-
+  needed, even for instances with a large number of feeds.
-## [3.10.1]
+- The H2 migration tool that automatically upgrades H2 databases from format 2 to 3 has been removed. If you're using
-
+  the H2 embedded database, please upgrade to at least version 4.3.0 before upgrading to CommaFeed 5.0.0.
-- swap next and previous buttons (#1159)
+
-- unread count for subscriptions will now be shortened starting at 10k instead of 1k
+## [4.6.0]
-- increased websocket ping interval to just under a minute to reduce data and battery usage on mobile
+
-- only refresh subscription tree on a timer if websocket connection is unavailable
+- switched from Temurin to OpenJ9 as the JVM used in the Docker image, resulting in memory usage reduction by up to 50%
-- the Docker image now uses less memory by returning unused memory to the OS
+- fix an issue that could cause old entries to reappear if they were updated by their author (#1486)
-- add support for Java 21
+- show all entries regardless of their read status when searching with keywords, even if the ui is configured to show
-
+  unread entries only
-## [3.10.0]
+
-
+## [4.5.0]
-- added a Fever-compatible API that is usable with mobile clients that support the Fever API (see instructions in
+
-  Settings -> Profile)
+- significantly reduce the time needed to retrieve entries or mark them as read, especially when there are a lot of
-- long entry titles are no longer shortened in the detailed view
+  entries (#1452)
-- added the "s" keyboard shortcut to star/unstar entries
+- fix a race condition where a feed could be refreshed before it was created in the database
-- http sessions are now stored in the database (they were stored on disk before)
+- fix an issue that could cause the websocket notification to contain the wrong number of unread entries when using
-- fixed an issue that made it impossible to override the database url in a config.yml mounted in the Docker image
+  mysql/mariadb
-
+- fix an error when trying to mark all starred entries as read
-## [3.9.0]
+- remove the `onlyIds` parameter from REST endpoints since retrieving all the entries is now just as fast
-
+- remove support for microsoft sqlserver because it's not covered with integration tests (please open an issue if you'd
-- improve performance by disabling the loader when nothing is loading (most noticeable on mobile)
+  like it back)
-- added a setting to disable the 'mark all as read' confirmation
+
-- added a setting to disable the custom context menu
+## [4.4.1]
-- if the custom context is enabled, it can still be disabled by pressing the shift key
+
-- the announcement feature is now working again and supports html ('announcement' configuration element in config.yml)
+- fix vertical scrolling issues with Safari (#1168)
-- add support for MariaDB 11+
+- the default value for new users for the "star entry" button and the "open in new tab" button in the entry headers is
-- fix entry header shortly rendered as mobile on desktop, causing a small visual glitch
+  now "on desktop" instead of "always"
-- fix an issue that could cause a feed to not refresh correctly if the url was very long
+- the "keyboard shortcuts" help page now shows "Cmd" instead of "Ctrl" on macOS (#1389)
-- database cleanup batch size is now configurable
+- remove a superfluous feed fetch when subscribing to a feed (#1431)
-- css parsing errors are no longer logged to the standard output
+- the Docker image now uses Java 21
-- fix small errors in the api documentation
+
-
+## [4.4.0]
-## [3.8.1]
+
-
+- add support for sharing using the browser native capabilities if available (#1255)
-- in expanded mode, don't scroll when clicking on the body of the current entry
+- add a button in the entry headers to star an entry (#1025)
-- improve content cleanup task performance for instances with a very large number of feeds
+- add a button in the entry headers to open links in a new tab (#1333)
-
+- add two options in the settings to toggle those buttons
-## [3.8.0]
+- accept .opml file extension when importing and export with the .opml extension
-
+- the "mark as read" option is no longer shown in the context menu for entries that are too old to be marked as read (
-- add previous and next buttons in the toolbar
+  older than `keepStatusDays`) (#1303)
-- add a setting to always scroll selected entry to the top of the page, even if it fits entirely on screen
+
-- clicking on the body of an entry in expanded mode selects it and marks it as read
+## [4.3.3]
-- add rich text editor with autocomplete for custom css and js code in settings (desktop only)
+
-- dramatically improve performance while scrolling
+- fix OPML import (#1279)
-- fix broken welcome page mobile layout
+
-- format dates in user locale instead of GMT in relative date popups
+## [4.3.2]
-
+
-## [3.7.0]
+- added support for unix sockets (#1278)
-
+
-- the sidebar is now resizable
+## [4.3.1]
-- added the "f" keyboard shortcut to hide the sidebar
+
-- added tooltips to relative dates with the exact date
+- fix an issue that prevents new feeds from being added when mysql/mariadb is used as the database and the database
-- add a setting to hide commafeed from search engines (exposes a robots.txt file, enabled by default)
+  timezone is not UTC (#1239)
-- the browser extension unread count now updates when articles are marked as read/unread in the app
+- videos in enclosures can no longer have a width larger than the page (#1240)
-- The "b" keyboard shortcut now works as expected on Chrome but requires the browser extension to be installed
+
-- dark mode has been disabled on the api documentation page as it was unreadable
+## [4.3.0]
-- improvement to the feed refresh queuing logic when "heavy load" mode is enabled
+
-- fix a bug that could prevent feeds and categories from being edited
+- h2 (the embedded database) has been upgraded to 2.2.224
-
+    - this version uses a different file format than 2.1.x, the first time you start CommaFeed with this version, the
-## [3.6.0]
+      database will be automatically converted to the new format
-
+- add a setting to completely disable scrolling to selected entry (#1157)
-- add a button to open CommaFeed in a new tab and a button to open options when using the browser extension
+- add a css class reflecting the current view mode to ease custom css rules (#1232)
-- clicking on the entry title in expanded mode now opens the link instead of doing nothing
+- fix an issue that prevents new feeds from being added when mysql/mariadb is used as the database (#1239)
-- add tooltips to buttons when the mobile layout is used on desktop
+
-- redirect the user to the welcome page if the user was deleted from the database
+## [4.2.1]
-- add link to api documentation on welcome page
+
-- the unread count is now correctly updated when using the "/next" bookmarklet while redis cache is enabled
+- fix an issue that caused the tree to show an incorrect unread count after a websocket notification because entries
-
+  that were already marked as read by a filtering expression were not ignored (#1191)
-## [3.5.0]
+
-
+## [4.2.0]
-- add compatibility with the new version of the CommaFeed browser extension
+
-- disable pull-to-refresh on mobile as it messes with vertical scrolling
+- add a setting to display the action buttons in the footer instead of in the header on mobile (#1121)
-- add css classes to feed entries to help with custom css rules
+- the websocket notification now contains everything needed to update the UI, the client no longer needs to make an API
-- api documentation page no longer requires users to be authenticated
+  call to get the latest data when receiving the notification
-- add a setting to limit the number of feeds a user can subscribe to
+- add a workaround to the Fever API for the Unread iOS app (#1188)
-- add a setting to disable strict password policy
+- fix an issue that caused dates to be saved incorrectly if the database server and the application server were in
-- add feed refresh engine metrics
+  different timezones (#1187)
-- fix redis timeouts
+
-
+## [4.1.0]
-## [3.4.0]
+
-
+- it is now possible to open the sidebar on mobile by swiping to the right (#1098)
-- add support for arm64 docker images
+- swiping to mark entries as read/unread changed from swiping right to left because swiping right now opens the sidebar
-- add divider to visually separate read-only information from form on the profile settings page
+- the full hierarchy of categories are now displayed in the category dropdown (#1045)
-- reduce javascript bundle size by 30% by loading only the necessary translations
+- added a setting `maxEntriesAgeDays` to delete old entries based on their age during database cleanup.
-- add a standalone donate page with all ways to support CommaFeed
+  The setting is disabled by default for existing installations, except for the docker image where it is enabled and set
-- fix an issue introduced in 3.1.0 that could make CommaFeed not refresh feeds as fast as before on instances with lots
+  to 365 days
-  of feeds
+- if user registrations are disabled on your instance which is the default behavior, users are redirected on the login
-- fix alignment of icon with text for category tree nodes
+  page instead of the welcome page when not logged in (#1185)
-- fix alignment of burger button with the rest of the header on mobile
+- the sidebar resizer is no longer shown in the middle of the screen on mobile
-
+- when using the system color scheme and the system is using a dark theme, feed entries no longer flicker on load
-## [3.3.2]
+- the demo account (if enabled) cannot register custom javascript code anymore
-
+- removed the usage of `toSorted` in the client because older browsers do not support it (#1183)
-- restore entry selection indicator (left orange border) that was lost with the mantine 6.x upgrade (3.3.0)
+- the openapi documentation is no longer cached by the browser so you always have access to the latest version
-- add dividers to visually separate read-only information from forms on feed and category details pages
+- added a memory management section to the readme, reading it is recommended if you are running CommaFeed on a server
-- reduced javascript bundle size by 10%
+  with limited memory
-
+- fixed an issue that caused users without an email address set to be unable to edit their profile (#1184)
-## [3.3.1]
+
-
+## [4.0.0]
-- fix long feed names not being shortened to respect tree max width
+
-
+- migrated from dropwizard 2 to dropwizard 4, Java 17+ is now required
-## [3.3.0]
+- entries that were fetched and inserted in the database but not yet shown in the UI are no longer marked as read when
-
+  marking all entries as read
-- there are now database changes, rolling back to 2.x will no longer be possible
+- your custom sidebar width is now persisted in the local storage of your browser
-- restore support for user custom CSS rules
+- there is now a third color scheme option in addition to light and dark: system (follows the system color scheme)
-- add support for user custom JS code that will be executed on page load
+- added support for youtube playlist favicons
-
+- custom JS code is now executed when the app is done loading instead of when the page is loaded
-## [3.2.0]
+- the favicon is now correctly returned for feeds that return an invalid content type
-
+- the feed refresh engine now uses httpclient5 with connection pooling and no longer creates a new client for each
-- restore the welcome page
+  request, reducing CPU usage
-- only apply hover effect for unread entries (same as commafeed v2)
+- updated UI library Mantine to 7.0, improving performance
-- move notifications at the bottom of the screen
+- the h2 embedded database is now compacted on shutdown to reclaim unused space
-- always use https for sharing urls
+- the admin connector on port 8084 is now disabled in config.yml.example. Disabling it in your config.yml is
-- add support for redis ACLs
+  recommended (see https://github.com/Athou/commafeed/commit/929df60f09cce56020b0962ab111cd8349b271b0)
-- transition to google analytics v4
+- migrated documentation from swagger 2 to openapi 3
-
+- added a GET method to the fever api to indicate that the endpoint is working correctly when accessed from a browser
-## [3.1.0]
+- the websocket connection can now be disabled, the websocket ping interval and the tree reload interval can now be
-
+  configured (see config.yml.example)
-- add an even more compact layout
+- the websocket connection now works correctly when the context root of the application is not "/"
-- restore hover effect from commafeed 2.x
+- unstable pubsubhubbub support was removed
-- view mode (compact, expanded, ...) is now stored on the device so you can have a different view mode on desktop and
+
-  mobile
+## [3.10.1]
-- 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
+- swap next and previous buttons (#1159)
-
+- unread count for subscriptions will now be shortened starting at 10k instead of 1k
-## [3.0.1]
+- increased websocket ping interval to just under a minute to reduce data and battery usage on mobile
-
+- only refresh subscription tree on a timer if websocket connection is unavailable
-- allow env variable substitution in config.yml
+- the Docker image now uses less memory by returning unused memory to the OS
-- e.g. having a custom config.yml file with `app.session.path=${SOME_ENV_VAR}` will substitute `SOME_ENV_VAR` with its
+- add support for Java 21
-  value
+
-- allow env variable prefixed with `CF_` to override config.yml properties
+## [3.10.0]
-- e.g. setting `CF_APP_ALLOWREGISTRATIONS=true` will set `app.allowRegistrations` to `true`
+
-
+- added a Fever-compatible API that is usable with mobile clients that support the Fever API (see instructions in
-## [3.0.0]
+  Settings -> Profile)
-
+- long entry titles are no longer shortened in the detailed view
-- complete overhaul of the UI
+- added the "s" keyboard shortcut to star/unstar entries
-- backend and frontend are now in separate maven modules
+- http sessions are now stored in the database (they were stored on disk before)
-- no changes to the api or the database
+- fixed an issue that made it impossible to override the database url in a config.yml mounted in the Docker image
-- Docker images are now automatically built and available at https://hub.docker.com/r/athou/commafeed
+
-
+## [3.9.0]
-## [2.6.0]
+
-
+- improve performance by disabling the loader when nothing is loading (most noticeable on mobile)
-- add support for media content as a backup for missing content (useful for youtube feeds)
+- added a setting to disable the 'mark all as read' confirmation
-- correctly follow http error code 308 redirects
+- added a setting to disable the custom context menu
-- fixed a bug that prevented users from deleting their account
+- if the custom context is enabled, it can still be disabled by pressing the shift key
-- fixed a bug that made commafeed store entry contents multiple times
+- the announcement feature is now working again and supports html ('announcement' configuration element in config.yml)
-- fixed a bug that prevented the app to be used as an installed app on mobile devices if the context path of commafeed
+- add support for MariaDB 11+
-  was not "/"
+- fix entry header shortly rendered as mobile on desktop, causing a small visual glitch
-- fixed a bug that prevented entries from being "marked as read older than xxx" for a feed that was just added
+- fix an issue that could cause a feed to not refresh correctly if the url was very long
-- removed support for google+ and readability as those services no longer exist
+- database cleanup batch size is now configurable
-- removed support for deploying on openshift
+- css parsing errors are no longer logged to the standard output
-- removed alphabetical sorting of entries because of really poor performance (title cannot be indexed)
+- fix small errors in the api documentation
-- 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
+## [3.8.1]
-- various dependencies upgrades (notably dropwizard from 1.3 to 2.1)
+
-- add support for mariadb
+- in expanded mode, don't scroll when clicking on the body of the current entry
-- add support for java17+ runtime
+- improve content cleanup task performance for instances with a very large number of feeds
-- various security improvements
+
-
+## [3.8.0]
-## [2.5.0]
+
-
+- add previous and next buttons in the toolbar
-- unread count is now displayed in a favicon badge when supported
+- add a setting to always scroll selected entry to the top of the page, even if it fits entirely on screen
-- the user agent string for the bot fetching feeds is now configurable
+- clicking on the body of an entry in expanded mode selects it and marks it as read
-- feed parsing performance improvements
+- add rich text editor with autocomplete for custom css and js code in settings (desktop only)
-- support for java9+ runtime
+- dramatically improve performance while scrolling
-- can now properly start from an empty postgresql database
+- fix broken welcome page mobile layout
-
+- format dates in user locale instead of GMT in relative date popups
-## [2.4.0]
+
-
+## [3.7.0]
-- users were not able to change password or delete account
+
-- fix api key generation
+- the sidebar is now resizable
-- feed entries can now be sorted alphabetically
+- added the "f" keyboard shortcut to hide the sidebar
-- fix facebook sharing
+- added tooltips to relative dates with the exact date
-- fix layout on iOS
+- add a setting to hide commafeed from search engines (exposes a robots.txt file, enabled by default)
-- postgresql driver update (fix for postgres 9.6)
+- the browser extension unread count now updates when articles are marked as read/unread in the app
-- various internationalization fixes
+- The "b" keyboard shortcut now works as expected on Chrome but requires the browser extension to be installed
-- security fixes
+- dark mode has been disabled on the api documentation page as it was unreadable
-
+- improvement to the feed refresh queuing logic when "heavy load" mode is enabled
-## [2.3.0]
+- fix a bug that could prevent feeds and categories from being edited
-
+
-- dropwizard upgrade 0.9.1
+## [3.6.0]
-- feed enclosures are hidden if they already displayed in the content
+
-- fix youtube favicons
+- add a button to open CommaFeed in a new tab and a button to open options when using the browser extension
-- various internationalization fixes
+- clicking on the entry title in expanded mode now opens the link instead of doing nothing
-
+- add tooltips to buttons when the mobile layout is used on desktop
-## [2.2.0]
+- redirect the user to the welcome page if the user was deleted from the database
-
+- add link to api documentation on welcome page
-- fix youtube and instagram favicon fetching
+- the unread count is now correctly updated when using the "/next" bookmarklet while redis cache is enabled
-- mark as read filter was lost when a feed was rearranged with drag&drop
+
-- feed entry categories are now displayed if available
+## [3.5.0]
-- various performance and dependencies upgrades
+
-- java8 is now required
+- add compatibility with the new version of the CommaFeed browser extension
-
+- disable pull-to-refresh on mobile as it messes with vertical scrolling
-## [2.1.0]
+- add css classes to feed entries to help with custom css rules
-
+- api documentation page no longer requires users to be authenticated
-- dropwizard upgrade to 0.8.0
+- add a setting to limit the number of feeds a user can subscribe to
-- you have to remove the "app.contextPath" setting from your yml file, you can optionally use
+- add a setting to disable strict password policy
-  server.applicationContextPath instead
+- add feed refresh engine metrics
-- new setting app.maxFeedCapacity for deleting old entries
+- fix redis timeouts
-- ability to set filtering expressions for subscriptions to automatically mark new entries as read based on title,
+
-  content, author or url.
+## [3.4.0]
-- ability to use !keyword or -keyword to exclude a keyword from a search query
+
-- facebook feeds now show user favicon instead of facebook favicon
+- add support for arm64 docker images
-- new dark theme 'nightsky'
+- add divider to visually separate read-only information from form on the profile settings page
-
+- reduce javascript bundle size by 30% by loading only the necessary translations
-## [2.0.3]
+- add a standalone donate page with all ways to support CommaFeed
-
+- fix an issue introduced in 3.1.0 that could make CommaFeed not refresh feeds as fast as before on instances with lots
-- internet explorer ajax cache workaround
+  of feeds
-- categories are now deletable again
+- fix alignment of icon with text for category tree nodes
-- openshift support is back
+- fix alignment of burger button with the rest of the header on mobile
-- youtube feeds now show user favicon instead of youtube favicon
+
-
+## [3.3.2]
-## [2.0.2]
+
-
+- restore entry selection indicator (left orange border) that was lost with the mantine 6.x upgrade (3.3.0)
-- api using the api key is now working again
+- add dividers to visually separate read-only information from forms on feed and category details pages
-- context path is now configurable in config.yml (see app.contextPath in config.yml.example)
+- reduced javascript bundle size by 10%
-- fix login on firefox when fields are autofilled by the browser
+
-- fix scrolling of subscriptions list on mobile
+## [3.3.1]
-- user is now logged in after registration
+
-- fix link to documentation on home page and about page
+- fix long feed names not being shortened to respect tree max width
-- fields autocomplete is disabled on the profile page
+
-- users are able to delete their account again
+## [3.3.0]
-- chinese and malaysian translation files are now correctly loaded
+
-- software version in user-agent when fetching feeds is no longer hardcoded
+- there are now database changes, rolling back to 2.x will no longer be possible
-- admin settings page is now read only, settings are configured in config.yml
+- restore support for user custom CSS rules
-- added link to metrics on the admin settings page
+- add support for user custom JS code that will be executed on page load
-- Rome (rss library) upgrade to 1.5.0
+
-
+## [3.2.0]
-## [2.0.1]
+
-
+- restore the welcome page
-- the redis pool no longer throws an exception when it is unable to aquire a new connection
+- only apply hover effect for unread entries (same as commafeed v2)
-
+- move notifications at the bottom of the screen
-## [2.0.0]
+- always use https for sharing urls
-
+- add support for redis ACLs
-- The backend has been completely rewritten using Dropwizard instead of TomEE, resulting in a lot less memory
+- transition to google analytics v4
-  consumption and better overall performances.
+
-  See the README on how to build CommaFeed from now on.
+## [3.1.0]
-- CommaFeed should no longer fetch the same feed multiple times in a row
+
-- Users can use their username or email to log in
+- 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

LICENSE

@@ -1,31 +1,31 @@
-Apache License, Version 2.0 Apache License Version 2.0, January 2004 http://www.apache.org/licenses/
+Apache License, Version 2.0 Apache License Version 2.0, January 2004 http://www.apache.org/licenses/
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-1. Definitions.
+1. Definitions.
-"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
-"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
+"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
-"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
-"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
+"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
-"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
+"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
-"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
+"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
-"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
+"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
-"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
+"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
-"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
+"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
-"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
-2. Grant of Copyright License.
+2. Grant of Copyright License.
-Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
-3. Grant of Patent License.
+3. Grant of Patent License.
-Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
-4. Redistribution.
+4. Redistribution.
-You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
+You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
-You must give any other recipients of the Work or Derivative Works a copy of this License; and You must cause any modified files to carry prominent notices stating that You changed the files; and You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
+You must give any other recipients of the Work or Derivative Works a copy of this License; and You must cause any modified files to carry prominent notices stating that You changed the files; and You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
-5. Submission of Contributions.
+5. Submission of Contributions.
-Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
+Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
-6. Trademarks.
+6. Trademarks.
-This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
+This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
-7. Disclaimer of Warranty.
+7. Disclaimer of Warranty.
-Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
+Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
-8. Limitation of Liability.
+8. Limitation of Liability.
-In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
+In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
-9. Accepting Warranty or Additional Liability.
+9. Accepting Warranty or Additional Liability.
-While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
+While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
 END OF TERMS AND CONDITIONS

README.md

@@ -17,6 +17,7 @@ Google Reader inspired self-hosted RSS reader, based on Quarkus and React/TypeSc
 - REST API
 - Fever-compatible API for native mobile apps
 - Can automatically mark articles as read based on user-defined rules
+- Highly customizable with [custom CSS](https://athou.github.io/commafeed/documentation/custom-css) and JavaScript
 - [Browser extension](https://github.com/Athou/commafeed-browser-extension)
 - Compiles to native code for blazing fast startup and low memory usage
 - Supports 4 databases
@@ -25,11 +26,18 @@ Google Reader inspired self-hosted RSS reader, based on Quarkus and React/TypeSc
     - MySQL
     - MariaDB
 
-## Deployment
+## Usage
+
+### Public instance
+
+A free public instance is available at https://www.commafeed.com.
+
+It has no ads, no tracking, and your data is never exploited or sold to third parties. The service is funded entirely through donations.
+However, this public instance does have a few limitations compared to self-hosted setups, outlined [here](https://github.com/Athou/commafeed/discussions/1567).
 
 ### Docker
 
-Docker is the easiest way to get started with CommaFeed.
+Docker is the easiest way to get started with self-hosted CommaFeed.
 
 Docker images are built automatically and are available at https://hub.docker.com/r/athou/commafeed
 
@@ -48,17 +56,17 @@ system and database of choice.
 
 There are two types of packages:
 
-- The `linux-x86_64` and `windows-x86_64` packages are compiled natively and contain an executable that can be run
+- The `linux-x86_64`, `linux-aarch_64` and `windows-x86_64` packages are compiled natively and contain an executable that can be run
   directly.
 - The `jvm` package is a zip file containing all `.jar` files required to run the application. This package works on all
-  platforms and is started with `java -jar quarkus-run.jar`.
+  platforms but requires a JRE and is started with `java -jar quarkus-run.jar`.
 
 If available for your operating system, the native package is recommended because it has a faster startup time and lower
 memory usage.
 
 ### Build from sources
 
-    ./mvnw clean package [-P<database>] [-Pnative] [-DskipTests]
+    ./mvnw clean package [-P<database> [-Pnative]] [-DskipTests]
 
 - `<database>` can be one of `h2`, `postgresql`, `mysql` or `mariadb`. The default is `h2`.
 - `-Pnative` compiles the application to native code. This requires GraalVM to be installed (`GRAALVM_HOME` environment
@@ -73,6 +81,10 @@ When the build is complete:
 - if you used the native profile, the executable is located at
   `commafeed-server/target/commafeed-<version>-<database>-<platform>-<arch>-runner[.exe]`
 
+### Distribution packages
+
+- Arch Linux users can use [the CommaFeed package on AUR](https://aur.archlinux.org/pkgbase/commafeed), which builds native binaries with GraalVM for all supported databases.
+
 ## Configuration
 
 CommaFeed doesn't require any configuration to run with its embedded database (H2). The database file will be stored in
@@ -94,13 +106,13 @@ There are multiple ways to configure CommaFeed:
 
 - a `config/application.properties` [properties](https://en.wikipedia.org/wiki/.properties) file relative to the working
   directory (keys in kebab-case)
-- Command line arguments prefixed with `-D` (keys in kebab-case)
+- Command line arguments each prefixed with `-D` (keys in kebab-case)
 - Environment variables (keys in UPPER_CASE)
 - a `.env` file in the working directory (keys in UPPER_CASE)
 
-The properties file is recommended because CommaFeed will be able to warn about invalid properties and typos.
+When in doubt, the properties file is recommended because CommaFeed will be able to warn about invalid properties and typos.
 
-All [CommaFeed settings](commafeed-server/doc/commafeed.adoc) are optional and have sensible default values.
+All [CommaFeed settings](https://athou.github.io/commafeed/documentation) are optional and have sensible default values.
 
 When logging in, credentials are stored in an encrypted cookie. The encryption key is randomly generated at startup,
 meaning that you will have to log back in after each restart of the application. To prevent this, you can set the
@@ -108,7 +120,6 @@ meaning that you will have to log back in after each restart of the application.
 All other Quarkus settings can be found [here](https://quarkus.io/guides/all-config).
 
 When started, the server will listen on http://localhost:8082.
-The default user is `admin` and the default password is `admin`.
 
 ### Updates
 

SECURITY.md

@@ -2,5 +2,4 @@
 
 ## Reporting a Vulnerability
 
-If you found a vulnerability that you deem too sensitive to disclose publicly in a Github issue, please send an email at jeremiepanzer at gmail dot com.
+If you found a vulnerability that you deem too sensitive to disclose publicly in a Github issue, please create a private security advisory here: https://github.com/Athou/commafeed/security/advisories
-Thanks !

commafeed-client/.gitignore

@@ -23,9 +23,6 @@ dist-ssr
 *.sln
 *.sw?
 
-# rollup-plugin-visualizer
-/stats.html
-
 # vite
 vite.config.ts.timestamp-*.mjs
 

commafeed-client/biome.json

@@ -1,5 +1,5 @@
 {
-    "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+    "$schema": "https://biomejs.dev/schemas/2.3.14/schema.json",
     "formatter": {
         "indentStyle": "space",
         "indentWidth": 4,
@@ -14,6 +14,6 @@
         }
     },
     "files": {
-        "ignore": ["dist", "node_modules", "target", "target-ide"]
+        "includes": ["**", "!**/dist", "!**/node_modules", "!**/target", "!**/target-ide"]
     }
 }

commafeed-client/index.html

@@ -1,11 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
+    <meta charset="UTF-8" />
-  <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
-  <link rel="manifest" href="manifest.json" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel="manifest" href="manifest.json" />
-  <title>CommaFeed</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="referrer" content="no-referrer" />
+
+    <title>CommaFeed</title>
 </head>
 <body>
 <div id="root"></div>

commafeed-client/package.json

@@ -4,77 +4,78 @@
     "version": "0.0.0",
     "type": "module",
     "scripts": {
-        "dev": "vite --host",
+        "dev": "vite",
-        "dev:typescript": "tsc --watch",
+        "dev:host": "vite --host",
         "build": "tsc && vite build",
         "preview": "vite preview",
         "test": "vitest",
         "test:ci": "vitest run",
-        "lint": "biome check ./src",
+        "lint": "biome check",
-        "lint:fix": "biome check --write ./src",
+        "lint:fix": "biome check --write",
         "i18n:extract": "lingui extract --clean"
     },
     "dependencies": {
-        "@emotion/react": "^11.13.3",
+        "@emotion/react": "^11.14.0",
-        "@fontsource/open-sans": "^5.1.0",
+        "@fontsource/open-sans": "^5.2.7",
-        "@lingui/core": "^4.13.0",
+        "@lingui/core": "^5.9.0",
-        "@lingui/macro": "^4.13.0",
+        "@lingui/react": "^5.9.0",
-        "@lingui/react": "^4.13.0",
+        "@mantine/core": "^8.3.14",
-        "@mantine/core": "^7.13.3",
+        "@mantine/form": "^8.3.14",
-        "@mantine/form": "^7.13.3",
+        "@mantine/hooks": "^8.3.14",
-        "@mantine/hooks": "^7.13.3",
+        "@mantine/modals": "^8.3.14",
-        "@mantine/modals": "^7.13.3",
+        "@mantine/notifications": "^8.3.14",
-        "@mantine/notifications": "^7.13.3",
+        "@mantine/spotlight": "^8.3.14",
-        "@mantine/spotlight": "^7.13.3",
+        "@monaco-editor/react": "^4.7.0",
-        "@monaco-editor/react": "^4.6.0",
+        "@reduxjs/toolkit": "^2.11.2",
-        "@reduxjs/toolkit": "^2.3.0",
+        "axios": "^1.13.4",
-        "axios": "^1.7.7",
+        "dayjs": "^1.11.19",
-        "dayjs": "^1.11.13",
         "escape-string-regexp": "^5.0.0",
-        "interweave": "^13.1.0",
+        "interweave": "^13.1.1",
-        "monaco-editor": "^0.52.0",
+        "monaco-editor": "^0.55.1",
         "mousetrap": "^1.6.5",
-        "react": "^18.3.1",
+        "react": "^19.2.4",
         "react-async-hook": "^4.0.0",
         "react-contexify": "^6.0.0",
-        "react-device-detect": "^2.2.3",
+        "react-dom": "^19.2.4",
-        "react-dom": "^18.3.1",
+        "react-draggable": "^4.5.0",
-        "react-draggable": "^4.4.6",
+        "react-icons": "^5.5.0",
-        "react-ga4": "^2.1.0",
-        "react-helmet": "^6.1.0",
-        "react-icons": "^5.3.0",
         "react-infinite-scroller": "^1.2.6",
-        "react-redux": "^9.1.2",
+        "react-redux": "^9.2.0",
-        "react-router-dom": "^6.27.0",
+        "react-router-dom": "^7.13.0",
-        "react-swipeable": "^7.0.1",
+        "react-swipeable": "^7.0.2",
-        "redoc": "^2.2.0",
+        "style-to-object": "^1.0.14",
-        "style-to-object": "^1.0.8",
         "throttle-debounce": "^5.0.2",
         "tinycon": "^0.6.8",
-        "tss-react": "^4.9.13",
+        "tss-react": "^4.9.20",
         "websocket-heartbeat-js": "^1.1.3"
     },
     "devDependencies": {
-        "@biomejs/biome": "^1.9.4",
+        "@biomejs/biome": "^2.3.14",
-        "@lingui/cli": "^4.13.0",
+        "@lingui/babel-plugin-lingui-macro": "^5.9.0",
-        "@lingui/vite-plugin": "^4.13.0",
+        "@lingui/cli": "^5.9.0",
+        "@lingui/vite-plugin": "^5.9.0",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
         "@types/mousetrap": "^1.6.15",
-        "@types/react": "^18.3.11",
+        "@types/react": "^19.2.13",
-        "@types/react-dom": "^18.3.1",
+        "@types/react-dom": "^19.2.3",
-        "@types/react-helmet": "^6.1.11",
         "@types/react-infinite-scroller": "^1.2.5",
-        "@types/swagger-ui-react": "^4.18.3",
         "@types/throttle-debounce": "^5.0.2",
-        "@types/tinycon": "^0.6.5",
+        "@types/tinycon": "^0.6.7",
-        "@vitejs/plugin-react": "^4.3.3",
+        "@vitejs/plugin-react": "^5.1.3",
-        "babel-plugin-macros": "^3.1.0",
+        "babel-plugin-react-compiler": "1.0.0",
-        "jsdom": "^25.0.1",
+        "jsdom": "^28.0.0",
-        "rollup-plugin-visualizer": "^5.12.0",
+        "typescript": "^5.9.3",
-        "typescript": "^5.6.3",
+        "vite": "^7.3.1",
-        "vite": "^5.4.9",
+        "vite-plugin-checker": "^0.12.0",
-        "vite-plugin-checker": "^0.8.0",
+        "vite-tsconfig-paths": "^6.0.5",
-        "vite-tsconfig-paths": "^5.0.1",
+        "vitest": "^4.0.18",
-        "vitest": "^2.1.3",
+        "yaml": "^2.8.2"
-        "vitest-mock-extended": "^2.0.2"
+    },
+    "overrides": {
+        "react-infinite-scroller": {
+            "react": "^19.2.4"
+        }
     }
 }

commafeed-client/pom.xml

@@ -1,96 +1,97 @@
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+<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">
+		 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>
+	<modelVersion>4.0.0</modelVersion>
-
+
-	<parent>
+	<parent>
-		<groupId>com.commafeed</groupId>
+		<groupId>com.commafeed</groupId>
-		<artifactId>commafeed</artifactId>
+		<artifactId>commafeed</artifactId>
-		<version>5.3.2</version>
+		<version>6.2.0</version>
-	</parent>
+	</parent>
-	<artifactId>commafeed-client</artifactId>
+	<artifactId>commafeed-client</artifactId>
-	<name>CommaFeed Client</name>
+	<name>CommaFeed Client</name>
-
+
-	<properties>
+	<properties>
-		<!-- renovate: datasource=node-version depName=node -->
+		<!-- renovate: datasource=node-version depName=node -->
-		<node.version>v20.18.0</node.version>
+		<node.version>v24.13.0</node.version>
-		<!-- renovate: datasource=npm depName=npm -->
+		<!-- renovate: datasource=npm depName=npm -->
-		<npm.version>10.9.0</npm.version>
+		<npm.version>11.9.0</npm.version>
-	</properties>
+	</properties>
-
+
-	<build>
+	<build>
-		<plugins>
+		<plugins>
-			<plugin>
+			<plugin>
-				<groupId>com.github.eirslett</groupId>
+				<groupId>com.github.eirslett</groupId>
-				<artifactId>frontend-maven-plugin</artifactId>
+				<artifactId>frontend-maven-plugin</artifactId>
-				<version>1.15.1</version>
+				<version>2.0.0</version>
-				<?m2e ignore?>
+				<?m2e ignore?>
-				<executions>
+				<executions>
-					<execution>
+					<execution>
-						<id>install node and npm</id>
+						<id>install node and npm</id>
-						<goals>
+						<goals>
-							<goal>install-node-and-npm</goal>
+							<goal>install-node-and-npm</goal>
-						</goals>
+						</goals>
-						<phase>compile</phase>
+						<phase>compile</phase>
-						<configuration>
+						<configuration>
-							<nodeVersion>${node.version}</nodeVersion>
+							<nodeVersion>${node.version}</nodeVersion>
-							<npmVersion>${npm.version}</npmVersion>
+							<npmVersion>${npm.version}</npmVersion>
-						</configuration>
+						</configuration>
-					</execution>
+					</execution>
-					<execution>
+					<execution>
-						<id>npm install</id>
+						<id>npm install</id>
-						<goals>
+						<goals>
-							<goal>npm</goal>
+							<goal>npm</goal>
-						</goals>
+						</goals>
-						<phase>compile</phase>
+						<phase>compile</phase>
-						<configuration>
+						<configuration>
-							<arguments>ci</arguments>
+							<arguments>ci</arguments>
-						</configuration>
+						</configuration>
-					</execution>
+					</execution>
-					<execution>
+					<execution>
-						<id>npm run test</id>
+						<id>npm run test</id>
-						<goals>
+						<goals>
-							<goal>npm</goal>
+							<goal>npm</goal>
-						</goals>
+						</goals>
-						<phase>compile</phase>
+						<phase>compile</phase>
-						<configuration>
+						<configuration>
-							<arguments>run test:ci</arguments>
+							<arguments>run test:ci</arguments>
-						</configuration>
+							<skip>${skipTests}</skip>
-					</execution>
+						</configuration>
-					<execution>
+					</execution>
-						<id>npm run build</id>
+					<execution>
-						<goals>
+						<id>npm run build</id>
-							<goal>npm</goal>
+						<goals>
-						</goals>
+							<goal>npm</goal>
-						<phase>compile</phase>
+						</goals>
-						<configuration>
+						<phase>compile</phase>
-							<arguments>run build</arguments>
+						<configuration>
-						</configuration>
+							<arguments>run build</arguments>
-					</execution>
+						</configuration>
-				</executions>
+					</execution>
-			</plugin>
+				</executions>
-			<plugin>
+			</plugin>
-				<artifactId>maven-resources-plugin</artifactId>
+			<plugin>
-				<version>3.3.1</version>
+				<artifactId>maven-resources-plugin</artifactId>
-				<executions>
+				<version>3.4.0</version>
-					<execution>
+				<executions>
-						<id>copy web interface to resources</id>
+					<execution>
-						<phase>prepare-package</phase>
+						<id>copy web interface to resources</id>
-						<goals>
+						<phase>prepare-package</phase>
-							<goal>copy-resources</goal>
+						<goals>
-						</goals>
+							<goal>copy-resources</goal>
-						<configuration>
+						</goals>
-							<outputDirectory>${project.build.directory}/classes/META-INF/resources</outputDirectory>
+						<configuration>
-							<resources>
+							<outputDirectory>${project.build.directory}/classes/META-INF/resources</outputDirectory>
-								<resource>
+							<resources>
-									<directory>dist</directory>
+								<resource>
-									<filtering>false</filtering>
+									<directory>dist</directory>
-								</resource>
+									<filtering>false</filtering>
-							</resources>
+								</resource>
-						</configuration>
+							</resources>
-					</execution>
+						</configuration>
-				</executions>
+					</execution>
-			</plugin>
+				</executions>
-		</plugins>
+			</plugin>
-	</build>
+		</plugins>
+	</build>
 </project>

commafeed-client/public/favicon.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="393.84613"
+   width="393.84613"
+   viewBox="0 0 5.0480766 5.0480766"
+   version="1.1"
+   id="svg3"
+   sodipodi:docname="favicon.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs3" />
+  <sodipodi:namedview
+     id="namedview3"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.21875"
+     inkscape:cx="207.17949"
+     inkscape:cy="187.07692"
+     inkscape:window-width="1440"
+     inkscape:window-height="855"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3" />
+  <rect
+     fill="#f88a14"
+     rx="0.53846151"
+     ry="0.53846151"
+     height="5.0480766"
+     width="5.0480766"
+     id="rect1"
+     x="0"
+     y="0"
+     style="stroke-width:0.769231" />
+  <path
+     d="m 1.3450904,0.64548657 c 2.9002,0 2.9002,2.91010003 2.9002,2.91010003"
+     fill="none"
+     stroke="#ffffff"
+     stroke-linecap="round"
+     stroke-width="0.78125"
+     id="path1" />
+  <path
+     d="m 1.3377904,1.9915866 c 1.5705,-0.00908 1.5705,1.5639 1.5705,1.5639"
+     fill="none"
+     stroke="#ffffff"
+     stroke-linecap="round"
+     stroke-width="0.78125"
+     id="path2" />
+  <path
+     d="m 2.0192904,3.5227866 c 0,0.23366 -0.10712,0.47418 -0.24663,0.6537 -0.1814,0.2333 -0.5705,0.5618 -0.6913,0.5653 0.0402,-0.0662 0.263,-0.5654 0.2563,-0.5654 -0.36423004,0 -0.65950004,-0.29265 -0.65950004,-0.65365 0,-0.361 0.29527,-0.65365 0.65950004,-0.65365 0.36423,0 0.68159,0.29265 0.68159,0.65365 z"
+     fill="#ffffff"
+     id="path3" />
+</svg>

commafeed-client/src/App.tsx

@@ -3,46 +3,53 @@ import { I18nProvider } from "@lingui/react"
 import { MantineProvider } from "@mantine/core"
 import { ModalsProvider } from "@mantine/modals"
 import { Notifications } from "@mantine/notifications"
-import { Constants } from "app/constants"
+import type React from "react"
-import { redirectTo } from "app/redirect/slice"
+import { useEffect, useState } from "react"
-import { reloadServerInfos } from "app/server/thunks"
+import { HashRouter, Navigate, Route, Routes, useNavigate } from "react-router-dom"
-import { useAppDispatch, useAppSelector } from "app/store"
-import { categoryUnreadCount } from "app/utils"
-import { DisablePullToRefresh } from "components/DisablePullToRefresh"
-import { ErrorBoundary } from "components/ErrorBoundary"
-import { Header } from "components/header/Header"
-import { Tree } from "components/sidebar/Tree"
-import { useBrowserExtension } from "hooks/useBrowserExtension"
-import { useI18n } from "i18n"
-import { WelcomePage } from "pages/WelcomePage"
-import { AdminUsersPage } from "pages/admin/AdminUsersPage"
-import { MetricsPage } from "pages/admin/MetricsPage"
-import { AboutPage } from "pages/app/AboutPage"
-import { AddPage } from "pages/app/AddPage"
-import { CategoryDetailsPage } from "pages/app/CategoryDetailsPage"
-import { DonatePage } from "pages/app/DonatePage"
-import { FeedDetailsPage } from "pages/app/FeedDetailsPage"
-import { FeedEntriesPage } from "pages/app/FeedEntriesPage"
-import Layout from "pages/app/Layout"
-import { SettingsPage } from "pages/app/SettingsPage"
-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 React, { useEffect } from "react"
-import { isSafari } from "react-device-detect"
-import ReactGA from "react-ga4"
-import { Helmet } from "react-helmet"
-import { HashRouter, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom"
 import Tinycon from "tinycon"
+import { Constants } from "@/app/constants"
+import { redirectTo } from "@/app/redirect/slice"
+import { redirectToInitialSetup } from "@/app/redirect/thunks"
+import { reloadServerInfos } from "@/app/server/thunks"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import { categoryUnreadCount } from "@/app/utils"
+import { DisablePullToRefresh } from "@/components/DisablePullToRefresh"
+import { ErrorBoundary } from "@/components/ErrorBoundary"
+import { Header } from "@/components/header/Header"
+import { Tree } from "@/components/sidebar/Tree"
+import { useAppLoading } from "@/hooks/useAppLoading"
+import { useBrowserExtension } from "@/hooks/useBrowserExtension"
+import { useI18n } from "@/i18n"
+import { AdminUsersPage } from "@/pages/admin/AdminUsersPage"
+import { MetricsPage } from "@/pages/admin/MetricsPage"
+import { AboutPage } from "@/pages/app/AboutPage"
+import { AddPage } from "@/pages/app/AddPage"
+import { CategoryDetailsPage } from "@/pages/app/CategoryDetailsPage"
+import { DonatePage } from "@/pages/app/DonatePage"
+import { FeedDetailsPage } from "@/pages/app/FeedDetailsPage"
+import { FeedEntriesPage } from "@/pages/app/FeedEntriesPage"
+import Layout from "@/pages/app/Layout"
+import { SettingsPage } from "@/pages/app/SettingsPage"
+import { TagDetailsPage } from "@/pages/app/TagDetailsPage"
+import { InitialSetupPage } from "@/pages/auth/InitialSetupPage"
+import { LoginPage } from "@/pages/auth/LoginPage"
+import { PasswordRecoveryPage } from "@/pages/auth/PasswordRecoveryPage"
+import { PasswordResetPage } from "@/pages/auth/PasswordResetPage"
+import { RegistrationPage } from "@/pages/auth/RegistrationPage"
+import { WelcomePage } from "@/pages/WelcomePage"
 
-function Providers(props: { children: React.ReactNode }) {
+function Providers(
+    props: Readonly<{
+        children: React.ReactNode
+    }>
+) {
+    const primaryColor = useAppSelector(state => state.user.settings?.primaryColor) || Constants.theme.defaultPrimaryColor
     return (
         <I18nProvider i18n={i18n}>
             <MantineProvider
                 defaultColorScheme="auto"
                 theme={{
-                    primaryColor: "orange",
+                    primaryColor: primaryColor,
                     fontFamily: "Open Sans",
                     colors: {
                         // keep using dark colors from mantine v6
@@ -71,9 +78,6 @@ function Providers(props: { children: React.ReactNode }) {
     )
 }
 
-// api documentation page is very large, load only on-demand
-const ApiDocumentationPage = React.lazy(async () => await import("pages/app/ApiDocumentationPage"))
-
 function AppRoutes() {
     const sidebarVisible = useAppSelector(state => state.tree.sidebarVisible)
 
@@ -81,10 +85,11 @@ function AppRoutes() {
         <Routes>
             <Route path="/" element={<Navigate to={`/app/category/${Constants.categories.all.id}`} replace />} />
             <Route path="welcome" element={<WelcomePage />} />
+            <Route path="setup" element={<InitialSetupPage />} />
             <Route path="login" element={<LoginPage />} />
             <Route path="register" element={<RegistrationPage />} />
             <Route path="passwordRecovery" element={<PasswordRecoveryPage />} />
-            <Route path="api" element={<ApiDocumentationPage />} />
+            <Route path="passwordReset" element={<PasswordResetPage />} />
             <Route path="app" element={<Layout header={<Header />} sidebar={<Tree />} sidebarVisible={sidebarVisible} />}>
                 <Route path="category">
                     <Route path=":id" element={<FeedEntriesPage sourceType="category" />} />
@@ -112,6 +117,18 @@ function AppRoutes() {
     )
 }
 
+function InitialSetupHandler() {
+    const serverInfos = useAppSelector(state => state.server.serverInfos)
+    const dispatch = useAppDispatch()
+    useEffect(() => {
+        if (serverInfos?.initialSetupRequired) {
+            dispatch(redirectToInitialSetup())
+        }
+    }, [serverInfos, dispatch])
+
+    return null
+}
+
 function RedirectHandler() {
     const target = useAppSelector(state => state.redirect.to)
     const dispatch = useAppDispatch()
@@ -127,26 +144,19 @@ function RedirectHandler() {
     return null
 }
 
-function GoogleAnalyticsHandler() {
+function UnreadCountTitleHandler({
-    const location = useLocation()
+    enabled,
-    const googleAnalyticsCode = useAppSelector(state => state.server.serverInfos?.googleAnalyticsCode)
+}: Readonly<{
-
+    enabled?: boolean
-    useEffect(() => {
+}>) {
-        if (googleAnalyticsCode) ReactGA.initialize(googleAnalyticsCode)
+    const root = useAppSelector(state => state.tree.rootCategory)
-    }, [googleAnalyticsCode])
+    const unreadCount = categoryUnreadCount(root)
-
+    return <title>{enabled && unreadCount > 0 ? `(${unreadCount}) CommaFeed` : "CommaFeed"}</title>
-    useEffect(() => {
-        if (ReactGA.isInitialized) ReactGA.send({ hitType: "pageview", page: location.pathname })
-    }, [location])
-
-    return null
 }
 
-function UnreadCountTitleHandler({ unreadCount, enabled }: { unreadCount: number; enabled?: boolean }) {
+function UnreadCountFaviconHandler({ enabled }: { enabled?: boolean }) {
-    return <Helmet title={enabled && unreadCount > 0 ? `(${unreadCount}) CommaFeed` : "CommaFeed"} />
+    const root = useAppSelector(state => state.tree.rootCategory)
-}
+    const unreadCount = categoryUnreadCount(root)
-
-function UnreadCountFaviconHandler({ unreadCount, enabled }: { unreadCount: number; enabled?: boolean }) {
     useEffect(() => {
         if (enabled && unreadCount > 0) {
             Tinycon.setBubble(unreadCount)
@@ -170,46 +180,67 @@ function BrowserExtensionBadgeUnreadCountHandler() {
     return null
 }
 
-function CustomCode() {
+function CustomJsHandler() {
-    return (
+    const [scriptLoaded, setScriptLoaded] = useState(false)
-        <Helmet>
+    const { loading } = useAppLoading()
-            <link rel="stylesheet" type="text/css" href="custom_css.css" />
+
-            <script type="text/javascript" src="custom_js.js" />
+    useEffect(() => {
-        </Helmet>
+        if (scriptLoaded || loading) {
-    )
+            return
+        }
+
+        const script = document.createElement("script")
+        script.src = "custom_js.js"
+        script.async = true
+        document.body.appendChild(script)
+
+        setScriptLoaded(true)
+
+        return () => script.remove()
+    }, [scriptLoaded, loading])
+
+    return null
+}
+
+function CustomCssHandler() {
+    useEffect(() => {
+        const link = document.createElement("link")
+        link.rel = "stylesheet"
+        link.type = "text/css"
+        link.href = "custom_css.css"
+        document.head.appendChild(link)
+
+        return () => link.remove()
+    }, [])
+
+    return null
 }
 
 export function App() {
     useI18n()
-    const root = useAppSelector(state => state.tree.rootCategory)
     const unreadCountTitle = useAppSelector(state => state.user.settings?.unreadCountTitle)
     const unreadCountFavicon = useAppSelector(state => state.user.settings?.unreadCountFavicon)
+    const disablePullToRefresh = useAppSelector(state => state.user.settings?.disablePullToRefresh)
     const dispatch = useAppDispatch()
 
-    const unreadCount = categoryUnreadCount(root)
-
     useEffect(() => {
         dispatch(reloadServerInfos())
     }, [dispatch])
 
     return (
         <Providers>
-            <>
+            <UnreadCountTitleHandler enabled={unreadCountTitle} />
-                <UnreadCountTitleHandler unreadCount={unreadCount} enabled={unreadCountTitle} />
+            <UnreadCountFaviconHandler enabled={unreadCountFavicon} />
-                <UnreadCountFaviconHandler unreadCount={unreadCount} enabled={unreadCountFavicon} />
+            <BrowserExtensionBadgeUnreadCountHandler />
-                <BrowserExtensionBadgeUnreadCountHandler />
+            <CustomJsHandler />
-                <HashRouter>
+            <CustomCssHandler />
-                    <GoogleAnalyticsHandler />
+            <DisablePullToRefresh enabled={disablePullToRefresh} />
-                    <RedirectHandler />
+
-                    <AppRoutes />
+            <HashRouter>
-                    <CustomCode />
+                <InitialSetupHandler />
-                    {/* disable pull-to-refresh as it messes with vertical scrolling
+                <RedirectHandler />
-                        safari behaves weirdly when overscroll-behavior is set to none so we disable it only for other browsers
+                <AppRoutes />
-                        https://github.com/Athou/commafeed/issues/1168
+            </HashRouter>
-                    */}
-                    {!isSafari && <DisablePullToRefresh />}
-                </HashRouter>
-            </>
         </Providers>
     )
 }

commafeed-client/src/app/async-thunk.ts

@@ -1,5 +1,5 @@
 import { createAsyncThunk } from "@reduxjs/toolkit"
-import type { AppDispatch, RootState } from "app/store"
+import type { AppDispatch, RootState } from "@/app/store"
 
 export const createAppAsyncThunk = createAsyncThunk.withTypes<{
     state: RootState

commafeed-client/src/app/client.ts

@@ -12,10 +12,12 @@ import type {
     FeedModificationRequest,
     GetEntriesPaginatedRequest,
     IDRequest,
+    InitialSetupRequest,
     LoginRequest,
     MarkRequest,
     Metrics,
     MultipleMarkRequest,
+    PasswordResetConfirmationRequest,
     PasswordResetRequest,
     ProfileModificationRequest,
     RegistrationRequest,
@@ -32,16 +34,17 @@ const axiosInstance = axios.create({ baseURL: "./rest", withCredentials: true })
 axiosInstance.interceptors.response.use(
     response => response,
     error => {
-        if (isAuthenticationError(error)) {
+        if (isAuthenticationError(error) && window.location.hash !== "#/login") {
             const data = error.response?.data
             window.location.hash = data?.allowRegistrations ? "/welcome" : "/login"
+            window.location.reload()
         }
         throw error
     }
 )
 
 function isAuthenticationError(error: unknown): error is AxiosError<AuthenticationError> {
-    return axios.isAxiosError(error) && !!error.response && [401, 403].includes(error.response.status)
+    return axios.isAxiosError(error) && error.response?.status === 401
 }
 
 export const client = {
@@ -93,7 +96,9 @@ export const client = {
             })
         },
         register: async (req: RegistrationRequest) => await axiosInstance.post("user/register", req),
+        initialSetup: async (req: InitialSetupRequest) => await axiosInstance.post("user/initialSetup", req),
         passwordReset: async (req: PasswordResetRequest) => await axiosInstance.post("user/passwordReset", req),
+        passwordResetCallback: async (req: PasswordResetConfirmationRequest) => await axiosInstance.post("user/passwordResetCallback", req),
         getSettings: async () => await axiosInstance.get<Settings>("user/settings"),
         saveSettings: async (settings: Settings) => await axiosInstance.post("user/settings", settings),
         getProfile: async () => await axiosInstance.get<UserModel>("user/profile"),
@@ -105,7 +110,7 @@ export const client = {
     },
     admin: {
         getAllUsers: async () => await axiosInstance.get<UserModel[]>("admin/user/getAll"),
-        saveUser: async (req: AdminSaveUserRequest) => await axiosInstance.post("admin/user/save", req),
+        saveUser: async (req: AdminSaveUserRequest) => await axiosInstance.post<number>("admin/user/save", req),
         deleteUser: async (req: IDRequest) => await axiosInstance.post("admin/user/delete", req),
         getMetrics: async () => await axiosInstance.get<Metrics>("admin/metrics"),
     },

commafeed-client/src/app/constants.ts

@@ -1,13 +1,11 @@
-import { t } from "@lingui/macro"
 import type { IconType } from "react-icons"
 import { FaAt } from "react-icons/fa"
 import { SiBuffer, SiFacebook, SiGmail, SiInstapaper, SiPocket, SiTumblr, SiX } from "react-icons/si"
 import type { Category, Entry, SharingSettings } from "./types"
 
-const categories: Record<string, Category> = {
+const categories: Record<string, Omit<Category, "name">> = {
     all: {
         id: "all",
-        name: t`All`,
         expanded: false,
         children: [],
         feeds: [],
@@ -15,7 +13,6 @@ const categories: Record<string, Category> = {
     },
     starred: {
         id: "starred",
-        name: t`Starred`,
         expanded: false,
         children: [],
         feeds: [],
@@ -90,23 +87,25 @@ export const Constants = {
         headerHeight: 60,
         entryMaxWidth: 650,
         isTopVisible: (div: HTMLElement) => {
-            const header = document.getElementById(Constants.dom.headerId)?.getBoundingClientRect()
+            const header = document.getElementsByTagName("header").item(0)?.getBoundingClientRect()
             return div.getBoundingClientRect().top >= (header?.bottom ?? 0)
         },
         isBottomVisible: (div: HTMLElement) => {
-            const footer = document.getElementById(Constants.dom.footerId)?.getBoundingClientRect()
+            const footer = document.getElementsByTagName("footer").item(0)?.getBoundingClientRect()
             return div.getBoundingClientRect().bottom <= (footer?.top ?? window.innerHeight)
         },
     },
     dom: {
-        headerId: "header",
-        footerId: "footer",
         entryId: (entry: Entry) => `entry-id-${entry.id}`,
         entryContextMenuId: (entry: Entry) => entry.id,
     },
+    theme: {
+        defaultPrimaryColor: "orange",
+    },
     tooltip: {
         delay: 500,
     },
     browserExtensionUrl: "https://github.com/Athou/commafeed-browser-extension",
+    customCssDocumentationUrl: "https://athou.github.io/commafeed/documentation/custom-css",
     bitcoinWalletAddress: "1dymfUxqCWpyD7a6rQSqNy4rLVDBsAr5e",
 }

commafeed-client/src/app/entries/entries.test.ts

@@ -1,25 +1,20 @@
 import { configureStore } from "@reduxjs/toolkit"
-import type { client } from "app/client"
-import { loadEntries, loadMoreEntries, markAllEntries, markEntry } from "app/entries/thunks"
-import { type RootState, reducers } from "app/store"
-import type { Entries, Entry } from "app/types"
 import type { AxiosResponse } from "axios"
 import { beforeEach, describe, expect, it, vi } from "vitest"
-import { any, mockReset } from "vitest-mock-extended"
+import { client } from "@/app/client"
+import { loadEntries, loadMoreEntries, markAllEntries, markEntry } from "@/app/entries/thunks"
+import { type RootState, reducers } from "@/app/store"
+import type { Entries, Entry } from "@/app/types"
 
-const mockClient = await vi.hoisted(async () => {
+vi.mock(import("@/app/client"))
-    const mockModule = await import("vitest-mock-extended")
-    return mockModule.mockDeep<typeof client>()
-})
-vi.mock("app/client", () => ({ client: mockClient }))
 
 describe("entries", () => {
     beforeEach(() => {
-        mockReset(mockClient)
+        vi.resetAllMocks()
     })
 
     it("loads entries", async () => {
-        mockClient.feed.getEntries.calledWith(any()).mockResolvedValue({
+        vi.mocked(client.feed.getEntries).mockResolvedValue({
             data: {
                 entries: [{ id: "3" } as Entry],
                 hasMore: false,
@@ -32,7 +27,12 @@ describe("entries", () => {
         } as AxiosResponse<Entries>)
 
         const store = configureStore({ reducer: reducers })
-        const promise = store.dispatch(loadEntries({ source: { type: "feed", id: "feed-id" }, clearSearch: true }))
+        const promise = store.dispatch(
+            loadEntries({
+                source: { type: "feed", id: "feed-id" },
+                clearSearch: true,
+            })
+        )
 
         expect(store.getState().entries.source.type).toBe("feed")
         expect(store.getState().entries.source.id).toBe("feed-id")
@@ -53,7 +53,7 @@ describe("entries", () => {
     })
 
     it("loads more entries", async () => {
-        mockClient.category.getEntries.calledWith(any()).mockResolvedValue({
+        vi.mocked(client.category.getEntries).mockResolvedValue({
             data: {
                 entries: [{ id: "4" } as Entry],
                 hasMore: false,
@@ -113,7 +113,7 @@ describe("entries", () => {
             { id: "3", read: true },
             { id: "4", read: false },
         ])
-        expect(mockClient.entry.mark).toHaveBeenCalledWith({ id: "3", read: true })
+        expect(client.entry.mark).toHaveBeenCalledWith({ id: "3", read: true })
     })
 
     it("marks all entries as read", () => {
@@ -135,11 +135,19 @@ describe("entries", () => {
             } as RootState,
         })
 
-        store.dispatch(markAllEntries({ sourceType: "category", req: { id: "all", read: true } }))
+        store.dispatch(
+            markAllEntries({
+                sourceType: "category",
+                req: { id: "all", read: true },
+            })
+        )
         expect(store.getState().entries.entries).toStrictEqual([
             { id: "3", read: true },
             { id: "4", read: true },
         ])
-        expect(mockClient.category.markEntries).toHaveBeenCalledWith({ id: "all", read: true })
+        expect(client.category.markEntries).toHaveBeenCalledWith({
+            id: "all",
+            read: true,
+        })
     })
 })

commafeed-client/src/app/entries/slice.ts

@@ -1,7 +1,7 @@
-import { type PayloadAction, createSlice } from "@reduxjs/toolkit"
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit"
-import { Constants } from "app/constants"
+import { Constants } from "@/app/constants"
-import { loadEntries, loadMoreEntries, markAllEntries, markEntry, markMultipleEntries, starEntry, tagEntry } from "app/entries/thunks"
+import { loadEntries, loadMoreEntries, markAllEntries, markEntry, markMultipleEntries, starEntry, tagEntry } from "@/app/entries/thunks"
-import type { Entry } from "app/types"
+import type { Entry } from "@/app/types"
 
 export type EntrySourceType = "category" | "feed" | "tag"
 
@@ -28,6 +28,7 @@ interface EntriesState {
     loading: boolean
     search?: string
     scrollingToEntry: boolean
+    markAllAsReadConfirmationDialogOpen: boolean
 }
 
 const initialState: EntriesState = {
@@ -41,6 +42,7 @@ const initialState: EntriesState = {
     hasMore: true,
     loading: false,
     scrollingToEntry: false,
+    markAllAsReadConfirmationDialogOpen: false,
 }
 
 export const entriesSlice = createSlice({
@@ -61,6 +63,9 @@ export const entriesSlice = createSlice({
         setSearch: (state, action: PayloadAction<string>) => {
             state.search = action.payload
         },
+        setMarkAllAsReadConfirmationDialogOpen: (state, action: PayloadAction<boolean>) => {
+            state.markAllAsReadConfirmationDialogOpen = action.payload
+        },
     },
     extraReducers: builder => {
         builder.addCase(markEntry.pending, (state, action) => {
@@ -119,4 +124,4 @@ export const entriesSlice = createSlice({
     },
 })
 
-export const { setSearch } = entriesSlice.actions
+export const { setSearch, setMarkAllAsReadConfirmationDialogOpen } = entriesSlice.actions

commafeed-client/src/app/entries/thunks.ts

@@ -1,16 +1,23 @@
-import { createAppAsyncThunk } from "app/async-thunk"
-import { client } from "app/client"
-import { Constants } from "app/constants"
-import { type EntrySource, type EntrySourceType, entriesSlice, setSearch } from "app/entries/slice"
-import type { RootState } from "app/store"
-import { reloadTree } from "app/tree/thunks"
-import type { Entry, MarkRequest, TagRequest } from "app/types"
-import { reloadTags } from "app/user/thunks"
-import { scrollToWithCallback } from "app/utils"
 import { flushSync } from "react-dom"
+import { createAppAsyncThunk } from "@/app/async-thunk"
+import { client } from "@/app/client"
+import { Constants } from "@/app/constants"
+import {
+    type EntrySource,
+    type EntrySourceType,
+    entriesSlice,
+    setMarkAllAsReadConfirmationDialogOpen,
+    setSearch,
+} from "@/app/entries/slice"
+import type { RootState } from "@/app/store"
+import { reloadTree, selectNextUnreadTreeItem } from "@/app/tree/thunks"
+import type { Entry, MarkRequest, TagRequest } from "@/app/types"
+import { reloadTags } from "@/app/user/thunks"
+import { scrollToWithCallback } from "@/app/utils"
 
 const getEndpoint = (sourceType: EntrySourceType) =>
     sourceType === "category" || sourceType === "tag" ? client.category.getEntries : client.feed.getEntries
+
 export const loadEntries = createAppAsyncThunk(
     "entries/load",
     async (
@@ -28,15 +35,19 @@ export const loadEntries = createAppAsyncThunk(
         return result.data
     }
 )
+
 export const loadMoreEntries = createAppAsyncThunk("entries/loadMore", async (_, thunkApi) => {
     const state = thunkApi.getState()
     const { source } = state.entries
     const offset =
-        state.user.settings?.readingMode === "all" ? state.entries.entries.length : state.entries.entries.filter(e => !e.read).length
+        state.user.settings?.readingMode === "all" || (source.type === "category" && source.id === "starred")
+            ? state.entries.entries.length
+            : state.entries.entries.filter(e => !e.read).length
     const endpoint = getEndpoint(state.entries.source.type)
     const result = await endpoint(buildGetEntriesPaginatedRequest(state, source, offset))
     return result.data
 })
+
 const buildGetEntriesPaginatedRequest = (state: RootState, source: EntrySource, offset: number) => ({
     id: source.type === "tag" ? Constants.categories.all.id : source.id,
     order: state.user.settings?.readingOrder,
@@ -46,15 +57,18 @@ const buildGetEntriesPaginatedRequest = (state: RootState, source: EntrySource,
     tag: source.type === "tag" ? source.id : undefined,
     keywords: state.entries.search,
 })
-export const reloadEntries = createAppAsyncThunk("entries/reload", (arg, thunkApi) => {
+
+export const reloadEntries = createAppAsyncThunk("entries/reload", (_, thunkApi) => {
     const state = thunkApi.getState()
     thunkApi.dispatch(loadEntries({ source: state.entries.source, clearSearch: false }))
 })
+
 export const search = createAppAsyncThunk("entries/search", (arg: string, thunkApi) => {
     const state = thunkApi.getState()
     thunkApi.dispatch(setSearch(arg))
     thunkApi.dispatch(loadEntries({ source: state.entries.source, clearSearch: false }))
 })
+
 export const markEntry = createAppAsyncThunk(
     "entries/entry/mark",
     (arg: { entry: Entry; read: boolean }) => {
@@ -67,6 +81,7 @@ export const markEntry = createAppAsyncThunk(
         condition: arg => arg.entry.markable && arg.entry.read !== arg.read,
     }
 )
+
 export const markMultipleEntries = createAppAsyncThunk(
     "entries/entry/markMultiple",
     async (
@@ -84,6 +99,7 @@ export const markMultipleEntries = createAppAsyncThunk(
         thunkApi.dispatch(reloadTree())
     }
 )
+
 export const markEntriesUpToEntry = createAppAsyncThunk("entries/entry/upToEntry", (arg: Entry, thunkApi) => {
     const state = thunkApi.getState()
     const { entries } = state.entries
@@ -98,6 +114,7 @@ export const markEntriesUpToEntry = createAppAsyncThunk("entries/entry/upToEntry
         })
     )
 })
+
 export const markAllEntries = createAppAsyncThunk(
     "entries/entry/markAll",
     async (
@@ -113,6 +130,37 @@ export const markAllEntries = createAppAsyncThunk(
         thunkApi.dispatch(reloadTree())
     }
 )
+
+export const markAllAsReadWithConfirmationIfRequired = createAppAsyncThunk(
+    "entries/entry/markAllAsReadWithConfirmationIfRequired",
+    async (_, thunkApi) => {
+        const state = thunkApi.getState()
+        const source = state.entries.source
+        const entriesTimestamp = state.entries.timestamp ?? Date.now()
+        const markAllAsReadConfirmation = state.user.settings?.markAllAsReadConfirmation
+        const markAllAsReadNavigateToNextUnread = state.user.settings?.markAllAsReadNavigateToNextUnread
+
+        if (markAllAsReadConfirmation) {
+            thunkApi.dispatch(setMarkAllAsReadConfirmationDialogOpen(true))
+        } else {
+            await thunkApi.dispatch(
+                markAllEntries({
+                    sourceType: source.type,
+                    req: {
+                        id: source.id,
+                        read: true,
+                        olderThan: Date.now(),
+                        insertedBefore: entriesTimestamp,
+                    },
+                })
+            )
+            const isAllCategorySelected = source.type === "category" && source.id === Constants.categories.all.id
+            if (markAllAsReadNavigateToNextUnread && !isAllCategorySelected)
+                await thunkApi.dispatch(selectNextUnreadTreeItem({ direction: "forward" }))
+        }
+    }
+)
+
 export const starEntry = createAppAsyncThunk(
     "entries/entry/star",
     (arg: { entry: Entry; starred: boolean }) => {
@@ -126,6 +174,7 @@ export const starEntry = createAppAsyncThunk(
         condition: arg => arg.entry.markable && arg.entry.starred !== arg.starred,
     }
 )
+
 export const selectEntry = createAppAsyncThunk(
     "entries/entry/select",
     (
@@ -191,8 +240,9 @@ export const selectEntry = createAppAsyncThunk(
         }
     }
 )
+
 const scrollToEntry = (entryElement: HTMLElement, margin: number, scrollSpeed: number | undefined, onScrollEnded: () => void) => {
-    const header = document.getElementById(Constants.dom.headerId)?.getBoundingClientRect()
+    const header = document.getElementsByTagName("header").item(0)?.getBoundingClientRect()
     const offset = (header?.bottom ?? 0) + margin
     scrollToWithCallback({
         options: {
@@ -228,6 +278,7 @@ export const selectPreviousEntry = createAppAsyncThunk(
         }
     }
 )
+
 export const selectNextEntry = createAppAsyncThunk(
     "entries/entry/selectNext",
     async (
@@ -261,6 +312,7 @@ export const selectNextEntry = createAppAsyncThunk(
         }
     }
 )
+
 export const tagEntry = createAppAsyncThunk("entries/entry/tag", async (arg: TagRequest, thunkApi) => {
     await client.entry.tag(arg)
     thunkApi.dispatch(reloadTags())

commafeed-client/src/app/redirect/redirect.test.ts

@@ -1,6 +1,6 @@
-import { redirectToCategory } from "app/redirect/thunks"
-import { store } from "app/store"
 import { describe, expect, it } from "vitest"
+import { redirectToCategory } from "@/app/redirect/thunks"
+import { store } from "@/app/store"
 
 describe("redirects", () => {
     it("redirects to category", async () => {

commafeed-client/src/app/redirect/slice.ts

@@ -1,4 +1,4 @@
-import { type PayloadAction, createSlice } from "@reduxjs/toolkit"
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit"
 
 interface RedirectState {
     to?: string

commafeed-client/src/app/redirect/thunks.ts

@@ -1,45 +1,61 @@
-import { createAppAsyncThunk } from "app/async-thunk"
+import { createAppAsyncThunk } from "@/app/async-thunk"
-import { Constants } from "app/constants"
+import { Constants } from "@/app/constants"
-import { redirectTo } from "app/redirect/slice"
+import { redirectTo } from "@/app/redirect/slice"
 
 export const redirectToLogin = createAppAsyncThunk("redirect/login", (_, thunkApi) => thunkApi.dispatch(redirectTo("/login")))
+
 export const redirectToRegistration = createAppAsyncThunk("redirect/register", (_, thunkApi) => thunkApi.dispatch(redirectTo("/register")))
-export const redirectToPasswordRecovery = createAppAsyncThunk("redirect/passwordRecovery", (_, thunkApi) =>
+
-    thunkApi.dispatch(redirectTo("/passwordRecovery"))
+export const redirectToInitialSetup = createAppAsyncThunk("redirect/initialSetup", (_, thunkApi) => thunkApi.dispatch(redirectTo("/setup")))
-)
+
-export const redirectToApiDocumentation = createAppAsyncThunk("redirect/api", (_, thunkApi) => thunkApi.dispatch(redirectTo("/api")))
+export const redirectToApiDocumentation = createAppAsyncThunk("redirect/api", () => {
+    window.location.href = "api-documentation/"
+})
 
 export const redirectToSelectedSource = createAppAsyncThunk("redirect/selectedSource", (_, thunkApi) => {
     const { source } = thunkApi.getState().entries
     thunkApi.dispatch(redirectTo(`/app/${source.type}/${source.id}`))
 })
+
 export const redirectToCategory = createAppAsyncThunk("redirect/category", (id: string, thunkApi) =>
     thunkApi.dispatch(redirectTo(`/app/category/${id}`))
 )
+
 export const redirectToRootCategory = createAppAsyncThunk(
     "redirect/category/root",
     async (_, thunkApi) => await thunkApi.dispatch(redirectToCategory(Constants.categories.all.id))
 )
+
 export const redirectToCategoryDetails = createAppAsyncThunk("redirect/category/details", (id: string, thunkApi) =>
     thunkApi.dispatch(redirectTo(`/app/category/${id}/details`))
 )
+
 export const redirectToFeed = createAppAsyncThunk("redirect/feed", (id: string | number, thunkApi) =>
     thunkApi.dispatch(redirectTo(`/app/feed/${id}`))
 )
+
 export const redirectToFeedDetails = createAppAsyncThunk("redirect/feed/details", (id: string, thunkApi) =>
     thunkApi.dispatch(redirectTo(`/app/feed/${id}/details`))
 )
+
 export const redirectToTag = createAppAsyncThunk("redirect/tag", (id: string, thunkApi) => thunkApi.dispatch(redirectTo(`/app/tag/${id}`)))
+
 export const redirectToTagDetails = createAppAsyncThunk("redirect/tag/details", (id: string, thunkApi) =>
     thunkApi.dispatch(redirectTo(`/app/tag/${id}/details`))
 )
+
 export const redirectToAdd = createAppAsyncThunk("redirect/add", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/add")))
+
 export const redirectToSettings = createAppAsyncThunk("redirect/settings", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/settings")))
+
 export const redirectToAdminUsers = createAppAsyncThunk("redirect/admin/users", (_, thunkApi) =>
     thunkApi.dispatch(redirectTo("/app/admin/users"))
 )
+
 export const redirectToMetrics = createAppAsyncThunk("redirect/admin/metrics", (_, thunkApi) =>
     thunkApi.dispatch(redirectTo("/app/admin/metrics"))
 )
+
 export const redirectToDonate = createAppAsyncThunk("redirect/donate", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/donate")))
+
 export const redirectToAbout = createAppAsyncThunk("redirect/about", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/about")))

commafeed-client/src/app/server/slice.ts

@@ -1,6 +1,6 @@
-import { type PayloadAction, createSlice } from "@reduxjs/toolkit"
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit"
-import { reloadServerInfos } from "app/server/thunks"
+import { reloadServerInfos } from "@/app/server/thunks"
-import type { ServerInfo } from "app/types"
+import type { ServerInfo } from "@/app/types"
 
 interface ServerState {
     serverInfos?: ServerInfo

commafeed-client/src/app/server/thunks.ts

@@ -1,4 +1,4 @@
-import { createAppAsyncThunk } from "app/async-thunk"
+import { createAppAsyncThunk } from "@/app/async-thunk"
-import { client } from "app/client"
+import { client } from "@/app/client"
 
 export const reloadServerInfos = createAppAsyncThunk("server/infos", async () => await client.server.getServerInfos().then(r => r.data))

commafeed-client/src/app/store.ts

@@ -1,11 +1,11 @@
 import { configureStore } from "@reduxjs/toolkit"
-import { entriesSlice } from "app/entries/slice"
-import { redirectSlice } from "app/redirect/slice"
-import { serverSlice } from "app/server/slice"
-import { treeSlice } from "app/tree/slice"
-import type { LocalSettings } from "app/types"
-import { initialLocalSettings, userSlice } from "app/user/slice"
 import { type TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"
+import { entriesSlice } from "@/app/entries/slice"
+import { redirectSlice } from "@/app/redirect/slice"
+import { serverSlice } from "@/app/server/slice"
+import { treeSlice } from "@/app/tree/slice"
+import type { LocalSettings } from "@/app/types"
+import { initialLocalSettings, userSlice } from "@/app/user/slice"
 
 export const reducers = {
     entries: entriesSlice.reducer,
@@ -17,19 +17,9 @@ export const reducers = {
 
 const loadLocalSettings = (): LocalSettings => {
     const json = localStorage.getItem("commafeed-local-settings")
-    if (json) {
-        return JSON.parse(json)
-    }
-
-    // load old settings
-    const viewMode = localStorage.getItem("view-mode")
-    const sidebarWidth = localStorage.getItem("sidebar-width")
-    const announcementHash = localStorage.getItem("announcement-hash")
     return {
         ...initialLocalSettings,
-        viewMode: viewMode ? JSON.parse(viewMode) : initialLocalSettings.viewMode,
+        ...(json ? JSON.parse(json) : {}),
-        sidebarWidth: sidebarWidth ? JSON.parse(sidebarWidth) : initialLocalSettings.sidebarWidth,
-        announcementHash: announcementHash ? JSON.parse(announcementHash) : initialLocalSettings.announcementHash,
     }
 }
 

commafeed-client/src/app/tree/slice.ts

@@ -1,12 +1,22 @@
-import { type PayloadAction, createSlice } from "@reduxjs/toolkit"
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit"
-import { markEntry } from "app/entries/thunks"
+import { loadEntries, markEntry } from "@/app/entries/thunks"
-import { redirectTo } from "app/redirect/slice"
+import { redirectTo } from "@/app/redirect/slice"
-import { collapseTreeCategory, reloadTree } from "app/tree/thunks"
+import { collapseTreeCategory, reloadTree } from "@/app/tree/thunks"
-import type { Category } from "app/types"
+import type { Category, Subscription } from "@/app/types"
-import { visitCategoryTree } from "app/utils"
+import { flattenCategoryTree, visitCategoryTree } from "@/app/utils"
+
+export interface TreeSubscription extends Subscription {
+    // client-side only flag
+    hasNewEntries?: boolean
+}
+
+export interface TreeCategory extends Category {
+    feeds: TreeSubscription[]
+    children: TreeCategory[]
+}
 
 interface TreeState {
-    rootCategory?: Category
+    rootCategory?: TreeCategory
     mobileMenuOpen: boolean
     sidebarVisible: boolean
 }
@@ -37,12 +47,27 @@ export const treeSlice = createSlice({
             visitCategoryTree(state.rootCategory, c => {
                 for (const f of c.feeds.filter(f => f.id === action.payload.feedId)) {
                     f.unread += action.payload.amount
+                    f.hasNewEntries = true
                 }
             })
         },
     },
     extraReducers: builder => {
         builder.addCase(reloadTree.fulfilled, (state, action) => {
+            // set hasNewEntries to true if new unread > previous unread
+            if (state.rootCategory) {
+                const oldFeeds = flattenCategoryTree(state.rootCategory).flatMap(c => c.feeds)
+                const oldFeedsById = new Map(oldFeeds.map(f => [f.id, f]))
+
+                const newFeeds = flattenCategoryTree(action.payload).flatMap(c => c.feeds)
+                for (const newFeed of newFeeds) {
+                    const oldFeed = oldFeedsById.get(newFeed.id)
+                    if (oldFeed && newFeed.unread > oldFeed.unread) {
+                        newFeed.hasNewEntries = true
+                    }
+                }
+            }
+
             state.rootCategory = action.payload
         })
         builder.addCase(collapseTreeCategory.pending, (state, action) => {
@@ -59,6 +84,25 @@ export const treeSlice = createSlice({
                 }
             })
         })
+        builder.addCase(loadEntries.fulfilled, (state, action) => {
+            if (!state.rootCategory) return
+
+            const { source } = action.meta.arg
+            if (source.type === "category") {
+                visitCategoryTree(state.rootCategory, c => {
+                    if (c.id === source.id) {
+                        for (const f of flattenCategoryTree(c).flatMap(c => c.feeds)) {
+                            f.hasNewEntries = false
+                        }
+                    }
+                })
+            } else if (source.type === "feed") {
+                const feeds = flattenCategoryTree(state.rootCategory).flatMap(c => c.feeds)
+                for (const f of feeds.filter(f => f.id === +source.id)) {
+                    f.hasNewEntries = false
+                }
+            }
+        })
         builder.addCase(redirectTo, state => {
             state.mobileMenuOpen = false
         })

commafeed-client/src/app/tree/thunks.ts

@@ -1,9 +1,84 @@
-import { createAppAsyncThunk } from "app/async-thunk"
+import { createAppAsyncThunk } from "@/app/async-thunk"
-import { client } from "app/client"
+import { client } from "@/app/client"
-import type { CollapseRequest } from "app/types"
+import { Constants } from "@/app/constants"
+import { redirectToCategory, redirectToFeed } from "@/app/redirect/thunks"
+import { incrementUnreadCount } from "@/app/tree/slice"
+import type { CollapseRequest, Subscription } from "@/app/types"
+import { flattenCategoryTree, visitCategoryTree } from "@/app/utils"
 
 export const reloadTree = createAppAsyncThunk("tree/reload", async () => await client.category.getRoot().then(r => r.data))
+
 export const collapseTreeCategory = createAppAsyncThunk(
     "tree/category/collapse",
-    async (req: CollapseRequest) => await client.category.collapse(req)
+    async (req: CollapseRequest) => await client.category.collapse(req).then(r => r.data)
+)
+
+export const selectNextUnreadTreeItem = createAppAsyncThunk(
+    "tree/selectNextUnreadItem",
+    (
+        arg: {
+            direction: "forward" | "backward"
+        },
+        thunkApi
+    ) => {
+        const state = thunkApi.getState()
+        const root = state.tree.rootCategory
+        if (!root) return
+
+        const { source } = state.entries
+        if (source.type === "category") {
+            const categories = flattenCategoryTree(root)
+            if (arg.direction === "backward") categories.reverse()
+
+            const index = categories.findIndex(c => c.id === source.id)
+            if (index === -1) return
+
+            for (let i = index + 1; i < categories.length; i++) {
+                const c = categories[i]
+                if (c.feeds.some(f => f.unread > 0)) {
+                    return thunkApi.dispatch(redirectToCategory(String(c.id)))
+                }
+            }
+        } else if (source.type === "feed") {
+            const feeds: Subscription[] = []
+            visitCategoryTree(root, c => feeds.push(...c.feeds), { childrenFirst: true })
+            if (arg.direction === "backward") feeds.reverse()
+
+            const index = feeds.findIndex(f => f.id === +source.id)
+            if (index === -1) return
+
+            for (let i = index + 1; i < feeds.length; i++) {
+                const f = feeds[i]
+                if (f.unread > 0) {
+                    return thunkApi.dispatch(redirectToFeed(String(f.id)))
+                }
+            }
+        }
+
+        // redirect to 'all' if no unread categories or feeds found or if we reached the end of the list
+        thunkApi.dispatch(redirectToCategory(Constants.categories.all.id))
+    }
+)
+
+export const newFeedEntriesDiscovered = createAppAsyncThunk(
+    "tree/new-feed-entries-discovered",
+    async ({ feedId, amount }: { feedId: number; amount: number }, thunkApi) => {
+        const root = thunkApi.getState().tree.rootCategory
+        if (!root) return
+
+        const feed = flattenCategoryTree(root)
+            .flatMap(c => c.feeds)
+            .some(f => f.id === feedId)
+        if (!feed) {
+            // feed not found in the tree, reload the tree completely
+            thunkApi.dispatch(reloadTree())
+        } else {
+            thunkApi.dispatch(
+                incrementUnreadCount({
+                    feedId,
+                    amount,
+                })
+            )
+        }
+    }
 )

commafeed-client/src/app/tree/tree.test.ts

@@ -0,0 +1,172 @@
+import { configureStore } from "@reduxjs/toolkit"
+import type { AxiosResponse } from "axios"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+import { client } from "@/app/client"
+import { loadEntries } from "@/app/entries/thunks"
+import { type RootState, reducers } from "@/app/store"
+import { newFeedEntriesDiscovered, selectNextUnreadTreeItem } from "@/app/tree/thunks"
+import type { Category, Entries, Entry, Subscription } from "@/app/types"
+
+vi.mock(import("@/app/client"))
+
+const createCategory = (id: string): Category => ({
+    id,
+    name: id,
+    children: [],
+    feeds: [],
+    expanded: true,
+    position: 0,
+})
+
+const createFeed = (id: number, unread: number): Subscription => ({
+    id,
+    name: String(id),
+    unread,
+    errorCount: 0,
+    position: 0,
+    feedUrl: "",
+    feedLink: "",
+    iconUrl: "",
+})
+
+const root = createCategory("root")
+
+const catA = createCategory("catA")
+catA.feeds.push(createFeed(1, 0), createFeed(2, 0), createFeed(3, 1))
+
+const catB = createCategory("catB")
+
+const catC = createCategory("catC")
+catC.feeds.push(createFeed(4, 1))
+
+root.children.push(catA, catB, catC)
+
+describe("selectNextUnreadTreeItem", () => {
+    it("selects the next unread category", async () => {
+        const store = configureStore({
+            reducer: reducers,
+            preloadedState: {
+                tree: {
+                    rootCategory: root,
+                },
+                entries: {
+                    source: {
+                        type: "category",
+                        id: "catA",
+                    },
+                },
+            } as RootState,
+        })
+
+        await store.dispatch(selectNextUnreadTreeItem({ direction: "forward" }))
+        expect(store.getState().redirect.to).toBe("/app/category/catC")
+    })
+
+    it("selects the previous unread category", async () => {
+        const store = configureStore({
+            reducer: reducers,
+            preloadedState: {
+                tree: {
+                    rootCategory: root,
+                },
+                entries: {
+                    source: {
+                        type: "category",
+                        id: "catC",
+                    },
+                },
+            } as RootState,
+        })
+
+        await store.dispatch(selectNextUnreadTreeItem({ direction: "backward" }))
+        expect(store.getState().redirect.to).toBe("/app/category/catA")
+    })
+
+    it("selects the next unread feed", async () => {
+        const store = configureStore({
+            reducer: reducers,
+            preloadedState: {
+                tree: {
+                    rootCategory: root,
+                },
+                entries: {
+                    source: {
+                        type: "feed",
+                        id: "1",
+                    },
+                },
+            } as RootState,
+        })
+
+        await store.dispatch(selectNextUnreadTreeItem({ direction: "forward" }))
+        expect(store.getState().redirect.to).toBe("/app/feed/3")
+    })
+
+    it("selects the previous unread feed", async () => {
+        const store = configureStore({
+            reducer: reducers,
+            preloadedState: {
+                tree: {
+                    rootCategory: root,
+                },
+                entries: {
+                    source: {
+                        type: "feed",
+                        id: "4",
+                    },
+                },
+            } as RootState,
+        })
+
+        await store.dispatch(selectNextUnreadTreeItem({ direction: "backward" }))
+        expect(store.getState().redirect.to).toBe("/app/feed/3")
+    })
+})
+
+describe("hasNewEntries", () => {
+    beforeEach(() => {
+        vi.resetAllMocks()
+    })
+
+    it("sets and clear flag for a feed", async () => {
+        vi.mocked(client.feed.getEntries).mockResolvedValue({
+            data: {
+                entries: [{ id: "3" } as Entry],
+                hasMore: false,
+                name: "my-feed",
+                errorCount: 3,
+                feedLink: "https://mysite.com/feed",
+                timestamp: 123,
+                ignoredReadStatus: false,
+            },
+        } as AxiosResponse<Entries>)
+
+        const store = configureStore({
+            reducer: reducers,
+            preloadedState: {
+                tree: {
+                    rootCategory: root,
+                },
+                entries: {
+                    source: {
+                        type: "feed",
+                        id: "1",
+                    },
+                },
+            } as RootState,
+        })
+
+        // initial state
+        expect(store.getState().tree.rootCategory?.children[0].feeds[0].unread).toBe(0)
+        expect(store.getState().tree.rootCategory?.children[0].feeds[0].hasNewEntries).toBeFalsy()
+
+        // increments unread count and sets hasNewEntries to true
+        await store.dispatch(newFeedEntriesDiscovered({ feedId: 1, amount: 3 }))
+        expect(store.getState().tree.rootCategory?.children[0].feeds[0].unread).toBe(3)
+        expect(store.getState().tree.rootCategory?.children[0].feeds[0].hasNewEntries).toBe(true)
+
+        // reload entries and sets hasNewEntries to false
+        await store.dispatch(loadEntries({ source: { type: "feed", id: "1" }, clearSearch: true }))
+        expect(store.getState().tree.rootCategory?.children[0].feeds[0].hasNewEntries).toBe(false)
+    })
+})

commafeed-client/src/app/types.ts

@@ -196,6 +196,12 @@ export interface PasswordResetRequest {
     email: string
 }
 
+export interface PasswordResetConfirmationRequest {
+    email: string
+    token: string
+    password: string
+}
+
 export interface ProfileModificationRequest {
     currentPassword: string
     email: string
@@ -209,18 +215,26 @@ export interface RegistrationRequest {
     email: string
 }
 
+export interface InitialSetupRequest {
+    name: string
+    password: string
+    email?: string
+}
+
 export interface ServerInfo {
     announcement?: string
     version: string
     gitCommit: string
     allowRegistrations: boolean
-    googleAnalyticsCode?: string
+    emailAddressRequired: boolean
     smtpEnabled: boolean
     demoAccountEnabled: boolean
     websocketEnabled: boolean
     websocketPingInterval: number
     treeReloadInterval: number
     forceRefreshCooldownDuration: number
+    initialSetupRequired: boolean
+    minimumPasswordLength: number
 }
 
 export interface SharingSettings {
@@ -235,7 +249,7 @@ export interface SharingSettings {
 }
 
 export interface Settings {
-    language: string
+    language?: string
     readingMode: ReadingMode
     readingOrder: ReadingOrder
     showRead: boolean
@@ -248,10 +262,13 @@ export interface Settings {
     starIconDisplayMode: IconDisplayMode
     externalLinkIconDisplayMode: IconDisplayMode
     markAllAsReadConfirmation: boolean
+    markAllAsReadNavigateToNextUnread: boolean
     customContextMenu: boolean
     mobileFooter: boolean
     unreadCountTitle: boolean
     unreadCountFavicon: boolean
+    disablePullToRefresh: boolean
+    primaryColor?: string
     sharingSettings: SharingSettings
 }
 
@@ -259,6 +276,7 @@ export interface LocalSettings {
     viewMode: ViewMode
     sidebarWidth: number
     announcementHash: string
+    fontSizePercentage: number
 }
 
 export interface StarRequest {

commafeed-client/src/app/user/slice.ts

@@ -1,14 +1,17 @@
-import { t } from "@lingui/macro"
+import { t } from "@lingui/core/macro"
 import { showNotification } from "@mantine/notifications"
-import { type PayloadAction, createSlice, isAnyOf } from "@reduxjs/toolkit"
+import { createSlice, isAnyOf, type PayloadAction } from "@reduxjs/toolkit"
-import type { LocalSettings, Settings, UserModel, ViewMode } from "app/types"
+import type { LocalSettings, Settings, UserModel, ViewMode } from "@/app/types"
 import {
     changeCustomContextMenu,
+    changeDisablePullToRefresh,
     changeEntriesToKeepOnTopWhenScrolling,
     changeExternalLinkIconDisplayMode,
     changeLanguage,
     changeMarkAllAsReadConfirmation,
+    changeMarkAllAsReadNavigateToUnread,
     changeMobileFooter,
+    changePrimaryColor,
     changeReadingMode,
     changeReadingOrder,
     changeScrollMarks,
@@ -35,6 +38,7 @@ export const initialLocalSettings: LocalSettings = {
     viewMode: "detailed",
     sidebarWidth: 360,
     announcementHash: "no-hash",
+    fontSizePercentage: 100,
 }
 
 const initialState: UserState = {
@@ -48,6 +52,9 @@ export const userSlice = createSlice({
         setViewMode: (state, action: PayloadAction<ViewMode>) => {
             state.localSettings.viewMode = action.payload
         },
+        setFontSizePercentage: (state, action: PayloadAction<number>) => {
+            state.localSettings.fontSizePercentage = action.payload
+        },
         setSidebarWidth: (state, action: PayloadAction<number>) => {
             state.localSettings.sidebarWidth = action.payload
         },
@@ -109,6 +116,10 @@ export const userSlice = createSlice({
             if (!state.settings) return
             state.settings.markAllAsReadConfirmation = action.meta.arg
         })
+        builder.addCase(changeMarkAllAsReadNavigateToUnread.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.markAllAsReadNavigateToNextUnread = action.meta.arg
+        })
         builder.addCase(changeCustomContextMenu.pending, (state, action) => {
             if (!state.settings) return
             state.settings.customContextMenu = action.meta.arg
@@ -125,10 +136,19 @@ export const userSlice = createSlice({
             if (!state.settings) return
             state.settings.unreadCountFavicon = action.meta.arg
         })
+        builder.addCase(changeDisablePullToRefresh.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.disablePullToRefresh = action.meta.arg
+        })
+        builder.addCase(changePrimaryColor.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.primaryColor = action.meta.arg
+        })
         builder.addCase(changeSharingSetting.pending, (state, action) => {
             if (!state.settings) return
             state.settings.sharingSettings[action.meta.arg.site] = action.meta.arg.value
         })
+
         builder.addMatcher(
             isAnyOf(
                 changeLanguage.fulfilled,
@@ -140,10 +160,13 @@ export const userSlice = createSlice({
                 changeStarIconDisplayMode.fulfilled,
                 changeExternalLinkIconDisplayMode.fulfilled,
                 changeMarkAllAsReadConfirmation.fulfilled,
+                changeMarkAllAsReadNavigateToUnread.fulfilled,
                 changeCustomContextMenu.fulfilled,
                 changeMobileFooter.fulfilled,
                 changeUnreadCountTitle.fulfilled,
                 changeUnreadCountFavicon.fulfilled,
+                changeDisablePullToRefresh.fulfilled,
+                changePrimaryColor.fulfilled,
                 changeSharingSetting.fulfilled
             ),
             () => {
@@ -156,4 +179,4 @@ export const userSlice = createSlice({
     },
 })
 
-export const { setViewMode, setSidebarWidth, setAnnouncementHash } = userSlice.actions
+export const { setViewMode, setSidebarWidth, setAnnouncementHash, setFontSizePercentage } = userSlice.actions

commafeed-client/src/app/user/thunks.ts

@@ -1,48 +1,58 @@
-import { createAppAsyncThunk } from "app/async-thunk"
+import { createAppAsyncThunk } from "@/app/async-thunk"
-import { client } from "app/client"
+import { client } from "@/app/client"
-import { reloadEntries } from "app/entries/thunks"
+import { reloadEntries } from "@/app/entries/thunks"
-import type { IconDisplayMode, ReadingMode, ReadingOrder, ScrollMode, SharingSettings } from "app/types"
+import type { IconDisplayMode, ReadingMode, ReadingOrder, ScrollMode, SharingSettings } from "@/app/types"
 
 export const reloadSettings = createAppAsyncThunk("settings/reload", async () => await client.user.getSettings().then(r => r.data))
+
 export const reloadProfile = createAppAsyncThunk("profile/reload", async () => await client.user.getProfile().then(r => r.data))
+
 export const reloadTags = createAppAsyncThunk("entries/tags", async () => await client.entry.getTags().then(r => r.data))
+
 export const changeReadingMode = createAppAsyncThunk("settings/readingMode", (readingMode: ReadingMode, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
     client.user.saveSettings({ ...settings, readingMode })
     thunkApi.dispatch(reloadEntries())
 })
+
 export const changeReadingOrder = createAppAsyncThunk("settings/readingOrder", (readingOrder: ReadingOrder, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
     client.user.saveSettings({ ...settings, readingOrder })
     thunkApi.dispatch(reloadEntries())
 })
+
 export const changeLanguage = createAppAsyncThunk("settings/language", (language: string, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
     client.user.saveSettings({ ...settings, language })
 })
+
 export const changeScrollSpeed = createAppAsyncThunk("settings/scrollSpeed", (speed: boolean, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
     client.user.saveSettings({ ...settings, scrollSpeed: speed ? 400 : 0 })
 })
+
 export const changeShowRead = createAppAsyncThunk("settings/showRead", (showRead: boolean, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
     client.user.saveSettings({ ...settings, showRead })
 })
+
 export const changeScrollMarks = createAppAsyncThunk("settings/scrollMarks", (scrollMarks: boolean, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
     client.user.saveSettings({ ...settings, scrollMarks })
 })
+
 export const changeScrollMode = createAppAsyncThunk("settings/scrollMode", (scrollMode: ScrollMode, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
     client.user.saveSettings({ ...settings, scrollMode })
 })
+
 export const changeEntriesToKeepOnTopWhenScrolling = createAppAsyncThunk(
     "settings/entriesToKeepOnTopWhenScrolling",
     (entriesToKeepOnTopWhenScrolling: number, thunkApi) => {
@@ -51,6 +61,7 @@ export const changeEntriesToKeepOnTopWhenScrolling = createAppAsyncThunk(
         client.user.saveSettings({ ...settings, entriesToKeepOnTopWhenScrolling })
     }
 )
+
 export const changeStarIconDisplayMode = createAppAsyncThunk(
     "settings/starIconDisplayMode",
     (starIconDisplayMode: IconDisplayMode, thunkApi) => {
@@ -59,6 +70,7 @@ export const changeStarIconDisplayMode = createAppAsyncThunk(
         client.user.saveSettings({ ...settings, starIconDisplayMode })
     }
 )
+
 export const changeExternalLinkIconDisplayMode = createAppAsyncThunk(
     "settings/externalLinkIconDisplayMode",
     (externalLinkIconDisplayMode: IconDisplayMode, thunkApi) => {
@@ -67,6 +79,7 @@ export const changeExternalLinkIconDisplayMode = createAppAsyncThunk(
         client.user.saveSettings({ ...settings, externalLinkIconDisplayMode })
     }
 )
+
 export const changeMarkAllAsReadConfirmation = createAppAsyncThunk(
     "settings/markAllAsReadConfirmation",
     (markAllAsReadConfirmation: boolean, thunkApi) => {
@@ -75,26 +88,55 @@ export const changeMarkAllAsReadConfirmation = createAppAsyncThunk(
         client.user.saveSettings({ ...settings, markAllAsReadConfirmation })
     }
 )
+
+export const changeMarkAllAsReadNavigateToUnread = createAppAsyncThunk(
+    "settings/markAllAsReadNavigateToUnread",
+    (markAllAsReadNavigateToNextUnread: boolean, thunkApi) => {
+        const { settings } = thunkApi.getState().user
+        if (!settings) return
+        client.user.saveSettings({ ...settings, markAllAsReadNavigateToNextUnread })
+    }
+)
+
 export const changeCustomContextMenu = createAppAsyncThunk("settings/customContextMenu", (customContextMenu: boolean, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
     client.user.saveSettings({ ...settings, customContextMenu })
 })
+
 export const changeMobileFooter = createAppAsyncThunk("settings/mobileFooter", (mobileFooter: boolean, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
     client.user.saveSettings({ ...settings, mobileFooter })
 })
+
 export const changeUnreadCountTitle = createAppAsyncThunk("settings/unreadCountTitle", (unreadCountTitle: boolean, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
     client.user.saveSettings({ ...settings, unreadCountTitle })
 })
+
 export const changeUnreadCountFavicon = createAppAsyncThunk("settings/unreadCountFavicon", (unreadCountFavicon: boolean, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
     client.user.saveSettings({ ...settings, unreadCountFavicon })
 })
+
+export const changeDisablePullToRefresh = createAppAsyncThunk(
+    "settings/disablePullToRefresh",
+    (disablePullToRefresh: boolean, thunkApi) => {
+        const { settings } = thunkApi.getState().user
+        if (!settings) return
+        client.user.saveSettings({ ...settings, disablePullToRefresh })
+    }
+)
+
+export const changePrimaryColor = createAppAsyncThunk("settings/primaryColor", (primaryColor: string, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, primaryColor })
+})
+
 export const changeSharingSetting = createAppAsyncThunk(
     "settings/sharingSetting",
     (

commafeed-client/src/app/utils.ts

@@ -1,20 +1,32 @@
 import { throttle } from "throttle-debounce"
+import type { TreeCategory } from "@/app/tree/slice"
 import type { Category } from "./types"
 
-export function visitCategoryTree(category: Category, visitor: (category: Category) => void): void {
+export function visitCategoryTree(
-    visitor(category)
+    category: TreeCategory,
-    for (const child of category.children) {
+    visitor: (category: TreeCategory) => void,
-        visitCategoryTree(child, visitor)
+    options?: {
+        childrenFirst?: boolean
     }
+): void {
+    const childrenFirst = options?.childrenFirst
+
+    if (!childrenFirst) visitor(category)
+
+    for (const child of category.children) {
+        visitCategoryTree(child, visitor, options)
+    }
+
+    if (childrenFirst) visitor(category)
 }
 
-export function flattenCategoryTree(category: Category): Category[] {
+export function flattenCategoryTree(category: TreeCategory): TreeCategory[] {
     const categories: Category[] = []
     visitCategoryTree(category, c => categories.push(c))
     return categories
 }
 
-export function categoryUnreadCount(category?: Category): number {
+export function categoryUnreadCount(category?: TreeCategory): number {
     if (!category) return 0
 
     return flattenCategoryTree(category)
@@ -23,6 +35,14 @@ export function categoryUnreadCount(category?: Category): number {
         .reduce((total, current) => total + current, 0)
 }
 
+export function categoryHasNewEntries(category?: TreeCategory): boolean {
+    if (!category) return false
+
+    return flattenCategoryTree(category)
+        .flatMap(c => c.feeds)
+        .some(f => f.hasNewEntries)
+}
+
 export const calculatePlaceholderSize = ({ width, height, maxWidth }: { width?: number; height?: number; maxWidth: number }) => {
     const placeholderWidth = width && Math.min(width, maxWidth)
     const placeholderHeight = height && width && width > maxWidth ? height * (maxWidth / width) : height

commafeed-client/src/components/ActionButton.test.tsx

@@ -0,0 +1,53 @@
+import type { I18nContext } from "@lingui/react"
+import { MantineProvider } from "@mantine/core"
+import { fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+import { useActionButton } from "@/hooks/useActionButton"
+import { ActionButton } from "./ActionButton"
+
+vi.mock(import("@lingui/react"), () => ({
+    useLingui: vi.fn().mockReturnValue({
+        _: msg => msg,
+    } as I18nContext),
+}))
+vi.mock(import("@/hooks/useActionButton"))
+
+const label = "Test Label"
+const icon = "Test Icon"
+describe("ActionButton", () => {
+    it("renders Button with label on desktop", () => {
+        vi.mocked(useActionButton).mockReturnValue({ mobile: false, spacing: 0 })
+
+        render(<ActionButton label={label} icon={icon} />, {
+            wrapper: MantineProvider,
+        })
+        expect(screen.getByText(label)).toBeInTheDocument()
+        expect(screen.getByText(icon)).toBeInTheDocument()
+    })
+
+    it("renders ActionIcon with tooltip on mobile", async () => {
+        vi.mocked(useActionButton).mockReturnValue({ mobile: true, spacing: 0 })
+
+        render(<ActionButton label={label} icon={icon} />, {
+            wrapper: MantineProvider,
+        })
+        expect(screen.queryByText(label)).not.toBeInTheDocument()
+        expect(screen.getByText(icon)).toBeInTheDocument()
+
+        fireEvent.mouseEnter(screen.getByRole("button"))
+        const tooltip = await waitFor(() => screen.getByRole("tooltip"))
+        expect(tooltip).toContainHTML(label)
+    })
+
+    it("calls onClick handler when clicked", () => {
+        vi.mocked(useActionButton).mockReturnValue({ mobile: false, spacing: 0 })
+        const clickListener = vi.fn()
+
+        render(<ActionButton label={label} icon={icon} onClick={clickListener} />, {
+            wrapper: MantineProvider,
+        })
+        fireEvent.click(screen.getByRole("button"))
+
+        expect(clickListener).toHaveBeenCalled()
+    })
+})

commafeed-client/src/components/ActionButton.tsx

@@ -1,14 +1,14 @@
 import type { MessageDescriptor } from "@lingui/core"
 import { useLingui } from "@lingui/react"
-import { ActionIcon, Button, type ButtonVariant, Tooltip, useMantineTheme } from "@mantine/core"
+import { ActionIcon, Box, Button, type ButtonVariant, Tooltip, useMantineTheme } from "@mantine/core"
 import type { ActionIconVariant } from "@mantine/core/lib/components/ActionIcon/ActionIcon"
-import { Constants } from "app/constants"
+import { forwardRef, type MouseEventHandler, type ReactNode } from "react"
-import { useActionButton } from "hooks/useActionButton"
+import { Constants } from "@/app/constants"
-import { type MouseEventHandler, type ReactNode, forwardRef } from "react"
+import { useActionButton } from "@/hooks/useActionButton"
 
 interface ActionButtonProps {
+    icon: ReactNode
     className?: string
-    icon?: ReactNode
     label?: string | MessageDescriptor
     onClick?: MouseEventHandler
     variant?: ActionIconVariant & ButtonVariant
@@ -19,7 +19,7 @@ interface ActionButtonProps {
 /**
  * Switches between Button with label (desktop) and ActionIcon (mobile)
  */
-export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((props: ActionButtonProps, ref) => {
+export const ActionButton = forwardRef<HTMLDivElement, ActionButtonProps>((props: ActionButtonProps, ref) => {
     const { mobile } = useActionButton()
     const theme = useMantineTheme()
     const { _ } = useLingui()
@@ -27,31 +27,36 @@ export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((pr
     const label = typeof props.label === "string" ? props.label : props.label && _(props.label)
     const variant = props.variant ?? "subtle"
     const iconOnly = (mobile && !props.showLabelOnMobile) || (!mobile && props.hideLabelOnDesktop)
-    return iconOnly ? (
+
-        <Tooltip label={label} openDelay={Constants.tooltip.delay}>
+    return (
-            <ActionIcon
+        <Box ref={ref} className="cf-action-button">
-                ref={ref}
+            {iconOnly && (
-                color={theme.primaryColor}
+                <Tooltip label={label} openDelay={Constants.tooltip.delay}>
-                variant={variant}
+                    <ActionIcon
-                className={props.className}
+                        color={theme.primaryColor}
-                onClick={props.onClick}
+                        variant={variant}
-                aria-label={label}
+                        className={props.className}
-            >
+                        onClick={props.onClick}
-                {props.icon}
+                        aria-label={label}
-            </ActionIcon>
+                    >
-        </Tooltip>
+                        {props.icon}
-    ) : (
+                    </ActionIcon>
-        <Button
+                </Tooltip>
-            ref={ref}
+            )}
-            variant={variant}
+            {!iconOnly && (
-            size="xs"
+                <Button
-            className={props.className}
+                    variant={variant}
-            leftSection={props.icon}
+                    size="xs"
-            onClick={props.onClick}
+                    className={props.className}
-            aria-label={label}
+                    leftSection={props.icon}
-        >
+                    onClick={props.onClick}
-            {label}
+                    aria-label={label}
-        </Button>
+                >
+                    {label}
+                </Button>
+            )}
+        </Box>
     )
 })
+
 ActionButton.displayName = "HeaderButton"

commafeed-client/src/components/Alert.tsx

@@ -1,4 +1,4 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/react/macro"
 import { Box, Alert as MantineAlert } from "@mantine/core"
 import { Fragment } from "react"
 import { TbAlertCircle, TbAlertTriangle, TbCircleCheck } from "react-icons/tb"
@@ -10,7 +10,7 @@ export interface ErrorsAlertProps {
     messages: string[]
 }
 
-export function Alert(props: ErrorsAlertProps) {
+export function Alert(props: Readonly<ErrorsAlertProps>) {
     let title: React.ReactNode
     let color: string
     let icon: React.ReactNode

commafeed-client/src/components/AnnouncementDialog.tsx

@@ -1,9 +1,9 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/react/macro"
 import { Box, Dialog, Text } from "@mantine/core"
-import { useAppDispatch, useAppSelector } from "app/store"
-import { setAnnouncementHash } from "app/user/slice"
-import { Content } from "components/content/Content"
 import { useAsync } from "react-async-hook"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import { setAnnouncementHash } from "@/app/user/slice"
+import { Content } from "@/components/content/Content"
 
 const sha256Hex = async (input: string | undefined) => {
     const data = new TextEncoder().encode(input)

commafeed-client/src/components/DisablePullToRefresh.tsx

@@ -1,15 +1,3 @@
-import { Helmet } from "react-helmet"
+export const DisablePullToRefresh = ({ enabled }: { enabled: boolean | undefined }) => {
-
+    return enabled ? <style>{`html, body { overscroll-behavior: none; }`}</style> : null
-export const DisablePullToRefresh = () => {
-    return (
-        <Helmet>
-            <style type="text/css">
-                {`
-                    html, body {
-                        overscroll-behavior: none;
-                    }
-                `}
-            </style>
-        </Helmet>
-    )
 }

commafeed-client/src/components/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
-import { ErrorPage } from "pages/ErrorPage"
 import React, { type ReactNode } from "react"
+import { ErrorPage } from "@/pages/ErrorPage"
 
 interface ErrorBoundaryProps {
     children?: ReactNode

commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx

@@ -1,7 +1,7 @@
 import { Box, Center } from "@mantine/core"
 import { useState } from "react"
 import { TbPhoto } from "react-icons/tb"
-import { tss } from "tss"
+import { tss } from "@/tss"
 
 interface ImageWithPlaceholderWhileLoadingProps {
     src: string
@@ -44,7 +44,7 @@ export function ImageWithPlaceholderWhileLoading({
     title,
     width,
     style,
-}: ImageWithPlaceholderWhileLoadingProps) {
+}: Readonly<ImageWithPlaceholderWhileLoadingProps>) {
     const { classes } = useStyles({
         placeholderWidth,
         placeholderHeight,
@@ -70,7 +70,11 @@ export function ImageWithPlaceholderWhileLoading({
                 width={width}
                 height={height}
                 onLoad={() => setLoading(false)}
-                style={{ ...style, display: loading ? "none" : (style?.display ?? "initial") }}
+                style={{
+                    ...style,
+                    display: loading ? "none" : (style?.display ?? "initial"),
+                    height: style?.width ? "auto" : style?.height,
+                }}
             />
         </>
     )

commafeed-client/src/components/KeyboardShortcutsHelp.tsx

@@ -1,7 +1,7 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/react/macro"
 import { Anchor, Box, Kbd, Stack, Table } from "@mantine/core"
 import { useOs } from "@mantine/hooks"
-import { Constants } from "app/constants"
+import { Constants } from "@/app/constants"
 
 export function KeyboardShortcutsHelp() {
     const isMacOS = useOs() === "macos"
@@ -33,6 +33,26 @@ export function KeyboardShortcutsHelp() {
                             <Kbd>K</Kbd>
                         </Table.Td>
                     </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Select next unread feed/category</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>Shift</Kbd>
+                            <span> + </span>
+                            <Kbd>J</Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Select previous unread feed/category</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>Shift</Kbd>
+                            <span> + </span>
+                            <Kbd>K</Kbd>
+                        </Table.Td>
+                    </Table.Tr>
                     <Table.Tr>
                         <Table.Td>
                             <Trans>Set focus on next entry without opening it</Trans>

commafeed-client/src/components/Logo.tsx

@@ -1,10 +1,10 @@
 import { Image } from "@mantine/core"
-import logo from "assets/logo.svg"
+import logo from "@/assets/logo.svg"
 
 export interface LogoProps {
     size: number
 }
 
-export function Logo(props: LogoProps) {
+export function Logo(props: Readonly<LogoProps>) {
     return <Image src={logo} w={props.size} />
 }

commafeed-client/src/components/MarkAllAsReadConfirmationDialog.tsx

@@ -0,0 +1,83 @@
+import { Trans } from "@lingui/react/macro"
+import { Button, Code, Group, Modal, Slider, Stack, Text } from "@mantine/core"
+import { useState } from "react"
+import { Constants } from "@/app/constants"
+import { setMarkAllAsReadConfirmationDialogOpen } from "@/app/entries/slice"
+import { markAllEntries } from "@/app/entries/thunks"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import { selectNextUnreadTreeItem } from "@/app/tree/thunks"
+
+export function MarkAllAsReadConfirmationDialog() {
+    const [threshold, setThreshold] = useState(0)
+    const open = useAppSelector(state => state.entries.markAllAsReadConfirmationDialogOpen)
+    const source = useAppSelector(state => state.entries.source)
+    const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
+    const entriesTimestamp = useAppSelector(state => state.entries.timestamp) ?? Date.now()
+    const markAllAsReadNavigateToNextUnread = useAppSelector(state => state.user.settings?.markAllAsReadNavigateToNextUnread)
+    const dispatch = useAppDispatch()
+
+    const onConfirm = async () => {
+        dispatch(setMarkAllAsReadConfirmationDialogOpen(false))
+        await dispatch(
+            markAllEntries({
+                sourceType: source.type,
+                req: {
+                    id: source.id,
+                    read: true,
+                    olderThan: Date.now() - threshold * 24 * 60 * 60 * 1000,
+                    insertedBefore: entriesTimestamp,
+                },
+            })
+        )
+
+        const isAllCategorySelected = source.type === "category" && source.id === Constants.categories.all.id
+        if (markAllAsReadNavigateToNextUnread && !isAllCategorySelected) await dispatch(selectNextUnreadTreeItem({ direction: "forward" }))
+    }
+
+    return (
+        <Modal
+            opened={open}
+            onClose={() => dispatch(setMarkAllAsReadConfirmationDialogOpen(false))}
+            title={<Trans>Mark all entries as read</Trans>}
+        >
+            <Stack>
+                <Text size="sm">
+                    {threshold === 0 && (
+                        <Trans>
+                            Are you sure you want to mark all entries of <Code>{sourceLabel}</Code> as read?
+                        </Trans>
+                    )}
+                    {threshold > 0 && (
+                        <Trans>
+                            Are you sure you want to mark entries older than {threshold} days of <Code>{sourceLabel}</Code> as read?
+                        </Trans>
+                    )}
+                </Text>
+                <Slider
+                    py="xl"
+                    min={0}
+                    max={28}
+                    marks={[
+                        { value: 0, label: "0" },
+                        { value: 7, label: "7" },
+                        { value: 14, label: "14" },
+                        { value: 21, label: "21" },
+                        { value: 28, label: "28" },
+                    ]}
+                    value={threshold}
+                    onChange={setThreshold}
+                    data-autofocus
+                    onKeyDown={e => e.key === "Enter" && onConfirm()}
+                />
+                <Group justify="flex-end">
+                    <Button variant="default" onClick={() => dispatch(setMarkAllAsReadConfirmationDialogOpen(false))}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button color="red" onClick={onConfirm}>
+                        <Trans>Confirm</Trans>
+                    </Button>
+                </Group>
+            </Stack>
+        </Modal>
+    )
+}

commafeed-client/src/components/RelativeDate.tsx

@@ -1,10 +1,14 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/react/macro"
 import { Tooltip } from "@mantine/core"
-import { Constants } from "app/constants"
 import dayjs from "dayjs"
-import { useNow } from "hooks/useNow"
+import { Constants } from "@/app/constants"
+import { useNow } from "@/hooks/useNow"
 
-export function RelativeDate(props: { date: Date | number | undefined }) {
+export function RelativeDate(
+    props: Readonly<{
+        date: Date | number | undefined
+    }>
+) {
     const now = useNow(60 * 1000)
 
     if (!props.date) return <Trans>N/A</Trans>

commafeed-client/src/components/admin/UserEdit.tsx

@@ -1,11 +1,11 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/react/macro"
 import { Box, Button, Checkbox, Group, PasswordInput, Stack, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
-import { client, errorToStrings } from "app/client"
-import type { AdminSaveUserRequest, UserModel } from "app/types"
-import { Alert } from "components/Alert"
 import { useAsyncCallback } from "react-async-hook"
 import { TbDeviceFloppy } from "react-icons/tb"
+import { client, errorToStrings } from "@/app/client"
+import type { AdminSaveUserRequest, UserModel } from "@/app/types"
+import { Alert } from "@/components/Alert"
 
 interface UserEditProps {
     user?: UserModel
@@ -13,7 +13,7 @@ interface UserEditProps {
     onSave: () => void
 }
 
-export function UserEdit(props: UserEditProps) {
+export function UserEdit(props: Readonly<UserEditProps>) {
     const form = useForm<AdminSaveUserRequest>({
         initialValues: props.user ?? {
             name: "",

commafeed-client/src/components/code/CodeEditor.tsx

@@ -1,16 +1,17 @@
 import { Input, Textarea } from "@mantine/core"
-import RichCodeEditor from "components/code/RichCodeEditor"
-import { useMobile } from "hooks/useMobile"
 import type { ReactNode } from "react"
+import RichCodeEditor from "@/components/code/RichCodeEditor"
+import { useMobile } from "@/hooks/useMobile"
 
 interface CodeEditorProps {
+    label?: ReactNode
     description?: ReactNode
     language: "css" | "javascript"
     value?: string
     onChange: (value: string | undefined) => void
 }
 
-export function CodeEditor(props: CodeEditorProps) {
+export function CodeEditor(props: Readonly<CodeEditorProps>) {
     const mobile = useMobile()
 
     return mobile ? (
@@ -19,6 +20,7 @@ export function CodeEditor(props: CodeEditorProps) {
             autosize
             minRows={4}
             maxRows={15}
+            label={props.label}
             description={props.description}
             styles={{
                 input: {
@@ -29,7 +31,7 @@ export function CodeEditor(props: CodeEditorProps) {
             onChange={e => props.onChange(e.currentTarget.value)}
         />
     ) : (
-        <Input.Wrapper description={props.description}>
+        <Input.Wrapper label={props.label} description={props.description}>
             <RichCodeEditor height="30vh" language={props.language} value={props.value} onChange={props.onChange} />
         </Input.Wrapper>
     )

commafeed-client/src/components/code/RichCodeEditor.tsx

@@ -1,6 +1,6 @@
-import { Loader } from "components/Loader"
-import { useColorScheme } from "hooks/useColorScheme"
 import { useAsync } from "react-async-hook"
+import { Loader } from "@/components/Loader"
+import { useColorScheme } from "@/hooks/useColorScheme"
 
 const init = async () => {
     window.MonacoEnvironment = {
@@ -30,7 +30,7 @@ interface RichCodeEditorProps {
     onChange: (value: string | undefined) => void
 }
 
-function RichCodeEditor(props: RichCodeEditorProps) {
+function RichCodeEditor(props: Readonly<RichCodeEditorProps>) {
     const colorScheme = useColorScheme()
     const editorTheme = colorScheme === "dark" ? "vs-dark" : "light"
 

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

@@ -1,11 +1,24 @@
-import { TypographyStylesProvider } from "@mantine/core"
+import { Typography } from "@mantine/core"
 import type { ReactNode } from "react"
+import { tss } from "@/tss"
 
 /**
  * This component is used to provide basic styles to html typography elements.
  *
  * see https://mantine.dev/core/typography-styles-provider/
  */
+
+const useStyles = tss.create(() => ({
+    // override mantine default typography styles
+    content: {
+        paddingLeft: 0,
+        "& img": {
+            marginBottom: 0,
+        },
+    },
+}))
+
 export const BasicHtmlStyles = (props: { children: ReactNode }) => {
-    return <TypographyStylesProvider pl={0}>{props.children}</TypographyStylesProvider>
+    const { classes } = useStyles()
+    return <Typography className={classes.content}>{props.children}</Typography>
 }

commafeed-client/src/components/content/Content.test.tsx

@@ -0,0 +1,26 @@
+import { MantineProvider } from "@mantine/core"
+import { render } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import { Content } from "@/components/content/Content"
+
+describe("Content component", () => {
+    it("renders basic content", () => {
+        const { container } = render(<Content content="<p>Hello World</p>" />, { wrapper: MantineProvider })
+        expect(container.querySelector("p")).toHaveTextContent("Hello World")
+    })
+
+    it("renders highlighted text when highlight prop is provided", () => {
+        const { container } = render(<Content content="Hello World" highlight="World" />, { wrapper: MantineProvider })
+        expect(container.querySelector("mark")).toHaveTextContent("World")
+    })
+
+    it("renders iframe tag when included in content", () => {
+        const { container } = render(<Content content='<iframe src="https://example.com"></iframe>' />, { wrapper: MantineProvider })
+        expect(container.querySelector("iframe")).toHaveAttribute("src", "https://example.com")
+    })
+
+    it("does not render unsupported tags", () => {
+        const { container } = render(<Content content='<script>alert("test")</script>' />, { wrapper: MantineProvider })
+        expect(container.querySelector("script")).toBeNull()
+    })
+})

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

@@ -1,13 +1,13 @@
 import { Box, Mark } from "@mantine/core"
-import { Constants } from "app/constants"
-import { calculatePlaceholderSize } from "app/utils"
-import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
-import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
 import escapeStringRegexp from "escape-string-regexp"
-import { type ChildrenNode, Interweave, type MatchResponse, Matcher, type Node, type TransformCallback } from "interweave"
+import { ALLOWED_TAG_LIST, type ChildrenNode, Interweave, Matcher, type MatchResponse, type Node, type TransformCallback } from "interweave"
 import React from "react"
 import styleToObject from "style-to-object"
-import { tss } from "tss"
+import { Constants } from "@/app/constants"
+import { calculatePlaceholderSize } from "@/app/utils"
+import { BasicHtmlStyles } from "@/components/content/BasicHtmlStyles"
+import { ImageWithPlaceholderWhileLoading } from "@/components/ImageWithPlaceholderWhileLoading"
+import { tss } from "@/tss"
 
 export interface ContentProps {
     content: string
@@ -67,20 +67,19 @@ const transform: TransformCallback = node => {
 }
 
 class HighlightMatcher extends Matcher {
-    private readonly search: string
+    private readonly regexp: RegExp
 
     constructor(search: string) {
         super("highlight")
-        this.search = escapeStringRegexp(search)
+        this.regexp = new RegExp(escapeStringRegexp(search).split(" ").join("|"), "i")
     }
 
     match(string: string): MatchResponse<unknown> | null {
-        const pattern = this.search.split(" ").join("|")
+        return this.doMatch(string, this.regexp, () => ({}))
-        return this.doMatch(string, new RegExp(pattern, "i"), () => ({}))
     }
 
     replaceWith(children: ChildrenNode): Node {
-        return <Mark>{children}</Mark>
+        return <Mark key={0}>{children}</Mark>
     }
 
     asTag(): string {
@@ -88,6 +87,9 @@ class HighlightMatcher extends Matcher {
     }
 }
 
+// allow iframe tag
+const allowList = [...ALLOWED_TAG_LIST, "iframe"]
+
 // memoize component because Interweave is costly
 const Content = React.memo((props: ContentProps) => {
     const { classes } = useStyles()
@@ -96,7 +98,7 @@ const Content = React.memo((props: ContentProps) => {
     return (
         <BasicHtmlStyles>
             <Box className={classes.content}>
-                <Interweave content={props.content} transform={transform} matchers={matchers} />
+                <Interweave content={props.content} transform={transform} matchers={matchers} allowList={allowList} />
             </Box>
         </BasicHtmlStyles>
     )

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

@@ -1,10 +1,12 @@
-import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
+import { BasicHtmlStyles } from "@/components/content/BasicHtmlStyles"
-import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
+import { ImageWithPlaceholderWhileLoading } from "@/components/ImageWithPlaceholderWhileLoading"
 
-export function Enclosure(props: {
+export function Enclosure(
-    enclosureType: string
+    props: Readonly<{
-    enclosureUrl: string
+        enclosureType: string
-}) {
+        enclosureUrl: string
+    }>
+) {
     const hasVideo = props.enclosureType.startsWith("video")
     const hasAudio = props.enclosureType.startsWith("audio")
     const hasImage = props.enclosureType.startsWith("image")
@@ -19,7 +21,7 @@ export function Enclosure(props: {
             )}
             {hasAudio && (
                 // biome-ignore lint/a11y/useMediaCaption: we don't have any captions for audio
-                <audio controls>
+                <audio controls style={{ width: "100%" }}>
                     <source src={props.enclosureUrl} type={props.enclosureType} />
                 </audio>
             )}

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

@@ -1,35 +1,34 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/react/macro"
 import { Box } from "@mantine/core"
 import { openModal } from "@mantine/modals"
-import { Constants } from "app/constants"
+import { useEffect } from "react"
-import type { ExpendableEntry } from "app/entries/slice"
+import { useContextMenu } from "react-contexify"
+import InfiniteScroll from "react-infinite-scroller"
+import { throttle } from "throttle-debounce"
+import { Constants } from "@/app/constants"
+import type { ExpendableEntry } from "@/app/entries/slice"
 import {
     loadMoreEntries,
-    markAllEntries,
+    markAllAsReadWithConfirmationIfRequired,
     markEntry,
     reloadEntries,
     selectEntry,
     selectNextEntry,
     selectPreviousEntry,
     starEntry,
-} from "app/entries/thunks"
+} from "@/app/entries/thunks"
-import { redirectToRootCategory } from "app/redirect/thunks"
+import { redirectToRootCategory } from "@/app/redirect/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
+import { useAppDispatch, useAppSelector } from "@/app/store"
-import { toggleSidebar } from "app/tree/slice"
+import { toggleSidebar } from "@/app/tree/slice"
-import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
+import { selectNextUnreadTreeItem } from "@/app/tree/thunks"
-import { Loader } from "components/Loader"
+import { KeyboardShortcutsHelp } from "@/components/KeyboardShortcutsHelp"
-import { useBrowserExtension } from "hooks/useBrowserExtension"
+import { Loader } from "@/components/Loader"
-import { useMousetrap } from "hooks/useMousetrap"
+import { useBrowserExtension } from "@/hooks/useBrowserExtension"
-import { useEffect } from "react"
+import { useMousetrap } from "@/hooks/useMousetrap"
-import { useContextMenu } from "react-contexify"
-import InfiniteScroll from "react-infinite-scroller"
-import { throttle } from "throttle-debounce"
 import { FeedEntry } from "./FeedEntry"
 
 export function FeedEntries() {
-    const source = useAppSelector(state => state.entries.source)
     const entries = useAppSelector(state => state.entries.entries)
-    const entriesTimestamp = useAppSelector(state => state.entries.timestamp)
     const selectedEntryId = useAppSelector(state => state.entries.selectedEntryId)
     const hasMore = useAppSelector(state => state.entries.hasMore)
     const loading = useAppSelector(state => state.entries.loading)
@@ -172,6 +171,8 @@ export function FeedEntries() {
                 })
             )
     )
+    useMousetrap("shift+j", async () => await dispatch(selectNextUnreadTreeItem({ direction: "forward" })))
+    useMousetrap("shift+k", async () => await dispatch(selectNextUnreadTreeItem({ direction: "backward" })))
     useMousetrap("space", () => {
         if (selectedEntry) {
             if (selectedEntry.expanded) {
@@ -272,17 +273,7 @@ export function FeedEntries() {
     })
     useMousetrap("shift+a", () => {
         // mark all entries as read
-        dispatch(
+        dispatch(markAllAsReadWithConfirmationIfRequired())
-            markAllEntries({
-                sourceType: source.type,
-                req: {
-                    id: source.id,
-                    read: true,
-                    olderThan: Date.now(),
-                    insertedBefore: entriesTimestamp,
-                },
-            })
-        )
     })
     useMousetrap("g a", async () => await dispatch(redirectToRootCategory()))
     useMousetrap("f", () => dispatch(toggleSidebar()))
@@ -296,33 +287,25 @@ export function FeedEntries() {
 
     return (
         <InfiniteScroll
-            id="entries"
+            className={`cf-entries cf-view-mode-${viewMode}`}
-            className={`view-mode-${viewMode}`}
             initialLoad={false}
             loadMore={async () => await (!loading && dispatch(loadMoreEntries()))}
             hasMore={hasMore}
             loader={<Box key={0}>{loading && <Loader />}</Box>}
         >
             {entries.map(entry => (
-                <article
+                <FeedEntry
                     key={entry.id}
-                    ref={el => {
+                    entry={entry}
-                        if (el) el.id = Constants.dom.entryId(entry)
+                    expanded={!!entry.expanded || viewMode === "expanded"}
-                    }}
+                    selected={entry.id === selectedEntryId}
-                    data-id={entry.id}
+                    showSelectionIndicator={entry.id === selectedEntryId && (!entry.expanded || viewMode === "expanded")}
-                >
+                    maxWidth={sidebarVisible ? Constants.layout.entryMaxWidth : undefined}
-                    <FeedEntry
+                    onHeaderClick={event => headerClicked(entry, event)}
-                        entry={entry}
+                    onHeaderRightClick={event => headerRightClicked(entry, event)}
-                        expanded={!!entry.expanded || viewMode === "expanded"}
+                    onBodyClick={() => bodyClicked(entry)}
-                        selected={entry.id === selectedEntryId}
+                    onSwipedLeft={async () => await swipedLeft(entry)}
-                        showSelectionIndicator={entry.id === selectedEntryId && (!entry.expanded || viewMode === "expanded")}
+                />
-                        maxWidth={sidebarVisible ? Constants.layout.entryMaxWidth : undefined}
-                        onHeaderClick={event => headerClicked(entry, event)}
-                        onHeaderRightClick={event => headerRightClicked(entry, event)}
-                        onBodyClick={() => bodyClicked(entry)}
-                        onSwipedLeft={async () => await swipedLeft(entry)}
-                    />
-                </article>
             ))}
         </InfiniteScroll>
     )

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

@@ -1,13 +1,13 @@
 import { Box, Divider, type MantineRadius, type MantineSpacing, Paper } from "@mantine/core"
-import { Constants } from "app/constants"
-import { useAppSelector } from "app/store"
-import type { Entry, ViewMode } from "app/types"
-import { FeedEntryCompactHeader } from "components/content/header/FeedEntryCompactHeader"
-import { FeedEntryHeader } from "components/content/header/FeedEntryHeader"
-import { useMobile } from "hooks/useMobile"
 import type React from "react"
 import { useSwipeable } from "react-swipeable"
-import { tss } from "tss"
+import { Constants } from "@/app/constants"
+import { useAppSelector } from "@/app/store"
+import type { Entry, ViewMode } from "@/app/types"
+import { FeedEntryCompactHeader } from "@/components/content/header/FeedEntryCompactHeader"
+import { FeedEntryHeader } from "@/components/content/header/FeedEntryHeader"
+import { useMobile } from "@/hooks/useMobile"
+import { tss } from "@/tss"
 import { FeedEntryBody } from "./FeedEntryBody"
 import { FeedEntryContextMenu } from "./FeedEntryContextMenu"
 import { FeedEntryFooter } from "./FeedEntryFooter"
@@ -32,8 +32,9 @@ const useStyles = tss
         rtl: boolean
         showSelectionIndicator: boolean
         maxWidth?: number
+        fontSizePercentage: number
     }>()
-    .create(({ theme, colorScheme, read, expanded, viewMode, rtl, showSelectionIndicator, maxWidth }) => {
+    .create(({ theme, colorScheme, read, expanded, viewMode, rtl, showSelectionIndicator, maxWidth, fontSizePercentage }) => {
         let backgroundColor: string
         if (colorScheme === "dark") {
             backgroundColor = read ? "inherit" : theme.colors.dark[5]
@@ -83,18 +84,21 @@ const useStyles = tss
                 },
             },
             headerLink: {
+                fontSize: `${fontSizePercentage}%`,
                 color: "inherit",
                 textDecoration: "none",
             },
             body: {
+                fontSize: `${fontSizePercentage}%`,
                 direction: rtl ? "rtl" : "ltr",
                 maxWidth: maxWidth ?? "100%",
             },
         }
     })
 
-export function FeedEntry(props: FeedEntryProps) {
+export function FeedEntry(props: Readonly<FeedEntryProps>) {
     const viewMode = useAppSelector(state => state.user.localSettings.viewMode)
+    const fontSizePercentage = useAppSelector(state => state.user.localSettings.fontSizePercentage)
     const { classes, cx } = useStyles({
         read: props.entry.read,
         expanded: props.expanded,
@@ -102,6 +106,7 @@ export function FeedEntry(props: FeedEntryProps) {
         rtl: props.entry.rtl,
         showSelectionIndicator: props.showSelectionIndicator,
         maxWidth: props.maxWidth,
+        fontSizePercentage,
     })
 
     const externalLinkDisplayMode = useAppSelector(state => state.user.settings?.externalLinkIconDisplayMode)
@@ -137,6 +142,10 @@ export function FeedEntry(props: FeedEntryProps) {
     const compactHeader = !props.expanded && (viewMode === "title" || viewMode === "cozy")
     return (
         <Paper
+            component="article"
+            id={Constants.dom.entryId(props.entry)}
+            data-id={props.entry.id}
+            data-feed-id={props.entry.feedId}
             withBorder
             radius={borderRadius}
             className={cx(classes.paper, {
@@ -176,10 +185,10 @@ export function FeedEntry(props: FeedEntryProps) {
             </a>
             {props.expanded && (
                 <Box px={paddingX} pb={paddingY} onClick={props.onBodyClick}>
-                    <Box className={classes.body}>
+                    <Box className={`${classes.body} cf-content`}>
                         <FeedEntryBody entry={props.entry} />
                     </Box>
-                    <Divider variant="dashed" my={paddingY} />
+                    <Divider variant="dashed" my={paddingY} className="cf-footer-divider" />
                     <FeedEntryFooter entry={props.entry} />
                 </Box>
             )}

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

@@ -1,6 +1,6 @@
 import { Box } from "@mantine/core"
-import { useAppSelector } from "app/store"
+import { useAppSelector } from "@/app/store"
-import type { Entry } from "app/types"
+import type { Entry } from "@/app/types"
 import { Content } from "./Content"
 import { Enclosure } from "./Enclosure"
 import { Media } from "./Media"
@@ -9,7 +9,7 @@ export interface FeedEntryBodyProps {
     entry: Entry
 }
 
-export function FeedEntryBody(props: FeedEntryBodyProps) {
+export function FeedEntryBody(props: Readonly<FeedEntryBodyProps>) {
     const search = useAppSelector(state => state.entries.search)
     return (
         <Box>

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

@@ -1,16 +1,16 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/react/macro"
 import { Group } from "@mantine/core"
-import { Constants } from "app/constants"
-import { markEntriesUpToEntry, markEntry, starEntry } from "app/entries/thunks"
-import { redirectToFeed } from "app/redirect/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
-import type { Entry } from "app/types"
-import { truncate } from "app/utils"
-import { useBrowserExtension } from "hooks/useBrowserExtension"
-import { useColorScheme } from "hooks/useColorScheme"
 import { Item, Menu, Separator } from "react-contexify"
 import { TbArrowBarToDown, TbExternalLink, TbMail, TbMailOpened, TbRss, TbStar, TbStarOff } from "react-icons/tb"
-import { tss } from "tss"
+import { Constants } from "@/app/constants"
+import { markEntriesUpToEntry, markEntry, starEntry } from "@/app/entries/thunks"
+import { redirectToFeed } from "@/app/redirect/thunks"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import type { Entry } from "@/app/types"
+import { truncate } from "@/app/utils"
+import { useBrowserExtension } from "@/hooks/useBrowserExtension"
+import { useColorScheme } from "@/hooks/useColorScheme"
+import { tss } from "@/tss"
 
 interface FeedEntryContextMenuProps {
     entry: Entry
@@ -27,7 +27,7 @@ const useStyles = tss.create(({ theme, colorScheme }) => ({
     },
 }))
 
-export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
+export function FeedEntryContextMenu(props: Readonly<FeedEntryContextMenuProps>) {
     const colorScheme = useColorScheme()
     const { classes } = useStyles()
     const sourceType = useAppSelector(state => state.entries.source.type)
@@ -61,19 +61,21 @@ export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
 
             <Separator />
 
-            <Item onClick={async () => await dispatch(starEntry({ entry: props.entry, starred: !props.entry.starred }))}>
-                <Group>
-                    {props.entry.starred ? <TbStarOff size={iconSize} /> : <TbStar size={iconSize} />}
-                    {props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>}
-                </Group>
-            </Item>
             {props.entry.markable && (
-                <Item onClick={async () => await dispatch(markEntry({ entry: props.entry, read: !props.entry.read }))}>
+                <>
-                    <Group>
+                    <Item onClick={async () => await dispatch(starEntry({ entry: props.entry, starred: !props.entry.starred }))}>
-                        {props.entry.read ? <TbMail size={iconSize} /> : <TbMailOpened size={iconSize} />}
+                        <Group>
-                        {props.entry.read ? <Trans>Keep unread</Trans> : <Trans>Mark as read</Trans>}
+                            {props.entry.starred ? <TbStarOff size={iconSize} /> : <TbStar size={iconSize} />}
-                    </Group>
+                            {props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>}
-                </Item>
+                        </Group>
+                    </Item>
+                    <Item onClick={async () => await dispatch(markEntry({ entry: props.entry, read: !props.entry.read }))}>
+                        <Group>
+                            {props.entry.read ? <TbMail size={iconSize} /> : <TbMailOpened size={iconSize} />}
+                            {props.entry.read ? <Trans>Keep unread</Trans> : <Trans>Mark as read</Trans>}
+                        </Group>
+                    </Item>
+                </>
             )}
             <Item onClick={async () => await dispatch(markEntriesUpToEntry(props.entry))}>
                 <Group>

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

@@ -1,20 +1,20 @@
-import { msg } from "@lingui/macro"
+import { msg } from "@lingui/core/macro"
 import { useLingui } from "@lingui/react"
 import { Group, Indicator, Popover, TagsInput } from "@mantine/core"
-import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/entries/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
-import type { Entry } from "app/types"
-import { ActionButton } from "components/ActionButton"
-import { useActionButton } from "hooks/useActionButton"
-import { useMobile } from "hooks/useMobile"
 import { TbArrowBarToDown, TbExternalLink, TbMail, TbMailOpened, TbShare, TbStar, TbStarOff, TbTag } from "react-icons/tb"
+import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "@/app/entries/thunks"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import type { Entry } from "@/app/types"
+import { ActionButton } from "@/components/ActionButton"
+import { useActionButton } from "@/hooks/useActionButton"
+import { useMobile } from "@/hooks/useMobile"
 import { ShareButtons } from "./ShareButtons"
 
 interface FeedEntryFooterProps {
     entry: Entry
 }
 
-export function FeedEntryFooter(props: FeedEntryFooterProps) {
+export function FeedEntryFooter(props: Readonly<FeedEntryFooterProps>) {
     const tags = useAppSelector(state => state.user.tags)
     const mobile = useMobile()
     const { spacing } = useActionButton()
@@ -37,7 +37,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
         )
 
     return (
-        <Group justify="space-between">
+        <Group justify="space-between" className="cf-footer">
             <Group gap={spacing}>
                 {props.entry.markable && (
                     <ActionButton

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

@@ -1,11 +1,11 @@
-import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
+import { ImageWithPlaceholderWhileLoading } from "@/components/ImageWithPlaceholderWhileLoading"
 
 export interface FeedFaviconProps {
     url: string
     size?: number
 }
 
-export function FeedFavicon({ url, size = 18 }: FeedFaviconProps) {
+export function FeedFavicon({ url, size = 18 }: Readonly<FeedFaviconProps>) {
     return (
         <ImageWithPlaceholderWhileLoading
             src={url}

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

@@ -1,8 +1,8 @@
 import { Box } from "@mantine/core"
-import { Constants } from "app/constants"
+import { Constants } from "@/app/constants"
-import { calculatePlaceholderSize } from "app/utils"
+import { calculatePlaceholderSize } from "@/app/utils"
-import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
+import { BasicHtmlStyles } from "@/components/content/BasicHtmlStyles"
-import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
+import { ImageWithPlaceholderWhileLoading } from "@/components/ImageWithPlaceholderWhileLoading"
 import { Content } from "./Content"
 
 export interface MediaProps {
@@ -12,7 +12,7 @@ export interface MediaProps {
     description?: string
 }
 
-export function Media(props: MediaProps) {
+export function Media(props: Readonly<MediaProps>) {
     const width = props.thumbnailWidth
     const height = props.thumbnailHeight
     const placeholderSize = calculatePlaceholderSize({

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

@@ -1,13 +1,13 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/react/macro"
 import { ActionIcon, Box, CopyButton, Divider, SimpleGrid } from "@mantine/core"
-import { Constants } from "app/constants"
-import { useAppSelector } from "app/store"
-import type { SharingSettings } from "app/types"
-import { useBrowserExtension } from "hooks/useBrowserExtension"
-import { useMobile } from "hooks/useMobile"
 import type { IconType } from "react-icons"
 import { TbCheck, TbCopy, TbDeviceDesktopShare, TbDeviceMobileShare } from "react-icons/tb"
-import { tss } from "tss"
+import { Constants } from "@/app/constants"
+import { useAppSelector } from "@/app/store"
+import type { SharingSettings } from "@/app/types"
+import { useBrowserExtension } from "@/hooks/useBrowserExtension"
+import { useMobile } from "@/hooks/useMobile"
+import { tss } from "@/tss"
 
 type Color = `#${string}`
 
@@ -22,7 +22,15 @@ const useStyles = tss
         },
     }))
 
-function ShareButton({ icon, color, onClick }: { icon: IconType; color: Color; onClick: () => void }) {
+function ShareButton({
+    icon,
+    color,
+    onClick,
+}: Readonly<{
+    icon: IconType
+    color: Color
+    onClick: () => void
+}>) {
     const { classes } = useStyles({
         color,
     })
@@ -36,7 +44,15 @@ function ShareButton({ icon, color, onClick }: { icon: IconType; color: Color; o
     )
 }
 
-function SiteShareButton({ url, icon, color }: { icon: IconType; color: Color; url: string }) {
+function SiteShareButton({
+    url,
+    icon,
+    color,
+}: Readonly<{
+    icon: IconType
+    color: Color
+    url: string
+}>) {
     const onClick = () => {
         window.open(url, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=800,height=600")
     }
@@ -44,7 +60,11 @@ function SiteShareButton({ url, icon, color }: { icon: IconType; color: Color; u
     return <ShareButton icon={icon} color={color} onClick={onClick} />
 }
 
-function CopyUrlButton({ url }: { url: string }) {
+function CopyUrlButton({
+    url,
+}: Readonly<{
+    url: string
+}>) {
     return (
         <CopyButton value={url}>
             {({ copied, copy }) => <ShareButton icon={copied ? TbCheck : TbCopy} color="#000" onClick={copy} />}
@@ -52,7 +72,13 @@ function CopyUrlButton({ url }: { url: string }) {
     )
 }
 
-function BrowserNativeShareButton({ url, description }: { url: string; description: string }) {
+function BrowserNativeShareButton({
+    url,
+    description,
+}: Readonly<{
+    url: string
+    description: string
+}>) {
     const mobile = useMobile()
     const { isBrowserExtensionPopup } = useBrowserExtension()
     const onClick = () => {
@@ -71,7 +97,12 @@ function BrowserNativeShareButton({ url, description }: { url: string; descripti
     )
 }
 
-export function ShareButtons(props: { url: string; description: string }) {
+export function ShareButtons(
+    props: Readonly<{
+        url: string
+        description: string
+    }>
+) {
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     const enabledSharingSites = (Object.keys(Constants.sharing) as Array<keyof SharingSettings>).filter(site => sharingSettings?.[site])
     const url = encodeURIComponent(props.url)

commafeed-client/src/components/content/add/AddCategory.tsx

@@ -1,15 +1,16 @@
-import { Trans, msg } from "@lingui/macro"
+import { msg } from "@lingui/core/macro"
 import { useLingui } from "@lingui/react"
+import { Trans } from "@lingui/react/macro"
 import { Box, Button, Group, Stack, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
-import { client, errorToStrings } from "app/client"
-import { redirectToSelectedSource } from "app/redirect/thunks"
-import { useAppDispatch } from "app/store"
-import { reloadTree } from "app/tree/thunks"
-import type { AddCategoryRequest } from "app/types"
-import { Alert } from "components/Alert"
 import { useAsyncCallback } from "react-async-hook"
 import { TbFolderPlus } from "react-icons/tb"
+import { client, errorToStrings } from "@/app/client"
+import { redirectToSelectedSource } from "@/app/redirect/thunks"
+import { useAppDispatch } from "@/app/store"
+import { reloadTree } from "@/app/tree/thunks"
+import type { AddCategoryRequest } from "@/app/types"
+import { Alert } from "@/components/Alert"
 import { CategorySelect } from "./CategorySelect"
 
 export function AddCategory() {

commafeed-client/src/components/content/add/CategorySelect.tsx

@@ -1,11 +1,11 @@
-import { msg } from "@lingui/macro"
+import { msg } from "@lingui/core/macro"
 import { useLingui } from "@lingui/react"
 import { Select, type SelectProps } from "@mantine/core"
 import type { ComboboxItem } from "@mantine/core/lib/components/Combobox/Combobox.types"
-import { Constants } from "app/constants"
+import { Constants } from "@/app/constants"
-import { useAppSelector } from "app/store"
+import { useAppSelector } from "@/app/store"
-import type { Category } from "app/types"
+import type { Category } from "@/app/types"
-import { flattenCategoryTree } from "app/utils"
+import { flattenCategoryTree } from "@/app/utils"
 
 type CategorySelectProps = Partial<SelectProps> & {
     withAll?: boolean

commafeed-client/src/components/content/add/ImportOpml.tsx

@@ -1,14 +1,15 @@
-import { Trans, msg } from "@lingui/macro"
+import { msg } from "@lingui/core/macro"
 import { useLingui } from "@lingui/react"
+import { Trans } from "@lingui/react/macro"
 import { Box, Button, FileInput, Group, Stack } from "@mantine/core"
 import { isNotEmpty, useForm } from "@mantine/form"
-import { client, errorToStrings } from "app/client"
-import { redirectToSelectedSource } from "app/redirect/thunks"
-import { useAppDispatch } from "app/store"
-import { reloadTree } from "app/tree/thunks"
-import { Alert } from "components/Alert"
 import { useAsyncCallback } from "react-async-hook"
 import { TbFileImport } from "react-icons/tb"
+import { client, errorToStrings } from "@/app/client"
+import { redirectToSelectedSource } from "@/app/redirect/thunks"
+import { useAppDispatch } from "@/app/store"
+import { reloadTree } from "@/app/tree/thunks"
+import { Alert } from "@/components/Alert"
 
 export function ImportOpml() {
     const dispatch = useAppDispatch()

commafeed-client/src/components/content/add/Subscribe.tsx

@@ -1,16 +1,16 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/react/macro"
 import { Box, Button, Group, Stack, Stepper, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
-import { client, errorToStrings } from "app/client"
-import { Constants } from "app/constants"
-import { redirectToFeed, redirectToSelectedSource } from "app/redirect/thunks"
-import { useAppDispatch } from "app/store"
-import { reloadTree } from "app/tree/thunks"
-import type { FeedInfoRequest, SubscribeRequest } from "app/types"
-import { Alert } from "components/Alert"
 import { useState } from "react"
 import { useAsyncCallback } from "react-async-hook"
 import { TbRss } from "react-icons/tb"
+import { client, errorToStrings } from "@/app/client"
+import { Constants } from "@/app/constants"
+import { redirectToFeed, redirectToSelectedSource } from "@/app/redirect/thunks"
+import { useAppDispatch } from "@/app/store"
+import { reloadTree } from "@/app/tree/thunks"
+import type { FeedInfoRequest, SubscribeRequest } from "@/app/types"
+import { Alert } from "@/components/Alert"
 import { CategorySelect } from "./CategorySelect"
 
 export function Subscribe() {
@@ -40,8 +40,7 @@ export function Subscribe() {
     })
     const subscribe = useAsyncCallback(client.feed.subscribe, {
         onSuccess: sub => {
-            dispatch(reloadTree())
+            dispatch(reloadTree()).then(() => dispatch(redirectToFeed(sub.data)))
-            dispatch(redirectToFeed(sub.data))
         },
     })
 

commafeed-client/src/components/content/header/FeedEntryCompactHeader.tsx

@@ -1,11 +1,11 @@
-import { Box, Text } from "@mantine/core"
+import { Box } from "@mantine/core"
-import type { Entry } from "app/types"
+import type { Entry } from "@/app/types"
-import { RelativeDate } from "components/RelativeDate"
+import { FeedFavicon } from "@/components/content/FeedFavicon"
-import { FeedFavicon } from "components/content/FeedFavicon"
+import { OpenExternalLink } from "@/components/content/header/OpenExternalLink"
-import { OpenExternalLink } from "components/content/header/OpenExternalLink"
+import { Star } from "@/components/content/header/Star"
-import { Star } from "components/content/header/Star"
+import { RelativeDate } from "@/components/RelativeDate"
-import { OnDesktop } from "components/responsive/OnDesktop"
+import { OnDesktop } from "@/components/responsive/OnDesktop"
-import { tss } from "tss"
+import { tss } from "@/tss"
 import { FeedEntryTitle } from "./FeedEntryTitle"
 
 export interface FeedEntryHeaderProps {
@@ -43,7 +43,7 @@ const useStyles = tss
         },
     }))
 
-export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
+export function FeedEntryCompactHeader(props: Readonly<FeedEntryHeaderProps>) {
     const { classes } = useStyles({
         read: props.entry.read,
     })
@@ -54,17 +54,17 @@ export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
                 <FeedFavicon url={props.entry.iconUrl} />
             </Box>
             <OnDesktop>
-                <Text c="dimmed" className={classes.feedName}>
+                <Box c="dimmed" className={classes.feedName}>
                     {props.entry.feedName}
-                </Text>
+                </Box>
             </OnDesktop>
             <Box className={classes.title}>
                 <FeedEntryTitle entry={props.entry} />
             </Box>
             <OnDesktop>
-                <Text c="dimmed" className={classes.date}>
+                <Box c="dimmed" className={classes.date}>
                     <RelativeDate date={props.entry.date} />
-                </Text>
+                </Box>
             </OnDesktop>
             {props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
         </Box>

commafeed-client/src/components/content/header/FeedEntryHeader.tsx

@@ -1,10 +1,10 @@
-import { Box, Flex, Space, Text } from "@mantine/core"
+import { Box, Flex, Space } from "@mantine/core"
-import type { Entry } from "app/types"
+import type { Entry } from "@/app/types"
-import { RelativeDate } from "components/RelativeDate"
+import { FeedFavicon } from "@/components/content/FeedFavicon"
-import { FeedFavicon } from "components/content/FeedFavicon"
+import { OpenExternalLink } from "@/components/content/header/OpenExternalLink"
-import { OpenExternalLink } from "components/content/header/OpenExternalLink"
+import { Star } from "@/components/content/header/Star"
-import { Star } from "components/content/header/Star"
+import { RelativeDate } from "@/components/RelativeDate"
-import { tss } from "tss"
+import { tss } from "@/tss"
 import { FeedEntryTitle } from "./FeedEntryTitle"
 
 export interface FeedEntryHeaderProps {
@@ -22,18 +22,15 @@ const useStyles = tss
         main: {
             fontWeight: colorScheme === "light" && !read ? "bold" : "inherit",
         },
-        details: {
-            fontSize: "90%",
-        },
     }))
 
-export function FeedEntryHeader(props: FeedEntryHeaderProps) {
+export function FeedEntryHeader(props: Readonly<FeedEntryHeaderProps>) {
     const { classes } = useStyles({
         read: props.entry.read,
     })
     return (
-        <Box>
+        <Box className="cf-header">
-            <Flex align="flex-start" justify="space-between">
+            <Flex align="flex-start" justify="space-between" className="cf-header-title">
                 <Flex align="flex-start" className={classes.main}>
                     {props.showStarIcon && (
                         <Box ml={-5}>
@@ -44,22 +41,20 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
                 </Flex>
                 {props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
             </Flex>
-            <Flex align="center" className={classes.details}>
+            <Flex align="center" className="cf-header-subtitle">
                 <FeedFavicon url={props.entry.iconUrl} />
                 <Space w={6} />
-                <Text c="dimmed">
+                <Box c="dimmed">
                     {props.entry.feedName}
                     <span> · </span>
                     <RelativeDate date={props.entry.date} />
-                </Text>
+                </Box>
             </Flex>
             {props.expanded && (
-                <Box className={classes.details}>
+                <Box className="cf-header-details">
-                    <Text c="dimmed">
+                    {props.entry.author && <span>by {props.entry.author}</span>}
-                        {props.entry.author && <span>by {props.entry.author}</span>}
+                    {props.entry.author && props.entry.categories && <span>&nbsp;·&nbsp;</span>}
-                        {props.entry.author && props.entry.categories && <span>&nbsp;·&nbsp;</span>}
+                    {props.entry.categories && <span>{props.entry.categories}</span>}
-                        {props.entry.categories && <span>{props.entry.categories}</span>}
-                    </Text>
                 </Box>
             )}
         </Box>

commafeed-client/src/components/content/header/FeedEntryTitle.tsx

@@ -1,12 +1,12 @@
 import { Highlight } from "@mantine/core"
-import { useAppSelector } from "app/store"
+import { useAppSelector } from "@/app/store"
-import type { Entry } from "app/types"
+import type { Entry } from "@/app/types"
 
 export interface FeedEntryTitleProps {
     entry: Entry
 }
 
-export function FeedEntryTitle(props: FeedEntryTitleProps) {
+export function FeedEntryTitle(props: Readonly<FeedEntryTitleProps>) {
     const search = useAppSelector(state => state.entries.search)
     const keywords = search?.split(" ")
     return (

commafeed-client/src/components/content/header/OpenExternalLink.tsx

@@ -1,12 +1,16 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/react/macro"
 import { ActionIcon, Anchor, Tooltip } from "@mantine/core"
-import { Constants } from "app/constants"
-import { markEntry } from "app/entries/thunks"
-import { useAppDispatch } from "app/store"
-import type { Entry } from "app/types"
 import { TbExternalLink } from "react-icons/tb"
+import { Constants } from "@/app/constants"
+import { markEntry } from "@/app/entries/thunks"
+import { useAppDispatch } from "@/app/store"
+import type { Entry } from "@/app/types"
 
-export function OpenExternalLink(props: { entry: Entry }) {
+export function OpenExternalLink(
+    props: Readonly<{
+        entry: Entry
+    }>
+) {
     const dispatch = useAppDispatch()
     const onClick = (e: React.MouseEvent) => {
         e.stopPropagation()

commafeed-client/src/components/content/header/Star.tsx

@@ -1,12 +1,16 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/react/macro"
 import { ActionIcon, Tooltip } from "@mantine/core"
-import { Constants } from "app/constants"
-import { starEntry } from "app/entries/thunks"
-import { useAppDispatch } from "app/store"
-import type { Entry } from "app/types"
 import { TbStar, TbStarFilled } from "react-icons/tb"
+import { Constants } from "@/app/constants"
+import { starEntry } from "@/app/entries/thunks"
+import { useAppDispatch } from "@/app/store"
+import type { Entry } from "@/app/types"
 
-export function Star(props: { entry: Entry }) {
+export function Star(
+    props: Readonly<{
+        entry: Entry
+    }>
+) {
     const dispatch = useAppDispatch()
     const onClick = (e: React.MouseEvent) => {
         e.stopPropagation()

commafeed-client/src/components/header/Header.tsx

@@ -1,19 +1,12 @@
-import { msg } from "@lingui/macro"
+import { msg } from "@lingui/core/macro"
 import { useLingui } from "@lingui/react"
 import { Box, Center, CloseButton, Divider, Group, Indicator, Popover, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
-import { reloadEntries, search, selectNextEntry, selectPreviousEntry } from "app/entries/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
-import { changeReadingMode, changeReadingOrder } from "app/user/thunks"
-import { ActionButton } from "components/ActionButton"
-import { Loader } from "components/Loader"
-import { useActionButton } from "hooks/useActionButton"
-import { useBrowserExtension } from "hooks/useBrowserExtension"
-import { useMobile } from "hooks/useMobile"
 import { useEffect } from "react"
 import {
     TbArrowDown,
     TbArrowUp,
+    TbChecks,
     TbExternalLink,
     TbEye,
     TbEyeOff,
@@ -24,7 +17,14 @@ import {
     TbSortDescending,
     TbUser,
 } from "react-icons/tb"
-import { MarkAllAsReadButton } from "./MarkAllAsReadButton"
+import { markAllAsReadWithConfirmationIfRequired, reloadEntries, search, selectNextEntry, selectPreviousEntry } from "@/app/entries/thunks"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import { changeReadingMode, changeReadingOrder } from "@/app/user/thunks"
+import { ActionButton } from "@/components/ActionButton"
+import { Loader } from "@/components/Loader"
+import { useActionButton } from "@/hooks/useActionButton"
+import { useBrowserExtension } from "@/hooks/useBrowserExtension"
+import { useMobile } from "@/hooks/useMobile"
 import { ProfileMenu } from "./ProfileMenu"
 
 function HeaderDivider() {
@@ -42,11 +42,14 @@ function HeaderToolbar(props: { children: React.ReactNode }) {
                 display: "flex",
                 justifyContent: "space-between",
             }}
+            className="cf-toolbar"
         >
             {props.children}
         </Box>
     ) : (
-        <Group gap={spacing}>{props.children}</Group>
+        <Group gap={spacing} className="cf-toolbar">
+            {props.children}
+        </Group>
     )
 }
 
@@ -60,11 +63,7 @@ export function Header() {
     const dispatch = useAppDispatch()
     const { _ } = useLingui()
 
-    const searchForm = useForm<{ search: string }>({
+    const searchForm = useForm<{ search: string }>()
-        validate: {
-            search: value => (value.length > 0 && value.length < 3 ? _(msg`Search requires at least 3 characters`) : null),
-        },
-    })
     const { setValues } = searchForm
 
     useEffect(() => {
@@ -75,7 +74,7 @@ export function Header() {
 
     if (!settings) return <Loader />
     return (
-        <Center>
+        <Center className="cf-toolbar-wrapper">
             <HeaderToolbar>
                 <ActionButton
                     icon={<TbArrowUp size={iconSize} />}
@@ -111,7 +110,11 @@ export function Header() {
                     label={msg`Refresh`}
                     onClick={async () => await dispatch(reloadEntries())}
                 />
-                <MarkAllAsReadButton iconSize={iconSize} />
+                <ActionButton
+                    icon={<TbChecks size={iconSize} />}
+                    label={msg`Mark all as read`}
+                    onClick={() => dispatch(markAllAsReadWithConfirmationIfRequired())}
+                />
 
                 <HeaderDivider />
 

commafeed-client/src/components/header/MarkAllAsReadButton.tsx

@@ -1,97 +0,0 @@
-import { Trans, msg } from "@lingui/macro"
-
-import { Button, Code, Group, Modal, Slider, Stack, Text } from "@mantine/core"
-import { markAllEntries } from "app/entries/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
-import { ActionButton } from "components/ActionButton"
-import { useState } from "react"
-import { TbChecks } from "react-icons/tb"
-
-export function MarkAllAsReadButton(props: { iconSize: number }) {
-    const [opened, setOpened] = useState(false)
-    const [threshold, setThreshold] = useState(0)
-    const source = useAppSelector(state => state.entries.source)
-    const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
-    const entriesTimestamp = useAppSelector(state => state.entries.timestamp) ?? Date.now()
-    const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
-    const dispatch = useAppDispatch()
-
-    const buttonClicked = () => {
-        if (markAllAsReadConfirmation) {
-            setThreshold(0)
-            setOpened(true)
-        } else {
-            dispatch(
-                markAllEntries({
-                    sourceType: source.type,
-                    req: {
-                        id: source.id,
-                        read: true,
-                        olderThan: Date.now(),
-                        insertedBefore: entriesTimestamp,
-                    },
-                })
-            )
-        }
-    }
-
-    return (
-        <>
-            <Modal opened={opened} onClose={() => setOpened(false)} title={<Trans>Mark all entries as read</Trans>}>
-                <Stack>
-                    <Text size="sm">
-                        {threshold === 0 && (
-                            <Trans>
-                                Are you sure you want to mark all entries of <Code>{sourceLabel}</Code> as read?
-                            </Trans>
-                        )}
-                        {threshold > 0 && (
-                            <Trans>
-                                Are you sure you want to mark entries older than {threshold} days of <Code>{sourceLabel}</Code> as read?
-                            </Trans>
-                        )}
-                    </Text>
-                    <Slider
-                        py="xl"
-                        min={0}
-                        max={28}
-                        marks={[
-                            { value: 0, label: "0" },
-                            { value: 7, label: "7" },
-                            { value: 14, label: "14" },
-                            { value: 21, label: "21" },
-                            { value: 28, label: "28" },
-                        ]}
-                        value={threshold}
-                        onChange={setThreshold}
-                    />
-                    <Group justify="flex-end">
-                        <Button variant="default" onClick={() => setOpened(false)}>
-                            <Trans>Cancel</Trans>
-                        </Button>
-                        <Button
-                            color="red"
-                            onClick={() => {
-                                setOpened(false)
-                                dispatch(
-                                    markAllEntries({
-                                        sourceType: source.type,
-                                        req: {
-                                            id: source.id,
-                                            read: true,
-                                            olderThan: Date.now() - threshold * 24 * 60 * 60 * 1000,
-                                            insertedBefore: entriesTimestamp,
-                                        },
-                                    })
-                                )
-                            }}
-                        >
-                            <Trans>Confirm</Trans>
-                        </Button>
-                    </Group>
-                </Stack>
-            </Modal>
-            <ActionButton icon={<TbChecks size={props.iconSize} />} label={msg`Mark all as read`} onClick={buttonClicked} />
-        </>
-    )
-}

commafeed-client/src/components/header/ProfileMenu.tsx

@@ -1,4 +1,4 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/react/macro"
 import {
     Box,
     Divider,
@@ -7,18 +7,12 @@ import {
     Menu,
     SegmentedControl,
     type SegmentedControlItem,
+    Slider,
     useMantineColorScheme,
 } from "@mantine/core"
 import { showNotification } from "@mantine/notifications"
-import { client } from "app/client"
-import { redirectToAbout, redirectToAdminUsers, redirectToDonate, redirectToMetrics, redirectToSettings } from "app/redirect/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
-import type { ViewMode } from "app/types"
-import { setViewMode } from "app/user/slice"
-import { reloadProfile } from "app/user/thunks"
 import dayjs from "dayjs"
-import { useNow } from "hooks/useNow"
+import { type ReactNode, useEffect, useState } from "react"
-import { type ReactNode, useState } from "react"
 import {
     TbChartLine,
     TbHeartFilled,
@@ -35,6 +29,14 @@ import {
     TbUsers,
     TbWorldDownload,
 } from "react-icons/tb"
+import { throttle } from "throttle-debounce"
+import { client } from "@/app/client"
+import { redirectToAbout, redirectToAdminUsers, redirectToDonate, redirectToMetrics, redirectToSettings } from "@/app/redirect/thunks"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import type { ViewMode } from "@/app/types"
+import { setFontSizePercentage, setViewMode } from "@/app/user/slice"
+import { reloadProfile } from "@/app/user/thunks"
+import { useNow } from "@/hooks/useNow"
 
 interface ProfileMenuProps {
     control: React.ReactElement
@@ -93,13 +95,22 @@ const viewModeData: ViewModeControlItem[] = [
     },
 ]
 
-export function ProfileMenu(props: ProfileMenuProps) {
+export function ProfileMenu(props: Readonly<ProfileMenuProps>) {
     const [opened, setOpened] = useState(false)
+
+    // close profile menu on scroll
+    useEffect(() => {
+        const listener = throttle(100, () => setOpened(false))
+        window.addEventListener("scroll", listener)
+        return () => window.removeEventListener("scroll", listener)
+    }, [])
+
     const now = useNow()
     const profile = useAppSelector(state => state.user.profile)
     const admin = useAppSelector(state => state.user.profile?.admin)
     const viewMode = useAppSelector(state => state.user.localSettings.viewMode)
     const forceRefreshCooldownDuration = useAppSelector(state => state.server.serverInfos?.forceRefreshCooldownDuration)
+    const fontSizePercentage = useAppSelector(state => state.user.localSettings.fontSizePercentage)
     const dispatch = useAppDispatch()
     const { colorScheme, setColorScheme } = useMantineColorScheme()
 
@@ -143,7 +154,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
                                 color: "green",
                                 autoClose: 1000,
                             })
-                        } catch (error) {
+                        } catch {
                             showNotification({
                                 message: <Trans>Force fetching feeds is not yet available.</Trans>,
                                 color: "red",
@@ -184,6 +195,22 @@ export function ProfileMenu(props: ProfileMenuProps) {
                     mb="xs"
                 />
 
+                <Divider />
+
+                <Menu.Label>
+                    <Trans>Font size</Trans>
+                </Menu.Label>
+                <Slider
+                    min={50}
+                    max={150}
+                    step={5}
+                    marks={[{ value: 100 }]}
+                    label={v => `${v}%`}
+                    mb="xs"
+                    value={fontSizePercentage}
+                    onChange={value => dispatch(setFontSizePercentage(value))}
+                />
+
                 {admin && (
                     <>
                         <Divider />

commafeed-client/src/components/metrics/Gauge.tsx

@@ -1,10 +1,10 @@
 import { NumberFormatter } from "@mantine/core"
-import type { MetricGauge } from "app/types"
+import type { MetricGauge } from "@/app/types"
 
-interface MeterProps {
+interface GaugeProps {
     gauge: MetricGauge
 }
 
-export function Gauge(props: MeterProps) {
+export function Gauge(props: Readonly<GaugeProps>) {
     return <NumberFormatter value={props.gauge.value} thousandSeparator />
 }

commafeed-client/src/components/metrics/Meter.tsx

@@ -1,11 +1,11 @@
 import { Box } from "@mantine/core"
-import type { MetricMeter } from "app/types"
+import type { MetricMeter } from "@/app/types"
 
 interface MeterProps {
     meter: MetricMeter
 }
 
-export function Meter(props: MeterProps) {
+export function Meter(props: Readonly<MeterProps>) {
     return (
         <Box>
             <Box>Mean: {props.meter.mean_rate.toFixed(2)}</Box>

commafeed-client/src/components/metrics/MetricAccordionItem.tsx

@@ -7,7 +7,7 @@ interface MetricAccordionItemProps {
     children: React.ReactNode
 }
 
-export function MetricAccordionItem({ metricKey, name, headerValue, children }: MetricAccordionItemProps) {
+export function MetricAccordionItem({ metricKey, name, headerValue, children }: Readonly<MetricAccordionItemProps>) {
     return (
         <Accordion.Item value={metricKey} key={metricKey}>
             <Accordion.Control>

commafeed-client/src/components/metrics/Timer.tsx

@@ -1,11 +1,11 @@
 import { Box } from "@mantine/core"
-import type { MetricTimer } from "app/types"
+import type { MetricTimer } from "@/app/types"
 
 interface MetricTimerProps {
     timer: MetricTimer
 }
 
-export function Timer(props: MetricTimerProps) {
+export function Timer(props: Readonly<MetricTimerProps>) {
     return (
         <Box>
             <Box>Mean: {props.timer.mean_rate.toFixed(2)}</Box>

commafeed-client/src/components/responsive/OnDesktop.tsx

@@ -1,8 +1,12 @@
 import { Box } from "@mantine/core"
-import { useMobile } from "hooks/useMobile"
 import type React from "react"
+import { useMobile } from "@/hooks/useMobile"
 
-export function OnDesktop(props: { children: React.ReactNode }) {
+export function OnDesktop(
+    props: Readonly<{
+        children: React.ReactNode
+    }>
+) {
     const mobile = useMobile()
     return <Box>{!mobile && props.children}</Box>
 }

commafeed-client/src/components/responsive/OnMobile.tsx

@@ -1,8 +1,12 @@
 import { Box } from "@mantine/core"
-import { useMobile } from "hooks/useMobile"
 import type React from "react"
+import { useMobile } from "@/hooks/useMobile"
 
-export function OnMobile(props: { children: React.ReactNode }) {
+export function OnMobile(
+    props: Readonly<{
+        children: React.ReactNode
+    }>
+) {
     const mobile = useMobile()
     return <Box>{mobile && props.children}</Box>
 }

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

@@ -1,14 +1,15 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/react/macro"
-import { Box, Button, Group, Stack } from "@mantine/core"
+import { Anchor, Box, Button, Group, Stack } from "@mantine/core"
 import { useForm } from "@mantine/form"
-import { client, errorToStrings } from "app/client"
-import { redirectToSelectedSource } from "app/redirect/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
-import { Alert } from "components/Alert"
-import { CodeEditor } from "components/code/CodeEditor"
 import { useEffect } from "react"
 import { useAsyncCallback } from "react-async-hook"
 import { TbDeviceFloppy } from "react-icons/tb"
+import { client, errorToStrings } from "@/app/client"
+import { Constants } from "@/app/constants"
+import { redirectToSelectedSource } from "@/app/redirect/thunks"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import { Alert } from "@/components/Alert"
+import { CodeEditor } from "@/components/code/CodeEditor"
 
 interface FormData {
     customCss: string
@@ -57,13 +58,23 @@ export function CustomCodeSettings() {
             <form onSubmit={form.onSubmit(saveCustomCode.execute)}>
                 <Stack>
                     <CodeEditor
-                        description={<Trans>Custom CSS rules that will be applied</Trans>}
+                        label={<Trans>Custom CSS rules that will be applied</Trans>}
+                        description={
+                            <Anchor
+                                href={Constants.customCssDocumentationUrl}
+                                target="_blank"
+                                rel="noreferrer"
+                                style={{ fontSize: "inherit" }}
+                            >
+                                <Trans>Link to the documentation</Trans>
+                            </Anchor>
+                        }
                         language="css"
                         {...form.getInputProps("customCss")}
                     />
 
                     <CodeEditor
-                        description={<Trans>Custom JS code that will be executed on page load</Trans>}
+                        label={<Trans>Custom JS code that will be executed on page load</Trans>}
                         language="javascript"
                         {...form.getInputProps("customJs")}
                     />

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

@@ -1,17 +1,22 @@
-import { Trans, msg } from "@lingui/macro"
+import { msg } from "@lingui/core/macro"
 import { useLingui } from "@lingui/react"
-import { Divider, Group, NumberInput, Radio, Select, SimpleGrid, Stack, Switch } from "@mantine/core"
+import { Trans } from "@lingui/react/macro"
+import { Box, Divider, Group, NumberInput, Radio, Select, type SelectProps, SimpleGrid, Stack, Switch } from "@mantine/core"
 import type { ComboboxData } from "@mantine/core/lib/components/Combobox/Combobox.types"
-import { Constants } from "app/constants"
+import type { ReactNode } from "react"
-import { useAppDispatch, useAppSelector } from "app/store"
+import { Constants } from "@/app/constants"
-import type { IconDisplayMode, ScrollMode, SharingSettings } from "app/types"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import type { IconDisplayMode, ScrollMode, SharingSettings } from "@/app/types"
 import {
     changeCustomContextMenu,
+    changeDisablePullToRefresh,
     changeEntriesToKeepOnTopWhenScrolling,
     changeExternalLinkIconDisplayMode,
     changeLanguage,
     changeMarkAllAsReadConfirmation,
+    changeMarkAllAsReadNavigateToUnread,
     changeMobileFooter,
+    changePrimaryColor,
     changeScrollMarks,
     changeScrollMode,
     changeScrollSpeed,
@@ -20,9 +25,8 @@ import {
     changeStarIconDisplayMode,
     changeUnreadCountFavicon,
     changeUnreadCountTitle,
-} from "app/user/thunks"
+} from "@/app/user/thunks"
-import { locales } from "i18n"
+import { locales } from "@/i18n"
-import type { ReactNode } from "react"
 
 export function DisplaySettings() {
     const language = useAppSelector(state => state.user.settings?.language)
@@ -34,13 +38,16 @@ export function DisplaySettings() {
     const starIconDisplayMode = useAppSelector(state => state.user.settings?.starIconDisplayMode)
     const externalLinkIconDisplayMode = useAppSelector(state => state.user.settings?.externalLinkIconDisplayMode)
     const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
+    const markAllAsReadNavigateToNextUnread = useAppSelector(state => state.user.settings?.markAllAsReadNavigateToNextUnread)
     const customContextMenu = useAppSelector(state => state.user.settings?.customContextMenu)
     const mobileFooter = useAppSelector(state => state.user.settings?.mobileFooter)
     const unreadCountTitle = useAppSelector(state => state.user.settings?.unreadCountTitle)
     const unreadCountFavicon = useAppSelector(state => state.user.settings?.unreadCountFavicon)
+    const disablePullToRefresh = useAppSelector(state => state.user.settings?.disablePullToRefresh)
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
-    const dispatch = useAppDispatch()
+    const primaryColor = useAppSelector(state => state.user.settings?.primaryColor) || Constants.theme.defaultPrimaryColor
     const { _ } = useLingui()
+    const dispatch = useAppDispatch()
 
     const scrollModeOptions: Record<ScrollMode, ReactNode> = {
         always: <Trans>Always</Trans>,
@@ -67,10 +74,35 @@ export function DisplaySettings() {
         },
     ]
 
+    const colorData: ComboboxData = [
+        { value: "dark", label: _(msg`Dark`) },
+        { value: "gray", label: _(msg`Gray`) },
+        { value: "red", label: _(msg`Red`) },
+        { value: "pink", label: _(msg`Pink`) },
+        { value: "grape", label: _(msg`Grape`) },
+        { value: "violet", label: _(msg`Violet`) },
+        { value: "indigo", label: _(msg`Indigo`) },
+        { value: "blue", label: _(msg`Blue`) },
+        { value: "cyan", label: _(msg`Cyan`) },
+        { value: "green", label: _(msg`Green`) },
+        { value: "lime", label: _(msg`Lime`) },
+        { value: "yellow", label: _(msg`Yellow`) },
+        { value: "orange", label: _(msg`Orange`) },
+        { value: "teal", label: _(msg`Teal`) },
+    ].sort((a, b) => a.label.localeCompare(b.label))
+    const colorRenderer: SelectProps["renderOption"] = ({ option }) => (
+        <Group>
+            <Box h={18} w={18} bg={option.value} />
+            <Box>{option.label}</Box>
+        </Group>
+    )
+
     return (
         <Stack>
+            <Divider label={<Trans>Display</Trans>} labelPosition="center" />
+
             <Select
-                description={<Trans>Language</Trans>}
+                label={<Trans>Language</Trans>}
                 value={language}
                 data={locales.map(l => ({
                     value: l.key,
@@ -79,6 +111,14 @@ export function DisplaySettings() {
                 onChange={async s => await (s && dispatch(changeLanguage(s)))}
             />
 
+            <Select
+                label={<Trans>Primary color</Trans>}
+                data={colorData}
+                value={primaryColor}
+                onChange={async value => value && (await dispatch(changePrimaryColor(value)))}
+                renderOption={colorRenderer}
+            />
+
             <Switch
                 label={<Trans>Show feeds and categories with no unread entries</Trans>}
                 checked={showRead}
@@ -91,50 +131,27 @@ export function DisplaySettings() {
                 onChange={async e => await dispatch(changeMarkAllAsReadConfirmation(e.currentTarget.checked))}
             />
 
+            <Switch
+                label={<Trans>Navigate to the next category/feed with unread entries when marking all entries as read</Trans>}
+                checked={markAllAsReadNavigateToNextUnread}
+                onChange={async e => await dispatch(changeMarkAllAsReadNavigateToUnread(e.currentTarget.checked))}
+            />
+
             <Switch
                 label={<Trans>On mobile, show action buttons at the bottom of the screen</Trans>}
                 checked={mobileFooter}
                 onChange={async e => await dispatch(changeMobileFooter(e.currentTarget.checked))}
             />
 
-            <Divider label={<Trans>Browser tab</Trans>} labelPosition="center" />
-
-            <Switch
-                label={<Trans>Show unread count in tab title</Trans>}
-                checked={unreadCountTitle}
-                onChange={async e => await dispatch(changeUnreadCountTitle(e.currentTarget.checked))}
-            />
-
-            <Switch
-                label={<Trans>Show unread count in tab favicon</Trans>}
-                checked={unreadCountFavicon}
-                onChange={async e => await dispatch(changeUnreadCountFavicon(e.currentTarget.checked))}
-            />
-
-            <Divider label={<Trans>Entry headers</Trans>} labelPosition="center" />
-
-            <Select
-                description={<Trans>Show star icon</Trans>}
-                value={starIconDisplayMode}
-                data={displayModeData}
-                onChange={async s => await dispatch(changeStarIconDisplayMode(s as IconDisplayMode))}
-            />
-
-            <Select
-                description={<Trans>Show external link icon</Trans>}
-                value={externalLinkIconDisplayMode}
-                data={displayModeData}
-                onChange={async s => await dispatch(changeExternalLinkIconDisplayMode(s as IconDisplayMode))}
-            />
-
-            <Switch
-                label={<Trans>Show CommaFeed's own context menu on right click</Trans>}
-                checked={customContextMenu}
-                onChange={async e => await dispatch(changeCustomContextMenu(e.currentTarget.checked))}
-            />
-
             <Divider label={<Trans>Scrolling</Trans>} labelPosition="center" />
 
+            <Switch
+                label={<Trans>Disable "Pull to refresh" browser behavior</Trans>}
+                description={<Trans>This setting can cause scrolling issues on some browsers (e.g. Safari)</Trans>}
+                checked={disablePullToRefresh}
+                onChange={async e => await dispatch(changeDisablePullToRefresh(e.currentTarget.checked))}
+            />
+
             <Radio.Group
                 label={<Trans>Scroll selected entry to the top of the page</Trans>}
                 value={scrollMode}
@@ -167,6 +184,42 @@ export function DisplaySettings() {
                 onChange={async e => await dispatch(changeScrollMarks(e.currentTarget.checked))}
             />
 
+            <Divider label={<Trans>Browser tab</Trans>} labelPosition="center" />
+
+            <Switch
+                label={<Trans>Show unread count in tab title</Trans>}
+                checked={unreadCountTitle}
+                onChange={async e => await dispatch(changeUnreadCountTitle(e.currentTarget.checked))}
+            />
+
+            <Switch
+                label={<Trans>Show unread count in tab favicon</Trans>}
+                checked={unreadCountFavicon}
+                onChange={async e => await dispatch(changeUnreadCountFavicon(e.currentTarget.checked))}
+            />
+
+            <Divider label={<Trans>Entry headers</Trans>} labelPosition="center" />
+
+            <Select
+                label={<Trans>Show star icon</Trans>}
+                value={starIconDisplayMode}
+                data={displayModeData}
+                onChange={async s => await dispatch(changeStarIconDisplayMode(s as IconDisplayMode))}
+            />
+
+            <Select
+                label={<Trans>Show external link icon</Trans>}
+                value={externalLinkIconDisplayMode}
+                data={displayModeData}
+                onChange={async s => await dispatch(changeExternalLinkIconDisplayMode(s as IconDisplayMode))}
+            />
+
+            <Switch
+                label={<Trans>Show CommaFeed's own context menu on right click</Trans>}
+                checked={customContextMenu}
+                onChange={async e => await dispatch(changeCustomContextMenu(e.currentTarget.checked))}
+            />
+
             <Divider label={<Trans>Sharing sites</Trans>} labelPosition="center" />
 
             <SimpleGrid cols={2}>

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

@@ -1,17 +1,18 @@
-import { Trans, msg } from "@lingui/macro"
 import { useLingui } from "@lingui/react"
+import { Trans } from "@lingui/react/macro"
 import { Anchor, Box, Button, Checkbox, Divider, Group, Input, PasswordInput, Stack, Text, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { openConfirmModal } from "@mantine/modals"
-import { client, errorToStrings } from "app/client"
-import { redirectToLogin, redirectToSelectedSource } from "app/redirect/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
-import type { ProfileModificationRequest } from "app/types"
-import { reloadProfile } from "app/user/thunks"
-import { Alert } from "components/Alert"
 import { useEffect } from "react"
 import { useAsyncCallback } from "react-async-hook"
 import { TbDeviceFloppy, TbTrash } from "react-icons/tb"
+import { client, errorToStrings } from "@/app/client"
+import { redirectToLogin, redirectToSelectedSource } from "@/app/redirect/thunks"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import type { ProfileModificationRequest } from "@/app/types"
+import { reloadProfile } from "@/app/user/thunks"
+import { Alert } from "@/components/Alert"
+import { useValidationRules } from "@/hooks/useValidationRules"
 
 interface FormData extends ProfileModificationRequest {
     newPasswordConfirmation?: string
@@ -19,13 +20,17 @@ interface FormData extends ProfileModificationRequest {
 
 export function ProfileSettings() {
     const profile = useAppSelector(state => state.user.profile)
+    const serverInfos = useAppSelector(state => state.server.serverInfos)
     const dispatch = useAppDispatch()
     const { _ } = useLingui()
+    const validationRules = useValidationRules()
 
     const form = useForm<FormData>({
         validate: {
-            newPasswordConfirmation: (value, values) => (value !== values.newPassword ? _(msg`Passwords do not match`) : null),
+            newPassword: validationRules.password,
+            newPasswordConfirmation: (value, values) => validationRules.passwordConfirmation(value, values.newPassword),
         },
+        validateInputOnChange: true,
     })
     const { setValues } = form
 
@@ -51,7 +56,9 @@ export function ProfileSettings() {
             ),
             labels: { confirm: <Trans>Confirm</Trans>, cancel: <Trans>Cancel</Trans> },
             confirmProps: { color: "red" },
-            onConfirm: async () => await deleteProfile.execute(),
+            onConfirm: () => {
+                deleteProfile.execute()
+            },
         })
 
     useEffect(() => {
@@ -131,7 +138,12 @@ export function ProfileSettings() {
                         required
                         {...form.getInputProps("currentPassword")}
                     />
-                    <TextInput type="email" label={<Trans>E-mail</Trans>} {...form.getInputProps("email")} required />
+                    <TextInput
+                        type="email"
+                        label={<Trans>E-mail</Trans>}
+                        {...form.getInputProps("email")}
+                        required={serverInfos?.emailAddressRequired}
+                    />
                     <PasswordInput
                         label={<Trans>New password</Trans>}
                         description={<Trans>Changing password will generate a new API key</Trans>}

commafeed-client/src/components/sidebar/Tree.tsx

@@ -1,6 +1,8 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/react/macro"
 import { Box, Stack } from "@mantine/core"
-import { Constants } from "app/constants"
+import React from "react"
+import { TbChevronDown, TbChevronRight, TbInbox, TbStar, TbTag } from "react-icons/tb"
+import { Constants } from "@/app/constants"
 import {
     redirectToCategory,
     redirectToCategoryDetails,
@@ -8,15 +10,14 @@ import {
     redirectToFeedDetails,
     redirectToTag,
     redirectToTagDetails,
-} from "app/redirect/thunks"
+} from "@/app/redirect/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
+import { useAppDispatch, useAppSelector } from "@/app/store"
-import { collapseTreeCategory } from "app/tree/thunks"
+import type { TreeSubscription } from "@/app/tree/slice"
-import type { Category, Subscription } from "app/types"
+import { collapseTreeCategory } from "@/app/tree/thunks"
-import { categoryUnreadCount, flattenCategoryTree } from "app/utils"
+import type { Category, Subscription } from "@/app/types"
-import { Loader } from "components/Loader"
+import { categoryHasNewEntries, categoryUnreadCount, flattenCategoryTree } from "@/app/utils"
-import { OnDesktop } from "components/responsive/OnDesktop"
+import { Loader } from "@/components/Loader"
-import React from "react"
+import { OnDesktop } from "@/components/responsive/OnDesktop"
-import { TbChevronDown, TbChevronRight, TbInbox, TbStar, TbTag } from "react-icons/tb"
 import { TreeNode } from "./TreeNode"
 import { TreeSearch } from "./TreeSearch"
 
@@ -89,6 +90,7 @@ export function Tree() {
             name={<Trans>All</Trans>}
             icon={allIcon}
             unread={categoryUnreadCount(root)}
+            hasNewEntries={categoryHasNewEntries(root)}
             selected={source.type === "category" && source.id === Constants.categories.all.id}
             expanded={false}
             level={0}
@@ -103,6 +105,7 @@ export function Tree() {
             name={<Trans>Starred</Trans>}
             icon={starredIcon}
             unread={0}
+            hasNewEntries={false}
             selected={source.type === "category" && source.id === Constants.categories.starred.id}
             expanded={false}
             level={0}
@@ -122,6 +125,7 @@ export function Tree() {
                 name={category.name}
                 icon={category.expanded ? expandedIcon : collapsedIcon}
                 unread={categoryUnreadCount(category)}
+                hasNewEntries={categoryHasNewEntries(category)}
                 selected={source.type === "category" && source.id === category.id}
                 expanded={category.expanded}
                 level={level}
@@ -133,7 +137,7 @@ export function Tree() {
         )
     }
 
-    const feedNode = (feed: Subscription, level = 0) => {
+    const feedNode = (feed: TreeSubscription, level = 0) => {
         if (!isFeedDisplayed(feed)) return null
 
         return (
@@ -143,6 +147,7 @@ export function Tree() {
                 name={feed.name}
                 icon={feed.iconUrl}
                 unread={feed.unread}
+                hasNewEntries={!!feed.hasNewEntries}
                 selected={source.type === "feed" && source.id === String(feed.id)}
                 level={level}
                 hasError={feed.errorCount > errorThreshold}
@@ -159,6 +164,7 @@ export function Tree() {
             name={tag}
             icon={tagIcon}
             unread={0}
+            hasNewEntries={false}
             selected={source.type === "tag" && source.id === tag}
             level={0}
             hasError={false}
@@ -182,7 +188,7 @@ export function Tree() {
             <OnDesktop>
                 <TreeSearch feeds={feeds} />
             </OnDesktop>
-            <Box>
+            <Box className="cf-tree">
                 {allCategoryNode()}
                 {starredCategoryNode()}
                 {root.children.map(c => recursiveCategoryNode(c))}

commafeed-client/src/components/sidebar/TreeNode.tsx

@@ -1,8 +1,8 @@
 import { Box, Center } from "@mantine/core"
-import type { EntrySourceType } from "app/entries/slice"
-import { FeedFavicon } from "components/content/FeedFavicon"
 import type React from "react"
-import { tss } from "tss"
+import type { EntrySourceType } from "@/app/entries/slice"
+import { FeedFavicon } from "@/components/content/FeedFavicon"
+import { tss } from "@/tss"
 import { UnreadCount } from "./UnreadCount"
 
 interface TreeNodeProps {
@@ -15,6 +15,7 @@ interface TreeNodeProps {
     expanded?: boolean
     level: number
     hasError: boolean
+    hasNewEntries: boolean
     onClick: (e: React.MouseEvent, id: string) => void
     onIconClick?: (e: React.MouseEvent, id: string) => void
 }
@@ -58,7 +59,7 @@ const useStyles = tss
         }
     })
 
-export function TreeNode(props: TreeNodeProps) {
+export function TreeNode(props: Readonly<TreeNodeProps>) {
     const { classes } = useStyles({
         selected: props.selected,
         hasError: props.hasError,
@@ -68,19 +69,19 @@ export function TreeNode(props: TreeNodeProps) {
         <Box
             py={1}
             pl={props.level * 20}
-            className={classes.node}
+            className={`${classes.node} cf-treenode cf-treenode-${props.type}`}
             onClick={(e: React.MouseEvent) => props.onClick(e, props.id)}
             data-id={props.id}
             data-type={props.type}
             data-unread-count={props.unread}
         >
-            <Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick?.(e, props.id)}>
+            <Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick?.(e, props.id)} className="cf-treenode-icon">
                 <Center>{typeof props.icon === "string" ? <FeedFavicon url={props.icon} /> : props.icon}</Center>
             </Box>
             <Box className={classes.nodeText}>{props.name}</Box>
             {!props.expanded && (
-                <Box>
+                <Box className="cf-treenode-unread-count">
-                    <UnreadCount unreadCount={props.unread} />
+                    <UnreadCount unreadCount={props.unread} showIndicator={props.hasNewEntries} />
                 </Box>
             )}
         </Box>

commafeed-client/src/components/sidebar/TreeSearch.tsx

@@ -1,19 +1,20 @@
-import { Trans, msg } from "@lingui/macro"
+import { msg } from "@lingui/core/macro"
 import { useLingui } from "@lingui/react"
-import { TextInput } from "@mantine/core"
+import { Trans } from "@lingui/react/macro"
+import { Box, TextInput } from "@mantine/core"
 import { Spotlight, type SpotlightActionData, spotlight } from "@mantine/spotlight"
-import { redirectToFeed } from "app/redirect/thunks"
-import { useAppDispatch } from "app/store"
-import type { Subscription } from "app/types"
-import { FeedFavicon } from "components/content/FeedFavicon"
-import { useMousetrap } from "hooks/useMousetrap"
 import { TbSearch } from "react-icons/tb"
+import { redirectToFeed } from "@/app/redirect/thunks"
+import { useAppDispatch } from "@/app/store"
+import type { Subscription } from "@/app/types"
+import { FeedFavicon } from "@/components/content/FeedFavicon"
+import { useMousetrap } from "@/hooks/useMousetrap"
 
 export interface TreeSearchProps {
     feeds: Subscription[]
 }
 
-export function TreeSearch(props: TreeSearchProps) {
+export function TreeSearch(props: Readonly<TreeSearchProps>) {
     const dispatch = useAppDispatch()
     const { _ } = useLingui()
 
@@ -32,7 +33,7 @@ export function TreeSearch(props: TreeSearchProps) {
     useMousetrap("g u", () => spotlight.open())
 
     return (
-        <>
+        <Box className="cf-treesearch">
             <TextInput
                 placeholder={_(msg`Search`)}
                 leftSection={searchIcon}
@@ -57,6 +58,6 @@ export function TreeSearch(props: TreeSearchProps) {
                 }}
                 nothingFound={<Trans>Nothing found</Trans>}
             />
-        </>
+        </Box>
     )
 }

commafeed-client/src/components/sidebar/UnreadCount.tsx

@@ -1,6 +1,6 @@
-import { Badge, Tooltip } from "@mantine/core"
+import { Badge, Indicator, Tooltip } from "@mantine/core"
-import { Constants } from "app/constants"
+import { Constants } from "@/app/constants"
-import { tss } from "tss"
+import { tss } from "@/tss"
 
 const useStyles = tss.create(() => ({
     badge: {
@@ -10,7 +10,12 @@ const useStyles = tss.create(() => ({
     },
 }))
 
-export function UnreadCount(props: { unreadCount: number }) {
+export function UnreadCount(
+    props: Readonly<{
+        unreadCount: number
+        showIndicator: boolean
+    }>
+) {
     const { classes } = useStyles()
 
     if (props.unreadCount <= 0) return null
@@ -18,9 +23,11 @@ export function UnreadCount(props: { unreadCount: number }) {
     const count = props.unreadCount >= 10000 ? "10k+" : props.unreadCount
     return (
         <Tooltip label={props.unreadCount} disabled={props.unreadCount === count} openDelay={Constants.tooltip.delay}>
-            <Badge className={classes.badge} variant="light" fullWidth>
+            <Indicator disabled={!props.showIndicator} size={4} offset={10} position="middle-start">
-                {count}
+                <Badge className={`${classes.badge} cf-badge`} variant="light" fullWidth>
-            </Badge>
+                    {count}
+                </Badge>
+            </Indicator>
         </Tooltip>
     )
 }

commafeed-client/src/hooks/useActionButton.ts

@@ -1,5 +1,5 @@
 import { useMantineTheme } from "@mantine/core"
-import { useMobile } from "hooks/useMobile"
+import { useMobile } from "@/hooks/useMobile"
 
 export const useActionButton = () => {
     const theme = useMantineTheme()

commafeed-client/src/hooks/useAppLoading.ts

@@ -1,6 +1,6 @@
-import { msg } from "@lingui/macro"
+import { msg } from "@lingui/core/macro"
 import { useLingui } from "@lingui/react"
-import { useAppSelector } from "app/store"
+import { useAppSelector } from "@/app/store"
 
 interface Step {
     label: string
@@ -8,28 +8,28 @@ interface Step {
 }
 
 export const useAppLoading = () => {
-    const profile = useAppSelector(state => state.user.profile)
+    const profileLoaded = useAppSelector(state => !!state.user.profile)
-    const settings = useAppSelector(state => state.user.settings)
+    const settingsLoaded = useAppSelector(state => !!state.user.settings)
-    const rootCategory = useAppSelector(state => state.tree.rootCategory)
+    const rootCategoryLoaded = useAppSelector(state => !!state.tree.rootCategory)
-    const tags = useAppSelector(state => state.user.tags)
+    const tagsLoaded = useAppSelector(state => !!state.user.tags)
     const { _ } = useLingui()
 
     const steps: Step[] = [
         {
             label: _(msg`Loading settings...`),
-            done: !!settings,
+            done: settingsLoaded,
         },
         {
             label: _(msg`Loading profile...`),
-            done: !!profile,
+            done: profileLoaded,
         },
         {
             label: _(msg`Loading subscriptions...`),
-            done: !!rootCategory,
+            done: rootCategoryLoaded,
         },
         {
             label: _(msg`Loading tags...`),
-            done: !!tags,
+            done: tagsLoaded,
         },
     ]
 

commafeed-client/src/hooks/useMobile.ts

@@ -1,5 +1,5 @@
 import { useMediaQuery } from "@mantine/hooks"
-import { Constants } from "app/constants"
+import { Constants } from "@/app/constants"
 
 export const useMobile = (breakpoint: string | number = Constants.layout.mobileBreakpoint) => {
     const bp = typeof breakpoint === "number" ? `${breakpoint}px` : breakpoint

commafeed-client/src/hooks/useValidationRules.ts

@@ -0,0 +1,17 @@
+import { msg } from "@lingui/core/macro"
+import { useLingui } from "@lingui/react"
+import { useAppSelector } from "@/app/store"
+
+export function useValidationRules() {
+    const minimumPasswordLength = useAppSelector(state => state.server.serverInfos?.minimumPasswordLength)
+    const { _ } = useLingui()
+
+    return {
+        password: (value: string | undefined) =>
+            value && minimumPasswordLength && value.length < minimumPasswordLength
+                ? _(msg`Password must be at least ${minimumPasswordLength} characters`)
+                : null,
+        passwordConfirmation: (newPasswordConfirmation: string | undefined, newPassword: string | undefined) =>
+            newPasswordConfirmation && newPasswordConfirmation !== newPassword ? _(msg`Passwords do not match`) : null,
+    }
+}

commafeed-client/src/hooks/useWebSocket.ts

@@ -1,15 +1,15 @@
-import { setWebSocketConnected } from "app/server/slice"
-import { type AppDispatch, useAppDispatch, useAppSelector } from "app/store"
-import { incrementUnreadCount } from "app/tree/slice"
 import { useEffect } from "react"
 import WebsocketHeartbeatJs from "websocket-heartbeat-js"
+import { setWebSocketConnected } from "@/app/server/slice"
+import { type AppDispatch, useAppDispatch, useAppSelector } from "@/app/store"
+import { newFeedEntriesDiscovered } from "@/app/tree/thunks"
 
 const handleMessage = (dispatch: AppDispatch, message: string) => {
     const parts = message.split(":")
     const type = parts[0]
     if (type === "new-feed-entries") {
         dispatch(
-            incrementUnreadCount({
+            newFeedEntriesDiscovered({
                 feedId: +parts[1],
                 amount: +parts[2],
             })

commafeed-client/src/i18n.ts

@@ -1,7 +1,7 @@
-import { type Messages, i18n } from "@lingui/core"
+import { i18n, type Messages } from "@lingui/core"
-import { useAppSelector } from "app/store"
 import dayjs from "dayjs"
 import { useEffect } from "react"
+import { useAppSelector } from "@/app/store"
 
 interface Locale {
     key: string
@@ -12,34 +12,146 @@ interface Locale {
 // add an object to the array to add a new locale
 // don't forget to also add it to the 'locales' array in lingui.config.ts
 export const locales: Locale[] = [
-    { key: "ar", label: "العربية", dayjsImportFn: async () => await import("dayjs/locale/ar") },
+    {
-    { key: "ca", label: "Català", dayjsImportFn: async () => await import("dayjs/locale/ca") },
+        key: "ar",
-    { key: "cs", label: "Čeština", dayjsImportFn: async () => await import("dayjs/locale/cs") },
+        label: "العربية",
-    { key: "cy", label: "Cymraeg", dayjsImportFn: async () => await import("dayjs/locale/cy") },
+        dayjsImportFn: async () => await import("dayjs/locale/ar"),
-    { key: "da", label: "Danish", dayjsImportFn: async () => await import("dayjs/locale/da") },
+    },
-    { key: "de", label: "Deutsch", dayjsImportFn: async () => await import("dayjs/locale/de") },
+    {
-    { key: "en", label: "English", dayjsImportFn: async () => await import("dayjs/locale/en") },
+        key: "ca",
-    { key: "es", label: "Español", dayjsImportFn: async () => await import("dayjs/locale/es") },
+        label: "Català",
-    { key: "fa", label: "فارسی", dayjsImportFn: async () => await import("dayjs/locale/fa") },
+        dayjsImportFn: async () => await import("dayjs/locale/ca"),
-    { key: "fi", label: "Suomi", dayjsImportFn: async () => await import("dayjs/locale/fi") },
+    },
-    { key: "fr", label: "Français", dayjsImportFn: async () => await import("dayjs/locale/fr") },
+    {
-    { key: "gl", label: "Galician", dayjsImportFn: async () => await import("dayjs/locale/gl") },
+        key: "cs",
-    { key: "hu", label: "Magyar", dayjsImportFn: async () => await import("dayjs/locale/hu") },
+        label: "Čeština",
-    { key: "id", label: "Indonesian", dayjsImportFn: async () => await import("dayjs/locale/id") },
+        dayjsImportFn: async () => await import("dayjs/locale/cs"),
-    { key: "it", label: "Italiano", dayjsImportFn: async () => await import("dayjs/locale/it") },
+    },
-    { key: "ja", label: "日本語", dayjsImportFn: async () => await import("dayjs/locale/ja") },
+    {
-    { key: "ko", label: "한국어", dayjsImportFn: async () => await import("dayjs/locale/ko") },
+        key: "cy",
-    { key: "ms", label: "Bahasa Malaysian", dayjsImportFn: async () => await import("dayjs/locale/ms") },
+        label: "Cymraeg",
-    { key: "nb", label: "Norsk (bokmål)", dayjsImportFn: async () => await import("dayjs/locale/nb") },
+        dayjsImportFn: async () => await import("dayjs/locale/cy"),
-    { key: "nl", label: "Nederlands", dayjsImportFn: async () => await import("dayjs/locale/nl") },
+    },
-    { key: "nn", label: "Norsk (nynorsk)", dayjsImportFn: async () => await import("dayjs/locale/nn") },
+    {
-    { key: "pl", label: "Polski", dayjsImportFn: async () => await import("dayjs/locale/pl") },
+        key: "da",
-    { key: "pt", label: "Português", dayjsImportFn: async () => await import("dayjs/locale/pt") },
+        label: "Danish",
-    { key: "ru", label: "Русский", dayjsImportFn: async () => await import("dayjs/locale/ru") },
+        dayjsImportFn: async () => await import("dayjs/locale/da"),
-    { key: "sk", label: "Slovenčina", dayjsImportFn: async () => await import("dayjs/locale/sk") },
+    },
-    { key: "sv", label: "Svenska", dayjsImportFn: async () => await import("dayjs/locale/sv") },
+    {
-    { key: "tr", label: "Türkçe", dayjsImportFn: async () => await import("dayjs/locale/tr") },
+        key: "de",
-    { key: "zh", label: "简体中文", dayjsImportFn: async () => await import("dayjs/locale/zh") },
+        label: "Deutsch",
+        dayjsImportFn: async () => await import("dayjs/locale/de"),
+    },
+    {
+        key: "en",
+        label: "English",
+        dayjsImportFn: async () => await import("dayjs/locale/en"),
+    },
+    {
+        key: "es",
+        label: "Español",
+        dayjsImportFn: async () => await import("dayjs/locale/es"),
+    },
+    {
+        key: "fa",
+        label: "فارسی",
+        dayjsImportFn: async () => await import("dayjs/locale/fa"),
+    },
+    {
+        key: "fi",
+        label: "Suomi",
+        dayjsImportFn: async () => await import("dayjs/locale/fi"),
+    },
+    {
+        key: "fr",
+        label: "Français",
+        dayjsImportFn: async () => await import("dayjs/locale/fr"),
+    },
+    {
+        key: "gl",
+        label: "Galician",
+        dayjsImportFn: async () => await import("dayjs/locale/gl"),
+    },
+    {
+        key: "hu",
+        label: "Magyar",
+        dayjsImportFn: async () => await import("dayjs/locale/hu"),
+    },
+    {
+        key: "id",
+        label: "Indonesian",
+        dayjsImportFn: async () => await import("dayjs/locale/id"),
+    },
+    {
+        key: "it",
+        label: "Italiano",
+        dayjsImportFn: async () => await import("dayjs/locale/it"),
+    },
+    {
+        key: "ja",
+        label: "日本語",
+        dayjsImportFn: async () => await import("dayjs/locale/ja"),
+    },
+    {
+        key: "ko",
+        label: "한국어",
+        dayjsImportFn: async () => await import("dayjs/locale/ko"),
+    },
+    {
+        key: "ms",
+        label: "Bahasa Malaysian",
+        dayjsImportFn: async () => await import("dayjs/locale/ms"),
+    },
+    {
+        key: "nb",
+        label: "Norsk (bokmål)",
+        dayjsImportFn: async () => await import("dayjs/locale/nb"),
+    },
+    {
+        key: "nl",
+        label: "Nederlands",
+        dayjsImportFn: async () => await import("dayjs/locale/nl"),
+    },
+    {
+        key: "nn",
+        label: "Norsk (nynorsk)",
+        dayjsImportFn: async () => await import("dayjs/locale/nn"),
+    },
+    {
+        key: "pl",
+        label: "Polski",
+        dayjsImportFn: async () => await import("dayjs/locale/pl"),
+    },
+    {
+        key: "pt",
+        label: "Português",
+        dayjsImportFn: async () => await import("dayjs/locale/pt"),
+    },
+    {
+        key: "ru",
+        label: "Русский",
+        dayjsImportFn: async () => await import("dayjs/locale/ru"),
+    },
+    {
+        key: "sk",
+        label: "Slovenčina",
+        dayjsImportFn: async () => await import("dayjs/locale/sk"),
+    },
+    {
+        key: "sv",
+        label: "Svenska",
+        dayjsImportFn: async () => await import("dayjs/locale/sv"),
+    },
+    {
+        key: "tr",
+        label: "Türkçe",
+        dayjsImportFn: async () => await import("dayjs/locale/tr"),
+    },
+    {
+        key: "zh",
+        label: "简体中文",
+        dayjsImportFn: async () => await import("dayjs/locale/zh"),
+    },
 ]
 
 function activateLocale(locale: string) {
@@ -57,8 +169,12 @@ function activateLocale(locale: string) {
 }
 
 export const useI18n = () => {
-    const locale = useAppSelector(state => state.user.settings?.language)
+    const locale =
+        useAppSelector(state => state.user.settings?.language) ??
+        navigator.languages.map(l => l.split("-")[0]).find(l => locales.some(locale => locale.key === l)) ??
+        "en"
+
     useEffect(() => {
-        activateLocale(locale ?? "en")
+        activateLocale(locale)
     }, [locale])
 }

commafeed-client/src/locales/ar/messages.po

@@ -18,7 +18,7 @@ msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitH
 msgstr ""
 
 #: src/pages/app/FeedDetailsPage.tsx
-msgid "<0>Complete syntax is available </0><1>here</1>."
+msgid "<0>Complete syntax is available </0><1>here</1><2>.</2>"
 msgstr ""
 
 #: src/pages/auth/RegistrationPage.tsx
@@ -60,10 +60,16 @@ msgstr "إضافة مستخدم"
 msgid "Admin"
 msgstr "إداري"
 
-#: src/app/constants.ts
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Admin user name"
+msgstr ""
+
 #: src/components/content/add/CategorySelect.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "All"
 msgstr "الكل"
 
@@ -104,11 +110,11 @@ msgstr "هل أنت متأكد أنك تريد حذف المستخدم <0> {user
 msgid "Are you sure you want to delete your account? There's no turning back!"
 msgstr "هل أنت متأكد أنك تريد حذف حسابك؟ "
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark all entries of <0>{sourceLabel}</0> as read?"
 msgstr "هل أنت متأكد أنك تريد تعليم كافة إدخالات <0> {sourceLabel} </0> كمقروءة؟"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark entries older than {threshold} days of <0>{sourceLabel}</0> as read?"
 msgstr "هل أنت متأكد أنك تريد وضع علامة على الإدخالات الأقدم من {عتبة} يوم من <0> {sourceLabel} </0> كمقروءة؟"
 
@@ -129,15 +135,20 @@ msgid "Back"
 msgstr "العودة"
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
 msgid "Back to log in"
 msgstr "العودة لتسجيل الدخول"
 
-#: src/components/KeyboardShortcutsHelp.tsx
+#: src/components/settings/DisplaySettings.tsx
-msgid "Browser extension required for Chrome"
+msgid "Blue"
 msgstr ""
 
 #: src/pages/app/AboutPage.tsx
-msgid "Browser extention"
+msgid "Browser extension"
+msgstr ""
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Browser extension required for Chrome"
 msgstr ""
 
 #: src/components/settings/DisplaySettings.tsx
@@ -147,7 +158,7 @@ msgstr ""
 #: src/components/admin/UserEdit.tsx
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
@@ -204,7 +215,7 @@ msgstr ""
 msgid "Compact"
 msgstr "مضغوط"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
@@ -216,10 +227,19 @@ msgstr "تأكيد"
 msgid "Confirm password"
 msgstr "تأكيد كلمة المرور"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Confirm Password"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Cozy"
 msgstr "دافئ"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Create Admin Account"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr "السيطرة"
@@ -240,7 +260,12 @@ msgstr ""
 msgid "Custom JS code that will be executed on page load"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Cyan"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 msgid "Dark"
 msgstr ""
 
@@ -273,7 +298,12 @@ msgstr "تنازلي"
 msgid "Detailed"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
 msgstr "عرض"
@@ -294,6 +324,8 @@ msgstr "اسحب الرابط إلى شريط الإشارات"
 #: src/components/admin/UserEdit.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
 #: src/pages/auth/PasswordRecoveryPage.tsx
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "E-mail"
@@ -376,6 +408,10 @@ msgstr ""
 msgid "Filtering expression"
 msgstr "تصفية التعبير"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Font size"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Force fetching feeds is not yet available."
 msgstr ""
@@ -400,6 +436,7 @@ msgstr "إنشاء مفتاح API جديد"
 msgid "Generated feed url"
 msgstr "رابط الخلاصة المولدة"
 
+#. placeholder {0}: truncate(props.entry.feedName, 30)
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Go to {0}"
 msgstr ""
@@ -416,6 +453,18 @@ msgstr "انتقل إلى وثائق API."
 msgid "Goodies"
 msgstr "الأشياء الجيدة"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Grape"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Gray"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Green"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Id"
 msgstr "المرجع نفسه"
@@ -440,6 +489,18 @@ msgstr "استيراد"
 msgid "In expanded view, scrolling through entries mark them as read"
 msgstr "في العرض الموسع ، التمرير عبر الإدخالات وضع علامة عليها كمقروءة"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Indigo"
+msgstr ""
+
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Initial Setup"
+msgstr ""
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Invalid password reset link. Please request a new one."
+msgstr ""
+
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Keep unread"
@@ -470,12 +531,20 @@ msgstr "آخر رسالة تحديث"
 msgid "Light"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Lime"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/TagDetailsPage.tsx
 msgid "Link"
 msgstr "رابط"
 
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Link to the documentation"
+msgstr ""
+
 #: src/hooks/useAppLoading.ts
 msgid "Loading profile..."
 msgstr "تحميل ملف التعريف ..."
@@ -511,12 +580,12 @@ msgstr ""
 msgid "Manage users"
 msgstr "إدارة المستخدمين"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/header/Header.tsx
 msgid "Mark all as read"
 msgstr "تعليم الكل كمقروء"
 
-#: src/components/header/MarkAllAsReadButton.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Mark all entries as read"
 msgstr "تعليم كافة الإدخالات كمقروءة"
 
@@ -562,6 +631,10 @@ msgstr "الاسم"
 msgid "Navigate to a subscription by entering its name"
 msgstr "انتقل إلى اشتراك بإدخال اسمه"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Navigate to the next category/feed with unread entries when marking all entries as read"
+msgstr ""
+
 #: src/components/settings/DisplaySettings.tsx
 #: src/components/settings/DisplaySettings.tsx
 msgid "Never"
@@ -571,6 +644,11 @@ msgstr ""
 msgid "New password"
 msgstr "كلمة مرور جديدة"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "New Password"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Newest first"
 msgstr "الأحدث أولاً"
@@ -682,6 +760,10 @@ msgstr "ملف OPML"
 msgid "OPML file is required"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Orange"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
 msgstr "طلب"
@@ -695,6 +777,8 @@ msgid "Parent Category"
 msgstr "الفئة الأصل"
 
 #: src/components/admin/UserEdit.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
@@ -702,14 +786,22 @@ msgstr "الفئة الأصل"
 msgid "Password"
 msgstr "كلمة المرور"
 
+#: src/hooks/useValidationRules.ts
+msgid "Password must be at least {minimumPasswordLength} characters"
+msgstr ""
+
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "Password Recovery"
 msgstr "استعادة كلمة المرور"
 
-#: src/components/settings/ProfileSettings.tsx
+#: src/hooks/useValidationRules.ts
 msgid "Passwords do not match"
 msgstr "كلمات المرور غير متطابقة"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Pink"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Position"
@@ -719,6 +811,10 @@ msgstr "المنـصب"
 msgid "Previous"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Primary color"
+msgstr ""
+
 #: src/pages/app/SettingsPage.tsx
 msgid "Profile"
 msgstr "الملف الشخصي"
@@ -727,6 +823,10 @@ msgstr "الملف الشخصي"
 msgid "Recover password"
 msgstr "استعادة كلمة السر"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Red"
+msgstr ""
+
 #: src/components/header/Header.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Refresh"
@@ -736,6 +836,11 @@ msgstr "تحديث"
 msgid "Registrations are closed on this CommaFeed instance"
 msgstr "تم إغلاق التسجيلات في مثيل CommaFeed هذا"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Reset Password"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "REST API"
 msgstr ""
@@ -772,9 +877,13 @@ msgstr ""
 msgid "Search"
 msgstr "بحث"
 
-#: src/components/header/Header.tsx
+#: src/components/KeyboardShortcutsHelp.tsx
-msgid "Search requires at least 3 characters"
+msgid "Select next unread feed/category"
-msgstr "يتطلب البحث 3 أحرف على الأقل"
+msgstr ""
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Select previous unread feed/category"
+msgstr ""
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Set focus on next entry without opening it"
@@ -871,8 +980,9 @@ msgstr "فضاء"
 msgid "Star"
 msgstr "النجم"
 
-#: src/app/constants.ts
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "Starred"
 msgstr "مميز بنجمة"
 
@@ -915,6 +1025,10 @@ msgstr ""
 msgid "Tags"
 msgstr "الكلمات"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Teal"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "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."
 msgstr "عنوان URL للتغذية التي تريد الاشتراك فيها. "
@@ -927,6 +1041,10 @@ msgstr "الموضوع"
 msgid "This is your API key. It can be used for some read-only API operations and grants access to the Fever API. Use the form at the bottom of the page to generate a new API key"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "This setting can cause scrolling issues on some browsers (e.g. Safari)"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle read status of current entry"
 msgstr "تبديل قراءة حالة الإدخال الحالي"
@@ -971,6 +1089,10 @@ msgstr "اسم المستخدم"
 msgid "User Name or E-mail"
 msgstr "اسم المستخدم أو البريد الإلكتروني"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Violet"
+msgstr ""
+
 #: src/components/Alert.tsx
 msgid "Warning"
 msgstr "تحذير"
@@ -979,6 +1101,14 @@ msgstr "تحذير"
 msgid "Website"
 msgstr "موقع الكتروني"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Welcome! This appears to be the first time you're running CommaFeed. Please create an administrator account to get started."
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Yellow"
+msgstr ""
+
 #: src/pages/app/FeedEntriesPage.tsx
 msgid "You don't have any subscriptions yet. Why not try adding one by clicking on the + sign at the top of the page?"
 msgstr "ليس لديك أي اشتراكات حتى الآن. "
@@ -986,3 +1116,7 @@ msgstr "ليس لديك أي اشتراكات حتى الآن. "
 #: src/components/header/ProfileMenu.tsx
 msgid "Your feeds have been queued for refresh."
 msgstr ""
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Your password has been changed. You can now log in with your new password."
+msgstr ""

commafeed-client/src/locales/ca/messages.po

@@ -18,8 +18,8 @@ msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitH
 msgstr "<0>CommaFeed és un projecte de codi obert. El codi font està allotjat a </0><1>GitHub</1>."
 
 #: src/pages/app/FeedDetailsPage.tsx
-msgid "<0>Complete syntax is available </0><1>here</1>."
+msgid "<0>Complete syntax is available </0><1>here</1><2>.</2>"
-msgstr "<0>La sintaxi completa està disponible </0><1>aquí</1>."
+msgstr "<0>La sintaxi completa està disponible </0><1>aquí</1><2>.</2>"
 
 #: src/pages/auth/RegistrationPage.tsx
 msgid "<0>Have an account?</0><1>Log in!</1>"
@@ -44,7 +44,7 @@ msgstr "Accions"
 
 #: src/components/content/add/AddCategory.tsx
 msgid "Add"
-msgstr "Afegir"
+msgstr "Afegeix"
 
 #: src/pages/app/AddPage.tsx
 msgid "Add category"
@@ -60,10 +60,16 @@ msgstr "Afegeix usuari"
 msgid "Admin"
 msgstr "Administrador"
 
-#: src/app/constants.ts
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Admin user name"
+msgstr ""
+
 #: src/components/content/add/CategorySelect.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "All"
 msgstr "Tot"
 
@@ -82,7 +88,7 @@ msgstr "Un fitxer opml és un fitxer XML que conté URL i categories de canals.
 
 #: src/components/content/add/Subscribe.tsx
 msgid "Analyze feed"
-msgstr "Analitzar el feed"
+msgstr "Analitza el canal"
 
 #: src/components/AnnouncementDialog.tsx
 msgid "Announcement"
@@ -90,11 +96,11 @@ msgstr "Anunci"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "API key"
-msgstr "clau API"
+msgstr "Clau API"
 
 #: src/pages/app/CategoryDetailsPage.tsx
 msgid "Are you sure you want to delete category <0>{categoryName}</0>?"
-msgstr "Estàs segur que vols suprimir la categoria <0>{categoryName}</0>?"
+msgstr "Esteu segur que voleu suprimir la categoria <0>{categoryName}</0>?"
 
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Are you sure you want to delete user <0>{userName}</0> ?"
@@ -104,17 +110,17 @@ msgstr "Esteu segur que voleu suprimir l'usuari <0>{userName}</0>?"
 msgid "Are you sure you want to delete your account? There's no turning back!"
 msgstr "Esteu segur que voleu suprimir el vostre compte? "
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark all entries of <0>{sourceLabel}</0> as read?"
 msgstr "Esteu segur que voleu marcar totes les entrades de <0>{sourceLabel}</0> com a llegides?"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark entries older than {threshold} days of <0>{sourceLabel}</0> as read?"
 msgstr "Esteu segur que voleu marcar les entrades més antigues de {threshold} dies de <0>{sourceLabel}</0> com a llegides?"
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Are you sure you want to unsubscribe from <0>{feedName}</0>?"
-msgstr "Estàs segur que vols cancel·lar la subscripció a <0>{feedName}</0>?"
+msgstr "Esteu segur que voleu cancel·lar la subscripció a <0>{feedName}</0>?"
 
 #: src/components/header/Header.tsx
 msgid "Asc"
@@ -129,25 +135,30 @@ msgid "Back"
 msgstr "Enrere"
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
 msgid "Back to log in"
-msgstr "Tornar a iniciar sessió"
+msgstr "Torna a iniciar sessió"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Blue"
+msgstr "Blau"
+
+#: src/pages/app/AboutPage.tsx
+msgid "Browser extension"
+msgstr "Extensió del navegador"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Browser extension required for Chrome"
 msgstr "Extensió del navegador necessària per a Chrome"
 
-#: src/pages/app/AboutPage.tsx
-msgid "Browser extention"
-msgstr "Extensió del navegador"
-
 #: src/components/settings/DisplaySettings.tsx
 msgid "Browser tab"
-msgstr ""
+msgstr "Pestanya del navegador"
 
 #: src/components/admin/UserEdit.tsx
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
@@ -182,7 +193,7 @@ msgstr "Tanca el menu"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Cmd"
-msgstr ""
+msgstr "Cmd"
 
 #: src/pages/app/AboutPage.tsx
 msgid "CommaFeed browser extension version {browserExtensionVersion}."
@@ -204,7 +215,7 @@ msgstr "CommaFeed versió {version} ({version})."
 msgid "Compact"
 msgstr "Compacte"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
@@ -216,10 +227,19 @@ msgstr "Confirma"
 msgid "Confirm password"
 msgstr "Confirmeu la contrasenya"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Confirm Password"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Cozy"
 msgstr "Acollidor"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Create Admin Account"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr "Ctrl"
@@ -240,7 +260,12 @@ msgstr "Regles CSS personalitzades que s'aplicaran"
 msgid "Custom JS code that will be executed on page load"
 msgstr "Codi JS personalitzat que s'executarà en carregar la pàgina"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Cyan"
+msgstr "Cian"
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 msgid "Dark"
 msgstr "Fosc"
 
@@ -273,7 +298,12 @@ msgstr "Desc"
 msgid "Detailed"
 msgstr "Detallat"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr "Desactiva el comportament \"Arrossega per actualitzar\"\\ del navegador"
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
 msgstr "Mostra"
@@ -294,6 +324,8 @@ msgstr "Arrossegueu l'enllaç a la barra d'adreces d'interès"
 #: src/components/admin/UserEdit.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
 #: src/pages/auth/PasswordRecoveryPage.tsx
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "E-mail"
@@ -311,7 +343,7 @@ msgstr "Edita l'usuari"
 #: src/components/admin/UserEdit.tsx
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Enabled"
-msgstr "activat"
+msgstr "Activat"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Enter"
@@ -323,11 +355,11 @@ msgstr "introduïu la vostra contrasenya actual per canviar la configuració del
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Entries to keep above the selected entry when scrolling"
-msgstr ""
+msgstr "Entrades que es mantindran a sobre de l'entrada seleccionada en desplaçar-se"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Entry headers"
-msgstr ""
+msgstr "Encapçalaments d'entrada"
 
 #: src/components/Alert.tsx
 msgid "Error"
@@ -366,19 +398,23 @@ msgstr "Carrega tots els meus feeds ara"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "Fever API"
-msgstr ""
+msgstr "Fever API"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "Fever API URL"
-msgstr ""
+msgstr "URL de Fever API"
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Filtering expression"
 msgstr "Expressió de filtratge"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Font size"
+msgstr "Mida de la lletra"
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Force fetching feeds is not yet available."
-msgstr ""
+msgstr "La recuperació forçada de feeds encara no està disponible."
 
 #: src/pages/auth/LoginPage.tsx
 msgid "Forgot password?"
@@ -400,6 +436,7 @@ msgstr "Genera una nova clau d'API"
 msgid "Generated feed url"
 msgstr "URL del feed generat"
 
+#. placeholder {0}: truncate(props.entry.feedName, 30)
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Go to {0}"
 msgstr "Vés a {0}"
@@ -414,7 +451,19 @@ msgstr "Vés a la documentació de l'API."
 
 #: src/pages/app/AboutPage.tsx
 msgid "Goodies"
-msgstr "Bones"
+msgstr "Extres"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Grape"
+msgstr "Raïm"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Gray"
+msgstr "Gris"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Green"
+msgstr "Verd"
 
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Id"
@@ -438,7 +487,19 @@ msgstr "Importació"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "In expanded view, scrolling through entries mark them as read"
-msgstr "a la vista ampliada, desplaçant-se per les entrades les marqueu com a llegides"
+msgstr "En la vista ampliada, en desplaçar-se per les entrades, es marquen com a llegides"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Indigo"
+msgstr "Indi"
+
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Initial Setup"
+msgstr ""
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Invalid password reset link. Please request a new one."
+msgstr ""
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
@@ -470,12 +531,20 @@ msgstr "últim missatge d'actualització"
 msgid "Light"
 msgstr "Clar"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Lime"
+msgstr "Llima"
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/TagDetailsPage.tsx
 msgid "Link"
 msgstr "Enllaç"
 
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Link to the documentation"
+msgstr "Enllaç a la documentació"
+
 #: src/hooks/useAppLoading.ts
 msgid "Loading profile..."
 msgstr "Carregant el perfil..."
@@ -504,19 +573,19 @@ msgstr "Tanca sessió"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Long press"
-msgstr ""
+msgstr "Prem llargament la tecla"
 
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Manage users"
 msgstr "Gestionar usuaris"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/header/Header.tsx
 msgid "Mark all as read"
 msgstr "Marca-ho tot com a llegit"
 
-#: src/components/header/MarkAllAsReadButton.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Mark all entries as read"
 msgstr "Marqueu totes les entrades com a llegides"
 
@@ -549,7 +618,7 @@ msgstr "Mou la pàgina cap amunt"
 #: src/components/RelativeDate.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "N/A"
-msgstr ""
+msgstr "No es coneix"
 
 #: src/components/admin/UserEdit.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -562,6 +631,10 @@ msgstr "Nom"
 msgid "Navigate to a subscription by entering its name"
 msgstr "Navegueu a una subscripció introduint-ne el nom"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Navigate to the next category/feed with unread entries when marking all entries as read"
+msgstr "Navega a la següent categoria/canal amb entrades no llegides quan es marquen totes les entrades com a llegides"
+
 #: src/components/settings/DisplaySettings.tsx
 #: src/components/settings/DisplaySettings.tsx
 msgid "Never"
@@ -571,6 +644,11 @@ msgstr "Mai"
 msgid "New password"
 msgstr "Contrasenya nova"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "New Password"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Newest first"
 msgstr "El més nou primer"
@@ -594,7 +672,7 @@ msgstr "No hi ha més entrades"
 
 #: src/components/content/ShareButtons.tsx
 msgid "No sharing options available."
-msgstr ""
+msgstr "No hi ha opcions de compartició disponibles."
 
 #: src/components/sidebar/TreeSearch.tsx
 msgid "Nothing found"
@@ -606,11 +684,11 @@ msgstr "el més vell primer"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "On desktop"
-msgstr ""
+msgstr "A l'escriptori"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "On mobile"
-msgstr ""
+msgstr "Al mòbil"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "On mobile, show action buttons at the bottom of the screen"
@@ -618,7 +696,7 @@ msgstr "Al mòbil, mostra els botons d'acció a la part inferior de la pantalla"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Only applies to compact, cozy and detailed modes"
-msgstr ""
+msgstr "Només s'aplica als modes compacte, acollidor i detallat"
 
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
@@ -680,7 +758,11 @@ msgstr "Fitxer OPML"
 
 #: src/components/content/add/ImportOpml.tsx
 msgid "OPML file is required"
-msgstr ""
+msgstr "Cal un fitxer OPML"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Orange"
+msgstr "Taronja"
 
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
@@ -695,6 +777,8 @@ msgid "Parent Category"
 msgstr "Categoria pare"
 
 #: src/components/admin/UserEdit.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
@@ -702,14 +786,22 @@ msgstr "Categoria pare"
 msgid "Password"
 msgstr "Contrasenya"
 
+#: src/hooks/useValidationRules.ts
+msgid "Password must be at least {minimumPasswordLength} characters"
+msgstr ""
+
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "Password Recovery"
 msgstr "Recuperació de contrasenya"
 
-#: src/components/settings/ProfileSettings.tsx
+#: src/hooks/useValidationRules.ts
 msgid "Passwords do not match"
 msgstr "Les contrasenyes no coincideixen"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Pink"
+msgstr "Rosa"
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Position"
@@ -719,6 +811,10 @@ msgstr "Posició"
 msgid "Previous"
 msgstr "Anterior"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Primary color"
+msgstr "Color primari"
+
 #: src/pages/app/SettingsPage.tsx
 msgid "Profile"
 msgstr "Perfil"
@@ -727,6 +823,10 @@ msgstr "Perfil"
 msgid "Recover password"
 msgstr "Recuperar la contrasenya"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Red"
+msgstr "Vermell"
+
 #: src/components/header/Header.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Refresh"
@@ -736,6 +836,11 @@ msgstr "Actualitzar"
 msgid "Registrations are closed on this CommaFeed instance"
 msgstr "Els registres estan tancats en aquesta instància de CommaFeed"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Reset Password"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "REST API"
 msgstr "API REST"
@@ -772,13 +877,17 @@ msgstr "Desplaçament"
 msgid "Search"
 msgstr "Cerca"
 
-#: src/components/header/Header.tsx
+#: src/components/KeyboardShortcutsHelp.tsx
-msgid "Search requires at least 3 characters"
+msgid "Select next unread feed/category"
-msgstr "la cerca requereix almenys 3 caràcters"
+msgstr "Selecciona el següent canal/categoria no llegit"
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Select previous unread feed/category"
+msgstr "Selecciona el canal/categoria anterior sense llegir"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Set focus on next entry without opening it"
-msgstr "posa el focus a la següent entrada sense obrir-la"
+msgstr "Posa el focus a la següent entrada sense obrir-la"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Set focus on previous entry without opening it"
@@ -798,7 +907,7 @@ msgstr "Comparteix"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Sharing sites"
-msgstr "Compartir llocs"
+msgstr "Compartir a altres llocs web"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
@@ -824,7 +933,7 @@ msgstr "Mostra el menú d'entrada (mòbil)"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show external link icon"
-msgstr ""
+msgstr "Mostra la icona d'enllaç extern"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show feeds and categories with no unread entries"
@@ -840,15 +949,15 @@ msgstr "Mostra el menú natiu (escriptori)"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show star icon"
-msgstr ""
+msgstr "Mostra la icona d'estrella"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show unread count in tab favicon"
-msgstr ""
+msgstr "Mostra el recompte de no llegits a la icona de favorits de la pestanya"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show unread count in tab title"
-msgstr ""
+msgstr "Mostra el recompte de no llegits al títol de la pestanya"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
@@ -871,8 +980,9 @@ msgstr "Espai"
 msgid "Star"
 msgstr "Estrella"
 
-#: src/app/constants.ts
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "Starred"
 msgstr "Estrellat"
 
@@ -915,6 +1025,10 @@ msgstr "Sistema"
 msgid "Tags"
 msgstr "Etiquetes"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Teal"
+msgstr "Blau verdós"
+
 #: src/components/content/add/Subscribe.tsx
 msgid "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."
 msgstr "l'URL del canal al qual us voleu subscriure. "
@@ -927,6 +1041,10 @@ msgstr "Tema"
 msgid "This is your API key. It can be used for some read-only API operations and grants access to the Fever API. Use the form at the bottom of the page to generate a new API key"
 msgstr "Aquesta és la vostra clau de l'API. Es pot utilitzar per a algunes operacions de l'API de només lectura i permet accedir a l'API Fever. Utilitzeu el formulari de la part inferior de la pàgina per generar una nova clau d'API."
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "This setting can cause scrolling issues on some browsers (e.g. Safari)"
+msgstr "Aquesta configuració pot causar problemes de desplaçament en alguns navegadors (per exemple, Safari)"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle read status of current entry"
 msgstr "Canvia l'estat de lectura de l'entrada actual"
@@ -971,6 +1089,10 @@ msgstr "Nom d'usuari"
 msgid "User Name or E-mail"
 msgstr "Nom d'usuari o correu electrònic"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Violet"
+msgstr "Violeta"
+
 #: src/components/Alert.tsx
 msgid "Warning"
 msgstr "Avís"
@@ -979,6 +1101,14 @@ msgstr "Avís"
 msgid "Website"
 msgstr "Lloc web"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Welcome! This appears to be the first time you're running CommaFeed. Please create an administrator account to get started."
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Yellow"
+msgstr "Groc"
+
 #: src/pages/app/FeedEntriesPage.tsx
 msgid "You don't have any subscriptions yet. Why not try adding one by clicking on the + sign at the top of the page?"
 msgstr "Encara no teniu cap subscripció. "
@@ -986,3 +1116,7 @@ msgstr "Encara no teniu cap subscripció. "
 #: src/components/header/ProfileMenu.tsx
 msgid "Your feeds have been queued for refresh."
 msgstr "Els vostres feeds s'han posat a la cua per actualitzar-los."
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Your password has been changed. You can now log in with your new password."
+msgstr ""

commafeed-client/src/locales/cs/messages.po

@@ -18,7 +18,7 @@ msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitH
 msgstr ""
 
 #: src/pages/app/FeedDetailsPage.tsx
-msgid "<0>Complete syntax is available </0><1>here</1>."
+msgid "<0>Complete syntax is available </0><1>here</1><2>.</2>"
 msgstr ""
 
 #: src/pages/auth/RegistrationPage.tsx
@@ -60,10 +60,16 @@ msgstr "Přidat uživatele"
 msgid "Admin"
 msgstr "Správce"
 
-#: src/app/constants.ts
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Admin user name"
+msgstr ""
+
 #: src/components/content/add/CategorySelect.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "All"
 msgstr "Všechny"
 
@@ -104,11 +110,11 @@ msgstr "Opravdu chcete smazat uživatele <0>{userName}</0>?"
 msgid "Are you sure you want to delete your account? There's no turning back!"
 msgstr "Opravdu chcete smazat svůj účet? "
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark all entries of <0>{sourceLabel}</0> as read?"
 msgstr "Opravdu chcete označit všechny položky <0>{sourceLabel}</0> jako přečtené?"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark entries older than {threshold} days of <0>{sourceLabel}</0> as read?"
 msgstr "Opravdu chcete označit záznamy starší než {threshold} dnů <0>{sourceLabel}</0> jako přečtené?"
 
@@ -129,15 +135,20 @@ msgid "Back"
 msgstr "Zpět"
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
 msgid "Back to log in"
 msgstr "Zpět k přihlášení"
 
-#: src/components/KeyboardShortcutsHelp.tsx
+#: src/components/settings/DisplaySettings.tsx
-msgid "Browser extension required for Chrome"
+msgid "Blue"
 msgstr ""
 
 #: src/pages/app/AboutPage.tsx
-msgid "Browser extention"
+msgid "Browser extension"
+msgstr ""
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Browser extension required for Chrome"
 msgstr ""
 
 #: src/components/settings/DisplaySettings.tsx
@@ -147,7 +158,7 @@ msgstr ""
 #: src/components/admin/UserEdit.tsx
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
@@ -204,7 +215,7 @@ msgstr ""
 msgid "Compact"
 msgstr "Kompaktní"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
@@ -216,10 +227,19 @@ msgstr "Potvrdit"
 msgid "Confirm password"
 msgstr "Potvrďte heslo"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Confirm Password"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Cozy"
 msgstr "Útulný"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Create Admin Account"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr ""
@@ -240,7 +260,12 @@ msgstr ""
 msgid "Custom JS code that will be executed on page load"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Cyan"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 msgid "Dark"
 msgstr ""
 
@@ -273,7 +298,12 @@ msgstr ""
 msgid "Detailed"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
 msgstr "Displej"
@@ -294,6 +324,8 @@ msgstr "Přetáhněte odkaz na lištu záložek"
 #: src/components/admin/UserEdit.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
 #: src/pages/auth/PasswordRecoveryPage.tsx
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "E-mail"
@@ -376,6 +408,10 @@ msgstr ""
 msgid "Filtering expression"
 msgstr "Filtrování výrazu"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Font size"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Force fetching feeds is not yet available."
 msgstr ""
@@ -400,6 +436,7 @@ msgstr "Vygenerujte nový klíč API"
 msgid "Generated feed url"
 msgstr "Generovaná adresa URL zdroje"
 
+#. placeholder {0}: truncate(props.entry.feedName, 30)
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Go to {0}"
 msgstr ""
@@ -416,6 +453,18 @@ msgstr "Přejděte na dokumentaci API."
 msgid "Goodies"
 msgstr "Dobroty"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Grape"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Gray"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Green"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Id"
 msgstr ""
@@ -440,6 +489,18 @@ msgstr ""
 msgid "In expanded view, scrolling through entries mark them as read"
 msgstr "V rozšířeném zobrazení je procházením označíte jako přečtené"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Indigo"
+msgstr ""
+
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Initial Setup"
+msgstr ""
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Invalid password reset link. Please request a new one."
+msgstr ""
+
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Keep unread"
@@ -470,12 +531,20 @@ msgstr "Poslední obnovovací zpráva"
 msgid "Light"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Lime"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/TagDetailsPage.tsx
 msgid "Link"
 msgstr "Odkaz"
 
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Link to the documentation"
+msgstr ""
+
 #: src/hooks/useAppLoading.ts
 msgid "Loading profile..."
 msgstr "Načítání profilu..."
@@ -511,12 +580,12 @@ msgstr ""
 msgid "Manage users"
 msgstr "Spravujte uživatele"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/header/Header.tsx
 msgid "Mark all as read"
 msgstr "Označit vše jako přečtené"
 
-#: src/components/header/MarkAllAsReadButton.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Mark all entries as read"
 msgstr "Označte všechny položky jako přečtené"
 
@@ -562,6 +631,10 @@ msgstr "Jméno"
 msgid "Navigate to a subscription by entering its name"
 msgstr "Přejděte na předplatné zadáním jeho názvu"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Navigate to the next category/feed with unread entries when marking all entries as read"
+msgstr ""
+
 #: src/components/settings/DisplaySettings.tsx
 #: src/components/settings/DisplaySettings.tsx
 msgid "Never"
@@ -571,6 +644,11 @@ msgstr ""
 msgid "New password"
 msgstr "Nové heslo"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "New Password"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Newest first"
 msgstr "Nejnovější jako první"
@@ -682,6 +760,10 @@ msgstr "soubor OPML"
 msgid "OPML file is required"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Orange"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
 msgstr "Objednávka"
@@ -695,6 +777,8 @@ msgid "Parent Category"
 msgstr "Rodičovská kategorie"
 
 #: src/components/admin/UserEdit.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
@@ -702,14 +786,22 @@ msgstr "Rodičovská kategorie"
 msgid "Password"
 msgstr "Heslo"
 
+#: src/hooks/useValidationRules.ts
+msgid "Password must be at least {minimumPasswordLength} characters"
+msgstr ""
+
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "Password Recovery"
 msgstr "Obnovení hesla"
 
-#: src/components/settings/ProfileSettings.tsx
+#: src/hooks/useValidationRules.ts
 msgid "Passwords do not match"
 msgstr "Hesla se neshodují"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Pink"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Position"
@@ -719,6 +811,10 @@ msgstr "Pozice"
 msgid "Previous"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Primary color"
+msgstr ""
+
 #: src/pages/app/SettingsPage.tsx
 msgid "Profile"
 msgstr "Profil"
@@ -727,6 +823,10 @@ msgstr "Profil"
 msgid "Recover password"
 msgstr "Obnovte heslo"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Red"
+msgstr ""
+
 #: src/components/header/Header.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Refresh"
@@ -736,6 +836,11 @@ msgstr "Obnovit"
 msgid "Registrations are closed on this CommaFeed instance"
 msgstr "V této instanci CommaFeed jsou registrace uzavřeny"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Reset Password"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "REST API"
 msgstr ""
@@ -772,9 +877,13 @@ msgstr ""
 msgid "Search"
 msgstr "Hledej"
 
-#: src/components/header/Header.tsx
+#: src/components/KeyboardShortcutsHelp.tsx
-msgid "Search requires at least 3 characters"
+msgid "Select next unread feed/category"
-msgstr "Hledání vyžaduje alespoň 3 znaky"
+msgstr ""
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Select previous unread feed/category"
+msgstr ""
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Set focus on next entry without opening it"
@@ -871,8 +980,9 @@ msgstr "Vesmír"
 msgid "Star"
 msgstr "Hvězda"
 
-#: src/app/constants.ts
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "Starred"
 msgstr "S hvězdičkou"
 
@@ -915,6 +1025,10 @@ msgstr ""
 msgid "Tags"
 msgstr "Značky"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Teal"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "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."
 msgstr "Adresa URL kanálu, k jehož odběru se chcete přihlásit. "
@@ -927,6 +1041,10 @@ msgstr "Téma"
 msgid "This is your API key. It can be used for some read-only API operations and grants access to the Fever API. Use the form at the bottom of the page to generate a new API key"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "This setting can cause scrolling issues on some browsers (e.g. Safari)"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle read status of current entry"
 msgstr "Přepne stav čtení aktuálního záznamu"
@@ -971,6 +1089,10 @@ msgstr "Uživatelské jméno"
 msgid "User Name or E-mail"
 msgstr "Uživatelské jméno nebo e-mail"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Violet"
+msgstr ""
+
 #: src/components/Alert.tsx
 msgid "Warning"
 msgstr "Varování"
@@ -979,6 +1101,14 @@ msgstr "Varování"
 msgid "Website"
 msgstr "Webové stránky"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Welcome! This appears to be the first time you're running CommaFeed. Please create an administrator account to get started."
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Yellow"
+msgstr ""
+
 #: src/pages/app/FeedEntriesPage.tsx
 msgid "You don't have any subscriptions yet. Why not try adding one by clicking on the + sign at the top of the page?"
 msgstr "Zatím nemáte žádné předplatné. "
@@ -986,3 +1116,7 @@ msgstr "Zatím nemáte žádné předplatné. "
 #: src/components/header/ProfileMenu.tsx
 msgid "Your feeds have been queued for refresh."
 msgstr ""
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Your password has been changed. You can now log in with your new password."
+msgstr ""

commafeed-client/src/locales/cy/messages.po

@@ -18,7 +18,7 @@ msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitH
 msgstr ""
 
 #: src/pages/app/FeedDetailsPage.tsx
-msgid "<0>Complete syntax is available </0><1>here</1>."
+msgid "<0>Complete syntax is available </0><1>here</1><2>.</2>"
 msgstr ""
 
 #: src/pages/auth/RegistrationPage.tsx
@@ -60,10 +60,16 @@ msgstr "Ychwanegu defnyddiwr"
 msgid "Admin"
 msgstr "Gweinyddol"
 
-#: src/app/constants.ts
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Admin user name"
+msgstr ""
+
 #: src/components/content/add/CategorySelect.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "All"
 msgstr "Pawb"
 
@@ -104,11 +110,11 @@ msgstr "Ydych chi'n siŵr eich bod am ddileu defnyddiwr <0>{userName}</0> ?"
 msgid "Are you sure you want to delete your account? There's no turning back!"
 msgstr "Ydych chi'n siŵr eich bod am ddileu eich cyfrif? "
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark all entries of <0>{sourceLabel}</0> as read?"
 msgstr "Ydych chi'n siŵr eich bod am farcio bod pob cofnod o <0>{sourceLabel}</0> wedi'i ddarllen?"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark entries older than {threshold} days of <0>{sourceLabel}</0> as read?"
 msgstr "Ydych chi'n siŵr eich bod am farcio cofnodion sy'n hŷn na {trothwy} diwrnod o <0>{sourceLabel}</0> fel rhai sydd wedi'u darllen?"
 
@@ -129,15 +135,20 @@ msgid "Back"
 msgstr "Yn ôl"
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
 msgid "Back to log in"
 msgstr "Yn ôl i fewngofnodi"
 
-#: src/components/KeyboardShortcutsHelp.tsx
+#: src/components/settings/DisplaySettings.tsx
-msgid "Browser extension required for Chrome"
+msgid "Blue"
 msgstr ""
 
 #: src/pages/app/AboutPage.tsx
-msgid "Browser extention"
+msgid "Browser extension"
+msgstr ""
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Browser extension required for Chrome"
 msgstr ""
 
 #: src/components/settings/DisplaySettings.tsx
@@ -147,7 +158,7 @@ msgstr ""
 #: src/components/admin/UserEdit.tsx
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
@@ -204,7 +215,7 @@ msgstr ""
 msgid "Compact"
 msgstr "cryno"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
@@ -216,10 +227,19 @@ msgstr "Cadarnhau"
 msgid "Confirm password"
 msgstr "Cadarnhau'r cyfrinair"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Confirm Password"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Cozy"
 msgstr "clyd"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Create Admin Account"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr ""
@@ -240,7 +260,12 @@ msgstr ""
 msgid "Custom JS code that will be executed on page load"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Cyan"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 msgid "Dark"
 msgstr ""
 
@@ -273,7 +298,12 @@ msgstr "Rhag"
 msgid "Detailed"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
 msgstr "Arddangos"
@@ -294,6 +324,8 @@ msgstr "Llusgwch y ddolen i'r bar nod tudalen"
 #: src/components/admin/UserEdit.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
 #: src/pages/auth/PasswordRecoveryPage.tsx
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "E-mail"
@@ -376,6 +408,10 @@ msgstr ""
 msgid "Filtering expression"
 msgstr "Hidlo mynegiant"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Font size"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Force fetching feeds is not yet available."
 msgstr ""
@@ -400,6 +436,7 @@ msgstr "Cynhyrchu allwedd API newydd"
 msgid "Generated feed url"
 msgstr "url porthiant a gynhyrchir"
 
+#. placeholder {0}: truncate(props.entry.feedName, 30)
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Go to {0}"
 msgstr ""
@@ -416,6 +453,18 @@ msgstr "Ewch i'r ddogfennaeth API."
 msgid "Goodies"
 msgstr "nwyddau"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Grape"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Gray"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Green"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Id"
 msgstr ""
@@ -440,6 +489,18 @@ msgstr "Mewnforio"
 msgid "In expanded view, scrolling through entries mark them as read"
 msgstr "Mewn gwedd estynedig, mae sgrolio trwy gofnodion yn nodi eu bod wedi'u darllen"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Indigo"
+msgstr ""
+
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Initial Setup"
+msgstr ""
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Invalid password reset link. Please request a new one."
+msgstr ""
+
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Keep unread"
@@ -470,12 +531,20 @@ msgstr "Neges adnewyddu ddiwethaf"
 msgid "Light"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Lime"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/TagDetailsPage.tsx
 msgid "Link"
 msgstr "Cyswllt"
 
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Link to the documentation"
+msgstr ""
+
 #: src/hooks/useAppLoading.ts
 msgid "Loading profile..."
 msgstr "Wrthi'n llwytho proffil..."
@@ -511,12 +580,12 @@ msgstr ""
 msgid "Manage users"
 msgstr "Rheoli defnyddwyr"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/header/Header.tsx
 msgid "Mark all as read"
 msgstr "Marciwch y cyfan wedi'i ddarllen"
 
-#: src/components/header/MarkAllAsReadButton.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Mark all entries as read"
 msgstr "Marciwch bob cofnod wedi'i ddarllen"
 
@@ -562,6 +631,10 @@ msgstr "Enw"
 msgid "Navigate to a subscription by entering its name"
 msgstr "Llywiwch i danysgrifiad trwy nodi ei enw"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Navigate to the next category/feed with unread entries when marking all entries as read"
+msgstr ""
+
 #: src/components/settings/DisplaySettings.tsx
 #: src/components/settings/DisplaySettings.tsx
 msgid "Never"
@@ -571,6 +644,11 @@ msgstr ""
 msgid "New password"
 msgstr "Cyfrinair newydd"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "New Password"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Newest first"
 msgstr "Y diweddaraf yn gyntaf"
@@ -682,6 +760,10 @@ msgstr "ffeil OPML"
 msgid "OPML file is required"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Orange"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
 msgstr "gorchymyn"
@@ -695,6 +777,8 @@ msgid "Parent Category"
 msgstr "Categori Rhiant"
 
 #: src/components/admin/UserEdit.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
@@ -702,14 +786,22 @@ msgstr "Categori Rhiant"
 msgid "Password"
 msgstr "cyfrinair"
 
+#: src/hooks/useValidationRules.ts
+msgid "Password must be at least {minimumPasswordLength} characters"
+msgstr ""
+
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "Password Recovery"
 msgstr "Adfer Cyfrinair"
 
-#: src/components/settings/ProfileSettings.tsx
+#: src/hooks/useValidationRules.ts
 msgid "Passwords do not match"
 msgstr "Nid yw cyfrineiriau yn cyfateb"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Pink"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Position"
@@ -719,6 +811,10 @@ msgstr "Swydd"
 msgid "Previous"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Primary color"
+msgstr ""
+
 #: src/pages/app/SettingsPage.tsx
 msgid "Profile"
 msgstr "Proffil"
@@ -727,6 +823,10 @@ msgstr "Proffil"
 msgid "Recover password"
 msgstr "Adfer cyfrinair"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Red"
+msgstr ""
+
 #: src/components/header/Header.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Refresh"
@@ -736,6 +836,11 @@ msgstr "Adnewyddu"
 msgid "Registrations are closed on this CommaFeed instance"
 msgstr "Mae cofrestriadau ar gau ar yr achos CommaFeed hwn"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Reset Password"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "REST API"
 msgstr ""
@@ -772,9 +877,13 @@ msgstr ""
 msgid "Search"
 msgstr "Chwilio"
 
-#: src/components/header/Header.tsx
+#: src/components/KeyboardShortcutsHelp.tsx
-msgid "Search requires at least 3 characters"
+msgid "Select next unread feed/category"
-msgstr "Mae angen o leiaf 3 nod ar gyfer chwilio"
+msgstr ""
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Select previous unread feed/category"
+msgstr ""
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Set focus on next entry without opening it"
@@ -871,8 +980,9 @@ msgstr "Gofod"
 msgid "Star"
 msgstr "seren"
 
-#: src/app/constants.ts
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "Starred"
 msgstr "serennog"
 
@@ -915,6 +1025,10 @@ msgstr ""
 msgid "Tags"
 msgstr "Tagiau"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Teal"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "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."
 msgstr "Y URL ar gyfer y porthwr rydych chi am danysgrifio iddo. "
@@ -927,6 +1041,10 @@ msgstr "Thema"
 msgid "This is your API key. It can be used for some read-only API operations and grants access to the Fever API. Use the form at the bottom of the page to generate a new API key"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "This setting can cause scrolling issues on some browsers (e.g. Safari)"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle read status of current entry"
 msgstr "Toglo statws darllen y cofnod cyfredol"
@@ -971,6 +1089,10 @@ msgstr "Enw defnyddiwr"
 msgid "User Name or E-mail"
 msgstr "Enw Defnyddiwr neu E-bost"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Violet"
+msgstr ""
+
 #: src/components/Alert.tsx
 msgid "Warning"
 msgstr "Rhybudd"
@@ -979,6 +1101,14 @@ msgstr "Rhybudd"
 msgid "Website"
 msgstr "Gwefan"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Welcome! This appears to be the first time you're running CommaFeed. Please create an administrator account to get started."
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Yellow"
+msgstr ""
+
 #: src/pages/app/FeedEntriesPage.tsx
 msgid "You don't have any subscriptions yet. Why not try adding one by clicking on the + sign at the top of the page?"
 msgstr "Nid oes gennych unrhyw danysgrifiadau eto. "
@@ -986,3 +1116,7 @@ msgstr "Nid oes gennych unrhyw danysgrifiadau eto. "
 #: src/components/header/ProfileMenu.tsx
 msgid "Your feeds have been queued for refresh."
 msgstr ""
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Your password has been changed. You can now log in with your new password."
+msgstr ""

commafeed-client/src/locales/da/messages.po

@@ -18,7 +18,7 @@ msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitH
 msgstr ""
 
 #: src/pages/app/FeedDetailsPage.tsx
-msgid "<0>Complete syntax is available </0><1>here</1>."
+msgid "<0>Complete syntax is available </0><1>here</1><2>.</2>"
 msgstr ""
 
 #: src/pages/auth/RegistrationPage.tsx
@@ -60,10 +60,16 @@ msgstr "Tilføj bruger"
 msgid "Admin"
 msgstr ""
 
-#: src/app/constants.ts
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Admin user name"
+msgstr ""
+
 #: src/components/content/add/CategorySelect.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "All"
 msgstr "Alle"
 
@@ -104,11 +110,11 @@ msgstr "Er du sikker på, at du vil slette bruger <0>{brugernavn}</0>?"
 msgid "Are you sure you want to delete your account? There's no turning back!"
 msgstr "Er du sikker på, at du vil slette din konto? "
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark all entries of <0>{sourceLabel}</0> as read?"
 msgstr "Er du sikker på, at du vil markere alle poster i <0>{sourceLabel}</0> som læst?"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark entries older than {threshold} days of <0>{sourceLabel}</0> as read?"
 msgstr "Er du sikker på, at du vil markere poster, der er ældre end {threshold} dage af <0>{sourceLabel}</0> som læst?"
 
@@ -129,15 +135,20 @@ msgid "Back"
 msgstr "Tilbage"
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
 msgid "Back to log in"
 msgstr "Tilbage for at logge ind"
 
-#: src/components/KeyboardShortcutsHelp.tsx
+#: src/components/settings/DisplaySettings.tsx
-msgid "Browser extension required for Chrome"
+msgid "Blue"
 msgstr ""
 
 #: src/pages/app/AboutPage.tsx
-msgid "Browser extention"
+msgid "Browser extension"
+msgstr ""
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Browser extension required for Chrome"
 msgstr ""
 
 #: src/components/settings/DisplaySettings.tsx
@@ -147,7 +158,7 @@ msgstr ""
 #: src/components/admin/UserEdit.tsx
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
@@ -204,7 +215,7 @@ msgstr ""
 msgid "Compact"
 msgstr "Kompakt"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
@@ -216,10 +227,19 @@ msgstr "Bekræft"
 msgid "Confirm password"
 msgstr "Bekræft adgangskode"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Confirm Password"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Cozy"
 msgstr "Hyggeligt"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Create Admin Account"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr ""
@@ -240,7 +260,12 @@ msgstr ""
 msgid "Custom JS code that will be executed on page load"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Cyan"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 msgid "Dark"
 msgstr ""
 
@@ -273,7 +298,12 @@ msgstr ""
 msgid "Detailed"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
 msgstr "Skærm"
@@ -294,6 +324,8 @@ msgstr "Træk linket til bogmærkelinjen"
 #: src/components/admin/UserEdit.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
 #: src/pages/auth/PasswordRecoveryPage.tsx
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "E-mail"
@@ -376,6 +408,10 @@ msgstr ""
 msgid "Filtering expression"
 msgstr "Filtrerende udtryk"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Font size"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Force fetching feeds is not yet available."
 msgstr ""
@@ -400,6 +436,7 @@ msgstr "Generer ny API-nøgle"
 msgid "Generated feed url"
 msgstr "Genereret feed-url"
 
+#. placeholder {0}: truncate(props.entry.feedName, 30)
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Go to {0}"
 msgstr ""
@@ -416,6 +453,18 @@ msgstr "Gå til API-dokumentationen."
 msgid "Goodies"
 msgstr "Godbidder"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Grape"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Gray"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Green"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Id"
 msgstr ""
@@ -440,6 +489,18 @@ msgstr ""
 msgid "In expanded view, scrolling through entries mark them as read"
 msgstr "I udvidet visning markerer du dem som læst, når du ruller gennem poster"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Indigo"
+msgstr ""
+
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Initial Setup"
+msgstr ""
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Invalid password reset link. Please request a new one."
+msgstr ""
+
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Keep unread"
@@ -470,12 +531,20 @@ msgstr "Sidste opdateringsmeddelelse"
 msgid "Light"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Lime"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/TagDetailsPage.tsx
 msgid "Link"
 msgstr ""
 
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Link to the documentation"
+msgstr ""
+
 #: src/hooks/useAppLoading.ts
 msgid "Loading profile..."
 msgstr "Indlæser profil..."
@@ -511,12 +580,12 @@ msgstr ""
 msgid "Manage users"
 msgstr "Administrer brugere"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/header/Header.tsx
 msgid "Mark all as read"
 msgstr "Marker alle som læst"
 
-#: src/components/header/MarkAllAsReadButton.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Mark all entries as read"
 msgstr "Marker alle poster som læst"
 
@@ -562,6 +631,10 @@ msgstr "Navn"
 msgid "Navigate to a subscription by entering its name"
 msgstr "Naviger til et abonnement ved at indtaste dets navn"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Navigate to the next category/feed with unread entries when marking all entries as read"
+msgstr ""
+
 #: src/components/settings/DisplaySettings.tsx
 #: src/components/settings/DisplaySettings.tsx
 msgid "Never"
@@ -571,6 +644,11 @@ msgstr ""
 msgid "New password"
 msgstr "Ny adgangskode"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "New Password"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Newest first"
 msgstr "Nyeste først"
@@ -682,6 +760,10 @@ msgstr "OPML fil"
 msgid "OPML file is required"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Orange"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
 msgstr "Bestilling"
@@ -695,6 +777,8 @@ msgid "Parent Category"
 msgstr "Forældrekategori"
 
 #: src/components/admin/UserEdit.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
@@ -702,14 +786,22 @@ msgstr "Forældrekategori"
 msgid "Password"
 msgstr "Adgangskode"
 
+#: src/hooks/useValidationRules.ts
+msgid "Password must be at least {minimumPasswordLength} characters"
+msgstr ""
+
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "Password Recovery"
 msgstr "Gendannelse af adgangskode"
 
-#: src/components/settings/ProfileSettings.tsx
+#: src/hooks/useValidationRules.ts
 msgid "Passwords do not match"
 msgstr "Adgangskoder stemmer ikke overens"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Pink"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Position"
@@ -719,6 +811,10 @@ msgstr ""
 msgid "Previous"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Primary color"
+msgstr ""
+
 #: src/pages/app/SettingsPage.tsx
 msgid "Profile"
 msgstr "Profil"
@@ -727,6 +823,10 @@ msgstr "Profil"
 msgid "Recover password"
 msgstr "Gendan adgangskode"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Red"
+msgstr ""
+
 #: src/components/header/Header.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Refresh"
@@ -736,6 +836,11 @@ msgstr "Opdater"
 msgid "Registrations are closed on this CommaFeed instance"
 msgstr "Registreringer er lukket på denne CommaFeed-instans"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Reset Password"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "REST API"
 msgstr ""
@@ -772,9 +877,13 @@ msgstr ""
 msgid "Search"
 msgstr "Søg"
 
-#: src/components/header/Header.tsx
+#: src/components/KeyboardShortcutsHelp.tsx
-msgid "Search requires at least 3 characters"
+msgid "Select next unread feed/category"
-msgstr "Søgning kræver mindst 3 tegn"
+msgstr ""
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Select previous unread feed/category"
+msgstr ""
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Set focus on next entry without opening it"
@@ -871,8 +980,9 @@ msgstr "Rum"
 msgid "Star"
 msgstr "Stjerne"
 
-#: src/app/constants.ts
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "Starred"
 msgstr "Medvirkende"
 
@@ -915,6 +1025,10 @@ msgstr ""
 msgid "Tags"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Teal"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "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."
 msgstr "URL'en til det feed, du vil abonnere på. "
@@ -927,6 +1041,10 @@ msgstr "Tema"
 msgid "This is your API key. It can be used for some read-only API operations and grants access to the Fever API. Use the form at the bottom of the page to generate a new API key"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "This setting can cause scrolling issues on some browsers (e.g. Safari)"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle read status of current entry"
 msgstr "Skift læsestatus for den aktuelle post"
@@ -971,6 +1089,10 @@ msgstr "Brugernavn"
 msgid "User Name or E-mail"
 msgstr "Brugernavn eller e-mail"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Violet"
+msgstr ""
+
 #: src/components/Alert.tsx
 msgid "Warning"
 msgstr "Advarsel"
@@ -979,6 +1101,14 @@ msgstr "Advarsel"
 msgid "Website"
 msgstr "Hjemmeside"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Welcome! This appears to be the first time you're running CommaFeed. Please create an administrator account to get started."
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Yellow"
+msgstr ""
+
 #: src/pages/app/FeedEntriesPage.tsx
 msgid "You don't have any subscriptions yet. Why not try adding one by clicking on the + sign at the top of the page?"
 msgstr "Du har ingen abonnementer endnu. "
@@ -986,3 +1116,7 @@ msgstr "Du har ingen abonnementer endnu. "
 #: src/components/header/ProfileMenu.tsx
 msgid "Your feeds have been queued for refresh."
 msgstr ""
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Your password has been changed. You can now log in with your new password."
+msgstr ""

commafeed-client/src/locales/de/messages.po

@@ -18,8 +18,8 @@ msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitH
 msgstr "<0>CommaFeed ist ein Open Source Projekt. Der Quellcode wird auf auf </0><1>GitHub</1> gehostet."
 
 #: src/pages/app/FeedDetailsPage.tsx
-msgid "<0>Complete syntax is available </0><1>here</1>."
+msgid "<0>Complete syntax is available </0><1>here</1><2>.</2>"
-msgstr "<0>Die vollständige Syntax ist </0><1>hier</1> verfügbar."
+msgstr "<0>Die vollständige Syntax ist </0><1>hier</1> verfügbar<2>.</2>"
 
 #: src/pages/auth/RegistrationPage.tsx
 msgid "<0>Have an account?</0><1>Log in!</1>"
@@ -60,10 +60,16 @@ msgstr "Benutzer hinzufügen"
 msgid "Admin"
 msgstr "Verwaltung"
 
-#: src/app/constants.ts
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Admin user name"
+msgstr ""
+
 #: src/components/content/add/CategorySelect.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "All"
 msgstr "Alle"
 
@@ -104,11 +110,11 @@ msgstr "Sind Sie sicher, dass Sie Benutzer <0>{userName}</0> löschen möchten?"
 msgid "Are you sure you want to delete your account? There's no turning back!"
 msgstr "Sind Sie sicher, dass Sie Ihr Konto löschen möchten?"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark all entries of <0>{sourceLabel}</0> as read?"
 msgstr "Sind Sie sicher, dass Sie alle Einträge von <0>{sourceLabel}</0> als gelesen markieren möchten?"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark entries older than {threshold} days of <0>{sourceLabel}</0> as read?"
 msgstr "Sind Sie sicher, dass Sie Einträge, die älter als {threshold} Tage von <0>{sourceLabel}</0> sind, als gelesen markieren möchten?"
 
@@ -129,17 +135,22 @@ msgid "Back"
 msgstr "Zurück"
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
 msgid "Back to log in"
 msgstr "Zurück zum Login"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Blue"
+msgstr ""
+
+#: src/pages/app/AboutPage.tsx
+msgid "Browser extension"
+msgstr "Browser-Erweiterung"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Browser extension required for Chrome"
 msgstr "Browser-Erweiterung für Chrome benötigt"
 
-#: src/pages/app/AboutPage.tsx
-msgid "Browser extention"
-msgstr "Browser-Erweiterung"
-
 #: src/components/settings/DisplaySettings.tsx
 msgid "Browser tab"
 msgstr ""
@@ -147,7 +158,7 @@ msgstr ""
 #: src/components/admin/UserEdit.tsx
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
@@ -204,7 +215,7 @@ msgstr "CommaFeed version {version} ({revision})."
 msgid "Compact"
 msgstr "Kompakt"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
@@ -216,10 +227,19 @@ msgstr "Bestätigen"
 msgid "Confirm password"
 msgstr "Passwort bestätigen"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Confirm Password"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Cozy"
 msgstr "Gemütlich"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Create Admin Account"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr "Strg"
@@ -240,7 +260,12 @@ msgstr "Eigene CSS Regeln die angewandt werden"
 msgid "Custom JS code that will be executed on page load"
 msgstr "Einer JS Code der beim Laden der Seite ausgeführt wird"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Cyan"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 msgid "Dark"
 msgstr "Dunkel"
 
@@ -273,7 +298,12 @@ msgstr "Beschr"
 msgid "Detailed"
 msgstr "Detailliert"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
 msgstr "Anzeige"
@@ -294,6 +324,8 @@ msgstr "Link in Lesezeichenleiste ziehen"
 #: src/components/admin/UserEdit.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
 #: src/pages/auth/PasswordRecoveryPage.tsx
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "E-mail"
@@ -376,6 +408,10 @@ msgstr ""
 msgid "Filtering expression"
 msgstr "Filterausdruck"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Font size"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Force fetching feeds is not yet available."
 msgstr ""
@@ -400,6 +436,7 @@ msgstr "Neuen API-Schlüssel generieren"
 msgid "Generated feed url"
 msgstr "Generierte Feed-URL"
 
+#. placeholder {0}: truncate(props.entry.feedName, 30)
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Go to {0}"
 msgstr "Gehe zu {0}"
@@ -416,6 +453,18 @@ msgstr "Gehen Sie zur API-Dokumentation."
 msgid "Goodies"
 msgstr "Goodies"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Grape"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Gray"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Green"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Id"
 msgstr ""
@@ -440,6 +489,18 @@ msgstr "Importieren"
 msgid "In expanded view, scrolling through entries mark them as read"
 msgstr "In der erweiterten Ansicht werden Einträge beim Scrollen als gelesen markiert"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Indigo"
+msgstr ""
+
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Initial Setup"
+msgstr ""
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Invalid password reset link. Please request a new one."
+msgstr ""
+
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Keep unread"
@@ -470,12 +531,20 @@ msgstr "Letzte Aktualisierungsmeldung"
 msgid "Light"
 msgstr "Hell"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Lime"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/TagDetailsPage.tsx
 msgid "Link"
 msgstr "Verbindung"
 
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Link to the documentation"
+msgstr ""
+
 #: src/hooks/useAppLoading.ts
 msgid "Loading profile..."
 msgstr "Lade Profil..."
@@ -511,12 +580,12 @@ msgstr "Langer Tastendruck"
 msgid "Manage users"
 msgstr "Benutzer verwalten"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/header/Header.tsx
 msgid "Mark all as read"
 msgstr "Alle als gelesen markieren"
 
-#: src/components/header/MarkAllAsReadButton.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Mark all entries as read"
 msgstr "Alle Einträge als gelesen markieren"
 
@@ -562,6 +631,10 @@ msgstr ""
 msgid "Navigate to a subscription by entering its name"
 msgstr "Navigieren Sie zu einem Abonnement, indem Sie seinen Namen eingeben"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Navigate to the next category/feed with unread entries when marking all entries as read"
+msgstr ""
+
 #: src/components/settings/DisplaySettings.tsx
 #: src/components/settings/DisplaySettings.tsx
 msgid "Never"
@@ -571,6 +644,11 @@ msgstr "Niemals"
 msgid "New password"
 msgstr "Neues Passwort"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "New Password"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Newest first"
 msgstr "Neueste zuerst"
@@ -682,6 +760,10 @@ msgstr "OPML-Datei"
 msgid "OPML file is required"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Orange"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
 msgstr "Bestellung"
@@ -695,6 +777,8 @@ msgid "Parent Category"
 msgstr "Übergeordnete Kategorie"
 
 #: src/components/admin/UserEdit.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
@@ -702,14 +786,22 @@ msgstr "Übergeordnete Kategorie"
 msgid "Password"
 msgstr "Passwort"
 
+#: src/hooks/useValidationRules.ts
+msgid "Password must be at least {minimumPasswordLength} characters"
+msgstr ""
+
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "Password Recovery"
 msgstr "Passwortwiederherstellung"
 
-#: src/components/settings/ProfileSettings.tsx
+#: src/hooks/useValidationRules.ts
 msgid "Passwords do not match"
 msgstr "Passwörter stimmen nicht überein"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Pink"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Position"
@@ -719,6 +811,10 @@ msgstr "Position"
 msgid "Previous"
 msgstr "Vorheriges"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Primary color"
+msgstr ""
+
 #: src/pages/app/SettingsPage.tsx
 msgid "Profile"
 msgstr "Profil"
@@ -727,6 +823,10 @@ msgstr "Profil"
 msgid "Recover password"
 msgstr "Kennwort wiederherstellen"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Red"
+msgstr ""
+
 #: src/components/header/Header.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Refresh"
@@ -736,6 +836,11 @@ msgstr "Aktualisieren"
 msgid "Registrations are closed on this CommaFeed instance"
 msgstr "Registrierungen sind für diese CommaFeed-Instanz geschlossen"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Reset Password"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "REST API"
 msgstr "REST-API"
@@ -772,9 +877,13 @@ msgstr "Scrollen"
 msgid "Search"
 msgstr "Suche"
 
-#: src/components/header/Header.tsx
+#: src/components/KeyboardShortcutsHelp.tsx
-msgid "Search requires at least 3 characters"
+msgid "Select next unread feed/category"
-msgstr "Suche erfordert mindestens 3 Zeichen"
+msgstr ""
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Select previous unread feed/category"
+msgstr ""
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Set focus on next entry without opening it"
@@ -871,8 +980,9 @@ msgstr "Raum"
 msgid "Star"
 msgstr "Stern"
 
-#: src/app/constants.ts
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "Starred"
 msgstr "Markiert"
 
@@ -915,6 +1025,10 @@ msgstr ""
 msgid "Tags"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Teal"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "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."
 msgstr "Die URL für den Feed, den Sie abonnieren möchten. "
@@ -927,6 +1041,10 @@ msgstr "Thema"
 msgid "This is your API key. It can be used for some read-only API operations and grants access to the Fever API. Use the form at the bottom of the page to generate a new API key"
 msgstr "Dies ist Ihr API-Schlüssel. Er kann für einige schreibgeschützte API-Vorgänge verwendet werden und ermöglicht den Zugriff auf die Fever-API. Verwenden Sie das Formular unten auf der Seite, um einen neuen API-Schlüssel zu generieren"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "This setting can cause scrolling issues on some browsers (e.g. Safari)"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle read status of current entry"
 msgstr "Lesestatus des aktuellen Eintrags umschalten"
@@ -971,6 +1089,10 @@ msgstr "Benutzername"
 msgid "User Name or E-mail"
 msgstr "Benutzername oder E-Mail"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Violet"
+msgstr ""
+
 #: src/components/Alert.tsx
 msgid "Warning"
 msgstr "Warnung"
@@ -979,6 +1101,14 @@ msgstr "Warnung"
 msgid "Website"
 msgstr "Webseite"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Welcome! This appears to be the first time you're running CommaFeed. Please create an administrator account to get started."
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Yellow"
+msgstr ""
+
 #: src/pages/app/FeedEntriesPage.tsx
 msgid "You don't have any subscriptions yet. Why not try adding one by clicking on the + sign at the top of the page?"
 msgstr "Sie haben noch keine Abonnements."
@@ -986,3 +1116,7 @@ msgstr "Sie haben noch keine Abonnements."
 #: src/components/header/ProfileMenu.tsx
 msgid "Your feeds have been queued for refresh."
 msgstr "Ihr Feed wurde für die Aktualisierung eingereiht."
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Your password has been changed. You can now log in with your new password."
+msgstr ""

commafeed-client/src/locales/en/messages.po

@@ -18,8 +18,8 @@ msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitH
 msgstr "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitHub</1>."
 
 #: src/pages/app/FeedDetailsPage.tsx
-msgid "<0>Complete syntax is available </0><1>here</1>."
+msgid "<0>Complete syntax is available </0><1>here</1><2>.</2>"
-msgstr "<0>Complete syntax is available </0><1>here</1>."
+msgstr "<0>Complete syntax is available </0><1>here</1><2>.</2>"
 
 #: src/pages/auth/RegistrationPage.tsx
 msgid "<0>Have an account?</0><1>Log in!</1>"
@@ -60,10 +60,16 @@ msgstr "Add user"
 msgid "Admin"
 msgstr "Admin"
 
-#: src/app/constants.ts
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Admin user name"
+msgstr "Admin user name"
+
 #: src/components/content/add/CategorySelect.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "All"
 msgstr "All"
 
@@ -104,11 +110,11 @@ msgstr "Are you sure you want to delete user <0>{userName}</0> ?"
 msgid "Are you sure you want to delete your account? There's no turning back!"
 msgstr "Are you sure you want to delete your account? There's no turning back!"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark all entries of <0>{sourceLabel}</0> as read?"
 msgstr "Are you sure you want to mark all entries of <0>{sourceLabel}</0> as read?"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark entries older than {threshold} days of <0>{sourceLabel}</0> as read?"
 msgstr "Are you sure you want to mark entries older than {threshold} days of <0>{sourceLabel}</0> as read?"
 
@@ -129,17 +135,22 @@ msgid "Back"
 msgstr "Back"
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
 msgid "Back to log in"
 msgstr "Back to log in"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Blue"
+msgstr "Blue"
+
+#: src/pages/app/AboutPage.tsx
+msgid "Browser extension"
+msgstr "Browser extension"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Browser extension required for Chrome"
 msgstr "Browser extension required for Chrome"
 
-#: src/pages/app/AboutPage.tsx
-msgid "Browser extention"
-msgstr "Browser extention"
-
 #: src/components/settings/DisplaySettings.tsx
 msgid "Browser tab"
 msgstr "Browser tab"
@@ -147,7 +158,7 @@ msgstr "Browser tab"
 #: src/components/admin/UserEdit.tsx
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
@@ -204,7 +215,7 @@ msgstr "CommaFeed version {version} ({revision})."
 msgid "Compact"
 msgstr "Compact"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
@@ -216,10 +227,19 @@ msgstr "Confirm"
 msgid "Confirm password"
 msgstr "Confirm password"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Confirm Password"
+msgstr "Confirm Password"
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Cozy"
 msgstr "Cozy"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Create Admin Account"
+msgstr "Create Admin Account"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr "Ctrl"
@@ -240,7 +260,12 @@ msgstr "Custom CSS rules that will be applied"
 msgid "Custom JS code that will be executed on page load"
 msgstr "Custom JS code that will be executed on page load"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Cyan"
+msgstr "Cyan"
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 msgid "Dark"
 msgstr "Dark"
 
@@ -273,7 +298,12 @@ msgstr "Desc"
 msgid "Detailed"
 msgstr "Detailed"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr "Disable \"Pull to refresh\" browser behavior"
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
 msgstr "Display"
@@ -294,6 +324,8 @@ msgstr "Drag link to bookmark bar"
 #: src/components/admin/UserEdit.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
 #: src/pages/auth/PasswordRecoveryPage.tsx
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "E-mail"
@@ -376,6 +408,10 @@ msgstr "Fever API URL"
 msgid "Filtering expression"
 msgstr "Filtering expression"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Font size"
+msgstr "Font size"
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Force fetching feeds is not yet available."
 msgstr "Force fetching feeds is not yet available."
@@ -400,6 +436,7 @@ msgstr "Generate new API key"
 msgid "Generated feed url"
 msgstr "Generated feed url"
 
+#. placeholder {0}: truncate(props.entry.feedName, 30)
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Go to {0}"
 msgstr "Go to {0}"
@@ -416,6 +453,18 @@ msgstr "Go to the API documentation."
 msgid "Goodies"
 msgstr "Goodies"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Grape"
+msgstr "Grape"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Gray"
+msgstr "Gray"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Green"
+msgstr "Green"
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Id"
 msgstr "Id"
@@ -440,6 +489,18 @@ msgstr "Import"
 msgid "In expanded view, scrolling through entries mark them as read"
 msgstr "In expanded view, scrolling through entries mark them as read"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Indigo"
+msgstr "Indigo"
+
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Initial Setup"
+msgstr "Initial Setup"
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Invalid password reset link. Please request a new one."
+msgstr "Invalid password reset link. Please request a new one."
+
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Keep unread"
@@ -470,12 +531,20 @@ msgstr "Last refresh message"
 msgid "Light"
 msgstr "Light"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Lime"
+msgstr "Lime"
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/TagDetailsPage.tsx
 msgid "Link"
 msgstr "Link"
 
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Link to the documentation"
+msgstr "Link to the documentation"
+
 #: src/hooks/useAppLoading.ts
 msgid "Loading profile..."
 msgstr "Loading profile..."
@@ -511,12 +580,12 @@ msgstr "Long press"
 msgid "Manage users"
 msgstr "Manage users"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/header/Header.tsx
 msgid "Mark all as read"
 msgstr "Mark all as read"
 
-#: src/components/header/MarkAllAsReadButton.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Mark all entries as read"
 msgstr "Mark all entries as read"
 
@@ -562,6 +631,10 @@ msgstr "Name"
 msgid "Navigate to a subscription by entering its name"
 msgstr "Navigate to a subscription by entering its name"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Navigate to the next category/feed with unread entries when marking all entries as read"
+msgstr "Navigate to the next category/feed with unread entries when marking all entries as read"
+
 #: src/components/settings/DisplaySettings.tsx
 #: src/components/settings/DisplaySettings.tsx
 msgid "Never"
@@ -571,6 +644,11 @@ msgstr "Never"
 msgid "New password"
 msgstr "New password"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "New Password"
+msgstr "New Password"
+
 #: src/pages/app/AboutPage.tsx
 msgid "Newest first"
 msgstr "Newest first"
@@ -682,6 +760,10 @@ msgstr "OPML file"
 msgid "OPML file is required"
 msgstr "OPML file is required"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Orange"
+msgstr "Orange"
+
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
 msgstr "Order"
@@ -695,6 +777,8 @@ msgid "Parent Category"
 msgstr "Parent Category"
 
 #: src/components/admin/UserEdit.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
@@ -702,14 +786,22 @@ msgstr "Parent Category"
 msgid "Password"
 msgstr "Password"
 
+#: src/hooks/useValidationRules.ts
+msgid "Password must be at least {minimumPasswordLength} characters"
+msgstr "Password must be at least {minimumPasswordLength} characters"
+
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "Password Recovery"
 msgstr "Password Recovery"
 
-#: src/components/settings/ProfileSettings.tsx
+#: src/hooks/useValidationRules.ts
 msgid "Passwords do not match"
 msgstr "Passwords do not match"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Pink"
+msgstr "Pink"
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Position"
@@ -719,6 +811,10 @@ msgstr "Position"
 msgid "Previous"
 msgstr "Previous"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Primary color"
+msgstr "Primary color"
+
 #: src/pages/app/SettingsPage.tsx
 msgid "Profile"
 msgstr "Profile"
@@ -727,6 +823,10 @@ msgstr "Profile"
 msgid "Recover password"
 msgstr "Recover password"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Red"
+msgstr "Red"
+
 #: src/components/header/Header.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Refresh"
@@ -736,6 +836,11 @@ msgstr "Refresh"
 msgid "Registrations are closed on this CommaFeed instance"
 msgstr "Registrations are closed on this CommaFeed instance"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Reset Password"
+msgstr "Reset Password"
+
 #: src/pages/app/AboutPage.tsx
 msgid "REST API"
 msgstr "REST API"
@@ -772,9 +877,13 @@ msgstr "Scrolling"
 msgid "Search"
 msgstr "Search"
 
-#: src/components/header/Header.tsx
+#: src/components/KeyboardShortcutsHelp.tsx
-msgid "Search requires at least 3 characters"
+msgid "Select next unread feed/category"
-msgstr "Search requires at least 3 characters"
+msgstr "Select next unread feed/category"
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Select previous unread feed/category"
+msgstr "Select previous unread feed/category"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Set focus on next entry without opening it"
@@ -871,8 +980,9 @@ msgstr "Space"
 msgid "Star"
 msgstr "Star"
 
-#: src/app/constants.ts
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "Starred"
 msgstr "Starred"
 
@@ -915,6 +1025,10 @@ msgstr "System"
 msgid "Tags"
 msgstr "Tags"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Teal"
+msgstr "Teal"
+
 #: src/components/content/add/Subscribe.tsx
 msgid "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."
 msgstr "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."
@@ -927,6 +1041,10 @@ msgstr "Theme"
 msgid "This is your API key. It can be used for some read-only API operations and grants access to the Fever API. Use the form at the bottom of the page to generate a new API key"
 msgstr "This is your API key. It can be used for some read-only API operations and grants access to the Fever API. Use the form at the bottom of the page to generate a new API key"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "This setting can cause scrolling issues on some browsers (e.g. Safari)"
+msgstr "This setting can cause scrolling issues on some browsers (e.g. Safari)"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle read status of current entry"
 msgstr "Toggle read status of current entry"
@@ -971,6 +1089,10 @@ msgstr "User name"
 msgid "User Name or E-mail"
 msgstr "User Name or E-mail"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Violet"
+msgstr "Violet"
+
 #: src/components/Alert.tsx
 msgid "Warning"
 msgstr "Warning"
@@ -979,6 +1101,14 @@ msgstr "Warning"
 msgid "Website"
 msgstr "Website"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Welcome! This appears to be the first time you're running CommaFeed. Please create an administrator account to get started."
+msgstr "Welcome! This appears to be the first time you're running CommaFeed. Please create an administrator account to get started."
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Yellow"
+msgstr "Yellow"
+
 #: src/pages/app/FeedEntriesPage.tsx
 msgid "You don't have any subscriptions yet. Why not try adding one by clicking on the + sign at the top of the page?"
 msgstr "You don't have any subscriptions yet. Why not try adding one by clicking on the + sign at the top of the page?"
@@ -986,3 +1116,7 @@ msgstr "You don't have any subscriptions yet. Why not try adding one by clicking
 #: src/components/header/ProfileMenu.tsx
 msgid "Your feeds have been queued for refresh."
 msgstr "Your feeds have been queued for refresh."
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Your password has been changed. You can now log in with your new password."
+msgstr "Your password has been changed. You can now log in with your new password."

commafeed-client/src/locales/es/messages.po

@@ -19,8 +19,8 @@ msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitH
 msgstr "<0>CommaFeed es un proyecto de código abierto. El código fuente está hospedado en </0><1>GitHub</1>."
 
 #: src/pages/app/FeedDetailsPage.tsx
-msgid "<0>Complete syntax is available </0><1>here</1>."
+msgid "<0>Complete syntax is available </0><1>here</1><2>.</2>"
-msgstr "<0>La sintaxis completa está disponible </0><1>aquí</1>."
+msgstr "<0>La sintaxis completa está disponible </0><1>aquí</1><2>.</2>"
 
 #: src/pages/auth/RegistrationPage.tsx
 msgid "<0>Have an account?</0><1>Log in!</1>"
@@ -61,10 +61,16 @@ msgstr "Añadir usuario"
 msgid "Admin"
 msgstr "Administrador"
 
-#: src/app/constants.ts
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Admin user name"
+msgstr ""
+
 #: src/components/content/add/CategorySelect.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "All"
 msgstr "Todo"
 
@@ -105,11 +111,11 @@ msgstr "¿Estás seguro de que deseas eliminar el usuario <0>{userName}</0> ?"
 msgid "Are you sure you want to delete your account? There's no turning back!"
 msgstr "¿Estás seguro de que quieres eliminar tu cuenta? ¡No hay vuelta atrás!"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark all entries of <0>{sourceLabel}</0> as read?"
 msgstr "¿Estás seguro de que deseas marcar todas las entradas de <0>{sourceLabel}</0> como leídas?"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark entries older than {threshold} days of <0>{sourceLabel}</0> as read?"
 msgstr "¿Estás seguro de que deseas marcar las entradas anteriores a {threshold} días de <0>{sourceLabel}</0> como leídas?"
 
@@ -130,17 +136,22 @@ msgid "Back"
 msgstr "Atrás"
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
 msgid "Back to log in"
 msgstr "Volver a iniciar sesión"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Blue"
+msgstr ""
+
+#: src/pages/app/AboutPage.tsx
+msgid "Browser extension"
+msgstr "Extensión del navegador"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Browser extension required for Chrome"
 msgstr "Se requiere extensión de navegador para Chrome"
 
-#: src/pages/app/AboutPage.tsx
-msgid "Browser extention"
-msgstr "Extensión del navegador"
-
 #: src/components/settings/DisplaySettings.tsx
 msgid "Browser tab"
 msgstr "Pestaña del navegador"
@@ -148,7 +159,7 @@ msgstr "Pestaña del navegador"
 #: src/components/admin/UserEdit.tsx
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
@@ -205,7 +216,7 @@ msgstr "Versión de CommaFeed {version} ({revision})."
 msgid "Compact"
 msgstr "Compacto"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
@@ -217,10 +228,19 @@ msgstr "Confirmar"
 msgid "Confirm password"
 msgstr "Confirmar contraseña"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Confirm Password"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Cozy"
 msgstr "Acogedor"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Create Admin Account"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr "Ctrl"
@@ -241,7 +261,12 @@ msgstr "Reglas CSS personalizadas que se aplicarán"
 msgid "Custom JS code that will be executed on page load"
 msgstr "Código JS personalizado que se ejecutará al cargar la página"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Cyan"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 msgid "Dark"
 msgstr "Oscuro"
 
@@ -274,7 +299,12 @@ msgstr "Desc"
 msgid "Detailed"
 msgstr "Detallado"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 #: src/pages/app/SettingsPage.tsx
 msgid "Display"
 msgstr "Mostrar"
@@ -295,6 +325,8 @@ msgstr "Arrastra el enlace a la barra de marcadores"
 #: src/components/admin/UserEdit.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
 #: src/pages/auth/PasswordRecoveryPage.tsx
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "E-mail"
@@ -377,6 +409,10 @@ msgstr "URL de la API de Fever"
 msgid "Filtering expression"
 msgstr "Expresión de filtrado"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Font size"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Force fetching feeds is not yet available."
 msgstr ""
@@ -401,6 +437,7 @@ msgstr "Generar nueva clave API"
 msgid "Generated feed url"
 msgstr "URL del feed generado"
 
+#. placeholder {0}: truncate(props.entry.feedName, 30)
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Go to {0}"
 msgstr "Ir a {0}"
@@ -417,6 +454,18 @@ msgstr "Ir a la documentación de la API."
 msgid "Goodies"
 msgstr "Golosinas"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Grape"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Gray"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Green"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Id"
 msgstr "Identificación"
@@ -441,6 +490,18 @@ msgstr "Importar"
 msgid "In expanded view, scrolling through entries mark them as read"
 msgstr "En la vista ampliada, al desplazarse por las entradas marcarlas como leídas"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Indigo"
+msgstr ""
+
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Initial Setup"
+msgstr ""
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Invalid password reset link. Please request a new one."
+msgstr ""
+
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Keep unread"
@@ -471,12 +532,20 @@ msgstr "Último mensaje de actualización"
 msgid "Light"
 msgstr "Claro"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Lime"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/TagDetailsPage.tsx
 msgid "Link"
 msgstr "Enlace"
 
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Link to the documentation"
+msgstr ""
+
 #: src/hooks/useAppLoading.ts
 msgid "Loading profile..."
 msgstr "Cargando perfil..."
@@ -512,12 +581,12 @@ msgstr "Pulsación larga"
 msgid "Manage users"
 msgstr "Administrar usuarios"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/header/Header.tsx
 msgid "Mark all as read"
 msgstr "Marcar todo como leído"
 
-#: src/components/header/MarkAllAsReadButton.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Mark all entries as read"
 msgstr "Marcar todas las entradas como leídas"
 
@@ -563,6 +632,10 @@ msgstr "Nombre"
 msgid "Navigate to a subscription by entering its name"
 msgstr "Navegar a una suscripción introduciendo su nombre"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Navigate to the next category/feed with unread entries when marking all entries as read"
+msgstr ""
+
 #: src/components/settings/DisplaySettings.tsx
 #: src/components/settings/DisplaySettings.tsx
 msgid "Never"
@@ -572,6 +645,11 @@ msgstr "Nunca"
 msgid "New password"
 msgstr "Nueva contraseña"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "New Password"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Newest first"
 msgstr "Las más recientes primero"
@@ -683,6 +761,10 @@ msgstr "Archivo OPML"
 msgid "OPML file is required"
 msgstr "Es necesario un archivo OPML"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Orange"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
 msgstr "Orden"
@@ -696,6 +778,8 @@ msgid "Parent Category"
 msgstr "Categoría principal"
 
 #: src/components/admin/UserEdit.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
@@ -703,14 +787,22 @@ msgstr "Categoría principal"
 msgid "Password"
 msgstr "Contraseña"
 
+#: src/hooks/useValidationRules.ts
+msgid "Password must be at least {minimumPasswordLength} characters"
+msgstr ""
+
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "Password Recovery"
 msgstr "Recuperación de contraseña"
 
-#: src/components/settings/ProfileSettings.tsx
+#: src/hooks/useValidationRules.ts
 msgid "Passwords do not match"
 msgstr "Las contraseñas no coinciden"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Pink"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Position"
@@ -720,6 +812,10 @@ msgstr "Posición"
 msgid "Previous"
 msgstr "Previo"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Primary color"
+msgstr ""
+
 #: src/pages/app/SettingsPage.tsx
 msgid "Profile"
 msgstr "Perfil"
@@ -728,6 +824,10 @@ msgstr "Perfil"
 msgid "Recover password"
 msgstr "Recuperar contraseña"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Red"
+msgstr ""
+
 #: src/components/header/Header.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Refresh"
@@ -737,6 +837,11 @@ msgstr "Actualizar"
 msgid "Registrations are closed on this CommaFeed instance"
 msgstr "Los registros están cerrados en esta instancia de CommaFeed"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Reset Password"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "REST API"
 msgstr "API REST"
@@ -773,9 +878,13 @@ msgstr "Desplazarse"
 msgid "Search"
 msgstr "Buscar"
 
-#: src/components/header/Header.tsx
+#: src/components/KeyboardShortcutsHelp.tsx
-msgid "Search requires at least 3 characters"
+msgid "Select next unread feed/category"
-msgstr "La búsqueda requiere al menos 3 caracteres"
+msgstr ""
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Select previous unread feed/category"
+msgstr ""
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Set focus on next entry without opening it"
@@ -872,8 +981,9 @@ msgstr "Espacio"
 msgid "Star"
 msgstr "Estrella"
 
-#: src/app/constants.ts
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "Starred"
 msgstr "Destacado"
 
@@ -916,6 +1026,10 @@ msgstr "Sistema"
 msgid "Tags"
 msgstr "Etiquetas"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Teal"
+msgstr ""
+
 #: src/components/content/add/Subscribe.tsx
 msgid "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."
 msgstr "La URL del feed al que desea suscribirse. También puede utilizar la URL del sitio web directamente y CommaFeed intentará encontrar el feed en la página."
@@ -928,6 +1042,10 @@ msgstr "Tema"
 msgid "This is your API key. It can be used for some read-only API operations and grants access to the Fever API. Use the form at the bottom of the page to generate a new API key"
 msgstr "Esta es su clave API. Se puede utilizar para algunas operaciones API de solo lectura y otorga acceso a Fever API. Utilice el formulario en la parte inferior de la página para generar una nueva clave API"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "This setting can cause scrolling issues on some browsers (e.g. Safari)"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle read status of current entry"
 msgstr "Alternar estado de lectura de la entrada actual"
@@ -972,6 +1090,10 @@ msgstr "Nombre de usuario"
 msgid "User Name or E-mail"
 msgstr "Nombre de usuario o correo electrónico"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Violet"
+msgstr ""
+
 #: src/components/Alert.tsx
 msgid "Warning"
 msgstr "Advertencia"
@@ -980,6 +1102,14 @@ msgstr "Advertencia"
 msgid "Website"
 msgstr "Sitio web"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Welcome! This appears to be the first time you're running CommaFeed. Please create an administrator account to get started."
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Yellow"
+msgstr ""
+
 #: src/pages/app/FeedEntriesPage.tsx
 msgid "You don't have any subscriptions yet. Why not try adding one by clicking on the + sign at the top of the page?"
 msgstr "Aún no tienes ninguna suscripción. ¿Por qué no intentas agregar una haciendo clic en el signo + en la parte superior de la página?"
@@ -987,3 +1117,7 @@ msgstr "Aún no tienes ninguna suscripción. ¿Por qué no intentas agregar una
 #: src/components/header/ProfileMenu.tsx
 msgid "Your feeds have been queued for refresh."
 msgstr "Tus feeds se han puesto en cola para actualizarse."
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Your password has been changed. You can now log in with your new password."
+msgstr ""