Update docker script to build pgsql variant

chore(deps): update dependency com.diffplug.spotless:spotless-maven-plugin to v3.4.0

.gitattributes

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

.github/stale.yml

@@ -7,6 +7,7 @@ exemptLabels:
   - pinned
   - security
   - enhancement
+  - feature-request
   - bug
 # Label to use when marking an issue as stale
 staleLabel: wontfix

.github/workflows/ci.yml

@@ -1,183 +1,278 @@
 name: ci
+permissions:
+  contents: read
 
-on: [ push ]
+on:
+  push:
+  pull_request:
 
 env:
-  JAVA_VERSION: 21
+  JAVA_VERSION: 25
   DOCKER_BUILD_SUMMARY: false
 
 jobs:
-  build-linux:
+  build:
-    runs-on: ubuntu-latest
+    if: github.event_name != 'pull_request' || github.actor != 'renovate[bot]' # renovate already triggers the build on pushes
+
     strategy:
       matrix:
+        os: [ "ubuntu-latest", "ubuntu-22.04-arm", "windows-latest" ]
         database: [ "h2", "postgresql", "mysql", "mariadb" ]
 
+    runs-on: ${{ matrix.os }}
     steps:
       # Checkout
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
         with:
           fetch-depth: 0
 
       # Setup
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
       - name: Set up GraalVM
-        uses: graalvm/setup-graalvm@v1
+        uses: graalvm/setup-graalvm@03e8abf916fd0e281b2efe7b2da3378bb0a1d085 # v1
         with:
           java-version: ${{ env.JAVA_VERSION }}
           distribution: "graalvm"
           cache: "maven"
 
+      - name: Install Playwright dependencies
+        run: sudo apt-get install -y libgbm1
+        if: matrix.os != 'windows-latest'
+
       # Build & Test
       - name: Build with Maven
-        run: mvn --batch-mode --no-transfer-progress install -Pnative -P${{ matrix.database }}
+        run: mvn --batch-mode --no-transfer-progress install -Pnative -P${{ matrix.database }} -DskipTests=${{ matrix.os == 'windows-latest' && matrix.database != 'h2' }}
+
+      # Build pages
+      - name: Create pages directory structure
+        run: mkdir -p target/pages/documentation/custom-css
+
+      - name: Convert readme file to html
+        uses: jaywcjlove/markdown-to-html-cli@cff9330af4ca8048b197a76d9eb1db189c2a7cee # v5.0.4
+        with:
+          source: README.md
+          output: target/pages/index.html
+
+      - name: Convert config documentation to html
+        uses: jaywcjlove/markdown-to-html-cli@cff9330af4ca8048b197a76d9eb1db189c2a7cee # v5.0.4
+        with:
+          source: commafeed-server/target/quarkus-generated-doc/config/commafeed-server.md
+          output: target/pages/documentation/index.html
+
+      - name: Convert custom css documentation to html
+        uses: jaywcjlove/markdown-to-html-cli@cff9330af4ca8048b197a76d9eb1db189c2a7cee # v5.0.4
+        with:
+          source: documentation/CUSTOMCSS.md
+          output: target/pages/documentation/custom-css/index.html
 
       # Upload artifacts
       - name: Upload cross-platform app
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
+        if: matrix.os == 'ubuntu-latest' # we only need to upload the cross-platform artifact once per database
         with:
           name: commafeed-${{ matrix.database }}-jvm
           path: commafeed-server/target/commafeed-*.zip
 
       - name: Upload native executable
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
         with:
           name: commafeed-${{ matrix.database }}-${{ runner.os }}-${{ runner.arch }}
-          path: commafeed-server/target/commafeed-*-runner
+          path: commafeed-server/target/commafeed-*-runner*
 
-      # Docker
+      - name: Upload pages
-      - name: Login to Container Registry
+        uses: actions/upload-pages-artifact@7b1f4a764d45c48632c6b24a0339c27f5614fb0b # v4
-        uses: docker/login-action@v3
+        if: matrix.os == 'ubuntu-latest' && matrix.database == 'h2' # we only need to upload the pages once
-        if: ${{ github.ref_type == 'tag' || github.ref_name == 'master' }}
         with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          path: target/pages
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      ## tags
+  docker:
-      - name: Docker build and push tag - native
+    runs-on: ubuntu-latest
-        uses: docker/build-push-action@v6
+    needs: build
-        if: ${{ github.ref_type == 'tag' }}
+    env:
-        with:
+      DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          context: .
-          file: commafeed-server/src/main/docker/Dockerfile.native
-          push: true
-          platforms: linux/amd64
-          tags: |
-            athou/commafeed:latest-${{ matrix.database }}
-            athou/commafeed:${{ github.ref_name }}-${{ matrix.database }}
 
-      - name: Docker build and push tag - jvm
-        uses: docker/build-push-action@v6
-        if: ${{ github.ref_type == 'tag' }}
-        with:
-          context: .
-          file: commafeed-server/src/main/docker/Dockerfile.jvm
-          push: true
-          platforms: linux/amd64,linux/arm64/v8
-          tags: |
-            athou/commafeed:latest-${{ matrix.database }}-jvm
-            athou/commafeed:${{ github.ref_name }}-${{ matrix.database }}-jvm
-
-      ## master
-      - name: Docker build and push master - native
-        uses: docker/build-push-action@v6
-        if: ${{ github.ref_name == 'master' }}
-        with:
-          context: .
-          file: commafeed-server/src/main/docker/Dockerfile.native
-          push: true
-          platforms: linux/amd64
-          tags: athou/commafeed:master-${{ matrix.database }}
-
-      - name: Docker build and push master - jvm
-        uses: docker/build-push-action@v6
-        if: ${{ github.ref_name == 'master' }}
-        with:
-          context: .
-          file: commafeed-server/src/main/docker/Dockerfile.jvm
-          push: true
-          platforms: linux/amd64,linux/arm64/v8
-          tags: athou/commafeed:master-${{ matrix.database }}-jvm
-
-  build-windows:
-    runs-on: windows-latest
     strategy:
       matrix:
         database: [ "h2", "postgresql", "mysql", "mariadb" ]
 
     steps:
       # Checkout
-      - name: Configure git to checkout as-is
-        run: git config --global core.autocrlf false
-
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
         with:
           fetch-depth: 0
 
       # Setup
-      - name: Set up GraalVM
+      - name: Set up QEMU
-        uses: graalvm/setup-graalvm@v1
+        uses: docker/setup-qemu-action@ce360397dd3f832beb865e1373c09c0e9f86d70a # v4
-        with:
-          java-version: ${{ env.JAVA_VERSION }}
-          distribution: "graalvm"
-          cache: "maven"
 
-      # Build & Test
+      - name: Set up Docker Buildx
-      - name: Build with Maven
+        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4
-        run: mvn --batch-mode --no-transfer-progress install -Pnative -P${{ matrix.database }} -DskipTests=${{ matrix.database != 'h2' }}
 
-      # Upload artifacts
+      - name: Install required packages
-      - name: Upload native executable
+        run: sudo apt-get install -y rename unzip
-        uses: actions/upload-artifact@v4
+
+      # Prepare artifacts
+      - name: Download artifacts
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8
         with:
-          name: commafeed-${{ matrix.database }}-${{ runner.os }}-${{ runner.arch }}
+          pattern: commafeed-${{ matrix.database }}-*
-          path: commafeed-server/target/commafeed-*-runner.exe
+          path: ./artifacts
+          merge-multiple: true
+
+      - name: Set the exec flag on the native executables
+        run: chmod +x artifacts/*-runner
+
+      - name: Rename native executables to match buildx TARGETARCH
+        run: |
+          rename 's/x86_64/amd64/g' artifacts/*
+          rename 's/aarch_64/arm64/g' artifacts/*
+
+      - name: Unzip jvm package
+        run: |
+          unzip artifacts/*-jvm.zip -d artifacts/extracted-jvm-package
+          rename 's/commafeed-.*/quarkus-app/g' artifacts/extracted-jvm-package/*
+
+      # Docker
+      - name: Login to Container Registry
+        uses: docker/login-action@b45d80f862d83dbcd57f89517bcf500b2ab88fb2 # v4
+        if: ${{ env.DOCKERHUB_USERNAME != '' }}
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      ## build but don't push for PRs and renovate
+      - name: Docker build - native
+        uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7
+        with:
+          context: .
+          file: commafeed-server/src/main/docker/Dockerfile.native
+          push: false
+          platforms: linux/amd64,linux/arm64/v8
+
+      - name: Docker build - jvm
+        uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7
+        with:
+          context: .
+          file: commafeed-server/src/main/docker/Dockerfile.jvm
+          push: false
+          platforms: linux/amd64,linux/arm64/v8
+
+      ## build and push tag
+      - name: Docker build and push tag - native
+        uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7
+        if: ${{ github.ref_type == 'tag' }}
+        with:
+          context: .
+          file: commafeed-server/src/main/docker/Dockerfile.native
+          push: ${{ env.DOCKERHUB_USERNAME != '' }}
+          platforms: linux/amd64,linux/arm64/v8
+          tags: |
+            athou/commafeed:latest-${{ matrix.database }}
+            athou/commafeed:${{ github.ref_name }}-${{ matrix.database }}
+
+      - name: Docker build and push tag - jvm
+        uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7
+        if: ${{ github.ref_type == 'tag' }}
+        with:
+          context: .
+          file: commafeed-server/src/main/docker/Dockerfile.jvm
+          push: ${{ env.DOCKERHUB_USERNAME != '' }}
+          platforms: linux/amd64,linux/arm64/v8
+          tags: |
+            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@d08e5c354a6adb9ed34480a06d141179aa583294 # v7
+        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@d08e5c354a6adb9ed34480a06d141179aa583294 # v7
+        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-linux
+      - build
-      - build-windows
+      - docker
+    permissions:
+      contents: write
     if: github.ref_type == 'tag'
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
         with:
           fetch-depth: 0
 
       - name: Download artifacts
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8
         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@v2
+        uses: mindsers/changelog-reader-action@32aa5b4c155d76c94e4ec883a223c947b2f02656 # v2
         id: changelog_reader
         with:
           version: ${{ github.ref_name }}
 
       - name: Create GitHub release
-        uses: ncipollo/release-action@v1
+        uses: ncipollo/release-action@339a81892b84b4eeb0f6e744e4574d79d0d9b8dd # 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@v4
+        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
-# distributed with this work for additional information
-# 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
+distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.14/apache-maven-3.9.14-bin.zip

CHANGELOG.md

@@ -1,5 +1,146 @@
 # Changelog
 
+## [7.0.0]
+
+- Replaced the JEXL filter expression for marking feed entries as read automatically with a user-friendly visual query builder. Expressions are now evaluated with Common Expression Language, which is safer than JEXL and sanboxed by default.
+- Added a per-feed setting for sending push notifications to ntfy, Gotify or Pushover when new feed entries are discovered (#1610)
+- Added a per-feed setting for marking entries as read after a number of days (#2041)
+- The default value of `commafeed.http-client.block-local-addresses` is now false, allowing users to subscribe to feeds only available on their local network. This may be a security risk (SSRF) if your instance is accessible by untrusted users, so you may want to set it to true if you host a public instance of CommaFeed with user registeration enabled.
+- When `commafeed.http-client.block-local-addresses` is enabled, SSRF is now also mitigated by blocking public websites redirecting to local ones.
+
+## [6.2.0]
+
+- 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)
+
+## [6.1.1]
+
+- Fix old starred entries not loading if they were marked as read (#2031)
+
+## [6.1.0]
+
+- 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)
+- 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)
+- The "disable pull to refresh" feature is now disabled by default (#2030)
+
+## [6.0.0]
+
+- 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
+- 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)
+- Java 25+ is now required to build and run CommaFeed
+
+## [5.12.1]
+
+- The favicon is now crispier (#1978)
+- The ReadKit iOS app now works via the Fever API (#1602)
+
+## [5.12.0]
+
+- Added a setting to disable the "disable pull to refresh" feature because it messes with some browsers (#1168)
+- 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)
+- 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)
+- Enforce user password validation when created in the admin view (#1937)
+- The process in the docker native image is now called "commafeed" instead of "application"
+
+## [5.11.1]
+
+- 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.11.0]
+
+- Add an option to navigate to the next unread category/feed when marking all entries as read (#1807)
+- Google Analytics support has been removed
+
+## [5.10.0]
+
+- 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)
+- Feeds with uppercase HTTP:// or HTTPS:// URLs are now correctly handled again
+- The aarch64 native executable now also works on the Raspberry Pi 5 (#1795)
+- Improve general performance of the UI by reducing the number of re-renders, especially when a lot of entries are displayed (#1087)
+
+## [5.9.0]
+
+- A lot of CSS classes have been added to the elements of the application to ease custom CSS rules (#1757)
+- Added a link in the README to the [documentation](https://athou.github.io/commafeed/documentation/custom-css/) of the new CSS classes
+- Static resources are now cached for much longer (#1782)
+
+## [5.8.0]
+
+- A color picker is now available on the settings page to change the orange accent of the application (#1598)
+- A font size slider is now available to change the size of the text of feed entries (#1462)
+- The "mark all as read" confirmation setting now also applies to the "shift+a" keyboard shortcut (#1744)
+- 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
+
+## [5.7.0]
+
+- Add Shift+J/Shift+K keyboard shortcuts to navigate to the next/previous feed or category with unread entries (#1558)
+- Add the referrer "no-referrer" meta to index.html (#1724)
+- 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)
+- Restore gzip compression of responses that was accidentaly disabled since 5.0.0
+- Fix tooltips not showing up in mobile view
+- Fix the bookmarklet generator on the About page
+
+## [5.6.1]
+
+- Restore support for iframes in feed entries (#1688)
+- There is now a package available for Arch Linux thanks to @dcelasun (#1691)
+
+## [5.6.0]
+
+- 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)
+- 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
+- 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
+
+## [5.5.0]
+
+- CommaFeed now honors the Retry-After response header and will not try to refresh a feed sooner than the value of this header
+- Audio enclosures (e.g. podcasts) now fill available entry width
+- Fix an issue with some labels not correctly internationalized
+
+## [5.4.0]
+
+- An arm64 native executable is now available for download on the releases page
+- The native executable Docker image now supports arm64
+- Fixed an issue with feeds that declared an invalid DOCTYPE (#1260)
+
+## [5.3.6]
+
+- Ignore invalid Cache-Control header values (#1619)
+
+## [5.3.5]
+
+- Fixed an issue with the aspect ratio of images of some feeds (#1595)
+- 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)
+
+## [5.3.4]
+
+- Added support for Internationalized Domain Names (#1588)
+
+## [5.3.3]
+
+- Removed image bottom margins (#1587)
+
+## [5.3.2]
+
+- Fixed an issue that could cause some images from not being rendered correctly (#1587)
+
+## [5.3.1]
+
+- Fixed an issue that could cause some HTTP feeds to return a 400 error (#1572)
+
+## [5.3.0]
+
+- Added a setting to set a cooldown on the "fetch all my feeds" action, disabled by default (#1556)
+- Fixed an issue that could cause entries to not correctly load when using the "next" header button (#1557)
+
 ## [5.2.0]
 
 - Added an option to keep a number of entries above the selected entry when scrolling

README-fork.md

@@ -0,0 +1,22 @@
+# `garrettmills/commafeed`
+
+This is my personal fork of `Athou/commafeed` with some tweaks:
+
+- "Infrequent" tab - like "All" but limits to blogs w/ an average post interval greater than a user-configurable number of days
+- User preference to disable the swipe-to-open-menu gesture on mobile
+
+## Building
+
+Use `gmfork-build-docker.sh` to build the JVM Docker image for `linux/amd64`:
+
+You can use the `DB_VARIANT` env var to change which DB the image builds with. By default, it builds the `postgresql` variant.
+
+```sh
+DOCKER_REGISTRY=myregistry.example.com DB_VARIANT=h2 ./gmfork-build-docker.sh
+```
+
+To run locally:
+
+```sh
+docker run -p 8082:8082 $DOCKER_REGISTRY/commafeed-fork:latest
+```

README.md

@@ -17,6 +17,8 @@ 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
+- Push notifications when new articles are published
+- 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 +27,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 +57,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 +82,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 +107,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,24 +121,23 @@ 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
 
 When CommaFeed is up and running, you can subscribe to [this feed](https://github.com/Athou/commafeed/releases.atom) to be notified of new releases.
 
-### Memory management (`jvm` package only)
+### Memory management
 
 The Java Virtual Machine (JVM) is rather greedy by default and will not release unused memory to the
 operating system. This is because acquiring memory from the operating system is a relatively expensive operation.
 This can be problematic on systems with limited memory.
 
-#### Hard limit
+#### Hard limit (`native` and `jvm` packages)
 
 The JVM can be configured to use a maximum amount of memory with the `-Xmx` parameter.
 For example, to limit the JVM to 256MB of memory, use `-Xmx256m`.
 
-#### Dynamic sizing
+#### Dynamic sizing (`jvm` package)
 
 In addition to the previous setting, the JVM can be configured to release unused memory to the operating system with the
 following parameters:
@@ -137,7 +149,7 @@ and [here](https://docs.oracle.com/en/java/javase/17/gctuning/factors-affecting-
 more
 information.
 
-#### OpenJ9
+#### OpenJ9 (`jvm` package)
 
 The [OpenJ9](https://eclipse.dev/openj9/) JVM is a more memory-efficient alternative to the HotSpot JVM, at the cost of
 slightly slower throughput.

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/.husky/pre-commit

@@ -0,0 +1 @@
+cd commafeed-client && npx lint-staged

commafeed-client/biome.json

@@ -1,5 +1,5 @@
 {
-    "$schema": "https://biomejs.dev/schemas/1.9.1/schema.json",
+    "$schema": "https://biomejs.dev/schemas/2.4.7/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/lint-staged.config.js

@@ -0,0 +1,3 @@
+export default {
+    "src/**/*.{js,jsx,ts,tsx}": () => ["npm run i18n:extract", "git diff --exit-code commafeed-client/src/locales/en/messages.po"],
+}

commafeed-client/package.json

@@ -4,76 +4,83 @@
     "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"
+        "i18n:extract": "lingui extract --clean",
+        "prepare": "cd .. && husky ./commafeed-client/.husky"
     },
     "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.11.4",
+        "@lingui/core": "^5.9.3",
-        "@lingui/macro": "^4.11.4",
+        "@lingui/react": "^5.9.3",
-        "@lingui/react": "^4.11.4",
+        "@mantine/core": "^8.3.16",
-        "@mantine/core": "^7.12.2",
+        "@mantine/form": "^8.3.16",
-        "@mantine/form": "^7.12.2",
+        "@mantine/hooks": "^8.3.16",
-        "@mantine/hooks": "^7.12.2",
+        "@mantine/modals": "^8.3.16",
-        "@mantine/modals": "^7.12.2",
+        "@mantine/notifications": "^8.3.16",
-        "@mantine/notifications": "^7.12.2",
+        "@mantine/spotlight": "^8.3.16",
-        "@mantine/spotlight": "^7.12.2",
+        "@monaco-editor/react": "^4.7.0",
-        "@monaco-editor/react": "^4.6.0",
+        "@react-querybuilder/mantine": "^8.14.0",
-        "@reduxjs/toolkit": "^2.2.7",
+        "@reduxjs/toolkit": "^2.11.2",
-        "axios": "^1.7.7",
+        "@rolldown/plugin-babel": "^0.2.2",
-        "dayjs": "^1.11.13",
+        "axios": "^1.13.6",
+        "dayjs": "^1.11.20",
         "escape-string-regexp": "^5.0.0",
-        "interweave": "^13.1.0",
+        "interweave": "^13.1.1",
-        "monaco-editor": "^0.51.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.6.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-querybuilder": "^8.14.0",
-        "react-router-dom": "^6.26.2",
+        "react-redux": "^9.2.0",
-        "react-swipeable": "^7.0.1",
+        "react-router-dom": "^7.13.1",
-        "redoc": "^2.1.5",
+        "react-swipeable": "^7.0.2",
+        "style-to-object": "^1.0.14",
         "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.1",
+        "@biomejs/biome": "^2.4.7",
-        "@lingui/cli": "^4.11.4",
+        "@lingui/babel-plugin-lingui-macro": "^5.9.3",
-        "@lingui/vite-plugin": "^4.11.4",
+        "@lingui/cli": "^5.9.3",
+        "@lingui/vite-plugin": "^5.9.3",
+        "@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.7",
+        "@types/react": "^19.2.14",
-        "@types/react-dom": "^18.3.0",
+        "@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.1",
+        "@vitejs/plugin-react": "^6.0.1",
-        "babel-plugin-macros": "^3.1.0",
+        "babel-plugin-react-compiler": "1.0.0",
-        "jsdom": "^25.0.0",
+        "husky": "^9.1.7",
-        "rollup-plugin-visualizer": "^5.12.0",
+        "jsdom": "^29.0.0",
-        "typescript": "^5.6.2",
+        "lint-staged": "^16.4.0",
-        "vite": "^5.4.6",
+        "typescript": "^5.9.3",
-        "vite-plugin-checker": "^0.8.0",
+        "vite": "^8.0.0",
-        "vite-tsconfig-paths": "^5.0.1",
+        "vite-plugin-checker": "^0.12.0",
-        "vitest": "^2.1.1",
+        "vitest": "^4.1.0",
-        "vitest-mock-extended": "^2.0.2"
+        "yaml": "^2.8.2"
+    },
+    "overrides": {
+        "react-infinite-scroller": {
+            "react": "^19.2.4"
+        }
     }
 }

commafeed-client/pom.xml

@@ -6,16 +6,16 @@
 	<parent>
 		<groupId>com.commafeed</groupId>
 		<artifactId>commafeed</artifactId>
-		<version>5.2.0</version>
+		<version>7.0.0</version>
 	</parent>
 	<artifactId>commafeed-client</artifactId>
 	<name>CommaFeed Client</name>
 
 	<properties>
 		<!-- renovate: datasource=node-version depName=node -->
-		<node.version>v20.17.0</node.version>
+		<node.version>v24.14.0</node.version>
 		<!-- renovate: datasource=npm depName=npm -->
-		<npm.version>10.8.3</npm.version>
+		<npm.version>11.11.1</npm.version>
 	</properties>
 
 	<build>
@@ -23,7 +23,7 @@
 			<plugin>
 				<groupId>com.github.eirslett</groupId>
 				<artifactId>frontend-maven-plugin</artifactId>
-				<version>1.15.0</version>
+				<version>2.0.0</version>
 				<?m2e ignore?>
 				<executions>
 					<execution>
@@ -55,6 +55,7 @@
 						<phase>compile</phase>
 						<configuration>
 							<arguments>run test:ci</arguments>
+							<skip>${skipTests}</skip>
 						</configuration>
 					</execution>
 					<execution>
@@ -71,7 +72,7 @@
 			</plugin>
 			<plugin>
 				<artifactId>maven-resources-plugin</artifactId>
-				<version>3.3.1</version>
+				<version>3.5.0</version>
 				<executions>
 					<execution>
 						<id>copy web interface to resources</id>
@@ -93,4 +94,49 @@
 			</plugin>
 		</plugins>
 	</build>
+
+	<profiles>
+		<!-- This profile is used to kill the Biome process on Windows -->
+		<!-- npm ci can fail if Biome is running (e.g., in the IDE) because it locks some files -->
+		<profile>
+			<id>kill-biome</id>
+			<activation>
+				<os>
+					<family>Windows</family>
+				</os>
+			</activation>
+			<build>
+				<plugins>
+					<plugin>
+						<groupId>org.codehaus.mojo</groupId>
+						<artifactId>exec-maven-plugin</artifactId>
+						<version>3.6.3</version>
+						<executions>
+							<execution>
+								<id>kill-biome</id>
+								<phase>initialize</phase>
+								<goals>
+									<goal>exec</goal>
+								</goals>
+								<configuration>
+									<executable>taskkill</executable>
+									<arguments>
+										<argument>/F</argument>
+										<argument>/IM</argument>
+										<argument>biome.exe</argument>
+									</arguments>
+									<successCodes>
+										<successCode>0</successCode>
+										<!-- taskkill returns 128 if the process is not found, which is fine in this case -->
+										<successCode>128</successCode>
+									</successCodes>
+								</configuration>
+							</execution>
+						</executions>
+					</plugin>
+				</plugins>
+			</build>
+		</profile>
+	</profiles>
+
 </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,12 +12,15 @@ import type {
     FeedModificationRequest,
     GetEntriesPaginatedRequest,
     IDRequest,
+    InitialSetupRequest,
     LoginRequest,
     MarkRequest,
     Metrics,
     MultipleMarkRequest,
+    PasswordResetConfirmationRequest,
     PasswordResetRequest,
     ProfileModificationRequest,
+    PushNotificationSettings,
     RegistrationRequest,
     ServerInfo,
     Settings,
@@ -32,16 +35,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,9 +97,13 @@ 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),
+        sendTestPushNotification: async (settings: PushNotificationSettings) =>
+            await axiosInstance.post("user/pushNotificationTest", settings),
         getProfile: async () => await axiosInstance.get<UserModel>("user/profile"),
         saveProfile: async (req: ProfileModificationRequest) => await axiosInstance.post("user/profile", req),
         deleteProfile: async () => await axiosInstance.post("user/profile/deleteAccount"),
@@ -105,7 +113,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,12 +13,18 @@ const categories: Record<string, Category> = {
     },
     starred: {
         id: "starred",
-        name: t`Starred`,
         expanded: false,
         children: [],
         feeds: [],
         position: 1,
     },
+    infrequent: {
+        id: "infrequent",
+        expanded: false,
+        children: [],
+        feeds: [],
+        position: 2,
+    },
 }
 
 const sharing: {
@@ -90,23 +94,26 @@ 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,
     },
+    infrequentThresholdDaysDefault: 7,
     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,9 +278,10 @@ export const selectPreviousEntry = createAppAsyncThunk(
         }
     }
 )
+
 export const selectNextEntry = createAppAsyncThunk(
     "entries/entry/selectNext",
-    (
+    async (
         arg: {
             expand: boolean
             markAsRead: boolean
@@ -239,12 +290,20 @@ export const selectNextEntry = createAppAsyncThunk(
         thunkApi
     ) => {
         const state = thunkApi.getState()
-        const { entries } = state.entries
+        const { entries, hasMore, loading } = state.entries
         const nextIndex = entries.findIndex(e => e.id === state.entries.selectedEntryId) + 1
-        if (nextIndex < entries.length) {
+
+        // load more entries if needed
+        // this can happen if the last entry is too large to fit on the screen and the infinite loader doesn't trigger
+        if (nextIndex >= entries.length && hasMore && !loading) {
+            await thunkApi.dispatch(loadMoreEntries())
+        }
+
+        const entriesAfterLoading = thunkApi.getState().entries.entries
+        if (nextIndex < entriesAfterLoading.length) {
             thunkApi.dispatch(
                 selectEntry({
-                    entry: entries[nextIndex],
+                    entry: entriesAfterLoading[nextIndex],
                     expand: arg.expand,
                     markAsRead: arg.markAsRead,
                     scrollToEntry: arg.scrollToEntry,
@@ -253,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 { shallowEqual, type TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"
-import { redirectSlice } from "app/redirect/slice"
+import { entriesSlice } from "@/app/entries/slice"
-import { serverSlice } from "app/server/slice"
+import { redirectSlice } from "@/app/redirect/slice"
-import { treeSlice } from "app/tree/slice"
+import { serverSlice } from "@/app/server/slice"
-import type { LocalSettings } from "app/types"
+import { treeSlice } from "@/app/tree/slice"
-import { initialLocalSettings, userSlice } from "app/user/slice"
+import type { LocalSettings } from "@/app/types"
-import { type TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"
+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,
     }
 }
 
@@ -51,3 +41,4 @@ export type AppDispatch = typeof store.dispatch
 
 export const useAppDispatch: () => AppDispatch = useDispatch
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
+export const useShallowEqualAppSelector: TypedUseSelectorHook<RootState> = selector => useSelector(selector, shallowEqual)

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,173 @@
+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: "",
+    pushNotificationsEnabled: true,
+})
+
+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

@@ -28,6 +28,10 @@ export interface Subscription {
     position: number
     newestItemTime?: number
     filter?: string
+    filterLegacy?: string
+    pushNotificationsEnabled: boolean
+    autoMarkAsReadAfterDays?: number
+    averageEntryIntervalMs?: number
 }
 
 export interface Category {
@@ -109,6 +113,8 @@ export interface FeedModificationRequest {
     categoryId?: string
     position?: number
     filter?: string
+    pushNotificationsEnabled: boolean
+    autoMarkAsReadAfterDays?: number
 }
 
 export interface GetEntriesRequest {
@@ -196,6 +202,12 @@ export interface PasswordResetRequest {
     email: string
 }
 
+export interface PasswordResetConfirmationRequest {
+    email: string
+    token: string
+    password: string
+}
+
 export interface ProfileModificationRequest {
     currentPassword: string
     email: string
@@ -209,17 +221,27 @@ 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
+    pushNotificationsEnabled: boolean
 }
 
 export interface SharingSettings {
@@ -233,8 +255,18 @@ export interface SharingSettings {
     buffer: boolean
 }
 
+export type PushNotificationType = "ntfy" | "gotify" | "pushover"
+
+export interface PushNotificationSettings {
+    type?: PushNotificationType
+    serverUrl?: string
+    userId?: string
+    userSecret?: string
+    topic?: string
+}
+
 export interface Settings {
-    language: string
+    language?: string
     readingMode: ReadingMode
     readingOrder: ReadingOrder
     showRead: boolean
@@ -247,17 +279,24 @@ export interface Settings {
     starIconDisplayMode: IconDisplayMode
     externalLinkIconDisplayMode: IconDisplayMode
     markAllAsReadConfirmation: boolean
+    markAllAsReadNavigateToNextUnread: boolean
     customContextMenu: boolean
     mobileFooter: boolean
     unreadCountTitle: boolean
     unreadCountFavicon: boolean
+    disablePullToRefresh: boolean
+    disableMobileSwipe: boolean
+    infrequentThresholdDays: number
+    primaryColor?: string
     sharingSettings: SharingSettings
+    pushNotificationSettings: PushNotificationSettings
 }
 
 export interface LocalSettings {
     viewMode: ViewMode
     sidebarWidth: number
     announcementHash: string
+    fontSizePercentage: number
 }
 
 export interface StarRequest {
@@ -287,6 +326,7 @@ export interface UserModel {
     created: number
     lastLogin?: number
     admin: boolean
+    lastForceRefresh?: number
 }
 
 export interface AdminSaveUserRequest {

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

@@ -1,14 +1,20 @@
-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,
+    changeDisableMobileSwipe,
+    changeDisablePullToRefresh,
     changeEntriesToKeepOnTopWhenScrolling,
     changeExternalLinkIconDisplayMode,
+    changeInfrequentThresholdDays,
     changeLanguage,
     changeMarkAllAsReadConfirmation,
+    changeMarkAllAsReadNavigateToUnread,
     changeMobileFooter,
+    changePrimaryColor,
+    changePushNotificationSettings,
     changeReadingMode,
     changeReadingOrder,
     changeScrollMarks,
@@ -35,6 +41,7 @@ export const initialLocalSettings: LocalSettings = {
     viewMode: "detailed",
     sidebarWidth: 360,
     announcementHash: "no-hash",
+    fontSizePercentage: 100,
 }
 
 const initialState: UserState = {
@@ -48,6 +55,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 +119,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 +139,31 @@ 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(changeDisableMobileSwipe.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.disableMobileSwipe = action.meta.arg
+        })
+        builder.addCase(changeInfrequentThresholdDays.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.infrequentThresholdDays = 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.addCase(changePushNotificationSettings.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.pushNotificationSettings = action.meta.arg
+        })
+
         builder.addMatcher(
             isAnyOf(
                 changeLanguage.fulfilled,
@@ -140,11 +175,17 @@ export const userSlice = createSlice({
                 changeStarIconDisplayMode.fulfilled,
                 changeExternalLinkIconDisplayMode.fulfilled,
                 changeMarkAllAsReadConfirmation.fulfilled,
+                changeMarkAllAsReadNavigateToUnread.fulfilled,
                 changeCustomContextMenu.fulfilled,
                 changeMobileFooter.fulfilled,
                 changeUnreadCountTitle.fulfilled,
                 changeUnreadCountFavicon.fulfilled,
-                changeSharingSetting.fulfilled
+                changeDisablePullToRefresh.fulfilled,
+                changeDisableMobileSwipe.fulfilled,
+                changeInfrequentThresholdDays.fulfilled,
+                changePrimaryColor.fulfilled,
+                changeSharingSetting.fulfilled,
+                changePushNotificationSettings.fulfilled
             ),
             () => {
                 showNotification({
@@ -156,4 +197,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, PushNotificationSettings, 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,61 @@ 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 changeDisableMobileSwipe = createAppAsyncThunk("settings/disableMobileSwipe", (disableMobileSwipe: boolean, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, disableMobileSwipe })
+})
+
+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",
     (
@@ -115,3 +163,24 @@ export const changeSharingSetting = createAppAsyncThunk(
         })
     }
 )
+
+export const changeInfrequentThresholdDays = createAppAsyncThunk(
+    "settings/infrequentThresholdDays",
+    (infrequentThresholdDays: number, thunkApi) => {
+        const { settings } = thunkApi.getState().user
+        if (!settings) return
+        client.user.saveSettings({ ...settings, infrequentThresholdDays })
+    }
+)
+
+export const changePushNotificationSettings = createAppAsyncThunk(
+    "settings/pushNotificationSettings",
+    (pushNotificationSettings: PushNotificationSettings, thunkApi) => {
+        const { settings } = thunkApi.getState().user
+        if (!settings) return
+        client.user.saveSettings({
+            ...settings,
+            pushNotificationSettings,
+        })
+    }
+)

commafeed-client/src/app/utils.ts

@@ -1,28 +1,50 @@
 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, maxFrequencyThresholdMs?: number): number {
     if (!category) return 0
 
     return flattenCategoryTree(category)
         .flatMap(c => c.feeds)
+        .filter(f => !maxFrequencyThresholdMs || (f.averageEntryIntervalMs && f.averageEntryIntervalMs >= maxFrequencyThresholdMs))
         .map(f => f.unread)
         .reduce((total, current) => total + current, 0)
 }
 
+export function categoryHasNewEntries(category?: TreeCategory, maxFrequencyThresholdMs?: number): boolean {
+    if (!category) return false
+
+    return flattenCategoryTree(category)
+        .flatMap(c => c.feeds)
+        .filter(f => !maxFrequencyThresholdMs || (f.averageEntryIntervalMs && f.averageEntryIntervalMs >= maxFrequencyThresholdMs))
+        .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
@@ -9,6 +9,7 @@ interface ImageWithPlaceholderWhileLoadingProps {
     title?: string
     width?: number
     height?: number | "auto"
+    style?: React.CSSProperties
     placeholderWidth?: number
     placeholderHeight?: number
     placeholderBackgroundColor?: string
@@ -42,7 +43,8 @@ export function ImageWithPlaceholderWhileLoading({
     src,
     title,
     width,
-}: ImageWithPlaceholderWhileLoadingProps) {
+    style,
+}: Readonly<ImageWithPlaceholderWhileLoadingProps>) {
     const { classes } = useStyles({
         placeholderWidth,
         placeholderHeight,
@@ -68,7 +70,11 @@ export function ImageWithPlaceholderWhileLoading({
                 width={width}
                 height={height}
                 onLoad={() => setLoading(false)}
-                style={{ display: loading ? "none" : "block" }}
+                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/ReceivePushNotificationsChechbox.tsx

@@ -0,0 +1,19 @@
+import { Trans } from "@lingui/react/macro"
+import { Checkbox, type CheckboxProps } from "@mantine/core"
+import type { ReactNode } from "react"
+import { useAppSelector } from "@/app/store"
+
+export const ReceivePushNotificationsChechbox = (props: CheckboxProps) => {
+    const pushNotificationsEnabled = useAppSelector(state => state.server.serverInfos?.pushNotificationsEnabled)
+    const pushNotificationsConfigured = useAppSelector(state => !!state.user.settings?.pushNotificationSettings.type)
+
+    const disabled = !pushNotificationsEnabled || !pushNotificationsConfigured
+    let description: ReactNode = ""
+    if (!pushNotificationsEnabled) {
+        description = <Trans>Push notifications are not enabled on this CommaFeed instance.</Trans>
+    } else if (!pushNotificationsConfigured) {
+        description = <Trans>Push notifications are not configured in your user settings.</Trans>
+    }
+
+    return <Checkbox label={<Trans>Receive push notifications</Trans>} disabled={disabled} description={description} {...props} />
+}

commafeed-client/src/components/RelativeDate.tsx

@@ -1,15 +1,15 @@
-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 { useEffect, useState } from "react"
+import { Constants } from "@/app/constants"
+import { useNow } from "@/hooks/useNow"
 
-export function RelativeDate(props: { date: Date | number | undefined }) {
+export function RelativeDate(
-    const [now, setNow] = useState(new Date())
+    props: Readonly<{
-    useEffect(() => {
+        date: Date | number | undefined
-        const interval = setInterval(() => setNow(new Date()), 60 * 1000)
+    }>
-        return () => clearInterval(interval)
+) {
-    }, [])
+    const now = useNow(60 * 1000)
 
     if (!props.date) return <Trans>N/A</Trans>
     const date = dayjs(props.date)

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,12 +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 { tss } from "tss"
+import styleToObject from "style-to-object"
+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
@@ -42,6 +43,7 @@ const transform: TransformCallback = node => {
         const nodeHeight = node.getAttribute("height")
         const width = nodeWidth ? Number.parseInt(nodeWidth, 10) : undefined
         const height = nodeHeight ? Number.parseInt(nodeHeight, 10) : undefined
+        const style = styleToObject(node.getAttribute("style") ?? "") ?? undefined
         const placeholderSize = calculatePlaceholderSize({
             width,
             height,
@@ -55,6 +57,7 @@ const transform: TransformCallback = node => {
                 title={title}
                 width={width}
                 height="auto"
+                style={style}
                 placeholderWidth={placeholderSize.width}
                 placeholderHeight={placeholderSize.height}
             />
@@ -64,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 {
@@ -85,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()
@@ -93,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)
@@ -128,36 +127,28 @@ export function FeedEntries() {
     }, [dispatch, entries, viewMode, scrollMarks, scrollingToEntry])
 
     useMousetrap("r", async () => await dispatch(reloadEntries()))
-    useMousetrap("j", async () => {
+    useMousetrap(
-        // load more entries if needed
+        "j",
-        // this can happen if the last entry is too large to fit on the screen and the infinite loader doesn't trigger
+        async () =>
-        if (hasMore && !loading && selectedEntry === entries[entries.length - 1]) {
+            await dispatch(
-            await dispatch(loadMoreEntries())
+                selectNextEntry({
-        }
+                    expand: true,
-
+                    markAsRead: true,
-        await dispatch(
+                    scrollToEntry: true,
-            selectNextEntry({
+                })
-                expand: true,
+            )
-                markAsRead: true,
+    )
-                scrollToEntry: true,
+    useMousetrap(
-            })
+        "n",
-        )
+        async () =>
-    })
+            await dispatch(
-    useMousetrap("n", async () => {
+                selectNextEntry({
-        // load more entries if needed
+                    expand: false,
-        // this can happen if the last entry is too large to fit on the screen and the infinite loader doesn't trigger
+                    markAsRead: false,
-        if (hasMore && !loading && selectedEntry === entries[entries.length - 1]) {
+                    scrollToEntry: true,
-            await dispatch(loadMoreEntries())
+                })
-        }
+            )
-
+    )
-        await dispatch(
-            selectNextEntry({
-                expand: false,
-                markAsRead: false,
-                scrollToEntry: true,
-            })
-        )
-    })
     useMousetrap(
         "k",
         async () =>
@@ -180,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) {
@@ -280,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()))
@@ -304,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/edit/FilteringExpressionEditor.tsx

@@ -0,0 +1,118 @@
+import { Stack } from "@mantine/core"
+import { MantineValueSelector, QueryBuilderMantine } from "@react-querybuilder/mantine"
+import {
+    type CombinatorSelectorProps,
+    defaultOperators,
+    defaultRuleProcessorCEL,
+    type Field,
+    type FormatQueryOptions,
+    formatQuery,
+    QueryBuilder,
+    type RuleGroupType,
+} from "react-querybuilder"
+import { isCELIdentifier, isCELMember, isCELStringLiteral, parseCEL } from "react-querybuilder/parseCEL"
+import "react-querybuilder/dist/query-builder.css"
+
+const fields: Field[] = [
+    { name: "title", label: "Title" },
+    { name: "content", label: "Content" },
+    { name: "url", label: "URL" },
+    { name: "author", label: "Author" },
+    { name: "categories", label: "Categories" },
+    { name: "titleLower", label: "Title (lower case)" },
+    { name: "contentLower", label: "Content (lower case)" },
+    { name: "urlLower", label: "URL  (lower case)" },
+    { name: "authorLower", label: "Author (lower case)" },
+    { name: "categoriesLower", label: "Categories (lower case)" },
+]
+
+const textOperators = new Set(["=", "!=", "contains", "beginsWith", "endsWith", "doesNotContain", "doesNotBeginWith", "doesNotEndWith"])
+
+function toCelString(query: RuleGroupType): string {
+    if (query.rules.length === 0) {
+        return ""
+    }
+
+    const celFormatOptions: FormatQueryOptions = {
+        format: "cel",
+        ruleProcessor: (rule, options, meta) => {
+            if (rule.operator === "matches") {
+                const escapedValue = String(rule.value).replaceAll("\\", "\\\\").replaceAll('"', String.raw`\"`)
+                return `${rule.field}.matches("${escapedValue}")`
+            }
+
+            return defaultRuleProcessorCEL(rule, options, meta)
+        },
+    }
+
+    return formatQuery(query, celFormatOptions)
+}
+
+function fromCelString(celString: string): RuleGroupType {
+    return parseCEL(celString ?? "", {
+        customExpressionHandler: expr => {
+            if (
+                isCELMember(expr) &&
+                expr.right?.value === "matches" &&
+                expr.left &&
+                isCELIdentifier(expr.left) &&
+                expr.list &&
+                isCELStringLiteral(expr.list.value[0])
+            ) {
+                return {
+                    field: expr.left.value,
+                    operator: "matches",
+                    value: JSON.parse(expr.list.value[0].value),
+                }
+            }
+
+            return null
+        },
+    })
+}
+
+const getOperators = () => {
+    const filteredDefault = defaultOperators.filter(op => textOperators.has(op.name))
+    return [
+        ...filteredDefault,
+        {
+            name: "matches",
+            label: "matches pattern",
+        },
+    ]
+}
+
+function CombinatorSelector(props: Readonly<CombinatorSelectorProps>) {
+    if (props.rules.length === 0) {
+        return null
+    }
+    return <MantineValueSelector {...props} />
+}
+
+interface FilteringExpressionEditorProps {
+    initialValue: string | undefined
+    onChange: (value: string) => void
+}
+
+export function FilteringExpressionEditor({ initialValue, onChange }: Readonly<FilteringExpressionEditorProps>) {
+    const handleQueryChange = (newQuery: RuleGroupType) => {
+        onChange(toCelString(newQuery))
+    }
+
+    return (
+        <Stack gap="sm">
+            <QueryBuilderMantine>
+                <QueryBuilder
+                    fields={fields}
+                    defaultQuery={fromCelString(initialValue ?? "")}
+                    onQueryChange={handleQueryChange}
+                    getOperators={getOperators}
+                    addRuleToNewGroups
+                    resetOnFieldChange={false}
+                    controlClassnames={{ queryBuilder: "queryBuilder-branches" }}
+                    controlElements={{ combinatorSelector: CombinatorSelector }}
+                />
+            </QueryBuilderMantine>
+        </Stack>
+    )
+}

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,15 +7,12 @@ import {
     Menu,
     SegmentedControl,
     type SegmentedControlItem,
+    Slider,
     useMantineColorScheme,
 } from "@mantine/core"
 import { showNotification } from "@mantine/notifications"
-import { client } from "app/client"
+import dayjs from "dayjs"
-import { redirectToAbout, redirectToAdminUsers, redirectToDonate, redirectToMetrics, redirectToSettings } from "app/redirect/thunks"
+import { type ReactNode, useEffect, useState } from "react"
-import { useAppDispatch, useAppSelector } from "app/store"
-import type { ViewMode } from "app/types"
-import { setViewMode } from "app/user/slice"
-import { type ReactNode, useState } from "react"
 import {
     TbChartLine,
     TbHeartFilled,
@@ -32,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
@@ -90,14 +95,30 @@ 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()
 
+    const nextAvailableForceRefresh = profile?.lastForceRefresh
+        ? profile.lastForceRefresh + (forceRefreshCooldownDuration ?? 0)
+        : now.getTime()
+    const forceRefreshEnabled = nextAvailableForceRefresh <= now.getTime()
+
     const logout = () => {
         window.location.href = "logout"
     }
@@ -118,18 +139,32 @@ export function ProfileMenu(props: ProfileMenuProps) {
                 </Menu.Item>
                 <Menu.Item
                     leftSection={<TbWorldDownload size={iconSize} />}
-                    onClick={async () =>
+                    disabled={!forceRefreshEnabled}
-                        await client.feed.refreshAll().then(() => {
+                    onClick={async () => {
+                        setOpened(false)
+
+                        try {
+                            await client.feed.refreshAll()
+
+                            // reload profile to update last force refresh timestamp
+                            await dispatch(reloadProfile())
+
                             showNotification({
                                 message: <Trans>Your feeds have been queued for refresh.</Trans>,
                                 color: "green",
                                 autoClose: 1000,
                             })
-                            setOpened(false)
+                        } catch {
-                        })
+                            showNotification({
-                    }
+                                message: <Trans>Force fetching feeds is not yet available.</Trans>,
+                                color: "red",
+                                autoClose: 2000,
+                            })
+                        }
+                    }}
                 >
                     <Trans>Fetch all my feeds now</Trans>
+                    {!forceRefreshEnabled && <span> ({dayjs.duration(nextAvailableForceRefresh - now.getTime()).format("HH:mm:ss")})</span>}
                 </Menu.Item>
 
                 <Divider />
@@ -160,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,24 @@
-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,
+    changeDisableMobileSwipe,
+    changeDisablePullToRefresh,
     changeEntriesToKeepOnTopWhenScrolling,
     changeExternalLinkIconDisplayMode,
+    changeInfrequentThresholdDays,
     changeLanguage,
     changeMarkAllAsReadConfirmation,
+    changeMarkAllAsReadNavigateToUnread,
     changeMobileFooter,
+    changePrimaryColor,
     changeScrollMarks,
     changeScrollMode,
     changeScrollSpeed,
@@ -20,9 +27,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 +40,18 @@ 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 disableMobileSwipe = useAppSelector(state => state.user.settings?.disableMobileSwipe)
+    const infrequentThresholdDays = useAppSelector(state => state.user.settings?.infrequentThresholdDays)
     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 +78,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 +115,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 +135,41 @@ 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>}
+                label={<Trans>On mobile, disable swipe gesture to open the menu</Trans>}
-                checked={unreadCountTitle}
+                checked={disableMobileSwipe}
-                onChange={async e => await dispatch(changeUnreadCountTitle(e.currentTarget.checked))}
+                onChange={async e => await dispatch(changeDisableMobileSwipe(e.currentTarget.checked))}
             />
 
-            <Switch
+            <NumberInput
-                label={<Trans>Show unread count in tab favicon</Trans>}
+                label={<Trans>Infrequent posts threshold (days)</Trans>}
-                checked={unreadCountFavicon}
+                description={<Trans>Feeds posting less often than this (on average) will appear in the Infrequent view</Trans>}
-                onChange={async e => await dispatch(changeUnreadCountFavicon(e.currentTarget.checked))}
+                min={1}
-            />
+                value={infrequentThresholdDays}
-
+                onChange={async value => await dispatch(changeInfrequentThresholdDays(+value))}
-            <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 +202,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/settings/PushNotificationSettings.tsx

@@ -0,0 +1,124 @@
+import { msg } from "@lingui/core/macro"
+import { useLingui } from "@lingui/react"
+import { Trans } from "@lingui/react/macro"
+import { Button, Divider, Group, Select, Stack, TextInput } from "@mantine/core"
+import { useForm } from "@mantine/form"
+import { useEffect } from "react"
+import { useAsyncCallback } from "react-async-hook"
+import { TbDeviceFloppy, TbSend } from "react-icons/tb"
+import { client, errorToStrings } from "@/app/client"
+import { redirectToSelectedSource } from "@/app/redirect/thunks"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import type { PushNotificationSettings as PushNotificationSettingsModel } from "@/app/types"
+import { changePushNotificationSettings } from "@/app/user/thunks"
+import { Alert } from "@/components/Alert"
+
+export function PushNotificationSettings() {
+    const notificationSettings = useAppSelector(state => state.user.settings?.pushNotificationSettings)
+    const pushNotificationsEnabled = useAppSelector(state => state.server.serverInfos?.pushNotificationsEnabled)
+    const { _ } = useLingui()
+    const dispatch = useAppDispatch()
+
+    const form = useForm<PushNotificationSettingsModel>()
+    useEffect(() => {
+        if (notificationSettings) form.initialize(notificationSettings)
+    }, [form.initialize, notificationSettings])
+
+    const handleSubmit = (values: PushNotificationSettingsModel) => {
+        dispatch(changePushNotificationSettings(values))
+    }
+
+    const sendTestPushNotification = useAsyncCallback(client.user.sendTestPushNotification)
+
+    const typeInputProps = form.getInputProps("type")
+
+    if (!pushNotificationsEnabled) {
+        return <Trans>Push notifications are not enabled on this CommaFeed instance.</Trans>
+    }
+    return (
+        <form onSubmit={form.onSubmit(handleSubmit)}>
+            <Stack>
+                {sendTestPushNotification.status === "success" && (
+                    <Alert level="success" messages={[_(msg`Test notification sent successfully.`)]} />
+                )}
+
+                {sendTestPushNotification.status === "error" && (
+                    <Alert level="error" messages={errorToStrings(sendTestPushNotification.error)} />
+                )}
+
+                <Select
+                    label={<Trans>Push notification service</Trans>}
+                    description={
+                        <Trans>
+                            Receive push notifications when new feed entries are discovered. Enable "Receive push notifications" in the
+                            settings of each feed for which you want to receive notifications.
+                        </Trans>
+                    }
+                    data={[
+                        { value: "ntfy", label: "ntfy" },
+                        { value: "gotify", label: "Gotify" },
+                        { value: "pushover", label: "Pushover" },
+                    ]}
+                    clearable
+                    {...typeInputProps}
+                    onChange={value => {
+                        typeInputProps.onChange(value)
+                        form.setFieldValue("serverUrl", "")
+                        form.setFieldValue("topic", "")
+                        form.setFieldValue("userSecret", "")
+                        form.setFieldValue("userId", "")
+                    }}
+                />
+                {form.values.type === "ntfy" && (
+                    <>
+                        <TextInput
+                            label={<Trans>Server URL</Trans>}
+                            placeholder="https://ntfy.sh"
+                            required
+                            {...form.getInputProps("serverUrl")}
+                        />
+                        <TextInput label={<Trans>Topic</Trans>} placeholder="commafeed" required {...form.getInputProps("topic")} />
+                        <TextInput label={<Trans>Access token</Trans>} {...form.getInputProps("userSecret")} />
+                    </>
+                )}
+                {form.values.type === "gotify" && (
+                    <>
+                        <TextInput
+                            label={<Trans>Server URL</Trans>}
+                            placeholder="https://gotify.example.com"
+                            required
+                            {...form.getInputProps("serverUrl")}
+                        />
+                        <TextInput label={<Trans>App token</Trans>} required {...form.getInputProps("userSecret")} />
+                    </>
+                )}
+                {form.values.type === "pushover" && (
+                    <>
+                        <TextInput label={<Trans>User key</Trans>} required {...form.getInputProps("userId")} />
+                        <TextInput label={<Trans>API token</Trans>} required {...form.getInputProps("userSecret")} />
+                    </>
+                )}
+
+                <Group>
+                    <Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button type="submit" leftSection={<TbDeviceFloppy size={16} />}>
+                        <Trans>Save</Trans>
+                    </Button>
+
+                    <Divider orientation="vertical" />
+
+                    <Button
+                        variant="outline"
+                        leftSection={<TbSend size={16} />}
+                        onClick={() => sendTestPushNotification.execute(form.values)}
+                        loading={sendTestPushNotification.loading}
+                    >
+                        <Trans>Test</Trans>
+                    </Button>
+                </Group>
+            </Stack>
+        </form>
+    )
+}

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, TbClock, TbInbox, TbStar, TbTag } from "react-icons/tb"
+import { Constants } from "@/app/constants"
 import {
     redirectToCategory,
     redirectToCategoryDetails,
@@ -8,20 +10,20 @@ 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"
 
 const allIcon = <TbInbox size={16} />
 const starredIcon = <TbStar size={16} />
+const infrequentIcon = <TbClock size={16} />
 const tagIcon = <TbTag size={16} />
 const expandedIcon = <TbChevronDown size={16} />
 const collapsedIcon = <TbChevronRight size={16} />
@@ -33,6 +35,10 @@ export function Tree() {
     const source = useAppSelector(state => state.entries.source)
     const tags = useAppSelector(state => state.user.tags)
     const showRead = useAppSelector(state => state.user.settings?.showRead)
+    const infrequentThresholdDays = useAppSelector(
+        state => state.user.settings?.infrequentThresholdDays ?? Constants.infrequentThresholdDaysDefault
+    )
+    const infrequentThresholdMs = infrequentThresholdDays * 24 * 3600 * 1000
     const dispatch = useAppDispatch()
 
     const isFeedDisplayed = (feed: Subscription) => {
@@ -89,10 +95,12 @@ 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}
             hasError={false}
+            hasWarning={false}
             onClick={categoryClicked}
         />
     )
@@ -103,10 +111,28 @@ 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}
             hasError={false}
+            hasWarning={false}
+            onClick={categoryClicked}
+        />
+    )
+    const infrequentCategoryNode = () => (
+        <TreeNode
+            id={Constants.categories.infrequent.id}
+            type="category"
+            name={<Trans>Infrequent</Trans>}
+            icon={infrequentIcon}
+            unread={categoryUnreadCount(root, infrequentThresholdMs)}
+            hasNewEntries={categoryHasNewEntries(root, infrequentThresholdMs)}
+            selected={source.type === "category" && source.id === Constants.categories.infrequent.id}
+            expanded={false}
+            level={0}
+            hasError={false}
+            hasWarning={false}
             onClick={categoryClicked}
         />
     )
@@ -115,6 +141,7 @@ export function Tree() {
         if (!isCategoryDisplayed(category)) return null
 
         const hasError = !category.expanded && flattenCategoryTree(category).some(c => c.feeds.some(f => f.errorCount > errorThreshold))
+        const hasWarning = !category.expanded && flattenCategoryTree(category).some(c => c.feeds.some(f => !!f.filterLegacy))
         return (
             <TreeNode
                 id={category.id}
@@ -122,10 +149,12 @@ 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}
                 hasError={hasError}
+                hasWarning={hasWarning}
                 onClick={categoryClicked}
                 onIconClick={e => categoryIconClicked(e, category)}
                 key={category.id}
@@ -133,7 +162,7 @@ export function Tree() {
         )
     }
 
-    const feedNode = (feed: Subscription, level = 0) => {
+    const feedNode = (feed: TreeSubscription, level = 0) => {
         if (!isFeedDisplayed(feed)) return null
 
         return (
@@ -143,9 +172,11 @@ 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}
+                hasWarning={!!feed.filterLegacy}
                 onClick={feedClicked}
                 key={feed.id}
             />
@@ -159,9 +190,11 @@ export function Tree() {
             name={tag}
             icon={tagIcon}
             unread={0}
+            hasNewEntries={false}
             selected={source.type === "tag" && source.id === tag}
             level={0}
             hasError={false}
+            hasWarning={false}
             onClick={tagClicked}
             key={tag}
         />
@@ -182,9 +215,10 @@ export function Tree() {
             <OnDesktop>
                 <TreeSearch feeds={feeds} />
             </OnDesktop>
-            <Box>
+            <Box className="cf-tree">
                 {allCategoryNode()}
                 {starredCategoryNode()}
+                {infrequentCategoryNode()}
                 {root.children.map(c => recursiveCategoryNode(c))}
                 {root.feeds.map(f => feedNode(f))}
                 {tags?.map(tag => tagNode(tag))}

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,8 @@ interface TreeNodeProps {
     expanded?: boolean
     level: number
     hasError: boolean
+    hasWarning: boolean
+    hasNewEntries: boolean
     onClick: (e: React.MouseEvent, id: string) => void
     onIconClick?: (e: React.MouseEvent, id: string) => void
 }
@@ -23,15 +25,18 @@ const useStyles = tss
     .withParams<{
         selected: boolean
         hasError: boolean
+        hasWarning: boolean
         hasUnread: boolean
     }>()
-    .create(({ theme, colorScheme, selected, hasError, hasUnread }) => {
+    .create(({ theme, colorScheme, selected, hasError, hasWarning, hasUnread }) => {
         let backgroundColor = "inherit"
         if (selected) backgroundColor = colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]
 
         let color: string
         if (hasError) {
             color = theme.colors.red[6]
+        } else if (hasWarning) {
+            color = theme.colors.yellow[6]
         } else if (colorScheme === "dark") {
             color = hasUnread ? theme.colors.dark[0] : theme.colors.dark[3]
         } else {
@@ -58,29 +63,30 @@ const useStyles = tss
         }
     })
 
-export function TreeNode(props: TreeNodeProps) {
+export function TreeNode(props: Readonly<TreeNodeProps>) {
     const { classes } = useStyles({
         selected: props.selected,
         hasError: props.hasError,
+        hasWarning: props.hasWarning,
         hasUnread: props.unread > 0,
     })
     return (
         <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,16 +1,25 @@
-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: {
         width: "3.2rem",
         // for some reason, mantine Badge has "cursor: 'default'"
-        cursor: "pointer",
+        cursor: "inherit",
+    },
+    indicator: {
+        // ensure the indicator is not shown above the app header
+        zIndex: 0,
     },
 }))
 
-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 +27,19 @@ 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
-                {count}
+                disabled={!props.showIndicator}
-            </Badge>
+                size={4}
+                offset={10}
+                position="middle-start"
+                classNames={{
+                    indicator: classes.indicator,
+                }}
+            >
+                <Badge className={`${classes.badge} cf-badge`} variant="light" fullWidth>
+                    {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/useNow.ts

@@ -0,0 +1,10 @@
+import { useEffect, useState } from "react"
+
+export const useNow = (interval = 1000): Date => {
+    const [time, setTime] = useState(new Date())
+    useEffect(() => {
+        const t = setInterval(() => setTime(new Date()), interval)
+        return () => clearInterval(t)
+    }, [interval])
+    return time
+}

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

@@ -15,11 +15,7 @@ msgstr ""
 
 #: src/pages/app/AboutPage.tsx
 msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitHub</1>."
-msgstr ""
+msgstr "<0>CommaFeed هو مشروع مفتوح المصدر. يتم استضافة المصادر على </0><1>GitHub</1>."
-
-#: src/pages/app/FeedDetailsPage.tsx
-msgid "<0>Complete syntax is available </0><1>here</1>."
-msgstr ""
 
 #: src/pages/auth/RegistrationPage.tsx
 msgid "<0>Have an account?</0><1>Log in!</1>"
@@ -27,7 +23,7 @@ msgstr "<0> هل لديك حساب؟ </0> <1> تسجيل الدخول! </ 1>"
 
 #: src/pages/app/DonatePage.tsx
 msgid "<0>Hey,</0><1>I'm Jérémie from Belgium and I've been working on CommaFeed in my free time for over 10 years now. Thanks for taking an interest in helping me continue supporting CommaFeed.</1>"
-msgstr ""
+msgstr "<0>مرحبًا،</0><1>أنا جيريمي من بلجيكا وأنا أعمل على CommaFeed في وقت فراغي منذ أكثر من 10 سنوات. شكرًا لاهتمامك بمساعدتي في الاستمرار في دعم CommaFeed.</1>"
 
 #: src/pages/auth/LoginPage.tsx
 msgid "<0>Need an account?</0><1>Sign up!</1>"
@@ -38,6 +34,10 @@ msgstr "<0> هل تحتاج إلى حساب؟ </0> <1> اشترك! </ 1>"
 msgid "About"
 msgstr "حول"
 
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Access token"
+msgstr "رمز الوصول"
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Actions"
 msgstr "الإجراءات"
@@ -60,17 +60,23 @@ 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 "الكل"
 
 #: src/components/settings/DisplaySettings.tsx
 #: src/components/settings/DisplaySettings.tsx
 msgid "Always"
-msgstr ""
+msgstr "دائمًا"
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "An email has been sent if this address was registered. Check your inbox."
@@ -86,12 +92,20 @@ msgstr "تحليل التغذية"
 
 #: src/components/AnnouncementDialog.tsx
 msgid "Announcement"
-msgstr ""
+msgstr "إعلان"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "API key"
 msgstr "مفتاح API"
 
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "API token"
+msgstr "رمز API"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "App token"
+msgstr "رمز التطبيق"
+
 #: src/pages/app/CategoryDetailsPage.tsx
 msgid "Are you sure you want to delete category <0>{categoryName}</0>?"
 msgstr "هل أنت متأكد أنك تريد حذف الفئة <0> {categoryName} </0>؟"
@@ -104,11 +118,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> كمقروءة؟"
 
@@ -121,36 +135,46 @@ msgid "Asc"
 msgstr "تصاعدي"
 
 #: src/pages/app/FeedDetailsPage.tsx
-msgid "Available variables are 'title', 'content', 'url' 'author' and 'categories' and their content is converted to lower case to ease string comparison."
+msgid "Auto-mark as read"
-msgstr "المتغيرات المتاحة هي \"العنوان\" و \"المحتوى\" و \"url\" و \"المؤلف\" و \"الفئات\" ويتم تحويل محتواها إلى أحرف صغيرة لتسهيل مقارنة السلسلة."
+msgstr "وضع علامة مقروء تلقائيًا"
 
 #: src/components/content/add/Subscribe.tsx
 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 ""
+msgstr "أزرق"
 
 #: src/pages/app/AboutPage.tsx
-msgid "Browser extention"
+msgid "Browser extension"
-msgstr ""
+msgstr "إضافة المتصفح"
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Browser extension required for Chrome"
+msgstr "إضافة المتصفح مطلوبة لـ Chrome"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Browser tab"
-msgstr ""
+msgstr "علامة تبويب المتصفح"
+
+#: src/pages/app/FeedDetailsPage.tsx
+msgid "Build a filter expression to indicate what you want to read. Entries that don't match will be marked as read automatically."
+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
+#: src/components/settings/PushNotificationSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
@@ -178,19 +202,19 @@ msgstr "تأكد من عمل الخلاصة"
 
 #: src/pages/app/Layout.tsx
 msgid "Close menu"
-msgstr ""
+msgstr "إغلاق القائمة"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Cmd"
-msgstr ""
+msgstr "Cmd"
 
 #: src/pages/app/AboutPage.tsx
 msgid "CommaFeed browser extension version {browserExtensionVersion}."
-msgstr ""
+msgstr "إصدار إضافة متصفح CommaFeed هو {browserExtensionVersion}."
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "CommaFeed is compatible with the Fever API. Use the following URL in your Fever-compatible mobile client. Login with your username and your <0>API key</0>."
-msgstr ""
+msgstr "CommaFeed متوافق مع Fever API. استخدم عنوان URL التالي في تطبيق الهاتف المتوافق مع Fever. قم بتسجيل الدخول باستخدام اسم المستخدم و <0>مفتاح API</0> الخاص بك."
 
 #: src/pages/app/AboutPage.tsx
 msgid "CommaFeed next unread item"
@@ -198,13 +222,13 @@ msgstr "CommaFeed التالي العنصر غير المقروء"
 
 #: src/pages/app/AboutPage.tsx
 msgid "CommaFeed version {version} ({revision})."
-msgstr ""
+msgstr "إصدار CommaFeed هو {version} ({revision})."
 
 #: src/components/header/ProfileMenu.tsx
 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 +240,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 "السيطرة"
@@ -230,24 +263,33 @@ msgstr "كلمة المرور الحالية"
 
 #: src/pages/app/SettingsPage.tsx
 msgid "Custom code"
-msgstr ""
+msgstr "كود مخصص"
 
 #: src/components/settings/CustomCodeSettings.tsx
 msgid "Custom CSS rules that will be applied"
-msgstr ""
+msgstr "قواعد CSS المخصصة التي سيتم تطبيقها"
 
 #: src/components/settings/CustomCodeSettings.tsx
 msgid "Custom JS code that will be executed on page load"
-msgstr ""
+msgstr "كود JS المخصص الذي سيتم تنفيذه عند تحميل الصفحة"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Cyan"
+msgstr "سيان"
 
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 msgid "Dark"
-msgstr ""
+msgstr "داكن"
 
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "تاريخ الإنشاء"
 
+#: src/pages/app/FeedDetailsPage.tsx
+msgid "days"
+msgstr "أيام"
+
 #: src/pages/app/CategoryDetailsPage.tsx
 msgid "Delete"
 msgstr "حذف"
@@ -271,9 +313,14 @@ msgstr "تنازلي"
 
 #: src/components/header/ProfileMenu.tsx
 msgid "Detailed"
-msgstr ""
+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 "عرض"
@@ -281,7 +328,7 @@ msgstr "عرض"
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/DonatePage.tsx
 msgid "Donate"
-msgstr ""
+msgstr "تبرع"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "Download"
@@ -294,6 +341,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"
@@ -323,20 +372,16 @@ msgstr "أدخل كلمة المرور الحالية لتغيير إعدادا
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Entries to keep above the selected entry when scrolling"
-msgstr ""
+msgstr "عدد الإدخالات التي يجب الاحتفاظ بها فوق الإدخال المحدد عند التمرير"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Entry headers"
-msgstr ""
+msgstr "عناوين الإدخالات"
 
 #: src/components/Alert.tsx
 msgid "Error"
 msgstr "خطأ"
 
-#: src/pages/app/FeedDetailsPage.tsx
-msgid "Example: {example}."
-msgstr "مثال: {مثال}."
-
 #: src/components/header/ProfileMenu.tsx
 msgid "Expanded"
 msgstr "موسع"
@@ -348,7 +393,7 @@ msgstr "قم بتصدير اشتراكاتك وفئاتك كملف OPML يمكن
 #: src/components/header/Header.tsx
 #: src/pages/WelcomePage.tsx
 msgid "Extension options"
-msgstr ""
+msgstr "خيارات الإضافة"
 
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
@@ -362,20 +407,28 @@ msgstr "موجز URL"
 
 #: src/components/header/ProfileMenu.tsx
 msgid "Fetch all my feeds now"
-msgstr ""
+msgstr "تحديث جميع الخلاصات الآن"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "Fever API"
-msgstr ""
+msgstr "Fever API"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "Fever API URL"
-msgstr ""
+msgstr "رابط Fever API"
 
 #: src/pages/app/FeedDetailsPage.tsx
 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 "التحديث الإجباري للخلاصات غير متاح بعد."
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Forgot password?"
 msgstr "هل نسيت كلمة المرور؟"
@@ -396,9 +449,10 @@ msgstr "إنشاء مفتاح API جديد"
 msgid "Generated feed url"
 msgstr "رابط الخلاصة المولدة"
 
+#. placeholder {0}: truncate(props.entry.feedName, 30)
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Go to {0}"
-msgstr ""
+msgstr "الذهاب إلى {0}"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Go to the All view"
@@ -412,17 +466,25 @@ 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 "المرجع نفسه"
 
-#: src/pages/app/FeedDetailsPage.tsx
-msgid "If not empty, an expression evaluating to 'true' or 'false'. If false, new entries for this feed will be marked as read automatically."
-msgstr "إذا لم يكن فارغًا ، فسيتم تقييم التعبير إلى \"صواب\" أو \"خطأ\". "
-
 #: src/components/settings/DisplaySettings.tsx
 msgid "If the entry doesn't entirely fit on the screen"
-msgstr ""
+msgstr "إذا كان الإدخال لا يتناسب تمامًا مع الشاشة"
 
 #: src/pages/app/AboutPage.tsx
 msgid "If you encounter an issue, please report it on the issues page of the GitHub project."
@@ -436,6 +498,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"
@@ -464,7 +538,11 @@ msgstr "آخر رسالة تحديث"
 
 #: src/components/header/ProfileMenu.tsx
 msgid "Light"
-msgstr ""
+msgstr "فاتح"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Lime"
+msgstr "ليموني"
 
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
@@ -472,6 +550,10 @@ msgstr ""
 msgid "Link"
 msgstr "رابط"
 
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Link to the documentation"
+msgstr "رابط الوثائق"
+
 #: src/hooks/useAppLoading.ts
 msgid "Loading profile..."
 msgstr "تحميل ملف التعريف ..."
@@ -500,19 +582,19 @@ msgstr "تسجيل الخروج"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Long press"
-msgstr ""
+msgstr "ضغط مطول"
 
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/admin/AdminUsersPage.tsx
 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 "تعليم كافة الإدخالات كمقروءة"
 
@@ -526,13 +608,17 @@ msgstr "وضع علامة كمقروء"
 msgid "Mark as read up to here"
 msgstr "وضع علامة كمقروءة حتى هنا"
 
+#: src/pages/app/FeedDetailsPage.tsx
+msgid "Mark entries in this feed as read after this number of days. Leave empty to disable."
+msgstr "ضع علامة مقروء على الإدخالات في هذه الخلاصة بعد هذا العدد من الأيام. اتركه فارغًا للتعطيل."
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Metrics"
 msgstr "المقاييس"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Middle click"
-msgstr ""
+msgstr "نقرة بالزر الأوسط"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Move the page down"
@@ -558,15 +644,24 @@ 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"
-msgstr ""
+msgstr "أبدا"
 
 #: src/components/settings/ProfileSettings.tsx
 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 "الأحدث أولاً"
@@ -590,7 +685,7 @@ msgstr "لا مزيد من الإدخالات"
 
 #: src/components/content/ShareButtons.tsx
 msgid "No sharing options available."
-msgstr ""
+msgstr "لا توجد خيارات مشاركة متاحة."
 
 #: src/components/sidebar/TreeSearch.tsx
 msgid "Nothing found"
@@ -602,27 +697,27 @@ msgstr "الأقدم أولا"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "On desktop"
-msgstr ""
+msgstr "على سطح المكتب"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "On mobile"
-msgstr ""
+msgstr "على الهاتف"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "On mobile, show action buttons at the bottom of the screen"
-msgstr ""
+msgstr "على الهاتف، أظهر أزرار الإجراءات في أسفل الشاشة"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Only applies to compact, cozy and detailed modes"
-msgstr ""
+msgstr "ينطبق فقط على الأوضاع المضغوطة، والدافئة، والمفصلة"
 
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
-msgstr "اوووه!"
+msgstr "عذراً!"
 
 #: src/components/header/Header.tsx
 msgid "Open CommaFeed"
-msgstr ""
+msgstr "افتح CommaFeed"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
@@ -639,15 +734,15 @@ msgstr "افتح الرابط"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Open link in new background tab"
-msgstr ""
+msgstr "افتح الرابط في علامة تبويب خلفية جديدة"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Open link in new tab"
-msgstr ""
+msgstr "افتح الرابط في علامة تبويب جديدة"
 
 #: src/pages/app/Layout.tsx
 msgid "Open menu"
-msgstr ""
+msgstr "افتح القائمة"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open next entry"
@@ -663,7 +758,7 @@ msgstr "فتح / إغلاق الإدخال الحالي"
 
 #: src/pages/app/AddPage.tsx
 msgid "OPML"
-msgstr ""
+msgstr "OPML"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "OPML export"
@@ -676,11 +771,15 @@ msgstr "ملف OPML"
 
 #: src/components/content/add/ImportOpml.tsx
 msgid "OPML file is required"
-msgstr ""
+msgstr "ملف OPML مطلوب"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Orange"
+msgstr "برتقالي"
 
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
-msgstr "طلب"
+msgstr "ترتيب"
 
 #: src/components/content/add/AddCategory.tsx
 msgid "Parent"
@@ -691,6 +790,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
@@ -698,31 +799,72 @@ msgstr "الفئة الأصل"
 msgid "Password"
 msgstr "كلمة المرور"
 
+#: src/hooks/useValidationRules.ts
+msgid "Password must be at least {minimumPasswordLength} characters"
+msgstr "يجب أن تكون كلمة المرور على الأقل {minimumPasswordLength} أحرف"
+
 #: 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"
-msgstr "المنـصب"
+msgstr "المنصب"
 
 #: src/components/header/Header.tsx
 msgid "Previous"
-msgstr ""
+msgstr "السابق"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Primary color"
+msgstr "اللون الأساسي"
 
 #: src/pages/app/SettingsPage.tsx
 msgid "Profile"
 msgstr "الملف الشخصي"
 
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Push notification service"
+msgstr "خدمة إشعارات الدفع"
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Push notifications"
+msgstr "إشعارات الدفع"
+
+#: src/components/ReceivePushNotificationsChechbox.tsx
+msgid "Push notifications are not configured in your user settings."
+msgstr "لم يتم تكوين إشعارات الدفع في إعدادات المستخدم الخاصة بك."
+
+#: src/components/ReceivePushNotificationsChechbox.tsx
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Push notifications are not enabled on this CommaFeed instance."
+msgstr "إشعارات الدفع غير مفعلة في مثيل CommaFeed هذا."
+
+#: src/components/ReceivePushNotificationsChechbox.tsx
+msgid "Receive push notifications"
+msgstr "تلقي إشعارات الدفع"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Receive push notifications when new feed entries are discovered. Enable \"Receive push notifications\" in the settings of each feed for which you want to receive notifications."
+msgstr "تلقي إشعارات الدفع عند اكتشاف إدخالات خلاصة جديدة. قم بتمكين \"تلقي إشعارات الدفع\" في إعدادات كل خلاصة تريد تلقي إشعارات لها."
+
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "Recover password"
 msgstr "استعادة كلمة السر"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Red"
+msgstr "أحمر"
+
 #: src/components/header/Header.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Refresh"
@@ -732,18 +874,24 @@ 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 ""
+msgstr "REST API"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Right click"
-msgstr ""
+msgstr "نقرة بالزر الأيمن"
 
 #: src/components/admin/UserEdit.tsx
 #: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
+#: src/components/settings/PushNotificationSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Save"
@@ -751,7 +899,7 @@ msgstr "حفظ"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Scroll selected entry to the top of the page"
-msgstr ""
+msgstr "تمرير الإدخال المحدد إلى أعلى الصفحة"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Scroll smoothly when navigating between entries"
@@ -759,7 +907,7 @@ msgstr "قم بالتمرير بسلاسة عند التنقل بين الإدخ
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Scrolling"
-msgstr ""
+msgstr "التمرير"
 
 #: src/components/header/Header.tsx
 #: src/components/header/Header.tsx
@@ -768,9 +916,18 @@ 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/settings/PushNotificationSettings.tsx
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Server URL"
+msgstr "رابط الخادم"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Set focus on next entry without opening it"
@@ -804,23 +961,23 @@ msgstr "الحلقة"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show CommaFeed's own context menu on right click"
-msgstr ""
+msgstr "إظهار قائمة السياق الخاصة بـ CommaFeed عند النقر بزر الماوس الأيمن"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show confirmation when marking all entries as read"
-msgstr ""
+msgstr "إظهار تأكيد عند وضع علامة مقروء على كافة الإدخالات"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Show entry menu (desktop)"
-msgstr ""
+msgstr "إظهار قائمة الإدخال (سطح المكتب)"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Show entry menu (mobile)"
-msgstr ""
+msgstr "إظهار قائمة الإدخال (الهاتف)"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show external link icon"
-msgstr ""
+msgstr "إظهار أيقونة الرابط الخارجي"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show feeds and categories with no unread entries"
@@ -832,19 +989,19 @@ msgstr "إظهار تعليمات اختصار لوحة المفاتيح"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Show native menu (desktop)"
-msgstr ""
+msgstr "إظهار القائمة الأصلية (سطح المكتب)"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show star icon"
-msgstr ""
+msgstr "إظهار أيقونة النجمة"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show unread count in tab favicon"
-msgstr ""
+msgstr "إظهار عدد غير المقروء في أيقونة التبويب"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show unread count in tab title"
-msgstr ""
+msgstr "إظهار عدد غير المقروء في عنوان التبويب"
 
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
@@ -867,8 +1024,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 "مميز بنجمة"
 
@@ -892,7 +1050,7 @@ msgstr "النجاح"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Swipe header to the left"
-msgstr ""
+msgstr "اسحب الرأس لليسار"
 
 #: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
@@ -904,13 +1062,25 @@ msgstr "قم بالتبديل إلى النسق الفاتح"
 
 #: src/components/header/ProfileMenu.tsx
 msgid "System"
-msgstr ""
+msgstr "النظام"
 
 #: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Tags"
 msgstr "الكلمات"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Teal"
+msgstr "أزرق مخضر"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Test"
+msgstr "اختبار"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Test notification sent successfully."
+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 للتغذية التي تريد الاشتراك فيها. "
@@ -919,9 +1089,18 @@ msgstr "عنوان URL للتغذية التي تريد الاشتراك فيه
 msgid "Theme"
 msgstr "الموضوع"
 
+#. placeholder {0}: feed.filterLegacy
+#: src/pages/app/FeedDetailsPage.tsx
+msgid "This feed has a legacy filter that cannot be edited and is not applied. Please recreate the filter using the new expression editor. The legacy filter expression was: <0>{0}</0>"
+msgstr "تحتوي هذه الخلاصة على فلتر قديم لا يمكن تحريره ولا يتم تطبيقه. يرجى إعادة إنشاء الفلتر باستخدام محرر التعبيرات الجديد. كان تعبير الفلتر القديم هو: <0>{0}</0>"
+
 #: src/components/settings/ProfileSettings.tsx
 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 ""
+msgstr "هذا هو مفتاح API الخاص بك. يمكن استخدامه لبعض عمليات API للقراءة فقط ويمنح الوصول إلى Fever API. استخدم النموذج الموجود في أسفل الصفحة لإنشاء مفتاح API جديد"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "This setting can cause scrolling issues on some browsers (e.g. Safari)"
+msgstr "هذا الإعداد يمكن أن يسبب مشاكل في التمرير في بعض المتصفحات (مثل Safari)"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle read status of current entry"
@@ -929,19 +1108,23 @@ msgstr "تبديل قراءة حالة الإدخال الحالي"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle sidebar"
-msgstr ""
+msgstr "تبديل الشريط الجانبي"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle starred status of current entry"
-msgstr ""
+msgstr "تبديل الحالة المميزة بنجمة للإدخال الحالي"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Topic"
+msgstr "موضوع"
 
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
-msgstr "جرب CommaFeed باستخدام الحساب التجريبي: تجريبي / تجريبي"
+msgstr "جرب CommaFeed باستخدام الحساب التجريبي: demo/demo"
 
 #: src/pages/WelcomePage.tsx
 msgid "Try the demo!"
-msgstr ""
+msgstr "جرب النسخة التجريبية!"
 
 #: src/components/header/Header.tsx
 msgid "Unread"
@@ -958,6 +1141,10 @@ msgstr "إلغاء النجم"
 msgid "Unsubscribe"
 msgstr "إلغاء الاشتراك"
 
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "User key"
+msgstr "مفتاح المستخدم"
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "User name"
 msgstr "اسم المستخدم"
@@ -967,6 +1154,10 @@ msgstr "اسم المستخدم"
 msgid "User Name or E-mail"
 msgstr "اسم المستخدم أو البريد الإلكتروني"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Violet"
+msgstr "بنفسجي"
+
 #: src/components/Alert.tsx
 msgid "Warning"
 msgstr "تحذير"
@@ -975,10 +1166,22 @@ 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 "مرحباً! يبدو أن هذه هي المرة الأولى التي تقوم فيها بتشغيل CommaFeed. يرجى إنشاء حساب مسؤول للبدء."
+
+#: 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 "ليس لديك أي اشتراكات حتى الآن. "
+msgstr "ليس لديك أي اشتراكات حتى الآن. لمَ لا تحاول إضافة واحد بالنقر فوق علامة + في أعلى الصفحة؟"
 
 #: src/components/header/ProfileMenu.tsx
 msgid "Your feeds have been queued for refresh."
-msgstr ""
+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

@@ -17,10 +17,6 @@ msgstr ""
 msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitHub</1>."
 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>."
-msgstr "<0>La sintaxi completa està disponible </0><1>aquí</1>."
-
 #: src/pages/auth/RegistrationPage.tsx
 msgid "<0>Have an account?</0><1>Log in!</1>"
 msgstr "<0>Teniu un compte?</0><1>Inicieu la sessió!</1>"
@@ -38,13 +34,17 @@ msgstr "<0>Necessites un compte?</0><1>Registreu-vos!</1>"
 msgid "About"
 msgstr "Sobre"
 
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Access token"
+msgstr "Token d'accés"
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Actions"
 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 "Nom d'usuari de l'administrador"
+
 #: 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,19 @@ msgstr "Anunci"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "API key"
-msgstr "clau API"
+msgstr "Clau API"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "API token"
+msgstr "Token d'API"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "App token"
+msgstr "Token d'aplicació"
 
 #: 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,53 +118,63 @@ 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"
 msgstr "Asc"
 
 #: src/pages/app/FeedDetailsPage.tsx
-msgid "Available variables are 'title', 'content', 'url' 'author' and 'categories' and their content is converted to lower case to ease string comparison."
+msgid "Auto-mark as read"
-msgstr "Les variables disponibles són \"títol\", \"contingut\", \"url\" \"autor\" i \"categories\" i el seu contingut es converteix en minúscules per facilitar la comparació de cadenes."
+msgstr "Marcar com a llegit automàticament"
 
 #: src/components/content/add/Subscribe.tsx
 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/pages/app/FeedDetailsPage.tsx
+msgid "Build a filter expression to indicate what you want to read. Entries that don't match will be marked as read automatically."
+msgstr "Creeu una expressió de filtratge per indicar què voleu llegir. Les entrades que no coincideixin es marcaran com a llegides automàticament."
 
 #: 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
+#: src/components/settings/PushNotificationSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
@@ -182,7 +206,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 +228,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 +240,19 @@ msgstr "Confirma"
 msgid "Confirm password"
 msgstr "Confirmeu la contrasenya"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Confirm Password"
+msgstr "Confirma la contrasenya"
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Cozy"
 msgstr "Acollidor"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Create Admin Account"
+msgstr "Crea un compte d'administrador"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr "Ctrl"
@@ -240,7 +273,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"
 
@@ -248,6 +286,10 @@ msgstr "Fosc"
 msgid "Date created"
 msgstr "Data de creació"
 
+#: src/pages/app/FeedDetailsPage.tsx
+msgid "days"
+msgstr "dies"
+
 #: src/pages/app/CategoryDetailsPage.tsx
 msgid "Delete"
 msgstr "Eliminar"
@@ -273,7 +315,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 +341,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 +360,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,20 +372,16 @@ 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"
 msgstr "Error"
 
-#: src/pages/app/FeedDetailsPage.tsx
-msgid "Example: {example}."
-msgstr "Exemple: {exemple}."
-
 #: src/components/header/ProfileMenu.tsx
 msgid "Expanded"
 msgstr "Ampliat"
@@ -366,16 +411,24 @@ 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 "La recuperació forçada de feeds encara no està disponible."
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Forgot password?"
 msgstr "Heu oblidat la contrasenya?"
@@ -396,6 +449,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}"
@@ -410,16 +464,24 @@ 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"
 msgstr "Id"
 
-#: src/pages/app/FeedDetailsPage.tsx
-msgid "If not empty, an expression evaluating to 'true' or 'false'. If false, new entries for this feed will be marked as read automatically."
-msgstr "Si no està buida, una expressió que s'avalua com a \"vertader\" o \"fals\". "
-
 #: src/components/settings/DisplaySettings.tsx
 msgid "If the entry doesn't entirely fit on the screen"
 msgstr "Si l'entrada no encaixa del tot a la pantalla"
@@ -434,7 +496,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 "Configuració inicial"
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Invalid password reset link. Please request a new one."
+msgstr "L'enllaç de restabliment de la contrasenya no és vàlid. Sol·liciteu-ne un de nou."
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
@@ -466,12 +540,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..."
@@ -500,19 +582,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"
 
@@ -526,6 +608,10 @@ msgstr "Marca com a llegit"
 msgid "Mark as read up to here"
 msgstr "Marca com a llegit fins aquí"
 
+#: src/pages/app/FeedDetailsPage.tsx
+msgid "Mark entries in this feed as read after this number of days. Leave empty to disable."
+msgstr "Marca les entrades d'aquest feed com a llegides després d'aquest nombre de dies. Deixeu-ho buit per desactivar-lo."
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Metrics"
 msgstr "mètriques"
@@ -545,7 +631,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
@@ -558,6 +644,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"
@@ -567,6 +657,11 @@ msgstr "Mai"
 msgid "New password"
 msgstr "Contrasenya nova"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "New Password"
+msgstr "Contrasenya nova"
+
 #: src/pages/app/AboutPage.tsx
 msgid "Newest first"
 msgstr "El més nou primer"
@@ -590,7 +685,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"
@@ -602,11 +697,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"
@@ -614,7 +709,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!"
@@ -676,7 +771,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"
@@ -691,6 +790,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
@@ -698,14 +799,22 @@ msgstr "Categoria pare"
 msgid "Password"
 msgstr "Contrasenya"
 
+#: src/hooks/useValidationRules.ts
+msgid "Password must be at least {minimumPasswordLength} characters"
+msgstr "La contrasenya ha de tenir almenys {minimumPasswordLength} caràcters"
+
 #: 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"
@@ -715,14 +824,47 @@ 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"
 
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Push notification service"
+msgstr "Servei de notificacions push"
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Push notifications"
+msgstr "Notificacions push"
+
+#: src/components/ReceivePushNotificationsChechbox.tsx
+msgid "Push notifications are not configured in your user settings."
+msgstr "Les notificacions push no estan configurades a la vostra configuració d'usuari."
+
+#: src/components/ReceivePushNotificationsChechbox.tsx
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Push notifications are not enabled on this CommaFeed instance."
+msgstr "Les notificacions push no estan activades en aquesta instància de CommaFeed."
+
+#: src/components/ReceivePushNotificationsChechbox.tsx
+msgid "Receive push notifications"
+msgstr "Rep notificacions push"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Receive push notifications when new feed entries are discovered. Enable \"Receive push notifications\" in the settings of each feed for which you want to receive notifications."
+msgstr "Rebre notificacions push quan es descobreixin noves entrades de feed. Activeu \"Rep notificacions push\" a la configuració de cada feed per al qual vulgueu rebre notificacions."
+
 #: src/pages/auth/PasswordRecoveryPage.tsx
 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"
@@ -732,6 +874,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 "Restableix la contrasenya"
+
 #: src/pages/app/AboutPage.tsx
 msgid "REST API"
 msgstr "API REST"
@@ -744,6 +891,7 @@ msgstr "Clic dret"
 #: src/components/admin/UserEdit.tsx
 #: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
+#: src/components/settings/PushNotificationSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Save"
@@ -768,13 +916,22 @@ 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/settings/PushNotificationSettings.tsx
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Server URL"
+msgstr "URL del servidor"
 
 #: 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"
@@ -794,7 +951,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
@@ -820,7 +977,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"
@@ -836,15 +993,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
@@ -867,8 +1024,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"
 
@@ -911,6 +1069,18 @@ msgstr "Sistema"
 msgid "Tags"
 msgstr "Etiquetes"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Teal"
+msgstr "Blau verdós"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Test"
+msgstr "Prova"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Test notification sent successfully."
+msgstr "La notificació de prova s'ha enviat correctament."
+
 #: 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. "
@@ -919,10 +1089,19 @@ msgstr "l'URL del canal al qual us voleu subscriure. "
 msgid "Theme"
 msgstr "Tema"
 
+#. placeholder {0}: feed.filterLegacy
+#: src/pages/app/FeedDetailsPage.tsx
+msgid "This feed has a legacy filter that cannot be edited and is not applied. Please recreate the filter using the new expression editor. The legacy filter expression was: <0>{0}</0>"
+msgstr "Aquest feed té un filtre heretat que no es pot editar i no s'aplica. Torneu a crear el filtre amb el nou editor d'expressions. L'expressió del filtre heretat era: <0>{0}</0>"
+
 #: src/components/settings/ProfileSettings.tsx
 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"
@@ -935,6 +1114,10 @@ msgstr "Canvia la barra lateral"
 msgid "Toggle starred status of current entry"
 msgstr "Commuta l'estat destacat de l'entrada actual"
 
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Topic"
+msgstr "Tema"
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Proveu CommaFeed amb el compte de demostració: demo/demo"
@@ -958,6 +1141,10 @@ msgstr "Desestrellar"
 msgid "Unsubscribe"
 msgstr "Donar-se de baixa"
 
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "User key"
+msgstr "Clau d'usuari"
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "User name"
 msgstr "Nom d'usuari"
@@ -967,6 +1154,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"
@@ -975,6 +1166,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 "Benvingut! Sembla que aquesta és la primera vegada que executeu CommaFeed. Creeu un compte d'administrador per començar."
+
+#: 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ó. "
@@ -982,3 +1181,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 "La vostra contrasenya s'ha canviat. Ara podeu iniciar la sessió amb la vostra nova contrasenya."