Update linguijs monorepo to v6.12.0

Update dependency @vitejs/plugin-react to v6.2.1

.gitattributes

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

.github/stale.yml

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

.github/workflows/ci.yml

@@ -1,227 +1,284 @@
-name: ci
+name: ci
-permissions:
+permissions:
-  contents: read
+  contents: read
-
+
-on:
+on:
-  push:
+  push:
-  pull_request:
+  pull_request:
-
+
-env:
+env:
-  JAVA_VERSION: 21
+  JAVA_VERSION: 25
-  DOCKER_BUILD_SUMMARY: false
+  DOCKER_BUILD_SUMMARY: false
-
+
-jobs:
+jobs:
-  build:
+  build:
-    if: github.event_name != 'pull_request' || github.actor != 'renovate[bot]' # renovate already triggers the build on pushes
+    if: github.event_name != 'pull_request' || github.actor != 'renovate[bot]' # renovate already triggers the build on pushes
-
+
-    strategy:
+    strategy:
-      matrix:
+      matrix:
-        os: [ "ubuntu-latest", "ubuntu-22.04-arm", "windows-latest" ]
+        os: [ "ubuntu-24.04", "ubuntu-22.04-arm", "windows-latest" ]
-        database: [ "h2", "postgresql", "mysql", "mariadb" ]
+        database: [ "h2", "postgresql", "mysql", "mariadb" ]
-
+
-    runs-on: ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
-    steps:
+    steps:
-      # Checkout
+      # Checkout
-      - name: Configure git to checkout as-is
+      - name: Checkout
-        run: git config --global core.autocrlf false
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-
+        with:
-      - name: Checkout
+          fetch-depth: 0
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+
-        with:
+      # Setup
-          fetch-depth: 0
+      - name: Set up GraalVM
-
+        uses: graalvm/setup-graalvm@f70bc8032f90a104502824a54bcb94b6f01715bc # v1.6.8
-      # Setup
+        with:
-      - name: Set up GraalVM
+          java-version: ${{ env.JAVA_VERSION }}
-        uses: graalvm/setup-graalvm@b0cb26a8da53cb3e97cdc0c827d8e3071240e730 # v1
+          distribution: "mandrel"
-        with:
+          cache: "maven"
-          java-version: ${{ env.JAVA_VERSION }}
+
-          distribution: "graalvm"
+      - name: Set up NodeJS cache
-          cache: "maven"
+        uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
-
+        with:
-      - name: Install Playwright dependencies
+          cache: "npm"
-        run: sudo apt-get install -y libgbm1
+          cache-dependency-path: 'commafeed-client/package-lock.json'
-        if: matrix.os != 'windows-latest'
+
-
+      - name: Install Playwright dependencies
-      # Build & Test
+        run: sudo apt-get install -y libgbm1
-      - name: Build with Maven
+        if: matrix.os != 'windows-latest'
-        run: mvn --batch-mode --no-transfer-progress install -Pnative -P${{ matrix.database }} -DskipTests=${{ matrix.os == 'windows-latest' && matrix.database != 'h2' }}
+
-
+      # Build & Test
-      # Upload artifacts
+      - name: Build with Maven
-      - name: Upload cross-platform app
+        run: mvn --batch-mode --no-transfer-progress install -Pnative -P${{ matrix.database }} -DskipITs=${{ matrix.os == 'windows-latest' && matrix.database != 'h2' }}
-        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4
+
-        if: matrix.os == 'ubuntu-latest' # we only need to upload the cross-platform artifact once per database
+      # Build pages
-        with:
+      - name: Create pages directory structure
-          name: commafeed-${{ matrix.database }}-jvm
+        run: mkdir -p target/pages/documentation/custom-css
-          path: commafeed-server/target/commafeed-*.zip
+
-
+      - name: Convert readme file to html
-      - name: Upload native executable
+        uses: jaywcjlove/markdown-to-html-cli@cff9330af4ca8048b197a76d9eb1db189c2a7cee # v5.0.4
-        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4
+        with:
-        with:
+          source: README.md
-          name: commafeed-${{ matrix.database }}-${{ runner.os }}-${{ runner.arch }}
+          output: target/pages/index.html
-          path: commafeed-server/target/commafeed-*-runner*
+
-
+      - name: Convert config documentation to html
-  docker:
+        uses: jaywcjlove/markdown-to-html-cli@cff9330af4ca8048b197a76d9eb1db189c2a7cee # v5.0.4
-    runs-on: ubuntu-latest
+        with:
-    needs: build
+          source: commafeed-server/target/quarkus-generated-doc/config/commafeed-server.md
-    env:
+          output: target/pages/documentation/index.html
-      DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+
-
+      - name: Convert custom css documentation to html
-    strategy:
+        uses: jaywcjlove/markdown-to-html-cli@cff9330af4ca8048b197a76d9eb1db189c2a7cee # v5.0.4
-      matrix:
+        with:
-        database: [ "h2", "postgresql", "mysql", "mariadb" ]
+          source: documentation/CUSTOMCSS.md
-
+          output: target/pages/documentation/custom-css/index.html
-    steps:
+
-      # Checkout
+      # Upload artifacts
-      - name: Checkout
+      - name: Upload cross-platform app
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9 # v7.0.2
-        with:
+        if: matrix.os == 'ubuntu-24.04' # we only need to upload the cross-platform artifact once per database
-          fetch-depth: 0
+        with:
-
+          name: commafeed-${{ matrix.database }}-jvm
-      # Setup
+          path: commafeed-server/target/commafeed-*.zip
-      - name: Set up QEMU
+
-        uses: docker/setup-qemu-action@4574d27a4764455b42196d70a065bc6853246a25 # v3
+      - name: Upload native executable
-
+        uses: actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9 # v7.0.2
-      - name: Set up Docker Buildx
+        with:
-        uses: docker/setup-buildx-action@f7ce87c1d6bead3e36075b2ce75da1f6cc28aaca # v3
+          name: commafeed-${{ matrix.database }}-${{ runner.os }}-${{ runner.arch }}
-
+          path: commafeed-server/target/commafeed-*-runner*
-      - name: Install required packages
+
-        run: sudo apt-get install -y rename unzip
+      - name: Upload pages
-
+        uses: actions/upload-pages-artifact@fc324d3547104276b827a68afc52ff2a11cc49c9 # v5.0.0
-      # Prepare artifacts
+        if: matrix.os == 'ubuntu-24.04' && matrix.database == 'h2' # we only need to upload the pages once
-      - name: Download artifacts
+        with:
-        uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4
+          path: target/pages
-        with:
+
-          pattern: commafeed-${{ matrix.database }}-*
+  docker:
-          path: ./artifacts
+    runs-on: ubuntu-latest
-          merge-multiple: true
+    needs: build
-
+    env:
-      - name: Set the exec flag on the native executables
+      DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-        run: chmod +x artifacts/*-runner
+
-
+    strategy:
-      - name: Rename native executables to match buildx TARGETARCH
+      matrix:
-        run: |
+        database: [ "h2", "postgresql", "mysql", "mariadb" ]
-          rename 's/x86_64/amd64/g' artifacts/*
+
-          rename 's/aarch_64/arm64/g' artifacts/*
+    steps:
-
+      # Checkout
-      - name: Unzip jvm package
+      - name: Checkout
-        run: |
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-          unzip artifacts/*-jvm.zip -d artifacts/extracted-jvm-package
+        with:
-          rename 's/commafeed-.*/quarkus-app/g' artifacts/extracted-jvm-package/*
+          fetch-depth: 0
-
+
-      # Docker
+      # Setup
-      - name: Login to Container Registry
+      - name: Set up QEMU
-        uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3
+        uses: docker/setup-qemu-action@99012661954931238ded8c8b007157a8430204e1 # v4.4.0
-        if: ${{ env.DOCKERHUB_USERNAME != '' }}
+
-        with:
+      - name: Set up Docker Buildx
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
+        uses: docker/setup-buildx-action@f87e5991a6d7451dcb8d9637bfbc97413f497069 # v4.4.1
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
-
+      - name: Install required packages
-      ## build but don't push for PRs and renovate
+        run: sudo apt-get install -y rename unzip
-      - name: Docker build - native
+
-        uses: docker/build-push-action@ca877d9245402d1537745e0e356eab47c3520991 # v6
+      # Prepare artifacts
-        with:
+      - name: Download artifacts
-          context: .
+        uses: actions/download-artifact@9000827ccba6bdab643e8b6fd33ac0654aef8333 # v8.0.2
-          file: commafeed-server/src/main/docker/Dockerfile.native
+        with:
-          push: false
+          pattern: commafeed-${{ matrix.database }}-*
-          platforms: linux/amd64,linux/arm64/v8
+          path: ./artifacts
-
+          merge-multiple: true
-      - name: Docker build - jvm
+
-        uses: docker/build-push-action@ca877d9245402d1537745e0e356eab47c3520991 # v6
+      - name: Set the exec flag on the native executables
-        with:
+        run: chmod +x artifacts/*-runner
-          context: .
+
-          file: commafeed-server/src/main/docker/Dockerfile.jvm
+      - name: Rename native executables to match buildx TARGETARCH
-          push: false
+        run: |
-          platforms: linux/amd64,linux/arm64/v8
+          rename 's/x86_64/amd64/g' artifacts/*
-
+          rename 's/aarch_64/arm64/g' artifacts/*
-      ## build and push tag
+
-      - name: Docker build and push tag - native
+      - name: Unzip jvm package
-        uses: docker/build-push-action@ca877d9245402d1537745e0e356eab47c3520991 # v6
+        run: |
-        if: ${{ github.ref_type == 'tag' }}
+          unzip artifacts/*-jvm.zip -d artifacts/extracted-jvm-package
-        with:
+          rename 's/commafeed-.*/quarkus-app/g' artifacts/extracted-jvm-package/*
-          context: .
+
-          file: commafeed-server/src/main/docker/Dockerfile.native
+      # Docker
-          push: ${{ env.DOCKERHUB_USERNAME != '' }}
+      - name: Login to Container Registry
-          platforms: linux/amd64,linux/arm64/v8
+        uses: docker/login-action@81c6f93d4bc991e510b342a00b419b3bb4efc5c6 # v4.7.0
-          tags: |
+        if: ${{ env.DOCKERHUB_USERNAME != '' }}
-            athou/commafeed:latest-${{ matrix.database }}
+        with:
-            athou/commafeed:${{ github.ref_name }}-${{ matrix.database }}
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
-
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - name: Docker build and push tag - jvm
+
-        uses: docker/build-push-action@ca877d9245402d1537745e0e356eab47c3520991 # v6
+      ## build but don't push for PRs and renovate
-        if: ${{ github.ref_type == 'tag' }}
+      - name: Docker build - native
-        with:
+        uses: docker/build-push-action@c3c9e263c25d99ce0380d002d59b67737d91b0dc # v7.4.0
-          context: .
+        with:
-          file: commafeed-server/src/main/docker/Dockerfile.jvm
+          context: .
-          push: ${{ env.DOCKERHUB_USERNAME != '' }}
+          file: commafeed-server/src/main/docker/Dockerfile.native
-          platforms: linux/amd64,linux/arm64/v8
+          push: false
-          tags: |
+          platforms: linux/amd64,linux/arm64/v8
-            athou/commafeed:latest-${{ matrix.database }}-jvm
+
-            athou/commafeed:${{ github.ref_name }}-${{ matrix.database }}-jvm
+      - name: Docker build - jvm
-
+        uses: docker/build-push-action@c3c9e263c25d99ce0380d002d59b67737d91b0dc # v7.4.0
-      ## build and push master
+        with:
-      - name: Docker build and push master - native
+          context: .
-        uses: docker/build-push-action@ca877d9245402d1537745e0e356eab47c3520991 # v6
+          file: commafeed-server/src/main/docker/Dockerfile.jvm
-        if: ${{ github.ref_name == 'master' }}
+          push: false
-        with:
+          platforms: linux/amd64,linux/arm64/v8
-          context: .
+
-          file: commafeed-server/src/main/docker/Dockerfile.native
+      ## build and push tag
-          push: ${{ env.DOCKERHUB_USERNAME != '' }}
+      - name: Docker build and push tag - native
-          platforms: linux/amd64,linux/arm64/v8
+        uses: docker/build-push-action@c3c9e263c25d99ce0380d002d59b67737d91b0dc # v7.4.0
-          tags: athou/commafeed:master-${{ matrix.database }}
+        if: ${{ github.ref_type == 'tag' }}
-
+        with:
-      - name: Docker build and push master - jvm
+          context: .
-        uses: docker/build-push-action@ca877d9245402d1537745e0e356eab47c3520991 # v6
+          file: commafeed-server/src/main/docker/Dockerfile.native
-        if: ${{ github.ref_name == 'master' }}
+          push: ${{ env.DOCKERHUB_USERNAME != '' }}
-        with:
+          platforms: linux/amd64,linux/arm64/v8
-          context: .
+          tags: |
-          file: commafeed-server/src/main/docker/Dockerfile.jvm
+            athou/commafeed:latest-${{ matrix.database }}
-          push: ${{ env.DOCKERHUB_USERNAME != '' }}
+            athou/commafeed:${{ github.ref_name }}-${{ matrix.database }}
-          platforms: linux/amd64,linux/arm64/v8
+
-          tags: athou/commafeed:master-${{ matrix.database }}-jvm
+      - name: Docker build and push tag - jvm
-
+        uses: docker/build-push-action@c3c9e263c25d99ce0380d002d59b67737d91b0dc # v7.4.0
-  release:
+        if: ${{ github.ref_type == 'tag' }}
-    runs-on: ubuntu-latest
+        with:
-    needs:
+          context: .
-      - build
+          file: commafeed-server/src/main/docker/Dockerfile.jvm
-      - docker
+          push: ${{ env.DOCKERHUB_USERNAME != '' }}
-    permissions:
+          platforms: linux/amd64,linux/arm64/v8
-      contents: write
+          tags: |
-    if: github.ref_type == 'tag'
+            athou/commafeed:latest-${{ matrix.database }}-jvm
-
+            athou/commafeed:${{ github.ref_name }}-${{ matrix.database }}-jvm
-    steps:
+
-      - name: Checkout
+      ## build and push master
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+      - name: Docker build and push master - native
-        with:
+        uses: docker/build-push-action@c3c9e263c25d99ce0380d002d59b67737d91b0dc # v7.4.0
-          fetch-depth: 0
+        if: ${{ github.ref_name == 'master' }}
-
+        with:
-      - name: Download artifacts
+          context: .
-        uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4
+          file: commafeed-server/src/main/docker/Dockerfile.native
-        with:
+          push: ${{ env.DOCKERHUB_USERNAME != '' }}
-          pattern: commafeed-*
+          platforms: linux/amd64,linux/arm64/v8
-          path: ./artifacts
+          tags: athou/commafeed:master-${{ matrix.database }}
-          merge-multiple: true
+
-
+      - name: Docker build and push master - jvm
-      - name: Set the exec flag on the native executables
+        uses: docker/build-push-action@c3c9e263c25d99ce0380d002d59b67737d91b0dc # v7.4.0
-        run: chmod +x artifacts/*-runner
+        if: ${{ github.ref_name == 'master' }}
-
+        with:
-      - name: Extract Changelog Entry
+          context: .
-        uses: mindsers/changelog-reader-action@32aa5b4c155d76c94e4ec883a223c947b2f02656 # v2
+          file: commafeed-server/src/main/docker/Dockerfile.jvm
-        id: changelog_reader
+          push: ${{ env.DOCKERHUB_USERNAME != '' }}
-        with:
+          platforms: linux/amd64,linux/arm64/v8
-          version: ${{ github.ref_name }}
+          tags: athou/commafeed:master-${{ matrix.database }}-jvm
-
+
-      - name: Create GitHub release
+  release:
-        uses: ncipollo/release-action@cdcc88a9acf3ca41c16c37bb7d21b9ad48560d87 # v1
+    runs-on: ubuntu-latest
-        with:
+    needs:
-          name: CommaFeed ${{ github.ref_name }}
+      - build
-          body: ${{ steps.changelog_reader.outputs.changes }}
+      - docker
-          artifacts: ./artifacts/*
+    permissions:
-
+      contents: write
-      - name: Update Docker Hub Description
+    if: github.ref_type == 'tag'
-        uses: peter-evans/dockerhub-description@e98e4d1628a5f3be2be7c231e50981aee98723ae # v4
+
-        with:
+    steps:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
+      - name: Checkout
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-          repository: athou/commafeed
+        with:
-          short-description: ${{ github.event.repository.description }}
+          fetch-depth: 0
-          readme-filepath: commafeed-server/src/main/docker/README.md
+
+      - name: Download artifacts
+        uses: actions/download-artifact@9000827ccba6bdab643e8b6fd33ac0654aef8333 # v8.0.2
+        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@1faaf50aa09d5793d9a100819973df801febfb31 # v2.4.0
+        id: changelog_reader
+        with:
+          version: ${{ github.ref_name }}
+
+      - name: Create GitHub release
+        uses: ncipollo/release-action@339a81892b84b4eeb0f6e744e4574d79d0d9b8dd # v1.21.0
+        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@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          fetch-depth: 0
+
+      - name: Update Docker Hub Description
+        uses: peter-evans/dockerhub-description@1b9a80c056b620d92cedb9d9b5a223409c68ddfa # v5.0.0
+        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@368f82528645a54fb793d4d04e342629a3f51346 # v5.0.1
+        id: deployment

.mvn/wrapper/maven-wrapper.properties

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

LICENSE

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

README.md

@@ -15,8 +15,10 @@ Google Reader inspired self-hosted RSS reader, based on Quarkus and React/TypeSc
 - Supports thousands of users and millions of feeds
 - OPML import/export
 - REST API
-- Fever-compatible API for native mobile apps
+- Fever and Google Reader 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,21 +57,21 @@ 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
+- `-Pnative` compiles the application to native code. This requires either GraalVM to be installed (`GRAALVM_HOME` environment
-  variable pointing to a GraalVM installation).
+  variable pointing to a GraalVM installation) or a container environment to be available (docker/podman/...).
 - `-DskipTests` to speed up the build process by skipping tests.
 
 When the build is complete:
@@ -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
@@ -98,9 +111,9 @@ There are multiple ways to configure CommaFeed:
 - 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.md) are optional and have sensible default values.
+All [CommaFeed settings](https://athou.github.io/commafeed/documentation) are optional and have sensible default values.
 
 When logging in, credentials are stored in an encrypted cookie. The encryption key is randomly generated at startup,
 meaning that you will have to log back in after each restart of the application. To prevent this, you can set the
@@ -108,7 +121,6 @@ meaning that you will have to log back in after each restart of the application.
 All other Quarkus settings can be found [here](https://quarkus.io/guides/all-config).
 
 When started, the server will listen on http://localhost:8082.
-The default user is `admin` and the default password is `admin`.
 
 ### Updates
 
@@ -147,6 +159,28 @@ named [Semeru](https://developer.ibm.com/languages/java/semeru-runtimes/download
 This is the JVM used in
 the [Docker image](https://github.com/Athou/commafeed/blob/master/commafeed-server/src/main/docker/Dockerfile.jvm).
 
+## FAQ
+
+### Getting "Access to local address blocked" when adding a feed
+
+CommaFeed blocks access to local resources by default to prevent [SSRF](https://en.wikipedia.org/wiki/Server-side_request_forgery) attacks.
+If you want to subscribe to feeds that are only available on your local network, you can disable this security measure by setting the `commafeed.http-client.block-local-addresses` variable to `false`.
+Do this only if you trust all users of your CommaFeed instance not to access private resources.
+
+### Listen on a single network interface
+
+By default, CommaFeed listens on all interfaces. You can restrict it by setting `quarkus.http.host`.
+
+Note that if you set it to a local name like `127.0.0.1` host validation is enabled automatically. This prevents
+access if you're using a reverse proxy like Nginx. To fix, add your actual hostname to `allowed-hosts`:
+
+```
+quarkus.http.host=127.0.0.1
+quarkus.http.proxy.proxy-address-forwarding=true
+quarkus.http.proxy.allow-forwarded=true
+quarkus.http.host-validation.allowed-hosts=commafeed.example.com
+```
+
 ## Translation
 
 Files for internationalization are

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/.npmrc

@@ -0,0 +1 @@
+loglevel=warn

commafeed-client/biome.json

@@ -1,10 +1,10 @@
 {
-    "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+    "$schema": "https://biomejs.dev/schemas/2.6.4/schema.json",
     "formatter": {
         "indentStyle": "space",
         "indentWidth": 4,
         "lineEnding": "lf",
-        "lineWidth": 140
+        "lineWidth": 120
     },
     "javascript": {
         "formatter": {
@@ -14,6 +14,6 @@
         }
     },
     "files": {
-        "ignore": ["dist", "node_modules", "target", "target-ide"]
+        "includes": ["**", "!**/dist", "!**/node_modules", "!**/target", "!**/target-ide"]
     }
 }

commafeed-client/index.html

@@ -2,12 +2,11 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link rel="manifest" href="manifest.json" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-
+    <meta name="referrer" content="no-referrer" />
-    <link rel="stylesheet" type="text/css" href="custom_css.css" />
-    <script type="text/javascript" src="custom_js.js"></script>
 
     <title>CommaFeed</title>
 </head>

commafeed-client/lingui.config.ts

@@ -1,4 +1,5 @@
 import type { LinguiConfig } from "@lingui/conf"
+import { formatter } from "@lingui/format-po"
 
 const config: LinguiConfig = {
     locales: [
@@ -38,11 +39,9 @@ const config: LinguiConfig = {
             exclude: ["src/locales/**"],
         },
     ],
-    format: "po",
+    format: formatter({
-    formatOptions: {
-        origins: true,
         lineNumbers: false,
-    },
+    }),
     sourceLocale: "en",
     fallbackLocales: {
         default: "en",

commafeed-client/package.json

@@ -4,79 +4,80 @@
     "version": "0.0.0",
     "type": "module",
     "scripts": {
-        "dev": "vite --host",
+        "dev": "vite",
-        "dev:typescript": "tsc --watch",
+        "dev:host": "vite --host",
         "build": "tsc && vite build",
         "preview": "vite preview",
         "test": "vitest",
         "test:ci": "vitest run",
-        "lint": "biome check ./src",
+        "lint": "biome check",
-        "lint:fix": "biome check --write ./src",
+        "lint:fix": "biome check --write",
         "i18n:extract": "lingui extract --clean"
     },
     "dependencies": {
-        "@emotion/react": "^11.14.0",
+        "@emotion/react": "11.14.0",
-        "@fontsource/open-sans": "^5.1.1",
+        "@fontsource/open-sans": "5.3.0",
-        "@mantine/core": "^7.16.3",
+        "@lingui/core": "6.12.0",
-        "@mantine/form": "^7.16.3",
+        "@lingui/react": "6.12.0",
-        "@mantine/hooks": "^7.16.3",
+        "@mantine/core": "9.7.4",
-        "@mantine/modals": "^7.16.3",
+        "@mantine/dates": "9.7.4",
-        "@mantine/notifications": "^7.16.3",
+        "@mantine/form": "9.7.4",
-        "@mantine/spotlight": "^7.16.3",
+        "@mantine/hooks": "9.7.4",
-        "@lingui/core": "^5.2.0",
+        "@mantine/modals": "9.7.4",
-        "@lingui/react": "^5.2.0",
+        "@mantine/notifications": "9.7.4",
-        "@monaco-editor/react": "^4.7.0",
+        "@mantine/spotlight": "9.7.4",
-        "@reduxjs/toolkit": "^2.5.1",
+        "@monaco-editor/react": "4.7.0",
-        "axios": "^1.7.9",
+        "@react-querybuilder/mantine": "8.26.0",
-        "dayjs": "^1.11.13",
+        "@reduxjs/toolkit": "2.13.0",
-        "escape-string-regexp": "^5.0.0",
+        "@rolldown/plugin-babel": "0.2.4",
-        "interweave": "^13.1.1",
+        "axios": "1.21.0",
-        "monaco-editor": "^0.52.2",
+        "dayjs": "1.11.23",
-        "mousetrap": "^1.6.5",
+        "escape-string-regexp": "5.0.0",
-        "react": "^19.0.0",
+        "interweave": "13.1.1",
-        "react-async-hook": "^4.0.0",
+        "monaco-editor": "0.57.0",
-        "react-contexify": "^6.0.0",
+        "mousetrap": "1.6.5",
-        "react-device-detect": "^2.2.3",
+        "react": "19.3.1",
-        "react-dom": "^19.0.0",
+        "react-async-hook": "4.0.0",
-        "react-draggable": "^4.4.6",
+        "react-contexify": "6.0.0",
-        "react-ga4": "^2.1.0",
+        "react-dom": "19.3.1",
-        "react-icons": "^5.4.0",
+        "react-draggable": "4.7.2",
-        "react-infinite-scroller": "^1.2.6",
+        "react-icons": "5.7.0",
-        "react-redux": "^9.2.0",
+        "react-infinite-scroller": "1.2.6",
-        "react-router-dom": "^7.1.5",
+        "react-querybuilder": "8.26.0",
-        "react-swipeable": "^7.0.2",
+        "react-redux": "9.3.1",
-        "redoc": "^2.4.0",
+        "react-router-dom": "7.18.5",
-        "style-to-object": "^1.0.8",
+        "react-swipeable": "7.0.2",
-        "throttle-debounce": "^5.0.2",
+        "style-to-object": "2.0.2",
-        "tinycon": "^0.6.8",
+        "throttle-debounce": "5.0.2",
-        "tss-react": "^4.9.15",
+        "tinycon": "0.6.8",
-        "websocket-heartbeat-js": "^1.1.3"
+        "tss-react": "4.9.21",
+        "websocket-heartbeat-js": "1.1.3"
     },
     "devDependencies": {
-        "@biomejs/biome": "^1.9.4",
+        "@biomejs/biome": "2.6.4",
-        "@lingui/babel-plugin-lingui-macro": "^5.2.0",
+        "@lingui/cli": "6.12.0",
-        "@lingui/cli": "^5.2.0",
+        "@lingui/vite-plugin": "6.12.0",
-        "@lingui/vite-plugin": "^5.2.0",
+        "@testing-library/jest-dom": "7.0.1",
-        "@types/mousetrap": "^1.6.15",
+        "@testing-library/react": "16.3.3",
-        "@types/react": "^19.0.8",
+        "@testing-library/user-event": "14.6.8",
-        "@types/react-dom": "^19.0.3",
+        "@types/mousetrap": "1.6.15",
-        "@types/react-infinite-scroller": "^1.2.5",
+        "@types/react": "19.3.0",
-        "@types/throttle-debounce": "^5.0.2",
+        "@types/react-dom": "19.3.0",
-        "@types/tinycon": "^0.6.7",
+        "@types/react-infinite-scroller": "1.2.5",
-        "@vitejs/plugin-react": "^4.3.4",
+        "@types/throttle-debounce": "5.0.2",
-        "babel-plugin-macros": "^3.1.0",
+        "@types/tinycon": "0.6.7",
-        "jsdom": "^26.0.0",
+        "@vitejs/plugin-react": "6.2.1",
-        "rollup-plugin-visualizer": "^5.14.0",
+        "babel-plugin-react-compiler": "^1.0.0",
-        "typescript": "^5.7.3",
+        "jsdom": "30.1.3",
-        "vite": "^6.1.0",
+        "typescript": "7.0.2",
-        "vite-plugin-checker": "^0.8.0",
+        "vite": "8.3.5",
-        "vite-tsconfig-paths": "^5.1.4",
+        "vite-plugin-checker": "0.14.5",
-        "vitest": "^3.0.5",
+        "vitest": "5.0.5",
-        "vitest-mock-extended": "^2.0.2"
+        "yaml": "2.9.1"
     },
     "overrides": {
         "react-infinite-scroller": {
-            "react": "^19.0.0"
+            "react": "19.3.1"
         }
     }
 }

commafeed-client/pom.xml

@@ -1,96 +1,142 @@
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-		 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+		 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
-
+
-	<modelVersion>4.0.0</modelVersion>
+	<modelVersion>4.0.0</modelVersion>
-
+
-	<parent>
+	<parent>
-		<groupId>com.commafeed</groupId>
+		<groupId>com.commafeed</groupId>
-		<artifactId>commafeed</artifactId>
+		<artifactId>commafeed</artifactId>
-		<version>5.6.0</version>
+		<version>7.4.1</version>
-	</parent>
+	</parent>
-	<artifactId>commafeed-client</artifactId>
+	<artifactId>commafeed-client</artifactId>
-	<name>CommaFeed Client</name>
+	<name>CommaFeed Client</name>
-
+
-	<properties>
+	<properties>
-		<!-- renovate: datasource=node-version depName=node -->
+		<!-- renovate: datasource=node-version depName=node -->
-		<node.version>v22.14.0</node.version>
+		<node.version>v26.13.0</node.version>
-		<!-- renovate: datasource=npm depName=npm -->
+		<!-- renovate: datasource=npm depName=npm -->
-		<npm.version>11.1.0</npm.version>
+		<npm.version>12.2.1</npm.version>
-	</properties>
+	</properties>
-
+
-	<build>
+	<build>
-		<plugins>
+		<plugins>
-			<plugin>
+			<plugin>
-				<groupId>com.github.eirslett</groupId>
+				<groupId>com.github.eirslett</groupId>
-				<artifactId>frontend-maven-plugin</artifactId>
+				<artifactId>frontend-maven-plugin</artifactId>
-				<version>1.15.1</version>
+				<version>2.0.2</version>
-				<?m2e ignore?>
+				<?m2e ignore?>
-				<executions>
+				<executions>
-					<execution>
+					<execution>
-						<id>install node and npm</id>
+						<id>install node and npm</id>
-						<goals>
+						<goals>
-							<goal>install-node-and-npm</goal>
+							<goal>install-node-and-npm</goal>
-						</goals>
+						</goals>
-						<phase>compile</phase>
+						<phase>compile</phase>
-						<configuration>
+						<configuration>
-							<nodeVersion>${node.version}</nodeVersion>
+							<nodeVersion>${node.version}</nodeVersion>
-							<npmVersion>${npm.version}</npmVersion>
+							<npmVersion>${npm.version}</npmVersion>
-						</configuration>
+						</configuration>
-					</execution>
+					</execution>
-					<execution>
+					<execution>
-						<id>npm install</id>
+						<id>npm install</id>
-						<goals>
+						<goals>
-							<goal>npm</goal>
+							<goal>npm</goal>
-						</goals>
+						</goals>
-						<phase>compile</phase>
+						<phase>compile</phase>
-						<configuration>
+						<configuration>
-							<arguments>ci</arguments>
+							<arguments>ci</arguments>
-						</configuration>
+						</configuration>
-					</execution>
+					</execution>
-					<execution>
+					<execution>
-						<id>npm run test</id>
+						<id>npm run test</id>
-						<goals>
+						<goals>
-							<goal>npm</goal>
+							<goal>npm</goal>
-						</goals>
+						</goals>
-						<phase>compile</phase>
+						<phase>compile</phase>
-						<configuration>
+						<configuration>
-							<arguments>run test:ci</arguments>
+							<arguments>run test:ci</arguments>
-						</configuration>
+							<skip>${skipTests}</skip>
-					</execution>
+						</configuration>
-					<execution>
+					</execution>
-						<id>npm run build</id>
+					<execution>
-						<goals>
+						<id>npm run build</id>
-							<goal>npm</goal>
+						<goals>
-						</goals>
+							<goal>npm</goal>
-						<phase>compile</phase>
+						</goals>
-						<configuration>
+						<phase>compile</phase>
-							<arguments>run build</arguments>
+						<configuration>
-						</configuration>
+							<arguments>run build</arguments>
-					</execution>
+						</configuration>
-				</executions>
+					</execution>
-			</plugin>
+				</executions>
-			<plugin>
+			</plugin>
-				<artifactId>maven-resources-plugin</artifactId>
+			<plugin>
-				<version>3.3.1</version>
+				<artifactId>maven-resources-plugin</artifactId>
-				<executions>
+				<version>3.5.0</version>
-					<execution>
+				<executions>
-						<id>copy web interface to resources</id>
+					<execution>
-						<phase>prepare-package</phase>
+						<id>copy web interface to resources</id>
-						<goals>
+						<phase>prepare-package</phase>
-							<goal>copy-resources</goal>
+						<goals>
-						</goals>
+							<goal>copy-resources</goal>
-						<configuration>
+						</goals>
-							<outputDirectory>${project.build.directory}/classes/META-INF/resources</outputDirectory>
+						<configuration>
-							<resources>
+							<outputDirectory>${project.build.directory}/classes/META-INF/resources</outputDirectory>
-								<resource>
+							<resources>
-									<directory>dist</directory>
+								<resource>
-									<filtering>false</filtering>
+									<directory>dist</directory>
-								</resource>
+									<filtering>false</filtering>
-							</resources>
+								</resource>
-						</configuration>
+							</resources>
-					</execution>
+						</configuration>
-				</executions>
+					</execution>
-			</plugin>
+				</executions>
-		</plugins>
+			</plugin>
-	</build>
+		</plugins>
+	</build>
+
+	<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.4</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,40 @@
+<?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"
+		xmlns="http://www.w3.org/2000/svg">
+	<title>CommaFeed favicon</title>
+	<defs
+			id="defs3" />
+	<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

@@ -1,47 +1,53 @@
 import { i18n } from "@lingui/core"
 import { I18nProvider } from "@lingui/react"
-import { MantineProvider } from "@mantine/core"
+import { MantineProvider, v8CssVariablesResolver } 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 } 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 { Constants } from "@/app/constants"
-import { categoryUnreadCount } from "app/utils"
+import { redirectTo } from "@/app/redirect/slice"
-import { DisablePullToRefresh } from "components/DisablePullToRefresh"
+import { redirectToInitialSetup } from "@/app/redirect/thunks"
-import { ErrorBoundary } from "components/ErrorBoundary"
+import { reloadServerInfos } from "@/app/server/thunks"
-import { Header } from "components/header/Header"
+import { useAppDispatch, useAppSelector } from "@/app/store"
-import { Tree } from "components/sidebar/Tree"
+import { ErrorBoundary } from "@/components/ErrorBoundary"
-import { useBrowserExtension } from "hooks/useBrowserExtension"
+import { Header } from "@/components/header/Header"
-import { useI18n } from "i18n"
+import { Tree } from "@/components/sidebar/Tree"
-import { WelcomePage } from "pages/WelcomePage"
+import { useI18n } from "@/i18n"
-import { AdminUsersPage } from "pages/admin/AdminUsersPage"
+import { AdminUsersPage } from "@/pages/admin/AdminUsersPage"
-import { MetricsPage } from "pages/admin/MetricsPage"
+import { MetricsPage } from "@/pages/admin/MetricsPage"
-import { AboutPage } from "pages/app/AboutPage"
+import { AboutPage } from "@/pages/app/AboutPage"
-import { AddPage } from "pages/app/AddPage"
+import { AddPage } from "@/pages/app/AddPage"
-import { CategoryDetailsPage } from "pages/app/CategoryDetailsPage"
+import { CategoryDetailsPage } from "@/pages/app/CategoryDetailsPage"
-import { DonatePage } from "pages/app/DonatePage"
+import { DonatePage } from "@/pages/app/DonatePage"
-import { FeedDetailsPage } from "pages/app/FeedDetailsPage"
+import { FeedDetailsPage } from "@/pages/app/FeedDetailsPage"
-import { FeedEntriesPage } from "pages/app/FeedEntriesPage"
+import { FeedEntriesPage } from "@/pages/app/FeedEntriesPage"
-import Layout from "pages/app/Layout"
+import Layout from "@/pages/app/Layout"
-import { SettingsPage } from "pages/app/SettingsPage"
+import { SettingsPage } from "@/pages/app/SettingsPage"
-import { TagDetailsPage } from "pages/app/TagDetailsPage"
+import { TagDetailsPage } from "@/pages/app/TagDetailsPage"
-import { LoginPage } from "pages/auth/LoginPage"
+import { InitialSetupPage } from "@/pages/auth/InitialSetupPage"
-import { PasswordRecoveryPage } from "pages/auth/PasswordRecoveryPage"
+import { LoginPage } from "@/pages/auth/LoginPage"
-import { RegistrationPage } from "pages/auth/RegistrationPage"
+import { PasswordRecoveryPage } from "@/pages/auth/PasswordRecoveryPage"
-import React, { useEffect } from "react"
+import { PasswordResetPage } from "@/pages/auth/PasswordResetPage"
-import { isSafari } from "react-device-detect"
+import { RegistrationPage } from "@/pages/auth/RegistrationPage"
-import ReactGA from "react-ga4"
+import { WelcomePage } from "@/pages/WelcomePage"
-import { HashRouter, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom"
-import Tinycon from "tinycon"
 
-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"
+                // keep using css variables from mantine v8
+                cssVariablesResolver={v8CssVariablesResolver}
                 theme={{
-                    primaryColor: "orange",
+                    primaryColor: primaryColor,
                     fontFamily: "Open Sans",
                     colors: {
                         // keep using dark colors from mantine v6
@@ -70,9 +76,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)
 
@@ -80,11 +83,15 @@ 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="app"
+                element={<Layout header={<Header />} sidebar={<Tree />} sidebarVisible={sidebarVisible} />}
+            >
                 <Route path="category">
                     <Route path=":id" element={<FeedEntriesPage sourceType="category" />} />
                     <Route path=":id/details" element={<CategoryDetailsPage />} />
@@ -111,6 +118,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()
@@ -126,79 +145,21 @@ function RedirectHandler() {
     return null
 }
 
-function GoogleAnalyticsHandler() {
-    const location = useLocation()
-    const googleAnalyticsCode = useAppSelector(state => state.server.serverInfos?.googleAnalyticsCode)
-
-    useEffect(() => {
-        if (googleAnalyticsCode) ReactGA.initialize(googleAnalyticsCode)
-    }, [googleAnalyticsCode])
-
-    useEffect(() => {
-        if (ReactGA.isInitialized) ReactGA.send({ hitType: "pageview", page: location.pathname })
-    }, [location])
-
-    return null
-}
-
-function UnreadCountTitleHandler({ unreadCount, enabled }: { unreadCount: number; enabled?: boolean }) {
-    return <title>{enabled && unreadCount > 0 ? `(${unreadCount}) CommaFeed` : "CommaFeed"}</title>
-}
-
-function UnreadCountFaviconHandler({ unreadCount, enabled }: { unreadCount: number; enabled?: boolean }) {
-    useEffect(() => {
-        if (enabled && unreadCount > 0) {
-            Tinycon.setBubble(unreadCount)
-        } else {
-            Tinycon.reset()
-        }
-    }, [unreadCount, enabled])
-
-    return null
-}
-
-function BrowserExtensionBadgeUnreadCountHandler() {
-    const root = useAppSelector(state => state.tree.rootCategory)
-    const { setBadgeUnreadCount } = useBrowserExtension()
-    useEffect(() => {
-        if (!root) return
-        const unreadCount = categoryUnreadCount(root)
-        setBadgeUnreadCount(unreadCount)
-    }, [root, setBadgeUnreadCount])
-
-    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 dispatch = useAppDispatch()
 
-    const unreadCount = categoryUnreadCount(root)
-
     useEffect(() => {
         dispatch(reloadServerInfos())
     }, [dispatch])
 
     return (
         <Providers>
-            <>
+            <HashRouter>
-                <UnreadCountTitleHandler unreadCount={unreadCount} enabled={unreadCountTitle} />
+                <InitialSetupHandler />
-                <UnreadCountFaviconHandler unreadCount={unreadCount} enabled={unreadCountFavicon} />
+                <RedirectHandler />
-                <BrowserExtensionBadgeUnreadCountHandler />
+                <AppRoutes />
-                <HashRouter>
+            </HashRouter>
-                    <GoogleAnalyticsHandler />
-                    <RedirectHandler />
-                    <AppRoutes />
-                    {/* disable pull-to-refresh as it messes with vertical scrolling
-                        safari behaves weirdly when overscroll-behavior is set to none so we disable it only for other browsers
-                        https://github.com/Athou/commafeed/issues/1168
-                    */}
-                    {!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.test.ts

@@ -0,0 +1,36 @@
+import { i18n } from "@lingui/core"
+import type { AxiosError } from "axios"
+import { afterEach, describe, expect, it, vi } from "vitest"
+import { errorToStrings } from "./client"
+
+const axiosError = (status: number, data: unknown) =>
+    ({
+        isAxiosError: true,
+        response: { status, data },
+    }) as AxiosError
+
+describe("errorToStrings", () => {
+    afterEach(() => vi.restoreAllMocks())
+
+    it("translates known application error types", () => {
+        vi.spyOn(i18n, "_").mockReturnValue("Translated authentication error")
+        const error = axiosError(401, {
+            type: "WRONG_USERNAME_OR_PASSWORD",
+            message: "wrong username or password",
+        })
+
+        expect(errorToStrings(error)).toEqual(["Translated authentication error"])
+    })
+
+    it("preserves backend messages for unexpected errors", () => {
+        const error = axiosError(500, { message: "unexpected error" })
+
+        expect(errorToStrings(error)).toEqual(["unexpected error"])
+    })
+
+    it("preserves backend messages for unknown application error types", () => {
+        const error = axiosError(400, { type: "UNKNOWN_ERROR", message: "unknown error" })
+
+        expect(errorToStrings(error)).toEqual(["unknown error"])
+    })
+})

commafeed-client/src/app/client.ts

@@ -1,3 +1,5 @@
+import { i18n, type MessageDescriptor } from "@lingui/core"
+import { msg } from "@lingui/core/macro"
 import axios, { type AxiosError } from "axios"
 import type {
     AddCategoryRequest,
@@ -6,18 +8,23 @@ import type {
     Category,
     CategoryModificationRequest,
     CollapseRequest,
+    CommaFeedApplicationError,
+    CommaFeedExceptionType,
     Entries,
     FeedInfo,
     FeedInfoRequest,
     FeedModificationRequest,
     GetEntriesPaginatedRequest,
     IDRequest,
+    InitialSetupRequest,
     LoginRequest,
     MarkRequest,
     Metrics,
     MultipleMarkRequest,
+    PasswordResetConfirmationRequest,
     PasswordResetRequest,
     ProfileModificationRequest,
+    PushNotificationSettings,
     RegistrationRequest,
     ServerInfo,
     Settings,
@@ -28,20 +35,25 @@ import type {
     UserModel,
 } from "./types"
 
+const applicationErrorMessages = {
+    WRONG_USERNAME_OR_PASSWORD: msg`Wrong username or password`,
+} satisfies Record<CommaFeedExceptionType, MessageDescriptor>
+
 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 = {
@@ -49,7 +61,8 @@ export const client = {
         getRoot: async () => await axiosInstance.get<Category>("category/get"),
         modify: async (req: CategoryModificationRequest) => await axiosInstance.post("category/modify", req),
         collapse: async (req: CollapseRequest) => await axiosInstance.post("category/collapse", req),
-        getEntries: async (req: GetEntriesPaginatedRequest) => await axiosInstance.get<Entries>("category/entries", { params: req }),
+        getEntries: async (req: GetEntriesPaginatedRequest) =>
+            await axiosInstance.get<Entries>("category/entries", { params: req }),
         markEntries: async (req: MarkRequest) => await axiosInstance.post("category/mark", req),
         add: async (req: AddCategoryRequest) => await axiosInstance.post("category/add", req),
         delete: async (req: IDRequest) => await axiosInstance.post("category/delete", req),
@@ -64,7 +77,8 @@ export const client = {
     feed: {
         get: async (id: string) => await axiosInstance.get<Subscription>(`feed/get/${id}`),
         modify: async (req: FeedModificationRequest) => await axiosInstance.post("feed/modify", req),
-        getEntries: async (req: GetEntriesPaginatedRequest) => await axiosInstance.get<Entries>("feed/entries", { params: req }),
+        getEntries: async (req: GetEntriesPaginatedRequest) =>
+            await axiosInstance.get<Entries>("feed/entries", { params: req }),
         markEntries: async (req: MarkRequest) => await axiosInstance.post("feed/mark", req),
         fetchFeed: async (req: FeedInfoRequest) => await axiosInstance.post<FeedInfo>("feed/fetch", req),
         refreshAll: async () => await axiosInstance.get("feed/refreshAll"),
@@ -93,9 +107,14 @@ 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 +124,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"),
     },
@@ -120,18 +139,33 @@ export const errorToStrings = (err: unknown) => {
     let strings: string[] = []
 
     if (axios.isAxiosError(err) && err.response) {
-        if (typeof err.response.data === "string") strings.push(err.response.data)
+        if (isCommaFeedApplicationError(err)) {
-        if (isMessageError(err)) strings.push(err.response.data.message)
+            strings.push(i18n._(applicationErrorMessages[err.response.data.type]))
-        if (isMessageArrayError(err)) strings = [...strings, ...err.response.data.errors]
+        } else {
+            if (typeof err.response.data === "string") strings.push(err.response.data)
+            if (isMessageError(err)) strings.push(err.response.data.message)
+            if (isMessageArrayError(err)) strings = [...strings, ...err.response.data.errors]
+        }
     }
 
     return strings
 }
 
+function isCommaFeedApplicationError(err: AxiosError): err is AxiosError<CommaFeedApplicationError> {
+    const data = err.response?.data
+    if (!data || typeof data !== "object" || !("type" in data)) return false
+    const type = data.type
+    return typeof type === "string" && Object.hasOwn(applicationErrorMessages, type)
+}
+
 function isMessageError(err: AxiosError): err is AxiosError<{ message: string }> {
-    return !!err.response && !!err.response.data && typeof err.response.data === "object" && "message" in err.response.data
+    return (
+        !!err.response && !!err.response.data && typeof err.response.data === "object" && "message" in err.response.data
+    )
 }
 
 function isMessageArrayError(err: AxiosError): err is AxiosError<{ errors: string[] }> {
-    return !!err.response && !!err.response.data && typeof err.response.data === "object" && "errors" in err.response.data
+    return (
+        !!err.response && !!err.response.data && typeof err.response.data === "object" && "errors" in err.response.data
+    )
 }

commafeed-client/src/app/constants.ts

@@ -1,6 +1,6 @@
 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 { SiBuffer, SiFacebook, SiGmail, SiInstapaper, SiTumblr, SiX } from "react-icons/si"
 import type { Category, Entry, SharingSettings } from "./types"
 
 const categories: Record<string, Omit<Category, "name">> = {
@@ -58,12 +58,6 @@ const sharing: {
         color: "#375672",
         url: (url, desc) => `https://www.tumblr.com/share/link?url=${url}&name=${desc}`,
     },
-    pocket: {
-        label: "Pocket",
-        icon: SiPocket,
-        color: "#EF4154",
-        url: (url, desc) => `https://getpocket.com/save?url=${url}&title=${desc}`,
-    },
     instapaper: {
         label: "Instapaper",
         icon: SiInstapaper,
@@ -87,23 +81,25 @@ export const Constants = {
         headerHeight: 60,
         entryMaxWidth: 650,
         isTopVisible: (div: HTMLElement) => {
-            const header = document.getElementById(Constants.dom.headerId)?.getBoundingClientRect()
+            const header = document.getElementsByTagName("header").item(0)?.getBoundingClientRect()
             return div.getBoundingClientRect().top >= (header?.bottom ?? 0)
         },
         isBottomVisible: (div: HTMLElement) => {
-            const footer = document.getElementById(Constants.dom.footerId)?.getBoundingClientRect()
+            const footer = document.getElementsByTagName("footer").item(0)?.getBoundingClientRect()
             return div.getBoundingClientRect().bottom <= (footer?.top ?? window.innerHeight)
         },
     },
     dom: {
-        headerId: "header",
-        footerId: "footer",
         entryId: (entry: Entry) => `entry-id-${entry.id}`,
         entryContextMenuId: (entry: Entry) => entry.id,
     },
+    theme: {
+        defaultPrimaryColor: "orange",
+    },
     tooltip: {
         delay: 500,
     },
     browserExtensionUrl: "https://github.com/Athou/commafeed-browser-extension",
+    customCssDocumentationUrl: "https://athou.github.io/commafeed/documentation/custom-css",
     bitcoinWalletAddress: "1dymfUxqCWpyD7a6rQSqNy4rLVDBsAr5e",
 }

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

@@ -1,25 +1,20 @@
 import { configureStore } from "@reduxjs/toolkit"
-import type { client } from "app/client"
-import { loadEntries, loadMoreEntries, markAllEntries, markEntry } from "app/entries/thunks"
-import { type RootState, reducers } from "app/store"
-import type { Entries, Entry } from "app/types"
 import type { AxiosResponse } from "axios"
 import { beforeEach, describe, expect, it, vi } from "vitest"
-import { any, mockReset } from "vitest-mock-extended"
+import { client } from "@/app/client"
+import { loadEntries, loadMoreEntries, markAllEntries, markEntry } from "@/app/entries/thunks"
+import { type RootState, reducers } from "@/app/store"
+import type { Entries, Entry } from "@/app/types"
 
-const mockClient = await vi.hoisted(async () => {
+vi.mock(import("@/app/client"))
-    const mockModule = await import("vitest-mock-extended")
-    return mockModule.mockDeep<typeof client>()
-})
-vi.mock("app/client", () => ({ client: mockClient }))
 
 describe("entries", () => {
     beforeEach(() => {
-        mockReset(mockClient)
+        vi.resetAllMocks()
     })
 
     it("loads entries", async () => {
-        mockClient.feed.getEntries.calledWith(any()).mockResolvedValue({
+        vi.mocked(client.feed.getEntries).mockResolvedValue({
             data: {
                 entries: [{ id: "3" } as Entry],
                 hasMore: false,
@@ -32,7 +27,12 @@ describe("entries", () => {
         } as AxiosResponse<Entries>)
 
         const store = configureStore({ reducer: reducers })
-        const promise = store.dispatch(loadEntries({ source: { type: "feed", id: "feed-id" }, clearSearch: true }))
+        const promise = store.dispatch(
+            loadEntries({
+                source: { type: "feed", id: "feed-id" },
+                clearSearch: true,
+            })
+        )
 
         expect(store.getState().entries.source.type).toBe("feed")
         expect(store.getState().entries.source.id).toBe("feed-id")
@@ -53,7 +53,7 @@ describe("entries", () => {
     })
 
     it("loads more entries", async () => {
-        mockClient.category.getEntries.calledWith(any()).mockResolvedValue({
+        vi.mocked(client.category.getEntries).mockResolvedValue({
             data: {
                 entries: [{ id: "4" } as Entry],
                 hasMore: false,
@@ -89,6 +89,188 @@ describe("entries", () => {
         expect(store.getState().entries.hasMore).toBe(false)
     })
 
+    it("stops loading after an initial-load failure and allows a retry", async () => {
+        const response = {
+            data: {
+                entries: [{ id: "3" } as Entry],
+                hasMore: true,
+                name: "my-feed",
+                feedLink: "https://mysite.com/feed",
+                timestamp: 123,
+            },
+        } as AxiosResponse<Entries>
+        vi.mocked(client.feed.getEntries)
+            .mockRejectedValueOnce(new Error("Network error"))
+            .mockResolvedValueOnce(response)
+
+        const store = configureStore({ reducer: reducers })
+        const arg = { source: { type: "feed" as const, id: "feed-id" }, clearSearch: true }
+        const request = store.dispatch(loadEntries(arg))
+
+        expect(store.getState().entries.loading).toBe(true)
+        expect(loadEntries.rejected.match(await request)).toBe(true)
+        expect(store.getState().entries.loading).toBe(false)
+        expect(store.getState().entries.entries).toStrictEqual([])
+        expect(store.getState().entries.hasMore).toBe(true)
+
+        expect(loadEntries.fulfilled.match(await store.dispatch(loadEntries(arg)))).toBe(true)
+        expect(store.getState().entries.entries).toStrictEqual(response.data.entries)
+        expect(store.getState().entries.loading).toBe(false)
+    })
+
+    it("preserves entries after a pagination failure and allows a retry", async () => {
+        const response = {
+            data: {
+                entries: [{ id: "3", read: false } as Entry],
+                hasMore: true,
+                name: "my-feed",
+                feedLink: "https://mysite.com/feed",
+                timestamp: 123,
+            },
+        } as AxiosResponse<Entries>
+        vi.mocked(client.feed.getEntries)
+            .mockResolvedValueOnce(response)
+            .mockRejectedValueOnce(new Error("Network error"))
+            .mockResolvedValueOnce({
+                data: { ...response.data, entries: [{ id: "4" } as Entry], hasMore: false },
+            } as AxiosResponse<Entries>)
+
+        const store = configureStore({ reducer: reducers })
+        await store.dispatch(loadEntries({ source: { type: "feed", id: "feed-id" }, clearSearch: true }))
+        const previousState = store.getState().entries
+        const request = store.dispatch(loadMoreEntries())
+
+        expect(store.getState().entries.loading).toBe(true)
+        expect(loadMoreEntries.rejected.match(await request)).toBe(true)
+        expect(store.getState().entries.loading).toBe(false)
+        expect(store.getState().entries.entries).toStrictEqual(previousState.entries)
+        expect(store.getState().entries.hasMore).toBe(true)
+        expect(store.getState().entries.timestamp).toBe(123)
+        expect(store.getState().entries.sourceLabel).toBe("my-feed")
+        expect(store.getState().entries.sourceWebsiteUrl).toBe("https://mysite.com/feed")
+
+        expect(loadMoreEntries.fulfilled.match(await store.dispatch(loadMoreEntries()))).toBe(true)
+        expect(store.getState().entries.entries).toStrictEqual([{ id: "3", read: false }, { id: "4" }])
+        expect(store.getState().entries.hasMore).toBe(false)
+        expect(store.getState().entries.loading).toBe(false)
+        expect(vi.mocked(client.feed.getEntries).mock.calls[1][0]).toEqual(
+            vi.mocked(client.feed.getEntries).mock.calls[2][0]
+        )
+    })
+
+    describe.each(["initial load", "pagination"] as const)("overlapping %s requests", olderRequestType => {
+        it.each(["initial load", "pagination"] as const)(
+            "ignores an older failure while a newer %s is pending",
+            async newerRequestType => {
+                let rejectOlder!: (reason: Error) => void
+                vi.mocked(client.category.getEntries).mockReturnValueOnce(
+                    new Promise<AxiosResponse<Entries>>((_, reject) => {
+                        rejectOlder = reject
+                    })
+                )
+                vi.mocked(client.category.getEntries).mockReturnValueOnce(new Promise<AxiosResponse<Entries>>(() => {}))
+
+                const store = configureStore({ reducer: reducers })
+                const arg = { source: { type: "category" as const, id: "all" }, clearSearch: true }
+                const older =
+                    olderRequestType === "initial load"
+                        ? store.dispatch(loadEntries(arg))
+                        : store.dispatch(loadMoreEntries())
+                const newer =
+                    newerRequestType === "initial load"
+                        ? store.dispatch(loadEntries(arg))
+                        : store.dispatch(loadMoreEntries())
+
+                rejectOlder(new Error("Older request failed"))
+                await older
+                expect(store.getState().entries.loading).toBe(true)
+
+                newer.abort()
+                await newer
+                expect(store.getState().entries.loading).toBe(false)
+            }
+        )
+
+        it("does not clear a newer request's loading state when an older request succeeds", async () => {
+            let resolveOlder!: (response: AxiosResponse<Entries>) => void
+            vi.mocked(client.category.getEntries).mockReturnValueOnce(
+                new Promise<AxiosResponse<Entries>>(resolve => {
+                    resolveOlder = resolve
+                })
+            )
+            vi.mocked(client.category.getEntries).mockReturnValueOnce(new Promise<AxiosResponse<Entries>>(() => {}))
+
+            const store = configureStore({ reducer: reducers })
+            const arg = { source: { type: "category" as const, id: "all" }, clearSearch: true }
+            const older =
+                olderRequestType === "initial load"
+                    ? store.dispatch(loadEntries(arg))
+                    : store.dispatch(loadMoreEntries())
+            const newer = store.dispatch(loadEntries(arg))
+
+            resolveOlder({
+                data: {
+                    entries: [] as Entry[],
+                    hasMore: true,
+                    name: "old-category",
+                    feedLink: "",
+                    timestamp: 123,
+                    errorCount: 0,
+                    ignoredReadStatus: false,
+                },
+            } as AxiosResponse<Entries>)
+            await older
+            expect(store.getState().entries.loading).toBe(true)
+
+            newer.abort()
+            await newer
+            expect(store.getState().entries.loading).toBe(false)
+        })
+
+        it("ignores an older failure after the newer request succeeds", async () => {
+            let rejectOlder!: (reason: Error) => void
+            vi.mocked(client.category.getEntries).mockReturnValueOnce(
+                new Promise<AxiosResponse<Entries>>((_, reject) => {
+                    rejectOlder = reject
+                })
+            )
+            vi.mocked(client.category.getEntries).mockResolvedValueOnce({
+                data: { entries: [{ id: "4" } as Entry], hasMore: false, name: "new-category", timestamp: 456 },
+            } as AxiosResponse<Entries>)
+
+            const store = configureStore({ reducer: reducers })
+            const arg = { source: { type: "category" as const, id: "all" }, clearSearch: true }
+            const older =
+                olderRequestType === "initial load"
+                    ? store.dispatch(loadEntries(arg))
+                    : store.dispatch(loadMoreEntries())
+            await store.dispatch(loadEntries(arg))
+            const completedState = store.getState().entries
+
+            rejectOlder(new Error("Older request failed"))
+            await older
+            expect(store.getState().entries).toStrictEqual(completedState)
+        })
+    })
+
+    it("does not append entries already present when loading more entries", async () => {
+        vi.mocked(client.category.getEntries)
+            .mockResolvedValueOnce({
+                data: { entries: [{ id: "3" } as Entry], hasMore: true },
+            } as AxiosResponse<Entries>)
+            .mockResolvedValueOnce({
+                data: { entries: [{ id: "3" } as Entry, { id: "4" } as Entry], hasMore: false },
+            } as AxiosResponse<Entries>)
+
+        const store = configureStore({ reducer: reducers })
+        await store.dispatch(loadEntries({ source: { type: "category", id: "all" }, clearSearch: true }))
+        await store.dispatch(loadMoreEntries())
+
+        expect(store.getState().entries.entries).toStrictEqual([{ id: "3" }, { id: "4" }])
+        expect(store.getState().entries.loading).toBe(false)
+        expect(store.getState().entries.hasMore).toBe(false)
+    })
+
     it("marks an entry as read", () => {
         const store = configureStore({
             reducer: reducers,
@@ -113,7 +295,31 @@ 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("flags an entry marked as unread by the user until entries are reloaded", async () => {
+        vi.mocked(client.feed.getEntries).mockResolvedValue({
+            data: {
+                entries: [{ id: "3", read: true, markable: true } as Entry],
+                hasMore: false,
+                name: "my-feed",
+                errorCount: 0,
+                feedLink: "https://mysite.com/feed",
+                timestamp: 123,
+                ignoredReadStatus: false,
+            },
+        } as AxiosResponse<Entries>)
+
+        const store = configureStore({ reducer: reducers })
+        await store.dispatch(loadEntries({ source: { type: "feed", id: "feed-id" }, clearSearch: true }))
+
+        store.dispatch(markEntry({ entry: store.getState().entries.entries[0], read: false }))
+        expect(store.getState().entries.entries[0].keepUnread).toBe(true)
+
+        // reloading the entry list resets the flag
+        await store.dispatch(loadEntries({ source: { type: "feed", id: "feed-id" }, clearSearch: false }))
+        expect(store.getState().entries.entries[0].keepUnread).toBeUndefined()
     })
 
     it("marks all entries as read", () => {
@@ -135,11 +341,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,15 @@
-import { type PayloadAction, createSlice } from "@reduxjs/toolkit"
+import { createSlice, isAnyOf, 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 {
-import type { Entry } from "app/types"
+    loadEntries,
+    loadMoreEntries,
+    markAllEntries,
+    markEntry,
+    markMultipleEntries,
+    starEntry,
+    tagEntry,
+} from "@/app/entries/thunks"
+import type { Entry } from "@/app/types"
 
 export type EntrySourceType = "category" | "feed" | "tag"
 
@@ -10,7 +18,11 @@ export interface EntrySource {
     id: string
 }
 
-export type ExpendableEntry = Entry & { expanded?: boolean }
+export type ExpendableEntry = Entry & {
+    expanded?: boolean
+    /** set when the user explicitly marks the entry as unread, prevents it from being marked as read again by scrolling in expanded mode until the entry list is reloaded */
+    keepUnread?: boolean
+}
 
 interface EntriesState {
     /** selected source */
@@ -26,8 +38,11 @@ interface EntriesState {
     selectedEntryId?: string
     hasMore: boolean
     loading: boolean
+    /** identifies the request that owns the loading state */
+    currentRequestId?: string
     search?: string
     scrollingToEntry: boolean
+    markAllAsReadConfirmationDialogOpen: boolean
 }
 
 const initialState: EntriesState = {
@@ -41,6 +56,7 @@ const initialState: EntriesState = {
     hasMore: true,
     loading: false,
     scrollingToEntry: false,
+    markAllAsReadConfirmationDialogOpen: false,
 }
 
 export const entriesSlice = createSlice({
@@ -61,25 +77,34 @@ 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) => {
             for (const e of state.entries.filter(e => e.id === action.meta.arg.entry.id)) {
                 e.read = action.meta.arg.read
+                if (!action.meta.arg.read) e.keepUnread = true
             }
         })
         builder.addCase(markMultipleEntries.pending, (state, action) => {
             for (const e of state.entries.filter(e => action.meta.arg.entries.some(e2 => e2.id === e.id))) {
                 e.read = action.meta.arg.read
+                if (!action.meta.arg.read) e.keepUnread = true
             }
         })
         builder.addCase(markAllEntries.pending, (state, action) => {
-            for (const e of state.entries.filter(e => (action.meta.arg.req.olderThan ? e.date < action.meta.arg.req.olderThan : true))) {
+            for (const e of state.entries.filter(e =>
+                action.meta.arg.req.olderThan ? e.date < action.meta.arg.req.olderThan : true
+            )) {
                 e.read = true
             }
         })
         builder.addCase(starEntry.pending, (state, action) => {
-            for (const e of state.entries.filter(e => action.meta.arg.entry.id === e.id && action.meta.arg.entry.feedId === e.feedId)) {
+            for (const e of state.entries.filter(
+                e => action.meta.arg.entry.id === e.id && action.meta.arg.entry.feedId === e.feedId
+            )) {
                 e.starred = action.meta.arg.starred
             }
         })
@@ -92,9 +117,11 @@ export const entriesSlice = createSlice({
             state.hasMore = true
             state.selectedEntryId = undefined
             state.loading = true
+            state.currentRequestId = action.meta.requestId
         })
-        builder.addCase(loadMoreEntries.pending, state => {
+        builder.addCase(loadMoreEntries.pending, (state, action) => {
             state.loading = true
+            state.currentRequestId = action.meta.requestId
         })
         builder.addCase(loadEntries.fulfilled, (state, action) => {
             state.entries = action.payload.entries
@@ -102,21 +129,25 @@ export const entriesSlice = createSlice({
             state.sourceLabel = action.payload.name
             state.sourceWebsiteUrl = action.payload.feedLink
             state.hasMore = action.payload.hasMore
-            state.loading = false
         })
         builder.addCase(loadMoreEntries.fulfilled, (state, action) => {
             // remove already existing entries
             const entriesToAdd = action.payload.entries.filter(e => !state.entries.some(e2 => e.id === e2.id))
             state.entries = [...state.entries, ...entriesToAdd]
             state.hasMore = action.payload.hasMore
-            state.loading = false
         })
         builder.addCase(tagEntry.pending, (state, action) => {
             for (const e of state.entries.filter(e => +e.id === action.meta.arg.entryId)) {
                 e.tags = action.meta.arg.tags
             }
         })
+        builder.addMatcher(isAnyOf(loadEntries.settled, loadMoreEntries.settled), (state, action) => {
+            if (state.currentRequestId === action.meta.requestId) {
+                state.loading = false
+                state.currentRequestId = undefined
+            }
+        })
     },
 })
 
-export const { setSearch } = entriesSlice.actions
+export const { setSearch, setMarkAllAsReadConfirmationDialogOpen } = entriesSlice.actions

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

@@ -1,13 +1,19 @@
-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
@@ -34,7 +40,11 @@ export const loadMoreEntries = createAppAsyncThunk("entries/loadMore", async (_,
     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" ||
+        state.entries.search ||
+        (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
@@ -50,7 +60,7 @@ const buildGetEntriesPaginatedRequest = (state: RootState, source: EntrySource,
     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 }))
 })
@@ -123,12 +133,43 @@ export const markAllEntries = createAppAsyncThunk(
     }
 )
 
+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 search = state.entries.search
+        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,
+                        keywords: search,
+                    },
+                })
+            )
+            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 }) => {
         client.entry.star({
             id: arg.entry.id,
-            feedId: +arg.entry.feedId,
             starred: arg.starred,
         })
     },
@@ -181,7 +222,9 @@ export const selectEntry = createAppAsyncThunk(
 
             const entryIndex = state.entries.entries.indexOf(entry)
             const entriesToKeepOnTopWhenScrolling =
-                viewMode === "expanded" ? 0 : Math.min(state.user.settings?.entriesToKeepOnTopWhenScrolling ?? 0, entryIndex)
+                viewMode === "expanded"
+                    ? 0
+                    : Math.min(state.user.settings?.entriesToKeepOnTopWhenScrolling ?? 0, entryIndex)
             const entryToScrollTo = state.entries.entries[entryIndex - entriesToKeepOnTopWhenScrolling]
 
             const entryElement = document.getElementById(Constants.dom.entryId(entry))
@@ -189,7 +232,8 @@ export const selectEntry = createAppAsyncThunk(
             if (entryElement && entryElementToScrollTo) {
                 const scrollMode = state.user.settings?.scrollMode
                 const entryEntirelyVisible =
-                    Constants.layout.isTopVisible(entryElementToScrollTo) && Constants.layout.isBottomVisible(entryElement)
+                    Constants.layout.isTopVisible(entryElementToScrollTo) &&
+                    Constants.layout.isBottomVisible(entryElement)
                 if (scrollMode === "always" || (scrollMode === "if_needed" && !entryEntirelyVisible)) {
                     const scrollSpeed = state.user.settings?.scrollSpeed
                     const margin = viewMode === "detailed" ? 8 : 3
@@ -203,8 +247,13 @@ export const selectEntry = createAppAsyncThunk(
     }
 )
 
-const scrollToEntry = (entryElement: HTMLElement, margin: number, scrollSpeed: number | undefined, onScrollEnded: () => void) => {
+const scrollToEntry = (
-    const header = document.getElementById(Constants.dom.headerId)?.getBoundingClientRect()
+    entryElement: HTMLElement,
+    margin: number,
+    scrollSpeed: number | undefined,
+    onScrollEnded: () => void
+) => {
+    const header = document.getElementsByTagName("header").item(0)?.getBoundingClientRect()
     const offset = (header?.bottom ?? 0) + margin
     scrollToWithCallback({
         options: {

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,12 +1,22 @@
-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 redirectToLogin = createAppAsyncThunk("redirect/login", (_, thunkApi) =>
+    thunkApi.dispatch(redirectTo("/login"))
+)
 
-export const redirectToRegistration = createAppAsyncThunk("redirect/register", (_, thunkApi) => thunkApi.dispatch(redirectTo("/register")))
+export const redirectToRegistration = createAppAsyncThunk("redirect/register", (_, thunkApi) =>
+    thunkApi.dispatch(redirectTo("/register"))
+)
 
-export const redirectToApiDocumentation = createAppAsyncThunk("redirect/api", (_, thunkApi) => thunkApi.dispatch(redirectTo("/api")))
+export const redirectToInitialSetup = createAppAsyncThunk("redirect/initialSetup", (_, thunkApi) =>
+    thunkApi.dispatch(redirectTo("/setup"))
+)
+
+export const redirectToApiDocumentation = createAppAsyncThunk("redirect/api", () => {
+    window.location.href = "api-documentation/"
+})
 
 export const redirectToSelectedSource = createAppAsyncThunk("redirect/selectedSource", (_, thunkApi) => {
     const { source } = thunkApi.getState().entries
@@ -34,15 +44,21 @@ export const redirectToFeedDetails = createAppAsyncThunk("redirect/feed/details"
     thunkApi.dispatch(redirectTo(`/app/feed/${id}/details`))
 )
 
-export const redirectToTag = createAppAsyncThunk("redirect/tag", (id: string, thunkApi) => thunkApi.dispatch(redirectTo(`/app/tag/${id}`)))
+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 redirectToAdd = createAppAsyncThunk("redirect/add", (_, thunkApi) =>
+    thunkApi.dispatch(redirectTo("/app/add"))
+)
 
-export const redirectToSettings = createAppAsyncThunk("redirect/settings", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/settings")))
+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"))
@@ -52,6 +68,10 @@ export const redirectToMetrics = createAppAsyncThunk("redirect/admin/metrics", (
     thunkApi.dispatch(redirectTo("/app/admin/metrics"))
 )
 
-export const redirectToDonate = createAppAsyncThunk("redirect/donate", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/donate")))
+export const redirectToDonate = createAppAsyncThunk("redirect/donate", (_, thunkApi) =>
+    thunkApi.dispatch(redirectTo("/app/donate"))
+)
 
-export const redirectToAbout = createAppAsyncThunk("redirect/about", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/about")))
+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,7 @@
-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))
+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,5 @@ 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,14 +1,66 @@
-import { createAppAsyncThunk } from "app/async-thunk"
+import { createAppAsyncThunk } from "@/app/async-thunk"
-import { client } from "app/client"
+import { client } from "@/app/client"
-import { incrementUnreadCount } from "app/tree/slice"
+import { Constants } from "@/app/constants"
-import type { CollapseRequest } from "app/types"
+import { redirectToCategory, redirectToFeed } from "@/app/redirect/thunks"
-import { flattenCategoryTree } from "app/utils"
+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 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(

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,9 @@ export interface Subscription {
     position: number
     newestItemTime?: number
     filter?: string
+    filterLegacy?: string
+    pushNotificationsEnabled: boolean
+    autoMarkAsReadAfterDays?: number
 }
 
 export interface Category {
@@ -109,6 +112,8 @@ export interface FeedModificationRequest {
     categoryId?: string
     position?: number
     filter?: string
+    pushNotificationsEnabled: boolean
+    autoMarkAsReadAfterDays?: number
 }
 
 export interface GetEntriesRequest {
@@ -196,6 +201,12 @@ export interface PasswordResetRequest {
     email: string
 }
 
+export interface PasswordResetConfirmationRequest {
+    email: string
+    token: string
+    password: string
+}
+
 export interface ProfileModificationRequest {
     currentPassword: string
     email: string
@@ -209,18 +220,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 {
@@ -229,13 +249,22 @@ export interface SharingSettings {
     facebook: boolean
     twitter: boolean
     tumblr: boolean
-    pocket: boolean
     instapaper: boolean
     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
@@ -248,22 +277,26 @@ export interface Settings {
     starIconDisplayMode: IconDisplayMode
     externalLinkIconDisplayMode: IconDisplayMode
     markAllAsReadConfirmation: boolean
+    markAllAsReadNavigateToNextUnread: boolean
     customContextMenu: boolean
     mobileFooter: boolean
     unreadCountTitle: boolean
     unreadCountFavicon: boolean
+    disablePullToRefresh: boolean
+    primaryColor?: string
     sharingSettings: SharingSettings
+    pushNotificationSettings: PushNotificationSettings
 }
 
 export interface LocalSettings {
     viewMode: ViewMode
     sidebarWidth: number
     announcementHash: string
+    fontSizePercentage: number
 }
 
 export interface StarRequest {
     id: string
-    feedId: number
     starred: boolean
 }
 
@@ -304,3 +337,10 @@ export interface AuthenticationError {
     message: string
     allowRegistrations: boolean
 }
+
+export type CommaFeedExceptionType = "WRONG_USERNAME_OR_PASSWORD"
+
+export interface CommaFeedApplicationError {
+    type: CommaFeedExceptionType
+    message: string
+}

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

@@ -1,28 +1,8 @@
 import { t } from "@lingui/core/macro"
 import { showNotification } from "@mantine/notifications"
-import { type PayloadAction, createSlice, isAnyOf } from "@reduxjs/toolkit"
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit"
-import type { LocalSettings, Settings, UserModel, ViewMode } from "app/types"
+import type { LocalSettings, Settings, UserModel, ViewMode } from "@/app/types"
-import {
+import { changeSettings, reloadProfile, reloadSettings, reloadTags } from "./thunks"
-    changeCustomContextMenu,
-    changeEntriesToKeepOnTopWhenScrolling,
-    changeExternalLinkIconDisplayMode,
-    changeLanguage,
-    changeMarkAllAsReadConfirmation,
-    changeMobileFooter,
-    changeReadingMode,
-    changeReadingOrder,
-    changeScrollMarks,
-    changeScrollMode,
-    changeScrollSpeed,
-    changeSharingSetting,
-    changeShowRead,
-    changeStarIconDisplayMode,
-    changeUnreadCountFavicon,
-    changeUnreadCountTitle,
-    reloadProfile,
-    reloadSettings,
-    reloadTags,
-} from "./thunks"
 
 interface UserState {
     settings?: Settings
@@ -35,6 +15,7 @@ export const initialLocalSettings: LocalSettings = {
     viewMode: "detailed",
     sidebarWidth: 360,
     announcementHash: "no-hash",
+    fontSizePercentage: 100,
 }
 
 const initialState: UserState = {
@@ -48,6 +29,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
         },
@@ -65,95 +49,17 @@ export const userSlice = createSlice({
         builder.addCase(reloadTags.fulfilled, (state, action) => {
             state.tags = action.payload
         })
-        builder.addCase(changeReadingMode.pending, (state, action) => {
+        builder.addCase(changeSettings.pending, (state, action) => {
             if (!state.settings) return
-            state.settings.readingMode = action.meta.arg
+            state.settings = { ...state.settings, ...action.meta.arg }
         })
-        builder.addCase(changeReadingOrder.pending, (state, action) => {
+        builder.addCase(changeSettings.fulfilled, () => {
-            if (!state.settings) return
+            showNotification({
-            state.settings.readingOrder = action.meta.arg
+                message: t`Settings saved.`,
+                color: "green",
+            })
         })
-        builder.addCase(changeLanguage.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.language = action.meta.arg
-        })
-        builder.addCase(changeScrollSpeed.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.scrollSpeed = action.meta.arg ? 400 : 0
-        })
-        builder.addCase(changeShowRead.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.showRead = action.meta.arg
-        })
-        builder.addCase(changeScrollMarks.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.scrollMarks = action.meta.arg
-        })
-        builder.addCase(changeScrollMode.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.scrollMode = action.meta.arg
-        })
-        builder.addCase(changeEntriesToKeepOnTopWhenScrolling.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.entriesToKeepOnTopWhenScrolling = action.meta.arg
-        })
-        builder.addCase(changeStarIconDisplayMode.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.starIconDisplayMode = action.meta.arg
-        })
-        builder.addCase(changeExternalLinkIconDisplayMode.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.externalLinkIconDisplayMode = action.meta.arg
-        })
-        builder.addCase(changeMarkAllAsReadConfirmation.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.markAllAsReadConfirmation = action.meta.arg
-        })
-        builder.addCase(changeCustomContextMenu.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.customContextMenu = action.meta.arg
-        })
-        builder.addCase(changeMobileFooter.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.mobileFooter = action.meta.arg
-        })
-        builder.addCase(changeUnreadCountTitle.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.unreadCountTitle = action.meta.arg
-        })
-        builder.addCase(changeUnreadCountFavicon.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.unreadCountFavicon = action.meta.arg
-        })
-        builder.addCase(changeSharingSetting.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.sharingSettings[action.meta.arg.site] = action.meta.arg.value
-        })
-        builder.addMatcher(
-            isAnyOf(
-                changeLanguage.fulfilled,
-                changeScrollSpeed.fulfilled,
-                changeShowRead.fulfilled,
-                changeScrollMarks.fulfilled,
-                changeScrollMode.fulfilled,
-                changeEntriesToKeepOnTopWhenScrolling.fulfilled,
-                changeStarIconDisplayMode.fulfilled,
-                changeExternalLinkIconDisplayMode.fulfilled,
-                changeMarkAllAsReadConfirmation.fulfilled,
-                changeCustomContextMenu.fulfilled,
-                changeMobileFooter.fulfilled,
-                changeUnreadCountTitle.fulfilled,
-                changeUnreadCountFavicon.fulfilled,
-                changeSharingSetting.fulfilled
-            ),
-            () => {
-                showNotification({
-                    message: t`Settings saved.`,
-                    color: "green",
-                })
-            }
-        )
     },
 })
 
-export const { setViewMode, setSidebarWidth, setAnnouncementHash } = userSlice.actions
+export const { setViewMode, setSidebarWidth, setAnnouncementHash, setFontSizePercentage } = userSlice.actions

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

@@ -1,135 +1,27 @@
-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 type { Settings } from "@/app/types"
-import type { IconDisplayMode, ReadingMode, ReadingOrder, ScrollMode, SharingSettings } from "app/types"
 
-export const reloadSettings = createAppAsyncThunk("settings/reload", async () => await client.user.getSettings().then(r => r.data))
+export const reloadSettings = createAppAsyncThunk(
-
+    "settings/reload",
-export const reloadProfile = createAppAsyncThunk("profile/reload", async () => await client.user.getProfile().then(r => r.data))
+    async () => await client.user.getSettings().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) => {
-        const { settings } = thunkApi.getState().user
-        if (!settings) return
-        client.user.saveSettings({ ...settings, entriesToKeepOnTopWhenScrolling })
-    }
 )
 
-export const changeStarIconDisplayMode = createAppAsyncThunk(
+export const reloadProfile = createAppAsyncThunk(
-    "settings/starIconDisplayMode",
+    "profile/reload",
-    (starIconDisplayMode: IconDisplayMode, thunkApi) => {
+    async () => await client.user.getProfile().then(r => r.data)
-        const { settings } = thunkApi.getState().user
-        if (!settings) return
-        client.user.saveSettings({ ...settings, starIconDisplayMode })
-    }
 )
 
-export const changeExternalLinkIconDisplayMode = createAppAsyncThunk(
+export const reloadTags = createAppAsyncThunk(
-    "settings/externalLinkIconDisplayMode",
+    "entries/tags",
-    (externalLinkIconDisplayMode: IconDisplayMode, thunkApi) => {
+    async () => await client.entry.getTags().then(r => r.data)
-        const { settings } = thunkApi.getState().user
-        if (!settings) return
-        client.user.saveSettings({ ...settings, externalLinkIconDisplayMode })
-    }
 )
 
-export const changeMarkAllAsReadConfirmation = createAppAsyncThunk(
+export const changeSettings = createAppAsyncThunk(
-    "settings/markAllAsReadConfirmation",
+    "settings/change",
-    (markAllAsReadConfirmation: boolean, thunkApi) => {
+    async (newSettings: Partial<Settings>, thunkApi) => {
         const { settings } = thunkApi.getState().user
         if (!settings) return
-        client.user.saveSettings({ ...settings, markAllAsReadConfirmation })
+        await client.user.saveSettings({ ...settings, ...newSettings })
-    }
-)
-
-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 changeSharingSetting = createAppAsyncThunk(
-    "settings/sharingSetting",
-    (
-        sharingSetting: {
-            site: keyof SharingSettings
-            value: boolean
-        },
-        thunkApi
-    ) => {
-        const { settings } = thunkApi.getState().user
-        if (!settings) return
-        client.user.saveSettings({
-            ...settings,
-            sharingSettings: {
-                ...settings.sharingSettings,
-                [sharingSetting.site]: sharingSetting.value,
-            },
-        })
     }
 )

commafeed-client/src/app/utils.ts

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

commafeed-client/src/assets/logo.svg

@@ -1,10 +1,11 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg height="512" width="512" viewBox="0 0 6.5625 6.5625" xmlns="http://www.w3.org/2000/svg">
+	<title>CommaFeed logo</title>
 	<rect fill="#f88a14" rx="0.7" ry="0.7" height="6.5625" width="6.5625" />
 	<path d="m1.9761,1.5289c2.9002,0,2.9002,2.9101,2.9002,2.9101" fill="none" stroke="#FFF" stroke-linecap="round"
-		  stroke-width="0.78125" />
+	      stroke-width="0.78125" />
 	<path d="m1.9688,2.875c1.5705-0.00908,1.5705,1.5639,1.5705,1.5639" fill="none" stroke="#FFF" stroke-linecap="round"
-		  stroke-width="0.78125" />
+	      stroke-width="0.78125" />
 	<path d="m2.6503,4.4062c0,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.36423,0-0.6595-0.29265-0.6595-0.65365s0.29527-0.65365,0.6595-0.65365,0.68159,0.29265,0.68159,0.65365z"
-		  fill="#FFF" />
+	      fill="#FFF" />
 </svg>

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,57 +1,72 @@
 import type { MessageDescriptor } from "@lingui/core"
 import { useLingui } from "@lingui/react"
-import { ActionIcon, Button, type ButtonVariant, Tooltip, useMantineTheme } from "@mantine/core"
+import {
-import type { ActionIconVariant } from "@mantine/core/lib/components/ActionIcon/ActionIcon"
+    ActionIcon,
-import { Constants } from "app/constants"
+    type ActionIconVariant,
-import { useActionButton } from "hooks/useActionButton"
+    Box,
-import { type MouseEventHandler, type ReactNode, forwardRef } from "react"
+    Button,
+    type ButtonVariant,
+    Tooltip,
+    useMantineTheme,
+} from "@mantine/core"
+import { forwardRef, type MouseEventHandler, type ReactNode } from "react"
+import { Constants } from "@/app/constants"
+import { useActionButton } from "@/hooks/useActionButton"
+
+export type Mode = "auto" | "mobile" | "desktop"
 
 interface ActionButtonProps {
+    icon: ReactNode
     className?: string
-    icon?: ReactNode
     label?: string | MessageDescriptor
     onClick?: MouseEventHandler
     variant?: ActionIconVariant & ButtonVariant
-    hideLabelOnDesktop?: boolean
+    mode?: Mode
-    showLabelOnMobile?: boolean
 }
 
 /**
  * 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()
 
     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 ? (
+    const mode: Mode = props.mode ?? "auto"
-        <Tooltip label={label} openDelay={Constants.tooltip.delay}>
+    const iconOnly = mode === "mobile" || (mode === "auto" && mobile)
-            <ActionIcon
+
-                ref={ref}
+    return (
-                color={theme.primaryColor}
+        <Box ref={ref} className="cf-action-button">
-                variant={variant}
+            {iconOnly && (
-                className={props.className}
+                <Tooltip label={label} openDelay={Constants.tooltip.delay}>
-                onClick={props.onClick}
+                    <ActionIcon
-                aria-label={label}
+                        color={theme.primaryColor}
-            >
+                        variant={variant}
-                {props.icon}
+                        className={props.className}
-            </ActionIcon>
+                        onClick={props.onClick}
-        </Tooltip>
+                        aria-label={label}
-    ) : (
+                    >
-        <Button
+                        {props.icon}
-            ref={ref}
+                    </ActionIcon>
-            variant={variant}
+                </Tooltip>
-            size="xs"
+            )}
-            className={props.className}
+            {!iconOnly && (
-            leftSection={props.icon}
+                <Button
-            onClick={props.onClick}
+                    variant={variant}
-            aria-label={label}
+                    size="xs"
-        >
+                    className={props.className}
-            {label}
+                    leftSection={props.icon}
-        </Button>
+                    onClick={props.onClick}
+                    aria-label={label}
+                >
+                    {label}
+                </Button>
+            )}
+        </Box>
     )
 })
+
 ActionButton.displayName = "HeaderButton"

commafeed-client/src/components/Alert.tsx

@@ -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/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.css

@@ -1,4 +0,0 @@
-html,
-body {
-    overscroll-behavior: none;
-}

commafeed-client/src/components/DisablePullToRefresh.tsx

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

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
@@ -14,6 +14,7 @@ interface ImageWithPlaceholderWhileLoadingProps {
     placeholderHeight?: number
     placeholderBackgroundColor?: string
     placeholderIconSize?: number
+    onError?: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void
 }
 
 const useStyles = tss
@@ -44,7 +45,8 @@ export function ImageWithPlaceholderWhileLoading({
     title,
     width,
     style,
-}: ImageWithPlaceholderWhileLoadingProps) {
+    onError,
+}: Readonly<ImageWithPlaceholderWhileLoadingProps>) {
     const { classes } = useStyles({
         placeholderWidth,
         placeholderHeight,
@@ -70,6 +72,7 @@ export function ImageWithPlaceholderWhileLoading({
                 width={width}
                 height={height}
                 onLoad={() => setLoading(false)}
+                onError={onError}
                 style={{
                     ...style,
                     display: loading ? "none" : (style?.display ?? "initial"),

commafeed-client/src/components/KeyboardShortcutsHelp.tsx

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

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

@@ -1,11 +1,11 @@
 import { Trans } from "@lingui/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: "",
@@ -34,7 +34,11 @@ export function UserEdit(props: UserEditProps) {
             <form onSubmit={form.onSubmit(saveUser.execute)}>
                 <Stack>
                     <TextInput label={<Trans>Name</Trans>} {...form.getInputProps("name")} required />
-                    <PasswordInput label={<Trans>Password</Trans>} {...form.getInputProps("password")} required={!props.user} />
+                    <PasswordInput
+                        label={<Trans>Password</Trans>}
+                        {...form.getInputProps("password")}
+                        required={!props.user}
+                    />
                     <TextInput type="email" label={<Trans>E-mail</Trans>} {...form.getInputProps("email")} />
                     <Checkbox label={<Trans>Admin</Trans>} {...form.getInputProps("admin", { type: "checkbox" })} />
                     <Checkbox label={<Trans>Enabled</Trans>} {...form.getInputProps("enabled", { type: "checkbox" })} />

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,17 +1,17 @@
-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 = {
         async getWorker(_, label) {
             let worker: typeof import("*?worker")
             if (label === "css") {
-                worker = await import("monaco-editor/esm/vs/language/css/css.worker?worker")
+                worker = await import("monaco-editor/language/css/css.worker?worker")
             } else if (label === "javascript") {
-                worker = await import("monaco-editor/esm/vs/language/typescript/ts.worker?worker")
+                worker = await import("monaco-editor/language/typescript/ts.worker?worker")
             } else {
-                worker = await import("monaco-editor/esm/vs/editor/editor.worker?worker")
+                worker = await import("monaco-editor/editor/editor.worker?worker")
             }
             return new worker.default()
         },
@@ -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,6 +1,6 @@
-import { TypographyStylesProvider } from "@mantine/core"
+import { Typography } from "@mantine/core"
 import type { ReactNode } from "react"
-import { tss } from "tss"
+import { tss } from "@/tss"
 
 /**
  * This component is used to provide basic styles to html typography elements.
@@ -20,5 +20,5 @@ const useStyles = tss.create(() => ({
 
 export const BasicHtmlStyles = (props: { children: ReactNode }) => {
     const { classes } = useStyles()
-    return <TypographyStylesProvider className={classes.content}>{props.children}</TypographyStylesProvider>
+    return <Typography className={classes.content}>{props.children}</Typography>
 }

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

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

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

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

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

@@ -1,35 +1,34 @@
 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)
@@ -112,12 +111,13 @@ export function FeedEntries() {
                     const el = document.getElementById(Constants.dom.entryId(e))
                     return el && !Constants.layout.isTopVisible(el)
                 })
-            if (currentEntry) {
+            if (currentEntry && currentEntry.id !== selectedEntryId) {
                 dispatch(
                     selectEntry({
                         entry: currentEntry,
                         expand: false,
-                        markAsRead: !!scrollMarks,
+                        // don't mark as read entries that the user explicitly marked as unread
+                        markAsRead: !!scrollMarks && !currentEntry.keepUnread,
                         scrollToEntry: false,
                     })
                 )
@@ -125,7 +125,7 @@ export function FeedEntries() {
         })
         window.addEventListener("scroll", listener)
         return () => window.removeEventListener("scroll", listener)
-    }, [dispatch, entries, viewMode, scrollMarks, scrollingToEntry])
+    }, [dispatch, entries, viewMode, scrollMarks, scrollingToEntry, selectedEntryId])
 
     useMousetrap("r", async () => await dispatch(reloadEntries()))
     useMousetrap(
@@ -172,6 +172,8 @@ export function FeedEntries() {
                 })
             )
     )
+    useMousetrap("shift+j", async () => await dispatch(selectNextUnreadTreeItem({ direction: "forward" })))
+    useMousetrap("shift+k", async () => await dispatch(selectNextUnreadTreeItem({ direction: "backward" })))
     useMousetrap("space", () => {
         if (selectedEntry) {
             if (selectedEntry.expanded) {
@@ -272,17 +274,7 @@ export function FeedEntries() {
     })
     useMousetrap("shift+a", () => {
         // mark all entries as read
-        dispatch(
+        dispatch(markAllAsReadWithConfirmationIfRequired())
-            markAllEntries({
-                sourceType: source.type,
-                req: {
-                    id: source.id,
-                    read: true,
-                    olderThan: Date.now(),
-                    insertedBefore: entriesTimestamp,
-                },
-            })
-        )
     })
     useMousetrap("g a", async () => await dispatch(redirectToRootCategory()))
     useMousetrap("f", () => dispatch(toggleSidebar()))
@@ -296,33 +288,27 @@ 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")
-                    <FeedEntry
+                    }
-                        entry={entry}
+                    maxWidth={sidebarVisible ? Constants.layout.entryMaxWidth : undefined}
-                        expanded={!!entry.expanded || viewMode === "expanded"}
+                    onHeaderClick={event => headerClicked(entry, event)}
-                        selected={entry.id === selectedEntryId}
+                    onHeaderRightClick={event => headerRightClicked(entry, event)}
-                        showSelectionIndicator={entry.id === selectedEntryId && (!entry.expanded || viewMode === "expanded")}
+                    onBodyClick={() => bodyClicked(entry)}
-                        maxWidth={sidebarVisible ? Constants.layout.entryMaxWidth : undefined}
+                    onSwipedLeft={async () => await swipedLeft(entry)}
-                        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,69 +32,86 @@ const useStyles = tss
         rtl: boolean
         showSelectionIndicator: boolean
         maxWidth?: number
+        fontSizePercentage: number
     }>()
-    .create(({ theme, colorScheme, read, expanded, viewMode, rtl, showSelectionIndicator, maxWidth }) => {
+    .create(
-        let backgroundColor: string
+        ({
-        if (colorScheme === "dark") {
+            theme,
-            backgroundColor = read ? "inherit" : theme.colors.dark[5]
+            colorScheme,
-        } else {
+            read,
-            backgroundColor = read && !expanded ? theme.colors.gray[0] : "inherit"
+            expanded,
-        }
+            viewMode,
+            rtl,
+            showSelectionIndicator,
+            maxWidth,
+            fontSizePercentage,
+        }) => {
+            let backgroundColor: string
+            if (colorScheme === "dark") {
+                backgroundColor = read ? "inherit" : theme.colors.dark[5]
+            } else {
+                backgroundColor = read && !expanded ? theme.colors.gray[0] : "inherit"
+            }
 
-        let marginY = 10
+            let marginY = 10
-        if (viewMode === "title") {
+            if (viewMode === "title") {
-            marginY = 2
+                marginY = 2
-        } else if (viewMode === "cozy") {
+            } else if (viewMode === "cozy") {
-            marginY = 6
+                marginY = 6
-        }
+            }
 
-        let mobileMarginY = 6
+            let mobileMarginY = 6
-        if (viewMode === "title") {
+            if (viewMode === "title") {
-            mobileMarginY = 2
+                mobileMarginY = 2
-        } else if (viewMode === "cozy") {
+            } else if (viewMode === "cozy") {
-            mobileMarginY = 4
+                mobileMarginY = 4
-        }
+            }
 
-        let backgroundHoverColor = backgroundColor
+            let backgroundHoverColor = backgroundColor
-        if (!expanded && !read) {
+            if (!expanded && !read) {
-            backgroundHoverColor = colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]
+                backgroundHoverColor = colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]
-        }
+            }
 
-        let paperBorderLeftColor = ""
+            let paperBorderLeftColor = ""
-        if (showSelectionIndicator) {
+            if (showSelectionIndicator) {
-            const borderLeftColor = colorScheme === "dark" ? theme.colors[theme.primaryColor][4] : theme.colors[theme.primaryColor][6]
+                const borderLeftColor =
-            paperBorderLeftColor = `${borderLeftColor} !important`
+                    colorScheme === "dark" ? theme.colors[theme.primaryColor][4] : theme.colors[theme.primaryColor][6]
-        }
+                paperBorderLeftColor = `${borderLeftColor} !important`
+            }
 
-        return {
+            return {
-            paper: {
+                paper: {
-                backgroundColor,
+                    backgroundColor,
-                borderLeftColor: paperBorderLeftColor,
+                    borderLeftColor: paperBorderLeftColor,
-                marginTop: marginY,
+                    marginTop: marginY,
-                marginBottom: marginY,
+                    marginBottom: marginY,
-                [`@media (max-width: ${Constants.layout.mobileBreakpoint}px)`]: {
+                    [`@media (max-width: ${Constants.layout.mobileBreakpoint}px)`]: {
-                    marginTop: mobileMarginY,
+                        marginTop: mobileMarginY,
-                    marginBottom: mobileMarginY,
+                        marginBottom: mobileMarginY,
-                },
+                    },
-                "@media (hover: hover)": {
+                    "@media (hover: hover)": {
-                    "&:hover": {
+                        "&:hover": {
-                        backgroundColor: backgroundHoverColor,
+                            backgroundColor: backgroundHoverColor,
+                        },
                     },
                 },
-            },
+                headerLink: {
-            headerLink: {
+                    fontSize: `${fontSizePercentage}%`,
-                color: "inherit",
+                    color: "inherit",
-                textDecoration: "none",
+                    textDecoration: "none",
-            },
+                },
-            body: {
+                body: {
-                direction: rtl ? "rtl" : "ltr",
+                    fontSize: `${fontSizePercentage}%`,
-                maxWidth: maxWidth ?? "100%",
+                    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 +119,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)
@@ -111,7 +129,9 @@ export function FeedEntry(props: FeedEntryProps) {
     const showExternalLinkIcon =
         externalLinkDisplayMode && ["always", mobile ? "on_mobile" : "on_desktop"].includes(externalLinkDisplayMode)
     const showStarIcon =
-        props.entry.markable && starIconDisplayMode && ["always", mobile ? "on_mobile" : "on_desktop"].includes(starIconDisplayMode)
+        props.entry.markable &&
+        starIconDisplayMode &&
+        ["always", mobile ? "on_mobile" : "on_desktop"].includes(starIconDisplayMode)
 
     const swipeHandlers = useSwipeable({
         onSwipedLeft: props.onSwipedLeft,
@@ -137,6 +157,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 +200,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/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)
@@ -35,7 +35,12 @@ export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
     const { openLinkInBackgroundTab } = useBrowserExtension()
 
     return (
-        <Menu id={Constants.dom.entryContextMenuId(props.entry)} theme={colorScheme} animation={false} className={classes.menu}>
+        <Menu
+            id={Constants.dom.entryContextMenuId(props.entry)}
+            theme={colorScheme}
+            animation={false}
+            className={classes.menu}
+        >
             <Item
                 onClick={() => {
                     window.open(props.entry.url, "_blank", "noreferrer")
@@ -61,19 +66,27 @@ 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
-                        {props.entry.read ? <TbMail size={iconSize} /> : <TbMailOpened size={iconSize} />}
+                        onClick={async () =>
-                        {props.entry.read ? <Trans>Keep unread</Trans> : <Trans>Mark as read</Trans>}
+                            await dispatch(starEntry({ entry: props.entry, starred: !props.entry.starred }))
-                    </Group>
+                        }
-                </Item>
+                    >
+                        <Group>
+                            {props.entry.starred ? <TbStarOff size={iconSize} /> : <TbStar size={iconSize} />}
+                            {props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>}
+                        </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,29 @@
 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 {
-import { useAppDispatch, useAppSelector } from "app/store"
+    TbArrowBarToDown,
-import type { Entry } from "app/types"
+    TbExternalLink,
-import { ActionButton } from "components/ActionButton"
+    TbMail,
-import { useActionButton } from "hooks/useActionButton"
+    TbMailOpened,
-import { useMobile } from "hooks/useMobile"
+    TbShare,
-import { TbArrowBarToDown, TbExternalLink, TbMail, TbMailOpened, TbShare, TbStar, TbStarOff, TbTag } from "react-icons/tb"
+    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 +46,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
@@ -71,7 +80,12 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                 {tags && (
                     <Popover withArrow shadow="md" closeOnClickOutside={!mobile}>
                         <Popover.Target>
-                            <Indicator label={props.entry.tags.length} disabled={props.entry.tags.length === 0} inline size={16}>
+                            <Indicator
+                                label={props.entry.tags.length}
+                                disabled={props.entry.tags.length === 0}
+                                inline
+                                size={16}
+                            >
                                 <ActionButton icon={<TbTag size={18} />} label={msg`Tags`} />
                             </Indicator>
                         </Popover.Target>

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

@@ -1,14 +1,30 @@
-import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
+import { useTimeout } from "@mantine/hooks"
+import { useState } from "react"
+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>) {
+    // the backend always returns a favicon except when the feed has never been fetched
+    // this can happen when the user subscribes to a feed, the feed is added to the tree but the feed has not been fetched yet
+    // in this case we retry every second up to 3 times until the feed is fetched and the favicon is available
+    const [timestamp, setTimestamp] = useState(0)
+    const [retryCount, setRetryCount] = useState(0)
+    const { start: retry } = useTimeout(() => setTimestamp(Date.now()), 1000)
+
+    const urlWithTimestamp = url + (timestamp === 0 ? "" : `?t=${timestamp}`)
+    const handleError = () => {
+        if (retryCount < 3) {
+            setRetryCount(c => c + 1)
+            retry()
+        }
+    }
     return (
         <ImageWithPlaceholderWhileLoading
-            src={url}
+            src={urlWithTimestamp}
             alt="feed favicon"
             width={size}
             height={size}
@@ -16,6 +32,7 @@ export function FeedFavicon({ url, size = 18 }: FeedFaviconProps) {
             placeholderHeight={size}
             placeholderBackgroundColor="inherit"
             placeholderIconSize={size}
+            onError={handleError}
         />
     )
 }

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/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,9 +97,16 @@ 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 enabledSharingSites = (Object.keys(Constants.sharing) as Array<keyof SharingSettings>).filter(
+        site => sharingSettings?.[site]
+    )
     const url = encodeURIComponent(props.url)
     const desc = encodeURIComponent(props.description)
     const clipboardAvailable = typeof navigator.clipboard !== "undefined"
@@ -88,7 +121,9 @@ export function ShareButtons(props: { url: string; description: string }) {
             {showNativeSection && (
                 <SimpleGrid cols={4}>
                     {clipboardAvailable && <CopyUrlButton url={props.url} />}
-                    {nativeSharingAvailable && <BrowserNativeShareButton url={props.url} description={props.description} />}
+                    {nativeSharingAvailable && (
+                        <BrowserNativeShareButton url={props.url} description={props.description} />
+                    )}
                 </SimpleGrid>
             )}
 

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

@@ -3,14 +3,14 @@ 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() {
@@ -36,7 +36,12 @@ export function AddCategory() {
 
             <form onSubmit={form.onSubmit(addCategory.execute)}>
                 <Stack>
-                    <TextInput label={<Trans>Category</Trans>} placeholder={_(msg`Category`)} {...form.getInputProps("name")} required />
+                    <TextInput
+                        label={<Trans>Category</Trans>}
+                        placeholder={_(msg`Category`)}
+                        {...form.getInputProps("name")}
+                        required
+                    />
                     <CategorySelect label={<Trans>Parent</Trans>} {...form.getInputProps("parentId")} clearable />
                     <Group justify="center">
                         <Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>

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

@@ -1,11 +1,10 @@
 import { msg } from "@lingui/core/macro"
 import { useLingui } from "@lingui/react"
-import { Select, type SelectProps } from "@mantine/core"
+import { type ComboboxItem, 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

@@ -3,13 +3,13 @@ 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()
@@ -44,8 +44,8 @@ export function ImportOpml() {
                         placeholder={_(msg`OPML file`)}
                         description={
                             <Trans>
-                                An opml file is an XML file containing feed URLs and categories. You can get an OPML file by exporting your
+                                An opml file is an XML file containing feed URLs and categories. You can get an OPML
-                                data from other feed reading services.
+                                file by exporting your data from other feed reading services.
                             </Trans>
                         }
                         {...form.getInputProps("file")}

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

@@ -1,16 +1,16 @@
 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() {
@@ -39,9 +39,8 @@ export function Subscribe() {
         },
     })
     const subscribe = useAsyncCallback(client.feed.subscribe, {
-        onSuccess: async sub => {
+        onSuccess: sub => {
-            await dispatch(reloadTree())
+            dispatch(reloadTree()).then(() => dispatch(redirectToFeed(sub.data)))
-            dispatch(redirectToFeed(sub.data))
         },
     })
 
@@ -86,8 +85,8 @@ export function Subscribe() {
                             placeholder="https://www.mysite.com/rss"
                             description={
                                 <Trans>
-                                    The URL for the feed you want to subscribe to. You can also use the website's url directly and CommaFeed
+                                    The URL for the feed you want to subscribe to. You can also use the website's url
-                                    will try to find the feed in the page.
+                                    directly and CommaFeed will try to find the feed in the page.
                                 </Trans>
                             }
                             required
@@ -102,8 +101,17 @@ export function Subscribe() {
                     >
                         <Stack>
                             <TextInput label={<Trans>Feed URL</Trans>} {...step1Form.getInputProps("url")} disabled />
-                            <TextInput label={<Trans>Feed name</Trans>} {...step1Form.getInputProps("title")} required autoFocus />
+                            <TextInput
-                            <CategorySelect label={<Trans>Category</Trans>} {...step1Form.getInputProps("categoryId")} clearable />
+                                label={<Trans>Feed name</Trans>}
+                                {...step1Form.getInputProps("title")}
+                                required
+                                autoFocus
+                            />
+                            <CategorySelect
+                                label={<Trans>Category</Trans>}
+                                {...step1Form.getInputProps("categoryId")}
+                                clearable
+                            />
                         </Stack>
                     </Stepper.Step>
                 </Stepper>
@@ -118,7 +126,11 @@ export function Subscribe() {
                         </Button>
                     )}
                     {activeStep === 1 && (
-                        <Button type="submit" leftSection={<TbRss size={16} />} loading={fetchFeed.loading || subscribe.loading}>
+                        <Button
+                            type="submit"
+                            leftSection={<TbRss size={16} />}
+                            loading={fetchFeed.loading || subscribe.loading}
+                        >
                             <Trans>Subscribe</Trans>
                         </Button>
                     )}

commafeed-client/src/components/content/edit/FilteringExpressionEditor.tsx

@@ -0,0 +1,127 @@
+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,20 +1,30 @@
 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"
+import { tss } from "@/tss"
 
 export interface FeedEntryTitleProps {
     entry: Entry
 }
 
-export function FeedEntryTitle(props: FeedEntryTitleProps) {
+const useStyles = tss.create(() => ({
+    content: {
+        textWrap: "inherit",
+    },
+}))
+
+export function FeedEntryTitle(props: Readonly<FeedEntryTitleProps>) {
     const search = useAppSelector(state => state.entries.search)
     const keywords = search?.split(" ")
+
+    const { classes } = useStyles()
     return (
         <Highlight
             inherit
             highlight={keywords ?? ""}
             // make sure ellipsis is shown when title is too long
             span
+            className={classes.content}
         >
             {props.entry.title}
         </Highlight>

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

@@ -1,12 +1,16 @@
 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/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()
@@ -20,7 +24,10 @@ export function Star(props: { entry: Entry }) {
     }
 
     return (
-        <Tooltip label={props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>} openDelay={Constants.tooltip.delay}>
+        <Tooltip
+            label={props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>}
+            openDelay={Constants.tooltip.delay}
+        >
             <ActionIcon variant="transparent" onClick={onClick}>
                 {props.entry.starred ? <TbStarFilled size={18} /> : <TbStar size={18} />}
             </ActionIcon>

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

@@ -2,18 +2,11 @@ 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 { type ReactNode, useEffect } from "react"
-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,14 +17,27 @@ 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 { changeSettings } 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() {
     return <Divider orientation="vertical" />
 }
 
-function HeaderToolbar(props: { children: React.ReactNode }) {
+function HeaderToolbar(props: { children: ReactNode }) {
     const { spacing } = useActionButton()
     const mobile = useMobile("480px")
     return mobile ? (
@@ -42,11 +48,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} wrap="nowrap" className="cf-toolbar">
+            {props.children}
+        </Group>
     )
 }
 
@@ -60,11 +69,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(() => {
@@ -74,8 +79,27 @@ export function Header() {
     }, [setValues, searchFromStore])
 
     if (!settings) return <Loader />
+
+    const toggleReadingMode = async () => {
+        await dispatch(
+            changeSettings({
+                readingMode: settings.readingMode === "all" ? "unread" : "all",
+            })
+        )
+        dispatch(reloadEntries())
+    }
+
+    const toggleReadingOrder = async () => {
+        await dispatch(
+            changeSettings({
+                readingOrder: settings.readingOrder === "asc" ? "desc" : "asc",
+            })
+        )
+        dispatch(reloadEntries())
+    }
+
     return (
-        <Center>
+        <Center className="cf-toolbar-wrapper">
             <HeaderToolbar>
                 <ActionButton
                     icon={<TbArrowUp size={iconSize} />}
@@ -111,19 +135,29 @@ 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 />
 
                 <ActionButton
                     icon={settings.readingMode === "all" ? <TbEye size={iconSize} /> : <TbEyeOff size={iconSize} />}
                     label={settings.readingMode === "all" ? msg`All` : msg`Unread`}
-                    onClick={async () => await dispatch(changeReadingMode(settings.readingMode === "all" ? "unread" : "all"))}
+                    onClick={toggleReadingMode}
                 />
                 <ActionButton
-                    icon={settings.readingOrder === "asc" ? <TbSortAscending size={iconSize} /> : <TbSortDescending size={iconSize} />}
+                    icon={
+                        settings.readingOrder === "asc" ? (
+                            <TbSortAscending size={iconSize} />
+                        ) : (
+                            <TbSortDescending size={iconSize} />
+                        )
+                    }
                     label={settings.readingOrder === "asc" ? msg`Asc` : msg`Desc`}
-                    onClick={async () => await dispatch(changeReadingOrder(settings.readingOrder === "asc" ? "desc" : "asc"))}
+                    onClick={toggleReadingOrder}
                 />
 
                 <Popover>
@@ -138,7 +172,11 @@ export function Header() {
                                 placeholder={_(msg`Search`)}
                                 {...searchForm.getInputProps("search")}
                                 leftSection={<TbSearch size={iconSize} />}
-                                rightSection={<CloseButton onClick={async () => await (searchFromStore && dispatch(search("")))} />}
+                                rightSection={
+                                    <CloseButton
+                                        onClick={async () => await (searchFromStore && dispatch(search("")))}
+                                    />
+                                }
                                 autoFocus
                             />
                         </form>

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

@@ -1,98 +0,0 @@
-import { msg } from "@lingui/core/macro"
-import { Trans } from "@lingui/react/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

@@ -7,18 +7,12 @@ import {
     Menu,
     SegmentedControl,
     type SegmentedControlItem,
+    Slider,
     useMantineColorScheme,
 } from "@mantine/core"
 import { showNotification } from "@mantine/notifications"
-import { client } from "app/client"
-import { redirectToAbout, redirectToAdminUsers, redirectToDonate, redirectToMetrics, redirectToSettings } from "app/redirect/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
-import type { ViewMode } from "app/types"
-import { setViewMode } from "app/user/slice"
-import { reloadProfile } from "app/user/thunks"
 import dayjs from "dayjs"
-import { useNow } from "hooks/useNow"
+import { type ReactNode, useEffect, useState } from "react"
-import { type ReactNode, useState } from "react"
 import {
     TbChartLine,
     TbHeartFilled,
@@ -35,6 +29,20 @@ import {
     TbUsers,
     TbWorldDownload,
 } from "react-icons/tb"
+import { throttle } from "throttle-debounce"
+import { client } from "@/app/client"
+import {
+    redirectToAbout,
+    redirectToAdminUsers,
+    redirectToDonate,
+    redirectToMetrics,
+    redirectToSettings,
+} from "@/app/redirect/thunks"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import type { ViewMode } from "@/app/types"
+import { setFontSizePercentage, setViewMode } from "@/app/user/slice"
+import { reloadProfile } from "@/app/user/thunks"
+import { useNow } from "@/hooks/useNow"
 
 interface ProfileMenuProps {
     control: React.ReactElement
@@ -93,13 +101,22 @@ const viewModeData: ViewModeControlItem[] = [
     },
 ]
 
-export function ProfileMenu(props: ProfileMenuProps) {
+export function ProfileMenu(props: Readonly<ProfileMenuProps>) {
     const [opened, setOpened] = useState(false)
+
+    // close profile menu on scroll
+    useEffect(() => {
+        const listener = throttle(100, () => setOpened(false))
+        window.addEventListener("scroll", listener)
+        return () => window.removeEventListener("scroll", listener)
+    }, [])
+
     const now = useNow()
     const profile = useAppSelector(state => state.user.profile)
     const admin = useAppSelector(state => state.user.profile?.admin)
     const viewMode = useAppSelector(state => state.user.localSettings.viewMode)
     const forceRefreshCooldownDuration = useAppSelector(state => state.server.serverInfos?.forceRefreshCooldownDuration)
+    const fontSizePercentage = useAppSelector(state => state.user.localSettings.fontSizePercentage)
     const dispatch = useAppDispatch()
     const { colorScheme, setColorScheme } = useMantineColorScheme()
 
@@ -113,7 +130,13 @@ export function ProfileMenu(props: ProfileMenuProps) {
     }
 
     return (
-        <Menu position="bottom-end" closeOnItemClick={false} opened={opened} onChange={setOpened}>
+        <Menu
+            position="bottom-end"
+            closeOnItemClick={false}
+            opened={opened}
+            onChange={setOpened}
+            preventPositionChangeWhenVisible={false}
+        >
             <Menu.Target>{props.control}</Menu.Target>
             <Menu.Dropdown>
                 {profile && <Menu.Label>{profile.name}</Menu.Label>}
@@ -143,7 +166,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
                                 color: "green",
                                 autoClose: 1000,
                             })
-                        } catch (error) {
+                        } catch {
                             showNotification({
                                 message: <Trans>Force fetching feeds is not yet available.</Trans>,
                                 color: "red",
@@ -153,7 +176,9 @@ export function ProfileMenu(props: ProfileMenuProps) {
                     }}
                 >
                     <Trans>Fetch all my feeds now</Trans>
-                    {!forceRefreshEnabled && <span> ({dayjs.duration(nextAvailableForceRefresh - now.getTime()).format("HH:mm:ss")})</span>}
+                    {!forceRefreshEnabled && (
+                        <span> ({dayjs.duration(nextAvailableForceRefresh - now.getTime()).format("HH:mm:ss")})</span>
+                    )}
                 </Menu.Item>
 
                 <Divider />
@@ -184,6 +209,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/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")}
                     />
@@ -72,7 +83,11 @@ export function CustomCodeSettings() {
                         <Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
                             <Trans>Cancel</Trans>
                         </Button>
-                        <Button type="submit" leftSection={<TbDeviceFloppy size={16} />} loading={saveCustomCode.loading}>
+                        <Button
+                            type="submit"
+                            leftSection={<TbDeviceFloppy size={16} />}
+                            loading={saveCustomCode.loading}
+                        >
                             <Trans>Save</Trans>
                         </Button>
                     </Group>

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

@@ -1,47 +1,31 @@
 import { msg } from "@lingui/core/macro"
 import { useLingui } from "@lingui/react"
 import { Trans } from "@lingui/react/macro"
-import { Divider, Group, NumberInput, Radio, Select, SimpleGrid, Stack, Switch } from "@mantine/core"
-import type { ComboboxData } from "@mantine/core/lib/components/Combobox/Combobox.types"
-import { Constants } from "app/constants"
-import { useAppDispatch, useAppSelector } from "app/store"
-import type { IconDisplayMode, ScrollMode, SharingSettings } from "app/types"
 import {
-    changeCustomContextMenu,
+    Box,
-    changeEntriesToKeepOnTopWhenScrolling,
+    type ComboboxData,
-    changeExternalLinkIconDisplayMode,
+    Divider,
-    changeLanguage,
+    Group,
-    changeMarkAllAsReadConfirmation,
+    Loader,
-    changeMobileFooter,
+    NumberInput,
-    changeScrollMarks,
+    Radio,
-    changeScrollMode,
+    Select,
-    changeScrollSpeed,
+    type SelectProps,
-    changeSharingSetting,
+    SimpleGrid,
-    changeShowRead,
+    Stack,
-    changeStarIconDisplayMode,
+    Switch,
-    changeUnreadCountFavicon,
+} from "@mantine/core"
-    changeUnreadCountTitle,
-} from "app/user/thunks"
-import { locales } from "i18n"
 import type { ReactNode } from "react"
+import { Constants } from "@/app/constants"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import type { IconDisplayMode, ScrollMode, SharingSettings } from "@/app/types"
+import { changeSettings } from "@/app/user/thunks"
+import { locales } from "@/i18n"
 
 export function DisplaySettings() {
-    const language = useAppSelector(state => state.user.settings?.language)
+    const settings = useAppSelector(state => state.user.settings)
-    const scrollSpeed = useAppSelector(state => state.user.settings?.scrollSpeed)
-    const showRead = useAppSelector(state => state.user.settings?.showRead)
-    const scrollMarks = useAppSelector(state => state.user.settings?.scrollMarks)
-    const scrollMode = useAppSelector(state => state.user.settings?.scrollMode)
-    const entriesToKeepOnTop = useAppSelector(state => state.user.settings?.entriesToKeepOnTopWhenScrolling)
-    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 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 sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
-    const dispatch = useAppDispatch()
     const { _ } = useLingui()
+    const dispatch = useAppDispatch()
 
     const scrollModeOptions: Record<ScrollMode, ReactNode> = {
         always: <Trans>Always</Trans>,
@@ -68,78 +52,93 @@ 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>
+    )
+
+    if (!settings) return <Loader />
     return (
         <Stack>
+            <Divider label={<Trans>Display</Trans>} labelPosition="center" />
+
             <Select
-                description={<Trans>Language</Trans>}
+                label={<Trans>Language</Trans>}
-                value={language}
+                value={settings.language}
                 data={locales.map(l => ({
                     value: l.key,
                     label: l.label,
                 }))}
-                onChange={async s => await (s && dispatch(changeLanguage(s)))}
+                onChange={language => language && dispatch(changeSettings({ language }))}
+            />
+
+            <Select
+                label={<Trans>Primary color</Trans>}
+                data={colorData}
+                value={settings.primaryColor}
+                onChange={primaryColor => primaryColor && dispatch(changeSettings({ primaryColor }))}
+                renderOption={colorRenderer}
             />
 
             <Switch
                 label={<Trans>Show feeds and categories with no unread entries</Trans>}
-                checked={showRead}
+                checked={settings.showRead}
-                onChange={async e => await dispatch(changeShowRead(e.currentTarget.checked))}
+                onChange={e => dispatch(changeSettings({ showRead: e.currentTarget.checked }))}
             />
 
             <Switch
                 label={<Trans>Show confirmation when marking all entries as read</Trans>}
-                checked={markAllAsReadConfirmation}
+                checked={settings.markAllAsReadConfirmation}
-                onChange={async e => await dispatch(changeMarkAllAsReadConfirmation(e.currentTarget.checked))}
+                onChange={e => dispatch(changeSettings({ markAllAsReadConfirmation: e.currentTarget.checked }))}
+            />
+
+            <Switch
+                label={
+                    <Trans>
+                        Navigate to the next category/feed with unread entries when marking all entries as read
+                    </Trans>
+                }
+                checked={settings.markAllAsReadNavigateToNextUnread}
+                onChange={e => dispatch(changeSettings({ markAllAsReadNavigateToNextUnread: e.currentTarget.checked }))}
             />
 
             <Switch
                 label={<Trans>On mobile, show action buttons at the bottom of the screen</Trans>}
-                checked={mobileFooter}
+                checked={settings.mobileFooter}
-                onChange={async e => await dispatch(changeMobileFooter(e.currentTarget.checked))}
+                onChange={e => dispatch(changeSettings({ mobileFooter: e.currentTarget.checked }))}
-            />
-
-            <Divider label={<Trans>Browser tab</Trans>} labelPosition="center" />
-
-            <Switch
-                label={<Trans>Show unread count in tab title</Trans>}
-                checked={unreadCountTitle}
-                onChange={async e => await dispatch(changeUnreadCountTitle(e.currentTarget.checked))}
-            />
-
-            <Switch
-                label={<Trans>Show unread count in tab favicon</Trans>}
-                checked={unreadCountFavicon}
-                onChange={async e => await dispatch(changeUnreadCountFavicon(e.currentTarget.checked))}
-            />
-
-            <Divider label={<Trans>Entry headers</Trans>} labelPosition="center" />
-
-            <Select
-                description={<Trans>Show star icon</Trans>}
-                value={starIconDisplayMode}
-                data={displayModeData}
-                onChange={async s => await dispatch(changeStarIconDisplayMode(s as IconDisplayMode))}
-            />
-
-            <Select
-                description={<Trans>Show external link icon</Trans>}
-                value={externalLinkIconDisplayMode}
-                data={displayModeData}
-                onChange={async s => await dispatch(changeExternalLinkIconDisplayMode(s as IconDisplayMode))}
-            />
-
-            <Switch
-                label={<Trans>Show CommaFeed's own context menu on right click</Trans>}
-                checked={customContextMenu}
-                onChange={async e => await dispatch(changeCustomContextMenu(e.currentTarget.checked))}
             />
 
             <Divider label={<Trans>Scrolling</Trans>} labelPosition="center" />
 
+            <Switch
+                label={<Trans>Disable "Pull to refresh" browser behavior</Trans>}
+                description={<Trans>This setting can cause scrolling issues on some browsers (e.g. Safari)</Trans>}
+                checked={settings.disablePullToRefresh}
+                onChange={e => dispatch(changeSettings({ disablePullToRefresh: e.currentTarget.checked }))}
+            />
+
             <Radio.Group
                 label={<Trans>Scroll selected entry to the top of the page</Trans>}
-                value={scrollMode}
+                value={settings.scrollMode}
-                onChange={async value => await dispatch(changeScrollMode(value as ScrollMode))}
+                onChange={value => dispatch(changeSettings({ scrollMode: value }))}
             >
                 <Group mt="xs">
                     {Object.entries(scrollModeOptions).map(e => (
@@ -152,20 +151,56 @@ export function DisplaySettings() {
                 label={<Trans>Entries to keep above the selected entry when scrolling</Trans>}
                 description={<Trans>Only applies to compact, cozy and detailed modes</Trans>}
                 min={0}
-                value={entriesToKeepOnTop}
+                value={settings.entriesToKeepOnTopWhenScrolling}
-                onChange={async value => await dispatch(changeEntriesToKeepOnTopWhenScrolling(+value))}
+                onChange={value => dispatch(changeSettings({ entriesToKeepOnTopWhenScrolling: +value }))}
             />
 
             <Switch
                 label={<Trans>Scroll smoothly when navigating between entries</Trans>}
-                checked={scrollSpeed ? scrollSpeed > 0 : false}
+                checked={settings.scrollSpeed ? settings.scrollSpeed > 0 : false}
-                onChange={async e => await dispatch(changeScrollSpeed(e.currentTarget.checked))}
+                onChange={e => dispatch(changeSettings({ scrollSpeed: e.currentTarget.checked ? 400 : 0 }))}
             />
 
             <Switch
                 label={<Trans>In expanded view, scrolling through entries mark them as read</Trans>}
-                checked={scrollMarks}
+                checked={settings.scrollMarks}
-                onChange={async e => await dispatch(changeScrollMarks(e.currentTarget.checked))}
+                onChange={e => dispatch(changeSettings({ scrollMarks: e.currentTarget.checked }))}
+            />
+
+            <Divider label={<Trans>Browser tab</Trans>} labelPosition="center" />
+
+            <Switch
+                label={<Trans>Show unread count in tab title</Trans>}
+                checked={settings.unreadCountTitle}
+                onChange={e => dispatch(changeSettings({ unreadCountTitle: e.currentTarget.checked }))}
+            />
+
+            <Switch
+                label={<Trans>Show unread count in tab favicon</Trans>}
+                checked={settings.unreadCountFavicon}
+                onChange={e => dispatch(changeSettings({ unreadCountFavicon: e.currentTarget.checked }))}
+            />
+
+            <Divider label={<Trans>Entry headers</Trans>} labelPosition="center" />
+
+            <Select
+                label={<Trans>Show star icon</Trans>}
+                value={settings.starIconDisplayMode}
+                data={displayModeData}
+                onChange={value => dispatch(changeSettings({ starIconDisplayMode: value as IconDisplayMode }))}
+            />
+
+            <Select
+                label={<Trans>Show external link icon</Trans>}
+                value={settings.externalLinkIconDisplayMode}
+                data={displayModeData}
+                onChange={value => dispatch(changeSettings({ externalLinkIconDisplayMode: value as IconDisplayMode }))}
+            />
+
+            <Switch
+                label={<Trans>Show CommaFeed's own context menu on right click</Trans>}
+                checked={settings.customContextMenu}
+                onChange={e => dispatch(changeSettings({ customContextMenu: e.currentTarget.checked }))}
             />
 
             <Divider label={<Trans>Sharing sites</Trans>} labelPosition="center" />
@@ -175,12 +210,14 @@ export function DisplaySettings() {
                     <Switch
                         key={site}
                         label={Constants.sharing[site].label}
-                        checked={sharingSettings?.[site]}
+                        checked={settings.sharingSettings[site]}
-                        onChange={async e =>
+                        onChange={e =>
-                            await dispatch(
+                            dispatch(
-                                changeSharingSetting({
+                                changeSettings({
-                                    site,
+                                    sharingSettings: {
-                                    value: e.currentTarget.checked,
+                                        ...settings.sharingSettings,
+                                        [site]: e.currentTarget.checked,
+                                    },
                                 })
                             )
                         }

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

@@ -1,18 +1,30 @@
-import { msg } from "@lingui/core/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 {
+    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
@@ -20,13 +32,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
 
@@ -52,7 +68,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(() => {
@@ -85,8 +103,9 @@ export function ProfileSettings() {
                         label={<Trans>API key</Trans>}
                         description={
                             <Trans>
-                                This is your API key. It can be used for some read-only API operations and grants access to the Fever API.
+                                This is your API key. It can be used for some read-only API operations and grants access
-                                Use the form at the bottom of the page to generate a new API key
+                                to the Fever API and the Google Reader API. Use the form at the bottom of the page to
+                                generate a new API key
                             </Trans>
                         }
                         readOnly
@@ -97,7 +116,8 @@ export function ProfileSettings() {
                         label={<Trans>OPML export</Trans>}
                         description={
                             <Trans>
-                                Export your subscriptions and categories as an OPML file that can be imported in other feed reading services
+                                Export your subscriptions and categories as an OPML file that can be imported in other
+                                feed reading services
                             </Trans>
                         }
                     >
@@ -112,8 +132,8 @@ export function ProfileSettings() {
                         label={<Trans>Fever API</Trans>}
                         description={
                             <Trans>
-                                CommaFeed is compatible with the Fever API. Use the following URL in your Fever-compatible mobile client.
+                                CommaFeed is compatible with the Fever API. Use the following URL in your
-                                Login with your username and your <u>API key</u>.
+                                Fever-compatible mobile client. Login with your username and your <u>API key</u>.
                             </Trans>
                         }
                     >
@@ -124,6 +144,22 @@ export function ProfileSettings() {
                         </Box>
                     </Input.Wrapper>
 
+                    <Input.Wrapper
+                        label={<Trans>Google Reader API</Trans>}
+                        description={
+                            <Trans>
+                                CommaFeed is compatible with the Google Reader API. Use the following URL in your Google
+                                Reader-compatible mobile client. Login with your username and your <u>API key</u>.
+                            </Trans>
+                        }
+                    >
+                        <Box>
+                            <Anchor href="rest/googlereader" target="_blank">
+                                <Trans>Google Reader API URL</Trans>
+                            </Anchor>
+                        </Box>
+                    </Input.Wrapper>
+
                     <Divider />
 
                     <PasswordInput
@@ -132,14 +168,25 @@ 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>}
                         {...form.getInputProps("newPassword")}
                     />
-                    <PasswordInput label={<Trans>Confirm password</Trans>} {...form.getInputProps("newPasswordConfirmation")} />
+                    <PasswordInput
-                    <Checkbox label={<Trans>Generate new API key</Trans>} {...form.getInputProps("newApiKey", { type: "checkbox" })} />
+                        label={<Trans>Confirm password</Trans>}
+                        {...form.getInputProps("newPasswordConfirmation")}
+                    />
+                    <Checkbox
+                        label={<Trans>Generate new API key</Trans>}
+                        {...form.getInputProps("newApiKey", { type: "checkbox" })}
+                    />
 
                     <Group>
                         <Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>

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

@@ -0,0 +1,129 @@
+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 { changeSettings } 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(changeSettings({ pushNotificationSettings: 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/react/macro"
 import { Box, Stack } from "@mantine/core"
-import { Constants } from "app/constants"
+import React from "react"
+import { TbChevronDown, TbChevronRight, TbInbox, TbStar, TbTag } from "react-icons/tb"
+import { Constants } from "@/app/constants"
 import {
     redirectToCategory,
     redirectToCategoryDetails,
@@ -8,15 +10,14 @@ import {
     redirectToFeedDetails,
     redirectToTag,
     redirectToTagDetails,
-} from "app/redirect/thunks"
+} from "@/app/redirect/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
+import { useAppDispatch, useAppSelector } from "@/app/store"
-import { collapseTreeCategory } from "app/tree/thunks"
+import type { TreeSubscription } from "@/app/tree/slice"
-import type { Category, Subscription } from "app/types"
+import { collapseTreeCategory } from "@/app/tree/thunks"
-import { categoryUnreadCount, flattenCategoryTree } from "app/utils"
+import type { Category, Subscription } from "@/app/types"
-import { Loader } from "components/Loader"
+import { categoryHasNewEntries, categoryUnreadCount, flattenCategoryTree } from "@/app/utils"
-import { OnDesktop } from "components/responsive/OnDesktop"
+import { Loader } from "@/components/Loader"
-import React from "react"
+import { OnDesktop } from "@/components/responsive/OnDesktop"
-import { TbChevronDown, TbChevronRight, TbInbox, TbStar, TbTag } from "react-icons/tb"
 import { TreeNode } from "./TreeNode"
 import { TreeSearch } from "./TreeSearch"
 
@@ -89,10 +90,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 +106,12 @@ 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}
         />
     )
@@ -114,7 +119,11 @@ export function Tree() {
     const categoryNode = (category: Category, level = 0) => {
         if (!isCategoryDisplayed(category)) return null
 
-        const hasError = !category.expanded && flattenCategoryTree(category).some(c => c.feeds.some(f => f.errorCount > errorThreshold))
+        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 +131,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 +144,7 @@ export function Tree() {
         )
     }
 
-    const feedNode = (feed: Subscription, level = 0) => {
+    const feedNode = (feed: TreeSubscription, level = 0) => {
         if (!isFeedDisplayed(feed)) return null
 
         return (
@@ -143,9 +154,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 +172,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,7 +197,7 @@ export function Tree() {
             <OnDesktop>
                 <TreeSearch feeds={feeds} />
             </OnDesktop>
-            <Box>
+            <Box className="cf-tree">
                 {allCategoryNode()}
                 {starredCategoryNode()}
                 {root.children.map(c => recursiveCategoryNode(c))}

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

@@ -1,8 +1,8 @@
 import { Box, Center } from "@mantine/core"
-import type { EntrySourceType } from "app/entries/slice"
-import { FeedFavicon } from "components/content/FeedFavicon"
 import type React from "react"
-import { tss } from "tss"
+import type { EntrySourceType } from "@/app/entries/slice"
+import { FeedFavicon } from "@/components/content/FeedFavicon"
+import { tss } from "@/tss"
 import { UnreadCount } from "./UnreadCount"
 
 interface TreeNodeProps {
@@ -15,6 +15,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,34 @@ 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,20 +1,20 @@
 import { msg } from "@lingui/core/macro"
 import { useLingui } from "@lingui/react"
 import { Trans } from "@lingui/react/macro"
-import { TextInput } from "@mantine/core"
+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()
 
@@ -33,7 +33,7 @@ export function TreeSearch(props: TreeSearchProps) {
     useMousetrap("g u", () => spotlight.open())
 
     return (
-        <>
+        <Box className="cf-treesearch">
             <TextInput
                 placeholder={_(msg`Search`)}
                 leftSection={searchIcon}
@@ -58,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/globals.d.ts

@@ -0,0 +1,3 @@
+// required because of noUncheckedSideEffectImports
+// https://www.typescriptlang.org/tsconfig/#noUncheckedSideEffectImports
+declare module "@fontsource/open-sans"

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

commafeed-client/src/hooks/useMobile.ts

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

commafeed-client/src/hooks/useValidationRules.ts

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

commafeed-client/src/hooks/useWebSocket.ts

@@ -1,8 +1,8 @@
-import { setWebSocketConnected } from "app/server/slice"
-import { type AppDispatch, useAppDispatch, useAppSelector } from "app/store"
-import { newFeedEntriesDiscovered } from "app/tree/thunks"
 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(":")